/* App Shell */
.soc-app-shell {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-shell {
  padding: 0 20px 14px !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-list {
  display: grid !important;
  gap: 6px !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid #e6eaf1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  text-align: left !important;
  box-shadow: none !important;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable {
  cursor: pointer !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable:hover,
html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable:focus-visible {
  border-color: rgba(255, 106, 19, 0.42) !important;
  box-shadow: 0 8px 20px rgba(24, 39, 75, 0.08) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-rank {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #f6f7fb !important;
  color: #697286 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 800 !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-main {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-head {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-head strong {
  min-width: 0 !important;
  color: #202430 !important;
  font-size: 16px !important;
  line-height: 21px !important;
  font-weight: 800 !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-role,
html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-summary,
html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-last {
  margin: 0 !important;
  min-width: 0 !important;
  color: #697286 !important;
  font-size: 12px !important;
  line-height: 17px !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-last {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score {
  display: grid !important;
  justify-items: end !important;
  gap: 2px !important;
  min-width: 72px !important;
  padding-left: 8px !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score strong {
  color: #202430 !important;
  font-size: 20px !important;
  line-height: 22px !important;
  font-weight: 800 !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score span {
  color: #697286 !important;
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score[data-tone="focus"] strong {
  color: #202430 !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score[data-tone="warning"] strong {
  color: #c26b09 !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score[data-tone="danger"] strong {
  color: #d04f4f !important;
}

#analyticsHotspotModal .soc-analytics-hotspot-modal-panel {
  width: min(860px, calc(100vw - 32px));
  max-width: 860px;
  max-height: min(88vh, 880px);
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
}

#analyticsHotspotModal .soc-analytics-hotspot-modal-head {
  align-items: flex-start;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #edf1f6;
}

.soc-analytics-hotspot-modal-headline {
  display: grid;
  gap: 4px;
}

.soc-analytics-hotspot-modal-headline h2 {
  margin: 0;
}

.soc-analytics-hotspot-modal-body {
  display: grid;
  gap: 18px;
  padding: 22px 24px 24px;
  overflow: auto;
  max-height: calc(min(88vh, 880px) - 84px);
  background: #ffffff;
}

.soc-analytics-hotspot-modal-hero {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 108px;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid #e7edf4;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 247, 251, 0.92) 100%);
}

.soc-analytics-hotspot-modal-rank,
.soc-analytics-hotspot-modal-score {
  display: grid;
  gap: 4px;
  align-content: start;
}

.soc-analytics-hotspot-modal-rank strong,
.soc-analytics-hotspot-modal-score strong {
  color: #202430;
  font-size: 28px;
  line-height: 32px;
  font-weight: 800;
}

.soc-analytics-hotspot-modal-rank .label,
.soc-analytics-hotspot-modal-score .label,
.soc-analytics-hotspot-modal-summary-item .label,
.soc-analytics-hotspot-modal-breakdown-item .label {
  color: #697286;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.soc-analytics-hotspot-modal-identity {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-analytics-hotspot-modal-identity strong {
  color: #202430;
  font-size: 24px;
  line-height: 30px;
  font-weight: 800;
}

.soc-analytics-hotspot-modal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-analytics-hotspot-modal-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #e6eaf1;
  border-radius: 999px;
  background: #f8fafc;
  color: #5f697d;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.soc-analytics-hotspot-modal-summary {
  display: grid;
  gap: 14px;
}

.soc-analytics-hotspot-modal-summary-grid,
.soc-analytics-hotspot-modal-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.soc-analytics-hotspot-modal-summary-item,
.soc-analytics-hotspot-modal-breakdown-item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #e7edf4;
  border-radius: 14px;
  background: #ffffff;
}

.soc-analytics-hotspot-modal-summary-item strong,
.soc-analytics-hotspot-modal-breakdown-item strong {
  color: #202430;
  font-size: 18px;
  line-height: 22px;
  font-weight: 800;
}

.soc-analytics-hotspot-modal-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.soc-analytics-hotspot-modal-section-head h3 {
  margin: 0;
  color: #202430;
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
}

.soc-analytics-hotspot-modal-incidents {
  display: grid;
  gap: 12px;
}

.soc-analytics-hotspot-modal-incident-list {
  display: grid;
  gap: 10px;
}

.soc-analytics-hotspot-modal-incident-row {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e7edf4;
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
}

.soc-analytics-hotspot-modal-incident-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-analytics-hotspot-modal-incident-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.soc-analytics-hotspot-modal-incident-head strong {
  min-width: 0;
  color: #202430;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
}

.soc-analytics-hotspot-modal-incident-points {
  flex: 0 0 auto;
  color: #ff6a13;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.soc-analytics-hotspot-modal-incident-meta,
.soc-analytics-hotspot-modal-empty {
  color: #697286;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

@media (max-width: 1023px) {
  #analyticsHotspotModal .soc-analytics-hotspot-modal-panel {
    width: calc(100vw - 20px);
    max-height: min(92vh, 920px);
  }

  .soc-analytics-hotspot-modal-body {
    padding: 18px;
  }

  .soc-analytics-hotspot-modal-hero,
  .soc-analytics-hotspot-modal-summary-grid,
  .soc-analytics-hotspot-modal-breakdown-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ops support desktop authority moved to file end */

/* ===== Ops support final lock (2026-04-02) ===== */
@media (min-width: 1024px) {
  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) minmax(344px, 360px) !important;
    align-items: stretch !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet {
    min-height: var(--ops-support-shared-height, 620px) !important;
    height: var(--ops-support-shared-height, 620px) !important;
    max-height: var(--ops-support-shared-height, 620px) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-view {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view {
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid {
    align-content: stretch !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell {
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: 6px !important;
    overflow: hidden !important;
    padding: 8px 7px !important;
    border-radius: 12px !important;
    border-color: var(--ops-support-rail-border) !important;
    background: var(--ops-support-rail-surface) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body {
    min-height: 0 !important;
    gap: 4px !important;
    align-content: start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet {
    width: min(100%, 360px) !important;
    min-width: 0 !important;
    max-width: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px 15px !important;
    overflow: hidden !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 14px !important;
    background: var(--ops-support-rail-surface) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--ops-support-rail-border) !important;
    flex: 0 0 auto !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetTitle {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-sheet-head-copy > .meta {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-status-wrap {
    position: relative !important;
    flex: 0 0 auto !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-tab {
    min-height: 100% !important;
    padding: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet :is(
    .soc-ops-support-sheet-head-actions .ds-btn,
    .worker-row-actions .ds-btn,
    .worker-add-btn,
    [data-action="ops-support-enter-worker-edit"],
    .soc-ops-support-open-ticket-btn
  ) {
    min-height: 34px !important;
    height: 34px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    padding-inline: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action {
    border-color: var(--ops-support-neutral-border) !important;
    background: var(--ops-support-neutral-bg) !important;
    color: #445067 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:focus-visible {
    border-color: #c6d0dc !important;
    background: var(--ops-support-neutral-hover) !important;
    color: #2f3a4d !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn {
    border-color: var(--ops-support-strong-danger-border) !important;
    background: var(--ops-support-strong-danger) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:focus-visible,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn:focus-visible,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn:focus-visible {
    border-color: color-mix(in srgb, var(--ops-support-strong-danger-border) 86%, black) !important;
    background: var(--ops-support-strong-danger-hover) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn {
    border-color: var(--ops-support-strong-primary-border) !important;
    background: var(--ops-support-strong-primary) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn:focus-visible,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn:focus-visible,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn:focus-visible {
    border-color: var(--ops-support-strong-primary-border) !important;
    background: var(--ops-support-strong-primary-hover) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-summary-content {
    gap: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section {
    display: grid !important;
    gap: 8px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #eef2f6 !important;
    background: transparent !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section--summary {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-title {
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head .meta,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-context {
    font-size: 12px !important;
    line-height: 17px !important;
    color: var(--ops-support-rail-subtle) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-context {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric {
    min-height: 74px !important;
    gap: 5px !important;
    padding: 10px 11px !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: var(--ops-support-rail-muted) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric.is-requested {
    border-color: #ffd0a8 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric.is-self-staff {
    border-color: #dce3ec !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-label {
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: #7d8699 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric strong {
    min-height: 20px !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose {
    padding: 11px 12px !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: var(--ops-support-rail-surface) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    color: var(--ops-support-rail-text) !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-more summary {
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
    color: #445067 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is(
    .soc-ops-support-confirmed-block,
    .soc-ops-support-confirmed-disabled,
    .soc-ops-support-detail-timeline-body,
    .soc-ops-support-day-summary > div
  ) {
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: var(--ops-support-rail-surface) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-confirmed-block {
    padding: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline {
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-body {
    padding: 10px 11px !important;
    background: var(--ops-support-rail-muted) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-copy {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-day-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more {
    border-radius: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line {
    position: relative !important;
    padding: 7px 8px 7px 12px !important;
    border: 1px solid var(--ops-support-line-border, var(--ops-support-rail-border)) !important;
    background: var(--ops-support-line-bg, var(--ops-support-rail-surface)) !important;
    color: var(--ops-support-line-color, var(--ops-support-rail-text)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--ops-support-line-accent, var(--ops-support-cancelled-accent));
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line:hover {
    border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 36%, var(--ops-support-rail-border)) !important;
    background: color-mix(in srgb, var(--ops-support-line-bg, var(--ops-support-rail-surface)) 92%, white) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-selected {
    border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 46%, #ffb57d) !important;
    box-shadow: 0 0 0 2px rgba(255, 106, 19, 0.12) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-over-assigned {
    --ops-support-line-accent: var(--ops-support-danger-accent);
    --ops-support-line-border: var(--ops-support-danger-border);
    --ops-support-line-bg: color-mix(in srgb, var(--ops-support-danger-bg) 92%, white);
    --ops-support-line-color: var(--ops-support-danger-text);
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main {
    gap: 8px !important;
    align-items: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy {
    gap: 4px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-row {
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-side {
    gap: 5px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta-row {
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status {
    flex: 0 0 auto !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .support-status-inline {
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .support-status-chip {
    min-height: 22px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-text {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    margin-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending,
  html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-pending,
  html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-pending {
    --ops-support-line-accent: var(--ops-support-pending-accent);
    --ops-support-line-border: var(--ops-support-pending-border);
    --ops-support-line-bg: var(--ops-support-pending-bg);
    --ops-support-line-color: var(--ops-support-pending-text);
    border-color: var(--ops-support-pending-border) !important;
    background: var(--ops-support-pending-bg) !important;
    color: var(--ops-support-pending-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved,
  html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-approved,
  html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-approved {
    --ops-support-line-accent: var(--ops-support-approved-accent);
    --ops-support-line-border: var(--ops-support-approved-border);
    --ops-support-line-bg: var(--ops-support-approved-bg);
    --ops-support-line-color: var(--ops-support-approved-text);
    border-color: var(--ops-support-approved-border) !important;
    background: var(--ops-support-approved-bg) !important;
    color: var(--ops-support-approved-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-unavailable, .cal-line.state-rejected),
  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) {
    --ops-support-line-accent: var(--ops-support-danger-accent);
    --ops-support-line-border: var(--ops-support-danger-border);
    --ops-support-line-bg: var(--ops-support-danger-bg);
    --ops-support-line-color: var(--ops-support-danger-text);
    border-color: var(--ops-support-danger-border) !important;
    background: var(--ops-support-danger-bg) !important;
    color: var(--ops-support-danger-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled,
  html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-cancelled,
  html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-cancelled {
    --ops-support-line-accent: var(--ops-support-cancelled-accent);
    --ops-support-line-border: var(--ops-support-cancelled-border);
    --ops-support-line-bg: var(--ops-support-cancelled-bg);
    --ops-support-line-color: var(--ops-support-cancelled-text);
    border-color: var(--ops-support-cancelled-border) !important;
    background: var(--ops-support-cancelled-bg) !important;
    color: var(--ops-support-cancelled-text) !important;
  }
}

/* ===== Ops support Shople rail lock (2026-04-02) ===== */
body.soc-desktop-shell #opsSupportPanel {
  --ops-support-rail-surface: #ffffff;
  --ops-support-rail-muted: #fafbfd;
  --ops-support-rail-border: #e6eaf1;
  --ops-support-rail-text: #202430;
  --ops-support-rail-subtle: #697286;
  --ops-support-neutral-border: #d7dee8;
  --ops-support-neutral-bg: #ffffff;
  --ops-support-neutral-hover: #f8fafc;
  --ops-support-pending-accent: #ffbf3c;
  --ops-support-pending-bg: #fff7e8;
  --ops-support-pending-border: #ffd79c;
  --ops-support-pending-text: #a15b00;
  --ops-support-approved-accent: #1ebfa3;
  --ops-support-approved-bg: #ebfbf7;
  --ops-support-approved-border: #9ae4d5;
  --ops-support-approved-text: #127c69;
  --ops-support-danger-accent: #ff6b6b;
  --ops-support-danger-bg: #fff0f0;
  --ops-support-danger-border: #ffc3c3;
  --ops-support-danger-text: #c24755;
  --ops-support-cancelled-accent: #7c8798;
  --ops-support-cancelled-bg: #f4f6f9;
  --ops-support-cancelled-border: #d6dde8;
  --ops-support-cancelled-text: #586578;
  --ops-support-strong-danger: #ff6b6b;
  --ops-support-strong-danger-border: #d85151;
  --ops-support-strong-danger-hover: #e65555;
  --ops-support-strong-primary: #ff6a13;
  --ops-support-strong-primary-border: #dc5b11;
  --ops-support-strong-primary-hover: #ea5d08;
}

[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel {
  --ops-support-rail-surface: var(--soc-card-bg);
  --ops-support-rail-muted: color-mix(in srgb, var(--soc-card-bg) 88%, white);
  --ops-support-rail-border: var(--ops-support-border, #334155);
  --ops-support-rail-text: var(--ui-text-primary, #f8fafc);
  --ops-support-rail-subtle: var(--ui-text-secondary, #cbd5e1);
  --ops-support-neutral-border: color-mix(in srgb, var(--ops-support-rail-border) 82%, white);
  --ops-support-neutral-bg: var(--soc-card-bg);
  --ops-support-neutral-hover: color-mix(in srgb, var(--soc-card-bg) 86%, white);
  --ops-support-pending-bg: color-mix(in srgb, #ffbf3c 16%, var(--soc-card-bg));
  --ops-support-pending-border: color-mix(in srgb, #ffbf3c 36%, var(--ops-support-rail-border));
  --ops-support-pending-text: #ffd08a;
  --ops-support-approved-bg: color-mix(in srgb, #1ebfa3 16%, var(--soc-card-bg));
  --ops-support-approved-border: color-mix(in srgb, #1ebfa3 36%, var(--ops-support-rail-border));
  --ops-support-approved-text: #9ce8d9;
  --ops-support-danger-bg: color-mix(in srgb, #ff6b6b 16%, var(--soc-card-bg));
  --ops-support-danger-border: color-mix(in srgb, #ff6b6b 36%, var(--ops-support-rail-border));
  --ops-support-danger-text: #ffc3c8;
  --ops-support-cancelled-bg: color-mix(in srgb, #94a3b8 16%, var(--soc-card-bg));
  --ops-support-cancelled-border: color-mix(in srgb, #94a3b8 34%, var(--ops-support-rail-border));
  --ops-support-cancelled-text: #d7e0eb;
  --ops-support-strong-danger: #ff7b7b;
  --ops-support-strong-danger-border: #ff6363;
  --ops-support-strong-danger-hover: #ff6c6c;
  --ops-support-strong-primary: #ff7a29;
  --ops-support-strong-primary-border: #f56c17;
  --ops-support-strong-primary-hover: #ff6d16;
}

@media (min-width: 1024px) {
  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) minmax(344px, 360px) !important;
    align-items: stretch !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet {
    min-height: var(--ops-support-shared-height, 620px) !important;
    height: var(--ops-support-shared-height, 620px) !important;
    max-height: var(--ops-support-shared-height, 620px) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-view {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view {
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid {
    align-content: stretch !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell {
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: 6px !important;
    overflow: hidden !important;
    padding: 8px 7px !important;
    border-radius: 12px !important;
    border-color: var(--ops-support-rail-border) !important;
    background: var(--ops-support-rail-surface) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body {
    min-height: 0 !important;
    gap: 4px !important;
    align-content: start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet {
    width: min(100%, 360px) !important;
    min-width: 0 !important;
    max-width: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px 15px !important;
    overflow: hidden !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 14px !important;
    background: var(--ops-support-rail-surface) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--ops-support-rail-border) !important;
    flex: 0 0 auto !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetTitle {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-sheet-head-copy > .meta {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-status-wrap {
    position: relative !important;
    flex: 0 0 auto !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-tab {
    min-height: 100% !important;
    padding: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet :is(
    .soc-ops-support-sheet-head-actions .ds-btn,
    .worker-row-actions .ds-btn,
    .worker-add-btn,
    [data-action="ops-support-enter-worker-edit"],
    .soc-ops-support-open-ticket-btn
  ) {
    min-height: 34px !important;
    height: 34px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    padding-inline: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action {
    border-color: var(--ops-support-neutral-border) !important;
    background: var(--ops-support-neutral-bg) !important;
    color: #445067 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:focus-visible {
    border-color: #c6d0dc !important;
    background: var(--ops-support-neutral-hover) !important;
    color: #2f3a4d !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn {
    border-color: var(--ops-support-strong-danger-border) !important;
    background: var(--ops-support-strong-danger) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:focus-visible,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn:focus-visible,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn:focus-visible {
    border-color: color-mix(in srgb, var(--ops-support-strong-danger-border) 86%, black) !important;
    background: var(--ops-support-strong-danger-hover) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn {
    border-color: var(--ops-support-strong-primary-border) !important;
    background: var(--ops-support-strong-primary) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn:focus-visible,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn:focus-visible,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn:focus-visible {
    border-color: var(--ops-support-strong-primary-border) !important;
    background: var(--ops-support-strong-primary-hover) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn {
    border-color: var(--ops-support-strong-primary-border) !important;
    background: var(--ops-support-strong-primary) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-summary-content {
    gap: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section {
    display: grid !important;
    gap: 8px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #eef2f6 !important;
    background: transparent !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section--summary {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-title {
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head .meta,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-context {
    font-size: 12px !important;
    line-height: 17px !important;
    color: var(--ops-support-rail-subtle) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-context {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric {
    min-height: 74px !important;
    gap: 5px !important;
    padding: 10px 11px !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: var(--ops-support-rail-muted) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric.is-requested {
    border-color: #ffd0a8 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric.is-self-staff {
    border-color: #dce3ec !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-label {
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: #7d8699 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric strong {
    min-height: 20px !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose {
    padding: 11px 12px !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: var(--ops-support-rail-surface) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    color: var(--ops-support-rail-text) !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-more {
    padding-top: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-more summary {
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
    color: #445067 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-kv {
    gap: 8px !important;
    padding-top: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is(
    .soc-ops-support-confirmed-block,
    .soc-ops-support-confirmed-disabled,
    .soc-ops-support-detail-timeline-body,
    .soc-ops-support-day-summary > div
  ) {
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: var(--ops-support-rail-surface) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-confirmed-block {
    padding: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline {
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-body {
    padding: 10px 11px !important;
    background: var(--ops-support-rail-muted) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-copy {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-day-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more {
    border-radius: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line {
    position: relative !important;
    padding: 7px 8px 7px 12px !important;
    border: 1px solid var(--ops-support-line-border, var(--ops-support-rail-border)) !important;
    background: var(--ops-support-line-bg, var(--ops-support-rail-surface)) !important;
    color: var(--ops-support-line-color, var(--ops-support-rail-text)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--ops-support-line-accent, var(--ops-support-cancelled-accent));
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line:hover {
    border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 36%, var(--ops-support-rail-border)) !important;
    background: color-mix(in srgb, var(--ops-support-line-bg, var(--ops-support-rail-surface)) 92%, white) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-selected {
    border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 46%, #ffb57d) !important;
    box-shadow: 0 0 0 2px rgba(255, 106, 19, 0.12) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-over-assigned {
    --ops-support-line-accent: var(--ops-support-danger-accent);
    --ops-support-line-border: var(--ops-support-danger-border);
    --ops-support-line-bg: color-mix(in srgb, var(--ops-support-danger-bg) 92%, white);
    --ops-support-line-color: var(--ops-support-danger-text);
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main {
    gap: 8px !important;
    align-items: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy {
    gap: 4px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-row {
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-side {
    gap: 5px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta-row {
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status {
    flex: 0 0 auto !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .support-status-inline {
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .support-status-chip {
    min-height: 22px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-text {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    margin-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending,
  html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-pending,
  html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-pending {
    --ops-support-line-accent: var(--ops-support-pending-accent);
    --ops-support-line-border: var(--ops-support-pending-border);
    --ops-support-line-bg: var(--ops-support-pending-bg);
    --ops-support-line-color: var(--ops-support-pending-text);
    border-color: var(--ops-support-pending-border) !important;
    background: var(--ops-support-pending-bg) !important;
    color: var(--ops-support-pending-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved,
  html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-approved,
  html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-approved {
    --ops-support-line-accent: var(--ops-support-approved-accent);
    --ops-support-line-border: var(--ops-support-approved-border);
    --ops-support-line-bg: var(--ops-support-approved-bg);
    --ops-support-line-color: var(--ops-support-approved-text);
    border-color: var(--ops-support-approved-border) !important;
    background: var(--ops-support-approved-bg) !important;
    color: var(--ops-support-approved-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-unavailable, .cal-line.state-rejected),
  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) {
    --ops-support-line-accent: var(--ops-support-danger-accent);
    --ops-support-line-border: var(--ops-support-danger-border);
    --ops-support-line-bg: var(--ops-support-danger-bg);
    --ops-support-line-color: var(--ops-support-danger-text);
    border-color: var(--ops-support-danger-border) !important;
    background: var(--ops-support-danger-bg) !important;
    color: var(--ops-support-danger-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled,
  html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-cancelled,
  html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-cancelled {
    --ops-support-line-accent: var(--ops-support-cancelled-accent);
    --ops-support-line-border: var(--ops-support-cancelled-border);
    --ops-support-line-bg: var(--ops-support-cancelled-bg);
    --ops-support-line-color: var(--ops-support-cancelled-text);
    border-color: var(--ops-support-cancelled-border) !important;
    background: var(--ops-support-cancelled-bg) !important;
    color: var(--ops-support-cancelled-text) !important;
  }
}

/* ===== Pass38 Home + Analytics v2 final ===== */
@media (min-width: 1024px) {
  html body.soc-desktop-shell #homeView .soc-home-hub,
  html body.soc-desktop-shell #analyticsView .soc-analytics-board {
    display: grid !important;
    gap: 18px !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-header-main {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 18px !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-header-meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-live-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 106, 19, 0.18) !important;
    border-radius: 999px !important;
    background: #fff4eb !important;
    color: #ff6a13 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-header-note {
    color: #697286 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub .soc-home-hub-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body.soc-desktop-shell :is(#homeView .soc-home-hub-card, #analyticsView .soc-analytics-board-card) {
    border: 1px solid #e6eaf1 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(32, 36, 48, 0.05) !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-card.soc-home-hub-kpi {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 148px !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi.is-secondary-emphasis {
    background: linear-gradient(180deg, #fffaf2 0%, #ffffff 100%) !important;
    border-color: #f6d9a8 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi.is-emphasis {
    background: linear-gradient(180deg, #fff7f0 0%, #fff2e7 100%) !important;
    border-color: #ffcfb0 !important;
    box-shadow: 0 14px 32px rgba(255, 106, 19, 0.1) !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 0 !important;
    flex: 0 0 38px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon::before,
  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon::before {
    inset: 9px 11px auto !important;
    height: 7px !important;
    opacity: 0.95 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-icon::after {
    inset: auto 11px 9px !important;
    height: 7px !important;
    opacity: 0.48 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi[data-tone="intake"] .soc-home-hub-kpi-icon {
    color: #2563eb !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi[data-tone="critical"] .soc-home-hub-kpi-icon {
    color: #d97706 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi[data-tone="pending"] .soc-home-hub-kpi-icon {
    color: #64748b !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi[data-tone="urgent"] .soc-home-hub-kpi-icon {
    color: #dc2626 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-label {
    color: #697286 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-main {
    display: grid !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-value {
    color: #202430 !important;
    font-size: 36px !important;
    line-height: 40px !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-meta {
    color: #697286 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-visual {
    display: grid !important;
    align-content: end !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-visual--inline {
    align-content: start !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-meter {
    display: flex !important;
    gap: 2px !important;
    width: 100% !important;
    height: 10px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: #edf1f6 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-kpi-meter > span {
    display: block !important;
    height: 100% !important;
    min-width: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #ff8d47 0%, #ff6a13 100%) !important;
  }

  html body.soc-desktop-shell #homeView #homeHubKpiIntakeIncidentBar {
    background: linear-gradient(90deg, #ff924f 0%, #ff6a13 100%) !important;
  }

  html body.soc-desktop-shell #homeView #homeHubKpiIntakeTicketBar {
    background: linear-gradient(90deg, #6ca6ff 0%, #2f80ff 100%) !important;
  }

  html body.soc-desktop-shell #homeView #homeHubKpiCriticalBar {
    background: linear-gradient(90deg, #ffd56b 0%, #ffbf3c 100%) !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-status-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border: 1px solid #dbe1ea !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #697286 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-warning,
  html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-active.is-warning {
    border-color: #f5d59b !important;
    background: #fff8ee !important;
    color: #b76a11 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-alert,
  html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-active.is-alert {
    border-color: #ffd2b2 !important;
    background: #fff1e7 !important;
    color: #d85c15 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-status-chip.is-neutral {
    border-color: #dbe1ea !important;
    background: #f8fafc !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub .soc-home-hub-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1.72fr) minmax(300px, 0.96fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub .soc-home-hub-secondary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub .soc-home-hub-card-head,
  html body.soc-desktop-shell #analyticsView .soc-analytics-board-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 20px 10px !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-card-head h3,
  html body.soc-desktop-shell #analyticsView .soc-analytics-board-card-head h3 {
    margin: 0 !important;
    color: #202430 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-card-head .meta,
  html body.soc-desktop-shell #analyticsView .soc-analytics-board-card-head .meta {
    margin: 2px 0 0 !important;
    color: #7b869d !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-hub-card-body {
    padding: 0 20px 18px !important;
  }

  html body.soc-desktop-shell #homeView :is(.soc-home-priority-list, .soc-home-ticket-queue, .soc-home-mini-list) {
    display: grid !important;
    gap: 10px !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-list-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 132px !important;
    padding: 18px !important;
    border: 1px dashed #dbe1ea !important;
    border-radius: 16px !important;
    background: #fafbfd !important;
    color: #697286 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    font-weight: 600 !important;
    text-align: center !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-row {
    display: grid !important;
    grid-template-columns: 6px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    text-align: left !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-rail {
    align-self: stretch !important;
    border-radius: 999px !important;
    background: #d7dee8 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-rail[data-tone="warning"] {
    background: linear-gradient(180deg, #ffd673 0%, #ffbf3c 100%) !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-rail[data-tone="danger"] {
    background: linear-gradient(180deg, #ff924f 0%, #ff6a13 100%) !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-main,
  html body.soc-desktop-shell #homeView .soc-home-mini-main,
  html body.soc-desktop-shell #homeView .soc-home-watch-main,
  html body.soc-desktop-shell #homeView .soc-home-ticket-main {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-main-top,
  html body.soc-desktop-shell #homeView .soc-home-watch-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-watch-top {
    justify-content: space-between !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-main-top .soc-home-priority-title,
  html body.soc-desktop-shell #homeView .soc-home-watch-top .soc-home-watch-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-title,
  html body.soc-desktop-shell #homeView .soc-home-ticket-title,
  html body.soc-desktop-shell #homeView .soc-home-mini-title,
  html body.soc-desktop-shell #homeView .soc-home-watch-title {
    min-width: 0 !important;
    color: #202430 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-meta,
  html body.soc-desktop-shell #homeView .soc-home-ticket-meta,
  html body.soc-desktop-shell #homeView .soc-home-mini-meta,
  html body.soc-desktop-shell #homeView .soc-home-watch-meta,
  html body.soc-desktop-shell #homeView :is(.soc-home-priority-age, .soc-home-ticket-age, .soc-home-mini-age) {
    color: #697286 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #homeView :is(.soc-home-priority-chip, .soc-home-watch-chip, .soc-home-ticket-state, .soc-home-priority-badge) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-chip[data-tone="incident"] {
    background: #fff1e6 !important;
    color: #ff6a13 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-chip[data-tone="ticket"] {
    background: #eef4ff !important;
    color: #2f80ff !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-side,
  html body.soc-desktop-shell #homeView .soc-home-ticket-side {
    display: grid !important;
    justify-items: end !important;
    gap: 6px !important;
    min-width: 80px !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-badge[data-tone="warning"] {
    background: #fff7eb !important;
    color: #b76a11 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-badge[data-tone="danger"] {
    background: #fff1e6 !important;
    color: #d85c15 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-badge[data-tone="neutral"] {
    background: #f4f7fa !important;
    color: #5f6b81 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-ticket-row,
  html body.soc-desktop-shell #homeView .soc-home-mini-row,
  html body.soc-desktop-shell #homeView .soc-home-watch-row {
    display: grid !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    text-align: left !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-ticket-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-ticket-state {
    background: #f8fafc !important;
    color: #697286 !important;
    border: 1px solid #dbe1ea !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-mini-row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: start !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-mini-marker {
    width: 10px !important;
    height: 10px !important;
    margin-top: 5px !important;
    border-radius: 999px !important;
    background: #c6ced9 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-mini-marker[data-tone="warning"] {
    background: #ffbf3c !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-mini-marker[data-tone="danger"] {
    background: #ff6a13 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-watch-row {
    gap: 10px !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-watch-chip[data-tone="danger"] {
    background: #fff1f1 !important;
    color: #d83a3a !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-watch-chip[data-tone="caution"] {
    background: #fff7eb !important;
    color: #b76a11 !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-watch-score {
    color: #202430 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-watch-meter {
    width: 100% !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #edf1f6 !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-watch-meter > span {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #ffbf3c 0%, #ff8d47 100%) !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-watch-meter > span[data-tone="danger"] {
    background: linear-gradient(90deg, #ff8d47 0%, #ff6a13 100%) !important;
  }

  html body.soc-desktop-shell #homeView .soc-home-priority-row:hover,
  html body.soc-desktop-shell #homeView .soc-home-ticket-row:hover,
  html body.soc-desktop-shell #homeView .soc-home-mini-row:hover,
  html body.soc-desktop-shell #homeView .soc-home-watch-row:hover {
    border-color: #ffd2b2 !important;
    box-shadow: 0 10px 24px rgba(255, 106, 19, 0.09) !important;
    transform: translateY(-1px) !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-v2-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 18px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px 12px !important;
    padding: 12px 14px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-group {
    gap: 6px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-label {
    color: #7b869d !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRow {
    display: grid !important;
    grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.36fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-body--risk {
    display: grid !important;
    gap: 14px !important;
    padding: 0 20px 18px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-risk-scope-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #445067 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-core {
    display: grid !important;
    grid-template-columns: 168px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap {
    position: relative !important;
    width: 168px !important;
    height: 168px !important;
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge {
    width: 168px !important;
    height: 168px !important;
    overflow: visible !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard :is(.soc-analytics-v2-risk-gauge-track, .soc-analytics-v2-risk-gauge-arc) {
    fill: none !important;
    stroke-width: 10 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track {
    stroke: #edf1f6 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc {
    stroke-linecap: round !important;
    transform: rotate(-90deg) !important;
    transform-origin: 50% 50% !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-value-wrap {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue {
    color: #202430 !important;
    font-size: 54px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.06em !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-side {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    align-self: start !important;
    padding-top: 10px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-risk-grade {
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 34px !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-summary-line {
    margin: 0 !important;
    color: #5f697d !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    padding-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-body,
  html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-board-card-body,
  html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-columns,
  html body.soc-desktop-shell #analyticsView :is(#analyticsTrendPanel .soc-analytics-chart-shell, #analyticsPatternPanel .soc-analytics-pattern-shell, #analyticsCausePanel .soc-analytics-cause-shell, #analyticsPeoplePanel .soc-analytics-hotspot-shell) {
    padding: 0 20px 14px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile {
    min-height: 88px !important;
    padding: 14px 16px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .label {
    color: #697286 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong {
    color: #202430 !important;
    font-size: 26px !important;
    line-height: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-health-panel {
    padding: 12px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #edf1f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-health-bar {
    height: 8px !important;
    margin-bottom: 10px !important;
    background: #e6eaf1 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-health-legend {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-toolbar {
    padding: 0 20px 12px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-controls {
    gap: 10px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-shell {
    overflow: hidden !important;
    border: 1px solid #eef1f6 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-head {
    min-height: 44px !important;
    padding: 0 16px !important;
    background: #f7f9fc !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-body {
    display: grid !important;
    grid-auto-rows: var(--analytics-comparison-row-height, 68px) !important;
    min-height: calc(var(--analytics-comparison-row-height, 68px) * 5) !important;
    max-height: calc(var(--analytics-comparison-row-height, 68px) * 5) !important;
    height: calc(var(--analytics-comparison-row-height, 68px) * 5) !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-site-row {
    min-height: var(--analytics-comparison-row-height, 68px) !important;
    height: var(--analytics-comparison-row-height, 68px) !important;
    padding: 0 16px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer {
    min-height: 56px !important;
    padding: 10px 16px !important;
    border-top: 1px solid #eef2f6 !important;
    background: #fbfcfe !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsAnalysisBoard {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  html body.soc-desktop-shell #analyticsView :is(#analyticsTrendPanel, #analyticsPatternPanel) {
    min-height: 286px !important;
  }

  html body.soc-desktop-shell #analyticsView :is(#analyticsCausePanel, #analyticsPeoplePanel) {
    min-height: 168px !important;
  }

html body.soc-desktop-shell #analyticsView #analyticsPatternPanel .soc-analytics-pattern-toolbar {
  display: grid !important;
  gap: 8px !important;
  align-items: stretch !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPatternPanel .soc-analytics-pattern-toolbar-top {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

html body.soc-desktop-shell #analyticsView #analyticsPatternPanel .soc-analytics-pattern-toolbar-bottom {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

  html body.soc-desktop-shell #analyticsView .soc-analytics-line-chart {
    width: 100% !important;
    height: 220px !important;
    display: block !important;
    overflow: visible !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-line-chart .grid {
    stroke: #e9edf4 !important;
    stroke-width: 1 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-line-chart .area {
    fill: rgba(255, 111, 26, 0.12) !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-line-chart .line {
    fill: none !important;
    stroke: #ff6f1a !important;
    stroke-width: 3 !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-line-axis {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    color: #8b93a6 !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-grid-board {
    display: grid !important;
    grid-template-columns: 44px repeat(12, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-axis,
  html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-row-label {
    color: #7b869d !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board {
    min-height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid #edf0f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #202430 !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i1 {
    background: #fff6ee !important;
    border-color: #ffd8bf !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i2 {
    background: #ffe8d1 !important;
    border-color: #ffca9d !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i3 {
    background: #ffd4ae !important;
    border-color: #ffb068 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i4 {
    background: #ffb67d !important;
    border-color: #ff8f3d !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-pattern-cell-board.i5 {
    background: #ff8a3d !important;
    border-color: #ff6f1a !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-cause-list,
  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-columns,
  html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-list {
    display: grid !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-cause-row {
    display: grid !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-cause-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: #202430 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-cause-track {
    height: 8px !important;
    border-radius: 999px !important;
    background: #edf0f6 !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-cause-track span {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #ff9143 0%, #ff6f1a 100%) !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-row,
  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item {
    display: grid !important;
    gap: 2px !important;
    padding: 10px 14px !important;
    border: 1px solid #edf0f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-rank {
    color: #8b93a6 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-head strong {
    font-size: 16px !important;
    line-height: 21px !important;
  }

  html body.soc-desktop-shell #analyticsView :is(.soc-analytics-hotspot-role, .soc-analytics-hotspot-summary) {
    font-size: 12px !important;
    line-height: 17px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-hotspot-score strong {
    font-size: 20px !important;
    line-height: 22px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-column {
    padding: 14px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 14px !important;
    background: #fcfdff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-column h4 {
    margin: 0 0 10px !important;
    color: #202430 !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 800 !important;
  }
}

/* ===== Pass26 ops detail cleanup ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 40px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    flex: 1 1 460px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar .soc-realtime-date-display {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions {
    gap: 6px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 72px !important;
    padding: 14px 16px 10px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head h3 {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-summary {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel {
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions {
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn {
    color: #d46464 !important;
    border-color: #f1d6d6 !important;
    background: #fffafa !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel > .meta {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    color: #697286 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty {
    display: none;
    gap: 4px;
    padding-top: 2px;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title {
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: #202430;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    color: #697286;
    word-break: keep-all;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-right: 1px solid #e6eaf1 !important;
    border-bottom: 1px solid #e6eaf1 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child {
    grid-column: 1 / -1 !important;
    border-right: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2) {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) {
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 11px !important;
    line-height: 15px !important;
    color: #7d8699 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    color: #202430 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section {
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title {
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #525d73 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary {
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv {
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row dt {
    font-size: 12px !important;
    line-height: 17px !important;
    color: #7d8699 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row dd {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #202430 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread {
    min-height: 112px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form {
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #edf1f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel {
    gap: 10px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-empty {
    display: grid !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-head-actions,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-section,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-form,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-actions,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection > .meta {
    display: none !important;
  }
}

/* ===== Ops support final lock tail (2026-04-02) ===== */
@media (min-width: 1024px) {
  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) minmax(344px, 360px) !important;
    align-items: stretch !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet {
    min-height: var(--ops-support-shared-height, 620px) !important;
    height: var(--ops-support-shared-height, 620px) !important;
    max-height: var(--ops-support-shared-height, 620px) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view {
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid {
    align-content: stretch !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: 6px !important;
    overflow: hidden !important;
    padding: 8px 7px !important;
    border-radius: 12px !important;
    border-color: var(--ops-support-rail-border) !important;
    background: var(--ops-support-rail-surface) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet {
    width: min(100%, 360px) !important;
    min-width: 0 !important;
    max-width: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px 15px !important;
    overflow: hidden !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 14px !important;
    background: var(--ops-support-rail-surface) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--ops-support-rail-border) !important;
    flex: 0 0 auto !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetTitle {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-sheet-head-copy > .meta {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-sheet-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is(
    .soc-ops-support-sheet-head-actions .ds-btn,
    .worker-row-actions .ds-btn,
    .worker-add-btn,
    [data-action="ops-support-enter-worker-edit"]
  ) {
    min-height: 34px !important;
    height: 34px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    padding-inline: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action {
    border-color: var(--ops-support-neutral-border) !important;
    background: var(--ops-support-neutral-bg) !important;
    color: #445067 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-delete-btn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-delete-btn {
    border-color: var(--ops-support-strong-danger-border) !important;
    background: var(--ops-support-strong-danger) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions .worker-row-edit-btn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row.is-over-assigned .worker-row-edit-btn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-add-btn {
    border-color: var(--ops-support-strong-primary-border) !important;
    background: var(--ops-support-strong-primary) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section {
    display: grid !important;
    gap: 8px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #eef2f6 !important;
    background: transparent !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section--summary {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-section-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is(.soc-ops-support-confirmed-block, .soc-ops-support-confirmed-disabled, .soc-ops-support-detail-timeline-body, .soc-ops-support-day-summary > div) {
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: var(--ops-support-rail-surface) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-metric {
    min-height: 74px !important;
    padding: 10px 11px !important;
    background: var(--ops-support-rail-muted) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-summary-purpose {
    padding: 11px 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .worker-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line {
    position: relative !important;
    padding: 7px 8px 7px 12px !important;
    border: 1px solid var(--ops-support-line-border, var(--ops-support-rail-border)) !important;
    background: var(--ops-support-line-bg, var(--ops-support-rail-surface)) !important;
    color: var(--ops-support-line-color, var(--ops-support-rail-text)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--ops-support-line-accent, var(--ops-support-cancelled-accent));
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main {
    gap: 8px !important;
    align-items: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta-row {
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status {
    flex: 0 0 auto !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .support-status-inline {
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .support-status-chip {
    min-height: 22px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    margin-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending,
  html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-pending,
  html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-pending {
    --ops-support-line-accent: var(--ops-support-pending-accent);
    --ops-support-line-border: var(--ops-support-pending-border);
    --ops-support-line-bg: var(--ops-support-pending-bg);
    --ops-support-line-color: var(--ops-support-pending-text);
    border-color: var(--ops-support-pending-border) !important;
    background: var(--ops-support-pending-bg) !important;
    color: var(--ops-support-pending-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved,
  html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-approved,
  html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-approved {
    --ops-support-line-accent: var(--ops-support-approved-accent);
    --ops-support-line-border: var(--ops-support-approved-border);
    --ops-support-line-bg: var(--ops-support-approved-bg);
    --ops-support-line-color: var(--ops-support-approved-text);
    border-color: var(--ops-support-approved-border) !important;
    background: var(--ops-support-approved-bg) !important;
    color: var(--ops-support-approved-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-unavailable, .cal-line.state-rejected),
  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) {
    --ops-support-line-accent: var(--ops-support-danger-accent);
    --ops-support-line-border: var(--ops-support-danger-border);
    --ops-support-line-bg: var(--ops-support-danger-bg);
    --ops-support-line-color: var(--ops-support-danger-text);
    border-color: var(--ops-support-danger-border) !important;
    background: var(--ops-support-danger-bg) !important;
    color: var(--ops-support-danger-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled,
  html body.soc-desktop-shell #opsSupportPanel .support-status-inline.state-cancelled,
  html body.soc-desktop-shell #opsSupportPanel .support-status-chip.state-cancelled {
    --ops-support-line-accent: var(--ops-support-cancelled-accent);
    --ops-support-line-border: var(--ops-support-cancelled-border);
    --ops-support-line-bg: var(--ops-support-cancelled-bg);
    --ops-support-line-color: var(--ops-support-cancelled-text);
    border-color: var(--ops-support-cancelled-border) !important;
    background: var(--ops-support-cancelled-bg) !important;
    color: var(--ops-support-cancelled-text) !important;
  }
}

/* ===== Pass27 ticket + alerts rhythm eof overrides ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar {
    min-height: 54px !important;
    padding: 8px 12px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #697286 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    min-height: 64px !important;
    padding: 12px 16px 8px !important;
    background: #f7f9fc !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel {
    width: 324px !important;
    min-width: 324px !important;
    max-width: 324px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel {
    gap: 10px !important;
    padding: 14px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 0 0 4px !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 {
    font-size: 18px !important;
    line-height: 26px !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn {
    color: #d45b5b !important;
    border-color: #efd0d0 !important;
    background: #fff8f8 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty {
    gap: 3px !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2),
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #e6eaf1 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:last-child {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label {
    align-self: start !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
    color: #7a8499 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value {
    align-self: start !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section {
    gap: 5px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title {
    font-size: 13px !important;
    line-height: 19px !important;
    color: #525d73 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary {
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv {
    gap: 7px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread {
    min-height: 104px !important;
    padding: 10px 12px !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form {
    padding-top: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions {
    margin-top: 2px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel {
    gap: 8px !important;
  }
}

/* ===== Pass27 ticket + alerts rhythm eof overrides ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar {
    min-height: 54px !important;
    padding: 8px 12px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #697286 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    min-height: 64px !important;
    padding: 12px 16px 8px !important;
    background: #f7f9fc !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel {
    width: 324px !important;
    min-width: 324px !important;
    max-width: 324px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel {
    gap: 10px !important;
    padding: 14px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 0 0 4px !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 {
    font-size: 18px !important;
    line-height: 26px !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn {
    color: #d45b5b !important;
    border-color: #efd0d0 !important;
    background: #fff8f8 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty {
    gap: 3px !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2),
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #e6eaf1 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:last-child {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label {
    align-self: start !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
    color: #7a8499 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value {
    align-self: start !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section {
    gap: 5px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title {
    font-size: 13px !important;
    line-height: 19px !important;
    color: #525d73 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary {
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv {
    gap: 7px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread {
    min-height: 104px !important;
    padding: 10px 12px !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form {
    padding-top: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions {
    margin-top: 2px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel {
    gap: 8px !important;
  }
}

/* ===== Pass27 ticket + alerts rhythm final ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar {
    min-height: 54px !important;
    padding: 8px 12px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #697286 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    min-height: 64px !important;
    padding: 12px 16px 8px !important;
    background: #f7f9fc !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel {
    width: 324px !important;
    min-width: 324px !important;
    max-width: 324px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel {
    gap: 10px !important;
    padding: 14px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 0 0 4px !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 {
    font-size: 18px !important;
    line-height: 26px !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn {
    color: #d45b5b !important;
    border-color: #efd0d0 !important;
    background: #fff8f8 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty {
    gap: 3px !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2),
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #e6eaf1 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:last-child {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label {
    align-self: start !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
    color: #7a8499 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value {
    align-self: start !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section {
    gap: 5px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title {
    font-size: 13px !important;
    line-height: 19px !important;
    color: #525d73 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary {
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv {
    gap: 7px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread {
    min-height: 104px !important;
    padding: 10px 12px !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form {
    padding-top: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions {
    margin-top: 2px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel {
    gap: 8px !important;
  }
}

/* ===== Phase 3 rebuild loop 3: stats + score eof overrides ===== */
body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card {
  padding: 0 !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card .soc-workspace-card-head {
  padding: 14px 16px 6px !important;
  border: 0 !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card .soc-workspace-card-head .meta {
  margin-top: 2px !important;
  color: #8b93a6 !important;
  font-size: 11px !important;
  line-height: 15px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell {
  padding: 2px 16px 16px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > .soc-people-kpi-card,
body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > article.soc-people-kpi-card {
  padding: 2px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-head {
  margin-bottom: 10px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-subsection {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut {
  width: 88px !important;
  height: 88px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut::after {
  inset: 10px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut-center strong {
  font-size: 26px !important;
  line-height: 30px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-bar-list {
  gap: 9px !important;
}

body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card {
  min-height: 184px !important;
}

body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual {
  min-height: 72px !important;
}

body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) .soc-employee-score-detail-panel,
body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) aside.soc-employee-score-detail-panel {
  display: none !important;
}

body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel,
body.soc-desktop-shell #employeeScorePanel.has-score-focus aside.soc-employee-score-detail-panel {
  display: grid !important;
}

/* ===== Phase 3 rebuild loop 2b: people accounts / stats / score final desktop overrides ===== */
@media (min-width: 1200px) {
  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-people-kpi-strip,
  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-kpi-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid,
  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card {
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-wrap {
    border-top: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table th,
  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table td {
    padding: 10px 12px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table thead th {
    background: #fbfcfe;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
    color: #7d8699;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table tbody td {
    font-size: 12px;
    line-height: 17px;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-primary {
    color: #202430;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-secondary {
    color: #7d8699;
    font-size: 11px;
    line-height: 15px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(1) {
    order: 3 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(2) {
    order: 2 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(3) {
    order: 1 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(4) {
    order: 4 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head {
    padding: 14px 16px 10px !important;
    border: 0 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head h3 {
    color: #202430;
    font-size: 15px;
    line-height: 20px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell {
    padding: 4px 16px 16px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-chart {
    min-height: 180px !important;
    align-items: end;
    gap: 10px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-bars {
    height: 112px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card:nth-child(4) {
    display: none !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-main-grid {
    grid-template-columns: minmax(0, 1fr) 360px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel {
    position: sticky !important;
    top: 16px !important;
    align-self: start !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-filter-bar,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-primary-card,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-ranking-section,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel {
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card {
    min-height: 184px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual {
    min-height: 72px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-site-row {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td {
    padding: 10px 12px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th {
    background: #fbfcfe;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
    color: #7d8699;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td {
    font-size: 12px;
    line-height: 17px;
  }

  body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) .soc-employee-score-detail-panel {
    display: none !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > .soc-people-kpi-card {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-head {
    margin-bottom: 10px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-subsection {
    margin-top: 10px;
    padding-top: 10px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut {
    width: 94px;
    height: 94px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut::after {
    inset: 11px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut-center strong {
    font-size: 28px;
    line-height: 30px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-number-block strong {
    font-size: 26px;
    line-height: 30px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-bar-list {
    gap: 10px;
  }
}

/* ===== Phase 3 rebuild loop 2: people accounts / stats / score rhythm ===== */
@media (min-width: 1200px) {
  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-people-kpi-strip,
  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid,
  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card {
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-wrap {
    border-top: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table th,
  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table td {
    padding: 10px 12px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table thead th {
    background: #fbfcfe;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
    color: #7d8699;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table tbody td {
    font-size: 12px;
    line-height: 17px;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-primary {
    color: #202430;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-secondary {
    color: #7d8699;
    font-size: 11px;
    line-height: 15px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(1) {
    order: 3;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(2) {
    order: 2;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(3) {
    order: 1;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(4) {
    order: 4;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head {
    padding: 14px 16px 10px !important;
    border: 0 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head h3 {
    color: #202430;
    font-size: 15px;
    line-height: 20px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell {
    padding: 4px 16px 16px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-chart {
    min-height: 180px !important;
    align-items: end;
    gap: 10px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-bars {
    height: 112px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card:nth-child(4) {
    display: none !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-main-grid {
    grid-template-columns: minmax(0, 1fr) 360px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel {
    position: sticky !important;
    top: 16px !important;
    align-self: start !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-filter-bar,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-primary-card,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-ranking-section,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel {
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card {
    min-height: 214px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual {
    min-height: 100px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-site-row {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td {
    padding: 10px 12px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th {
    background: #fbfcfe;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
    color: #7d8699;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td {
    font-size: 12px;
    line-height: 17px;
  }
}

/* ===== Pass20 corrective winner overrides: approval queue / analytics / support / people ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header {
    padding: 0 20px 6px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header-main {
    gap: 3px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 14px !important;
    align-items: start !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel {
    min-height: 500px !important;
    border-radius: 12px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel {
    width: auto !important;
    min-width: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    min-height: 56px !important;
    padding: 14px 18px 12px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header {
    min-height: 36px !important;
    padding: 0 18px 10px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card, .ticket-list > .ticket-card) {
    min-height: 60px !important;
    padding: 9px 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card {
    min-height: 66px !important;
    padding: 9px 12px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill, .incident-card .incident-ticket-status),
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge,
  body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge {
    background: #ffffff !important;
    box-shadow: none !important;
    font-weight: 700 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-pending, .incident-card .incident-ticket-status.status-pending) {
    border-color: #ff6a13 !important;
    color: #c95400 !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-approved, .incident-card .incident-ticket-status.status-approved),
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-confirmed,
  body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-confirmed {
    border-color: #16a34a !important;
    color: #15803d !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-unavailable, .ticket-status-pill.status-rejected, .incident-card .incident-ticket-status.status-unavailable, .incident-card .incident-ticket-status.status-rejected),
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-unconfirmed,
  body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-unconfirmed {
    border-color: #ef4444 !important;
    color: #c81e1e !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-cancelled, .ticket-status-pill.status-done, .incident-card .incident-ticket-status.status-cancelled, .incident-card .incident-ticket-status.status-done) {
    border-color: #94a3b8 !important;
    color: #475569 !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable::before, .ticket-card.status-rejected::before, .incident-card.incident-ticket-card.status-unavailable::before, .incident-card.incident-ticket-card.status-rejected::before) {
    background: #ef4444 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--hero {
    padding: 14px 16px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap {
    display: grid !important;
    place-items: center !important;
    width: 112px !important;
    height: 112px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge {
    width: 112px !important;
    height: 112px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap {
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    gap: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-label {
    display: none !important;
  }

  body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue {
    display: block !important;
    font-size: 28px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary {
    gap: 8px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy {
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-grade.safe,
  body.soc-desktop-shell #analyticsView .soc-risk-grade.stable {
    border-color: rgba(22, 163, 74, 0.3) !important;
    background: #ffffff !important;
    color: #15803d !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe {
    background: #16a34a !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot {
    background: #16a34a !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] strong {
    color: #15803d !important;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-approved {
    background: #16a34a !important;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-pending {
    background: #ff6a13 !important;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-unavailable,
  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-rejected {
    background: #ef4444 !important;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-cancelled {
    background: #64748b !important;
  }

  body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending {
    --ops-support-line-accent: #ff6a13 !important;
    --ops-support-line-border: rgba(255, 106, 19, 0.72) !important;
    --ops-support-line-bg: #ffffff !important;
    --ops-support-line-color: #c95400 !important;
  }

  body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved {
    --ops-support-line-accent: #16a34a !important;
    --ops-support-line-border: rgba(22, 163, 74, 0.68) !important;
    --ops-support-line-bg: #ffffff !important;
    --ops-support-line-color: #15803d !important;
  }

  body.soc-desktop-shell #opsSupportPanel .cal-line.state-unavailable,
  body.soc-desktop-shell #opsSupportPanel .cal-line.state-rejected {
    --ops-support-line-accent: #ef4444 !important;
    --ops-support-line-border: rgba(239, 68, 68, 0.72) !important;
    --ops-support-line-bg: #ffffff !important;
    --ops-support-line-color: #c81e1e !important;
  }

  body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled {
    --ops-support-line-accent: #64748b !important;
    --ops-support-line-border: rgba(100, 116, 139, 0.5) !important;
    --ops-support-line-bg: #ffffff !important;
    --ops-support-line-color: #475569 !important;
  }

  body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) {
    background: #ffffff !important;
    font-weight: 700 !important;
  }

  body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-pending, .support-status-chip.state-pending) {
    border-color: #ff6a13 !important;
    color: #c95400 !important;
  }

  body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-approved, .support-status-chip.state-approved) {
    border-color: #16a34a !important;
    color: #15803d !important;
  }

  body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) {
    border-color: #ef4444 !important;
    color: #c81e1e !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card {
    min-height: 188px !important;
    height: 100% !important;
    align-content: start !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-progress .soc-people-kpi-inline-list,
  body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-bars .soc-people-bar-list {
    gap: 8px !important;
    align-content: start !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-bars .soc-people-bar-row {
    gap: 5px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-bars .soc-people-bar-track,
  body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-progress .soc-people-progress {
    height: 8px !important;
  }
}

/* ===== Pass19 winner overrides at EOF ===== */
body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header {
  padding: 0 16px 2px !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header-main {
  gap: 4px;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill, .incident-card .incident-ticket-status),
body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge,
body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge {
  background: #ffffff !important;
  box-shadow: none !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-pending, .incident-card .incident-ticket-status.status-pending) {
  color: #d65c00 !important;
  border-color: #ff8a1f !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-needs-info, .incident-card .incident-ticket-status.status-needs-info) {
  color: #2f80ff !important;
  border-color: #2f80ff !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-approved, .incident-card .incident-ticket-status.status-approved),
body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-confirmed,
body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-confirmed {
  color: #15803d !important;
  border-color: #16a34a !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-unavailable, .ticket-status-pill.status-rejected, .incident-card .incident-ticket-status.status-unavailable, .incident-card .incident-ticket-status.status-rejected),
body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-unconfirmed,
body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-unconfirmed {
  color: #c81e1e !important;
  border-color: #ef4444 !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-cancelled, .ticket-status-pill.status-done, .incident-card .incident-ticket-status.status-cancelled, .incident-card .incident-ticket-status.status-done) {
  color: #475569 !important;
  border-color: #94a3b8 !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable, .ticket-card.status-rejected, .incident-card.incident-ticket-card.status-unavailable, .incident-card.incident-ticket-card.status-rejected) {
  opacity: 1 !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable::before, .ticket-card.status-rejected::before, .incident-card.incident-ticket-card.status-unavailable::before, .incident-card.incident-ticket-card.status-rejected::before) {
  background: #ef4444 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body {
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge {
  width: 120px !important;
  height: 120px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap {
  inset: 0 !important;
  padding-top: 0 !important;
}

body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue {
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -0.04em;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary {
  gap: 8px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item {
  min-height: 52px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item:last-child {
  grid-column: auto !important;
}

body.soc-desktop-shell #analyticsView .soc-risk-grade.safe,
body.soc-desktop-shell #analyticsView .soc-risk-grade.stable {
  border-color: rgba(22, 163, 74, 0.28) !important;
  background: #ffffff !important;
  color: #15803d !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot {
  background: #16a34a !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-approved {
  background: #16a34a !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-pending {
  background: #ff6a13 !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-unavailable,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-rejected {
  background: #ef4444 !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-cancelled {
  background: #64748b !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-pending, .cal-line.state-approved, .cal-line.state-unavailable, .cal-line.state-rejected, .cal-line.state-cancelled) {
  background: #ffffff !important;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending {
  --ops-support-line-accent: #ff6a13;
  border-color: rgba(255, 106, 19, 0.68) !important;
  color: #c2410c !important;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved {
  --ops-support-line-accent: #16a34a;
  border-color: rgba(22, 163, 74, 0.58) !important;
  color: #15803d !important;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-unavailable,
body.soc-desktop-shell #opsSupportPanel .cal-line.state-rejected {
  --ops-support-line-accent: #ef4444;
  border-color: rgba(239, 68, 68, 0.62) !important;
  color: #c81e1e !important;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled {
  --ops-support-line-accent: #64748b;
  border-color: rgba(100, 116, 139, 0.48) !important;
  color: #475569 !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line:hover,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line.is-selected {
  background: #ffffff !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) {
  background: #ffffff !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-pending, .support-status-chip.state-pending) {
  border-color: #ff6a13 !important;
  color: #c2410c !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-approved, .support-status-chip.state-approved) {
  border-color: #16a34a !important;
  color: #15803d !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) {
  border-color: #ef4444 !important;
  color: #c81e1e !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-cancelled, .support-status-chip.state-cancelled) {
  border-color: #94a3b8 !important;
  color: #475569 !important;
}

body.soc-desktop-shell #peopleView :is(#peopleHubEmployeesPane, #peopleHubAccountsPane, #peopleHubHrPane) .soc-people-kpi-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-card {
  align-content: start;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-card.is-bars .soc-people-bar-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

@media (min-width: 1024px) {
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card {
    min-height: 74px !important;
    padding: 10px 12px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label {
    font-size: 11px !important;
    line-height: 14px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 12px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel {
    min-height: 500px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    min-height: 58px !important;
    padding: 14px 16px 10px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header {
    min-height: 38px !important;
    padding: 0 16px 9px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card, .ticket-list > .ticket-card) {
    min-height: 64px !important;
    padding: 9px 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    min-height: 500px !important;
  }
}

/* ===== Phase 3 rebuild loop 3b: final winner overrides ===== */
body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card {
  padding: 0 !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card .soc-workspace-card-head {
  padding: 14px 16px 6px !important;
  border: 0 !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card .soc-workspace-card-head .meta {
  margin-top: 2px !important;
  color: #8b93a6 !important;
  font-size: 11px !important;
  line-height: 15px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell {
  padding: 2px 16px 16px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > .soc-people-kpi-card,
body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell > article.soc-people-kpi-card {
  min-height: 0 !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-head {
  margin-bottom: 10px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-kpi-subsection {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut {
  width: 88px !important;
  height: 88px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut::after {
  inset: 10px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-donut-center strong {
  font-size: 26px !important;
  line-height: 30px !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-bar-list {
  gap: 9px !important;
}

body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card {
  min-height: 184px !important;
}

body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual {
  min-height: 72px !important;
}

body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) .soc-employee-score-detail-panel,
body.soc-desktop-shell #employeeScorePanel:not(.has-score-focus) aside.soc-employee-score-detail-panel {
  display: none !important;
}

body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel,
body.soc-desktop-shell #employeeScorePanel.has-score-focus aside.soc-employee-score-detail-panel {
  display: grid !important;
}

/* ===== Analytics workspace refactor ===== */
#analyticsView {
  display: grid;
  gap: 18px;
  position: relative;
}

#analyticsView .soc-analytics-workspace-header {
  display: grid;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

#analyticsView .soc-analytics-workspace-header h3 {
  margin: 0;
}

#analyticsView .soc-analytics-workspace-header .meta {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-filter-bar {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft));
}

#analyticsView .soc-analytics-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, 280px);
  gap: 12px;
  align-items: end;
}

#analyticsView .soc-analytics-filter-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#analyticsView .soc-analytics-filter-label,
#analyticsView .soc-analytics-control-field > label {
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-range-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#analyticsView .soc-analytics-filter-bar .ds-btn,
#analyticsView .soc-analytics-filter-bar input[type="date"],
#analyticsView .soc-analytics-filter-bar select,
#analyticsView .soc-analytics-comparison-toolbar select {
  min-height: 40px;
  height: 40px;
}

#analyticsView .soc-analytics-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#analyticsView .soc-analytics-site-filter {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: none;
}

#analyticsView .soc-analytics-site-filter label {
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-workspace {
  display: grid;
  gap: 20px;
}

#analyticsView .soc-analytics-summary-zone {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(320px, 0.94fr);
  gap: 18px;
  align-items: start;
}

#analyticsView .soc-analytics-summary-primary,
#analyticsView .soc-analytics-zone,
#analyticsView .soc-analytics-trend-card,
#analyticsView #analyticsScoreTopBlock,
#analyticsView #analyticsStoreInsightPanel {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft));
}

#analyticsView .soc-analytics-summary-primary {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
  padding: 20px 24px 24px;
  min-width: 0;
  overflow: hidden;
  min-height: 0;
}

#analyticsView .soc-risk-overview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#analyticsView .soc-risk-overview-side {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
  min-width: 0;
}

#analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar {
  justify-content: flex-end;
  width: 100%;
}

#analyticsView .soc-analytics-summary-primary-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 18px;
  align-items: start;
  min-width: 0;
}

#analyticsView .soc-analytics-summary-primary-head {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

#analyticsView .soc-analytics-summary-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  min-width: 0;
}

#analyticsView .soc-analytics-summary-title-wrap {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#analyticsView .soc-analytics-summary-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-width: 0;
}

#analyticsView .soc-analytics-summary-meta-row .meta {
  margin: 0;
}

#analyticsView .soc-risk-gauge-wrap {
  width: 168px;
  height: 168px;
  justify-self: end;
  align-self: start;
  margin: 0;
}

#analyticsView .soc-risk-gauge,
#analyticsView .soc-risk-gauge-value-wrap {
  width: 168px;
  height: 168px;
}

#analyticsView .soc-risk-gauge-value-wrap strong {
  font-size: 32px;
  line-height: 1;
}

#analyticsView .soc-analytics-summary-content {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

#analyticsView .soc-analytics-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#analyticsView .soc-analytics-summary-kicker {
  margin: 0 0 4px;
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#analyticsView .soc-risk-overview-title {
  margin: 0;
  text-align: left;
  white-space: normal;
}

#analyticsView .soc-analytics-summary-lead {
  margin: 0;
  font-size: var(--type-body-md-size, 14px);
  line-height: var(--type-body-md-line, 20px);
  color: var(--ui-text-primary, var(--soc-text));
  max-width: 56ch;
}

#analyticsView .soc-analytics-summary-subsection {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-divider-default, var(--soc-divider));
}

#analyticsView .soc-analytics-summary-subsection--drivers {
  padding-top: 0;
  border-top: 0;
  gap: 12px;
}

#analyticsView .soc-analytics-summary-subsection > h5 {
  margin: 0;
  font-size: var(--type-section-md-size, 16px);
  line-height: var(--type-section-md-line, 24px);
  font-weight: var(--type-section-md-weight, 600);
}

#analyticsView .soc-analytics-driver-list {
  padding-left: 18px;
  gap: 8px;
  margin: 0;
}

#analyticsView .soc-analytics-driver-list li {
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  align-content: start;
  align-self: start;
  grid-auto-rows: minmax(124px, auto);
}

#analyticsView .soc-analytics-kpi-grid .soc-kpi-card,
#analyticsView .soc-analytics-kpi-card {
  min-height: 124px;
  padding: 18px 20px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  gap: 8px;
}

#analyticsView .soc-analytics-kpi-grid .soc-kpi-label {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-weight: 600;
}

#analyticsView .soc-analytics-kpi-grid .soc-kpi-value {
  margin: 0;
  font-size: var(--type-display-lg-size, 28px);
  line-height: var(--type-display-lg-line, 36px);
  font-weight: 700;
}

#analyticsView .soc-analytics-zone {
  display: grid;
  gap: 16px;
  padding: 20px 24px 24px;
}

#analyticsView .soc-analytics-zone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

#analyticsView .soc-analytics-zone-head h3,
#analyticsView .soc-analytics-zone-head h4 {
  margin: 0;
}

#analyticsView .soc-analytics-zone-head .meta {
  margin: 6px 0 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#analyticsView .soc-analytics-trend-card {
  min-height: 240px;
  padding: 20px 24px 24px;
}

#analyticsView .soc-analytics-trend-card .soc-block-head {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

#analyticsView .soc-analytics-trend-card .soc-sparkline-lg {
  height: 96px;
  min-height: 96px;
  margin-top: 12px;
}

#analyticsView .soc-analytics-trend-card .soc-sparkline-line {
  stroke-width: 2.6;
}

#analyticsView .soc-analytics-trend-card .soc-sparkline-area {
  opacity: 0.14;
}

#analyticsView .soc-analytics-heatmap-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#analyticsView .soc-heatmap-day-tabs {
  margin: 0;
}

#analyticsView .soc-heatmap-legend {
  margin: 0;
}

#analyticsView .soc-heatmap-scroll {
  min-height: 248px;
  padding: 6px 0 0;
}

#analyticsView .soc-analytics-comparison-toolbar {
  display: grid;
  gap: 12px;
}

#analyticsView .soc-store-comparison-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px)) auto;
  gap: 12px;
  align-items: end;
  width: 100%;
}

#analyticsView .soc-analytics-control-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#analyticsView .soc-analytics-comparison-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

#analyticsView .soc-analytics-comparison-main,
#analyticsView .soc-analytics-comparison-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

#analyticsView .soc-analytics-comparison-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#analyticsView .soc-analytics-comparison-stat,
#analyticsView .soc-analytics-insight-stat {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#analyticsView .soc-analytics-comparison-stat .label,
#analyticsView .soc-analytics-insight-stat .label {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
}

#analyticsView .soc-analytics-comparison-stat strong,
#analyticsView .soc-analytics-insight-stat strong {
  font-size: var(--type-body-md-size, 14px);
  line-height: var(--type-body-md-line, 20px);
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-comparison-stat.is-empty {
  grid-column: 1 / -1;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-store-list {
  display: grid;
  gap: 10px;
}

#analyticsView .soc-store-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

#analyticsView .soc-store-row:hover {
  border-color: var(--ui-border-default, var(--soc-divider));
  background: var(--ui-bg-surface, var(--soc-panel-bg));
}

#analyticsView .soc-store-row.is-selected {
  border-color: color-mix(in srgb, var(--soc-primary) 42%, var(--ui-border-default, var(--soc-divider)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent);
  background: var(--ui-bg-surface, var(--soc-panel-bg));
}

#analyticsView .soc-store-row-rank {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  color: var(--soc-primary);
  font-weight: 700;
}

#analyticsView .soc-store-row-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#analyticsView .soc-store-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

#analyticsView .soc-store-row strong {
  font-size: var(--type-body-md-size, 14px);
  line-height: var(--type-body-md-line, 20px);
  font-weight: 700;
}

#analyticsView .soc-store-main-metric {
  align-items: baseline;
}

#analyticsView .soc-store-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
}

#analyticsView .soc-store-row-meta span {
  white-space: nowrap;
}

#analyticsView .soc-analytics-single-site-card {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#analyticsView .soc-analytics-single-site-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#analyticsView .soc-analytics-single-site-head h4 {
  margin: 0;
  font-size: var(--type-section-md-size, 16px);
  line-height: var(--type-section-md-line, 24px);
}

#analyticsView .soc-analytics-single-site-head .meta {
  margin: 4px 0 0;
}

#analyticsView .soc-analytics-single-site-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#analyticsView .soc-analytics-single-site-metric {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
}

#analyticsView .soc-analytics-single-site-metric .label {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
}

#analyticsView .soc-analytics-single-site-metric strong {
  font-size: var(--type-body-md-size, 14px);
  line-height: var(--type-body-md-line, 20px);
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-driver-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#analyticsView .soc-analytics-driver-pill {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#analyticsView .soc-store-bar {
  height: 10px;
  background: color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 80%, transparent);
}

#analyticsView .soc-analytics-comparison-side {
  position: sticky;
  top: 0;
}

#analyticsView .soc-analytics-insight-card {
  display: grid;
  gap: 14px;
  padding: 20px;
}

#analyticsView .soc-analytics-insight-card > .soc-block-head {
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

#analyticsView .soc-analytics-insight-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#analyticsView .soc-analytics-insight-empty {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
}

#analyticsView #analyticsScoreTopList,
#analyticsView #analyticsStoreInsightDelta {
  display: grid;
  gap: 8px;
}

#analyticsView #analyticsScoreTopList .soc-mini-row,
#analyticsView #analyticsStoreInsightDelta .soc-mini-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#analyticsView .soc-store-info-popover {
  top: 0;
  right: auto;
}

@media (max-width: 1279.98px) {
  #analyticsView .soc-analytics-filter-row,
  #analyticsView .soc-analytics-summary-zone,
  #analyticsView .soc-analytics-comparison-body,
  #analyticsView .soc-analytics-trend-grid,
  #analyticsView .soc-store-comparison-actions {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-analytics-comparison-summary,
  #analyticsView .soc-analytics-insight-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #analyticsView .soc-analytics-comparison-side {
    position: static;
  }
}

@media (max-width: 767.98px) {
  #analyticsView .soc-analytics-summary-primary-body {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-risk-gauge-wrap {
    margin: 0 auto;
  }

  #analyticsView .soc-analytics-comparison-summary,
  #analyticsView .soc-analytics-insight-metrics {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-store-row {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-store-row-rank {
    width: 40px;
  }
}

.soc-app-shell {
  --soc-tabbar-h: 54px;
  --soc-tabbar-bottom-offset: 0px;
  --tabbar-h: var(--soc-tabbar-h, 54px);
}

@supports (height: 100svh) {
  .soc-app-shell {
    min-height: 100svh;
    height: 100svh;
  }
}

.soc-startup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: block;
  padding: 0;
  background: linear-gradient(180deg, var(--soc-surface-overlay-6), var(--soc-surface-overlay-9));
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

.soc-startup-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.soc-startup-center {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(94vw, 680px);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.soc-startup-logo {
  width: clamp(142px, 27.2vw, 202px);
  height: clamp(142px, 27.2vw, 202px);
  object-fit: contain;
}

.soc-startup-wordmark {
  width: clamp(150px, 34vw, 310px);
  height: auto;
  max-height: none;
  object-fit: contain;
}

.soc-startup-message {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--soc-text);
  letter-spacing: 0.14px;
}

.soc-startup-progress-wrap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
}

.soc-startup-progress-track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(237, 108, 2, 0.22);
  overflow: hidden;
}

.soc-startup-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8f1f, #ff6f00);
  transition: width 0.18s ease-out;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 58px;
  padding: calc(var(--soc-safe-top) + 10px) 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--soc-border);
  background: linear-gradient(180deg, var(--soc-topbar-bg-1), var(--soc-topbar-bg-2));
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.topbar-left {
  flex: 1 1 auto;
  gap: 0;
}

.topbar-right {
  flex: 0 1 auto;
  justify-content: flex-end;
  overflow: visible;
}

.topbar-utility-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.topbar-utility-btn {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--soc-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topbar-utility-btn:hover,
.topbar-utility-btn:focus-visible {
  outline: none;
}

.topbar-utility-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topbar-utility-icon svg {
  width: 18px;
  height: 18px;
}

.topbar-profile-btn {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topbar-profile-btn:hover,
.topbar-profile-btn:focus-visible {
  background: color-mix(in srgb, var(--soc-card-bg) 92%, transparent);
  outline: none;
}

.topbar-profile-avatar,
.topbar-profile-drawer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f7f8fb 0%, #eef2f7 100%);
  color: #4a5265;
  border: 1px solid color-mix(in srgb, var(--soc-border) 80%, transparent);
}

.topbar-profile-avatar img,
.topbar-profile-drawer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.topbar-profile-avatar svg,
.topbar-profile-drawer-avatar svg {
  width: 18px;
  height: 18px;
}

.topbar-profile-avatar-initial {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.topbar h1 {
  font-size: var(--soc-text-lg);
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-brand-heading {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.topbar-brand-link {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.topbar-brand-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ui-accent, #ff6b00) 45%, transparent);
  outline-offset: 4px;
  border-radius: 8px;
}

.topbar-brand-wordmark {
  display: block;
  height: 22px;
  width: auto;
  max-width: min(40vw, 220px);
  object-fit: contain;
}

.topbar-brand-wordmark-dark {
  display: none;
}

[data-theme="dark"] .topbar-brand-wordmark-light {
  display: none;
}

[data-theme="dark"] .topbar-brand-wordmark-dark {
  display: block;
}

.session-info {
  color: var(--soc-muted);
  font-size: var(--soc-text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62vw;
}

#menuToggleBtn {
  display: none !important;
}

.container.ds-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 12px calc(72px + var(--soc-safe-bottom));
  display: grid;
  gap: var(--soc-space-4);
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.container.admin-layout {
  grid-template-columns: minmax(250px, 280px) minmax(0, 1fr);
  align-items: start;
}

/* Global overflow / alignment guardrails */
body,
html,
#dashboardPanel,
#reportPanel,
#excelPanel,
#notificationPanel,
#notificationSettingsPanel,
#typeReportsPanel,
#reportsHubView,
#analyticsView,
#reportsView,
#adminView,
#homeView,
#alertsView,
#ticketsView,
#weeklyView,
#peopleView,
#myProfileView,
#accountPanel,
#employeeSection,
#peopleCreateSheet {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.view,
.scroller {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#dashboardPanel > :is(#homeView, #alertsView, #ticketsView, #weeklyView, #peopleView, #myProfileView, #analyticsView, #adminView, #reportsView) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

body.auth-switching #dashboardPanel,
body.auth-switching #reportPanel {
  visibility: hidden;
}

#dashboardPanel.is-switching {
  opacity: 0.01;
  pointer-events: none;
}

.soc-app-shell button + button {
  margin-left: 0 !important;
}

#dashboardPanel :is(
  .soc-kpi-grid,
  .soc-home-grid,
  .soc-summary-grid,
  .soc-list-mini,
  .incident-list,
  .ticket-list,
  .soc-grid,
  .soc-flex,
  .soc-analytics-kpi-grid,
  .soc-analytics-trend-grid,
  .soc-reports-site-multi,
  .soc-reports-section-toggles,
  .report-choice-grid,
  .admin-tab-list
) > * {
  min-width: 0;
  margin-left: 0 !important;
  box-sizing: border-box;
}

/* Text overflow guardrails */
#dashboardPanel :is(
  .incident-title,
  .incident-type,
  .incident-created-at,
  .incident-severity,
  .incident-location,
  .incident-status,
  .incident-urgent-badge,
  .incident-type-badge,
  .incident-category-badge,
  .status-badge,
  .ds-badge,
  .incident-more-menu-head,
  .ticket-title,
  .ticket-urgent-pill,
  .ticket-status-pill,
  .ticket-meta > span,
  .case-timeline-title,
  .case-status-badge,
  .case-eci-badge,
  .case-meta-text,
  .soc-summary-label,
  .soc-summary-value,
  .soc-kpi-label,
  .soc-kpi-value,
  .soc-block-value,
  .chip,
  .soc-active-filter-chip,
  .report-choice-label,
  #reportSummaryText,
  #reportHeaderSummary,
  .soc-report-header-left .meta,
  .notification-feed-type,
  #menuSheetPanel .admin-tab-btn,
  #menuSheetPanel .mobile-menu-view-btn,
  #menuSheetPanel .mobile-menu-view-back,
  #menuSheetPanel .mobile-nav-action-btn,
  .topbar h1,
  .session-info
) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(
  .announcement-mode-btn,
  .site-filter-btn,
  .date-filter-btn,
  .report-tab,
  .sla-page-btn,
  .soc-bottom-tab-btn
) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-app-shell button {
  overflow: hidden;
}

.btn-label {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-label-short {
  display: none;
}

#dashboardPanel :is(
  .report-choice-sub,
  .soc-hero-comment,
  .soc-insight-item,
  .ticket-desc,
  .ticket-meta-line
) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#dashboardPanel :is(
  .incident-card-head,
  .incident-card-badges,
  .ticket-card-head,
  .ticket-meta,
  .case-timeline-meta,
  .panel-title-row,
  .soc-block-head,
  .soc-report-headerbar,
  .soc-report-header-left,
  .soc-report-header-actions,
  .soc-analytics-header,
  .soc-analytics-header-left,
  .soc-analytics-header-right,
  .chip-row,
  .date-filter-group,
  #menuSheetPanel .mobile-menu-view-header
) > * {
  min-width: 0;
}

/* Spacing compaction guardrails */
.soc-home-view,
.soc-alerts-view,
.soc-tickets-view,
.soc-analytics-view,
.soc-reports-view,
.soc-admin-view {
  gap: 10px;
}

.panel,
.panel.ds-card,
.ds-card {
  padding: 14px;
}

.panel,
.panel.ds-card,
.ds-card {
  border-radius: var(--soc-radius-card);
  border: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 16px;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.16s ease;
}

.panel:hover,
.ds-card:hover {
  border-color: var(--soc-border-strong);
}

.ds-card-title,
.panel h2 {
  font-size: var(--soc-text-lg);
  font-weight: 700;
  color: var(--soc-text);
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--soc-divider);
}

#dashboardPanel.hidden,
#dashboardPanel[hidden],
#dashboardPanel[aria-hidden="true"],
#dashboardPanel > .panel-title-row.hidden,
#dashboardPanel > .panel-title-row[hidden],
#dashboardPanel > .panel-title-row[aria-hidden="true"] {
  display: none !important;
}

.title-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-sub-topbar .title-inline {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-sub-topbar h2,
#accountPanelTitle {
  margin: 0;
}

.admin-back-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.role-field #dashboardPanel .soc-filterbar,
body.role-field #dashboardPanel .date-filter-custom {
  display: none !important;
}

body.role-hq .soc-realtime-datebar {
  gap: 8px;
}

body.role-hq #realtimeDateDisplayBtn {
  flex: 1 1 220px;
  width: auto;
}

.soc-realtime-date-display.is-full {
  flex: 1 1 100%;
  width: 100%;
}

/* Buttons */
.ds-btn,
button,
.report-tab,
.announcement-mode-btn,
.site-filter-btn,
.date-filter-btn,
.sla-page-btn {
  width: auto;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px 12px;
  font-size: var(--soc-text-sm);
  font-weight: 700;
  transition: border-color 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}

.ds-btn-sm,
.report-tab.ds-btn-sm,
.announcement-mode-btn.ds-btn-sm,
.site-filter-btn.ds-btn-sm,
.date-filter-btn.ds-btn-sm,
.sla-page-btn.ds-btn-sm {
  min-height: 34px;
  padding: 6px 10px;
  font-size: var(--soc-text-xs);
}

.ds-btn-primary {
  background: var(--soc-primary);
  border-color: var(--soc-primary-deep);
  color: var(--soc-on-primary);
}

.ds-btn-primary:hover {
  filter: brightness(1.08);
}

.ds-btn-secondary,
.report-tab,
.announcement-mode-btn,
.site-filter-btn,
.date-filter-btn,
.sla-page-btn {
  background: var(--soc-secondary-bg);
  border-color: var(--soc-secondary-border);
  color: var(--soc-secondary-text);
}

.ds-btn-secondary:hover,
.report-tab:hover,
.announcement-mode-btn:hover,
.site-filter-btn:hover,
.date-filter-btn:hover,
.sla-page-btn:hover {
  background: var(--soc-secondary-bg-hover);
}

.ds-btn-danger,
.btn-danger {
  background: var(--soc-danger);
  border-color: var(--soc-danger-deep);
  color: var(--soc-on-danger);
}

.ds-btn-danger:hover,
.btn-danger:hover {
  filter: brightness(1.08);
}

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

.ds-btn-ghost:hover {
  background: var(--soc-border);
}

.ds-btn-icon,
.icon-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: var(--soc-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#refreshBtn.icon-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--soc-text-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#refreshBtn.icon-btn:hover {
  background: var(--soc-primary-soft-bg);
  border-color: var(--soc-border);
  color: var(--soc-primary);
  filter: none;
}

#refreshBtn.icon-btn:active {
  transform: scale(0.98);
}

#refreshBtn.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--soc-focus);
}

#topbarMyProfileBtn {
  white-space: nowrap;
}

#refreshBtn .refresh-icon {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#refreshBtn.is-loading .refresh-icon {
  animation: socRefreshSpin 1s linear infinite;
}

@keyframes socRefreshSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Badge */
.ds-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--soc-radius-pill);
  border: 1px solid transparent;
  min-height: 24px;
  padding: 4px 10px;
  font-size: var(--soc-text-xs);
  font-weight: 700;
}

.status-online {
  background: var(--soc-status-closed-bg);
  color: var(--soc-status-closed-fg);
  border-color: var(--soc-status-online-border);
}

.status-offline {
  background: var(--soc-severity-high-bg);
  color: var(--soc-severity-high-fg);
  border-color: var(--soc-status-offline-border);
}

/* Navigation */
.admin-tab-list {
  display: grid;
  gap: 8px;
}

.admin-tab-btn,
.ds-nav-item {
  width: 100%;
  text-align: left;
  background: var(--soc-nav-item-bg);
  border: 1px solid var(--soc-border);
  color: var(--soc-nav-item-text);
}

.soc-menu-item {
  position: relative;
  padding-right: 28px !important;
}

.soc-menu-item::before {
  content: attr(data-subtitle);
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--soc-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-menu-item::after {
  content: "›";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--soc-text-sub);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.admin-tab-btn.active,
.ds-nav-item.active,
.ds-nav-item.is-active {
  background: var(--soc-nav-item-active-bg);
  border-color: var(--soc-nav-item-active-border);
}

.mobile-nav-actions {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

#menuSheetPanel .mobile-nav-actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

#menuSheetPanel .mobile-nav-actions-divider {
  display: block;
  width: min(220px, 72%);
  height: 1px;
  margin: 6px auto;
  padding: 0;
  border: 0;
  background: var(--soc-divider-strong, var(--soc-divider));
  color: transparent;
  font-size: 0;
  line-height: 0;
  user-select: none;
  pointer-events: none;
}

body.role-hq #menuSheetPanel .mobile-nav-actions-divider {
  display: none !important;
}

.mobile-menu-view {
  display: none;
}

.nav-sheet-handle {
  display: none;
}

.mobile-menu-pager {
  position: relative;
}

.mobile-menu-root-page {
  display: contents;
}

.mobile-menu-view strong,
.mobile-menu-view-header,
.mobile-menu-view-btn,
.mobile-menu-view-back {
  color: var(--soc-nav-item-text);
}

.mobile-menu-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--soc-divider);
}

.mobile-menu-view-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.mobile-menu-view-btn,
.mobile-menu-view-back {
  border: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
  color: var(--soc-text);
}

.mobile-menu-view-btn.active {
  background: var(--soc-primary-soft-bg);
  border-color: var(--soc-primary);
  color: var(--soc-primary);
}

.mobile-type-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}

.mobile-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--soc-filter-chip-active-border);
  background: var(--soc-filter-chip-active-bg);
  color: var(--soc-text-accent-soft);
  font-size: var(--soc-text-xs);
  font-weight: 700;
}

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

.mobile-excel-config-wrap {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(28px + var(--soc-safe-bottom));
}

.mobile-excel-config {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  background: var(--soc-panel-bg);
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  padding: 10px;
}

.mobile-excel-download-cta {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: 2px;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--soc-panel-bg) 36%);
}

.mobile-excel-config label {
  display: grid;
  gap: 6px;
  color: var(--soc-nav-item-text);
  font-size: var(--soc-text-sm);
}

.mobile-excel-config input[type="month"] {
  width: 100%;
  min-height: 38px;
  max-width: 100%;
  box-sizing: border-box;
  position: static;
  overflow: hidden;
}

#excelPanel {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#excelAppleWrap {
  display: grid;
  gap: 10px;
  align-content: start;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 24px;
}

.excel-download-cta {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: 2px;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--soc-panel-bg) 36%);
}

.excel-download-cta #excelAppleDownloadBtn {
  width: 100%;
}

#excelAppleWrap .excel-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

#excelAppleWrap input[type="month"] {
  width: 100%;
  min-height: 40px;
  max-width: 100%;
  box-sizing: border-box;
  position: static;
  overflow: hidden;
}

.mobile-menu-view-btn.active {
  background: var(--soc-primary-soft-bg);
  border-color: var(--soc-primary);
  color: var(--soc-primary);
}

.mobile-excel-download {
  margin-top: 2px;
  text-align: center;
  width: 100%;
}

#excelAppleDownloadBtn,
#mobileExcelDownloadBtn {
  background: var(--soc-primary);
  border-color: var(--soc-primary-deep);
  color: var(--soc-on-primary);
}

#excelAppleDownloadBtn.is-loading,
#mobileExcelDownloadBtn.is-loading {
  pointer-events: none;
}

#excelAppleDownloadBtn.is-loading::before,
#mobileExcelDownloadBtn.is-loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--soc-on-primary) 40%, transparent);
  border-top-color: var(--soc-on-primary);
  vertical-align: -2px;
  animation: soc-btn-spinner 0.7s linear infinite;
}

#mobileExcelBackBtn,
#mobileExcelAppleBtn,
#mobileExcelInternalBtn {
  background: transparent;
  border: 1px solid var(--soc-border);
  color: var(--soc-text);
}

.mobile-nav-action-btn {
  width: 100%;
  border-radius: 9px;
  border: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
  color: var(--soc-text);
  min-height: 36px;
  padding: 8px 10px;
  font-size: var(--soc-text-xs);
}

#menuSheetPanel .mobile-nav-action-btn--plain {
  width: auto;
  min-height: 24px;
  height: auto;
  margin: 0;
  padding: 2px 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--soc-text);
  font-size: var(--soc-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

#menuSheetPanel .mobile-nav-action-btn--plain.soc-menu-item::before,
#menuSheetPanel .mobile-nav-action-btn--plain.soc-menu-item::after {
  display: none !important;
  content: none !important;
}

#menuSheetPanel .soc-sidebar-header {
  display: none;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--soc-overlay-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

body.role-hq #menuToggleBtn {
  display: none !important;
}

body.role-hq:not(.nav-open) #menuSheetPanel {
  display: none !important;
}

body.role-hq .container.admin-layout {
  grid-template-columns: 1fr;
}

/* Bottom Tab */
.soc-bottom-tab {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--soc-border);
  background: linear-gradient(180deg, var(--soc-tabbar-bg-1), var(--soc-tabbar-bg-2));
  min-height: 56px;
  height: 56px;
  padding: 3px 6px 3px;
  box-shadow: 0 -10px 24px var(--soc-tabbar-shadow-color);
}

.soc-bottom-tab.hq-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.role-hq:not(.nav-open) #bottomTabNav.soc-bottom-tab,
body.role-field:not(.nav-open) #bottomTabNav.soc-bottom-tab {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.soc-bottom-tab-btn {
  min-height: 42px;
  height: 42px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0;
  color: var(--soc-tabbar-icon);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}

.soc-bottom-tab-btn > span:last-child {
  font-size: 11px;
  line-height: 1.15;
}

.soc-bottom-tab-btn.hidden {
  display: none !important;
}

.soc-bottom-tab-icon {
  font-size: 18px;
  line-height: 1;
}

.soc-bottom-tab-icon svg,
.report-choice-icon svg {
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.soc-bottom-tab-icon svg {
  width: 18px;
  height: 18px;
}

.soc-bottom-tab-icon-img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.soc-bottom-tab-btn.is-active {
  color: var(--soc-text-accent-soft);
  background: var(--soc-tabbar-active-bg);
}

/* Home */
.soc-home-view,
.soc-alerts-view,
.soc-weekly-view,
.soc-people-view,
.soc-profile-view {
  display: grid;
  gap: 12px;
}

.soc-home-view {
  align-content: start;
}

.soc-home-row {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.soc-home-row > * {
  min-width: 0;
}

.soc-analytics-view,
.soc-reports-view,
.soc-admin-view,
.soc-weekly-view,
.soc-people-view,
.soc-profile-view {
  display: grid;
  gap: 12px;
  align-content: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.soc-reports-view {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.soc-analytics-view *,
.soc-reports-view *,
.soc-admin-view *,
.soc-weekly-view *,
.soc-people-view *,
.soc-profile-view * {
  box-sizing: border-box;
  min-width: 0;
}

.soc-profile-view {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
}

.soc-profile-command-stage {
  display: grid;
  gap: 14px;
}

#myProfileView .soc-block:hover,
#myProfileView .soc-block:active {
  transform: none;
  box-shadow: none;
}

.soc-profile-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.75fr);
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--soc-border);
  border-radius: 14px;
  background: var(--soc-block-bg);
  box-shadow: none;
}

.soc-profile-hero-clickable {
  cursor: pointer;
}

.soc-profile-hero-clickable:focus-visible {
  outline: 2px solid var(--soc-primary);
  outline-offset: 2px;
}

.soc-profile-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.soc-profile-hero-avatar {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  border: 1px solid var(--soc-border);
  background: var(--soc-card-bg);
  box-shadow: none;
}

.soc-profile-hero-avatar svg {
  display: block;
  width: 34px;
  height: 34px;
}

.soc-profile-hero-avatar.is-glyph {
  background: #ffffff;
  border-color: var(--soc-border);
  color: #98a2b3;
  font-size: 0;
  line-height: 1;
}

.soc-profile-photo-edit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
}

.soc-profile-edit-avatar-preview {
  width: 64px;
  height: 64px;
}

.soc-profile-photo-edit-actions {
  display: grid;
  gap: 6px;
}

.soc-profile-photo-edit-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.soc-profile-hero-content h3 {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.soc-profile-eyebrow,
.soc-profile-section-label {
  margin: 0;
  color: var(--soc-primary-deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.soc-profile-hero-aside {
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.soc-profile-identity-meta {
  display: grid;
  gap: 4px;
}

.soc-profile-identity-meta strong {
  font-size: var(--soc-text-lg);
  line-height: 1.1;
}

.soc-profile-identity-label {
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
  font-weight: 600;
}

.soc-profile-overview {
  display: grid;
  gap: 14px;
}

.soc-profile-top-shell {
  display: grid;
  gap: 0;
  border: 1px solid var(--soc-border);
  border-radius: 16px;
  background: var(--soc-block-bg);
  overflow: visible;
}

.soc-profile-overview-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.soc-profile-score {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--soc-border) 74%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.soc-profile-score-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: stretch;
}

.soc-profile-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.soc-profile-score-title-wrap {
  display: grid;
  gap: 4px;
}

.soc-profile-score-title-wrap h3 {
  margin: 0;
}

.soc-profile-score-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.soc-profile-score-head-actions .meta {
  margin: 0;
  max-width: 260px;
  text-align: right;
}

.soc-profile-score-info-btn {
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  font-weight: 700;
  border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border));
  color: var(--soc-primary-deep);
  background: #fff;
}

.soc-profile-score-popover-wrap {
  position: relative;
}

.soc-profile-score-hero {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--soc-primary) 22%, var(--soc-border));
  border-radius: 14px;
  background: #fff;
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 18px 18px 18px;
  text-align: left;
  color: var(--soc-text);
  box-shadow: none;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  height: 100%;
}

.soc-profile-score-hero:hover {
  border-color: color-mix(in srgb, var(--soc-primary) 42%, var(--soc-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 16%, transparent);
}

.soc-profile-score-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.soc-profile-score-hero-copy {
  display: grid;
  gap: 6px;
}

.soc-profile-score-label {
  font-size: var(--soc-text-sm);
  color: var(--soc-text-sub);
}

.soc-profile-score-total {
  font-size: clamp(1.95rem, 4.4vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--soc-primary-deep);
}

.soc-profile-score-rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--soc-primary-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.soc-profile-score-gauge {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--soc-border) 56%, transparent);
}

.soc-profile-score-gauge > span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  transition: width 180ms ease;
  background: #9aa1ad;
}

.soc-profile-score-gauge > span.is-low {
  background: #475467;
}

.soc-profile-score-gauge > span.is-mid {
  background: #c2410c;
}

.soc-profile-score-gauge > span.is-high {
  background: #b45309;
}

.soc-profile-score-summary-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid color-mix(in srgb, var(--soc-primary) 20%, var(--soc-border));
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.soc-profile-score-summary-item {
  background: transparent;
  padding: 14px 16px 15px;
  display: grid;
  gap: 4px;
}

.soc-profile-score-summary-item:nth-child(odd) {
  border-right: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
}

.soc-profile-score-summary-item:nth-child(n + 3) {
  border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
}

.soc-profile-score-summary-label {
  margin: 0;
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
}

.soc-profile-score-summary-item > strong {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.1;
  color: var(--soc-text);
}

.soc-profile-score-breakdown-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 72px));
  border: 1px solid color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border));
  border-radius: 12px;
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-card);
  padding: 10px 10px 12px;
  z-index: 16;
}

.soc-profile-score-breakdown-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 9px;
  width: 12px;
  height: 12px;
  border-left: 1px solid color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border));
  border-top: 1px solid color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border));
  background: var(--soc-card-bg);
  transform: rotate(45deg);
}

.soc-profile-score-breakdown-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: var(--soc-text-sm);
}

.soc-profile-score-breakdown-list {
  display: grid;
  gap: 6px;
}

.soc-profile-score-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--soc-text-sm);
}

.soc-profile-score-breakdown-row > strong {
  text-align: right;
}

.soc-profile-score-error {
  color: #e14141;
  margin: -4px 0 0;
}

.soc-profile-record-section,
#myProfileAccountSection,
#myProfileDetailSection {
  border-radius: 14px;
  box-shadow: none;
}

.soc-profile-record-section {
  display: grid;
  gap: 12px;
  padding: 18px 20px 16px;
  border: 1px solid var(--soc-border);
  border-radius: 14px;
  background: #fff;
  align-content: start;
}

.soc-profile-record-section + .soc-profile-record-section {
  border-top: 0;
}

.soc-profile-record-head {
  align-items: start;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.soc-profile-record-head-copy {
  display: grid;
  gap: 4px;
}

.soc-profile-record-head-copy h3 {
  margin: 0;
}

.soc-profile-record-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.soc-profile-record-summary {
  margin: 0;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-sm);
  white-space: nowrap;
}

.soc-profile-record-list {
  display: grid;
  gap: 0;
}

.soc-profile-record-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
}

.soc-profile-record-row-button {
  width: 100%;
  border: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.soc-profile-record-row-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--soc-primary) 42%, transparent);
  outline-offset: 2px;
}

.soc-profile-record-row:first-child {
  border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
}

.soc-profile-record-row:hover {
  background: color-mix(in srgb, var(--soc-primary) 5%, #fff);
}

.soc-profile-record-row-main {
  display: grid;
  gap: 4px;
}

.soc-profile-record-row-main strong {
  font-size: var(--soc-text-sm);
  line-height: 1.45;
  color: var(--soc-text);
}

.soc-profile-record-row-main span,
.soc-profile-record-row-side span {
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
  line-height: 1.4;
}

.soc-profile-record-row-side {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.soc-profile-record-status {
  color: var(--soc-text);
  font-weight: 700;
}

.soc-profile-record-empty {
  margin: 0;
  padding: 14px 0 2px;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-sm);
}

.soc-profile-account-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.soc-profile-account-strip .soc-profile-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 26px;
  border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border));
}

.soc-profile-account-strip .soc-profile-hero-avatar.is-glyph {
  border-color: var(--soc-border);
}

.soc-profile-account-strip .soc-profile-hero-content h3 {
  font-size: clamp(1.15rem, 2.6vw, 1.38rem);
}

.soc-profile-account-strip .soc-profile-hero-aside {
  gap: 4px;
}

.soc-profile-account-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.soc-profile-account-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--soc-primary-deep);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.soc-profile-account-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--soc-primary) 22%, var(--soc-border));
  border-radius: 999px;
  color: var(--soc-primary-deep);
  font-size: 12px;
  font-weight: 700;
  background: #fff;
}

.soc-profile-detail-list {
  width: 100%;
  min-width: 0;
}

.soc-profile-detail-sheet {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.soc-profile-detail-sheet-head,
.soc-profile-detail-sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(88px, 0.55fr) minmax(110px, 0.65fr) minmax(146px, 0.8fr);
  gap: 12px;
  align-items: center;
}

.soc-profile-detail-sheet.is-reports .soc-profile-detail-sheet-head,
.soc-profile-detail-sheet.is-reports .soc-profile-detail-sheet-row {
  grid-template-columns: minmax(0, 1.7fr) minmax(78px, 0.48fr) minmax(98px, 0.56fr) minmax(130px, 0.78fr) minmax(92px, 0.56fr) minmax(146px, 0.74fr);
}

.soc-profile-detail-sheet-head {
  padding: 0 18px 10px;
  border-bottom: 0;
  background: transparent;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-sm);
  font-weight: 700;
}

.soc-profile-detail-sheet-head > span,
.soc-profile-detail-sheet-row > span {
  min-width: 0;
}

.soc-profile-detail-sheet-body {
  display: grid;
  border: 1px solid var(--soc-border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.soc-profile-detail-sheet-row {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  appearance: none;
  border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
  background: transparent;
  color: var(--soc-text);
  text-align: left;
}

.soc-profile-detail-sheet-row:first-child {
  border-top: 0;
}

.soc-profile-detail-sheet-row:not(.is-static) {
  cursor: pointer;
}

.soc-profile-detail-sheet-row:not(.is-static):hover {
  background: color-mix(in srgb, var(--soc-primary) 5%, #fff);
}

.soc-profile-detail-sheet-row:not(.is-static):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--soc-primary) 42%, transparent);
  outline-offset: -2px;
}

.soc-profile-detail-sheet-title {
  display: block;
  min-width: 0;
  font-weight: 700;
  line-height: 1.45;
}

.soc-profile-detail-sheet-row > span:not(.soc-profile-detail-sheet-title) {
  color: var(--soc-text-sub);
  font-size: var(--soc-text-sm);
}

.soc-profile-activity-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-block: 2px 4px;
}

.soc-profile-activity-item {
  display: grid;
  gap: 6px;
  align-content: start;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
  background: transparent;
  padding: 12px 0;
  color: var(--soc-text);
}

.soc-profile-tile-btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.soc-profile-tile-btn:hover {
  border-top-color: color-mix(in srgb, var(--soc-primary) 58%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--soc-primary) 8%, transparent), transparent 82%);
}

.soc-profile-tile-label {
  margin: 0;
  font-size: var(--soc-text-xs);
  color: var(--soc-muted);
}

.soc-profile-tile-value {
  margin: 0;
  font-size: var(--soc-text-md);
  color: var(--soc-text);
}

#myProfileAccountSection {
  display: grid;
  gap: 16px;
  padding: 18px 20px 20px;
}

#myProfileAccountForm {
  min-height: 0;
  padding-bottom: 0;
}

#myProfileAccountForm textarea {
  min-height: 132px;
  resize: vertical;
}

.soc-profile-account-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.soc-profile-edit-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.soc-profile-detail-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#myProfileDetailTitle {
  margin: 0;
  font-size: clamp(1.18rem, 1.8vw, 1.36rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

#myProfileAccountSection > .soc-block-head > h3 {
  margin: 0;
  font-size: clamp(1.48rem, 2.6vw, 1.92rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.soc-profile-back-btn {
  min-width: 38px;
  padding-inline: 0;
  font-size: 20px;
  line-height: 1;
}

.soc-profile-account-workspace {
  display: grid;
  gap: 16px;
}

.soc-profile-account-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.soc-profile-account-panel,
.soc-profile-account-form {
  border: 1px solid var(--soc-border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.soc-profile-account-card {
  display: grid;
  gap: 0;
}

.soc-profile-account-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
}

.soc-profile-account-card-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

.soc-profile-account-card-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-profile-account-card-copy h3 {
  margin: 0;
}

.soc-profile-account-card-copy .meta {
  margin: 0;
}

.soc-profile-account-panel.is-editing .soc-profile-account-card-head {
  padding-bottom: 16px;
  border-bottom: 0;
}

.soc-profile-account-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.soc-profile-account-image-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.soc-profile-account-form {
  display: grid;
  gap: 0;
  padding: 18px 20px 20px;
}

.soc-profile-account-form-section {
  display: grid;
  gap: 14px;
}

.soc-profile-account-subform {
  padding-top: 18px;
}

.soc-profile-account-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.soc-profile-account-section-head h4 {
  margin: 0;
}

.soc-profile-account-section-head .meta {
  margin: 6px 0 0;
}

.soc-profile-account-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.soc-profile-account-read-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.soc-profile-account-read-item {
  display: grid;
  gap: 5px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
}

.soc-profile-account-read-item:last-child,
.soc-profile-account-read-item:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

.soc-profile-account-read-item span {
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
  font-weight: 600;
}

.soc-profile-account-read-item strong {
  font-size: var(--soc-text-md);
  line-height: 1.35;
  color: var(--soc-text);
}

.soc-profile-account-field-grid.is-password-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.soc-profile-account-field-grid.is-withdraw-grid {
  grid-template-columns: minmax(0, 1fr);
}

.soc-profile-account-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.soc-profile-account-field.is-wide {
  grid-column: 1 / -1;
}

.soc-profile-account-field span {
  color: var(--soc-text-sub);
  font-size: var(--soc-text-sm);
  font-weight: 600;
}

.soc-profile-account-field input,
.soc-profile-account-field textarea {
  width: 100%;
  background: #fbfcfd;
  border-color: color-mix(in srgb, var(--soc-border) 78%, #cbd5e1);
}

.soc-profile-withdraw-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--soc-danger) 24%, var(--soc-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--soc-danger) 6%, #fff);
  color: color-mix(in srgb, var(--soc-danger) 82%, #5b1b1b);
  font-size: var(--soc-text-sm);
  line-height: 1.5;
}

.soc-profile-account-security-panel {
  align-self: start;
}

.soc-profile-security-stack {
  display: grid;
  gap: 12px;
}

.soc-profile-security-action {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 80%, #e2e8f0);
  border-radius: 14px;
  background: #fbfcfd;
}

.soc-profile-security-action.is-danger {
  border-color: color-mix(in srgb, var(--soc-danger) 20%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-danger) 4%, #fff);
}

.soc-profile-security-copy {
  display: grid;
  gap: 6px;
}

.soc-profile-security-copy strong {
  font-size: var(--soc-text-md);
  line-height: 1.25;
}

.soc-profile-security-copy p {
  margin: 0;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-sm);
  line-height: 1.55;
}

.soc-profile-modal-panel {
  width: min(560px, calc(100vw - 32px));
}

.soc-profile-modal-panel .modal-head {
  align-items: flex-start;
}

.soc-profile-modal-panel .modal-head .desc {
  margin: 6px 0 0;
  color: var(--soc-text-sub);
}

.soc-profile-modal-panel-danger .modal-head h2 {
  color: color-mix(in srgb, var(--soc-danger) 82%, var(--soc-text));
}

.soc-profile-modal-form {
  display: grid;
  gap: 16px;
}

.soc-profile-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

@media (max-width: 1100px) {
  .soc-profile-overview-shell,
  .soc-profile-score-main,
  .soc-profile-account-card-head,
  .soc-profile-account-field-grid.is-password-grid,
  .soc-profile-account-editor-grid {
    grid-template-columns: 1fr;
  }

  .soc-profile-score-head {
    align-items: start;
    flex-direction: column;
  }

  .soc-profile-score-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .soc-profile-account-summary-grid {
    grid-template-columns: 1fr;
  }

  .soc-profile-account-summary-item + .soc-profile-account-summary-item {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
  }
}

@media (max-width: 720px) {
  .soc-profile-record-row,
  .soc-profile-account-field-grid,
  .soc-profile-modal-grid {
    grid-template-columns: 1fr;
  }

  .soc-profile-record-row-side {
    justify-items: start;
    text-align: left;
  }

  .soc-profile-account-card-head,
  .soc-profile-account-form,
  #myProfileAccountSection,
  .soc-profile-record-section,
  .soc-profile-detail-sheet-head {
    padding-inline: 16px;
  }

  .soc-profile-account-card-actions,
  .soc-profile-edit-actions {
    justify-content: stretch;
  }
}

.soc-kpi-grid.soc-kpi-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.soc-weekly-view {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.soc-weekly-headerbar {
  top: 0;
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--soc-divider, var(--soc-border));
}

.soc-weekly-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.soc-weekly-header-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-weekly-eyebrow {
  margin: 0;
  color: #c2410c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.soc-weekly-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.soc-weekly-header-meta {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}

#weeklyBuilderSummaryText {
  margin: 0;
}

.soc-weekly-workspace-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 336px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.soc-weekly-setup-column,
.soc-weekly-main-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 16px;
  align-content: start;
}

.soc-weekly-main-column {
  overflow: hidden;
}

.soc-weekly-control-card,
.soc-weekly-review-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--soc-border);
  border-radius: 14px;
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-soft);
}

.soc-weekly-control-card-head,
.soc-weekly-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.soc-weekly-control-card-head h4,
.soc-weekly-review-head h4 {
  margin: 0;
  color: var(--soc-text);
  font-size: 18px;
  line-height: 1.35;
}

.soc-weekly-flow-list {
  display: grid;
  gap: 10px;
}

.soc-weekly-flow-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soc-card-bg) 86%, var(--soc-panel-bg));
  color: var(--soc-text);
  text-align: left;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.soc-weekly-flow-item:hover,
.soc-weekly-flow-item:focus-visible {
  border-color: color-mix(in srgb, var(--soc-primary) 48%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary) 10%, var(--soc-card-bg));
  transform: translateY(-1px);
  outline: none;
}

.soc-weekly-flow-item.is-active {
  border-color: color-mix(in srgb, var(--soc-primary) 58%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary) 14%, var(--soc-card-bg));
}

.soc-weekly-flow-item.is-static {
  cursor: default;
}

.soc-weekly-flow-item.is-static:hover,
.soc-weekly-flow-item.is-static:focus-visible {
  transform: none;
  border-color: var(--soc-border);
  background: color-mix(in srgb, var(--soc-card-bg) 86%, var(--soc-panel-bg));
}

.soc-weekly-flow-index {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-primary) 14%, var(--soc-card-bg));
  color: #c2410c;
  font-size: 13px;
  font-weight: 800;
}

.soc-weekly-flow-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.soc-weekly-flow-copy strong {
  min-width: 0;
  color: var(--soc-text);
  font-size: 14px;
  line-height: 1.3;
}

.soc-weekly-flow-copy small {
  min-width: 0;
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.soc-weekly-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.soc-weekly-config-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soc-panel-bg) 88%, var(--soc-card-bg));
}

.soc-weekly-config-item > span {
  color: var(--soc-text-sub);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.soc-weekly-config-item > strong {
  min-width: 0;
  color: var(--soc-text);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#weeklyPreviewScroller {
  min-height: 0;
}

.soc-weekly-preview-viewport {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.soc-weekly-section-card {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.soc-weekly-section-card[data-weekly-section="heatmap"] {
  min-height: 360px;
}

.soc-weekly-section-card[data-weekly-section="tickets"] {
  align-content: start;
}

.soc-weekly-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.soc-weekly-section-head h4 {
  margin: 0;
  padding-left: 8px;
  border-left: 2px solid var(--soc-primary);
  font-size: var(--soc-text-sm);
}

.soc-weekly-summary-preline {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.soc-weekly-ticket-total {
  font-size: var(--soc-text-base);
  font-weight: 800;
  color: var(--soc-primary);
}

.soc-weekly-ticket-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.soc-weekly-ticket-summary-card {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soc-card-bg) 84%, var(--soc-panel-bg));
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.soc-weekly-ticket-summary-label {
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
}

.soc-weekly-ticket-summary-card strong {
  font-size: var(--soc-text-lg);
  font-weight: 800;
  color: var(--soc-text);
}

.soc-weekly-ticket-list-block {
  display: grid;
  gap: 8px;
}

.soc-weekly-ticket-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.soc-weekly-ticket-list {
  display: grid;
  gap: 8px;
}

.soc-weekly-ticket-item {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soc-panel-bg) 86%, var(--soc-card-bg));
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.soc-weekly-ticket-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.soc-weekly-ticket-item-title {
  font-size: var(--soc-text-sm);
  font-weight: 800;
  color: var(--soc-text);
}

.soc-weekly-ticket-item-meta {
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-weekly-ticket-empty {
  margin: 0;
}

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

.soc-weekly-review-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-weekly-review-field-full {
  grid-column: 1 / -1;
}

.soc-weekly-review-field > span {
  color: var(--soc-text-sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.soc-weekly-review-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 136px;
  resize: vertical;
}

.soc-weekly-action-list {
  display: grid;
  gap: 8px;
}

.soc-weekly-kpi-row {
  display: grid;
  gap: 4px;
}

.soc-weekly-kpi-main {
  color: var(--soc-text);
}

.soc-weekly-kpi-wow {
  font-size: var(--soc-text-xs);
  font-weight: 700;
}

.soc-weekly-kpi-wow.is-up {
  color: #16a34a;
}

.soc-weekly-kpi-wow.is-down {
  color: #dc2626;
}

.soc-weekly-kpi-wow.is-flat {
  color: var(--soc-text-sub);
}

.soc-weekly-kpi-wow-footnote {
  margin: 2px 2px 0;
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
}

#weeklyPreviewHeatmap {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  min-height: 0;
}

.soc-weekly-heatmap-scroll {
  width: 100%;
  max-width: 100%;
  min-height: 230px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.soc-weekly-heatmap-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 700px;
  border: 1px solid var(--soc-divider-strong);
  background: var(--soc-card-bg);
}

.soc-weekly-heatmap-table th,
.soc-weekly-heatmap-table td {
  border: 1px solid var(--soc-divider-strong);
  min-width: 24px;
  height: 22px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  padding: 0;
}

.soc-weekly-heatmap-table th {
  background: color-mix(in srgb, var(--soc-panel-bg) 92%, var(--soc-card-bg));
  color: var(--soc-text-sub);
}

.soc-weekly-heatmap-table tbody th {
  min-width: 38px;
}

.soc-weekly-heatmap-cell {
  background: color-mix(in srgb, var(--soc-border) 64%, transparent);
}

.soc-weekly-heatmap-cell.i1 { background: color-mix(in srgb, var(--soc-primary) 16%, transparent); }
.soc-weekly-heatmap-cell.i2 { background: color-mix(in srgb, var(--soc-primary) 28%, transparent); }
.soc-weekly-heatmap-cell.i3 { background: color-mix(in srgb, var(--soc-primary) 40%, transparent); }
.soc-weekly-heatmap-cell.i4 { background: color-mix(in srgb, var(--soc-primary) 56%, transparent); }
.soc-weekly-heatmap-cell.i5 { background: color-mix(in srgb, var(--soc-primary) 72%, var(--soc-accent) 28%); }

@keyframes socWeeklyHourFocusPulse {
  0% {
    box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--soc-primary) 40%, transparent);
  }
  60% {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--soc-primary) 78%, var(--soc-accent) 22%);
  }
  100% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 60%, transparent);
  }
}

.soc-weekly-heatmap-table [data-weekly-hour].is-hour-focus {
  position: relative;
  outline: 2px solid color-mix(in srgb, var(--soc-primary) 78%, var(--soc-accent) 22%);
  outline-offset: -2px;
  animation: socWeeklyHourFocusPulse 1.4s ease-out 1;
}

.soc-weekly-heatmap-table th[data-weekly-hour].is-hour-focus {
  background: color-mix(in srgb, var(--soc-primary) 22%, var(--soc-card-bg));
  color: var(--soc-text);
}

.soc-weekly-heatmap-table [data-weekly-day].is-peak-day,
.soc-weekly-heatmap-table [data-weekly-hour].is-peak-hour {
  transition: background-color 160ms ease, box-shadow 160ms ease, outline-color 160ms ease;
}

.soc-weekly-heatmap-table.is-weekly-peak-blink-on [data-weekly-day].is-peak-day {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-accent) 62%, var(--soc-primary) 38%);
  background: color-mix(in srgb, var(--soc-primary) 24%, transparent);
}

.soc-weekly-heatmap-table.is-weekly-peak-blink-on [data-weekly-hour].is-peak-hour {
  outline: 2px solid color-mix(in srgb, var(--soc-accent) 58%, var(--soc-primary) 42%);
  outline-offset: -2px;
}

.soc-weekly-heatmap-table.is-weekly-peak-blink-on th[data-weekly-day].is-peak-day,
.soc-weekly-heatmap-table.is-weekly-peak-blink-on th[data-weekly-hour].is-peak-hour {
  color: var(--soc-text);
  background: color-mix(in srgb, var(--soc-primary) 22%, var(--soc-card-bg));
}

.soc-weekly-heatmap-peak {
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
}

.soc-weekly-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.soc-weekly-builder-scope-card {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
}

.soc-weekly-builder-scope-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.soc-weekly-builder-scope-option,
.soc-weekly-builder-section-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--soc-text);
  font-size: var(--soc-text-sm);
}

.soc-weekly-builder-scope-option input,
.soc-weekly-builder-section-option input {
  margin: 0;
}

.soc-weekly-builder-site-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.soc-weekly-builder-site-options .soc-site-chip-btn {
  width: 100%;
  min-width: 0;
}

.soc-weekly-builder-section-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.soc-weekly-builder-panel {
  min-height: min(65dvh, 680px);
  height: min(70dvh, 820px);
  max-height: 84dvh;
}

#weeklyBuilderSheet {
  z-index: 360;
  background: transparent;
  pointer-events: none;
}

#weeklyBuilderSheet.open {
  pointer-events: none;
}

#weeklyBuilderSheet .soc-bottom-sheet-panel {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

#weeklyBuilderBackdrop {
  z-index: 359;
}

#weeklyBuilderSheet .soc-report-builder-stepper {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

#weeklyBuilderSheet .soc-report-builder-step-tab {
  pointer-events: auto;
}

#weeklyBuilderSheet .soc-report-builder-steps {
  position: relative;
  z-index: 1;
}

html.weekly-builder-open,
body.weekly-builder-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.soc-briefing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#homeOpenWeeklyBtn {
  margin-top: 5px;
}

.soc-weekly-template-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}

.soc-weekly-action-item {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  padding: 8px;
}

.soc-weekly-action-item input,
.soc-weekly-action-item select {
  width: 100%;
  min-width: 0;
}

.soc-weekly-action-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid var(--soc-border);
  border-radius: 8px;
  padding: 0 8px;
  background: var(--soc-surface-overlay-11);
  white-space: nowrap;
}

.soc-weekly-action-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

#weeklyWeekSummary {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.soc-weekly-site-section {
  display: grid;
  gap: 8px;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-panel-bg);
  padding: 10px;
}

.soc-weekly-site-list {
  display: grid;
  gap: 8px;
}

.soc-weekly-site-card {
  display: grid;
  gap: 7px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  padding: 10px;
}

.soc-weekly-site-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.soc-weekly-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--soc-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-weekly-status-chip.is-submitted {
  color: var(--soc-success);
  background: color-mix(in srgb, var(--soc-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--soc-success) 35%, var(--soc-border));
}

.soc-weekly-status-chip.is-draft {
  color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
  border-color: color-mix(in srgb, var(--soc-primary) 38%, var(--soc-border));
}

.soc-weekly-status-chip.is-not-started {
  color: var(--soc-text-sub);
  background: var(--soc-surface-overlay-11);
  border-color: var(--soc-border);
}

.soc-weekly-site-top-title {
  margin: 0;
  font-size: 12px;
  color: var(--soc-text-sub);
}

.soc-weekly-site-top-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.soc-weekly-site-top-btn {
  width: 100%;
  text-align: left;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-11);
  color: var(--soc-text);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
}

.soc-weekly-site-top-btn:hover {
  border-color: color-mix(in srgb, var(--soc-primary) 45%, var(--soc-border));
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
}

.soc-analytics-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-card);
  background: var(--soc-panel-bg);
  padding: 12px;
  box-shadow: var(--soc-shadow-soft);
}

.soc-analytics-header-left h3 {
  margin: 0;
  font-size: var(--soc-text-lg);
}

.soc-analytics-header-left .meta {
  margin-top: 4px;
}

.soc-analytics-header-right {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.soc-analytics-range-quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.soc-analytics-range-quick .ds-btn.active {
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
  border-color: var(--soc-primary);
}

.soc-analytics-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.soc-analytics-custom-range input[type="date"] {
  min-height: 34px;
}

.soc-analytics-site-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  min-width: 0;
  flex-wrap: nowrap;
}

.soc-analytics-site-filter label {
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
  flex: 0 0 auto;
  line-height: 1.2;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.soc-analytics-site-filter select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.soc-analytics-site-filter button {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.soc-analytics-site-filter .soc-analytics-site-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-analytics-state {
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-card);
  background: var(--soc-panel-bg);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.soc-analytics-skeleton {
  border-radius: 12px;
  min-height: 68px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--soc-border) 55%, transparent) 0%,
    color-mix(in srgb, var(--soc-border) 20%, transparent) 48%,
    color-mix(in srgb, var(--soc-border) 55%, transparent) 100%
  );
  background-size: 220% 100%;
  animation: skeleton-wave 1.1s ease infinite;
}

@keyframes skeleton-wave {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@keyframes soc-btn-spinner {
  to { transform: rotate(360deg); }
}

.soc-analytics-content {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.soc-analytics-hero {
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-card);
  background: var(--soc-panel-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 12px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.risk-overview-card {
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-areas:
    "toolbar toolbar"
    "gauge meta"
    "title title";
  row-gap: 10px;
}

.soc-risk-overview-toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.soc-risk-gauge-wrap {
  grid-area: gauge;
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}

.soc-risk-gauge {
  width: 160px;
  height: 160px;
  transform: rotate(-90deg);
  overflow: visible;
}

.soc-risk-gauge-track {
  fill: none;
  stroke: color-mix(in srgb, var(--soc-border) 70%, transparent);
  stroke-width: 10;
  vector-effect: non-scaling-stroke;
}

.soc-risk-gauge-arc {
  fill: none;
  stroke: var(--soc-primary);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.28s ease, stroke 0.2s ease;
  vector-effect: non-scaling-stroke;
}

.soc-risk-gauge-value-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 4px;
  color: var(--soc-text);
  text-align: center;
  padding: 22px;
}

.soc-risk-gauge-value-wrap strong {
  font-size: 30px;
  line-height: 1;
}

.soc-risk-gauge-value-wrap span {
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
}

.soc-risk-gauge-value-wrap .soc-risk-grade {
  min-height: 24px;
  padding: 3px 10px;
  font-size: 11px;
}

.soc-analytics-hero-meta {
  grid-area: meta;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-right: 0;
}

.soc-analytics-hero-head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.soc-analytics-hero-head h4 {
  margin: 0;
  font-size: var(--soc-text-lg);
  white-space: nowrap;
}

.soc-risk-overview-title {
  grid-area: title;
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: var(--soc-text-lg);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-risk-overview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: fit-content;
}

.soc-risk-info-trigger,
.risk-info-btn {
  position: static;
  z-index: 1;
  transform: none;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--soc-primary) 34%, var(--soc-border));
  color: color-mix(in srgb, var(--soc-primary) 85%, var(--soc-text-sub));
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 58%, transparent);
  opacity: 0.85;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.soc-risk-info-trigger:hover,
.soc-risk-info-trigger:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--soc-primary) 24%, transparent);
}

.soc-risk-info-popover {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  width: min(288px, calc(100vw - 24px));
  max-width: min(288px, calc(100vw - 24px));
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--soc-border));
  background: var(--soc-card-bg);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--soc-shadow) 46%, transparent);
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
  z-index: 80;
  --soc-risk-popover-arrow-left: 28px;
}

.soc-risk-info-popover::before {
  content: "";
  position: absolute;
  left: var(--soc-risk-popover-arrow-left);
  width: 14px;
  height: 14px;
  border-left: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--soc-border));
  border-top: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--soc-border));
  background: var(--soc-card-bg);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

.soc-risk-overview-toolbar .soc-risk-grade,
.soc-risk-overview-toolbar .ds-btn {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  min-width: fit-content;
  flex: 0 0 auto;
}

.soc-risk-info-popover h5 {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  color: var(--soc-text);
}

.soc-risk-info-popover p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--soc-text-sub);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.soc-risk-level-criteria {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--soc-primary) 10%, var(--soc-border));
}

.soc-risk-info-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.soc-risk-info-popover[data-placement="bottom"]::before {
  top: -8px;
}

.soc-risk-info-popover[data-placement="top"]::before {
  bottom: -8px;
  transform: translateX(-50%) rotate(225deg);
}

@media (max-width: 768px) {
  .soc-risk-info-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom) + 12px);
    width: auto;
    max-height: 48dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 100;
  }

  .soc-risk-info-popover::before {
    display: none;
  }
}

.soc-risk-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  font-size: var(--soc-text-xs);
  font-weight: 700;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1;
  flex: 0 0 auto;
}

#analyticsRiskGrade.soc-risk-grade.safe,
#analyticsRiskGrade.soc-risk-grade.stable,
#analyticsRiskGrade.soc-risk-grade.is-safe,
#analyticsRiskGrade.soc-risk-grade[data-risk-level="safe"],
.soc-risk-grade.safe,
.soc-risk-grade.stable,
.soc-risk-grade.is-safe,
.soc-risk-grade[data-risk-level="safe"] {
  color: var(--soc-success) !important;
  background: color-mix(in srgb, var(--soc-success) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--soc-success) 30%, var(--soc-border)) !important;
}

#analyticsRiskGrade.soc-risk-grade.caution,
#analyticsRiskGrade.soc-risk-grade.is-caution,
#analyticsRiskGrade.soc-risk-grade[data-risk-level="caution"],
.soc-risk-grade.caution,
.soc-risk-grade.is-caution,
.soc-risk-grade[data-risk-level="caution"] {
  color: var(--soc-warning) !important;
  background: color-mix(in srgb, var(--soc-warning) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--soc-warning) 35%, var(--soc-border)) !important;
}

#analyticsRiskGrade.soc-risk-grade.danger,
#analyticsRiskGrade.soc-risk-grade.risk,
#analyticsRiskGrade.soc-risk-grade.critical,
#analyticsRiskGrade.soc-risk-grade.is-danger,
#analyticsRiskGrade.soc-risk-grade[data-risk-level="danger"],
.soc-risk-grade.danger,
.soc-risk-grade.risk,
.soc-risk-grade.critical,
.soc-risk-grade.is-danger,
.soc-risk-grade[data-risk-level="danger"] {
  color: var(--soc-danger) !important;
  background: color-mix(in srgb, var(--soc-danger) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--soc-danger) 35%, var(--soc-border)) !important;
}

.soc-analytics-driver-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
}

.soc-analytics-driver-list li {
  color: var(--soc-text-sub);
  font-size: var(--soc-text-sm);
}

.soc-analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.soc-analytics-kpi-grid .soc-kpi-card {
  cursor: pointer;
}

.soc-analytics-kpi-grid .soc-kpi-card.is-active {
  border-color: var(--soc-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 16%, transparent);
}

.soc-analytics-trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.soc-analytics-trend-grid > .soc-block {
  min-height: 168px;
}

.soc-analytics-trend-grid > .soc-block .soc-sparkline-lg {
  min-height: 78px;
}

.soc-heatmap-legend {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
}

.soc-heatmap-day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.soc-heatmap-day-btn {
  min-height: 30px;
  padding: 4px 10px;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  background: var(--soc-card-bg);
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s ease;
}

.soc-heatmap-day-btn:hover {
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
  border-color: color-mix(in srgb, var(--soc-primary) 45%, var(--soc-border));
}

.soc-heatmap-day-btn:active {
  transform: scale(0.98);
}

.soc-heatmap-day-btn.active {
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
  border-color: var(--soc-primary);
}

.soc-heatmap-grid {
  display: grid;
  grid-template-columns: 48px repeat(24, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
}

.soc-heatmap-scroll {
  width: 100%;
  max-width: 100%;
  min-height: 212px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.soc-heatmap-scroll.is-mobile-day {
  overflow-x: hidden;
}

#analyticsHeatmapBlock .soc-heatmap-grid {
  min-height: 188px;
}

#analyticsPeakWindow {
  font-size: 0.5em;
  line-height: 1.15;
}

.soc-heatmap-header,
.soc-heatmap-row-label {
  font-size: 10px;
  color: var(--soc-text-sub);
  display: grid;
  place-items: center;
}

.soc-heatmap-cell {
  border-radius: 4px;
  min-height: 16px;
  background: color-mix(in srgb, var(--soc-border) 65%, transparent);
}

.soc-heatmap-cell.i1 { background: color-mix(in srgb, var(--soc-primary) 18%, var(--soc-card-bg)); }
.soc-heatmap-cell.i2 { background: color-mix(in srgb, var(--soc-primary) 30%, var(--soc-card-bg)); }
.soc-heatmap-cell.i3 { background: color-mix(in srgb, var(--soc-primary) 42%, var(--soc-card-bg)); }
.soc-heatmap-cell.i4 { background: color-mix(in srgb, var(--soc-primary) 56%, var(--soc-card-bg)); }
.soc-heatmap-cell.i5 { background: color-mix(in srgb, var(--soc-primary) 72%, var(--soc-card-bg)); }

.soc-heatmap-grid.is-mobile-day {
  min-width: 0;
  grid-template-columns: 34px repeat(24, minmax(0, 1fr));
  gap: 2px;
}

.soc-heatmap-grid.is-mobile-day .soc-heatmap-cell {
  min-height: 14px;
}

.soc-analytics-store-list {
  display: grid;
  gap: 8px;
}

.soc-store-comparison-head {
  position: relative;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
  z-index: 1;
}

.soc-store-comparison-head > h3 {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-store-comparison-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 100%;
  width: 100%;
  margin-left: 0;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
}

.soc-store-comparison-actions .analytics-store-metric-select {
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0;
  max-width: none;
  min-height: 34px;
  height: 34px;
  padding: 0 28px 0 10px;
  line-height: 1.2;
}

.soc-info-icon-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 999px;
  color: color-mix(in srgb, var(--soc-primary) 85%, var(--soc-text));
}

.soc-store-summary-kpis {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  margin: 8px 0 10px;
  width: 100%;
  min-width: 0;
}

.soc-store-summary-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc((100% - 12px) / 3);
  min-width: 0;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-11);
  color: var(--soc-text-sub);
  font-size: 10.5px;
  line-height: 1.25;
  padding: 4px 7px;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-store-summary-chip.is-empty {
  flex: 1 1 100%;
  justify-content: flex-start;
  text-align: left;
  color: var(--soc-muted);
}

.soc-store-info-popover {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 40;
  width: min(280px, calc(100vw - 24px));
  max-width: min(280px, calc(100vw - 24px));
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-panel-bg);
  box-shadow: 0 10px 26px var(--soc-shadow);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.soc-store-info-popover p {
  margin: 0;
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.soc-store-row {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  padding: 8px 10px;
  display: grid;
  gap: 6px;
  cursor: pointer;
  min-width: 0;
}

.soc-store-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.soc-store-row strong {
  font-size: var(--soc-text-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-store-main-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
}

.soc-store-main-metric-label {
  color: var(--soc-text-sub);
  font-size: 11px;
  white-space: nowrap;
}

.soc-store-main-metric-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--soc-text);
  white-space: nowrap;
}

.soc-store-row-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.soc-store-kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--soc-border);
  border-radius: 999px;
  background: var(--soc-surface-overlay-11);
  padding: 2px 8px;
  max-width: 100%;
}

.soc-store-kpi-label {
  color: var(--soc-text-sub);
  font-size: 11px;
  white-space: nowrap;
}

.soc-store-kpi-value {
  color: var(--soc-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.soc-ratio-value--safe {
  color: var(--soc-success) !important;
}

.soc-ratio-value--caution {
  color: var(--soc-warning) !important;
}

.soc-ratio-value--danger {
  color: var(--soc-danger) !important;
}

.soc-store-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-border) 75%, transparent);
  overflow: hidden;
}

.soc-store-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--soc-primary), var(--soc-accent));
}

.soc-analytics-store-drawer {
  position: fixed;
  top: calc(var(--soc-safe-top) + 64px);
  right: 10px;
  width: min(420px, calc(100vw - 20px));
  max-height: calc(100dvh - 140px);
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-card);
  background: var(--soc-panel-bg);
  box-shadow: var(--soc-shadow-card);
  padding: 10px;
  z-index: 85;
  display: grid;
  gap: 10px;
  transform: translate3d(0, 0, 0);
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.soc-analytics-store-drawer.dragging {
  transition: none;
}

.soc-analytics-store-drawer:not(.hidden) {
  transform: translate3d(0, var(--soc-analytics-drawer-drag, 0), 0);
}

.soc-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 84;
  background: var(--soc-overlay-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.soc-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

#reportBuilderBackdrop {
  z-index: 359;
}

#peopleCreateBackdrop {
  z-index: 349;
}

#employeeDetailBackdrop {
  z-index: 351;
}

#reportParticipantPickerBackdrop {
  z-index: 347;
}

#participantsSheetBackdrop {
  z-index: 345;
}

#homeTrendInsightBackdrop {
  z-index: 343;
}

#homeTrendInsightSheet {
  z-index: 344;
  background: transparent;
  pointer-events: none;
}

#homeTrendInsightSheet.open {
  pointer-events: none;
}

#homeTrendInsightSheet .soc-bottom-sheet-panel {
  pointer-events: auto;
}

#participantsSheet {
  z-index: 346;
  background: transparent;
  pointer-events: none;
}

#participantsSheet.open {
  pointer-events: none;
}

#participantsSheet .soc-bottom-sheet-panel {
  pointer-events: auto;
}

#reportParticipantPickerSheet {
  z-index: 348;
  background: transparent;
  pointer-events: none;
}

#reportParticipantPickerSheet.open {
  pointer-events: none;
}

#reportParticipantPickerSheet .soc-bottom-sheet-panel {
  pointer-events: auto;
}

#reportParticipantPickerSheet .soc-bottom-sheet-panel.soc-report-participant-panel {
  min-height: min(70dvh, 720px);
  max-height: min(86dvh, 860px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: 8px;
  overflow: hidden;
  overflow-x: hidden;
  min-width: 0;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.soc-report-participant-tab-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.soc-report-participant-tab-row .chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
}

.soc-report-participant-search-label {
  font-size: var(--soc-text-sm);
  color: var(--soc-text-sub);
}

.soc-report-participant-search {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}

.soc-report-participant-list {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 8px;
  padding-right: 2px;
  padding-bottom: 6px;
}

.soc-participant-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  color: var(--soc-text);
  padding: 10px;
  text-align: left;
  box-sizing: border-box;
}

.soc-participant-row.is-selected {
  border-color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
}

.soc-participant-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--soc-primary) 16%, var(--soc-panel-bg));
  color: var(--soc-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex: 0 0 auto;
}

.soc-participant-main {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
}

.soc-participant-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-participant-main .meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-participant-role-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
  color: var(--soc-text-sub);
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-participant-state-pill {
  flex: 0 0 auto;
  border: 1px solid var(--soc-border);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--soc-text-sub);
  white-space: nowrap;
}

.soc-participant-row.is-selected .soc-participant-state-pill {
  border-color: var(--soc-primary);
  color: var(--soc-primary);
  background: color-mix(in srgb, var(--soc-primary) 12%, transparent);
}

.soc-report-participant-selected {
  border: 1px solid var(--soc-divider);
  border-radius: 12px;
  background: var(--soc-card-bg);
  padding: 10px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-report-participant-selected-row {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-report-participant-pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.soc-participant-pill {
  border: 1px solid var(--soc-border);
  border-radius: 999px;
  background: var(--soc-panel-bg);
  color: var(--soc-text);
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.2;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-participant-pill.is-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: var(--soc-primary);
  background: color-mix(in srgb, var(--soc-primary) 11%, transparent);
}

.soc-participant-pill.is-primary strong {
  color: var(--soc-primary);
  font-size: 11px;
  white-space: nowrap;
}

.soc-report-participant-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--soc-divider);
  background: var(--soc-panel-bg);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}

.soc-report-participant-footer .ds-btn {
  min-width: 96px;
}

html.report-participant-picker-open,
body.report-participant-picker-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.report-participant-picker-open .container.ds-page,
body.report-participant-picker-open .container.ds-page {
  overflow: hidden !important;
}

body.analytics-drawer-open,
html.analytics-drawer-open {
  overflow: hidden;
}

.soc-analytics-store-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--soc-divider);
}

#analyticsStoreDrawerHandle {
  display: none;
}

.soc-analytics-store-drawer-head h4 {
  margin: 0;
}

.soc-analytics-store-drawer-body {
  overflow-y: auto;
  display: grid;
  gap: 10px;
  min-height: 0;
}

.soc-analytics-store-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.soc-analytics-store-mini article {
  border: 1px solid var(--soc-border);
  border-radius: 8px;
  background: var(--soc-card-bg);
  padding: 8px;
}

.soc-analytics-store-mini h5,
.soc-analytics-store-incidents h5 {
  margin: 0 0 6px;
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
}

.soc-reports-builder,
.soc-report-preview {
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-card);
  background: var(--soc-panel-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 12px;
}

.soc-reports-form-grid {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.soc-reports-site-multi,
.soc-reports-section-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.soc-reports-scope-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.soc-reports-section-toggles.field-invalid {
  border: 1px solid var(--soc-field-invalid-border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 0 0 2px var(--soc-field-invalid-ring);
}

.soc-reports-scope-toggle label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--soc-border);
  border-radius: 8px;
  background: var(--soc-card-bg);
  padding: 6px 8px;
  font-size: var(--soc-text-sm);
}

.soc-site-chip-btn {
  min-height: 36px;
  border: 1px solid var(--soc-border);
  border-radius: 9px;
  background: var(--soc-card-bg);
  color: var(--soc-text);
  font-size: var(--soc-text-sm);
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-site-chip-btn.is-selected {
  border-color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
}

.soc-report-section-row {
  width: 100%;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
}

.soc-report-section-icon {
  flex: 0 0 auto;
  font-size: 9px;
  color: var(--soc-primary);
  line-height: 1;
}

.soc-report-section-row.is-on {
  border-color: color-mix(in srgb, var(--soc-primary) 55%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 65%, var(--soc-card-bg));
}

.soc-report-section-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.soc-report-section-copy strong {
  font-size: var(--soc-text-sm);
}

.soc-report-section-copy small {
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
  line-height: 1.25;
}

.soc-report-section-switch {
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  background: var(--soc-card-bg);
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.soc-report-section-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--soc-text-sub);
  transition: transform 0.2s ease, background 0.2s ease;
}

.soc-report-section-row.is-on .soc-report-section-switch {
  border-color: var(--soc-primary);
  background: color-mix(in srgb, var(--soc-primary) 20%, var(--soc-card-bg));
}

.soc-report-section-row.is-on .soc-report-section-switch-thumb {
  transform: translateX(14px);
  background: var(--soc-primary);
}

.soc-reports-site-picker {
  display: grid;
  gap: 8px;
}

.soc-reports-site-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.soc-reports-selected-sites {
  min-height: 26px;
}

.soc-reports-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-report-headerbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-topbar-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.soc-report-header-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.soc-report-title-wrap {
  flex: 0 0 auto;
  min-width: 0;
}

.soc-report-title-wrap h3 {
  margin: 0;
  font-size: var(--soc-text-lg);
}

#reportSummaryText,
#reportHeaderSummary {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-report-header-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
}

.soc-report-header-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.soc-report-header-chip .chip-close {
  font-weight: 700;
  line-height: 1;
}

.soc-report-header-actions,
.report-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 100%;
}

.soc-report-header-actions .ds-btn,
.report-actions .ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.soc-report-header-chip .chip {
  max-width: 100%;
}

.soc-export-menu-wrap {
  position: relative;
  display: inline-flex;
}

.soc-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 154px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 4px;
  display: grid;
  gap: 2px;
}

.soc-export-menu-item {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--soc-text);
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
}

.soc-export-menu-item:hover {
  background: var(--soc-primary-soft-bg);
  border-color: var(--soc-border);
}

.soc-report-preview-viewport {
  display: grid;
  gap: 10px;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-padding-top: 64px;
  padding-right: 2px;
  padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
  -webkit-overflow-scrolling: touch;
}

#reportPreviewScroller,
#reportPreview {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#reportStatusBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  padding: 10px;
}

#reportStatusBanner p {
  margin: 0;
}

.soc-report-empty-card {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: linear-gradient(170deg, var(--soc-card-bg), var(--soc-panel-bg));
  box-shadow: var(--soc-shadow-soft);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.soc-report-empty-card h4 {
  margin: 0;
  font-size: var(--soc-text-lg);
}

.soc-report-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-reports-mode-toggle {
  margin-top: 2px;
  align-items: center;
}

.soc-reports-mode-toggle .chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
}

.soc-report-browse {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: linear-gradient(165deg, var(--soc-card-bg), var(--soc-panel-bg));
  box-shadow: var(--soc-shadow-soft);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.soc-report-browse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.soc-report-browse-card {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.soc-report-browse-card h4 {
  margin: 0;
  font-size: var(--soc-text-sm);
  white-space: nowrap;
}

.soc-report-browse-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
}

.soc-report-browse-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.soc-report-last-preset {
  border-top: 1px dashed var(--soc-divider);
  padding-top: 10px;
  display: grid;
  gap: 8px;
}

.report-section-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.soc-report-section-toggle {
  flex: 0 0 auto;
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
}

.report-heatmap-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.report-heatmap-table {
  border-collapse: collapse;
  min-width: 760px;
  width: max-content;
}

.report-heatmap-table th,
.report-heatmap-table td {
  border: 1px solid var(--soc-border);
  min-width: 20px;
  height: 20px;
  text-align: center;
  font-size: 10px;
  padding: 0;
}

.report-heatmap-table td.i1 { background: color-mix(in srgb, var(--soc-primary) 16%, transparent); }
.report-heatmap-table td.i2 { background: color-mix(in srgb, var(--soc-primary) 28%, transparent); }
.report-heatmap-table td.i3 { background: color-mix(in srgb, var(--soc-primary) 40%, transparent); }
.report-heatmap-table td.i4 { background: color-mix(in srgb, var(--soc-primary) 54%, transparent); }
.report-heatmap-table td.i5 { background: color-mix(in srgb, var(--soc-primary) 70%, var(--soc-accent) 30%); }

.soc-report-builder-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 7px;
  min-height: min(65dvh, 680px);
  height: min(70dvh, 820px);
  max-height: 84dvh;
  transition: height 0.22s ease, transform 0.22s ease;
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

#reportBuilderSheet.mode-expanded .soc-report-builder-panel {
  min-height: min(68dvh, 700px);
  height: min(78dvh, 860px);
}

#reportBuilderSheet.dragging .soc-report-builder-panel {
  transform: translate3d(0, var(--soc-report-builder-drag, 0), 0);
  transition: none;
}

.soc-report-builder-steps {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid;
  gap: 8px;
  padding-right: 2px;
  padding-bottom: 4px;
}

.soc-report-builder-step {
  display: grid;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-panel-bg);
  padding: 9px;
  gap: 7px;
}

.soc-report-builder-step.is-active {
  border-color: color-mix(in srgb, var(--soc-primary) 55%, var(--soc-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 22%, transparent);
}

.soc-report-builder-step h4 {
  margin: 0;
  font-size: var(--soc-text-sm);
  color: var(--soc-text-accent-soft);
}

.rb-section {
  gap: 10px;
}

.rb-section > .meta {
  margin: -2px 0 0;
}

.soc-report-builder-section-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.soc-report-builder-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.soc-report-builder-step-tab {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--soc-border);
  background: var(--soc-card-bg);
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.soc-report-builder-step-tab.is-active {
  border-color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
}

.soc-report-builder-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding-top: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--soc-divider);
  background: var(--soc-panel-bg);
}

.soc-report-builder-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.soc-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.soc-admin-grid-grouped {
  gap: 12px;
}

.soc-admin-group {
  display: grid;
  gap: 8px;
}

.soc-admin-group-title {
  margin: 0;
  font-size: var(--soc-text-sm);
  font-weight: 800;
  color: var(--soc-text-sub);
}

.soc-admin-group-list {
  display: grid;
  gap: 10px;
}

.soc-admin-card-logout {
  margin-top: 2px;
}

.soc-admin-card {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  padding: 12px 32px 12px 12px;
  text-align: left;
  display: grid;
  gap: 4px;
  color: var(--soc-text);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  min-width: 0;
}

#adminHomePanelSoc .soc-admin-card .meta {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

.soc-admin-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px var(--soc-shadow);
}

.soc-admin-card-readonly {
  cursor: default;
  padding-right: 12px;
}

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

.soc-menu-group {
  display: grid;
  gap: 2px;
}

.soc-menu-group-title {
  margin: 0;
  padding: 10px 4px 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--soc-text-sub);
  letter-spacing: 0.02em;
}

#menuSheetPanel .pc-sidebar-only {
  display: none !important;
}

.soc-admin-subview {
  display: grid;
  gap: 10px;
}

.soc-admin-sub-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--soc-divider);
}

.soc-admin-sub-head h3 {
  margin: 0;
  font-size: var(--soc-text-lg);
}

.soc-admin-sub-body {
  display: grid;
  gap: 10px;
}

.soc-admin-sub-content {
  display: grid;
  gap: 10px;
}

.soc-report-templates-tabs {
  margin: 2px 0 4px;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.soc-report-templates-tab {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--soc-border);
  background: var(--soc-card-bg);
  color: var(--soc-text);
  font-size: var(--soc-text-sm);
  font-weight: 700;
  padding: 10px 12px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.soc-report-templates-tab-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-report-templates-tab-arrow {
  flex: 0 0 auto;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-md);
  line-height: 1;
}

.soc-report-templates-tab:hover {
  transform: translateY(-1px);
  border-color: var(--soc-primary);
  box-shadow: var(--soc-shadow-soft);
}

.soc-report-templates-tab.is-active,
.soc-report-templates-tab[aria-selected="true"] {
  border-color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
}

.soc-report-templates-tab.is-active .soc-report-templates-tab-arrow,
.soc-report-templates-tab[aria-selected="true"] .soc-report-templates-tab-arrow {
  color: var(--soc-primary);
}

.soc-report-templates-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--soc-primary) 56%, transparent);
  outline-offset: 1px;
}

.soc-report-templates-panes {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: linear-gradient(168deg, var(--soc-card-bg), var(--soc-panel-bg));
  box-shadow: var(--soc-shadow-soft);
  padding: 10px;
}

.soc-report-templates-pane-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.soc-report-templates-pane {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.soc-report-templates-weekly-list {
  display: grid;
  gap: 8px;
}

.soc-report-templates-weekly-card {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-report-templates-weekly-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.soc-report-templates-weekly-card-top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-report-templates-site-chips {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.soc-report-templates-trend-chart {
  display: grid;
  gap: 6px;
}

.soc-report-templates-trend-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.soc-report-templates-trend-label {
  color: var(--soc-text-sub);
  font-size: 12px;
  white-space: nowrap;
}

.soc-report-templates-trend-track {
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-primary) 10%, transparent);
  overflow: hidden;
  min-width: 0;
}

.soc-report-templates-trend-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--soc-primary);
}

.soc-report-templates-trend-value {
  font-size: 12px;
  color: var(--soc-text-sub);
  white-space: nowrap;
}

.soc-report-templates-trend-list {
  display: grid;
  gap: 6px;
}

.soc-report-templates-trend-item {
  min-width: 0;
}

.soc-report-templates-trend-open {
  width: 100%;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-panel-bg);
  color: var(--soc-text);
  text-align: left;
  padding: 8px 10px;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-admin-link-grid {
  display: grid;
  gap: 8px;
}

.soc-admin-link-btn {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  color: var(--soc-text);
  text-align: left;
  padding: 10px 32px 10px 12px;
  display: grid;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  min-width: 0;
}

.soc-admin-link-btn[data-action],
.soc-admin-card[data-action] {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.soc-admin-link-btn:hover {
  transform: translateY(-1px);
  border-color: var(--soc-primary);
  box-shadow: var(--soc-shadow-soft);
}

.soc-admin-link-btn .meta {
  color: var(--soc-text-sub);
}

.soc-admin-card::after,
.soc-admin-link-btn::after {
  content: "›";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--soc-text-sub);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.soc-admin-card-readonly::after {
  display: none;
}

body:not(.role-hq) [data-hq-only="true"] {
  display: none !important;
}

.soc-report-preview {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.soc-report-preview .report-section-card,
.soc-report-preview details.report-section-card {
  border: 1px solid var(--soc-border);
  border-radius: 14px;
  background: var(--soc-card-bg);
  overflow: hidden;
  box-shadow: var(--soc-shadow-soft);
}

.soc-report-cover-card {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.soc-report-cover-card h4 {
  margin: 0;
  font-size: var(--soc-text-lg);
}

.report-cover-meta {
  display: grid;
  gap: 2px;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
}

.report-cover-highlights {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--soc-text);
}

.soc-report-preview details summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-weight: 700;
  font-size: var(--soc-text-sm);
  border-bottom: 1px solid var(--soc-divider);
}

.soc-report-preview details summary::-webkit-details-marker {
  display: none;
}

.soc-report-preview details > div {
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.soc-report-preview .soc-report-store-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.soc-report-preview .soc-report-store-filter-btn {
  appearance: none;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-11);
  color: var(--soc-text-sub);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 10px;
  cursor: pointer;
}

.soc-report-preview .soc-report-store-filter-btn.is-active {
  border-color: color-mix(in srgb, var(--soc-primary) 75%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary) 16%, var(--soc-card-bg));
  color: var(--soc-text);
}

.soc-report-preview .soc-report-store-chart-list {
  display: grid;
  gap: 8px;
}

.soc-report-preview .soc-report-store-chart-row {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-surface-overlay-11);
  padding: 8px 10px;
  display: grid;
  gap: 6px;
}

.soc-report-preview .soc-report-store-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.soc-report-preview .soc-report-store-chart-head strong {
  font-size: var(--soc-text-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-report-preview .soc-report-store-chart-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--soc-text-sub);
  font-size: 11px;
  white-space: nowrap;
}

.soc-report-preview .soc-report-store-chart-metric b {
  color: var(--soc-text);
  font-size: 13px;
  font-weight: 700;
}

.soc-report-preview .soc-report-store-chart-track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-border) 74%, transparent);
  overflow: hidden;
}

.soc-report-preview .soc-report-store-chart-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--soc-primary), var(--soc-accent));
}

.soc-report-preview .soc-report-store-chart-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--soc-text-sub);
  font-size: 11px;
}

.soc-hero-status {
  display: grid;
  gap: 10px;
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-card);
  background: var(--soc-primary-soft-bg);
  padding: 12px;
  box-shadow: var(--soc-shadow-soft);
}

.soc-hero-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.soc-hero-status h3 {
  font-size: var(--soc-text-lg);
}

.soc-hero-comment {
  margin-top: 6px;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-sm);
}

.soc-home-briefing-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.soc-home-briefing-title h3,
.soc-home-briefing-period {
  margin: 0;
}

.soc-hero-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  font-size: var(--soc-text-xs);
  font-weight: 700;
}

.soc-hero-chip.stable {
  background: var(--soc-status-closed-bg);
  color: var(--soc-status-closed-fg);
}

.soc-hero-chip.caution {
  background: var(--soc-status-progress-bg);
  color: var(--soc-status-progress-fg);
}

.soc-hero-chip.risk {
  background: var(--soc-status-received-bg);
  color: var(--soc-status-received-fg);
}

.soc-home-state {
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-md);
  background: var(--soc-panel-bg);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.soc-home-skeleton {
  height: 54px;
  border-radius: var(--soc-radius-sm);
  border: 1px solid var(--soc-border);
  background: linear-gradient(
    110deg,
    var(--soc-shimmer-1) 15%,
    var(--soc-shimmer-2) 30%,
    var(--soc-shimmer-1) 45%
  );
  background-size: 220% 100%;
  animation: socShimmer 1.25s linear infinite;
}

.soc-kpi-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.soc-kpi-card {
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-card);
  background: var(--soc-kpi-bg);
  padding: 11px 12px;
  min-width: 0;
  box-shadow: var(--soc-shadow-soft);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.22s ease;
}

.soc-kpi-card.is-clickable {
  cursor: pointer;
}

.soc-home-trend-block.is-clickable {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.soc-home-trend-block.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px var(--soc-shadow);
}

.soc-home-trend-block.is-clickable:active {
  transform: scale(0.995);
}

.soc-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px var(--soc-shadow);
}

.soc-kpi-card:active {
  transform: scale(0.99);
}

.soc-kpi-label {
  color: var(--soc-muted);
  font-size: var(--soc-text-xs);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-kpi-value {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--soc-kpi-value);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-kpi-subtext {
  margin-top: 4px;
  color: var(--soc-text-sub);
  font-size: 11px;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-kpi-trend {
  margin-top: 8px;
  min-height: 34px;
}

#homeView .soc-kpi-grid {
  gap: 12px;
}

#homeView .soc-kpi-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 146px;
  padding: 18px 18px 14px;
}

#homeView .soc-kpi-label {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
  color: var(--ui-text-secondary);
}

#homeView .soc-kpi-value {
  margin-top: 0;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

#homeView .soc-kpi-subtext {
  margin-top: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--ui-text-secondary);
}

#homeView .soc-kpi-trend {
  margin-top: auto;
  min-height: 22px;
  opacity: 0.42;
}

#homeView .soc-kpi-trend .soc-sparkline {
  height: 22px;
}

#homeView .soc-kpi-trend .soc-sparkline-area {
  fill: color-mix(in srgb, var(--soc-primary) 10%, transparent);
}

#homeView .soc-kpi-trend .soc-sparkline-line {
  stroke-width: 1.8;
}

.soc-sparkline {
  width: 100%;
  height: 34px;
  display: block;
}

.soc-sparkline-lg {
  height: 78px;
  margin-top: 8px;
}

.soc-sparkline-area {
  fill: var(--soc-primary-soft-bg);
}

.soc-sparkline-line {
  fill: none;
  stroke: var(--soc-primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.soc-home-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1.15fr 1fr;
}

.soc-home-support-stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.soc-block {
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-card);
  background: var(--soc-block-bg);
  padding: 12px;
  box-shadow: var(--soc-shadow-soft);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.22s ease;
}

.soc-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px var(--soc-shadow);
}

.soc-block:active {
  transform: scale(0.99);
}

.soc-block.is-active {
  border-color: var(--soc-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 16%, transparent), 0 10px 26px var(--soc-shadow);
}

.soc-block h3 {
  font-size: var(--soc-text-md);
  margin-bottom: 8px;
}

.soc-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
  min-width: 0;
}

.soc-block-head--briefing {
  align-items: flex-start;
}

.soc-home-ticket-summary-list {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.soc-home-ticket-summary-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-pill);
  background: var(--soc-surface-overlay-11);
  color: var(--soc-text);
  padding: 6px 10px;
  text-align: left;
}

.soc-home-ticket-summary-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.35;
}

.soc-home-ticket-summary-site {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
  color: var(--soc-text-sub);
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-pill);
  background: var(--soc-panel-bg);
  padding: 2px 7px;
}

.soc-ticket-mini-dist {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 8px 0 10px;
  display: grid;
  gap: 8px;
}

.soc-ticket-mini-bar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 80%, transparent);
  background: color-mix(in srgb, var(--soc-border) 54%, transparent);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.soc-ticket-mini-segment {
  display: block;
  height: 100%;
  min-width: 0;
  transition: width 180ms ease;
}

.soc-ticket-mini-segment.is-pending {
  background: var(--soc-warning);
}

.soc-ticket-mini-segment.is-needs-info {
  background: var(--soc-info);
}

.soc-ticket-mini-segment.is-done {
  background: var(--soc-success);
}

.soc-ticket-mini-segment.is-other {
  background: color-mix(in srgb, var(--soc-text-sub) 26%, var(--soc-border));
}

.soc-ticket-mini-legend {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.soc-ticket-mini-legend-item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--soc-text-sub);
  white-space: nowrap;
}

.soc-ticket-mini-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.soc-ticket-mini-dot.is-pending {
  background: var(--soc-warning);
}

.soc-ticket-mini-dot.is-needs-info {
  background: var(--soc-info);
}

.soc-ticket-mini-dot.is-done {
  background: var(--soc-success);
}

.soc-ticket-mini-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-ticket-mini-legend-item strong {
  font-size: 12px;
  color: var(--soc-text);
  font-weight: 700;
}

.soc-weekly-briefing .soc-block-head > h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#homeWeeklyBriefing .soc-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#homeWeeklyBriefing .soc-home-weekly-ratio-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--soc-primary) 26%, var(--soc-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-primary) 12%, #ffffff 88%);
  color: var(--soc-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
  white-space: nowrap;
}

#homeWeeklyBriefing #homeWeeklySummaryLine {
  margin: 0 0 8px;
  padding: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  line-height: 1.25;
}

#homeWeeklyBriefing {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px 22px 18px;
}

#homeHeroStatus {
  min-height: 100%;
  align-content: start;
  padding: 18px 20px;
}

#homeHeroStatus .soc-hero-comment {
  margin-top: 0;
}

#homeWeeklyBriefing .soc-home-weekly-chart {
  margin-top: 4px;
  margin-bottom: 6px;
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-card);
  background: var(--soc-panel-bg);
  padding: 12px 14px 10px;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

#homeWeeklyBriefing .soc-home-weekly-chart-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 5px;
}

#homeWeeklyBriefing .soc-home-weekly-chart-value {
  margin: 0;
  font-size: var(--soc-text-xs);
  font-weight: 800;
  color: var(--soc-text);
  line-height: 1.2;
  white-space: nowrap;
}

#homeWeeklyBriefing .soc-home-weekly-chart-bar {
  width: 100%;
  max-width: 20px;
  height: 116px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 78%, transparent);
  background: color-mix(in srgb, var(--soc-border) 38%, transparent);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

#homeWeeklyBriefing .soc-home-weekly-chart-fill {
  width: 100%;
  min-height: 2px;
  border-radius: 2px;
  transition: height 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: none;
  background: color-mix(in srgb, var(--soc-text-sub) 56%, transparent);
}

#homeWeeklyBriefing .soc-home-weekly-chart-fill.is-incidents {
  background: color-mix(in srgb, var(--soc-text-sub) 56%, transparent);
}

#homeWeeklyBriefing .soc-home-weekly-chart-fill.is-critical {
  background: color-mix(in srgb, var(--soc-text-sub) 56%, transparent);
}

#homeWeeklyBriefing .soc-home-weekly-chart-fill.is-ticket {
  background: color-mix(in srgb, var(--soc-text-sub) 56%, transparent);
}

#homeWeeklyBriefing .soc-home-weekly-chart-fill.is-peak {
  background: var(--soc-primary);
}

#homeWeeklyBriefing .soc-home-weekly-chart-label {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--soc-text-sub);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

#homeWeeklyBriefing .soc-home-weekly-chart-wow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

#homeWeeklyBriefing .soc-home-weekly-chart-wow.is-up {
  color: var(--soc-success);
}

#homeWeeklyBriefing .soc-home-weekly-chart-wow.is-down {
  color: var(--soc-danger);
}

#homeWeeklyBriefing .soc-home-weekly-chart-wow.is-flat {
  color: var(--soc-text-sub);
}

#homeTrend7d {
  padding: 20px 22px 18px;
}

#homeTrend7d .soc-sparkline-lg {
  height: 120px;
  margin-top: 10px;
}

#homeRiskSignals,
#homeActionNeededBlock,
#homeRecentBlock {
  padding: 16px 18px;
}

#homeRiskSignals > h3,
#homeActionNeededBlock > h3,
#homeRecentBlock > h3 {
  margin: 0 0 10px;
}

#homeTicketBlock {
  padding: 20px 22px 18px;
}

#homeTicketBlock .soc-home-ticket-summary-list,
.soc-home-activity-list .soc-list-mini,
#homeRiskSignals .soc-list-mini,
#homeActionNeededBlock .soc-list-mini {
  gap: 8px;
}

.soc-people-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.soc-people-admin-header-wrap {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
}

.soc-people-admin-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.soc-people-admin-title-row h3 {
  margin: 0;
  min-width: 0;
}

.soc-people-admin-back-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  margin-bottom: 0;
}

.people-admin-back-btn {
  min-height: 44px;
  padding: 10px 12px;
  white-space: nowrap;
  touch-action: manipulation;
}

.soc-people-hub-tabs {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.soc-people-hub-tabs .chip {
  flex: 0 0 auto;
  min-width: 0;
}

.soc-people-hub-switch-btn {
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
  font-weight: 600;
  box-shadow: none;
}

.soc-people-hub-switch-btn.is-active {
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-people-hub-pane {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  gap: 18px;
}

.soc-people-pane-summary {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  min-width: 0;
}

.soc-people-pane-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.soc-people-pane-summary-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.soc-people-pane-summary-eyebrow {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.soc-people-pane-summary-head h3 {
  margin: 0;
  min-width: 0;
  font-size: 17px;
  line-height: 24px;
  color: var(--ui-text-primary, var(--soc-text));
  overflow-wrap: anywhere;
}

.soc-people-pane-summary-badges {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.soc-people-pane-summary-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 999px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  line-height: 18px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.soc-people-directory-layout {
  display: grid;
  gap: 22px;
  min-width: 0;
  align-items: start;
}

.soc-people-directory-layout > * {
  min-width: 0;
}

#peopleView {
  --soc-people-accent: #f97316;
  --soc-people-accent-strong: #c2410c;
  --soc-people-accent-soft: #fb923c;
  --soc-people-accent-muted: #fdba74;
  --soc-people-accent-surface: rgba(249, 115, 22, 0.12);
  --soc-people-accent-surface-strong: rgba(249, 115, 22, 0.18);
}

.soc-people-detail-panel {
  display: none;
}

@keyframes socPeopleDetailPanelSlideIn {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.soc-desktop-shell #peopleView .soc-people-detail-panel {
    animation: none !important;
    transition: none !important;
  }
}

.soc-people-detail-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  min-width: 0;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

.soc-people-detail-panel-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.soc-people-detail-panel-heading .meta:empty {
  display: none;
}

.soc-people-detail-panel-heading h3 {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.soc-people-detail-close {
  flex-shrink: 0;
}

.soc-people-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 14px;
}

.soc-people-detail-summary-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

.soc-people-detail-summary-card span {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.soc-people-detail-summary-card strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.soc-people-detail-panel-body {
  min-height: 0;
  padding: 16px 20px 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

.soc-people-dashboard-summary {
  display: grid;
  gap: 14px;
}

.soc-people-segment-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-people-segment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 999px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.soc-people-segment-btn.is-active,
.soc-people-segment-btn[aria-pressed="true"] {
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12);
}

.soc-people-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.soc-people-kpi-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 16px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
}

.soc-people-kpi-card.tone-primary {
  border-color: rgba(249, 115, 22, 0.2);
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0.015) 100%), var(--ui-bg-surface, var(--soc-card-bg));
}

.soc-people-kpi-card.tone-success {
  border-color: rgba(34, 197, 94, 0.18);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.01) 100%), var(--ui-bg-surface, var(--soc-card-bg));
}

.soc-people-kpi-card.tone-accent {
  border-color: rgba(249, 115, 22, 0.18);
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.06) 0%, rgba(249, 115, 22, 0.01) 100%), var(--ui-bg-surface, var(--soc-card-bg));
}

.soc-people-kpi-card.is-empty {
  align-content: center;
  min-height: 140px;
}

.soc-people-kpi-card.is-empty strong {
  font-size: 15px;
  line-height: 22px;
}

.soc-people-kpi-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.soc-people-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--soc-people-accent-surface);
  color: var(--soc-people-accent);
  flex-shrink: 0;
}

.soc-people-kpi-icon svg {
  width: 22px;
  height: 22px;
}

.soc-people-kpi-copy {
  min-width: 0;
}

.soc-people-kpi-copy h4 {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.soc-people-kpi-number-block {
  display: grid;
  gap: 4px;
}

.soc-people-kpi-number-block strong {
  font-size: 30px;
  line-height: 34px;
  letter-spacing: -0.03em;
}

.soc-people-kpi-number-block span {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  line-height: 18px;
}

.soc-people-progress {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.soc-people-progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--soc-people-accent-soft) 0%, var(--soc-people-accent) 100%);
}

.soc-people-kpi-inline-list {
  display: grid;
  gap: 8px;
}

.soc-people-kpi-inline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
}

.soc-people-kpi-inline-row strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 14px;
  line-height: 20px;
}

.soc-people-summary-grid {
  display: grid;
  gap: 8px;
}

.soc-people-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  line-height: 18px;
}

.soc-people-summary-row strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 14px;
  line-height: 20px;
}

.soc-people-sparkline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.soc-people-sparkline-shell {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0.02) 100%);
  padding: 8px 10px 6px;
}

.soc-people-sparkline {
  display: block;
  width: 100%;
  height: 72px;
  overflow: visible;
}

.soc-people-sparkline-area {
  fill: rgba(249, 115, 22, 0.16);
  stroke: none;
}

.soc-people-sparkline-line {
  fill: none;
  stroke: #f97316;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.soc-people-sparkline-dot {
  fill: #f97316;
  stroke: #ffffff;
  stroke-width: 2;
}

.soc-people-sparkline-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.soc-people-sparkline-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 17px;
}

.soc-people-sparkline-meta-row strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 13px;
  line-height: 18px;
}

.soc-people-rank-list {
  display: grid;
  gap: 10px;
}

.soc-people-rank-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid rgba(230, 234, 241, 0.9);
}

.soc-people-rank-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.soc-people-rank-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.1);
  color: #c2410c;
  font-size: 12px;
  font-weight: 800;
}

.soc-people-rank-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.soc-people-rank-copy strong {
  font-size: 13px;
  line-height: 18px;
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-people-rank-copy span {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
}

.soc-people-rank-value {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
}

.soc-people-segmented-track {
  display: flex;
  gap: 4px;
  width: 100%;
  height: 12px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  overflow: hidden;
}

.soc-people-segmented-fill {
  display: block;
  height: 100%;
  min-width: 10px;
  border-radius: 999px;
}

.soc-people-segmented-fill.tone-primary {
  background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
}

.soc-people-segmented-fill.tone-neutral {
  background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 100%);
}

.soc-people-segmented-fill.tone-secondary {
  background: linear-gradient(90deg, #fdba74 0%, #fb923c 100%);
}

.soc-people-segmented-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.soc-people-segmented-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.soc-people-segmented-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 17px;
}

.soc-people-kpi-dot.tone-primary {
  background: #f97316;
}

.soc-people-kpi-dot.tone-neutral {
  background: #94a3b8;
}

.soc-people-kpi-dot.tone-secondary {
  background: #fb923c;
}

.soc-people-kpi-donut-row {
  display: grid;
  grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.soc-people-donut {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--soc-people-donut, conic-gradient(#e5e7eb 0turn, #e5e7eb 1turn));
}

.soc-people-donut::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--ui-bg-surface, var(--soc-card-bg));
}

.soc-people-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72px, calc(100% - 34px));
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 1;
  text-align: center;
  pointer-events: none;
}

.soc-people-donut-center span {
  display: block;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.soc-people-donut-center strong {
  display: block;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.03em;
}

.soc-people-kpi-legend {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-people-kpi-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
}

.soc-people-kpi-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--soc-kpi-dot, #94a3b8);
}

.soc-people-kpi-legend-row strong {
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-people-bar-list {
  display: grid;
  gap: 10px;
}

.soc-people-bar-row {
  display: grid;
  gap: 6px;
}

.soc-people-bar-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  line-height: 18px;
}

.soc-people-bar-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.soc-people-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
}

.soc-people-table-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.soc-people-avatar,
.soc-people-employee-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  flex-shrink: 0;
  font-weight: 800;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.soc-people-avatar {
  width: 42px;
  height: 42px;
  background: var(--soc-people-accent-surface);
  color: var(--soc-people-accent-strong);
  font-size: 12px;
}

.soc-people-avatar img,
.soc-people-employee-avatar img,
.soc-profile-hero-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.soc-people-table-identity-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.soc-people-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  background: rgba(148, 163, 184, 0.1);
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.soc-people-pill.is-link-linked {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
  color: #15803d;
}

.soc-people-pill.is-link-unlinked {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.24);
  color: #c2410c;
}

.soc-people-stats-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.soc-people-stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.9fr);
  gap: 14px;
}

.soc-people-stats-card {
  display: grid;
  gap: 14px;
}

.soc-people-chart-shell {
  display: grid;
  gap: 12px;
}

.soc-people-trend-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 240px;
}

.soc-people-trend-col {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.soc-people-trend-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  min-height: 180px;
}

.soc-people-trend-bar {
  display: block;
  min-height: 8px;
  border-radius: 999px 999px 6px 6px;
  background: #94a3b8;
}

.soc-people-trend-bar.is-hire {
  background: linear-gradient(180deg, var(--soc-people-accent-muted) 0%, var(--soc-people-accent) 100%);
}

.soc-people-trend-bar.is-leave {
  background: linear-gradient(180deg, #fdba74 0%, #f97316 100%);
}

.soc-people-trend-bar.is-empty {
  opacity: 0.18;
}

.soc-people-trend-meta {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
}

.soc-people-trend-meta strong {
  font-size: 12px;
  line-height: 16px;
}

.soc-people-trend-meta span {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
}

.soc-people-employee-detail-shell {
  display: grid;
  gap: 20px;
  min-height: 0;
}

.soc-people-employee-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 2px 0 16px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

.soc-people-employee-avatar {
  width: 72px;
  height: 72px;
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.14) 0%, rgba(249, 115, 22, 0.08) 100%);
  color: var(--soc-people-accent-strong);
  font-size: 19px;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.08);
}

.soc-people-employee-hero-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-people-employee-hero-eyebrow {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.soc-people-employee-hero-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.soc-people-employee-hero-copy strong {
  font-size: 27px;
  line-height: 31px;
  letter-spacing: -0.03em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.soc-people-employee-hero-copy .meta {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  line-height: 18px;
}

.soc-people-employee-hero-context {
  margin: 0;
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.soc-people-employee-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-people-employee-stat-grid,
.soc-people-employee-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.soc-people-employee-stat,
.soc-people-employee-info-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 14px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

.soc-people-employee-stat {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.soc-people-employee-stat > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--soc-people-accent-surface);
  color: var(--soc-people-accent);
}

.soc-people-employee-stat > span svg {
  width: 16px;
  height: 16px;
}

.soc-people-employee-stat strong,
.soc-people-employee-info-card strong {
  display: block;
  font-size: 17px;
  line-height: 23px;
  overflow-wrap: anywhere;
}

.soc-people-employee-stat small,
.soc-people-employee-info-card span {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.soc-people-employee-section {
  display: grid;
  gap: 0;
  min-height: 0;
}

.soc-people-employee-action-row {
  display: flex;
  justify-content: flex-start;
  padding-top: 14px;
}

.soc-people-employee-tab-rail {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

.soc-people-employee-tab-btn {
  position: relative;
  padding: 2px 0 12px;
  border: 0;
  background: transparent;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease;
}

.soc-people-employee-tab-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.soc-people-employee-tab-btn.is-active,
.soc-people-employee-tab-btn[aria-pressed="true"] {
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-people-employee-tab-btn:hover {
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-people-employee-tab-btn.is-active::after,
.soc-people-employee-tab-btn[aria-pressed="true"]::after {
  background: var(--soc-people-accent);
}

.soc-people-employee-tab-pane {
  display: grid;
  gap: 12px;
  min-height: 0;
  align-content: start;
  animation: socPeopleDetailPaneReveal 180ms ease;
}

.soc-people-employee-info-list,
.soc-people-employee-info-grid {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

.soc-people-employee-stat-grid,
.soc-people-employee-stat {
  display: none;
}

.soc-people-detail-panel-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--ui-divider-default, var(--soc-divider));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--ui-bg-surface, var(--soc-card-bg)) 22%);
}

.soc-people-detail-empty {
  min-height: 196px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 18px;
  border: 1px dashed var(--ui-divider-default, var(--soc-divider));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

.soc-people-detail-empty strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 16px;
  line-height: 24px;
}

.soc-people-employee-info-card {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  align-items: baseline;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  border-radius: 0;
  background: transparent;
}

.soc-people-employee-info-card:last-child {
  border-bottom: 0;
}

.soc-people-employee-info-card.is-stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.soc-people-employee-info-card.is-prominent {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-top: 4px;
  padding-bottom: 14px;
}

.soc-people-employee-info-card strong {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.soc-people-employee-info-card.is-prominent strong {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.soc-people-employee-info-card span {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.soc-people-employee-hero-headline .soc-directory-status {
  flex-shrink: 0;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: #166534;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

@keyframes socPeopleDetailPaneReveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.soc-employee-create-view {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.soc-employee-create-page {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.soc-employee-create-header {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid var(--soc-divider);
  background: var(--soc-bg);
}

.soc-employee-create-header h3 {
  margin: 0;
  min-width: 0;
  font-size: 17px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-employee-create-form {
  display: grid;
  gap: 12px;
  margin: 0;
}

.soc-employee-create-view.is-edit-mode .soc-employee-create-form {
  padding-bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 88px);
}

.soc-employee-form-footer {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-top: 1px solid var(--soc-divider);
  background: var(--soc-panel-bg);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  transform: none !important;
  filter: none !important;
}

.soc-employee-form-footer .ds-btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.soc-employee-create-section {
  border: 1px solid var(--soc-border);
  border-radius: 14px;
  background: var(--soc-card-bg);
  padding: 12px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-employee-create-section h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--soc-text);
}

.soc-employee-login-id-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.soc-employee-login-id-status {
  margin: -2px 0 2px;
  font-size: 12px;
  line-height: 1.3;
  min-height: 16px;
  color: var(--soc-text-sub);
}

.soc-employee-login-id-status.is-error {
  color: var(--soc-danger);
}

.soc-employee-login-id-status.is-success {
  color: var(--soc-success);
}

.soc-employee-login-id-status.is-info {
  color: var(--soc-text-sub);
}

.soc-employee-account-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.soc-employee-form-edit-only {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-employee-account-reset-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.soc-employee-account-reset-row .ds-btn {
  width: auto;
  min-width: 128px;
}

#peopleView.is-employee-create-open {
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
}

#peopleView.is-employee-create-open #employeeCreateView {
  display: block;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

#accountPanel,
#employeeSection,
#employeeList {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.soc-employee-directory-toolbar {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
}

#peopleView .soc-people-workspace-toolbar {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
}

#peopleView .soc-people-admin-title-block {
  display: grid;
  gap: 4px;
}

#peopleView .soc-people-workspace-toolbar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

#peopleView .soc-people-workspace-toolbar-main {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex: 1 1 720px;
  min-width: 0;
  flex-wrap: wrap;
}

#peopleView .soc-people-workspace-toolbar-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

#peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls) .soc-inline-field {
  align-items: center;
  gap: 10px;
}

#peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls)
  :is(input, select, .ds-input, .ds-select) {
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  line-height: 20px;
  box-sizing: border-box;
}

#peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls)
  :is(select, .ds-select) {
  padding-right: 38px;
}

#peopleView .soc-people-workspace-toolbar-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

#peopleView .soc-people-workspace-danger-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--ui-divider-default, var(--soc-divider));
}

#peopleView .soc-people-workspace-badges {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

#peopleView .soc-people-workspace-badge {
  display: grid;
  gap: 2px;
  min-width: 76px;
  padding: 6px 9px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 9px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  box-shadow: none;
}

#peopleView .soc-people-workspace-badge strong {
  font-size: 15px;
  line-height: 22px;
  color: var(--ui-text-primary, var(--soc-text));
}

#peopleView :is(.soc-employee-directory-toolbar-label, .soc-monitoring-toolbar-label) {
  font-size: 11px;
  line-height: 14px;
}

#peopleView .soc-people-danger-utility {
  border-color: rgba(180, 35, 24, 0.18);
  background: transparent;
  color: #b42318;
  box-shadow: none;
}

#peopleView .soc-people-danger-utility:hover {
  background: rgba(180, 35, 24, 0.06);
  border-color: rgba(180, 35, 24, 0.26);
}

#peopleView .soc-people-pane-summary {
  padding: 16px 18px;
}

#peopleView .soc-people-pane-summary-head .meta,
#peopleView .soc-employee-directory-toolbar-note,
#peopleView .soc-employee-directory-grid .soc-workspace-card-head .meta,
#peopleView .soc-monitoring-grid .soc-workspace-card-head .meta {
  display: none;
}

#peopleView .soc-people-detail-panel-heading .meta {
  display: block;
}

.soc-employee-directory-toolbar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.soc-employee-directory-toolbar-main {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1 1 720px;
  min-width: 0;
  flex-wrap: wrap;
}

.soc-employee-directory-field {
  display: grid;
  gap: 9px;
  min-width: 136px;
  align-items: stretch;
}

.soc-employee-directory-field > span,
.soc-employee-directory-toolbar-label {
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
  white-space: nowrap;
  padding-left: 2px;
}

.soc-employee-directory-search {
  min-width: min(280px, 100%);
  flex: 1 1 280px;
}

.soc-employee-directory-toolbar-summary {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.soc-employee-directory-summary-block {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

.soc-employee-directory-summary-block strong {
  font-size: var(--type-section-md-size, 16px);
  line-height: var(--type-section-md-line, 24px);
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-employee-directory-toolbar-note {
  margin: 0;
}

.soc-employee-directory-grid {
  display: grid;
  gap: 16px;
  min-height: 0;
}

.soc-employee-directory-state {
  min-height: 144px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px;
  border: 1px dashed var(--ui-divider-default, var(--soc-divider));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

.soc-employee-directory-state strong {
  font-size: var(--type-section-md-size, 16px);
  line-height: var(--type-section-md-line, 24px);
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-employee-directory-grid-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px 12px 0 0;
  background: var(--ui-bg-surface, #fff);
}

.soc-employee-directory-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: color-mix(in srgb, var(--ui-bg-surface, #fff) 94%, rgba(249, 115, 22, 0.06));
}

.soc-employee-directory-pagination-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  justify-self: start;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  line-height: 18px;
}

.soc-employee-directory-pagination-summary strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 14px;
  line-height: 20px;
}

.soc-employee-directory-pagination-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-employee-directory-page-nav,
.soc-employee-directory-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 999px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.soc-employee-directory-page-nav {
  min-width: auto;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  box-shadow: none;
}

.soc-employee-directory-page-btn {
  border-radius: 12px;
}

.soc-employee-directory-page-nav:hover,
.soc-employee-directory-page-btn:hover {
  border-color: rgba(249, 115, 22, 0.28);
  color: var(--soc-people-accent-strong);
}

.soc-employee-directory-page-nav:hover {
  border-color: transparent;
  background: rgba(249, 115, 22, 0.08);
}

.soc-employee-directory-page-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.soc-employee-directory-page-btn.is-active,
.soc-employee-directory-page-btn[aria-current="page"] {
  border-color: rgba(249, 115, 22, 0.32);
  background: rgba(249, 115, 22, 0.12);
  color: var(--soc-people-accent-strong);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12);
}

.soc-employee-directory-pagination-spacer {
  min-height: 1px;
}

.soc-employee-directory-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.soc-employee-directory-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

.soc-employee-directory-table th,
.soc-employee-directory-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  text-align: left;
  vertical-align: middle;
}

.soc-employee-directory-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ui-bg-surface, #fff);
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
  white-space: nowrap;
}

.soc-employee-directory-table tbody td {
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-employee-directory-table tbody tr {
  cursor: pointer;
  transition: background 0.16s ease;
}

.soc-employee-directory-table tbody tr:hover,
.soc-employee-directory-table tbody tr:focus-visible,
.soc-employee-directory-table tbody tr.is-selected,
.soc-employee-directory-table tbody tr.is-context-open {
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 44%, var(--ui-bg-surface, #fff));
  outline: none;
}

.soc-people-context-menu {
  position: fixed;
  z-index: 2600;
  display: grid;
  gap: 4px;
  min-width: 212px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 92%, rgba(15, 23, 42, 0.08));
  border-radius: 16px;
  background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-card-bg)) 94%, rgba(255, 255, 255, 0.96));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(12px);
}

.soc-people-context-menu.hidden {
  display: none;
}

.soc-people-context-menu-item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ui-text-primary, var(--soc-text));
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.soc-people-context-menu-item strong {
  display: block;
  font-size: 14px;
  line-height: 20px;
}

.soc-people-context-menu-item span {
  display: block;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
}

.soc-people-context-menu-item:hover,
.soc-people-context-menu-item:focus-visible {
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 44%, var(--ui-bg-surface, #fff));
  outline: none;
}

.soc-people-context-menu-item.is-danger {
  color: #b91c1c;
}

.soc-people-context-menu-item.is-danger span {
  color: color-mix(in srgb, #b91c1c 68%, var(--ui-text-secondary, var(--soc-text-sub)));
}

.soc-people-context-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.soc-directory-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.soc-directory-sort-button.is-active {
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-directory-sort-indicator {
  display: inline-flex;
  min-width: 10px;
  justify-content: center;
}

.soc-directory-grid-primary {
  font-weight: 600;
  color: var(--ui-text-primary, var(--soc-text));
  overflow-wrap: anywhere;
}

.soc-directory-grid-secondary {
  margin-top: 2px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  overflow-wrap: anywhere;
}

.soc-directory-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.soc-directory-status.is-active {
  color: #166534;
}

.soc-directory-status.is-terminated {
  color: #7c2d12;
}

#peopleView .soc-status-dot.is-active {
  background: #16a34a;
}

#peopleView .soc-status-dot.is-terminated {
  background: #c2410c;
}

.soc-people-create-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  margin-top: 6px;
  border-top: 1px solid var(--soc-divider);
  background: var(--soc-panel-bg);
  transform: none;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}

.employee-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.employee-form input,
.employee-form select,
.employee-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  line-height: 1.2;
}

.employee-form select {
  min-height: 46px;
  font-size: 15px;
  line-height: 1.35;
  padding-right: 34px;
}

.employee-form .form-row {
  margin-bottom: 10px;
}

.soc-employee-site-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.soc-employee-site-filter label {
  font-size: 12px;
  font-weight: 600;
  color: var(--soc-text-sub);
}

.soc-employee-site-filter select {
  min-width: 148px;
  min-height: 34px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--soc-input-bg);
  color: var(--soc-text);
}

@media (max-width: 768px) {
  #peopleHubEmployeesPane > .soc-block > .soc-block-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }
  .soc-employee-site-filter {
    width: 100%;
    margin-left: 0;
  }
  .soc-employee-site-filter select {
    width: 100%;
    min-width: 0;
  }
}

.soc-block-value {
  font-size: 18px;
  color: var(--soc-primary);
}

.soc-weekly-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--soc-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-weekly-status-badge.is-submitted {
  color: var(--soc-success);
  background: color-mix(in srgb, var(--soc-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--soc-success) 35%, var(--soc-border));
}

.soc-weekly-status-badge.is-draft {
  color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
  border-color: color-mix(in srgb, var(--soc-primary) 38%, var(--soc-border));
}

.soc-weekly-status-badge.is-not-started {
  color: var(--soc-text-sub);
  background: var(--soc-surface-overlay-11);
  border-color: var(--soc-border);
}

.soc-list-mini {
  display: grid;
  gap: 8px;
  align-content: start;
  width: 100%;
  min-width: 0;
}

.soc-list-mini > * {
  width: 100%;
  min-width: 0;
  margin-left: 0 !important;
  justify-self: stretch;
}

.soc-danger-panel {
  margin: 10px 0 14px;
  border: 1px solid color-mix(in srgb, var(--soc-danger) 45%, var(--soc-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--soc-danger-soft-bg) 45%, var(--soc-card-bg));
  padding: 10px;
  display: grid;
  gap: 8px;
}

.soc-purge-scope {
  display: grid;
  gap: 6px;
}

.soc-purge-scope-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.soc-purge-scope label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--soc-border);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--soc-card-bg);
}

.purge-site-modal-panel {
  width: min(560px, 96vw);
  max-height: min(88vh, 760px);
  overflow: hidden;
}

.purge-site-modal-body {
  display: grid;
  gap: 10px;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 14px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.purge-site-modal-body > * {
  min-width: 0;
}

.purge-site-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--soc-surface) 40%, transparent), var(--soc-surface));
}

@media (min-width: 720px) {
  .soc-purge-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.soc-mini-row {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-sm);
  background: var(--soc-mini-row-bg);
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: var(--soc-text-sm);
  text-align: left;
  color: var(--soc-text);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  transform: none;
}

.soc-list-mini > .soc-mini-row + .soc-mini-row,
button.soc-mini-row + button.soc-mini-row {
  margin-left: 0 !important;
}

.soc-mini-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px var(--soc-shadow);
}

.soc-mini-row:active {
  transform: scale(0.99);
}

.soc-mini-row strong {
  color: var(--soc-text-accent-soft);
}

.soc-mini-row .meta {
  margin-top: 3px;
}

.soc-insight-item {
  border: 1px dashed var(--soc-border);
  border-radius: var(--soc-radius-sm);
  background: var(--soc-panel-bg);
  padding: 8px 10px;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-sm);
}

.soc-insight-item-button {
  width: 100%;
  display: block;
  appearance: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.soc-insight-item-button:hover {
  border-color: color-mix(in srgb, var(--soc-primary) 42%, var(--soc-border));
  box-shadow: 0 10px 20px var(--soc-shadow);
  transform: translateY(-1px);
}

.soc-insight-item-button:active {
  transform: scale(0.99);
}

.soc-focus-cta {
  border: 1px solid var(--soc-border);
  border-radius: var(--soc-radius-md);
  background: var(--soc-panel-bg);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.soc-focus-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Filter + Chips */
.soc-filterbar {
  display: grid;
  gap: 8px;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  padding: 10px;
  background: var(--soc-filterbar-bg);
}

.soc-filter-item {
  display: grid;
  gap: 6px;
}

.soc-filter-item label {
  font-size: var(--soc-text-xs);
  color: var(--soc-muted);
}

.date-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.date-filter-btn.active,
.site-filter-btn.active,
.sla-page-btn.active,
.report-tab.active,
.announcement-mode-btn.active {
  background: var(--soc-nav-item-active-bg);
  border-color: var(--soc-nav-item-active-border);
}

.date-filter-btn.active {
  min-height: 32px;
  padding: 6px 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-8);
  color: var(--soc-filter-chip-text);
  font-size: var(--soc-text-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.soc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 8px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 12px;
  line-height: 1.2;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-chip > span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip.is-active {
  border-color: var(--soc-filter-chip-active-border);
  color: var(--soc-filter-chip-active-text);
  background: var(--soc-filter-chip-active-bg);
  min-height: 32px;
  padding: 6px 12px;
}

.soc-chip.is-active,
.soc-chip.active {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 12px;
  line-height: 1.2;
}

.soc-realtime-datebar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}

.soc-realtime-datebar > * {
  min-width: 0;
}

.soc-realtime-date-display {
  flex: 1 1 220px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--soc-border);
  background: var(--soc-date-display-bg);
  color: var(--soc-date-display-text);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  font-size: var(--soc-text-sm);
  font-weight: 700;
  text-align: left;
}

.soc-realtime-filter-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--soc-text-sub);
}

.soc-realtime-date-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.soc-realtime-date-icon-img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.soc-realtime-announce-btn {
  flex: 0 0 auto;
  min-height: 42px;
  white-space: nowrap;
}

.soc-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.soc-realtime-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

#topbarNotificationsBtn {
  position: relative;
  overflow: visible !important;
  z-index: 3;
  min-width: 42px;
  min-height: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.topbar-notification-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

.topbar-notification-icon-img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

.topbar-notification-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid var(--soc-card-bg);
  background: var(--soc-danger);
  color: var(--soc-on-primary);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 4;
}

.soc-active-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-filter-chip-active-border);
  background: var(--soc-filter-chip-active-bg);
  color: var(--soc-filter-chip-active-text);
  font-size: 11px;
  font-weight: 700;
}

.soc-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.soc-summary-card {
  min-height: 82px;
  border-radius: 12px;
  border: 1px solid var(--soc-border);
  background: linear-gradient(180deg, var(--soc-summary-grad-1), var(--soc-summary-grad-2));
  box-shadow: 0 6px 18px var(--soc-shadow);
  padding: 10px 12px;
  display: grid;
  align-content: space-between;
  justify-items: start;
  text-align: left;
  color: var(--soc-text);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.soc-summary-card.is-active {
  border-color: var(--soc-summary-active-border);
  background: linear-gradient(175deg, var(--soc-summary-active-grad-1), var(--soc-summary-active-grad-2));
}

.soc-summary-card.is-active .soc-summary-value {
  color: var(--soc-primary);
}

.soc-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px var(--soc-shadow);
}

.soc-summary-card:active {
  transform: scale(0.99);
}

.soc-summary-label {
  font-size: 12px;
  color: var(--soc-summary-label);
  font-weight: 700;
}

.soc-summary-value {
  font-size: 30px;
  line-height: 1;
  color: var(--soc-summary-value);
}

.soc-summary-grid-skeleton {
  pointer-events: none;
}

.soc-summary-card-skeleton {
  min-height: 82px;
  border-radius: 12px;
  border: 1px solid var(--soc-border);
  background: linear-gradient(
    110deg,
    var(--soc-shimmer-1) 15%,
    var(--soc-shimmer-2) 30%,
    var(--soc-shimmer-1) 45%
  );
  background-size: 220% 100%;
  animation: socShimmer 1.2s linear infinite;
}

/* Incident cards */
.incident-list {
  display: grid;
  gap: 10px;
}

.soc-alerts-feed-section {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.soc-alerts-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.soc-alerts-feed-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--soc-text);
}

.incident-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--soc-radius-card);
  border: 1px solid var(--soc-border);
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 12px 12px 12px 18px;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.22s ease;
}

.incident-card.incident-focus,
.incident-card.highlight-pulse {
  border-color: color-mix(in srgb, var(--soc-primary) 70%, var(--soc-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 28%, transparent), var(--soc-shadow-soft);
}

@keyframes socIncidentFocusPulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--soc-primary) 34%, transparent), var(--soc-shadow-soft);
    border-color: color-mix(in srgb, var(--soc-primary) 75%, var(--soc-border));
  }
  60% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--soc-primary) 0%, transparent), 0 12px 22px var(--soc-shadow);
    border-color: color-mix(in srgb, var(--soc-primary) 65%, var(--soc-border));
  }
  100% {
    box-shadow: var(--soc-shadow-soft);
    border-color: var(--soc-border);
  }
}

.incident-card.highlight-pulse {
  animation: socIncidentFocusPulse 1.6s ease-out 1;
}

.ticket-card.ticket-focus,
.ticket-card.ticket-highlight-pulse {
  border-color: color-mix(in srgb, var(--soc-primary) 70%, var(--soc-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 28%, transparent), var(--soc-shadow-soft);
}

@keyframes socTicketFocusPulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--soc-primary) 34%, transparent), var(--soc-shadow-soft);
    border-color: color-mix(in srgb, var(--soc-primary) 75%, var(--soc-border));
  }
  60% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--soc-primary) 0%, transparent), 0 12px 22px var(--soc-shadow);
    border-color: color-mix(in srgb, var(--soc-primary) 65%, var(--soc-border));
  }
  100% {
    box-shadow: var(--soc-shadow-soft);
    border-color: var(--soc-border);
  }
}

.ticket-card.ticket-highlight-pulse {
  animation: socTicketFocusPulse 1.6s ease-out 1;
}

.incident-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--soc-primary);
  border-radius: 14px 0 0 14px;
  opacity: 0.9;
}

.incident-card[data-severity="eci3"]::before,
.incident-card[data-severity="eci4"]::before {
  width: 4px;
  opacity: 1;
}

.incident-card[data-critical="1"]::before,
.incident-card.is-critical-incident::before {
  width: 5px;
  opacity: 1;
  background: var(--soc-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 22%, transparent);
}

.incident-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px var(--soc-shadow);
}

.incident-card:active {
  transform: scale(0.99);
}

.incident-card.deleted {
  opacity: 0.45;
}

.incident-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.incident-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

.incident-critical-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--soc-danger);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}

#incidentList .incident-card[data-critical="1"] .incident-title,
#incidentList .incident-card.is-critical-incident .incident-title,
#incidentList .incident-card[data-critical="1"] .incident-type,
#incidentList .incident-card.is-critical-incident .incident-type {
  color: var(--soc-danger);
}

.incident-title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--soc-text-md);
  font-weight: 800;
  color: var(--soc-incident-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.incident-type {
  margin: 0 0 4px;
  color: var(--soc-incident-type);
  font-size: var(--soc-text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.incident-created-at {
  margin: 0 0 8px;
  color: var(--soc-muted);
  text-align: left;
  font-size: var(--soc-text-sm);
  white-space: nowrap;
  font-weight: 400;
}

.incident-card-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.incident-severity,
.incident-location,
.incident-status,
.incident-urgent-badge,
.incident-type-badge,
.incident-category-badge {
  margin: 0;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-incident-pill-border);
  background: var(--soc-incident-pill-bg);
  color: var(--soc-incident-pill-text);
  font-size: var(--soc-text-xs);
  padding: 4px 10px;
  width: fit-content;
}

.incident-urgent-badge {
  color: var(--soc-danger);
  border-color: color-mix(in srgb, var(--soc-danger) 40%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-danger) 12%, transparent);
  font-weight: 700;
}

.incident-severity.eci-level-2 {
  background: var(--eci2-bg);
  border-color: var(--eci2-border);
  color: var(--eci2-fg);
}

.incident-severity.eci-level-3 {
  background: var(--eci3-bg);
  border-color: var(--eci3-border);
  color: var(--eci3-fg);
}

.incident-severity.eci-level-4 {
  background: var(--eci4-bg);
  border-color: var(--eci4-border);
  color: var(--eci4-fg);
}

.incident-card[data-severity="eci3"] .incident-title,
.incident-card[data-severity="eci3"] .incident-type,
.incident-card[data-severity="eci4"] .incident-title,
.incident-card[data-severity="eci4"] .incident-type {
  color: var(--eci3-fg);
}

.incident-card.incident-ticket-card.status-pending::before {
  background: var(--soc-warning);
}

.incident-card.incident-ticket-card.status-needs-info::before {
  background: var(--soc-primary);
}

.incident-card.incident-ticket-card.status-approved::before {
  background: var(--soc-success);
}

.incident-card.incident-ticket-card.status-unavailable::before {
  background: var(--soc-warning);
}

.incident-card.incident-ticket-card.status-rejected::before {
  background: var(--soc-danger);
}

.incident-card.incident-ticket-card.status-cancelled::before {
  background: var(--soc-text-sub);
}

.incident-card.incident-ticket-card.status-done::before {
  background: var(--soc-text-sub);
}

.incident-card.incident-ticket-card.status-unavailable,
.incident-card.incident-ticket-card.status-rejected,
.incident-card.incident-ticket-card.status-cancelled {
  opacity: 0.72;
}

.incident-card .incident-ticket-status {
  background: var(--soc-surface-overlay-11);
}

.incident-card .incident-ticket-status.status-pending {
  color: var(--soc-warning);
  border-color: color-mix(in srgb, var(--soc-warning) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-warning) 12%, transparent);
}

.incident-card .incident-ticket-status.status-needs-info {
  color: var(--soc-primary);
  border-color: color-mix(in srgb, var(--soc-primary) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary) 12%, transparent);
}

.incident-card .incident-ticket-status.status-approved {
  color: var(--soc-success);
  border-color: color-mix(in srgb, var(--soc-success) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-success) 12%, transparent);
}

.incident-card .incident-ticket-status.status-unavailable {
  color: var(--soc-warning);
  border-color: color-mix(in srgb, var(--soc-warning) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-warning) 12%, transparent);
}

.incident-card .incident-ticket-status.status-rejected {
  color: var(--soc-danger);
  border-color: color-mix(in srgb, var(--soc-danger) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-danger) 12%, transparent);
}

.incident-card .incident-ticket-status.status-cancelled {
  color: var(--soc-text-sub);
  border-color: color-mix(in srgb, var(--soc-text-sub) 35%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-text-sub) 12%, transparent);
}

.incident-card .incident-ticket-status.status-done {
  color: var(--soc-text-sub);
}

#alertsTicketList .incident-ticket-card .incident-ticket-description {
  margin-top: 0;
}

.incident-more-btn {
  min-width: 32px;
  width: 32px;
  height: 32px;
  line-height: 1;
  padding: 0;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--soc-border) !important;
  background: transparent !important;
  color: var(--soc-text) !important;
}

.incident-more-btn:hover,
.incident-more-btn:focus-visible {
  background: var(--soc-primary-soft-bg) !important;
  border-color: var(--soc-border-strong) !important;
}

.incident-more-menu {
  position: absolute;
  top: 44px;
  right: 14px;
  z-index: 12;
  min-width: 190px;
  border-radius: 12px;
  border: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
  box-shadow: 0 10px 18px var(--soc-menu-shadow-color);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.incident-more-menu-head {
  font-size: var(--soc-text-xs);
  color: var(--soc-text-soft);
  font-weight: 700;
}

.incident-menu-status-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.incident-menu-status-wrap .status-label {
  color: var(--soc-text-accent-soft);
  font-size: var(--soc-text-xs);
  font-weight: 700;
}

.incident-menu-status-wrap .statusSelect {
  min-width: 0;
}

.critical-text {
  color: var(--soc-critical-text);
}

.controls,
.instruction-form,
.incident-actions,
.notification-actions,
.confirm-actions,
.attachment-preview-controls,
.attachment-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.controls .statusSelect,
.instruction-form .instructionInput {
  flex: 1;
  min-width: 160px;
}

.controls {
  align-items: center;
  margin-top: 6px;
}

.controls .status-label {
  color: var(--soc-text-accent-soft);
  font-size: var(--soc-text-sm);
  font-weight: 700;
}

.controls .statusSelect {
  flex: 0 0 auto;
  min-width: 122px;
}

.instruction-list {
  margin-top: 10px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-panel-bg);
  color: var(--soc-text);
  padding: 10px;
  white-space: pre-wrap;
}

.notification-feed-type {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-10);
  color: var(--soc-text-accent-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  min-width: 0;
  max-width: 100%;
  justify-self: start;
}

.notification-feed-type.critical {
  border-color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
}

.notification-critical-icon {
  flex: 0 0 auto;
  color: var(--soc-primary);
  font-size: 13px;
  line-height: 1;
}

.notification-empty-state {
  border: 1px dashed var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.notification-empty-state p {
  margin: 0;
}

.ticket-list {
  display: grid;
  gap: 10px;
}

.soc-pc-list-header {
  display: none;
}

.soc-pc-side-panel {
  display: none;
}

.incident-comment-preview {
  display: none;
}

.ticket-row-summary {
  display: none;
}

.ticket-requested-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--soc-warning) 46%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-warning) 14%, transparent);
  color: color-mix(in srgb, var(--soc-warning) 86%, #7c3f00);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  padding: 2px 7px;
  white-space: nowrap;
  max-width: 100%;
}

.ticket-requested-count-badge.is-empty {
  border-color: var(--soc-border);
  background: var(--soc-surface-overlay-11);
  color: var(--soc-text-sub);
}

.ticket-list-compact .ticket-card {
  padding: 10px 10px 10px 12px;
  gap: 8px;
}

.ticket-list-compact .ticket-title {
  font-size: 14px;
}

.ticket-list-compact .ticket-desc {
  margin: 0;
  font-size: 12px;
  color: var(--soc-text-sub);
}

.ticket-card {
  position: relative;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  padding: 12px;
  display: grid;
  gap: 10px;
  box-sizing: border-box;
  box-shadow: 0 8px 20px var(--soc-shadow);
}

.ticket-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
  background: var(--soc-warning);
}

.ticket-card.status-needs-info::before {
  background: var(--soc-primary);
}

.ticket-card.status-approved::before {
  background: var(--soc-success);
}

.ticket-card.status-unavailable::before {
  background: var(--soc-warning);
}

.ticket-card.status-rejected::before {
  background: var(--soc-danger);
}

.ticket-card.status-cancelled::before {
  background: var(--soc-text-sub);
}

.ticket-card.status-done::before {
  background: var(--soc-text-sub);
}

.ticket-card.deleted {
  opacity: 0.68;
}

.ticket-card.status-unavailable,
.ticket-card.status-rejected,
.ticket-card.status-cancelled {
  opacity: 0.66;
}

.ticket-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ticket-head-pills {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.ticket-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--soc-text);
  line-height: 1.3;
}

.ticket-title.is-urgent {
  color: var(--soc-danger);
}

.ticket-status-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--soc-text);
  background: var(--soc-surface-overlay-13);
}

.ticket-urgent-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--soc-danger) 36%, var(--soc-border));
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--soc-danger);
  background: color-mix(in srgb, var(--soc-danger) 12%, transparent);
}

.ticket-status-pill.status-pending {
  color: var(--soc-warning);
  border-color: color-mix(in srgb, var(--soc-warning) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-warning) 12%, transparent);
}

.ticket-status-pill.status-needs-info {
  color: var(--soc-primary);
  border-color: color-mix(in srgb, var(--soc-primary) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary) 12%, transparent);
}

.ticket-status-pill.status-approved {
  color: var(--soc-success);
  border-color: color-mix(in srgb, var(--soc-success) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-success) 12%, transparent);
}

.ticket-status-pill.status-unavailable {
  color: var(--soc-warning);
  border-color: color-mix(in srgb, var(--soc-warning) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-warning) 12%, transparent);
}

.ticket-status-pill.status-rejected {
  color: var(--soc-danger);
  border-color: color-mix(in srgb, var(--soc-danger) 36%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-danger) 12%, transparent);
}

.ticket-status-pill.status-cancelled {
  color: var(--soc-text-sub);
  border-color: color-mix(in srgb, var(--soc-text-sub) 35%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-text-sub) 12%, transparent);
}

.ticket-status-pill.status-done {
  color: var(--soc-text-sub);
}

.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--soc-text-sub);
}

.ticket-meta > span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  padding: 2px 8px;
  background: var(--soc-surface-overlay-11);
}

.ticket-desc,
.ticket-meta-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--soc-text);
}

.ticket-kv-list {
  display: grid;
  gap: 7px;
}

.ticket-kv-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.ticket-kv-label,
.ticket-kv-value {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.ticket-kv-label {
  color: var(--soc-text-sub);
  font-weight: 700;
}

.ticket-kv-value {
  color: var(--soc-text);
  min-width: 0;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.ticket-card.ticket-work-support-card .ticket-final-need-number {
  color: var(--soc-warning);
  font-weight: 800;
}

.ticket-long-text {
  border: 1px solid var(--soc-border);
  border-radius: 8px;
  background: var(--soc-surface-overlay-11);
  padding: 8px 10px;
}

.ticket-reason-text {
  background: none;
  border: none;
  padding: 0;
  white-space: normal;
  word-break: break-word;
}

.ticket-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ticket-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ticket-location-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-11);
  color: var(--soc-text-sub);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  padding: 4px 10px;
  white-space: nowrap;
}

.ticket-location-btn {
  white-space: nowrap;
}

.ticket-full-content-actions {
  margin-top: 2px;
}

#ticketStatusFilterChips {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#ticketStatusFilterChips .chip {
  flex: 0 0 auto;
}

#ticketsView .soc-ticket-datebar,
#ticketsView .soc-ticket-summary-grid {
  margin-bottom: 10px;
}

#ticketsView .soc-ticket-filter-compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 4px;
  min-width: 0;
}

#ticketsView .soc-ticket-filter-compact-summary {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--ui-text-12, 12px);
  line-height: 1.35;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ticketsView .soc-ticket-filter-compact-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding-inline: 10px;
}

#ticketsView .soc-ticket-active-filters {
  margin-bottom: 10px;
}

.ticket-status-select {
  min-width: 132px;
}

.ticket-attachments,
.ticket-comments {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-panel-bg);
  padding: 9px;
}

.ticket-comments-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--soc-text-accent-soft);
}

.ticket-comment-list {
  display: grid;
  gap: 8px;
}

.ticket-comment-item {
  border: 1px solid var(--soc-border);
  border-radius: 8px;
  background: var(--soc-card-bg);
  padding: 8px;
  display: grid;
  gap: 3px;
}

.ticket-comment-item strong {
  color: var(--soc-text);
  font-size: 12px;
}

.ticket-comment-body {
  min-width: 0;
}

.ticket-comment-item span {
  color: var(--soc-text);
  font-size: 12px;
  line-height: 1.4;
}

.ticket-comment-item small {
  color: var(--soc-text-sub);
  font-size: 11px;
}

.soc-support-confirmed-comment {
  display: grid;
  gap: 4px;
}

.soc-support-confirmed-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--soc-text);
}

.soc-support-confirmed-summary {
  margin: 0;
  font-size: 12px;
  color: var(--soc-text-sub);
}

.soc-support-confirmed-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.soc-support-confirmed-item {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--soc-text);
}

.ticket-comment-form,
.ticket-attachment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.ticket-comment-input,
.ticket-attachment-input {
  min-width: 0;
}

.ticket-comment-input.is-required {
  border-color: var(--soc-danger) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-danger) 20%, transparent);
}

@media (max-width: 768px) {
  #ticketsView .ticket-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  #ticketsView .ticket-card-head {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
  }

  #ticketsView .ticket-card-head .ticket-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  #ticketsView .ticket-card-head .ticket-head-pills {
    flex: 0 0 auto;
    margin-left: 8px;
    justify-content: flex-end;
    align-items: flex-start;
  }

  #ticketsView .ticket-card-head .ticket-status {
    order: 0;
    align-self: auto;
  }

  #ticketsView .ticket-meta {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  #ticketsView .ticket-meta-item,
  #ticketsView .ticket-title,
  #ticketsView .ticket-extra {
    width: 100%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere;
  }

  #ticketsView .ticket-meta-item {
    display: block;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    color: var(--soc-text-sub);
    font-size: 12px;
    line-height: 1.45;
  }

  #ticketsView .ticket-desc,
  #ticketsView .ticket-meta-line {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
  }

  #ticketsView .ticket-actions-row {
    width: 100%;
    justify-content: flex-start;
  }

  #ticketsView .ticket-action-row {
    width: 100%;
  }

  #ticketsView .ticket-location-btn {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  #ticketsView .ticket-location-pill {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  #ticketsView .ticket-status-select {
    width: 100%;
    min-width: 0;
  }

  #ticketsView .ticket-title {
    font-size: 14px;
    line-height: 1.35;
  }

  #ticketsView .ticket-kv-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
  }

  #ticketsView .ticket-kv-label {
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  #ticketsView .ticket-kv-value {
    font-size: 13px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

.notification-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.panel-title-row .soc-page-header-main,
.notification-panel-head .soc-page-header-main,
.soc-announcement-header .soc-page-header-main,
.soc-sla-header-bar .soc-page-header-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.soc-view-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.soc-view-page-header .soc-page-header-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.soc-view-page-header .chip-row {
  flex-shrink: 0;
}

.notification-panel-head-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#notificationPermissionQuickBtn.is-disabled {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

.notification-timeline-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}

.notification-timeline-toolbar label {
  display: grid;
  gap: 6px;
  font-size: var(--soc-text-xs);
  color: var(--soc-text-accent-muted);
}

.notification-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 331;
  background: var(--soc-overlay-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.notification-filter-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.notification-filter-panel {
  position: fixed;
  left: clamp(10px, 3vw, 18px);
  right: clamp(10px, 3vw, 18px);
  top: calc(var(--soc-safe-top) + 68px);
  z-index: 332;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: linear-gradient(175deg, var(--soc-surface), var(--soc-surface-2));
  box-shadow: 0 14px 28px var(--soc-overlay-soft);
  padding: 10px 10px 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-118%);
  transition: transform 0.24s ease, opacity 0.2s ease;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(62dvh, 460px);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.notification-filter-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.notification-filter-panel.dragging {
  transition: none;
  transform: translateY(var(--soc-notification-filter-drag, 0px));
}

.notification-filter-handle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  min-height: 38px;
  padding: 10px 0 8px;
  border-top: 1px solid var(--soc-divider-strong);
  touch-action: none;
  cursor: n-resize;
  user-select: none;
  -webkit-user-select: none;
}

.notification-filter-handle span {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--soc-handle-bg-strong);
}

.notification-timeline-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.case-timeline-card {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  padding: 11px;
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.case-timeline-card.deleted {
  opacity: 0.72;
}

.case-timeline-head {
  display: grid;
  gap: 6px;
}

.case-timeline-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--soc-incident-title);
}

.case-timeline-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.case-status-badge,
.case-eci-badge,
.case-meta-text {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  padding: 3px 8px;
  font-size: 11px;
  color: var(--soc-text-accent-soft);
  background: var(--soc-surface-overlay-14);
}

.case-eci-badge.eci2 {
  background: var(--soc-severity-mid-bg);
  border-color: var(--eci2-border);
  color: var(--eci2-fg);
}

.case-eci-badge.eci3 {
  background: var(--eci3-bg);
  border-color: var(--eci3-border);
  color: var(--eci3-fg);
}

.case-eci-badge.eci4 {
  background: var(--eci4-bg);
  border-color: var(--eci4-border);
  color: var(--eci4-fg);
}

.case-timeline-events {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 18px;
}

.case-timeline-events::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--soc-timeline-line);
}

.case-timeline-event-row {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.case-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: var(--soc-dot-default);
}

.case-timeline-dot.status {
  background: var(--soc-dot-status);
}

.case-timeline-dot.status-pending {
  background: var(--soc-warning);
}

.case-timeline-dot.status-approved {
  background: var(--soc-success);
}

.case-timeline-dot.status-rejected,
.case-timeline-dot.status-unavailable,
.case-timeline-dot.status-cancelled,
.case-timeline-dot.status-done,
.case-timeline-dot.status-needs_info,
.case-timeline-dot.status-needs-info {
  background: var(--soc-danger);
}

.case-timeline-dot.status-received {
  background: var(--status-dot-received);
}

.case-timeline-dot.status-inprogress {
  background: var(--status-dot-inprogress);
}

.case-timeline-dot.status-closed {
  background: var(--status-dot-closed);
}

.case-timeline-dot.instruction {
  background: var(--soc-dot-instruction);
}

.case-timeline-dot.attachment {
  background: var(--soc-dot-attachment);
}

.case-timeline-dot.deleted {
  background: var(--soc-dot-deleted);
}

.case-timeline-event-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.case-timeline-event-message {
  margin: 0;
  color: var(--soc-text-soft-8);
  font-size: 13px;
  line-height: 1.35;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: auto;
  hyphens: none;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

#dashboardPanel .case-timeline-event-message {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: auto;
  hyphens: none;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

#dashboardPanel .global-notice-body {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: auto;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.notification-timeline-list .alert-item,
.notification-timeline-list .case-timeline-event-message,
.global-notice-body {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: auto;
  hyphens: none;
}

.notification-timeline-list .alert-item,
.notification-timeline-list .case-timeline-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.case-timeline-event-time {
  color: var(--soc-text-soft-4);
  font-size: 11px;
}

.case-timeline-actions {
  display: flex;
  justify-content: flex-end;
}

.alerts {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--soc-border);
  background: var(--soc-card-bg);
  padding: 9px 10px;
  font-size: var(--soc-text-sm);
}

.alert-time {
  flex: 0 0 auto;
  color: var(--soc-text-sub);
  white-space: nowrap;
}

.alert-text {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: auto;
  hyphens: none;
}

.alert-item.emergency {
  border-color: var(--soc-danger-soft-border);
  color: var(--eci34-fg);
}

.soc-realtime-state {
  border-radius: 12px;
  border: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
  color: var(--soc-text);
  padding: 14px;
  margin-bottom: 10px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.incident-list-skeleton {
  margin-bottom: 10px;
}

.incident-card-skeleton {
  min-height: 140px;
  background: linear-gradient(
    110deg,
    var(--soc-shimmer-1) 15%,
    var(--soc-shimmer-2) 30%,
    var(--soc-shimmer-1) 45%
  );
  background-size: 220% 100%;
  animation: socShimmer 1.2s linear infinite;
}

@keyframes socShimmer {
  from { background-position: 200% 0; }
  to { background-position: -20% 0; }
}

.alert-item.clickable {
  cursor: pointer;
}

/* Forms */
.ds-form-grid,
#notificationSettingsForm,
#accountPasswordForm,
#userCreateForm,
#employeeForm,
#passwordChangeForm,
#announcementForm,
#incidentForm,
#quickIncidentForm,
#slaSettingsForm {
  display: grid;
  gap: 10px;
}

.soc-site-field-help {
  margin-top: -6px;
}

[data-theme="light"] #authView input[type="text"],
[data-theme="light"] #authView input[type="password"] {
  color: var(--soc-text);
  caret-color: var(--soc-text);
}

[data-theme="light"] #authView input[type="text"]::placeholder,
[data-theme="light"] #authView input[type="password"]::placeholder {
  color: var(--soc-text-sub);
}

body.soc-auth-shell-active .topbar,
body.soc-auth-shell-active #globalNoticeHost,
body.soc-auth-shell-active #navBackdrop,
body:has(#authView:not(.hidden)) .topbar,
body:has(#authView:not(.hidden)) #globalNoticeHost,
body:has(#authView:not(.hidden)) #navBackdrop {
  display: none !important;
}

body.soc-auth-shell-active #startupOverlay,
body.soc-auth-shell-active #longTaskProgressModal,
body.soc-auth-shell-active #longTaskProgressMini,
body:has(#authView:not(.hidden)) #startupOverlay,
body:has(#authView:not(.hidden)) #longTaskProgressModal,
body:has(#authView:not(.hidden)) #longTaskProgressMini {
  display: none !important;
}

body.soc-auth-shell-active,
body:has(#authView:not(.hidden)) {
  overflow: auto;
  overscroll-behavior: auto;
  background: #f6f7f9;
}

body.soc-auth-shell-active .soc-app-shell,
body:has(#authView:not(.hidden)) .soc-app-shell {
  min-height: 100dvh;
  grid-template-rows: minmax(0, 1fr);
  background: #f6f7f9;
}

body.soc-auth-shell-active .container.ds-page,
body.soc-auth-shell-active .container.admin-layout,
body:has(#authView:not(.hidden)) .container.ds-page,
body:has(#authView:not(.hidden)) .container.admin-layout {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100dvh;
  padding: 16px !important;
  display: grid;
  place-items: center;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

body.soc-auth-shell-active .container.ds-page > :not(#authView),
body.soc-auth-shell-active .container.admin-layout > :not(#authView),
body:has(#authView:not(.hidden)) .container.ds-page > :not(#authView),
body:has(#authView:not(.hidden)) .container.admin-layout > :not(#authView) {
  display: none !important;
}

body.soc-auth-shell-active #authView,
body:has(#authView:not(.hidden)) #authView {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  min-height: min(840px, calc(100svh - 32px));
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 107, 44, 0.12), transparent 26%),
    radial-gradient(circle at 50% 58%, rgba(34, 51, 72, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 251, 0.92));
  box-shadow: 0 30px 80px rgba(24, 39, 75, 0.12);
  overflow: hidden;
}

body.soc-auth-shell-active #authView.hidden,
body:has(#authView.hidden) #authView.hidden {
  display: none !important;
}

.auth-shell {
  position: relative;
  min-height: inherit;
  padding: clamp(24px, 4vw, 40px);
}

.auth-stage-grid {
  position: relative;
  z-index: 1;
  min-height: calc(min(840px, calc(100svh - 32px)) - (clamp(24px, 4vw, 40px) * 2));
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(380px, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

.auth-stage-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
}

.auth-stage-glow-left {
  inset: 50% auto auto 50%;
  width: 420px;
  height: 420px;
  transform: translate(-62%, -53%);
  background: radial-gradient(circle, rgba(255, 107, 44, 0.16), rgba(255, 107, 44, 0.04) 58%, transparent 72%);
}

.auth-stage-glow-right {
  inset: 50% auto auto 50%;
  width: 560px;
  height: 560px;
  transform: translate(-35%, -41%);
  background: radial-gradient(circle, rgba(189, 201, 222, 0.2), rgba(189, 201, 222, 0.04) 60%, transparent 76%);
}

.auth-hero {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 100%;
}

.auth-brand-lockup {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  animation: auth-fade-up 0.55s ease;
}

.auth-logo-mark {
  width: clamp(192px, 22vw, 276px);
  aspect-ratio: 380 / 411;
  display: grid;
  place-items: center;
  animation: auth-logo-drift 6s ease-in-out infinite;
}

.auth-logo-mark-image,
.auth-wordmark-image {
  width: 100%;
  height: auto;
  display: block;
}

.auth-logo-mark-image-dark,
.auth-wordmark-image-dark {
  display: none !important;
}

[data-theme="dark"] .auth-logo-mark-image-light,
[data-theme="dark"] .auth-wordmark-image-light {
  display: none !important;
}

[data-theme="dark"] .auth-logo-mark-image-dark,
[data-theme="dark"] .auth-wordmark-image-dark {
  display: block !important;
}

.auth-brand-copy {
  display: grid;
  gap: 14px;
  max-width: 460px;
  justify-items: center;
}

.auth-wordmark {
  width: min(100%, 332px);
  aspect-ratio: 346 / 46;
  display: block;
}

.auth-intro {
  margin: 0;
  color: #5d6878;
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.7;
}

.auth-form-panel {
  justify-self: stretch;
  width: min(100%, 470px);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(215, 221, 229, 0.8);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow:
    0 28px 56px rgba(20, 34, 61, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  animation: auth-fade-up 0.65s ease;
}

.auth-panel-head {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

#authView .auth-panel-head h2 {
  margin: 0;
  color: #1f2937;
  font-size: clamp(28px, 2.5vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

#authView .auth-panel-head p {
  margin: 0;
  color: #7a8594;
  font-size: 14px;
  line-height: 1.65;
}

#authView .auth-form {
  gap: 16px;
}

#authView .auth-input-field {
  gap: 8px;
}

#authView .auth-field-label {
  color: #223348;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

#authView .auth-input-field input {
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid #d8dee8;
  border-radius: 16px;
  background: rgba(245, 247, 251, 0.95);
  color: #1f2937;
  font-size: 15px;
  line-height: 20px;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

#authView .auth-input-field input::placeholder {
  color: #a0aaba;
}

#authView .auth-input-field input:hover:not(:disabled) {
  border-color: #c7d0dd;
  background: #f8fafc;
}

#authView .auth-input-field input:focus {
  border-color: rgba(255, 107, 44, 0.7);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.12);
  transform: translateY(-1px);
}

#authView .auth-input-field input:disabled {
  border-color: #e2e8f0;
  background: #edf1f6;
  color: #94a3b8;
}

#authView .input-helper {
  font-size: 12px;
  line-height: 18px;
  color: #7a8594;
}

#authView .tenant-helper-success {
  color: var(--soc-success);
}

#authView .tenant-helper-error {
  color: var(--soc-danger);
}

#authView .input-error {
  font-size: 12px;
  line-height: 18px;
  color: var(--soc-danger);
}

#authView .auth-input-field.auth-credential-shake {
  animation: auth-credential-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

#authView .auth-input-field input.auth-credential-invalid,
#authView .auth-password-wrap.auth-credential-invalid #password {
  border-color: rgba(239, 68, 68, 0.82);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

#authView .auth-input-field input.auth-credential-invalid:not(:disabled),
#authView .auth-password-wrap.auth-credential-invalid #password:not(:disabled) {
  background: rgba(255, 246, 246, 0.98);
}

#authView .auth-password-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}

#authView .password-toggle {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: #5f6b7d;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

#authView .password-toggle:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #f97316;
}

#authView .password-toggle:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.28);
  outline-offset: 2px;
}

#authView .password-toggle:disabled {
  color: #a0aaba;
}

#authView .password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

#authView .auth-options {
  margin-top: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

#authView .choice-row {
  min-height: 32px;
  gap: 10px;
  font-size: 13px;
  line-height: 18px;
  color: #344256;
  cursor: pointer;
  user-select: none;
}

#authView .choice-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex: 0 0 16px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1.5px solid #cad3df;
  border-radius: 4px;
  background: #ffffff;
  box-shadow:
    0 4px 10px rgba(17, 24, 39, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: inline-grid;
  place-items: center;
  align-self: center;
  vertical-align: middle;
  line-height: 0;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

#authView .choice-row input[type="checkbox"]::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 1.8px solid #ffffff;
  border-bottom: 1.8px solid #ffffff;
  transform: rotate(-45deg) translate(0, -1px) scale(0.82);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

#authView .choice-row input[type="checkbox"]:hover:not(:disabled) {
  border-color: #ffb08a;
  background: #fff8f4;
}

#authView .choice-row input[type="checkbox"]:checked {
  border-color: #ff6b2c;
  background: linear-gradient(135deg, #ff6b2c, #ff8b3d);
  box-shadow: 0 6px 14px rgba(255, 107, 44, 0.22);
}

#authView .choice-row input[type="checkbox"]:checked:hover:not(:disabled) {
  border-color: #ff6b2c;
  background: linear-gradient(135deg, #ff6b2c, #ff8b3d);
  box-shadow: 0 6px 14px rgba(255, 107, 44, 0.22);
}

#authView .choice-row input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px) scale(1);
}

#authView .choice-row input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255, 107, 44, 0.16),
    0 10px 20px rgba(255, 107, 44, 0.16);
}

#authView .choice-row input[type="checkbox"]:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

#authView .auth-submit-btn {
  width: 100%;
  min-height: 58px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff6b2c, #ff8b3d);
  box-shadow: 0 18px 30px rgba(255, 107, 44, 0.24);
  color: #ffffff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  justify-content: center;
}

#authView .auth-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff5c18, #ff7d22);
  color: #ffffff;
  transform: translateY(-1px);
}

#authView .auth-submit-btn:disabled {
  background: #cfd7e3;
  box-shadow: none;
  color: #ffffff;
}

#authView .auth-form:has(#username:disabled) .auth-submit-btn {
  background: #cfd7e3;
  box-shadow: none;
  color: #ffffff;
  pointer-events: none;
}

#authView #authMessage {
  margin-top: 14px;
  font-size: 13px;
  line-height: 19px;
}

#authMessage.auth-info {
  color: #7a8594;
}

#authMessage.auth-success {
  color: var(--soc-success);
  font-weight: 600;
}

#authMessage.auth-error {
  color: var(--soc-danger);
  font-weight: 600;
}

[data-theme="dark"] body.soc-auth-shell-active #authView,
[data-theme="dark"] body:has(#authView:not(.hidden)) #authView {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 122, 26, 0.18), transparent 26%),
    radial-gradient(circle at 50% 58%, rgba(118, 138, 161, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(30, 36, 44, 0.98), rgba(24, 29, 36, 0.95));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] #authView .auth-intro,
[data-theme="dark"] #authView .auth-panel-head p,
[data-theme="dark"] #authView .input-helper,
[data-theme="dark"] #authView .choice-row {
  color: #b1bccb;
}

[data-theme="dark"] #authView .auth-field-label,
[data-theme="dark"] #authView .auth-panel-head h2 {
  color: #f4f7fb;
}

[data-theme="dark"] #authView .auth-form-panel {
  background: rgba(29, 35, 44, 0.88);
  border-color: rgba(84, 96, 112, 0.78);
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] #authView .auth-input-field input {
  background: rgba(34, 42, 53, 0.96);
  border-color: #445063;
  color: #eef2f7;
}

[data-theme="dark"] #authView .auth-input-field input::placeholder {
  color: #8894a7;
}

[data-theme="dark"] #authView .auth-input-field input:disabled {
  background: #2a3340;
  color: #7f8a9a;
}

[data-theme="dark"] #authView .auth-input-field input.auth-credential-invalid,
[data-theme="dark"] #authView .auth-password-wrap.auth-credential-invalid #password {
  border-color: rgba(248, 113, 113, 0.82);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.16);
  background: rgba(77, 37, 42, 0.45);
}

[data-theme="dark"] #authView .password-toggle {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #c7d1de;
}

[data-theme="dark"] #authView .choice-row input[type="checkbox"] {
  background: rgba(34, 42, 53, 0.96);
  border-color: #556377;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] #authView .choice-row input[type="checkbox"]:hover:not(:disabled) {
  border-color: #ff9a69;
  background: rgba(45, 53, 66, 0.98);
}

[data-theme="dark"] #authView .choice-row input[type="checkbox"]:checked {
  border-color: #ff7f44;
  background: linear-gradient(135deg, #ff6b2c, #ff8b3d);
}

[data-theme="dark"] #authView .choice-row input[type="checkbox"]:checked:hover:not(:disabled) {
  border-color: #ff7f44;
  background: linear-gradient(135deg, #ff6b2c, #ff8b3d);
}

@media (max-width: 960px) {
  body.soc-auth-shell-active .container.ds-page,
  body.soc-auth-shell-active .container.admin-layout,
  body:has(#authView:not(.hidden)) .container.ds-page,
  body:has(#authView:not(.hidden)) .container.admin-layout {
    place-items: start center;
  }

  body.soc-auth-shell-active #authView,
  body:has(#authView:not(.hidden)) #authView {
    width: min(100%, calc(100% - 20px));
    min-height: calc(100svh - 20px);
    margin: 10px auto;
    border-radius: 28px;
  }

  .auth-shell {
    padding: 22px 18px;
  }

  .auth-stage-grid {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .auth-brand-lockup {
    gap: 18px;
  }

  .auth-brand-copy {
    max-width: 100%;
  }

  .auth-form-panel {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  body.soc-auth-shell-active #authView,
  body:has(#authView:not(.hidden)) #authView {
    width: min(100%, calc(100% - 12px));
    min-height: calc(100svh - 12px);
    margin: 6px auto;
    border-radius: 24px;
  }

  .auth-shell {
    padding: 12px 12px 14px;
  }

  .auth-stage-grid {
    gap: 14px;
  }

  .auth-logo-mark {
    width: 148px;
  }

  .auth-brand-lockup {
    gap: 12px;
  }

  .auth-wordmark {
    width: min(100%, 250px);
  }

  .auth-brand-copy {
    gap: 6px;
  }

  .auth-intro {
    font-size: 14px;
    line-height: 1.45;
  }

  .auth-panel-head {
    gap: 6px;
    margin-bottom: 14px;
  }

  #authView .auth-panel-head h2 {
    font-size: 24px;
  }

  #authView .auth-panel-head p {
    font-size: 13px;
    line-height: 1.5;
  }

  .auth-form-panel {
    padding: 20px 18px;
  }

  #authView .auth-options {
    gap: 8px 14px;
  }

  #authView .auth-password-wrap {
    grid-template-columns: 1fr auto;
  }

  #authView .password-toggle,
  #authView .auth-submit-btn,
  #authView .auth-input-field input {
    min-height: 50px;
  }

  #authView .choice-row {
    min-height: 32px;
    font-size: 12px;
    line-height: 16px;
  }
}

@media (max-width: 430px) {
  #authView .auth-options {
    gap: 8px 12px;
  }
}

@keyframes auth-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes auth-logo-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes auth-credential-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(-6px);
  }
  36% {
    transform: translateX(5px);
  }
  54% {
    transform: translateX(-4px);
  }
  72% {
    transform: translateX(3px);
  }
  90% {
    transform: translateX(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #authView .auth-input-field.auth-credential-shake {
    animation: none;
  }
}

#quickIncidentForm .time-desktop,
#quickIncidentForm .time-mobile {
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-surface-overlay-7);
  color: var(--soc-text);
  box-sizing: border-box;
  line-height: 1.2;
}

#quickIncidentForm input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
}

#quickIncidentForm input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
}

@media (min-width: 901px) {
  #reportPanel #reportView {
    gap: 14px;
  }

  #reportPanel.report-selection-active #reportView {
    gap: 14px;
  }

  #reportPanel.report-selection-active #reportFlowStart {
    min-height: auto;
    max-height: none;
    overflow: visible;
    gap: 14px;
  }

  #reportPanel.report-selection-active .report-flow-step {
    height: auto;
    min-height: 0;
    gap: 10px;
    grid-template-rows: auto auto;
  }

  #reportPanel .report-choice-grid-1col.selectable-card-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(114px, auto);
    gap: 12px;
  }

  #reportPanel .report-choice-grid-2col {
    grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
    grid-auto-rows: minmax(108px, auto);
    gap: 12px;
  }

  #reportPanel .report-choice-card,
  #reportPanel .report-choice-grid-1col .report-choice-card,
  #reportPanel .report-choice-grid-2col .report-choice-card {
    aspect-ratio: auto;
    min-height: 0;
    padding: 16px 16px 14px;
    justify-items: start;
    align-content: start;
    text-align: left;
    gap: 8px;
  }

  #reportPanel .report-choice-icon {
    font-size: 24px;
  }

  #reportPanel .report-choice-icon-img {
    width: 32px;
    height: 32px;
  }

  #reportPanel .report-choice-icon-img--ticket-template {
    width: 30px;
    height: 30px;
  }

  #reportPanel .report-choice-label,
  #reportPanel .report-choice-sub {
    text-align: left;
    padding: 0;
  }

  #reportPanel .report-choice-label {
    font-size: 14px;
  }

  #reportPanel .report-choice-sub {
    font-size: 12px;
    line-height: 1.4;
  }

  #reportPanel .report-mode-tabs {
    gap: 8px;
  }

  #reportPanel .report-tab {
    min-height: 36px;
    padding: 0 14px;
  }

  #reportPanel #quickIncidentForm,
  #reportPanel #incidentForm,
  #reportPanel #ticketForm {
    padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 28px);
  }

  #reportPanel .report-composer-form {
    gap: 16px;
  }

  #reportPanel .report-form-section {
    padding: 18px 20px;
  }
}

.soc-participant-picker-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-panel-bg);
  color: var(--soc-text);
  padding: 10px 12px;
  text-align: left;
  box-sizing: border-box;
  min-width: 0;
}

.soc-participant-picker-trigger::after {
  content: "열기";
  font-size: 12px;
  font-weight: 700;
  color: var(--soc-primary);
  flex: 0 0 auto;
  white-space: nowrap;
}

.soc-participant-picker-trigger.is-disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.soc-participant-picker-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-ticket-template-fields {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.soc-ticket-form-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-ticket-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.soc-ticket-readonly-value {
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-surface-overlay-7);
  color: var(--soc-text-sub);
  padding: 10px 12px;
  box-sizing: border-box;
}

.soc-ticket-employee-trigger {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  color: var(--soc-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  text-align: left;
  box-sizing: border-box;
  min-width: 0;
}

.soc-ticket-employee-trigger::after {
  content: "열기";
  color: var(--soc-primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.soc-ticket-employee-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-ticket-chip-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.soc-ticket-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--soc-border);
  border-radius: 999px;
  background: var(--soc-card-bg);
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 10px;
}

.soc-ticket-reason-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 10px;
  min-width: 0;
}

.soc-ticket-reason-checks label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#ticketEmployeePickerModal {
  z-index: 260;
}

#ticketEmployeePickerModal.hidden {
  display: none;
}

#ticketReasonPickerModal {
  z-index: 260;
}

#ticketReasonPickerModal.hidden {
  display: none;
}

#ticketCancelReasonModal {
  z-index: 265;
}

#ticketCancelReasonModal.hidden {
  display: none;
}

.soc-ticket-employee-modal-panel {
  width: min(620px, 96vw);
  max-height: min(88vh, 760px);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.soc-ticket-cancel-modal-panel {
  width: min(520px, 94vw);
}

.soc-ticket-employee-modal-body {
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.soc-ticket-employee-picker-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-ticket-reason-picker-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-ticket-employee-picker-list .soc-report-section-row {
  width: 100%;
  justify-content: space-between;
}

.soc-ticket-reason-picker-list .soc-report-section-row {
  width: 100%;
  justify-content: space-between;
  min-height: 40px;
  padding-block: 10px;
}

.soc-ticket-employee-picker-list .soc-report-section-copy {
  flex: 1 1 auto;
}

.soc-ticket-reason-picker-list .soc-report-section-copy {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 20px;
}

.soc-ticket-reason-picker-list .soc-report-section-copy strong {
  display: block;
  line-height: 1.35;
}

.soc-ticket-employee-picker-list .soc-report-section-switch {
  align-self: center;
}

.soc-ticket-reason-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
}

.soc-ticket-reason-check {
  width: 18px;
  height: 18px;
  accent-color: var(--soc-primary);
  pointer-events: none;
}

.soc-ticket-employee-modal-actions {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--soc-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.soc-ticket-cancel-modal-body {
  gap: 12px;
}

.soc-ticket-cancel-field {
  display: grid;
  gap: 6px;
}

.soc-ticket-cancel-field > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--soc-text-sub);
}

.soc-ticket-cancel-field select,
.soc-ticket-cancel-field textarea {
  width: 100%;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-panel-bg);
  color: var(--soc-text);
  font: inherit;
  padding: 10px 12px;
}

.soc-ticket-cancel-field textarea {
  min-height: 96px;
  resize: vertical;
}

body.ticket-employee-picker-open,
html.ticket-employee-picker-open {
  overflow: hidden;
}

body.ticket-reason-picker-open,
html.ticket-reason-picker-open {
  overflow: hidden;
}

body.ticket-cancel-reason-open,
html.ticket-cancel-reason-open {
  overflow: hidden;
}

@media (max-width: 680px) {
  .soc-ticket-inline-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.soc-report-critical-slot {
  display: grid;
  min-width: 0;
}

.soc-report-critical-btn {
  justify-self: start;
  min-width: 0;
  white-space: nowrap;
}

.soc-report-critical-btn.is-on {
  border-color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
}

.multi-check-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.report-step-shell {
  display: grid;
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 0;
}

.report-step-progress {
  display: flex;
  align-self: start;
  align-items: flex-end;
  gap: 18px;
  min-width: 0;
  padding: 0 0 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 70%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
}

.report-step-progress-item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: fit-content;
  gap: 0;
  align-items: flex-end;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 10px;
  box-shadow: none;
}

.report-step-progress-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.report-step-progress-item.is-complete {
  border-color: transparent;
  background: transparent;
}

.report-step-progress-item.is-current::after {
  background: color-mix(in srgb, var(--soc-primary) 88%, #ff8400);
}

.report-step-progress-item.is-current {
  border-color: transparent;
  box-shadow: none;
}

.report-step-progress-item.is-upcoming {
  opacity: 1;
}

.report-step-progress-no {
  display: none;
}

.report-step-progress-copy {
  display: flex;
  align-items: center;
  min-width: 0;
}

.report-step-progress-copy strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--soc-text-sub) 80%, var(--soc-text));
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.report-step-progress-copy span {
  display: none;
}

.report-step-progress-item.is-complete .report-step-progress-copy strong {
  color: var(--soc-text);
}

.report-step-progress-item.is-current .report-step-progress-copy strong {
  color: var(--soc-primary);
}

.report-step-progress-item.is-upcoming .report-step-progress-copy strong {
  color: color-mix(in srgb, var(--soc-text-sub) 86%, white);
}

.report-step-context {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.report-step-context-eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--soc-primary) 62%, var(--soc-text-sub));
}

.report-step-context-title {
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--soc-text);
}

.report-step-context-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--soc-text-sub);
  max-width: 42ch;
}

.report-flow-start,
.report-flow-step {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  justify-items: stretch;
}

.report-view {
  display: grid;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.selectable-card-grid {
  width: 100%;
  margin: 0;
  padding: 0;
}

.selectable-card-grid > .selectable-card {
  justify-self: stretch;
  align-self: stretch;
  margin: 0 !important;
}

.report-flow-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: var(--soc-text);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.report-choice-grid {
  display: grid;
  gap: 10px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  padding-top: 0;
  grid-auto-flow: row;
  align-content: start;
  justify-items: stretch;
  align-items: stretch;
}

.report-choice-grid > * {
  width: 100%;
  min-width: 0;
  margin-left: 0 !important;
  justify-self: stretch;
  align-self: stretch;
}

.report-choice-grid-1col {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}

.report-choice-grid-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(118px, auto);
  align-content: start;
  align-items: stretch;
}

.report-choice-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 68%, transparent);
  background: color-mix(in srgb, var(--soc-card-bg) 98%, white);
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 16px 16px 14px;
  text-align: left;
  box-shadow: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
  -webkit-tap-highlight-color: var(--soc-tap-highlight);
}

.report-choice-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 0;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.report-choice-card.active {
  border-color: color-mix(in srgb, var(--soc-primary) 26%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 34%, white);
  box-shadow: none;
}

.report-choice-card.active::after {
  background: color-mix(in srgb, var(--soc-primary) 90%, #ff8400);
}

.report-choice-card.active .report-choice-label {
  color: var(--soc-text);
}

.report-choice-card.active .report-choice-icon {
  color: var(--soc-primary);
}

.report-choice-grid-1col .report-choice-card {
  width: 100%;
  aspect-ratio: auto;
  min-height: 126px;
}

.report-choice-grid-2col .report-choice-card {
  width: 100%;
  aspect-ratio: auto;
  min-height: 118px;
}

.report-choice-card:hover {
  border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-panel-bg) 86%, white);
}

.report-choice-card:focus-visible,
.report-choice-card:active {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--soc-focus-inset);
}

.report-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 26px;
  line-height: 1;
}

.report-choice-icon-svg {
  width: 28px;
  height: 28px;
}

.report-choice-icon-svg--ticket-template {
  width: 26px;
  height: 26px;
}

.report-choice-icon-img {
  width: 34px;
  height: 32px;
  display: block;
  object-fit: contain;
}

.report-choice-icon-img--ticket-template {
  width: 30px;
  height: 30px;
}

.report-choice-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--soc-text);
  text-align: left;
  width: 100%;
  padding: 0;
  overflow-wrap: anywhere;
}

.report-choice-sub {
  font-size: 12px;
  color: var(--soc-text-sub);
  text-align: left;
  width: 100%;
  padding: 0;
  line-height: 1.45;
}

.report-flow-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.report-flow-summary-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.report-flow-summary-label {
  display: none;
}

.report-flow-summary-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.report-flow-summary-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-text-sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.report-flow-summary-pill + .report-flow-summary-pill {
  margin-left: 9px;
  padding-left: 11px;
}

.report-flow-summary-pill + .report-flow-summary-pill::before {
  content: "/";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--soc-text-sub) 78%, white);
  font-weight: 600;
}

.report-flow-summary-pill.is-active {
  color: var(--soc-primary);
}

.report-flow-summary-text {
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#reportPanel:not(.report-selection-active) #reportView {
  gap: 10px;
}

#reportPanel.report-selection-active {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-height: none;
  overflow: visible;
}

#reportPanel.report-selection-active #reportView {
  width: min(1120px, calc(100% - 24px));
  margin-inline: auto;
  padding: 8px 0 28px;
  gap: 16px;
}

#reportPanel.report-selection-active .report-step-shell {
  gap: 12px;
}

#reportPanel.report-selection-active .report-step-progress {
  gap: clamp(18px, 3vw, 30px);
}

#reportPanel.report-selection-active .report-step-context {
  display: none;
}

#reportPanel.report-selection-active #reportFlowStart {
  gap: 18px;
  max-width: 100%;
  min-height: 0;
  overflow: visible;
}

#reportPanel.report-selection-active .report-flow-step:not(.hidden) {
  gap: 16px;
  align-content: start;
  grid-template-rows: auto auto;
  height: auto;
}

#reportPanel.report-selection-active .report-flow-title {
  max-width: 18ch;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.05em;
}

#reportPanel:not(.report-selection-active) #reportFlowSummary {
  margin-bottom: 0;
}

#reportFlowBackBtn {
  flex-shrink: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-text-sub);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 0;
}

@media (max-width: 520px) {
  .report-step-progress {
    gap: 14px;
    padding-bottom: 1px;
  }

  #reportFlowSummary {
    gap: 8px;
  }

  .report-flow-summary-text {
    font-size: 11px;
  }

  #reportFlowBackBtn {
    font-size: 11px;
  }
}

#reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(188px, auto);
  gap: 14px;
}

#reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-card {
  min-height: 188px;
  padding: 22px 22px 20px;
  gap: 10px;
  justify-content: flex-start;
  align-content: flex-start;
}

#reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-icon {
  font-size: 1.75rem;
}

#reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-icon-img {
  width: 42px;
  height: 40px;
}

#reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-label {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

#reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-sub {
  max-width: 28ch;
  font-size: 13px;
  line-height: 1.5;
}

#reportPanel.report-selection-active #reportFlowTypeStep {
  height: auto;
}

#reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: minmax(132px, auto);
  max-height: none;
  overflow: visible;
  gap: 14px;
  padding-top: 0;
}

#reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col .report-choice-card {
  min-height: 132px;
  padding: 18px 16px 16px;
  gap: 8px;
}

#reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col .report-choice-label {
  font-size: 16px;
  line-height: 1.1;
}

#reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col .report-choice-sub {
  font-size: 12px;
}

@media (max-width: 900px) {
  #reportPanel.report-selection-active #reportFlowTypeStep .report-choice-grid-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.report-composer-form {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.report-form-sections {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.report-form-section {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--soc-border) 80%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--soc-card-bg) 96%, white), color-mix(in srgb, var(--soc-panel-bg) 88%, white));
  padding: 18px 18px 17px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--soc-border) 46%, transparent);
}

.report-form-section-head {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.report-form-section-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--soc-primary) 62%, var(--soc-text-sub));
}

.report-form-section-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
}

.report-form-section-head p {
  margin: 0;
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.45;
  max-width: 52ch;
}

.report-form-section-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.report-form-section-body > .help {
  margin-top: -4px;
}

.report-form-section-body--ticket {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
}

.report-form-section-body--incident-grid,
.report-quick-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
}

.report-form-section-body--incident-stack,
.report-quick-structured-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.report-form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.report-form-field--span-2,
.report-form-field--full {
  grid-column: 1 / -1;
}

.report-form-section--post-narrative textarea {
  min-height: 164px;
  resize: vertical;
}

.report-quick-detail-group {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.report-quick-detail-head {
  display: grid;
  gap: 4px;
}

.report-quick-detail-head .meta {
  margin: 0;
}

.report-quick-structured-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--soc-border) 70%, transparent);
  border-radius: 16px;
  padding: 12px 13px;
  background: color-mix(in srgb, var(--soc-panel-bg) 72%, white);
}

.report-quick-structured-group > label,
.report-quick-structured-group > .report-form-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--soc-text);
}

.report-quick-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.report-quick-chip-btn {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 84%, transparent);
  background: color-mix(in srgb, var(--soc-card-bg) 96%, white);
  color: var(--soc-text-sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.report-quick-chip-btn.is-active,
.report-quick-chip-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--soc-primary) 52%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary) 10%, var(--soc-panel-bg));
  color: var(--soc-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent);
}

.report-quick-select {
  width: 100%;
}

.report-quick-structured-note {
  margin: -2px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--soc-text-sub);
}

.soc-ticket-duration-choice {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.soc-ticket-duration-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.soc-ticket-duration-preset-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.soc-ticket-duration-btn {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-surface-overlay-13);
  color: var(--soc-text);
  font-size: var(--soc-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.soc-ticket-duration-btn:hover {
  border-color: color-mix(in srgb, var(--soc-accent, #ff8400) 38%, var(--soc-border));
}

.soc-ticket-duration-btn.is-active {
  border-color: color-mix(in srgb, var(--soc-accent, #ff8400) 58%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-accent, #ff8400) 10%, var(--soc-panel-bg));
  color: var(--soc-text-strong, var(--soc-text));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--soc-accent, #ff8400) 18%, transparent);
}

.soc-ticket-duration-custom {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 156px));
  align-items: start;
  gap: 10px 12px;
}

.soc-ticket-duration-custom.is-active {
  display: grid;
}

.soc-ticket-duration-timefield {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.soc-ticket-duration-timefield span {
  font-size: 11px;
  font-weight: 600;
  color: var(--soc-text-sub);
  line-height: 1.2;
}

.soc-ticket-duration-custom input {
  min-width: 0;
  width: 100%;
}

.soc-ticket-duration-toggle > .soc-ticket-duration-btn:last-child {
  flex: 0 0 auto;
}

.report-form-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 0 0;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--soc-page-bg, transparent) 0%, transparent) 0%,
      color-mix(in srgb, var(--soc-page-bg, var(--soc-panel-bg)) 88%, transparent) 28%,
      var(--soc-page-bg, var(--soc-panel-bg)) 100%
    );
}

.report-form-sticky-footer .ds-btn {
  min-height: 40px;
}

.multi-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--soc-border);
  border-radius: 9px;
  background: var(--soc-surface-overlay-13);
  padding: 8px 10px;
}

.multi-check-item input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  margin: 0;
}

/* Lists */
.user-list,
.manager-status-list,
.audit-list,
.announcement-list,
.sla-overview-list {
  display: grid;
  gap: 10px;
}

.user-item,
.employee-item,
.manager-item,
.announcement-item,
.audit-item,
.sla-item {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  padding: 10px 12px;
}

.user-item.is-selected,
.manager-item.is-selected,
.audit-item.is-selected {
  border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 28%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 5%, var(--ui-bg-surface, var(--soc-card-bg)));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 36%, transparent);
}

.user-item[data-username],
.manager-item[data-manager-username] {
  cursor: pointer;
}

.audit-item {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  text-align: left;
  align-content: start;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 82%, white);
}

button.audit-item {
  cursor: pointer;
}

.audit-item-head,
.audit-item-subline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.audit-item-title,
.audit-item-meta,
.audit-item-time,
.audit-item-actor,
.audit-item-target,
.audit-item-summary {
  margin: 0;
}

.audit-item-title {
  font-size: 14px;
  font-weight: 700;
}

.audit-item-meta,
.audit-item-time,
.audit-item-actor,
.audit-item-target,
.audit-item-summary {
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

.audit-item-time,
.audit-item-actor {
  font-size: 12px;
}

.audit-item-target {
  font-weight: 600;
}

.audit-item-summary {
  line-height: 1.5;
  font-size: 13px;
}

.soc-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.soc-inline-field > span {
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
  white-space: nowrap;
}

.soc-manage-detail-body,
.soc-audit-detail-body,
.soc-sla-detail-panel {
  display: grid;
  gap: 8px;
}

.soc-audit-detail-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.soc-audit-detail-list > div {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 88%, white);
}

.soc-audit-detail-list dt,
.soc-audit-detail-list dd {
  margin: 0;
}

.soc-audit-detail-list dt {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  font-weight: 700;
}

.soc-audit-detail-list dd {
  color: var(--ui-text-primary, var(--soc-text));
  line-height: 1.5;
}

.soc-manage-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-drawer-backdrop:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.soc-workspace-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  width: min(360px, 100vw);
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  border-left: 1px solid var(--ui-border-subtle, var(--soc-border));
  box-shadow: -12px 0 36px rgba(15, 23, 42, 0.16);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.topbar-drawer {
  z-index: calc(var(--ui-z-drawer, 420) + 6);
  top: calc(var(--soc-safe-top) + 58px);
  height: calc(100dvh - (var(--soc-safe-top) + 58px));
  width: min(352px, 100vw);
}

#topbarDrawerBackdrop.soc-drawer-backdrop {
  top: calc(var(--soc-safe-top) + 58px);
}

.topbar-drawer-head {
  align-items: center;
}

.topbar-drawer-title-group {
  display: grid;
  gap: 4px;
}

.topbar-drawer-title-group-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar-drawer-title-group-compact h3 {
  margin: 0;
  color: #2f3338;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar-drawer-title-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2f3338;
}

.topbar-drawer-title-icon svg {
  width: 18px;
  height: 18px;
}

.topbar-drawer-kicker {
  display: none;
}

.topbar-drawer-close {
  padding: 0;
  border: 0;
  background: transparent;
  color: #42464d;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.topbar-drawer-close:hover,
.topbar-drawer-close:focus-visible {
  color: #111827;
  outline: none;
}

.topbar-drawer-body {
  display: grid;
  gap: 0;
  padding: 14px 16px 18px;
  overflow-x: hidden;
  overflow-y: auto;
}

.topbar-notification-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid #ececec;
}

.topbar-notification-tab {
  min-height: 0;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #8d8f94;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar-notification-tab.is-active,
.topbar-notification-tab[aria-selected="true"] {
  color: #2f3338;
  border-bottom-color: #2f3338;
}

.topbar-notification-tab-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d5d7db;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.topbar-notification-tab.is-active .topbar-notification-tab-badge,
.topbar-notification-tab[aria-selected="true"] .topbar-notification-tab-badge {
  background: #2f3338;
}

.topbar-notification-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 10px;
}

.topbar-notification-unread-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9b9ea4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.topbar-notification-unread-toggle input {
  margin: 0;
  inline-size: 13px;
  block-size: 13px;
  accent-color: #2f3338;
}

.topbar-notification-mark-all {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9b9ea4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.topbar-notification-mark-all:disabled {
  cursor: default;
  opacity: 0.48;
}

.topbar-notification-drawer-content,
.topbar-download-history-list {
  display: grid;
  gap: 14px;
  min-height: 120px;
}

.topbar-notification-feed-group {
  display: grid;
  gap: 8px;
}

.topbar-notification-feed-group-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}

.topbar-notification-feed-group-head::before,
.topbar-notification-feed-group-head::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 40px);
  border-top: 1px solid #ececec;
  transform: translateY(-50%);
}

.topbar-notification-feed-group-head::before {
  left: 0;
}

.topbar-notification-feed-group-head::after {
  right: 0;
}

.topbar-notification-feed-group-title {
  margin: 0;
  padding: 0 12px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  font-size: 12px;
  font-weight: 700;
  color: #c3c6cb;
}

.topbar-notification-feed-list {
  display: grid;
  gap: 0;
}

.topbar-notification-feed-item,
.topbar-download-history-item {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid #efefef;
  border-radius: 0;
  background: transparent;
  text-align: left;
  box-shadow: none;
}

.topbar-notification-feed-item:hover,
.topbar-notification-feed-item:focus-visible,
.topbar-download-history-item:hover,
.topbar-download-history-item:focus-visible {
  background: transparent;
  outline: none;
}

.topbar-notification-feed-item.is-unread .topbar-notification-feed-title {
  color: #2f3338;
}

.topbar-notification-feed-main {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  gap: 5px;
  text-align: left;
  cursor: pointer;
}

.topbar-notification-feed-title-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.topbar-notification-feed-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 999px;
  background: #ff6f61;
  margin-top: 7px;
}

.topbar-notification-feed-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-topbar-bg-2) 88%, transparent);
  color: var(--soc-text-sub);
  font-size: 11px;
  font-weight: 700;
}

.topbar-notification-feed-title,
.topbar-download-history-item strong {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar-download-history-item strong {
  font-size: 14px;
}

.topbar-notification-feed-summary-wrap {
  display: grid;
  gap: 2px;
}

.topbar-notification-feed-summary,
.topbar-download-history-item p {
  margin: 0;
  color: #5c6470;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  letter-spacing: -0.01em;
}

.topbar-notification-feed-time,
.topbar-download-history-time {
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.topbar-notification-feed-delete {
  align-self: start;
  padding: 0 0 0 10px;
  border: 0;
  background: transparent;
  color: #a4aab4;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.topbar-notification-feed-delete:hover,
.topbar-notification-feed-delete:focus-visible {
  color: #2f3338;
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .topbar-notification-feed-delete {
    opacity: 0;
    transition: opacity 140ms ease;
  }

  .topbar-notification-feed-item:hover .topbar-notification-feed-delete,
  .topbar-notification-feed-item:focus-within .topbar-notification-feed-delete {
    opacity: 1;
  }
}

.topbar-download-history-meta {
  color: #a0a4ab;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.topbar-download-history-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar-download-history-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.topbar-download-history-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: #5d6470;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.topbar-download-history-action:disabled {
  color: #c9cdd3;
  cursor: default;
}

.topbar-download-history-note {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 6px;
  background: #f4f4f4;
  color: #b4b8be;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
}

.notification-empty-state {
  min-height: 360px;
  padding-top: 44px;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
}

.notification-empty-state-illustration {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: #f0f0f0;
}

.notification-empty-state-card {
  position: absolute;
  left: 50%;
  width: 54px;
  height: 13px;
  border-radius: 4px;
  background: #ffffff;
  transform: translateX(-50%);
  box-shadow: 0 6px 0 rgba(255, 255, 255, 0.8);
}

.notification-empty-state-card:nth-child(1) {
  top: 34px;
}

.notification-empty-state-card:nth-child(2) {
  top: 50px;
  width: 60px;
  opacity: 0.94;
}

.notification-empty-state-card:nth-child(3) {
  top: 66px;
  width: 48px;
  opacity: 0.88;
}

.notification-empty-state > p:first-of-type {
  margin: 0;
  color: #9ea3aa;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar-profile-drawer-body {
  align-content: start;
}

.topbar-profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 82%, transparent);
  border-radius: 16px;
  background: var(--soc-card-bg);
}

.topbar-profile-drawer-avatar {
  width: 52px;
  height: 52px;
}

.topbar-profile-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.topbar-profile-note {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topbar-profile-actions {
  display: grid;
  gap: 10px;
}

.soc-workspace-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

.soc-workspace-drawer-head > h3 {
  margin: 0;
}

.soc-workspace-drawer-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.soc-workspace-drawer > form {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
  overflow: auto;
}

.soc-announcement-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.soc-announcement-header .title-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.announcement-mode-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.announcement-mode-btn {
  min-height: 28px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font-weight: 600;
}

.announcement-mode-btn.active {
  color: #c2410c;
  border-bottom-color: rgba(234, 88, 12, 0.72);
}

.soc-announcement-card {
  display: grid;
  gap: 8px;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--soc-border) 60%, transparent);
}

.soc-announcement-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.soc-announcement-card-head .incident-title {
  margin: 0;
}

.soc-announcement-important-chip {
  flex-shrink: 0;
  background: color-mix(in srgb, var(--soc-warning) 18%, transparent);
  color: var(--soc-warning);
  border: 1px solid color-mix(in srgb, var(--soc-warning) 40%, var(--soc-border));
}

.soc-announcement-preview {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
}

.soc-announcement-compose-modal-panel {
  width: min(560px, 100vw);
  max-width: 560px;
  min-height: 100dvh;
  max-height: 100dvh;
  margin-left: auto;
  border-radius: 20px 0 0 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#announcementComposerModal {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}

.soc-announcement-compose-modal-panel .modal-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.soc-announcement-compose-modal-panel #announcementForm {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
  overflow: auto;
}

.soc-announcement-form-section {
  display: grid;
  gap: 8px;
}

.soc-announcement-form-section .help,
.soc-announcement-form-section .meta {
  margin: 0;
}

.soc-announcement-form-section .target-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.72);
}

.soc-announcement-compose-status {
  min-height: 18px;
}

.soc-announcement-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.soc-announcement-compose-actions .ds-btn {
  min-width: 92px;
}

@media (max-width: 768px) {
  .soc-announcement-header {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .soc-announcement-header #announcementCreateBtn {
    width: 100%;
  }

  .soc-announcement-header .title-inline .ds-btn {
    width: auto;
    flex: 0 0 auto;
  }

  .soc-announcement-compose-modal-panel {
    width: min(100vw - 16px, 620px);
    min-height: auto;
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  #announcementComposerModal {
    align-items: center;
    justify-content: center;
    padding: 8px;
  }

  .soc-announcement-compose-actions {
    justify-content: stretch;
  }

  .soc-announcement-compose-actions .ds-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .soc-announcement-compose-modal-panel .modal-head,
  .soc-announcement-compose-modal-panel #announcementForm {
    padding-left: 16px;
    padding-right: 16px;
  }
}

#slaPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.soc-sla-header-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--soc-panel-bg);
  border-bottom: 1px solid var(--soc-divider);
  padding: 2px 0 10px;
}

.soc-sla-header-title-wrap {
  flex: 0 0 auto;
  min-width: 0;
}

.soc-sla-header-title-wrap h2 {
  margin: 0;
  white-space: nowrap;
}

#slaSummaryText {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-sla-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.soc-sla-header-btn {
  min-width: 0;
}

.soc-sla-header-btn:disabled {
  opacity: 0.55;
}

.soc-sla-header-btn.is-loading {
  animation: socRefreshSpin 0.9s linear infinite;
}

.soc-sla-preview-scroller {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom) + 16px);
  display: grid;
  gap: 10px;
}

#slaStatusBanner {
  margin: 0;
}

.soc-sla-advanced-settings {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  padding: 8px 10px 10px;
}

.soc-sla-advanced-settings > summary {
  cursor: pointer;
  font-size: var(--soc-text-sm);
  font-weight: 700;
  color: var(--soc-text-sub);
  margin-bottom: 8px;
}

.soc-sla-advanced-settings[open] > summary {
  color: var(--soc-text);
}

.soc-sla-advanced-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-sla-advanced-actions .ds-btn {
  min-width: 0;
}

.employee-item.is-clickable {
  cursor: pointer;
}

.user-actions,
.employee-actions,
.announcement-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-user-site-meta {
  word-break: break-word;
}

.soc-site-code-warning-row {
  margin-top: 6px;
}

.soc-site-code-missing-badge {
  background: color-mix(in srgb, var(--soc-danger, #d11f1f) 12%, transparent);
  color: color-mix(in srgb, var(--soc-danger, #d11f1f) 85%, #4b1111);
  border-color: color-mix(in srgb, var(--soc-danger, #d11f1f) 45%, var(--soc-border));
}

.sla-item {
  cursor: pointer;
}

.sla-item.sla-item-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--soc-border);
  background: var(--soc-card-bg);
  color: var(--soc-text);
}

.sla-item.sla-item-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.sla-item-head,
.manager-item-head,
.employee-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.soc-manager-status-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  min-width: 0;
}

.soc-manage-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#sessionMonitorView .soc-manager-status-filter-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 2px 0 4px;
  scrollbar-width: thin;
}

#sessionMonitorView .soc-manager-status-filter-row::-webkit-scrollbar {
  height: 6px;
}

#sessionMonitorView .soc-manager-status-filter-row::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-border) 70%, transparent);
}

#sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  min-width: 0;
  max-width: 100%;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-8);
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
  white-space: nowrap;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip > span {
  min-width: 0;
  max-width: 100%;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip.is-active,
#sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip[aria-pressed="true"] {
  border-color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
}

#sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip:focus,
#sessionMonitorView .soc-manager-status-filter-row .soc-session-site-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--soc-primary) 26%, transparent);
}

.soc-session-status-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-session-status-card .manager-item-head {
  min-width: 0;
}

.soc-session-status-card .manager-item-head strong {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-session-status-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
}

.soc-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--soc-border);
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 55%, var(--soc-card-bg) 45%);
  color: var(--soc-primary);
  font-weight: 700;
  white-space: nowrap;
}

.soc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
}

.status-idle {
  background: color-mix(in srgb, var(--soc-warning) 18%, var(--soc-card-bg) 82%);
  color: var(--soc-warning);
  border-color: color-mix(in srgb, var(--soc-warning) 45%, var(--soc-border) 55%);
}

.sla-timer {
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  padding: 2px 9px;
  font-size: var(--soc-text-xs);
  font-weight: 700;
}

.sla-normal {
  color: var(--soc-status-received-fg);
}

.sla-warning {
  color: var(--eci2-fg);
}

.sla-breached {
  color: var(--eci34-fg);
  border-color: var(--soc-danger-border-soft);
}

.sla-closed {
  color: var(--soc-status-closed-fg);
}

.sla-overflow {
  border: 1px dashed var(--soc-border);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 9px;
}

.sla-overflow-list {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 6px;
}

.sla-overflow-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sla-overflow-label {
  background: none;
  border: 0;
  color: var(--soc-text-soft-2);
  font-weight: 600;
  text-align: left;
  padding: 0;
}

.sla-overflow-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Modal + BottomSheet */
#soc-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 88;
  pointer-events: none;
}

#soc-overlay-root:empty {
  display: none;
}

#soc-overlay-root > * {
  pointer-events: auto;
}

html.soc-overlay-open,
body.soc-overlay-open {
  overflow: hidden;
}

html.soc-submit-pending,
body.soc-submit-pending {
  overflow: hidden;
}

html.soc-long-task-open,
body.soc-long-task-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--soc-overlay-panel);
}

.modal-overlay.soc-submit-progress-modal {
  z-index: 520;
  background: rgba(8, 13, 28, 0.5);
}

.soc-submit-progress-panel {
  width: min(280px, 92vw);
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 70%, transparent);
  background: color-mix(in srgb, var(--soc-surface) 88%, #000 12%);
  box-shadow: var(--soc-shadow-card);
  overflow: hidden;
}

.soc-submit-progress-spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--soc-primary) 24%, transparent);
  border-top-color: var(--soc-primary);
  animation: soc-submit-progress-spin 0.9s linear infinite;
}

.soc-submit-progress-text {
  margin: 0;
  color: var(--soc-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.modal-overlay.soc-long-task-progress-modal {
  z-index: 525;
  padding: 16px;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
}

.soc-long-task-progress-panel {
  --soc-long-task-fill-start: #ea580c;
  --soc-long-task-fill-end: #fb923c;
  --soc-long-task-stage-bg: rgba(255, 107, 0, 0.12);
  --soc-long-task-stage-text: #c2410c;
  --soc-long-task-track-bg: rgba(255, 107, 0, 0.16);
  --soc-long-task-ring-track: rgba(255, 107, 0, 0.14);
  --soc-long-task-shadow: rgba(255, 107, 0, 0.22);
  --soc-long-task-core-fill: color-mix(in srgb, var(--soc-surface) 92%, #fff 8%);
  --soc-long-task-core-border: rgba(255, 107, 0, 0.18);
  width: min(480px, calc(100vw - 32px));
  max-width: 480px;
  max-height: min(88vh, 640px);
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 72%, rgba(148, 163, 184, 0.28) 28%);
  border-radius: 24px;
  background: color-mix(in srgb, var(--soc-surface) 96%, #fff 4%);
  box-shadow: 0 28px 66px rgba(15, 23, 42, 0.22);
  text-align: center;
}

.soc-long-task-progress-panel[data-status="success"] {
  --soc-long-task-fill-start: #15803d;
  --soc-long-task-fill-end: #4ade80;
  --soc-long-task-stage-bg: rgba(22, 163, 74, 0.12);
  --soc-long-task-stage-text: #15803d;
  --soc-long-task-track-bg: rgba(22, 163, 74, 0.16);
  --soc-long-task-ring-track: rgba(22, 163, 74, 0.12);
  --soc-long-task-shadow: rgba(22, 163, 74, 0.22);
  --soc-long-task-core-fill: rgba(240, 253, 244, 0.98);
  --soc-long-task-core-border: rgba(22, 163, 74, 0.18);
}

.soc-long-task-progress-panel[data-status="error"] {
  --soc-long-task-fill-start: #dc2626;
  --soc-long-task-fill-end: #fb7185;
  --soc-long-task-stage-bg: rgba(220, 38, 38, 0.12);
  --soc-long-task-stage-text: #b91c1c;
  --soc-long-task-track-bg: rgba(220, 38, 38, 0.16);
  --soc-long-task-ring-track: rgba(220, 38, 38, 0.12);
  --soc-long-task-shadow: rgba(220, 38, 38, 0.2);
  --soc-long-task-core-fill: color-mix(in srgb, var(--soc-surface) 92%, #fee2e2 8%);
  --soc-long-task-core-border: rgba(220, 38, 38, 0.18);
}

.soc-long-task-progress-visual {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  position: relative;
  animation: soc-long-task-progress-float 2.8s ease-in-out infinite;
}

.soc-long-task-progress-ring-svg {
  display: block;
  width: 120px;
  height: 120px;
  overflow: visible;
  filter: drop-shadow(0 12px 28px var(--soc-long-task-shadow));
}

.soc-long-task-progress-ring-track-circle {
  fill: none;
  stroke: var(--soc-long-task-ring-track);
  stroke-width: 12;
}

.soc-long-task-progress-ring-arc {
  fill: none;
  stroke: var(--soc-long-task-fill-start);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 94 170;
  stroke-dashoffset: 16;
  transform-box: view-box;
  transform-origin: center center;
  animation: soc-long-task-progress-spin-arc 1.15s linear infinite;
  will-change: transform;
  transition: opacity 180ms ease, transform 220ms ease;
}

.soc-long-task-progress-ring-core-circle {
  fill: var(--soc-long-task-core-fill);
  stroke: var(--soc-long-task-core-border);
  stroke-width: 1.5;
  transition: fill 180ms ease, stroke 180ms ease;
}

.soc-long-task-progress-check {
  fill: none;
  stroke: transparent;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  opacity: 0;
  transition:
    opacity 180ms ease,
    stroke 180ms ease,
    stroke-dashoffset 260ms ease;
}

.soc-long-task-progress-stage {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--soc-long-task-stage-bg);
  color: var(--soc-long-task-stage-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.soc-long-task-progress-title {
  margin: 0;
  color: var(--soc-text);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.45;
}

.soc-long-task-progress-message {
  margin: 0;
  color: var(--soc-text-soft-2);
  font-size: 15px;
  line-height: 1.64;
}

.soc-long-task-progress-step {
  margin: -4px 0 0;
  color: var(--soc-text-soft);
  font-size: 13px;
  line-height: 1.5;
}

.soc-long-task-progress-steps-host {
  width: 100%;
}

.soc-long-task-progress-steps,
.soc-apple-weekly-progress-step-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.soc-progress-step-item {
  display: grid;
  align-items: center;
}

.soc-progress-step-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.soc-progress-step-copy {
  display: grid;
  gap: 2px;
}

.soc-progress-step-copy strong,
.soc-progress-step-copy .meta {
  margin: 0;
}

.soc-progress-step-item.is-complete .soc-progress-step-node {
  background: #dcfce7;
  color: #166534;
}

.soc-progress-step-item.is-error .soc-progress-step-node {
  background: #fee2e2;
  color: #b91c1c;
}

.soc-progress-step-item.is-active .soc-progress-step-node {
  color: transparent;
}

.soc-progress-step-item.is-active .soc-progress-step-node::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 2px solid rgba(249, 115, 22, 0.22);
  border-top-color: #f97316;
  animation: soc-progress-step-spin 0.9s linear infinite;
}

.soc-long-task-progress-steps {
  width: 100%;
  display: grid;
  gap: 8px;
  text-align: left;
}

.soc-long-task-progress-steps .soc-progress-step-item {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 82%, rgba(148, 163, 184, 0.18) 18%);
  background: rgba(255, 255, 255, 0.84);
}

.soc-long-task-progress-steps .soc-progress-step-node {
  width: 28px;
  height: 28px;
  background: rgba(255, 107, 0, 0.1);
  color: #c2410c;
}

.soc-long-task-progress-steps .soc-progress-step-item.is-active {
  border-color: rgba(249, 115, 22, 0.22);
  background: #fffaf5;
}

.soc-long-task-progress-steps .soc-progress-step-copy strong {
  color: var(--soc-text);
  font-size: 13px;
  font-weight: 800;
}

.soc-long-task-progress-steps .soc-progress-step-copy .meta {
  color: var(--soc-text-soft-2);
  font-size: 12px;
  line-height: 1.45;
}

.soc-long-task-progress-track {
  position: relative;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--soc-long-task-track-bg);
}

.soc-long-task-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--soc-long-task-fill-start), var(--soc-long-task-fill-end));
  box-shadow: 0 4px 12px var(--soc-long-task-shadow);
  transition: width 180ms ease;
  overflow: hidden;
}

.soc-long-task-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 35%, rgba(255, 255, 255, 0.48) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: soc-long-task-progress-sheen 1.15s ease-in-out infinite;
}

.soc-long-task-progress-track[data-mode="indeterminate"] .soc-long-task-progress-bar {
  width: 34% !important;
  animation: soc-long-task-progress-indeterminate 1.18s ease-in-out infinite;
}

.soc-long-task-progress-track[data-mode="indeterminate"] .soc-long-task-progress-bar::after {
  display: none;
}

.soc-long-task-progress-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--soc-text-soft);
  font-size: 13px;
  font-weight: 700;
}

.soc-long-task-progress-footer {
  width: 100%;
  display: grid;
  gap: 10px;
}

.soc-long-task-progress-hint {
  margin: 0;
  color: var(--soc-text-soft-2);
  font-size: 13px;
  line-height: 1.6;
}

.soc-long-task-progress-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.soc-long-task-progress-mini {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 526;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 28px));
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 78%, rgba(148, 163, 184, 0.22) 22%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--soc-surface) 94%, #fff 6%);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.18);
  color: var(--soc-text);
}

.soc-long-task-progress-mini-pill {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ea580c;
  box-shadow: 0 0 0 5px rgba(234, 88, 12, 0.18);
}

.soc-long-task-progress-mini[data-status="success"] .soc-long-task-progress-mini-pill {
  background: #16a34a;
  box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.18);
}

.soc-long-task-progress-mini[data-status="error"] .soc-long-task-progress-mini-pill {
  background: #dc2626;
  box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.18);
}

.soc-long-task-progress-mini-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left;
}

.soc-long-task-progress-mini-copy strong,
.soc-long-task-progress-mini-copy span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.soc-long-task-progress-mini-copy strong {
  font-size: 13px;
  font-weight: 800;
}

.soc-long-task-progress-mini-copy span {
  color: var(--soc-text-soft-2);
  font-size: 12px;
  line-height: 1.45;
}

.soc-long-task-progress-panel[data-status="success"] .soc-long-task-progress-ring-arc {
  animation: none;
  opacity: 0;
  transform: rotate(-90deg) scale(0.84);
}

.soc-long-task-progress-panel[data-status="success"] .soc-long-task-progress-bar::after,
.soc-long-task-progress-panel[data-status="error"] .soc-long-task-progress-bar::after {
  display: none;
}

.soc-long-task-progress-panel[data-status="success"] .soc-long-task-progress-check {
  opacity: 1;
  stroke: #16a34a;
  stroke-dashoffset: 0;
}

.soc-long-task-progress-panel[data-status="error"] .soc-long-task-progress-ring-arc {
  animation-duration: 1.45s;
}

@keyframes soc-submit-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes soc-long-task-progress-spin-arc {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(270deg);
  }
}

@keyframes soc-progress-step-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes soc-long-task-progress-sheen {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes soc-long-task-progress-indeterminate {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(60%);
  }
  100% {
    transform: translateX(240%);
  }
}

@keyframes soc-long-task-progress-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@media (max-width: 860px) {
  .modal-overlay.soc-long-task-progress-modal {
    padding: 12px;
  }

  .soc-long-task-progress-panel {
    width: min(100vw - 24px, 480px);
    padding: 22px 20px;
  }

  .soc-long-task-progress-title {
    font-size: 1.1rem;
  }

  .soc-long-task-progress-mini {
    right: 12px;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: none;
  }
}

.modal-panel,
.ds-modal {
  width: min(980px, 96vw);
  max-height: min(92vh, 920px);
  overflow: auto;
  border-radius: var(--soc-radius-card);
  border: 1px solid var(--soc-border);
  background: linear-gradient(170deg, var(--soc-surface), var(--soc-surface-2));
  box-shadow: var(--soc-shadow-card);
}

.modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-3);
}

.incident-detail-modal-panel {
  width: min(1120px, 96vw);
}

.incident-detail-body.case-file {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.case-hero,
.case-facts,
.case-timeline-wrap,
.case-sections {
  position: relative;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-panel-bg);
  padding: 12px;
  box-shadow: var(--soc-shadow-soft);
}

.case-hero {
  overflow: hidden;
  padding-top: 18px;
}

.case-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 12px 12px 0 0;
  background: var(--soc-primary);
}

.case-strip.eci3 {
  background: var(--eci3-border);
}

.case-strip.eci4 {
  background: var(--eci4-border);
}

.case-strip.is-critical {
  background: color-mix(in srgb, var(--soc-primary) 70%, var(--soc-warning));
}

.case-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--soc-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.case-title.critical-text {
  color: var(--eci3-fg);
}

.case-meta-line {
  margin: 8px 0 0;
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-target-line {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--soc-divider);
  background: var(--soc-card-bg);
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.incident-detail-action-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.incident-detail-critical-btn {
  min-height: 32px;
  border-color: color-mix(in srgb, var(--soc-primary) 46%, var(--soc-border)) !important;
  color: var(--soc-primary) !important;
  background: color-mix(in srgb, var(--soc-primary) 8%, transparent) !important;
  white-space: nowrap;
}

.incident-detail-critical-btn.is-critical-on {
  border-color: color-mix(in srgb, var(--soc-warning) 56%, var(--soc-border)) !important;
  color: var(--soc-warning) !important;
  background: color-mix(in srgb, var(--soc-warning) 10%, transparent) !important;
}

.case-chip {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  background: var(--soc-soft-bg);
  color: var(--soc-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 6px 11px;
}

.case-chip-severity.eci-level-2 {
  background: var(--eci2-bg);
  border-color: var(--eci2-border);
  color: var(--eci2-fg);
}

.case-chip-severity.eci-level-3 {
  background: var(--eci3-bg);
  border-color: var(--eci3-border);
  color: var(--eci3-fg);
}

.case-chip-severity.eci-level-4 {
  background: var(--eci4-bg);
  border-color: var(--eci4-border);
  color: var(--eci4-fg);
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.case-fact-item {
  border-radius: 10px;
  border: 1px solid var(--soc-divider);
  background: var(--soc-card-bg);
  padding: 8px 10px;
  display: grid;
  gap: 3px;
}

.case-fact-label {
  margin: 0;
  color: var(--soc-text-sub);
  font-size: 12px;
}

.case-fact-value {
  margin: 0;
  color: var(--soc-text);
  font-size: 13px;
  font-weight: 700;
  word-break: break-word;
}

.case-section-title {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--soc-divider);
  font-size: 14px;
  font-weight: 700;
  color: var(--soc-text);
}

.case-timeline {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 18px;
}

.case-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: var(--soc-divider);
}

.case-timeline-item {
  position: relative;
  display: grid;
  gap: 3px;
}

.case-timeline-dot {
  position: absolute;
  left: -16px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--soc-border-strong);
  background: var(--soc-primary);
}

.case-timeline-dot.is-created,
.case-timeline-dot.is-pending {
  background: var(--soc-warning);
}

.case-timeline-dot.is-action {
  background: var(--soc-warning);
}

.case-timeline-dot.is-closed,
.case-timeline-dot.is-approved {
  background: var(--soc-success);
}

.case-timeline-dot.is-rejected {
  background: var(--soc-danger);
}

.case-timeline-dot.is-instruction {
  background: var(--soc-warning);
}

.case-timeline-dot.is-attachment {
  background: var(--soc-accent);
}

.case-timeline-dot.is-deleted {
  background: var(--soc-danger);
}

.case-timeline-message {
  margin: 0;
  color: var(--soc-text);
  font-size: 13px;
  line-height: 1.45;
}

.case-timeline-time {
  margin: 0;
  color: var(--soc-text-sub);
  font-size: 12px;
}

.case-sections {
  display: grid;
  gap: 8px;
}

.case-accordion {
  border-radius: 10px;
  border: 1px solid var(--soc-divider);
  background: var(--soc-card-bg);
  overflow: hidden;
}

.case-accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--soc-text);
  font-size: 13px;
  font-weight: 700;
}

.case-accordion > summary::-webkit-details-marker {
  display: none;
}

.case-section-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--soc-primary);
  flex: 0 0 auto;
}

.case-accordion-content {
  border-top: 1px solid var(--soc-divider);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.case-accordion-content .desc,
.case-accordion-content .instruction-list,
.case-accordion-content .incident-detail-times {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.case-accordion-content .incident-detail-times {
  color: var(--soc-text-sub);
}

.case-accordion-content .attachment-upload-form {
  margin: 0;
}

.case-sections .attachment-list {
  margin-top: 0;
}

.attachment-list {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}

.attachment-upload-form {
  border: 1px solid var(--soc-border);
  background: var(--soc-card-bg);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}

.attachment-upload-form button {
  margin-top: 8px;
}

.incident-comment-target,
.ticket-comment-target {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--soc-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-preview-panel {
  width: min(920px, 96vw);
}

.attachment-preview-stage {
  margin-top: 10px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  min-height: 300px;
  display: grid;
  place-items: center;
  background: var(--soc-soft-bg);
  overflow: auto;
}

.attachment-preview-image {
  max-width: 100%;
  transform-origin: center center;
}

.soc-bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 360;
  background: var(--soc-overlay-backdrop);
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.soc-bottom-sheet.open {
  opacity: 1;
  pointer-events: auto;
}

.soc-bottom-sheet-panel {
  position: fixed;
  inset: auto 0 0;
  z-index: 361;
  width: 100%;
  max-height: min(82dvh, 700px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
  box-shadow: 0 -12px 30px var(--soc-overlay-soft);
  padding: 12px 12px calc(12px + var(--soc-safe-bottom));
  transform: translateY(105%);
  transition: transform 0.18s ease;
}

.soc-bottom-sheet.open .soc-bottom-sheet-panel {
  transform: translateY(0);
}

.soc-bottom-sheet.dragging .soc-bottom-sheet-panel {
  transition: none;
  transform: translateY(var(--soc-filter-sheet-drag, 0px));
}

#reportBuilderSheet {
  background: transparent;
  pointer-events: none;
}

#reportBuilderSheet.open {
  pointer-events: none;
}

#reportBuilderSheet .soc-bottom-sheet-panel {
  pointer-events: auto;
}

#reportBuilderSheet.open .soc-bottom-sheet-panel {
  transform: translateY(0);
}

#reportBuilderSheet.dragging .soc-bottom-sheet-panel {
  transition: none;
  transform: translateY(var(--soc-report-builder-drag, 0px));
}

html.report-builder-open,
body.report-builder-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.people-create-open,
body.people-create-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.employee-detail-open,
body.employee-detail-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.weekly-detail-open,
body.weekly-detail-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.participants-sheet-open,
body.participants-sheet-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.home-trend-insight-open,
body.home-trend-insight-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.report-builder-open .container.ds-page,
body.report-builder-open .container.ds-page {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

html.people-create-open .container.ds-page,
body.people-create-open .container.ds-page,
html.employee-detail-open .container.ds-page,
body.employee-detail-open .container.ds-page,
html.weekly-detail-open .container.ds-page,
body.weekly-detail-open .container.ds-page {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

html.participants-sheet-open .container.ds-page,
body.participants-sheet-open .container.ds-page {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

html.home-trend-insight-open .container.ds-page,
body.home-trend-insight-open .container.ds-page {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

#reportBuilderSheet .soc-bottom-sheet-panel,
#reportBuilderSheet .soc-report-builder-steps {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#peopleCreateSheet {
  z-index: 350;
  background: transparent;
  pointer-events: none;
}

#peopleCreateSheet.open {
  pointer-events: none;
}

#peopleCreateSheet .soc-bottom-sheet-panel {
  pointer-events: auto;
}

#peopleCreateSheet .soc-bottom-sheet-panel.soc-people-create-panel {
  min-height: min(56dvh, 560px);
  max-height: min(84dvh, 760px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  overflow-x: hidden;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  filter: none;
}

#peopleCreateSheet.open .soc-bottom-sheet-panel.soc-people-create-panel {
  transform: none;
  filter: none;
}

#peopleCreateSheet #peopleEmployeeForm {
  --soc-people-footer-h: 88px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  padding-bottom: calc(var(--soc-people-footer-h) + env(safe-area-inset-bottom, 0px) + var(--soc-tabbar-h, 54px));
}

#peopleCreateSheet #peopleEmployeeForm :is(input, select, textarea, button) {
  width: 100%;
  max-width: 100%;
}

#peopleCreateSheet #peopleEmployeeForm > * {
  min-width: 0;
}

#peopleCreateSheet #peopleEmployeeForm .soc-people-create-actions {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  margin-top: auto;
  z-index: 8;
  transform: none !important;
  filter: none !important;
  background: var(--soc-panel-bg);
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

#peopleCreateSheet #peopleEmployeeForm .soc-people-create-actions .ds-btn {
  width: auto;
  min-width: 104px;
}

@supports not (position: sticky) {
  #peopleCreateSheet #peopleEmployeeForm .soc-people-create-actions {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tabbar-h, 54px));
    margin-top: 0;
    z-index: 370;
  }

  #peopleCreateSheet #peopleEmployeeForm {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px) + var(--soc-tabbar-h, 54px));
  }
}

#employeeDetailSheet {
  z-index: 352;
  background: transparent;
  pointer-events: none;
}

#employeeDetailSheet.open {
  pointer-events: none;
}

#employeeDetailSheet .soc-bottom-sheet-panel {
  pointer-events: auto;
}

#employeeDetailSheet .soc-bottom-sheet-panel.soc-employee-detail-panel {
  min-height: min(60dvh, 620px);
  max-height: min(88dvh, 820px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#employeeDetailSheet .soc-employee-detail-scroll {
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

#employeeDetailSheet .soc-employee-detail-scroll :is(input, select, textarea, button) {
  width: 100%;
  max-width: 100%;
}

.soc-employee-detail-grid {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.soc-employee-detail-stack {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.soc-employee-detail-section {
  display: grid;
  gap: 8px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  padding: 10px;
  width: 100%;
  min-width: 0;
}

.soc-employee-detail-section > h4 {
  margin: 0;
  font-size: 14px;
  color: var(--soc-text);
}

.soc-employee-account-grid .soc-employee-detail-row {
  background: var(--soc-surface-overlay-11);
}

.soc-employee-account-note {
  margin: 0;
  font-size: 12px;
  color: var(--soc-text-sub);
}

.soc-employee-account-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.soc-employee-detail-row {
  display: grid;
  gap: 4px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-surface-overlay-13);
  padding: 9px 10px;
  width: 100%;
  min-width: 0;
}

.soc-employee-detail-row .label {
  font-size: 12px;
  color: var(--soc-text-sub);
}

.soc-employee-detail-row strong {
  font-size: 14px;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.soc-employee-detail-events-block {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.soc-employee-events-toggle {
  width: 100%;
  border: 1px solid var(--soc-border);
  border-radius: 8px;
  background: var(--soc-surface-overlay-11);
  color: var(--soc-text);
  min-height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.soc-employee-events-panel {
  display: grid;
  gap: 6px;
}

.soc-employee-events-panel.hidden {
  display: none;
}

.soc-employee-event-list {
  display: grid;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.soc-employee-event-item {
  display: grid;
  gap: 2px;
  border: 1px solid var(--soc-border);
  border-radius: 8px;
  background: var(--soc-surface-overlay-11);
  padding: 8px 10px;
}

.soc-employee-detail-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  position: sticky;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid var(--soc-divider);
  background: var(--soc-panel-bg);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}

.soc-employee-detail-actions .ds-btn {
  width: auto;
  min-width: 104px;
}

@media (max-width: 900px) {
  .soc-people-pane-summary {
    padding: 12px 14px;
  }

  .soc-people-detail-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  #peopleCreateSheet .soc-people-create-actions,
  #employeeDetailSheet .soc-employee-detail-actions {
    bottom: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

#weeklyDetailSheet {
  z-index: 354;
  background: transparent;
  pointer-events: none;
}

#weeklyDetailSheet.open {
  pointer-events: none;
}

#weeklyDetailSheet .soc-bottom-sheet-panel {
  pointer-events: auto;
}

#weeklyDetailSheet .soc-bottom-sheet-panel.soc-weekly-detail-panel {
  min-height: min(58dvh, 620px);
  max-height: min(86dvh, 820px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

#weeklyDetailSheet .soc-weekly-detail-scroll {
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 12px);
  display: grid;
  gap: 8px;
}

.soc-weekly-detail-section {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-card-bg);
  padding: 10px;
  display: grid;
  gap: 7px;
}

.soc-weekly-detail-section h4 {
  margin: 0;
  font-size: 14px;
}

.soc-weekly-detail-summary {
  display: grid;
  gap: 6px;
}

.soc-weekly-detail-summary p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--soc-text);
}

.soc-weekly-detail-summary-text {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.soc-weekly-kpi-list {
  display: grid;
  gap: 6px;
}

.soc-weekly-detail-top-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.soc-weekly-detail-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--soc-border);
  border-radius: 8px;
  background: var(--soc-surface-overlay-11);
  padding: 8px 10px;
}

.soc-weekly-detail-top-row > span {
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}

#participantsSheet .soc-bottom-sheet-panel.soc-participants-sheet-panel {
  min-height: min(58dvh, 620px);
  max-height: min(84dvh, 820px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.soc-home-trend-insight-panel {
  min-height: min(64dvh, 700px);
  max-height: min(84dvh, 860px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  overflow-x: hidden;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.soc-home-trend-insight-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.soc-home-trend-insight-summary .meta {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-home-trend-insight-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 8px;
  padding-right: 2px;
  padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 12px);
}

.soc-home-trend-insight-section {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 10px 12px;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.soc-home-trend-insight-section h4 {
  margin: 0;
  font-size: 13px;
  color: var(--soc-text);
  position: relative;
  padding-left: 8px;
}

.soc-home-trend-insight-section h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 999px;
  background: var(--soc-primary);
}

.soc-home-trend-insight-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-home-trend-insight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-surface-overlay-11);
  padding: 7px 9px;
}

.soc-home-trend-insight-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.soc-home-trend-insight-row .meta {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--soc-text-sub);
  font-size: 12px;
}

.soc-home-trend-insight-footer {
  position: sticky;
  bottom: 0;
  padding-top: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--soc-panel-bg) 0%, transparent), var(--soc-panel-bg));
}

#homeTrendInsightPeak {
  margin: 0;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.soc-participants-sheet-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.soc-participants-sheet-summary .meta {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-participants-sheet-summary .soc-block-value {
  margin: 0;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.1;
}

.soc-participants-top-card {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-soft);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-participants-top-label {
  margin: 0;
  color: var(--soc-text-sub);
  font-size: 12px;
  font-weight: 700;
}

.soc-participants-top-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.soc-participants-top-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-participants-role-chip {
  flex: 0 0 auto;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-10);
  padding: 3px 8px;
  font-size: 11px;
  color: var(--soc-text-sub);
  white-space: nowrap;
}

.soc-participants-points {
  margin: 0;
  color: var(--soc-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.soc-participants-rank-list {
  min-height: 0;
  display: grid;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 12px);
}

.soc-participants-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-panel-bg);
  padding: 9px 10px;
  min-width: 0;
}

.soc-participants-rank-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.soc-participants-rank-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.soc-participants-rank-no {
  flex: 0 0 auto;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-8);
  color: var(--soc-text-sub);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  white-space: nowrap;
}

.soc-participants-rank-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.soc-participants-rank-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.soc-participants-stat-chip {
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-9);
  color: var(--soc-text-sub);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}

.soc-participants-stat-chip.is-primary {
  border-color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary);
}

.soc-participants-stat-chip.is-neutral {
  background: var(--soc-surface-overlay-13);
}

.soc-participants-rank-points {
  flex: 0 0 auto;
  color: var(--soc-primary);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  #reportBuilderSheet.mode-drawer {
    align-items: stretch;
    justify-content: flex-end;
    background: transparent;
  }

  #reportBuilderSheet.mode-drawer .soc-bottom-sheet-panel.soc-report-builder-panel {
    inset: 0 0 0 auto;
    width: min(420px, 92vw);
    height: 100dvh;
    max-height: 100dvh;
    border-top-right-radius: 0;
    border-bottom-left-radius: 16px;
    border-left: 1px solid var(--soc-border);
    border-right: 0;
    border-top: 0;
    padding: 12px 12px 14px;
    transform: translateX(106%);
    box-shadow: -14px 0 30px var(--soc-overlay-soft);
  }

  #reportBuilderSheet.mode-drawer.open .soc-bottom-sheet-panel.soc-report-builder-panel {
    transform: translateX(0);
  }

  #reportBuilderSheet.mode-drawer .soc-sheet-handle {
    display: none;
  }

  #reportBuilderSheet.mode-drawer .soc-report-builder-steps {
    max-height: calc(100dvh - 190px);
  }

  #peopleCreateSheet .soc-bottom-sheet-panel.soc-people-create-panel {
    inset: auto 16px 16px auto;
    width: min(520px, 42vw);
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    border: 1px solid var(--soc-border);
    padding-bottom: 16px;
    min-height: min(62dvh, 640px);
    max-height: min(88dvh, 760px);
    transform: translateY(110%);
  }

  #peopleCreateSheet.open .soc-bottom-sheet-panel.soc-people-create-panel {
    transform: translateY(0);
  }

  #employeeDetailSheet .soc-bottom-sheet-panel.soc-employee-detail-panel {
    inset: auto 16px 16px auto;
    width: min(560px, 44vw);
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    border: 1px solid var(--soc-border);
    min-height: min(66dvh, 700px);
    max-height: min(90dvh, 820px);
    padding-bottom: 16px;
    transform: translateY(110%);
  }

  #employeeDetailSheet.open .soc-bottom-sheet-panel.soc-employee-detail-panel {
    transform: translateY(0);
  }

  #reportParticipantPickerSheet .soc-bottom-sheet-panel.soc-report-participant-panel {
    inset: auto 16px 16px auto;
    width: min(620px, 54vw);
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    border: 1px solid var(--soc-border);
    min-height: min(68dvh, 760px);
    max-height: min(90dvh, 900px);
    padding-bottom: 16px;
    transform: translateY(110%);
  }

  #reportParticipantPickerSheet.open .soc-bottom-sheet-panel.soc-report-participant-panel {
    transform: translateY(0);
  }

  #weeklyDetailSheet .soc-bottom-sheet-panel.soc-weekly-detail-panel {
    inset: auto 16px 16px auto;
    width: min(640px, 56vw);
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    border: 1px solid var(--soc-border);
    min-height: min(66dvh, 700px);
    max-height: min(90dvh, 860px);
    padding-bottom: 16px;
    transform: translateY(110%);
  }

  #weeklyDetailSheet.open .soc-bottom-sheet-panel.soc-weekly-detail-panel {
    transform: translateY(0);
  }

  #participantsSheet .soc-bottom-sheet-panel.soc-participants-sheet-panel {
    inset: auto 16px 16px auto;
    width: min(560px, 46vw);
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    border: 1px solid var(--soc-border);
    min-height: min(66dvh, 700px);
    max-height: min(90dvh, 840px);
    padding-bottom: 16px;
    transform: translateY(110%);
  }

  #participantsSheet.open .soc-bottom-sheet-panel.soc-participants-sheet-panel {
    transform: translateY(0);
  }

  #homeTrendInsightSheet .soc-bottom-sheet-panel.soc-home-trend-insight-panel {
    inset: auto 16px 16px auto;
    width: min(620px, 52vw);
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    border: 1px solid var(--soc-border);
    min-height: min(66dvh, 720px);
    max-height: min(90dvh, 860px);
    padding-bottom: 16px;
    transform: translateY(110%);
  }

  #homeTrendInsightSheet.open .soc-bottom-sheet-panel.soc-home-trend-insight-panel {
    transform: translateY(0);
  }
}

html.filter-sheet-open,
body.filter-sheet-open {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

html.filter-sheet-open .container.ds-page,
body.filter-sheet-open .container.ds-page {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

#filterSheet {
  z-index: 358;
}

#filterSheet .soc-bottom-sheet-panel.soc-alerts-filter-panel {
  width: min(900px, 100vw);
  min-height: 0;
  max-height: 75dvh;
  height: auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  touch-action: pan-y;
}

#filterSheet.mode-range .soc-bottom-sheet-panel.soc-alerts-filter-panel {
  max-height: 75dvh;
}

#filterSheet.alerts-tab-participant .soc-bottom-sheet-panel.soc-alerts-filter-panel {
  min-height: 65dvh;
}

.soc-alerts-builder-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.soc-alerts-builder-tabs .chip,
.soc-alerts-builder-tabs .soc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  line-height: 30px;
  padding: 0 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-alerts-builder-scroller {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 10px;
  padding: 2px 0 calc(env(safe-area-inset-bottom) + 8px);
}

.soc-alerts-builder-panel {
  border: 1px solid var(--soc-divider);
  border-radius: 12px;
  background: var(--soc-card-bg);
  padding: 10px;
  min-width: 0;
}

#filterSheet .soc-alerts-builder-panel .soc-chip-group {
  align-items: center;
}

#filterSheet .soc-alerts-builder-panel .chip,
#filterSheet .soc-alerts-builder-panel .soc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  line-height: 30px;
  padding: 0 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#filterSheet .date-filter-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

#filterSheet .date-filter-group .date-filter-btn,
#filterSheet .date-filter-group .date-filter-btn.soc-chip {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0 10px;
  line-height: 30px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#filterSheet .date-filter-group .date-filter-btn.active,
#filterSheet .soc-alerts-builder-tabs .chip.is-active,
#filterSheet .soc-alerts-builder-panel .chip.is-active,
#filterSheet .soc-alerts-builder-tabs .soc-chip.is-active,
#filterSheet .soc-alerts-builder-panel .soc-chip.is-active,
#filterSheet .date-filter-group .date-filter-btn.soc-chip.active {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0 10px;
  line-height: 30px;
}

.soc-realtime-active-filters {
  align-items: center;
}

.soc-realtime-active-filters .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  line-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-realtime-active-filters .chip.is-active {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  line-height: 30px;
  padding: 0 10px;
}

#filterSheet .soc-sheet-range {
  margin-top: 2px;
}

.soc-alerts-participant-pickers {
  display: grid;
  gap: 8px;
}

#filterSheet .soc-sheet-actions {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid var(--soc-divider);
  background: var(--soc-panel-bg);
  position: sticky;
  bottom: 0;
}

#participantFilterSheet {
  z-index: 359;
}

#participantFilterSheet .soc-bottom-sheet-panel.soc-participant-filter-panel {
  width: min(560px, 100vw);
  min-height: min(65dvh, 620px);
  max-height: 80dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
}

.soc-participant-filter-list {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 6px;
  padding: 2px 0 6px;
}

.soc-participant-filter-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-panel-bg);
  color: var(--soc-text);
  padding: 10px 12px;
  min-width: 0;
  text-align: left;
}

.soc-participant-filter-row.is-active {
  border-color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
}

.soc-participant-filter-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.soc-participant-filter-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.soc-participant-filter-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--soc-text-sub);
  font-size: 11px;
}

.soc-participant-filter-state {
  flex: 0 0 auto;
  border-radius: var(--soc-radius-pill);
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-8);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.soc-participant-filter-row.is-active .soc-participant-filter-state {
  border-color: var(--soc-primary);
  color: var(--soc-primary);
  background: var(--soc-primary-soft-bg);
}

html.notification-filter-open,
body.notification-filter-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

.soc-sheet-handle {
  position: relative;
  width: 100%;
  min-height: 36px;
  margin: 0 auto 6px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.soc-sheet-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--soc-handle-bg);
  transform: translate(-50%, -50%);
}

html.notification-filter-open .container.ds-page,
body.notification-filter-open .container.ds-page {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

html.notification-filter-open #notificationPanel,
body.notification-filter-open #notificationPanel {
  overscroll-behavior: contain;
}

.soc-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.soc-sheet-head .title-inline h3 {
  margin: 0;
}

.soc-sheet-grid {
  display: grid;
  gap: 12px;
}

.soc-sheet-section {
  display: grid;
  gap: 8px;
}

.soc-sheet-label {
  font-size: var(--soc-text-xs);
  color: var(--soc-text-soft);
  font-weight: 700;
}

.soc-sheet-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

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

.soc-check-grid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--soc-text-soft-8);
  font-size: 12px;
}

.soc-sheet-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.field-invalid {
  border-color: var(--soc-field-invalid-border) !important;
  box-shadow: 0 0 0 2px var(--soc-field-invalid-ring) !important;
}

.field-shake {
  animation: socFieldShake 0.24s ease;
}

@keyframes socFieldShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.validation-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  min-width: 220px;
  max-width: min(90vw, 520px);
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--soc-toast-border);
  background: var(--soc-toast-bg);
  color: var(--soc-on-danger);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
}

.validation-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.soc-toast {
  --soc-toast-accent: var(--soc-primary);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--soc-toast-center-border, rgba(255, 255, 255, 0.12));
  background: var(--soc-toast-center-bg, rgba(15, 23, 42, 0.92));
  color: var(--soc-toast-center-fg, #fff);
  box-shadow: var(--soc-toast-center-shadow, 0 12px 30px rgba(0, 0, 0, 0.25));
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.soc-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--soc-toast-accent);
}

.soc-toast.is-show {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 2px));
}

.soc-toast.is-success {
  --soc-toast-accent: var(--soc-success);
}

.soc-toast.is-info {
  --soc-toast-accent: var(--soc-primary);
}

.soc-toast.is-warn {
  --soc-toast-accent: var(--soc-warning);
}

.soc-toast.is-error {
  --soc-toast-accent: var(--soc-danger);
}

/* Toast */
.global-notice-host {
  position: fixed;
  top: calc(var(--soc-safe-top) + 72px);
  right: 12px;
  z-index: 91;
  display: grid;
  gap: 8px;
}

.global-notice {
  width: min(350px, 92vw);
  border-radius: 10px;
  border: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
  padding: 10px 12px;
  box-shadow: var(--soc-shadow-card);
}

/* Light readability hardening (legacy styles.css overrides) */
#dashboardPanel,
#excelPanel,
#notificationSettingsPanel,
#typeReportsPanel,
#reportsHubView {
  color: var(--soc-text);
}

#dashboardPanel .incident-card {
  background: var(--soc-card-bg);
  border-color: var(--soc-border);
}

#dashboardPanel .incident-title,
#dashboardPanel .incident-type,
#dashboardPanel .incident-created-at,
#dashboardPanel .incident-more-menu-head,
#dashboardPanel .incident-menu-status-wrap .status-label,
#excelPanel,
#notificationSettingsPanel,
#typeReportsPanel,
#reportsHubView {
  color: var(--soc-text);
}

#dashboardPanel .help,
#excelPanel .help,
#notificationSettingsPanel .help,
#hqReminderPanel .help,
#typeReportsPanel .help,
#reportsHubView .help,
#excelPanel .meta,
#notificationSettingsPanel .meta,
#hqReminderPanel .meta,
#typeReportsPanel .meta,
#reportsHubView .meta {
  color: var(--soc-text-sub);
}

#dashboardPanel .incident-more-btn {
  border: 1px solid var(--soc-border) !important;
  background: transparent !important;
  color: var(--soc-text) !important;
}

#dashboardPanel .incident-more-btn:hover,
#dashboardPanel .incident-more-btn:focus-visible {
  background: var(--soc-primary-soft-bg) !important;
}

#dashboardPanel .incident-more-menu,
#dashboardPanel .instruction-list {
  background: var(--soc-panel-bg);
  border-color: var(--soc-border);
}

#excelPanel #excelAppleWrap,
#excelPanel .excel-field,
#excelPanel .soc-table-wrap,
#excelPanel .mobile-excel-config,
#notificationSettingsPanel .notification-check,
#hqReminderPanel .notification-check,
#typeReportsPanel #typeFilterButtons,
#typeReportsPanel .site-filter-btn {
  background: var(--soc-panel-bg);
  border-color: var(--soc-border);
  color: var(--soc-text);
}

[data-theme="light"] #dashboardPanel .incident-card,
[data-theme="light"] #dashboardPanel .incident-more-menu,
[data-theme="light"] #dashboardPanel .instruction-list,
[data-theme="light"] #excelPanel #excelAppleWrap,
[data-theme="light"] #excelPanel .excel-field,
[data-theme="light"] #notificationSettingsPanel .notification-check,
[data-theme="light"] #hqReminderPanel .notification-check,
[data-theme="light"] #typeReportsPanel #typeFilterButtons,
[data-theme="light"] #typeReportsPanel .site-filter-btn {
  background: var(--soc-card-bg) !important;
  color: var(--soc-text) !important;
  border-color: var(--soc-border) !important;
}

.soc-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(920px, calc(100vw - 64px));
  margin: 0 auto 28px;
  padding: 24px 28px 28px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 92%, white);
  border-radius: 22px;
  background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 92%, white);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.05);
}

.soc-settings-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.soc-settings-page-header .soc-page-header-main {
  display: grid;
  gap: 4px;
}

.soc-settings-page-header .meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.soc-settings-overview-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 14px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  overflow: hidden;
}

.soc-settings-overview-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--soc-primary);
}

.soc-settings-overview-copy {
  display: grid;
  gap: 6px;
}

.soc-settings-overview-copy strong {
  font-size: 15px;
  line-height: 1.4;
}

.soc-settings-overview-copy .meta {
  margin: 0;
  display: none;
}

.soc-settings-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.soc-settings-summary-chip {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-settings-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, 0.78fr);
  gap: 12px;
  align-items: start;
}

.soc-settings-content-grid--wide {
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
}

.soc-settings-side-card {
  min-height: 100%;
}

.soc-settings-guide-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
}

#themePanel .soc-theme-choice-grid {
  display: grid;
  gap: 10px;
}

#themePanel .soc-theme-choice-grid .ds-btn {
  justify-content: flex-start;
  min-height: 44px;
}

#themePanel .soc-settings-content-grid,
#hqReminderPanel .soc-settings-content-grid {
  grid-template-columns: minmax(0, 1fr);
}

#themePanel .soc-settings-side-card,
#hqReminderPanel .soc-settings-side-card {
  display: none;
}

#themePanel .soc-workspace-card-head .meta,
#hqReminderPanel .soc-workspace-card-head .meta,
#notificationPanel .soc-workspace-card-head .meta {
  display: none;
}

#themePanel .soc-theme-preview-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary-soft-bg) 26%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)));
}

#themePanel .soc-theme-preview-top,
#themePanel .soc-theme-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#themePanel .soc-theme-preview-label {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
}

#hqReminderPanel .hq-reminder-form {
  display: grid;
  gap: 12px;
}

#hqReminderPanel .soc-workspace-card-head {
  margin-bottom: 12px;
}

#hqReminderPanel .soc-workspace-card-head .soc-workspace-summary-pill {
  flex: 0 0 auto;
}

#hqReminderPanel .soc-hq-reminder-toggle-row {
  justify-content: flex-start;
  gap: 10px;
  font-weight: 600;
}

#hqReminderPanel .soc-system-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#hqReminderPanel .hq-reminder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#hqReminderPanel .hq-reminder-field {
  display: grid;
  gap: 6px;
  font-size: var(--soc-text-xs);
  color: var(--soc-text-sub);
}

#hqReminderPanel .hq-reminder-field .ds-input {
  width: 100%;
}

#hqReminderPanel .hq-reminder-targets {
  display: grid;
  gap: 8px;
}

#hqReminderPanel .soc-hq-reminder-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#hqReminderPanel .soc-hq-reminder-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

#hqReminderPanel .soc-hq-reminder-footer .help {
  margin: 0;
  min-width: 0;
}

#themePanel .soc-system-section-card,
#hqReminderPanel .soc-system-section-card,
#announcementPanel .soc-system-list-card,
#notificationPanel .soc-system-list-card {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 14px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  padding: 14px;
}

.soc-system-section-flat {
  display: grid;
  gap: 12px;
}

#hqReminderPanel .soc-system-guide-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--soc-text-sub);
  font-size: var(--soc-text-xs);
}

#announcementPanel .soc-system-summary-strip,
#notificationPanel .soc-system-summary-strip,
#hqReminderPanel .soc-system-summary-strip {
  margin: 6px 0 12px;
}

#announcementPanel .soc-system-list-card,
#notificationPanel .soc-system-list-card {
  display: grid;
  gap: 10px;
}

#notificationPanel .soc-notification-settings-card,
#notificationPanel .soc-notification-timeline-card {
  min-height: 100%;
}

#notificationPanel .soc-notification-settings-form {
  display: grid;
  gap: 14px;
}

#notificationPanel .soc-notification-toggle-grid {
  display: grid;
  gap: 10px;
}

#notificationPanel .soc-notification-check-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#notificationPanel .soc-notification-check-card span {
  display: grid;
  gap: 4px;
}

#notificationPanel .soc-notification-check-card strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 14px;
}

#notificationPanel .soc-notification-check-card small {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 1.45;
}

#notificationPanel .soc-notification-permission-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#notificationPanel .soc-notification-permission-copy {
  display: grid;
  gap: 6px;
}

#notificationPanel .soc-notification-permission-copy .meta,
#notificationPanel .soc-notification-permission-copy .help {
  margin: 0;
}

#announcementPanel .soc-announcement-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 16px;
  align-items: start;
}

#announcementPanel .soc-announcement-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#announcementPanel .soc-announcement-header-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

#announcementPanel .soc-announcement-list-card,
#announcementPanel .soc-announcement-detail-card {
  min-height: 100%;
}

#announcementPanel .soc-announcement-list-wrap {
  display: grid;
  gap: 10px;
}

#announcementPanel .soc-announcement-card {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

#announcementPanel .soc-announcement-card.is-selected {
  border-color: rgba(255, 132, 0, 0.35);
  background: rgba(255, 132, 0, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 132, 0, 0.12);
}

#announcementPanel .soc-announcement-card:hover {
  border-color: rgba(148, 163, 184, 0.35);
}

#announcementPanel .soc-announcement-card-head .incident-title {
  margin: 0;
}

#announcementPanel .soc-announcement-card-meta,
#announcementPanel .soc-announcement-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--soc-text-sub);
  font-size: 12px;
}

#announcementPanel .soc-announcement-detail-card {
  position: sticky;
  top: 16px;
  gap: 12px;
}

#announcementPanel .soc-announcement-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#announcementPanel .soc-announcement-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#announcementPanel .soc-announcement-detail-head h3 {
  margin: 0;
}

#announcementPanel .soc-announcement-detail-body {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  padding: 14px;
  min-height: 180px;
}

#announcementPanel .soc-announcement-detail-body .desc {
  margin: 0;
  line-height: 1.65;
}

#announcementPanel #announcementListWrap {
  margin-top: 12px;
}

#notificationPanel #notificationTimelineList {
  min-height: 260px;
}

#notificationPanel .notification-filter-panel {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  z-index: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
  box-shadow: none;
  padding: 12px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  max-height: none;
  overflow: visible;
}

#notificationPanel .notification-timeline-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

#notificationPanel .notification-timeline-toolbar label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--soc-text-sub);
}

#notificationPanel .notification-timeline-toolbar select,
#notificationPanel .notification-timeline-toolbar input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 900px) {
  .soc-settings-page-header,
  .soc-settings-overview-card,
  #announcementPanel .soc-announcement-header {
    flex-direction: column;
    align-items: stretch;
  }

  .soc-settings-badge-row,
  #announcementPanel .soc-announcement-header-actions {
    justify-content: flex-start;
    justify-items: start;
  }

  .soc-settings-content-grid,
  .soc-settings-content-grid--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  #hqReminderPanel .hq-reminder-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #hqReminderPanel .soc-hq-reminder-target-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #hqReminderPanel .soc-hq-reminder-footer {
    align-items: stretch;
    flex-direction: column;
  }

  #announcementPanel .soc-announcement-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  #announcementPanel .soc-announcement-detail-card {
    position: static;
  }

  #notificationPanel .notification-timeline-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

.global-notice.clickable {
  cursor: pointer;
}

.global-notice.emergency {
  border-color: var(--eci34-border);
}

.global-notice-title {
  color: var(--soc-text-accent-soft);
  font-size: var(--soc-text-sm);
  font-weight: 800;
}

.global-notice-body {
  margin-top: 2px;
  color: var(--soc-text-soft-3);
  font-size: var(--soc-text-sm);
}

/* ARLS notices workspace clone */
#announcementPanel {
  display: grid;
  gap: 18px;
  --notices-list-width: min(1180px, calc(100% - 40px));
  --notices-doc-width: min(740px, calc(100% - 96px));
}

#announcementPanel .soc-notices-workspace {
  display: grid;
  gap: 18px;
  align-content: start;
  justify-content: stretch;
  grid-auto-rows: max-content;
}

#announcementPanel .workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-inline: 0;
  border-bottom: 1px solid #d0d5dd;
  padding-bottom: 8px;
  align-self: start;
}

#announcementPanel .workspace-head-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#announcementPanel .workspace-head-main h2 {
  margin: 0;
}

#announcementPanel .workspace-head-main .muted {
  margin: 0;
  font-size: 13px;
}

#announcementPanel .workspace-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#announcementPanel .workspace-head-actions .btn {
  min-height: 40px;
}

#announcementPanel .workspace-tabbar-row {
  width: var(--notices-list-width);
  margin-inline: auto;
}

#announcementPanel .workspace-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  overflow: visible;
  border-bottom: 1px solid #d0d5dd;
}

#announcementPanel .workspace-tab,
#announcementPanel .btn,
#noticesPollModal .btn,
#noticesLinkModal .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(208, 213, 221, 1);
  background: #ffffff;
  color: var(--soc-text);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

#announcementPanel .btn:hover,
#announcementPanel .btn:focus-visible,
#noticesPollModal .btn:hover,
#noticesPollModal .btn:focus-visible,
#noticesLinkModal .btn:hover,
#noticesLinkModal .btn:focus-visible {
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(208, 213, 221, 1);
  color: var(--soc-text);
  box-shadow: none;
}

#announcementPanel .workspace-tab {
  position: relative;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 36px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--soc-text-sub);
  margin-bottom: -1px;
  white-space: nowrap;
}

#announcementPanel .workspace-tab:hover,
#announcementPanel .workspace-tab:focus-visible {
  background: transparent;
  color: var(--soc-text);
  border-color: transparent;
  box-shadow: none;
}

#announcementPanel .workspace-tab.active {
  color: var(--soc-text);
  border-bottom-color: #ff6b00;
  background: transparent;
}

#announcementPanel .btn-primary,
#noticesPollModal .btn-primary,
#noticesLinkModal .btn-primary {
  border-color: #ff6b00;
  background: #ff6b00;
  color: #ffffff;
  box-shadow: none;
}

#announcementPanel .btn-secondary,
#noticesPollModal .btn-secondary,
#noticesLinkModal .btn-secondary {
  background: #ffffff;
  color: var(--soc-text);
  border-color: rgba(208, 213, 221, 1);
}

#announcementPanel .btn-ghost,
#noticesPollModal .btn-ghost,
#noticesLinkModal .btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--soc-text-sub);
  box-shadow: none;
}

#announcementPanel .btn-ghost:hover,
#announcementPanel .btn-ghost:focus-visible,
#noticesPollModal .btn-ghost:hover,
#noticesPollModal .btn-ghost:focus-visible,
#noticesLinkModal .btn-ghost:hover,
#noticesLinkModal .btn-ghost:focus-visible {
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(208, 213, 221, 1);
  color: var(--soc-text);
}

#announcementPanel #noticesCreateBtn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 6px;
}

#announcementPanel #noticesPublishBtn {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
}

#announcementPanel .muted,
#noticesPollModal .muted,
#noticesLinkModal .muted {
  margin: 0;
  color: var(--soc-text-sub);
  font-size: 14px;
  line-height: 1.55;
}

#announcementPanel .status-pill,
#noticesPollModal .status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.96);
  color: var(--soc-text-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#announcementPanel .status-pill-neutral,
#noticesPollModal .status-pill-neutral {
  color: #475569;
}

#announcementPanel .input-field,
#noticesPollModal .input-field,
#noticesLinkModal .input-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#announcementPanel .input-field > span,
#noticesPollModal .input-field > span,
#noticesLinkModal .input-field > span {
  color: var(--soc-text-sub);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

#announcementPanel .input-field input,
#announcementPanel .input-field select,
#announcementPanel .input-field textarea,
#noticesPollModal .input-field input,
#noticesPollModal .input-field select,
#noticesPollModal .input-field textarea,
#noticesLinkModal .input-field input,
#noticesLinkModal .input-field select,
#noticesLinkModal .input-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(248, 250, 252, 0.86);
  color: var(--soc-text);
}

#announcementPanel .input-field textarea,
#noticesPollModal .input-field textarea,
#noticesLinkModal .input-field textarea {
  min-height: 140px;
  padding: 14px;
  resize: vertical;
}

#announcementPanel .notices-workspace-head {
  width: 100%;
  margin-inline: 0;
}

.notices-toolbar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 28px;
  width: var(--notices-list-width);
  margin-inline: auto;
  margin-bottom: 12px;
  align-self: start;
}

.notices-panel {
  display: grid;
}

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

.notices-search-form {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
}

.notices-search-input-wrap {
  width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.2);
  transition:
    width 180ms ease,
    opacity 150ms ease,
    transform 180ms ease;
}

.notices-search-form.is-expanded .notices-search-input-wrap {
  width: min(320px, 28vw);
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.notices-search-form input {
  width: 100%;
  min-width: 0;
  padding: 0 0 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-primary, #101828);
  font-weight: 500;
}

.notices-search-form input::placeholder {
  color: rgba(102, 112, 133, 0.9);
}

.notices-search-form input:focus {
  outline: none;
  box-shadow: none;
}

.notices-search-form input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.notices-search-toggle {
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--soc-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notices-search-toggle:hover,
.notices-search-toggle:focus-visible {
  background: rgba(148, 163, 184, 0.1);
}

.notices-search-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notices-search-toggle-icon svg {
  width: 20px;
  height: 20px;
}

.notices-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.notices-section-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.12;
}

.notices-list-panel {
  display: grid;
  width: var(--notices-list-width);
  margin-inline: auto;
  padding: 24px 32px 14px;
  justify-items: stretch;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
  align-self: start;
}

.notices-list-rows {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: none;
  display: grid;
  gap: 0;
}

.notices-list-item {
  padding: 0 !important;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
}

.notices-list-button {
  width: 100%;
  margin-inline: 0;
  border: none;
  background: transparent;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 108px;
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  text-align: left;
  cursor: pointer;
}

.notices-list-button:hover,
.notices-list-button:focus-visible {
  background: transparent;
}

.notices-list-category,
.notices-list-date {
  color: var(--ui-text-secondary, #667085);
  font-size: 13px;
  font-weight: 700;
}

.notices-list-date {
  text-align: right;
  white-space: nowrap;
}

.notices-list-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.notices-list-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.notices-list-title {
  font-size: 17px;
  line-height: 1.42;
  letter-spacing: -0.03em;
  color: var(--ui-text-primary, #101828);
  font-weight: 700;
}

.notice-meta-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.96);
  color: var(--soc-text-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.notice-meta-tag-neutral {
  color: #475569;
}

.notice-meta-tag-accent {
  border-color: #f97316;
  background: #f97316;
  color: #fff;
}

.notices-list-title-row .notice-meta-tag-accent {
  min-width: 22px;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
}

.notices-detail-panel,
.notices-compose-panel {
  display: grid;
  gap: 0;
  padding: 24px 0 12px;
}

.notices-compose-panel {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 32px 24px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.notices-detail-body {
  display: grid;
  gap: 12px;
  min-height: 240px;
}

/* ARLS notices final refinement parity */
#announcementPanel {
  gap: 14px;
  --notices-list-width: 100%;
  --notices-doc-width: min(860px, 100%);
}

#announcementPanel .workspace-head-main .muted {
  display: none;
}

#announcementPanel .workspace-head-actions .btn.btn-primary {
  min-height: 40px;
  padding-inline: 16px;
}

#announcementPanel .notices-toolbar-row {
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
}

#announcementPanel #noticesCategoryTabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

#announcementPanel #noticesCategoryTabs .workspace-tab {
  min-height: 36px;
  height: 36px;
  padding: 0 14px 10px;
  margin: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#announcementPanel #noticesCategoryTabs .workspace-tab:hover,
#announcementPanel #noticesCategoryTabs .workspace-tab:focus-visible {
  color: var(--ui-text-primary, var(--soc-text));
  background: transparent;
}

#announcementPanel #noticesCategoryTabs .workspace-tab.active {
  color: var(--ui-text-primary, var(--soc-text));
  border-bottom-color: var(--ui-accent, var(--soc-accent));
}

#announcementPanel .notices-search-form {
  align-items: center;
  gap: 8px;
}

#announcementPanel .notices-search-input-wrap {
  border-bottom-color: var(--ui-border-subtle, var(--soc-border));
}

#announcementPanel .notices-search-form.is-expanded .notices-search-input-wrap {
  width: min(280px, 30vw);
}

#announcementPanel .notices-search-toggle {
  width: 36px;
  min-height: 36px;
  border-radius: 10px;
}

#announcementPanel .notices-list-panel {
  width: 100%;
  margin-inline: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#announcementPanel .notices-list-rows {
  gap: 0;
}

#announcementPanel .notices-list-item:first-child {
  border-top: 0 !important;
}

#announcementPanel .notices-list-button {
  grid-template-columns: 88px minmax(0, 1fr) 96px;
  gap: 18px;
  padding: 16px 0;
}

#announcementPanel .notices-list-category,
#announcementPanel .notices-list-date {
  font-size: 12px;
  line-height: 18px;
}

@media (max-width: 720px) {
  #announcementPanel .notices-toolbar-row,
  #announcementPanel .notices-search-form {
    align-items: stretch;
    flex-direction: column;
  }

  #announcementPanel .notices-list-button {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #announcementPanel .notices-list-date {
    text-align: left;
  }
}

@media (min-width: 721px) {
  #announcementPanel .notices-search-form {
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) !important;
  }

  #announcementPanel .notices-search-input-wrap,
  #announcementPanel .notices-search-form.is-expanded .notices-search-input-wrap {
    width: min(280px, 30vw) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  #announcementPanel .notices-search-toggle {
    display: none !important;
  }
}

.notices-detail-panel > .notices-section-head,
.notices-detail-panel > .notices-detail-body,
.notices-compose-settings-panel,
.notices-compose-document {
  width: var(--notices-doc-width);
  margin-inline: auto;
}

.notices-compose-panel .notices-compose-settings-panel,
.notices-compose-panel .notices-compose-document {
  width: min(1048px, calc(100% - 24px));
}

.notices-detail-panel .notices-section-head {
  padding-bottom: 18px;
}

.notices-detail-panel .notices-section-head h3 {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.notices-detail-panel .notices-section-head .muted {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.notices-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.notices-detail-actions .btn {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  background: transparent;
}

.notices-detail-prose {
  display: grid;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.notices-floating-scene {
  position: relative;
  width: min(var(--notices-scene-width, 880px), 100%);
  min-height: var(--notices-scene-min-height, 960px);
  margin: 0 auto;
}

.notices-flow-lane-document {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: min(1180px, 100%);
  margin: 0;
  padding: 0;
}

.notices-flow-lane-paragraph,
.notices-flow-lane-object {
  width: 100%;
  min-width: 0;
}

.notices-compose-flow-lane .notices-compose-flow-lane-paragraph-input {
  min-height: 1.4lh;
  padding: 0;
}

.notices-flow-lane-object {
  display: block;
  position: relative;
  padding-left: var(--notice-flow-object-offset-x, 0px);
  overflow: hidden;
}

.notices-flow-lane-object-body {
  position: relative;
  width: min(calc(100% - var(--notice-flow-object-offset-x, 0px)), var(--notice-flow-object-width, 640px));
  min-width: 180px;
  max-width: 100%;
}

.notices-flow-lane-object-image .notices-flow-lane-object-body {
  width: min(calc(100% - var(--notice-flow-object-offset-x, 0px)), var(--notice-flow-object-width, 420px));
}

.notices-flow-lane-object .notices-floating-object-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.notices-flow-lane-object .notices-detail-table-wrap,
.notices-flow-lane-object .notices-compose-table-shell,
.notices-flow-lane-object .notices-poll-card {
  max-width: 100%;
}

.notices-compose-table-shell {
  position: relative;
}

.notices-table-resize-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.notices-table-resize-handle {
  position: absolute;
  pointer-events: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.notices-table-resize-handle-outer.notices-table-resize-handle-top,
.notices-table-resize-handle-outer.notices-table-resize-handle-bottom {
  left: 0;
  right: 0;
  height: 10px;
  cursor: ns-resize;
  z-index: 4;
}

.notices-table-resize-handle-outer.notices-table-resize-handle-top { top: -5px; }
.notices-table-resize-handle-outer.notices-table-resize-handle-bottom { bottom: -5px; }

.notices-table-resize-handle-outer.notices-table-resize-handle-left,
.notices-table-resize-handle-outer.notices-table-resize-handle-right {
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  z-index: 4;
}

.notices-table-resize-handle-outer.notices-table-resize-handle-left { left: -5px; }
.notices-table-resize-handle-outer.notices-table-resize-handle-right { right: -5px; }

.notices-table-resize-handle-outer.notices-table-resize-handle-top-left,
.notices-table-resize-handle-outer.notices-table-resize-handle-top-right,
.notices-table-resize-handle-outer.notices-table-resize-handle-bottom-left,
.notices-table-resize-handle-outer.notices-table-resize-handle-bottom-right {
  width: 14px;
  height: 14px;
  z-index: 5;
}

.notices-table-resize-handle-outer.notices-table-resize-handle-top-left {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.notices-table-resize-handle-outer.notices-table-resize-handle-top-right {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.notices-table-resize-handle-outer.notices-table-resize-handle-bottom-left {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize;
}

.notices-table-resize-handle-outer.notices-table-resize-handle-bottom-right {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.notices-table-resize-handle-col {
  top: 0;
  bottom: 0;
  width: 10px;
  margin-left: -5px;
  cursor: ew-resize;
  z-index: 3;
}

.notices-table-resize-handle-row {
  left: 0;
  right: 0;
  height: 10px;
  margin-top: -5px;
  cursor: ns-resize;
  z-index: 2;
}

.notices-flow-lane-resize {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  cursor: nwse-resize;
}

.notices-flow-lane-resize::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.notices-floating-scene-flow {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  min-height: var(--notices-scene-min-height, 960px);
}

.notices-floating-scene-objects {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.notices-floating-object {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
}

.notices-floating-object > :not(.notices-floating-object-chrome):not(.notices-floating-object-resize) {
  width: 100%;
}

.notices-floating-object-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.96);
}

.notices-floating-object.notices-floating-object-image[data-notice-scene-drag-body],
.notices-floating-object-image[data-notice-scene-drag-body] {
  cursor: grab;
}

body.notices-scene-object-dragging .notices-floating-object.notices-floating-object-image[data-notice-scene-drag-body],
body.notices-scene-object-dragging .notices-floating-object-image[data-notice-scene-drag-body] {
  cursor: grabbing;
}

.notices-floating-object-chrome {
  position: absolute;
  top: -12px;
  right: 8px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.notices-floating-object:hover .notices-floating-object-chrome,
.notices-floating-object:focus-within .notices-floating-object-chrome,
.notices-flow-lane-object:hover .notices-floating-object-chrome,
.notices-flow-lane-object:focus-within .notices-floating-object-chrome {
  opacity: 1;
}

.notices-floating-object-handle,
.notices-floating-object-edit,
.notices-floating-object-remove {
  position: relative;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.notices-floating-object-handle::before {
  content: "";
  display: block;
  width: 10px;
  height: 14px;
  margin: 0 auto;
  background:
    radial-gradient(circle, currentColor 1.1px, transparent 1.2px) 0 0 / 3px 5px repeat-y,
    radial-gradient(circle, currentColor 1.1px, transparent 1.2px) 7px 0 / 3px 5px repeat-y;
  opacity: 0.78;
}

.notices-floating-object-remove::before,
.notices-floating-object-remove::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 8px;
  width: 12px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}

.notices-floating-object-remove::before { transform: rotate(45deg); }
.notices-floating-object-remove::after { transform: rotate(-45deg); }

.notices-floating-object-edit::before,
.notices-floating-object-edit::after {
  content: "";
  position: absolute;
  display: block;
  background: currentColor;
}

.notices-floating-object-edit::before {
  width: 10px;
  height: 2px;
  top: 13px;
  left: 8px;
  transform: rotate(-35deg);
  border-radius: 999px;
}

.notices-floating-object-edit::after {
  width: 4px;
  height: 4px;
  top: 8px;
  right: 7px;
  transform: rotate(-35deg);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.notices-floating-object-resize {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  cursor: nwse-resize;
}

.notices-floating-object-resize::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.notices-compose-floating-paragraph-input {
  min-height: 1.4lh;
  padding: 0;
}

.notices-scene-object-dragging,
.notices-scene-object-dragging * {
  user-select: none;
}

.notices-detail-block {
  display: grid;
  gap: 10px;
}

.notices-detail-block-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--soc-text);
}

.notices-detail-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.76;
  color: var(--soc-text);
}

.notices-detail-prose p {
  margin: 0;
  color: var(--soc-text);
  font-size: 16px;
  line-height: 1.78;
  white-space: pre-wrap;
}

.notices-rich-content,
.notices-compose-rich-editor {
  font-size: 16px;
  line-height: 1.78;
}

.notices-rich-content a,
.notices-compose-rich-editor a {
  color: var(--soc-link, #b45309);
  text-decoration: underline;
}

.notices-rich-content [data-rt-size="8"],
.notices-compose-rich-editor [data-rt-size="8"] { font-size: 8pt; }

.notices-rich-content [data-rt-size="10"],
.notices-compose-rich-editor [data-rt-size="10"] { font-size: 10pt; }

.notices-rich-content [data-rt-size="11"],
.notices-compose-rich-editor [data-rt-size="11"] { font-size: 11pt; }

.notices-rich-content [data-rt-size="11.5"],
.notices-compose-rich-editor [data-rt-size="11.5"] { font-size: 11.5pt; }

.notices-rich-content [data-rt-size="12"],
.notices-compose-rich-editor [data-rt-size="12"] { font-size: 12pt; }

.notices-rich-content [data-rt-size="14"],
.notices-compose-rich-editor [data-rt-size="14"] { font-size: 14pt; }

.notices-rich-content [data-rt-size="16"],
.notices-compose-rich-editor [data-rt-size="16"] { font-size: 16pt; }

.notices-rich-content [data-rt-size="18"],
.notices-compose-rich-editor [data-rt-size="18"] { font-size: 18pt; }

.notices-rich-content [data-rt-size="20"],
.notices-compose-rich-editor [data-rt-size="20"] { font-size: 20pt; }

.notices-rich-content [data-rt-size="22"],
.notices-compose-rich-editor [data-rt-size="22"] { font-size: 22pt; }

.notices-rich-content [data-rt-size="24"],
.notices-compose-rich-editor [data-rt-size="24"] { font-size: 24pt; }

.notices-rich-content [data-rt-size="26"],
.notices-compose-rich-editor [data-rt-size="26"] { font-size: 26pt; }

.notices-rich-content [data-rt-size="28"],
.notices-compose-rich-editor [data-rt-size="28"] { font-size: 28pt; }

.notices-rich-content [data-rt-size="36"],
.notices-compose-rich-editor [data-rt-size="36"] { font-size: 36pt; }

.notices-rich-content [data-rt-size="48"],
.notices-compose-rich-editor [data-rt-size="48"] { font-size: 48pt; }

.notices-rich-content [data-rt-size="72"],
.notices-compose-rich-editor [data-rt-size="72"] { font-size: 72pt; }

.notices-rich-content [data-rt-color="default"],
.notices-compose-rich-editor [data-rt-color="default"] {
  color: var(--soc-text);
}

.notices-rich-content [data-rt-color="orange"],
.notices-compose-rich-editor [data-rt-color="orange"] {
  color: var(--soc-primary, #ff7a00);
}

.notices-rich-content [data-rt-color="red"],
.notices-compose-rich-editor [data-rt-color="red"] {
  color: var(--soc-danger, #e11d48);
}

.notices-rich-content [data-rt-color="blue"],
.notices-compose-rich-editor [data-rt-color="blue"] {
  color: var(--soc-info, #2563eb);
}

.notices-rich-content [data-rt-color="green"],
.notices-compose-rich-editor [data-rt-color="green"] {
  color: var(--soc-success, #16a34a);
}

.notices-rich-content [data-rt-color="gray"],
.notices-compose-rich-editor [data-rt-color="gray"] {
  color: var(--soc-text-sub, #64748b);
}

.notices-rich-content [data-rt-bg="none"],
.notices-compose-rich-editor [data-rt-bg="none"] {
  background: transparent;
}

.notices-rich-content [data-rt-bg="yellow-soft"],
.notices-compose-rich-editor [data-rt-bg="yellow-soft"] {
  background: #fff36a;
}

.notices-rich-content [data-rt-bg="orange-soft"],
.notices-compose-rich-editor [data-rt-bg="orange-soft"] {
  background: #ffd7b8;
}

.notices-rich-content [data-rt-bg="red-soft"],
.notices-compose-rich-editor [data-rt-bg="red-soft"] {
  background: #ffc9d2;
}

.notices-rich-content [data-rt-bg="blue-soft"],
.notices-compose-rich-editor [data-rt-bg="blue-soft"] {
  background: #c7dcff;
}

.notices-rich-content [data-rt-bg="green-soft"],
.notices-compose-rich-editor [data-rt-bg="green-soft"] {
  background: #cdeec9;
}

.notices-rich-content [data-rt-bg="gray-soft"],
.notices-compose-rich-editor [data-rt-bg="gray-soft"] {
  background: #d8dde5;
}

.notices-rich-content mark,
.notices-compose-rich-editor mark {
  padding: 0 0.15em;
  border-radius: 0.3em;
}

.notices-compose-rich-editor a {
  pointer-events: none;
}

.notices-detail-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
}

.notices-detail-image-wrap {
  display: grid;
  gap: 10px;
}

.notices-detail-image {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(248, 250, 252, 0.9);
}

.notices-detail-image-caption {
  margin: 0;
  color: var(--soc-text-sub);
  font-size: 14px;
  line-height: 1.65;
}

.notices-poll-card {
  display: grid;
  gap: 14px;
  padding: 18px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.notices-poll-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.notices-poll-title-wrap {
  display: grid;
  gap: 0;
}

.notices-poll-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.notices-poll-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.notices-poll-summary,
.notices-poll-hint {
  margin: 0;
}

.notices-poll-summary {
  color: var(--soc-text-sub);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

.notices-poll-complete-pill {
  background: #f97316;
  color: #ffffff;
}

.notices-poll-options {
  display: grid;
  gap: 12px;
}

.notices-poll-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1.5px solid rgba(100, 116, 139, 0.34);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.notices-poll-option-content {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.notices-poll-option-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notices-poll-option-label {
  color: var(--soc-text);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}

.notices-poll-option-votes {
  color: var(--soc-text-sub);
  font-size: 14px;
  font-weight: 700;
}

.notices-poll-result-bar {
  position: relative;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.92);
}

.notices-poll-result-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb923c, #f97316);
  min-width: 0;
}

.notices-poll-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.notices-detail-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.notices-detail-table th,
.notices-detail-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
  white-space: pre-wrap;
}

.notices-detail-table th:last-child,
.notices-detail-table td:last-child {
  border-right: 0;
}

.notices-detail-table tbody tr:last-child td {
  border-bottom: 0;
}

.notices-detail-table th {
  background: rgba(248, 250, 252, 0.96);
  color: var(--soc-text);
  font-weight: 700;
}

.notices-detail-table td {
  color: var(--soc-text-sub);
}

.notices-compose-settings-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 18px;
  flex-wrap: wrap;
  padding: 4px 0 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.notices-compose-setting-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.notices-compose-setting-field-compact {
  max-width: none;
  flex: 0 1 auto;
}

.notices-compose-setting-field-inline {
  align-self: center;
  position: relative;
  padding-left: 18px;
}

.notices-compose-setting-field-actions {
  align-self: center;
  justify-self: auto;
  margin-left: auto;
}

.notices-compose-setting-label,
.notices-compose-setting-field > span {
  color: var(--soc-text-sub);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

.notices-compose-settings-panel .input-field select {
  width: 168px;
  min-width: 168px;
  min-height: 42px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
}

.notices-compose-setting-switchrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  flex-wrap: wrap;
}

.notices-compose-setting-caption {
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
}

.notices-compose-setting-field-inline::before {
  content: '/';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(100, 116, 139, 0.72);
  font-size: 14px;
  font-weight: 700;
}

.notices-compose-document {
  display: grid;
  gap: 20px;
  padding: 18px 0 0;
}

.notices-compose-document-flow {
  display: grid;
  gap: 0;
  align-content: start;
  position: relative;
  overflow: visible;
}

.notices-compose-flow-stream {
  display: grid;
  gap: 0;
  align-content: start;
  width: 100%;
  min-width: 0;
  position: relative;
}

.notices-compose-flow-stream.has-embed {
  gap: 0;
}

.notices-compose-title-input {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  resize: none;
  color: var(--soc-text);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.05em;
  font-weight: 800;
}

.notices-compose-body-input {
  min-height: 440px;
  padding: 10px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--soc-text);
  font-size: 16px;
  line-height: 1.78;
  resize: vertical;
}

.notices-compose-rich-editor {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--soc-text);
  white-space: pre-wrap;
  word-break: break-word;
  caret-color: #f97316;
  outline: none;
}

.notices-compose-rich-editor[contenteditable="true"]:empty::before {
  content: attr(data-notice-rich-placeholder);
  color: var(--soc-placeholder);
  pointer-events: none;
}

.notices-compose-editor-surface {
  display: grid;
  gap: 18px;
  min-height: 440px;
}

.notices-compose-text-block {
  gap: 0;
  padding-top: 0;
  border-top: 0;
  transition: margin-top 0.08s ease;
}

.notices-compose-text-block.has-embedded-blocks .notices-compose-editor-surface {
  min-height: 0;
  gap: 0;
}

.notices-compose-text-block.has-embedded-blocks .notices-compose-body-input {
  min-height: 220px;
}

.notices-compose-flow-block {
  width: 100%;
  max-width: 100%;
}

.notices-compose-flow-embed-block {
  position: relative;
  padding: 0;
  margin: 8px 0;
  border-top: 0;
}

.notices-compose-flow-paragraph {
  display: block;
  padding-top: 0;
  border-top: 0;
  position: relative;
}

.notices-compose-flow-surface {
  min-height: 0;
  gap: 0;
}

.notices-compose-flow-textarea {
  min-height: 40px;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.notices-compose-flow-textarea.is-primary-body-surface {
  min-height: 440px;
}

.notices-compose-flow-paragraph.is-stream-fragment .notices-compose-flow-textarea {
  min-height: 0;
}

.notices-compose-flow-stream.has-embed .notices-compose-flow-paragraph.is-stream-fragment .notices-compose-flow-textarea {
  min-height: 1lh;
}

.notices-compose-flow-stream.has-embed .notices-compose-flow-paragraph.is-empty-fragment .notices-compose-flow-textarea {
  min-height: 1.2lh;
  padding-top: 0;
  padding-bottom: 0;
}

.notices-compose-flow-stream.has-embed .notices-compose-flow-paragraph.is-stream-fragment .notices-compose-flow-textarea::placeholder {
  color: transparent;
}

.notices-compose-flow-table-block {
  clear: both;
}

.notices-compose-flow-table-block .notices-table-panel,
.notices-compose-flow-table-block .notices-compose-table-grid,
.notices-compose-flow-table-block .notices-compose-table-shell,
.notices-compose-flow-poll-block .notices-poll-card {
  width: 100%;
  max-width: 100%;
}

.notices-compose-flow-table-block .notices-table-panel {
  overflow-x: auto;
  overflow-y: visible;
}

.notices-compose-title-input:focus,
.notices-compose-body-input:focus,
.notices-compose-table-input:focus,
.notices-compose-rich-editor:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18);
}

.notices-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 12px 0 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.notices-compose-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
}

.notices-compose-toolbar-group--format {
  flex: 1 1 auto;
  min-width: 0;
}

.notices-compose-toolbar-group--insert {
  border-left: 1px solid rgba(148, 163, 184, 0.12);
  padding-left: 14px;
}

.notices-toolbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  transition: color 0.18s ease;
}

.notices-toolbar-item:hover,
.notices-toolbar-item:focus-visible {
  color: var(--soc-text);
}

.notices-toolbar-item.is-active {
  color: #c2410c;
}

.notices-toolbar-item-compact {
  gap: 6px;
}

.notices-toolbar-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: currentColor;
  flex: 0 0 auto;
}

.notices-toolbar-item-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.notices-toolbar-item-glyph {
  font-size: 14px;
  font-weight: 800;
}

.notices-toolbar-item-glyph-italic {
  font-style: italic;
}

.notices-toolbar-item-glyph-underline {
  text-decoration: underline;
}

.notices-toolbar-floating-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.notices-toolbar-size-input-wrap {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 8px 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.notices-toolbar-size-input {
  width: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-text);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  box-shadow: none;
}

.notices-toolbar-size-input:focus {
  outline: none;
}

.notices-toolbar-floating-toggle,
.notices-toolbar-color-trigger,
.notices-toolbar-highlight-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: #fff;
  color: var(--soc-text-sub);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.notices-toolbar-floating-toggle:hover,
.notices-toolbar-floating-toggle:focus-visible,
.notices-toolbar-color-trigger:hover,
.notices-toolbar-color-trigger:focus-visible,
.notices-toolbar-highlight-trigger:hover,
.notices-toolbar-highlight-trigger:focus-visible,
.notices-toolbar-floating-toggle.is-active,
.notices-toolbar-color-trigger.is-active,
.notices-toolbar-highlight-trigger.is-active {
  border-color: rgba(249, 115, 22, 0.32);
  color: var(--soc-text);
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.12);
}

.notices-toolbar-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  flex: 0 0 auto;
}

.notices-toolbar-color-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  color: var(--notice-toolbar-text-color, #202430);
  flex: 0 0 auto;
}

.notices-toolbar-color-line {
  width: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--notice-toolbar-text-color, #202430);
  flex: 0 0 auto;
}

.notices-toolbar-highlight-chip {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: var(--notice-toolbar-highlight-color, #fff36a);
  box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.55);
  flex: 0 0 auto;
}

.notices-toolbar-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 24;
  display: grid;
  gap: 8px;
  min-width: 120px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.notices-toolbar-size-menu {
  max-height: 320px;
  overflow-y: auto;
}

.notices-toolbar-size-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--soc-text);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

.notices-toolbar-size-option:hover,
.notices-toolbar-size-option:focus-visible {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

.notices-color-palette {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 152px;
}

.notices-color-swatch {
  position: relative;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.notices-color-swatch:hover,
.notices-color-swatch:focus-visible {
  border-color: rgba(249, 115, 22, 0.42);
  transform: translateY(-1px);
}

.notices-color-swatch-default { background: #202430; }
.notices-color-swatch-orange { background: #ff7a00; }
.notices-color-swatch-red { background: #e11d48; }
.notices-color-swatch-blue { background: #2563eb; }
.notices-color-swatch-green { background: #16a34a; }
.notices-color-swatch-gray { background: #64748b; }
.notices-color-swatch-yellow { background: #fff36a; }
.notices-color-swatch-orange-soft { background: #ffd7b8; }
.notices-color-swatch-red-soft { background: #ffc9d2; }
.notices-color-swatch-blue-soft { background: #c7dcff; }
.notices-color-swatch-green-soft { background: #cdeec9; }
.notices-color-swatch-gray-soft { background: #d8dde5; }

.notices-color-swatch-none {
  background:
    linear-gradient(135deg, transparent 0 44%, #94a3b8 45% 55%, transparent 56% 100%),
    #ffffff;
}

.notices-editor-action {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-text-sub);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
}

.notices-editor-action:hover,
.notices-editor-action:focus-visible {
  color: var(--soc-text);
}

.notices-table-picker {
  display: grid;
  gap: 12px;
  width: fit-content;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.notices-table-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notices-table-picker-head strong {
  color: var(--soc-text);
  font-size: 13px;
  line-height: 1.2;
}

.notices-table-picker-head span {
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.4;
}

.notices-table-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 22px);
  grid-auto-rows: 22px;
  gap: 6px;
}

.notices-table-picker-cell {
  display: block;
  width: 22px;
  height: 22px;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.9);
  line-height: 0;
}

.notices-table-picker-cell.is-active {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(255, 237, 213, 0.96);
}

.notices-compose-inline-block {
  display: grid;
  gap: 12px;
  padding: 0;
  border-top: 0;
  position: relative;
}

.notices-compose-inline-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.is-notice-compose-flow-dragging {
  opacity: 0.72;
}

.notices-compose-flow-drop-before {
  box-shadow: inset 0 3px 0 rgba(249, 115, 22, 0.92);
}

.notices-compose-flow-drop-after {
  box-shadow: inset 0 -3px 0 rgba(249, 115, 22, 0.92);
}

.notices-compose-flow-drop-inline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--notice-compose-drop-line-top, 0px);
  height: 3px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.96);
  pointer-events: none;
  z-index: 3;
}

.notices-compose-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.notices-compose-flow-block-actions {
  position: absolute;
  top: -12px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.notices-compose-flow-embed-block:hover .notices-compose-flow-block-actions,
.notices-compose-flow-embed-block:focus-within .notices-compose-flow-block-actions {
  opacity: 1;
  pointer-events: auto;
}

.notices-compose-inline-kind {
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.notices-inline-remove {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-text-sub);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
}

.notices-inline-remove:hover,
.notices-inline-remove:focus-visible {
  color: var(--soc-text);
}

.notices-inline-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  min-width: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--soc-text-sub);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  cursor: grab;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.notices-inline-drag-handle:hover,
.notices-inline-drag-handle:focus-visible {
  color: var(--soc-text);
}

.notices-inline-handle-dots {
  position: relative;
  width: 10px;
  height: 14px;
  display: inline-block;
}

.notices-inline-handle-dots::before,
.notices-inline-handle-dots::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle, currentColor 1.1px, transparent 1.2px) 0 0 / 3px 5px repeat-y;
  opacity: 0.78;
}

.notices-inline-handle-dots::before { left: 0; }
.notices-inline-handle-dots::after { right: 0; }

.notices-inline-remove-icon,
.notices-editor-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.notices-inline-remove-glyph,
.notices-inline-edit-glyph {
  position: relative;
  width: 12px;
  height: 12px;
  display: inline-block;
}

.notices-inline-remove-glyph::before,
.notices-inline-remove-glyph::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 12px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}

.notices-inline-remove-glyph::before { transform: rotate(45deg); }
.notices-inline-remove-glyph::after { transform: rotate(-45deg); }

.notices-inline-edit-glyph::before,
.notices-inline-edit-glyph::after {
  content: "";
  position: absolute;
  display: block;
  background: currentColor;
}

.notices-inline-edit-glyph::before {
  width: 10px;
  height: 2px;
  top: 6px;
  left: 1px;
  transform: rotate(-35deg);
  border-radius: 999px;
}

.notices-inline-edit-glyph::after {
  width: 4px;
  height: 4px;
  top: 1px;
  right: 0;
  transform: rotate(-35deg);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

body.notices-compose-dragging,
body.notices-compose-dragging * {
  user-select: none;
}

body.notices-compose-dragging .notices-inline-drag-handle {
  cursor: grabbing;
}

.notices-poll-panel,
.notices-table-panel {
  display: grid;
  gap: 12px;
  position: relative;
}

.notices-image-dropzone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px dashed rgba(249, 115, 22, 0.34);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.notices-image-dropzone:hover,
.notices-image-dropzone:focus-visible {
  border-bottom-color: rgba(249, 115, 22, 0.52);
}

.notices-image-dropzone-label {
  color: #c2410c;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  flex: 0 0 auto;
}

.notices-image-dropzone-helper {
  color: var(--soc-text-sub);
  font-size: 13px;
  line-height: 1.5;
}

.notices-image-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.notices-image-item {
  display: grid;
  gap: 10px;
  align-items: start;
  padding: 0;
  border-top: 0;
  margin: 0;
}

.notices-image-media {
  position: relative;
  display: grid;
}

.notices-image-preview {
  width: min(100%, 520px);
  height: auto;
  max-height: 460px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.1);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.notices-image-fields {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.notices-image-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.notices-compose-setting-cluster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}

.notices-compose-toggle-stack {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.notices-compose-toggle-row {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 0;
  border-top: 0;
}

.notices-compose-toggle-copy strong {
  color: var(--soc-text);
  font-size: 14px;
  line-height: 1.45;
}

.notices-switch-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soc-text);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

.notices-switch-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.34);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
  flex: 0 0 auto;
}

.notices-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.notices-switch-copy {
  color: var(--soc-text);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

.notices-switch-button.is-active .notices-switch-track {
  background: rgba(249, 115, 22, 0.92);
}

.notices-switch-button.is-active .notices-switch-track::after {
  transform: translateX(18px);
}

.notices-switch-button.is-active .notices-switch-copy {
  color: #c2410c;
}

.notices-poll-editor-head,
.notices-table-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.notices-poll-editor-head strong,
.notices-table-editor-head strong {
  color: var(--soc-text-sub);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.notices-compose-poll-summary {
  display: grid;
  gap: 14px;
  min-height: 240px;
  padding: 18px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.notices-compose-poll-question {
  color: var(--soc-text);
  font-size: 18px;
  line-height: 1.5;
}

.notices-compose-poll-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notices-compose-poll-preview-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--soc-text-sub);
  font-size: 14px;
  line-height: 1.6;
}

.notices-compose-poll-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.78);
  color: var(--soc-text);
  font-size: 15px;
  font-weight: 600;
}

.notices-compose-poll-preview-item::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.9);
  flex: 0 0 auto;
}

.notices-poll-option-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notices-poll-option-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.notices-poll-option-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.notices-poll-option-actions {
  display: flex;
  justify-content: flex-end;
}

.notices-compose-table-grid {
  position: relative;
  overflow: visible;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 44px;
  padding-bottom: 44px;
  background: transparent;
  box-sizing: border-box;
}

.notices-compose-table-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.notices-compose-table {
  width: 100%;
  min-width: 0;
  height: auto;
  border-collapse: collapse;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.98);
  table-layout: fixed;
}

.notices-compose-table th,
.notices-compose-table td {
  padding: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.notices-compose-table th:last-child,
.notices-compose-table td:last-child {
  border-right: 0;
}

.notices-compose-table tbody tr:last-child td {
  border-bottom: 0;
}

.notices-compose-table th {
  background: rgba(248, 250, 252, 0.92);
}

.notices-compose-table-input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 14px 16px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--soc-text);
  font-size: 15px;
  line-height: 1.45;
}

.notices-compose-rich-editor[data-notice-compose-editor-kind="table-header"],
.notices-compose-rich-editor[data-notice-compose-editor-kind="table-cell"] {
  min-height: 24px;
}

.notices-compose-table-edge-controls {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
}

.notices-compose-table-edge-controls-rows {
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  flex-direction: column;
}

.notices-compose-table-edge-controls-columns {
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
}

.notices-compose-table-edge-button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(249, 115, 22, 0.26);
  border-radius: 999px;
  background: #fff;
  color: #f97316;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.notices-compose-table-edge-button:hover,
.notices-compose-table-edge-button:focus-visible {
  border-color: rgba(249, 115, 22, 0.52);
  background: rgba(255, 247, 237, 0.98);
}

.notices-compose-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.notices-command-link {
  min-height: 34px;
  padding-left: 0;
  padding-right: 0;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
}

.notices-command-publish {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--soc-primary, #f97316) 28%, transparent);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--soc-primary, #f97316) 82%, white) 0%,
    var(--soc-primary, #f97316) 100%
  );
  color: var(--soc-on-primary, #fff);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--soc-primary, #f97316) 18%, transparent);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

.notices-command-publish:hover,
.notices-command-publish:focus-visible {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--soc-primary, #f97316) 72%, white) 0%,
    var(--soc-primary-deep, var(--soc-primary, #fb7f1f)) 100%
  );
  color: var(--soc-on-primary, #fff);
}

.notices-command-publish {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
}

.notices-compose-draft-meta {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

.notices-empty-state {
  display: grid;
  gap: 6px;
  min-height: 220px;
  place-content: center;
  text-align: center;
  color: var(--soc-text-sub);
}

.notices-empty-state strong {
  color: var(--soc-text);
  font-size: 16px;
}

.notices-compose-poll-modal {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 1600;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: grid;
  gap: 0;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
}

.notices-compose-link-modal {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 1600;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: grid;
  gap: 0;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
}

.notices-link-modal-note {
  margin: 0;
}

.notices-compose-poll-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.notices-compose-poll-modal-head h3 {
  margin: 0;
  color: var(--soc-text);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.notices-compose-poll-modal-body {
  display: grid;
  gap: 16px;
  padding-top: 16px;
}

.notices-compose-setting-cluster-modal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notices-compose-poll-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  margin-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

@media (max-width: 1199px) {
  .notices-compose-settings-panel,
  .notices-compose-setting-cluster,
  .notices-compose-setting-cluster-modal {
    grid-template-columns: 1fr;
  }

  .notices-compose-setting-field-actions {
    justify-self: start;
    margin-left: 0;
  }

  .notices-image-dropzone {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  #announcementPanel .workspace-head,
  .notices-toolbar-row,
  .notices-section-head,
  .notices-poll-head,
  .notices-poll-actions,
  .notices-compose-toggle-row,
  .notices-compose-poll-modal-head,
  .notices-compose-poll-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .notices-search-form {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }

  .notices-search-form.is-expanded .notices-search-input-wrap {
    width: 100%;
  }

  .notices-detail-actions {
    width: 100%;
  }

  .notices-detail-actions .btn {
    flex: 1 1 auto;
  }

  .notices-list-button {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .notices-list-panel,
  .notices-toolbar-row,
  .notices-detail-panel > .notices-section-head,
  .notices-detail-panel > .notices-detail-body,
  .notices-compose-settings-panel,
  .notices-compose-document {
    width: calc(100% - 40px);
  }

  .notices-list-panel {
    padding: 16px 18px 8px;
    border-radius: 24px;
  }

  .notices-poll-option,
  .notices-poll-option-item,
  .notices-image-item {
    grid-template-columns: 1fr;
  }

  .notices-toolbar-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    top: auto;
    min-width: 0;
    max-height: min(46vh, 360px);
    overflow-y: auto;
    border-radius: 18px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  }

  .notices-color-palette {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
  }

  .notices-toolbar-size-input-wrap {
    min-width: 74px;
  }

  .notices-compose-panel {
    width: calc(100% - 24px);
    padding: 22px 16px 20px;
  }

  .notices-compose-settings-panel {
    margin-left: 0;
  }

  .notices-compose-setting-field,
  .notices-compose-setting-field-compact,
  .notices-compose-setting-field-inline,
  .notices-compose-setting-field-actions {
    width: 100%;
    margin-left: 0;
  }

  .notices-compose-setting-field {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .notices-compose-setting-field-inline {
    padding-left: 0;
  }

  .notices-compose-setting-field-inline::before {
    content: none;
  }

  .notices-compose-settings-panel .input-field select {
    width: 100%;
    min-width: 0;
  }

  .notices-image-preview {
    width: 100%;
    max-height: 320px;
  }

  .notices-compose-table-grid {
    padding-right: 0;
    padding-bottom: 88px;
  }

  .notices-compose-table-edge-controls-rows {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    flex-direction: row;
  }

  .notices-compose-table-edge-controls-columns {
    bottom: -80px;
  }
}

/* Unified icon tone */
.soc-bottom-tab-icon,
.soc-realtime-date-icon,
.report-choice-icon,
.incident-more-btn,
.icon-btn {
  color: var(--soc-text-sub);
}

.soc-bottom-tab-btn.is-active .soc-bottom-tab-icon,
.report-choice-card .report-choice-icon {
  color: var(--soc-primary);
}

/* Responsive */
@media (max-width: 1180px) {
  .container.admin-layout {
    grid-template-columns: 1fr;
  }

  #menuSheetPanel {
    display: none !important;
  }

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

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

@media (max-width: 900px) {
  .incident-detail-grid {
    grid-template-columns: 1fr;
  }

  .notification-timeline-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .notification-timeline-toolbar > button {
    grid-column: 1 / -1;
  }

  .notification-filter-panel {
    left: 8px;
    right: 8px;
    top: calc(var(--soc-safe-top) + 60px);
    padding: 8px 8px 6px;
  }

  .soc-realtime-datebar {
    gap: 8px;
  }

  .soc-summary-grid {
    gap: 8px;
  }

  .soc-summary-card {
    min-height: 76px;
    padding: 9px 10px;
  }

  .soc-summary-value {
    font-size: var(--type-display-lg-size);
    line-height: var(--type-display-lg-line);
    font-weight: var(--type-display-lg-weight);
  }

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

  #homeWeeklyBriefing .soc-home-weekly-chart {
    padding: 10px 10px 8px;
    gap: 16px;
  }

  #homeWeeklyBriefing .soc-home-weekly-chart-bar {
    max-width: 18px;
    height: 102px;
  }

  #homeWeeklyBriefing .soc-home-weekly-chart-label {
    font-size: var(--type-label-sm-size);
    line-height: var(--type-label-sm-line);
    font-weight: var(--type-label-sm-weight);
  }

  #homeWeeklyBriefing .soc-home-weekly-chart-value {
    font-size: var(--type-title-md-size);
    line-height: var(--type-title-md-line);
    font-weight: var(--type-title-md-weight);
  }

  #homeWeeklyBriefing .soc-home-weekly-ratio-pill {
    font-size: var(--type-label-sm-size);
    line-height: var(--type-label-sm-line);
    padding: 5px 9px;
  }

  .soc-kpi-card {
    min-height: 116px;
  }

  .soc-hero-status-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .soc-analytics-header {
    grid-template-columns: 1fr;
  }

  .soc-analytics-header-right {
    justify-items: stretch;
  }

  .soc-analytics-site-filter {
    justify-content: flex-start;
    gap: 8px;
  }

  .soc-analytics-hero {
    grid-template-columns: 1fr;
    justify-items: stretch;
    padding: 10px;
  }

  .risk-overview-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "toolbar"
      "gauge"
      "title"
      "meta";
  }

  .soc-analytics-hero-meta {
    width: 100%;
  }

  .soc-analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .soc-analytics-trend-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .soc-analytics-trend-grid > .soc-block {
    min-height: 158px;
  }

  .soc-heatmap-scroll {
    min-height: 196px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .soc-heatmap-grid {
    min-width: 760px;
    grid-template-columns: 42px repeat(24, minmax(28px, 1fr));
  }

  .soc-heatmap-grid.is-mobile-day {
    min-width: 0;
    grid-template-columns: 34px repeat(24, minmax(0, 1fr));
    gap: 2px;
  }

  .soc-heatmap-day-tabs {
    gap: 5px;
  }

  .soc-heatmap-day-btn {
    min-height: 28px;
    padding: 4px 8px;
  }

  .soc-analytics-store-drawer {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    bottom: 0;
    top: auto;
    max-height: 85dvh;
    border-radius: 16px 16px 0 0;
    padding: 8px 10px calc(10px + var(--soc-safe-bottom));
    transform: translate3d(0, calc(100% + var(--soc-safe-bottom)), 0);
  }

  #analyticsStoreDrawerHandle {
    display: block;
    margin-bottom: 2px;
  }

  .soc-analytics-store-drawer:not(.hidden) {
    transform: translate3d(0, var(--soc-analytics-drawer-drag, 0), 0);
  }

  .soc-analytics-store-mini {
    grid-template-columns: 1fr;
  }

  .soc-analytics-store-drawer-body {
    max-height: calc(85dvh - 120px);
  }

  .soc-store-comparison-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .soc-store-comparison-actions .analytics-store-metric-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .soc-store-info-popover {
    width: min(280px, calc(100vw - 24px));
  }

  .soc-report-preview .soc-report-store-chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .soc-report-preview .soc-report-store-chart-metric {
    white-space: normal;
  }

  .soc-analytics-view,
  .soc-reports-view,
  .soc-admin-view,
  .soc-weekly-view,
  .soc-people-view,
  .soc-profile-view {
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .soc-profile-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #topbarMyProfileBtn {
    min-height: 34px;
    padding: 6px 10px;
    font-size: var(--soc-text-xs);
  }

  .soc-reports-site-multi,
  .soc-reports-section-toggles {
    grid-template-columns: 1fr;
  }

  .soc-reports-site-multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .soc-report-browse-grid {
    grid-template-columns: 1fr;
  }

  .soc-report-headerbar {
    top: 0;
    padding: 9px 10px;
    border-radius: 12px;
  }

  .soc-report-title-wrap h3 {
    font-size: var(--soc-text-md);
  }

  #reportSummaryText,
  #reportHeaderSummary {
    font-size: var(--soc-text-xs);
  }

  .soc-report-header-actions,
  .report-actions {
    justify-content: flex-end;
  }

  .soc-report-builder-panel {
    min-height: min(65dvh, 700px);
    height: min(70dvh, 760px);
    max-height: 84dvh;
  }

  .soc-weekly-builder-panel {
    min-height: min(65dvh, 700px);
    height: min(70dvh, 760px);
    max-height: 84dvh;
  }

  .soc-weekly-workspace-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-weekly-review-grid,
  .soc-weekly-config-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-weekly-builder-site-options {
    grid-template-columns: 1fr;
  }

  .soc-weekly-section-card[data-weekly-section="heatmap"] {
    min-height: 340px;
  }

  .soc-weekly-heatmap-scroll {
    min-height: 212px;
  }

  .soc-weekly-heatmap-table {
    min-width: 620px;
  }

  .soc-weekly-heatmap-table th,
  .soc-weekly-heatmap-table td {
    min-width: 21px;
    height: 20px;
    font-size: 9px;
  }

  .soc-weekly-heatmap-table tbody th {
    min-width: 34px;
  }

  #reportBuilderSheet.mode-expanded .soc-report-builder-panel {
    min-height: min(70dvh, 760px);
    height: min(80dvh, 840px);
  }

  #reportBuilderSheet.mode-drawer .soc-report-builder-panel {
    width: 100%;
    min-height: min(65dvh, 700px);
    height: min(70dvh, 760px);
    max-height: 84dvh;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--soc-border);
  }

  .soc-report-preview-viewport {
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  .soc-admin-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .container.ds-page {
    padding-top: 10px;
    padding-bottom: calc(64px + var(--soc-safe-bottom));
    gap: 10px;
  }

  .soc-reports-view {
    gap: 10px;
  }

  .soc-report-headerbar {
    padding: 8px 10px;
  }

  .soc-report-preview-viewport {
    height: 100%;
    min-height: 0;
    padding-bottom: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  #reportBuilderSheet.mode-drawer .soc-bottom-sheet-panel.soc-report-builder-panel {
    width: min(392px, 92vw);
  }

  #reportBuilderSheet.mode-drawer .soc-report-builder-steps {
    max-height: calc(100dvh - 176px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .soc-kpi-card,
  .soc-block,
  .soc-mini-row {
    transition: none;
  }

  .soc-kpi-card:hover,
  .soc-kpi-card:active,
  .soc-block:hover,
  .soc-block:active,
  .soc-mini-row:hover,
  .soc-mini-row:active {
    transform: none;
    box-shadow: var(--soc-shadow-soft);
  }
}

@media (max-width: 900px) {
  .soc-app-shell {
    --soc-tabbar-bottom-offset: 0px;
    --soc-main-scroll-padding: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px) + 24px);
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100dvh !important;
    height: 100dvh !important;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .soc-app-shell::after { display: none; }

  @supports (height: 100svh) {
    .soc-app-shell {
      min-height: 100svh !important;
      height: 100svh !important;
    }
  }

  .topbar {
    min-height: 56px;
    padding-left: 10px;
    padding-right: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    column-gap: 8px;
  }

  .topbar h1 {
    font-size: 15px;
    max-width: 100%;
  }

  .topbar-brand-wordmark {
    height: 19px;
    max-width: min(48vw, 180px);
  }

  .soc-startup-center {
    width: min(96vw, 680px);
    gap: 10px;
  }

  .soc-startup-logo {
    width: clamp(131px, 33.6vw, 184px);
    height: clamp(131px, 33.6vw, 184px);
  }

  .soc-startup-wordmark {
    width: min(44vw, 260px);
  }

  .topbar-left {
    flex: 1 1 auto;
    max-width: none;
  }

  .topbar-right {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    padding-right: max(2px, env(safe-area-inset-right, 0px));
  }

  .session-info {
    display: none;
  }

  .container.ds-page {
    width: 100%;
    min-height: 0;
    padding: 8px 8px var(--soc-main-scroll-padding);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.role-field .container.ds-page,
  body.role-hq .container.ds-page {
    padding: 8px;
    overflow-y: hidden;
  }

  #dashboardPanel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    max-height: calc(100dvh - (var(--soc-safe-top) + 66px) - var(--soc-safe-bottom));
    overflow-y: hidden;
  }

  .admin-tab-content:not(#dashboardPanel),
  #reportPanel {
    max-height: calc(100dvh - (var(--soc-safe-top) + 66px) - var(--soc-safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--soc-main-scroll-padding);
  }

  #homeView,
  #alertsView,
  #ticketsView,
  #weeklyView,
  #peopleView,
  #myProfileView,
  #analyticsView,
  #adminView {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--soc-main-scroll-padding);
  }

  #reportsView {
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
  }

  #reportSummaryText,
  #reportHeaderSummary {
    font-size: 12px;
  }

  .report-actions {
    gap: 4px;
  }

  .report-actions .ds-btn {
    min-height: 34px;
    padding-left: 8px;
    padding-right: 8px;
  }

  #openReportBuilderBtn .btn-label-full,
  #reportsGenerateBtn .btn-label-full,
  #reportsResetBtn .btn-label-full {
    display: none;
  }

  #openReportBuilderBtn .btn-label-short,
  #reportsGenerateBtn .btn-label-short,
  #reportsResetBtn .btn-label-short {
    display: inline-block;
  }

  #reportPanel,
  #reportFlowStart,
  #reportTypeGrid {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .panel,
  .panel.ds-card,
  .ds-card {
    padding: 12px;
  }

  .topbar-right .topbar-btn {
    display: none !important;
  }

  .topbar-right #topbarNotificationsBtn.topbar-btn:not(.hidden) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px !important;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--soc-text);
    box-shadow: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: visible !important;
    transform: translateX(-2px);
  }

  .topbar-right #topbarNotificationsBtn.topbar-btn:not(.hidden) .topbar-notification-badge {
    top: -6px;
    right: -7px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-size: 10px;
    line-height: 1;
  }

  body.nav-open .nav-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: var(--soc-overlay-soft) !important;
    z-index: 300 !important;
  }

  body.nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.nav-open .container.ds-page {
    overflow: hidden;
  }

  #menuSheetPanel,
  .container.admin-layout #menuSheetPanel,
  body.nav-open .container.admin-layout #menuSheetPanel {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: min(50dvh, 50vh) !important;
    max-height: min(50dvh, 50vh) !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    z-index: 400 !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--soc-nav-sheet-bg) !important;
    background-image: none !important;
    background-color: var(--soc-nav-sheet-bg) !important;
    border-left: 1px solid var(--soc-border);
    border-top: 1px solid var(--soc-border-strong);
    border-bottom: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(108%) !important;
    transition: transform 0.24s ease, opacity 0.2s ease;
    filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
  }

  #menuSheetPanel .admin-tab-list,
  #menuSheetPanel .admin-tab-btn,
  #menuSheetPanel .mobile-nav-actions {
    position: relative;
    z-index: 1;
    pointer-events: auto;
  }

  #menuSheetPanel .admin-tab-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 6px;
    align-content: start;
    margin: 0;
    padding: 0;
  }

  /* Keep Admin menu in a single vertical list on mobile. */
  #menuSheetPanel .admin-tab-list,
  #menuSheetPanel .mobile-nav-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #menuSheetPanel .admin-tab-btn {
    min-height: 46px;
    padding: 8px 26px 8px 2px;
    margin: 0;
    align-self: start;
    border: 0 !important;
    border-bottom: 1px solid var(--soc-nav-sheet-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--soc-nav-item-text) !important;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    position: relative;
  }

  #menuSheetPanel .admin-tab-btn.soc-menu-item,
  #menuSheetPanel .mobile-nav-action-btn.soc-menu-item {
    width: 100%;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  #menuSheetPanel .admin-tab-btn.soc-menu-item::before {
    color: var(--soc-text-sub);
    max-width: 100%;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  #menuSheetPanel .mobile-nav-action-btn.soc-menu-item::before {
    color: var(--soc-text-sub);
    max-width: 100%;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  #menuSheetPanel .admin-tab-btn.soc-menu-item::after {
    right: 4px;
    color: var(--soc-text-sub);
  }

  #menuSheetPanel .admin-tab-btn.active,
  #menuSheetPanel .admin-tab-btn:active {
    background: transparent !important;
    color: var(--soc-nav-item-text) !important;
    border-bottom-color: var(--soc-nav-sheet-divider-active) !important;
  }

  #menuSheetPanel > .ds-card-title {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0 0 6px;
    padding: 0;
    color: var(--soc-nav-item-text);
  }

  #menuSheetPanel .nav-sheet-handle {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    margin: 0 -12px 6px;
    padding: 8px 0 6px;
    background: var(--soc-nav-sheet-bg);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    touch-action: none;
    cursor: grab;
    user-select: none;
  }

  #menuSheetPanel .nav-sheet-handle span {
    display: block;
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: var(--soc-nav-sheet-handle);
  }

  #menuSheetPanel.nav-sheet-swiping .nav-sheet-handle span {
    background: var(--soc-nav-sheet-handle-active);
  }

  #menuSheetPanel,
  #menuSheetPanel .admin-tab-btn,
  #menuSheetPanel .mobile-menu-view-btn,
  #menuSheetPanel .mobile-menu-view-header,
  #menuSheetPanel .mobile-menu-view-back,
  #menuSheetPanel > .ds-card-title {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .mobile-menu-pager {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .mobile-type-flow-track {
    display: flex;
    width: 400%;
    height: 100%;
    min-height: 0;
    transform: translateX(0%);
    transition: transform 0.26s ease;
  }

  .mobile-menu-view {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 6;
    background: var(--soc-nav-sheet-bg);
    padding: 14px 12px;
    transform: translateX(-108%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-menu-root-page {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
    overflow: hidden;
  }

  .mobile-type-flow-track > .mobile-menu-root-page,
  .mobile-type-flow-track > .mobile-menu-view.mobile-type-page {
    position: relative;
    inset: auto;
    width: 25%;
    min-width: 25%;
    height: 100%;
    min-height: 0;
    padding: 0 12px 6px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }

  .mobile-type-flow-track > .mobile-menu-view.mobile-type-page {
    background: transparent;
    transition: none;
  }

  #menuSheetPanel .admin-tab-btn[data-tab="realtime"] {
    display: none !important;
  }

  #menuSheetPanel .admin-tab-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #menuSheetPanel .mobile-admin-shortcuts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #menuSheetPanel .mobile-admin-shortcut-btn {
    min-height: 42px;
    padding: 6px 26px 6px 2px;
    margin: 0;
    align-self: start;
    border: 0 !important;
    border-bottom: 1px solid var(--soc-nav-sheet-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--soc-nav-item-text) !important;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    position: relative;
  }

  #menuSheetPanel .mobile-admin-shortcut-btn + .mobile-admin-shortcut-btn {
    margin-top: -2px;
  }

  #menuSheetPanel .mobile-admin-shortcut-btn.soc-menu-item::before {
    margin-top: 1px;
    line-height: 1.2;
  }

  #menuSheetPanel .mobile-admin-shortcut-btn.soc-menu-item::after {
    right: 4px;
    color: var(--soc-text-sub);
  }

  #menuSheetPanel .mobile-nav-actions {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 10px 0 2px;
    border-top: 0;
  }

  #menuSheetPanel .mobile-nav-action-btn {
    width: 100%;
    min-height: 46px;
    text-align: left;
    padding: 8px 26px 8px 10px;
  }

  #menuSheetPanel .mobile-nav-action-btn--plain {
    width: auto !important;
    min-height: 24px !important;
    height: auto !important;
    padding: 2px 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #menuSheetPanel .mobile-nav-actions-divider {
    width: min(240px, 78%);
    height: 1px;
    margin: 8px auto;
  }

  #mobileExcelMenuView {
    transform: translateX(100%);
  }

  #mobileAnnouncementMenuView {
    transform: translateX(-108%);
  }

  #menuSheetPanel.menuview-open-announcement #mobileAnnouncementMenuView,
  #menuSheetPanel.menuview-open-excel #mobileExcelMenuView {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  #menuSheetPanel.menuview-open-announcement .mobile-nav-actions,
  #menuSheetPanel.menuview-open-excel .mobile-nav-actions,
  #menuSheetPanel.menuview-open-type .mobile-nav-actions {
    display: none !important;
  }

  #menuSheetPanel.menuview-open-type.menuview-open-type-step-2 #mobileTypeFlowTrack {
    transform: translateX(-25%);
  }

  #menuSheetPanel.menuview-open-type.menuview-open-type-step-3 #mobileTypeFlowTrack {
    transform: translateX(-50%);
  }

  #menuSheetPanel.menuview-open-type.menuview-open-type-step-4 #mobileTypeFlowTrack {
    transform: translateX(-75%);
  }

  body.nav-open #menuSheetPanel,
  body.nav-open .container.admin-layout #menuSheetPanel {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    z-index: 400 !important;
  }

  body.nav-open #menuSheetPanel.nav-sheet-swiping,
  body.nav-open .container.admin-layout #menuSheetPanel.nav-sheet-swiping {
    transition: none !important;
    transform: translateY(var(--soc-nav-sheet-drag, 0px)) !important;
  }

  #bottomTabNav.soc-bottom-tab {
    display: grid;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    min-height: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--soc-tabbar-h, 54px) + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    transform: none !important;
    box-shadow: 0 -6px 16px var(--soc-tabbar-shadow-soft);
    z-index: 120 !important;
  }

  #bottomTabNav.soc-bottom-tab .soc-bottom-tab-btn {
    min-height: var(--soc-tabbar-h, 54px) !important;
    height: var(--soc-tabbar-h, 54px) !important;
    padding: 0 !important;
    align-content: center !important;
    gap: 2px;
    font-size: 12px;
  }

  #bottomTabNav.soc-bottom-tab .soc-bottom-tab-icon {
    font-size: 20px;
  }

  #bottomTabNav.soc-bottom-tab .soc-bottom-tab-icon-img {
    width: 20px;
    height: 20px;
  }

  #bottomTabNav.soc-bottom-tab .soc-bottom-tab-btn > span:last-child {
    font-size: 12px;
    line-height: 1.15;
  }

  body.nav-open #bottomTabNav.soc-bottom-tab {
    opacity: 0;
    pointer-events: none;
  }

  .soc-filterbar {
    display: none;
  }

  .incident-card-head {
    flex-direction: row;
    align-items: flex-start;
  }

  .incident-created-at {
    text-align: left;
    margin-top: 0;
  }

  .controls,
  .instruction-form,
  .notification-actions,
  .confirm-actions,
  .attachment-preview-controls,
  .attachment-preview-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ticket-comment-form,
  .ticket-attachment-form {
    grid-template-columns: 1fr;
  }

  .controls .statusSelect,
  .instruction-form .instructionInput {
    min-width: 0;
  }

  .soc-stepper {
    grid-template-columns: 1fr;
  }

  .date-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .date-filter-btn,
  .site-filter-btn,
  .announcement-mode-btn,
  .report-tab,
  .sla-page-btn {
    min-height: 40px;
    padding: 6px 8px;
    font-size: 11px;
  }

  .report-choice-grid-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    grid-auto-rows: 1fr;
  }

  .report-choice-grid-1col .report-choice-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  #reportPanel.report-selection-active {
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }

  #reportPanel.report-selection-active > .ds-card-title {
    display: none;
  }

  #reportPanel.report-selection-active #reportView {
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
    padding: 0 10px 20px;
    gap: 10px;
    box-sizing: border-box;
    overflow-x: clip;
  }

  @supports not (width: 100dvw) {
    #reportPanel.report-selection-active #reportView {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
  }

  #reportPanel.report-selection-active #reportFlowStart {
    max-height: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
    touch-action: pan-y;
    overscroll-behavior: auto;
    padding-top: 0;
  }

  #reportPanel.report-selection-active .report-flow-step {
    height: auto;
    min-height: 0;
    align-content: start;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  #reportPanel.report-selection-active .report-flow-title {
    margin: 0;
    padding: 0;
    max-width: none;
    font-size: clamp(24px, 7vw, 32px);
  }

  #reportPanel.report-selection-active .report-choice-grid-1col {
    height: auto;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(150px, auto);
    overflow: visible;
    padding-top: 0;
    gap: 12px;
  }

  #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-card {
    width: 100%;
    height: auto;
    min-height: 150px;
    aspect-ratio: auto;
    max-height: none;
    justify-content: flex-start;
    align-content: flex-start;
    padding: 18px 16px 16px;
  }

  #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-icon {
    font-size: 1.35rem;
  }

  #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-card[data-entry="ticket"] .report-choice-icon-img {
    width: 40px;
    height: 36px;
  }

  #reportFlowTypeStep .report-choice-grid-2col .report-choice-icon-img--ticket-template {
    width: 30px;
    height: 30px;
  }

  #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-label {
    font-size: 17px;
    font-weight: 750;
  }

  #reportPanel.report-selection-active .report-choice-grid-1col .report-choice-sub {
    font-size: 12px;
  }

  #reportFlowTypeStep .report-choice-grid-2col .report-choice-card {
    width: 100%;
    min-height: 132px;
    aspect-ratio: auto;
  }

  #reportFlowTypeStep {
    height: auto;
    min-height: 0;
  }

  #reportFlowTypeStep .report-choice-grid-2col {
    min-height: 0;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    align-content: start;
    padding-top: 0;
    -webkit-overflow-scrolling: touch;
  }

  #reportFlowTypeStep .report-choice-grid-2col .report-choice-card {
    min-height: 132px;
    aspect-ratio: auto;
  }

  .case-facts {
    grid-template-columns: 1fr;
  }

  .case-title {
    font-size: 16px;
  }

  .case-chip {
    font-size: 11px;
  }

  .case-timeline {
    padding-left: 16px;
  }

  #reportPanel #quickIncidentForm,
  #reportPanel #incidentForm {
    padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
  }

  #menuSheetPanel .mobile-menu-view {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: var(--soc-nav-sheet-bg) !important;
  }

  #menuSheetPanel .mobile-menu-view-btn,
  #menuSheetPanel .mobile-menu-view-back {
    background: var(--soc-panel-bg) !important;
    color: var(--soc-text) !important;
    border: 1px solid var(--soc-border) !important;
  }

  #menuSheetPanel .mobile-menu-view-btn.active {
    background: var(--soc-primary-soft-bg) !important;
    border-color: var(--soc-primary) !important;
    color: var(--soc-primary) !important;
  }

  #menuSheetPanel.menuview-open-excel #mobileExcelMenuView {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #menuSheetPanel.menuview-open-excel #mobileExcelMenuView .mobile-excel-config-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(30px + var(--soc-safe-bottom));
  }

  #mobileExcelDownloadBtn {
    background: var(--soc-primary) !important;
    border-color: var(--soc-primary-deep) !important;
    color: var(--soc-on-primary) !important;
    text-align: center;
  }

  #mobileExcelBackBtn,
  #mobileExcelAppleBtn,
  #mobileExcelInternalBtn {
    background: transparent !important;
    border: 1px solid var(--soc-border) !important;
    color: var(--soc-text) !important;
  }
}

@media (min-width: 901px) {
  .case-file {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "hero hero"
      "facts timeline"
      "sections sections";
  }

  .case-hero {
    grid-area: hero;
  }

  .case-facts {
    grid-area: facts;
  }

  .case-timeline-wrap {
    grid-area: timeline;
  }

  .case-sections {
    grid-area: sections;
  }
}

@media (min-width: 901px) {
  .topbar .menu-toggle-btn {
    display: none !important;
  }
}

.menu-toggle-icon-img {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}

[data-theme="light"] .incident-card {
  border-color: rgba(242, 106, 27, 0.22);
}

[data-theme="light"] .notification-filter-panel,
[data-theme="light"] .modal-panel,
[data-theme="light"] .ds-modal {
  background: var(--soc-panel-bg);
}

[data-theme="light"] #incidentDetailAttachmentForm,
[data-theme="light"] .attachment-upload-form,
[data-theme="light"] .attachment-preview-controls button,
[data-theme="light"] #dashboardPanel .incident-card,
[data-theme="light"] #dashboardPanel .incident-more-menu,
[data-theme="light"] #dashboardPanel .instruction-list,
[data-theme="light"] #excelPanel #excelAppleWrap,
[data-theme="light"] #excelPanel .excel-field,
[data-theme="light"] #excelPanel .soc-table-wrap,
[data-theme="light"] #excelPanel .announcement-mode-btn,
[data-theme="light"] #excelPanel .announcement-mode-btn.active,
[data-theme="light"] #notificationSettingsPanel .notification-check,
[data-theme="light"] #typeReportsPanel #typeFilterButtons,
[data-theme="light"] #typeReportsPanel .site-filter-btn,
[data-theme="light"] #menuSheetPanel .mobile-menu-view,
[data-theme="light"] #menuSheetPanel .mobile-menu-view-btn,
[data-theme="light"] #menuSheetPanel .mobile-menu-view-back {
  background: var(--soc-card-bg) !important;
  color: var(--soc-text) !important;
  border-color: var(--soc-border) !important;
}

[data-theme="light"] #typeReportsPanel .site-filter-btn.active,
[data-theme="light"] #menuSheetPanel .mobile-menu-view-btn.active,
[data-theme="light"] #excelPanel .announcement-mode-btn.active {
  background: var(--soc-primary-soft-bg) !important;
  border-color: var(--soc-primary) !important;
  color: var(--soc-primary) !important;
}

[data-theme="light"] #dashboardPanel .help,
[data-theme="light"] #excelPanel .help,
[data-theme="light"] #notificationSettingsPanel .help,
[data-theme="light"] #typeReportsPanel .help,
[data-theme="light"] #reportsHubView .help,
[data-theme="light"] #dashboardPanel .meta,
[data-theme="light"] #excelPanel .meta,
[data-theme="light"] #notificationSettingsPanel .meta,
[data-theme="light"] #typeReportsPanel .meta,
[data-theme="light"] #reportsHubView .meta {
  color: var(--soc-text-sub) !important;
}

#reportsHubView {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.soc-hub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--soc-panel-bg);
  border-bottom: 1px solid var(--soc-border);
  padding: 4px 0 10px;
}

.soc-hub-header-left {
  min-width: 0;
  flex: 1 1 auto;
}

.soc-hub-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.soc-hub-title-row h2 {
  margin: 0;
  min-width: 0;
}

#hubSummaryText {
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

#hubSummaryMeta {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.soc-hub-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.soc-hub-header-actions .ds-btn-primary {
  box-shadow: none;
}

.soc-hub-header-actions .ds-btn,
.soc-hub-filter-footer .ds-btn {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-hub-mode-tabs {
  margin-top: 8px;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.soc-hub-mode-tab {
  min-height: 28px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.soc-hub-mode-tab.is-active {
  border-color: rgba(234, 88, 12, 0.72);
  color: #c2410c;
}

#hubStatusBanner {
  margin: 0 0 8px;
}

.soc-hub-preview-scroller {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom) + 16px);
  display: grid;
  gap: 10px;
}

.soc-hub-preview-scroller[data-hub-mode="weekly"],
.soc-hub-preview-scroller[data-hub-mode="apple"] {
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
}

.soc-hub-preview-scroller[data-hub-mode="download"] {
  grid-template-columns: minmax(0, 1fr);
}

.soc-hub-section-card {
  position: relative;
  border: 1px solid var(--soc-border);
  border-radius: 14px;
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-card);
  padding: 12px 12px 12px 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.soc-hub-section-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--soc-primary);
}

.soc-hub-section-card h3 {
  margin: 0 0 8px;
}

.soc-hub-section-card .help,
.soc-hub-section-card .meta {
  margin: 0;
}

.soc-hub-top-ordered {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.soc-hub-top-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
  border-radius: 10px;
  color: var(--soc-text);
  padding: 8px 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-hub-weekly-list {
  display: grid;
  gap: 8px;
}

.soc-hub-weekly-card {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-panel-bg);
  padding: 10px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-hub-raw-list {
  display: grid;
  gap: 8px;
}

.soc-hub-raw-row {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--soc-panel-bg);
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.soc-hub-raw-row strong,
.soc-hub-raw-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.soc-hub-filter-panel {
  width: min(860px, 100vw);
  max-height: 78dvh;
  min-height: 35dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.soc-hub-filter-scroller {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 8px);
  display: grid;
  gap: 8px;
}

.soc-hub-filter-section {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-card-bg);
  overflow: hidden;
}

.soc-hub-filter-toggle {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--soc-text);
  font-weight: 700;
  padding: 10px 12px;
}

.soc-hub-filter-body {
  display: none;
  padding: 0 12px 10px;
  min-width: 0;
}

.soc-hub-filter-section.is-open .soc-hub-filter-body {
  display: grid;
  gap: 8px;
}

.soc-hub-filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.soc-hub-custom-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.soc-hub-custom-range label {
  display: grid;
  gap: 4px;
  font-size: var(--soc-text-sm);
}

.soc-hub-site-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.soc-hub-filter-option-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-hub-option-group-title {
  margin: 4px 0 0;
  font-size: var(--soc-text-sm);
  font-weight: 700;
  color: var(--soc-text-sub);
}

.soc-hub-option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  padding: 7px 9px;
  background: var(--soc-panel-bg);
  min-width: 0;
}

.soc-hub-option-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-hub-filter-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 4px);
  border-top: 1px solid var(--soc-border);
  background: var(--soc-panel-bg);
}

html.hub-filter-open,
body.hub-filter-open {
  overflow: hidden;
}

#slaFilterBackdrop {
  z-index: 357;
}

#slaFilterSheet {
  z-index: 358;
  background: transparent;
  pointer-events: none;
}

#slaFilterSheet.open {
  pointer-events: none;
}

#slaFilterSheet .soc-bottom-sheet-panel {
  pointer-events: auto;
}

#slaFilterSheet .soc-bottom-sheet-panel.soc-sla-filter-panel {
  width: min(860px, 100vw);
  min-height: 35dvh;
  max-height: 75dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  touch-action: pan-y;
}

#slaFilterSheet.dragging .soc-bottom-sheet-panel.soc-sla-filter-panel {
  transition: none;
  transform: translateY(var(--soc-sla-filter-drag, 0px));
}

.soc-sla-filter-scroller {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 calc(env(safe-area-inset-bottom) + 8px);
  display: grid;
  gap: 10px;
}

.soc-sla-filter-section {
  border: 1px solid var(--soc-divider);
  border-radius: 12px;
  background: var(--soc-card-bg);
  padding: 10px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-sla-filter-section h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.soc-sla-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.soc-sla-chip-row .chip {
  min-height: 34px;
}

.soc-sla-custom-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.soc-sla-custom-range label {
  display: grid;
  gap: 4px;
  font-size: var(--soc-text-sm);
  min-width: 0;
}

.soc-sla-site-wrap {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#slaSiteSearchInput {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
}

.soc-sla-site-options {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-height: 26dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.soc-sla-site-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  padding: 8px 9px;
  background: var(--soc-panel-bg);
  min-width: 0;
}

.soc-sla-site-option span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-sla-filter-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--soc-divider);
  background: var(--soc-panel-bg);
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 4px);
}

.soc-sla-filter-footer .ds-btn {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.sla-filter-open,
body.sla-filter-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

@media (max-width: 900px) {
  .soc-hub-header {
    align-items: flex-start;
  }

  .soc-hub-header-actions {
    flex-direction: row;
  }

  .soc-hub-filter-panel {
    min-height: 65dvh;
    max-height: 75dvh;
  }

  .soc-hub-custom-range {
    grid-template-columns: 1fr;
  }

  #slaHeaderBar {
    align-items: center;
  }

  .soc-sla-header-title-wrap h2 {
    font-size: 17px;
  }

  .soc-sla-custom-range {
    grid-template-columns: 1fr;
  }

  .soc-kpi-grid.soc-kpi-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .soc-weekly-template-actions .ds-btn {
    flex: 1 1 calc(50% - 8px);
  }

  .soc-weekly-action-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .soc-weekly-action-check {
    justify-content: flex-start;
    width: 100%;
  }

  .soc-weekly-action-item .ds-btn {
    width: 100%;
  }

  .soc-weekly-detail-top-row {
    flex-direction: column;
    align-items: stretch;
  }

  .soc-weekly-detail-top-row .ds-btn {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  #slaFilterSheet.mode-drawer {
    align-items: stretch;
    justify-content: flex-end;
    background: transparent;
  }

  #slaFilterSheet.mode-drawer .soc-bottom-sheet-panel.soc-sla-filter-panel {
    inset: 0 0 0 auto;
    width: min(430px, 34vw);
    height: 100dvh;
    max-height: 100dvh;
    border-top-right-radius: 0;
    border-bottom-left-radius: 16px;
    border-left: 1px solid var(--soc-border);
    border-right: 0;
    border-top: 0;
    transform: translateX(106%);
    box-shadow: -14px 0 30px var(--soc-overlay-soft);
  }

  #slaFilterSheet.mode-drawer.open .soc-bottom-sheet-panel.soc-sla-filter-panel {
    transform: translateX(0);
  }

  #slaFilterSheet.mode-drawer .soc-sheet-handle {
    display: none;
  }

  #slaFilterSheet.mode-drawer .soc-sla-filter-scroller {
    max-height: calc(100dvh - 148px);
  }
}

/* Alerts filter chips: unify period/important/participant metrics */
#filterSheet .soc-alerts-builder-tabs .chip,
#filterSheet .soc-alerts-builder-tabs .soc-chip,
#filterSheet .soc-alerts-builder-panel .chip,
#filterSheet .soc-alerts-builder-panel .soc-chip,
#filterSheet .date-filter-group .date-filter-btn,
#filterSheet .date-filter-group .date-filter-btn.soc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  line-height: 1;
  box-sizing: border-box;
  white-space: nowrap;
  transform: none;
}

#filterSheet .date-filter-group .date-filter-btn,
#filterSheet .date-filter-group .date-filter-btn.soc-chip {
  width: 100%;
}

#filterSheet .soc-alerts-builder-tabs .chip > span,
#filterSheet .soc-alerts-builder-tabs .soc-chip > span,
#filterSheet .soc-alerts-builder-panel .chip > span,
#filterSheet .soc-alerts-builder-panel .soc-chip > span,
#filterSheet .date-filter-group .date-filter-btn > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

#filterSheet .soc-alerts-builder-tabs .chip.is-active,
#filterSheet .soc-alerts-builder-tabs .soc-chip.is-active,
#filterSheet .soc-alerts-builder-panel .chip.is-active,
#filterSheet .soc-alerts-builder-panel .soc-chip.is-active,
#filterSheet .date-filter-group .date-filter-btn.active,
#filterSheet .date-filter-group .date-filter-btn.soc-chip.active {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 10px;
  line-height: 1;
  transform: none;
}

@media (min-width: 1024px) {
  #filterSheet .soc-alerts-builder-tabs .chip,
  #filterSheet .soc-alerts-builder-tabs .soc-chip,
  #filterSheet .soc-alerts-builder-panel .chip,
  #filterSheet .soc-alerts-builder-panel .soc-chip,
  #filterSheet .date-filter-group .date-filter-btn,
  #filterSheet .date-filter-group .date-filter-btn.soc-chip {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0 10px;
    line-height: 1;
  }

  #filterSheet .soc-alerts-builder-tabs .chip.is-active,
  #filterSheet .soc-alerts-builder-tabs .soc-chip.is-active,
  #filterSheet .soc-alerts-builder-panel .chip.is-active,
  #filterSheet .soc-alerts-builder-panel .soc-chip.is-active,
  #filterSheet .date-filter-group .date-filter-btn.active,
  #filterSheet .date-filter-group .date-filter-btn.soc-chip.active {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0 10px;
    line-height: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .incident-card,
  .soc-summary-card,
  .ds-btn,
  .soc-bottom-tab-btn {
    transition: none !important;
    animation: none !important;
  }

  #refreshBtn.is-loading .refresh-icon {
    animation: none !important;
  }
}

/* PR-H1R/H1: alerts builder chips lock (period/important/participant) */
#filterSheet .soc-alerts-filter-chip,
#filterSheet .soc-alerts-filter-chip.ds-btn,
#filterSheet .soc-alerts-filter-chip.ds-btn-sm,
#filterSheet .soc-alerts-filter-chip.date-filter-btn,
#filterSheet .soc-alerts-filter-chip:active,
#filterSheet .soc-alerts-filter-chip.is-active,
#filterSheet .soc-alerts-filter-chip.active,
#filterSheet .soc-alerts-filter-chip[aria-selected="true"],
#filterSheet .soc-alerts-filter-chip[aria-pressed="true"],
#filterSheet .soc-alerts-filter-chip[data-state="active"],
#filterSheet .soc-alerts-filter-chip.selected {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
  vertical-align: middle !important;
}

#filterSheet .date-filter-group .soc-alerts-filter-chip,
#filterSheet .date-filter-group .date-filter-btn.soc-alerts-filter-chip {
  width: 100% !important;
}

#filterSheet .soc-alerts-filter-chip > *,
#filterSheet .soc-alerts-filter-chip > span,
#filterSheet .soc-alerts-filter-chip .label {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (min-width: 1024px) {
  #filterSheet .soc-alerts-filter-chip,
  #filterSheet .soc-alerts-filter-chip.ds-btn,
  #filterSheet .soc-alerts-filter-chip.ds-btn-sm,
  #filterSheet .soc-alerts-filter-chip.date-filter-btn,
  #filterSheet .soc-alerts-filter-chip:active,
  #filterSheet .soc-alerts-filter-chip.is-active,
  #filterSheet .soc-alerts-filter-chip.active,
  #filterSheet .soc-alerts-filter-chip[aria-selected="true"],
  #filterSheet .soc-alerts-filter-chip[aria-pressed="true"],
  #filterSheet .soc-alerts-filter-chip[data-state="active"],
  #filterSheet .soc-alerts-filter-chip.selected {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}

/* Notification timeline layout lock (feed panel removed). */
#dashboardPanel .notification-timeline-list,
#dashboardPanel .alerts {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#dashboardPanel .notification-timeline-list .case-timeline-card,
#dashboardPanel .notification-timeline-list .alert-item,
#dashboardPanel .alert-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#dashboardPanel .alert-time,
#dashboardPanel .case-timeline-event-time {
  flex: 0 0 auto;
  min-width: 0;
}

#dashboardPanel .alert-text,
#dashboardPanel .alert-text.notif-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 0 !important;
  max-width: 100% !important;
}

#dashboardPanel .notif-text,
#dashboardPanel .case-timeline-event-message,
#dashboardPanel .alert-text {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  line-break: auto !important;
  hyphens: none !important;
}

#dashboardPanel .case-timeline-event-body {
  min-width: 0;
  width: 100%;
}

/* PR-FIX: Situation Room filter chip wrapper height lock (tablet/desktop only) */
@media (min-width: 769px) {
  #filterSheet .filter-chip-wrapper,
  #filterSheet .filter-chip-wrapper.active {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 8px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  #filterSheet .date-filter-group.filter-chip-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 8px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  #filterSheet .filter-chip-wrapper .filter-chip,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip:active,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip.is-active,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip.active,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip[aria-selected="true"],
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip[aria-pressed="true"] {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 32px !important;
    padding: 0 12px !important;
  }
}

/* PR-FIX: notification word-break lock */
#dashboardPanel .notification-item,
#dashboardPanel .alert-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#dashboardPanel .notification-text,
#dashboardPanel .alert-text,
#dashboardPanel .notif-text,
#dashboardPanel .case-timeline-event-message {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* Notification panel: unclip left status dot + keep subtitle single-line with full width. */
#notificationPanel .notification-timeline-list,
#notificationPanel .case-timeline-card,
#notificationPanel .alert-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

#notificationPanel .notification-timeline-list {
  overflow-x: hidden;
}

#notificationPanel .case-timeline-event-body,
#notificationPanel .alert-text {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100%;
}

#notificationPanel .case-timeline-events {
  padding-left: 0 !important;
}

#notificationPanel .case-timeline-events::before {
  left: 5px !important;
}

#notificationPanel .case-timeline-event-row {
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) !important;
  gap: 8px;
  align-items: center;
  min-width: 0;
  overflow: visible;
}

#notificationPanel .case-timeline-dot {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  justify-self: center;
  align-self: center;
  margin-top: 0;
  border: 0 !important;
}

#notificationPanel .case-timeline-event-message,
#notificationPanel .alert-text,
#notificationPanel .notif-text {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  line-break: auto !important;
  hyphens: none !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

#notificationPanel .case-timeline-event-body,
#notificationPanel .case-timeline-event-body .case-timeline-event-message.notif-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

#notificationPanel .case-timeline-event-time,
#notificationPanel .alert-time {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Back navigation buttons: arrow-only, no box */
.soc-back-arrow-btn,
.soc-back-arrow-btn.ds-btn,
.soc-back-arrow-btn.ds-btn-secondary,
.soc-back-arrow-btn.ds-btn-sm,
#menuSheetPanel .mobile-menu-view-back.soc-back-arrow-btn,
[data-theme="light"] #menuSheetPanel .mobile-menu-view-back.soc-back-arrow-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 28px !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  position: relative !important;
}

.soc-back-arrow-btn::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: center / contain no-repeat url("/icons/ui-back-arrow.png?v=20260222uiicon07") !important;
  pointer-events: none !important;
}

.soc-back-arrow-btn:hover,
.soc-back-arrow-btn:active,
.soc-back-arrow-btn:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Keep back arrow hidden where existing UI state uses .hidden */
.soc-back-arrow-btn.hidden,
.soc-back-arrow-btn[aria-hidden="true"] {
  display: none !important;
}

/* Admin menu sub-page headers: unify size (exclude menu root title) */
#accountPanel .admin-sub-topbar h2,
#managerStatusPanel .admin-sub-topbar h2,
#auditPanel .admin-sub-topbar h2,
#excelPanel .admin-sub-topbar h2,
#employeeScorePanel .admin-sub-topbar h2,
#hqReminderPanel .admin-sub-topbar h2,
#announcementPanel .soc-announcement-header .title-inline h2,
#notificationPanel .notification-panel-head .title-inline h2,
#reportsHubView .soc-hub-title-row h2,
#themePanel > h2,
.soc-view-page-header .soc-page-header-main > h2 {
  font-size: var(--type-title-lg-size);
  line-height: var(--type-title-lg-line);
  font-weight: var(--type-title-lg-weight);
}

#reportBuilderSheet .soc-sheet-head .title-inline h3,
.soc-employee-create-header h3 {
  font-size: var(--type-section-md-size);
  line-height: var(--type-section-md-line);
  font-weight: var(--type-section-md-weight);
}

@media (min-width: 1024px) {
  body.role-hq.nav-open.admin-menu-sheet-open .container.admin-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.role-hq.nav-open.admin-menu-sheet-open .nav-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: var(--soc-overlay-soft) !important;
  }

  body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel,
  body.role-hq.nav-open.admin-menu-sheet-open .container.admin-layout #menuSheetPanel {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 320px !important;
    max-width: 320px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 16px 16px 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--soc-border) !important;
    transform: translateX(0) !important;
    overflow: hidden !important;
    z-index: 400 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel .nav-sheet-handle {
    display: none !important;
  }

  body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel .admin-tab-list,
  body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel .mobile-admin-shortcuts {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Admin employee score dashboard (Report Builder style) */
.soc-employee-score-builder {
  display: grid;
  gap: 18px;
}

.soc-employee-score-filter-bar {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
}

#employeeScorePanel .soc-hub-section-card {
  padding: 14px 16px 16px;
}

#employeeScorePanel .soc-hub-section-card::before {
  display: none;
}

.soc-employee-score-header {
  margin-bottom: 0;
}

.soc-employee-score-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.soc-employee-score-control-cluster {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.soc-employee-score-period-field {
  min-width: 0;
}

.soc-employee-score-period-field .soc-analytics-range-quick {
  min-width: 0;
}

.soc-employee-score-filter-bar .soc-inline-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-employee-score-control-cluster .soc-inline-field {
  align-content: start;
}

.soc-employee-score-filter-bar .soc-inline-field > span {
  font-size: var(--type-label-sm-size, 12px);
  line-height: 18px;
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

.soc-employee-score-filter-bar .soc-workspace-card-head .meta {
  max-width: 44ch;
}

.soc-employee-score-filter-bar .ds-input {
  min-height: 46px;
  height: 46px;
  padding: 0 40px 0 14px;
  line-height: 22px;
  box-sizing: border-box;
}

.soc-employee-score-filter-bar .soc-analytics-range-quick {
  flex-wrap: wrap;
}

.soc-employee-score-filter-bar .soc-analytics-custom-range {
  min-width: 0;
  margin-top: 0;
}

.soc-employee-score-filter-bar .soc-analytics-custom-range input {
  min-width: 0;
}

.soc-employee-score-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.soc-employee-score-summary-card {
  display: grid;
  gap: 12px;
  min-height: 176px;
  padding: 18px 18px 16px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft));
}

.soc-employee-score-summary-card.is-hero {
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 34%, var(--ui-bg-surface, var(--soc-panel-bg)));
  border-color: color-mix(in srgb, var(--soc-primary) 22%, var(--soc-border));
  box-shadow:
    inset 0 3px 0 0 var(--soc-primary),
    var(--ui-shadow-1, var(--soc-shadow-soft));
}

.soc-employee-score-summary-card .meta {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#employeeScorePanel .soc-workspace-card-head .meta {
  display: block;
  margin-top: 4px;
}

.soc-employee-score-summary-label {
  margin: 0;
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

.soc-employee-score-summary-value {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
  overflow-wrap: anywhere;
}

.soc-employee-score-summary-visual {
  display: grid;
  align-content: center;
  min-height: 102px;
}

.soc-employee-score-bullet-shell {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-employee-score-bullet-track {
  position: relative;
  min-width: 0;
  height: 14px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, #f8fafc 28%, var(--soc-border) 72%) 0%,
      color-mix(in srgb, #f1f5f9 40%, var(--soc-border) 60%) 100%
    );
  overflow: visible;
}

.soc-employee-score-bullet-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  min-width: 10px;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, #fb923c 84%, white 16%), #f97316);
}

.soc-employee-score-bullet-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #334155;
  box-shadow: none;
}

.soc-employee-score-bullet-marker.is-reference {
  background: #0f172a;
}

.soc-employee-score-bullet-marker.is-benchmark {
  background: #2563eb;
}

.soc-employee-score-bullet-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
  font-weight: 600;
}

.soc-employee-score-bullet-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

.soc-employee-score-bullet-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.soc-employee-score-bullet-legend > span > i {
  display: block;
  flex: 0 0 auto;
}

.soc-employee-score-bullet-legend > span.is-current > i {
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, #fb923c 84%, white 16%), #f97316);
}

.soc-employee-score-bullet-legend > span.is-reference > i,
.soc-employee-score-bullet-legend > span.is-benchmark > i {
  width: 3px;
  height: 12px;
  border-radius: 999px;
}

.soc-employee-score-bullet-legend > span.is-reference > i {
  background: #0f172a;
}

.soc-employee-score-bullet-legend > span.is-benchmark > i {
  background: #2563eb;
}

.soc-employee-score-gauge-shell {
  position: relative;
  width: min(188px, 100%);
  height: 108px;
  justify-self: start;
}

.soc-employee-score-gauge-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.soc-employee-score-gauge-track,
.soc-employee-score-gauge-fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}

.soc-employee-score-gauge-track {
  stroke: color-mix(in srgb, var(--soc-border) 60%, transparent);
}

.soc-employee-score-gauge-fill {
  stroke: linear-gradient(90deg, #fb923c, #f97316);
  stroke: #f97316;
}

.soc-employee-score-gauge-center {
  position: absolute;
  inset: auto 0 4px;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.soc-employee-score-gauge-center strong {
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.soc-employee-score-gauge-center span,
.soc-employee-score-mini-donut-center span,
.soc-employee-score-breakdown-donut-center span {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
}

.soc-employee-score-mini-donut-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.soc-employee-score-mini-donut,
.soc-employee-score-breakdown-donut {
  position: relative;
  border-radius: 999px;
  background: var(--employee-score-donut, conic-gradient(#e5e7eb 0turn, #e5e7eb 1turn));
}

.soc-employee-score-mini-donut {
  width: 88px;
  height: 88px;
}

.soc-employee-score-mini-donut.is-empty {
  background: conic-gradient(#e5e7eb 0turn, #e5e7eb 1turn);
}

.soc-employee-score-mini-donut::after,
.soc-employee-score-breakdown-donut::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-border) 45%, transparent);
}

.soc-employee-score-mini-donut-center,
.soc-employee-score-breakdown-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  z-index: 1;
  text-align: center;
}

.soc-employee-score-mini-donut-center strong,
.soc-employee-score-breakdown-donut-center strong {
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-employee-score-mini-legend {
  display: grid;
  gap: 8px;
}

.soc-employee-score-mini-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

.soc-employee-score-mini-legend-row .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--score-dot, #cbd5e1);
}

.soc-employee-score-mini-legend-row strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 12px;
}

.soc-employee-score-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 104px;
}

.soc-employee-score-podium-col {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
}

.soc-employee-score-podium-bar-wrap {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 48px;
  height: 78px;
}

.soc-employee-score-podium-bar {
  display: block;
  width: 100%;
  min-height: 18px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, #fb923c 82%, white 18%), #f97316);
}

.soc-employee-score-podium-col.is-rank-1 .soc-employee-score-podium-bar {
  width: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, #f97316 88%, white 12%), #ea580c);
}

.soc-employee-score-podium-col strong,
.soc-employee-score-podium-col span:last-child {
  display: block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-employee-score-podium-col strong {
  font-size: 12px;
  line-height: 16px;
}

.soc-employee-score-podium-col span:last-child {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
}

.soc-employee-score-activity-stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.soc-employee-score-activity-track {
  display: flex;
  width: 100%;
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-border) 56%, transparent);
}

.soc-employee-score-activity-segment {
  display: block;
  min-width: 10px;
  background: var(--activity-bar, #f97316);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72);
}

.soc-employee-score-activity-legend {
  display: grid;
  gap: 8px;
}

.soc-employee-score-activity-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
}

.soc-employee-score-activity-legend-row .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--activity-dot, #f97316);
}

.soc-employee-score-activity-legend-row strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.soc-employee-score-activity-legend-row strong em {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}

.soc-employee-score-summary-bar,
.soc-employee-score-summary-stack {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-border) 58%, transparent);
  overflow: hidden;
}

.soc-employee-score-summary-bar-fill,
.soc-employee-score-summary-stack-segment {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.soc-employee-score-summary-bar.is-primary .soc-employee-score-summary-bar-fill {
  background: var(--soc-primary);
}

.soc-employee-score-summary-bar.is-highlight .soc-employee-score-summary-bar-fill {
  background: color-mix(in srgb, var(--soc-primary) 82%, #ff9b2f);
}

.soc-employee-score-summary-bar.is-critical .soc-employee-score-summary-bar-fill {
  background: #f97316;
}

.soc-employee-score-summary-bar.is-muted .soc-employee-score-summary-bar-fill {
  background: color-mix(in srgb, var(--soc-border) 75%, #fff);
}

.soc-employee-score-summary-stack {
  display: flex;
}

.soc-employee-score-summary-stack-segment.tone-0 {
  background: var(--soc-primary);
}

.soc-employee-score-summary-stack-segment.tone-1 {
  background: #ff944d;
}

.soc-employee-score-summary-stack-segment.tone-2 {
  background: #f59e0b;
}

.soc-employee-score-summary-stack-segment.tone-3 {
  background: #f97316;
}

.soc-employee-score-summary-stack-segment.tone-4 {
  background: #fb7185;
}

.soc-employee-score-content {
  display: grid;
  gap: 18px;
}

.soc-employee-score-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.soc-employee-score-main-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.soc-employee-score-primary-card,
.soc-employee-score-side-card,
.soc-employee-score-ranking-section,
.soc-employee-score-breakdown-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.soc-employee-score-primary-card {
  overflow: hidden;
}

.soc-employee-score-site-list {
  display: grid;
  gap: 12px;
  align-content: start;
  grid-auto-rows: min-content;
}

.soc-employee-score-combo-legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
}

.soc-employee-score-combo-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.soc-employee-score-combo-legend i {
  display: inline-block;
}

.soc-employee-score-combo-legend .is-volume i {
  width: 10px;
  height: 10px;
  border-radius: 3px 3px 0 0;
  background: #f97316;
}

.soc-employee-score-combo-legend .is-score i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #0f172a;
}

.soc-employee-score-combo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.soc-employee-score-site-combo-card {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--soc-border);
  border-radius: 14px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  text-align: left;
  color: var(--ui-text-primary, var(--soc-text));
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.soc-employee-score-site-combo-card:hover,
.soc-employee-score-site-combo-card.is-selected {
  border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 42%, var(--ui-bg-surface, #fff));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.soc-employee-score-site-combo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.soc-employee-score-site-combo-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.soc-employee-score-site-combo-head .soc-employee-score-rank {
  width: fit-content;
  min-width: 26px;
  height: 26px;
}

.soc-employee-score-site-combo-head strong {
  font-size: 18px;
  line-height: 24px;
}

.soc-employee-score-site-combo-head em {
  font-style: normal;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-employee-score-site-combo-plot {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  height: calc(var(--score-plot-height, 108px) + 28px);
  padding: 12px 18px 10px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary-soft-bg) 34%, #fff), color-mix(in srgb, var(--soc-panel-bg) 94%, transparent));
}

.soc-employee-score-site-combo-gridlines {
  position: absolute;
  inset: 12px 18px 30px;
  background:
    repeating-linear-gradient(
      to top,
      color-mix(in srgb, var(--soc-border) 28%, transparent) 0,
      color-mix(in srgb, var(--soc-border) 28%, transparent) 1px,
      transparent 1px,
      transparent 25%
    );
  pointer-events: none;
}

.soc-employee-score-site-combo-bar-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 6px;
  width: 100%;
  height: 100%;
}

.soc-employee-score-site-combo-bar {
  display: block;
  width: 68px;
  min-height: 18px;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, #fb923c 86%, white 14%), #f97316);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.18);
}

.soc-employee-score-site-combo-bar-label {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
}

.soc-employee-score-site-combo-dot {
  position: absolute;
  left: 50%;
  min-width: 42px;
  height: 24px;
  margin-left: 0;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: #0f172a;
  color: #fff;
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  z-index: 2;
  transform: translateX(-50%);
}

.soc-employee-score-site-combo-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
}

.soc-employee-score-site-summary {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.soc-employee-score-site-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.soc-employee-score-site-summary-head strong {
  display: block;
  font-size: var(--type-title-md-size, 20px);
  line-height: var(--type-title-md-line, 28px);
}

.soc-employee-score-site-summary-head .meta {
  margin-top: 4px;
}

.soc-employee-score-site-summary-score {
  flex: 0 0 auto;
  font-size: var(--type-display-lg-size, 28px);
  line-height: var(--type-display-lg-line, 36px);
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-employee-score-site-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.soc-employee-score-site-summary-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

.soc-employee-score-site-summary-card strong {
  font-size: var(--type-title-md-size, 20px);
  line-height: var(--type-title-md-line, 28px);
}

.soc-employee-score-site-summary-label {
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

.soc-employee-score-site-summary-meta {
  display: grid;
  gap: 8px;
}

.soc-employee-score-site-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  text-align: left;
  color: var(--ui-text-primary, var(--soc-text));
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.soc-employee-score-site-row:hover,
.soc-employee-score-site-row.is-selected {
  border-color: color-mix(in srgb, var(--soc-primary) 28%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 42%, var(--ui-bg-surface, #fff));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.soc-employee-score-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
  font-weight: 700;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

.soc-employee-score-site-row-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.soc-employee-score-site-row-list {
  display: grid;
  gap: 12px;
}

.soc-employee-score-site-row-head,
.soc-employee-score-ranking-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.soc-employee-score-site-row-head strong {
  min-width: 0;
  font-size: var(--type-section-md-size, 16px);
  line-height: var(--type-section-md-line, 24px);
  overflow-wrap: anywhere;
}

.soc-employee-score-site-row-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.soc-employee-score-site-row-barline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.soc-employee-score-site-row-volume {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
  white-space: nowrap;
}

.soc-employee-score-site-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
}

.soc-employee-score-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-border) 58%, transparent);
  overflow: hidden;
}

.soc-employee-score-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--soc-primary) 68%, #fff), var(--soc-primary));
}

.soc-employee-score-track--dense {
  height: 8px;
  min-width: 96px;
}

.soc-employee-score-track--site {
  height: 12px;
}

.soc-employee-score-detail-panel {
  position: relative;
  gap: 14px;
  min-height: 0;
  overflow: visible;
}

#employeeScoreSiteInsightPanel::before,
#employeeScoreCompositionSection::before {
  display: none;
}

.soc-employee-score-detail-panel > .soc-workspace-card-head {
  align-items: start;
}

.soc-employee-score-detail-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 999px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  width: fit-content;
  max-width: 100%;
}

.soc-employee-score-detail-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.soc-employee-score-detail-tab.is-active {
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 68%, var(--ui-bg-surface, var(--soc-panel-bg)));
  color: var(--ui-text-primary, var(--soc-text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 34%, transparent);
}

.soc-employee-score-detail-viewport {
  min-height: 0;
  overflow: visible;
}

.soc-employee-score-detail-pane {
  display: grid;
  gap: 16px;
  min-width: 0;
  align-content: start;
}

.soc-employee-score-ranking-pane-head h3 {
  margin: 0;
}

.soc-employee-score-ranking-pane-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.soc-employee-score-ranking-pane-head .meta {
  margin-top: 4px;
}

.soc-employee-score-ranking-count-field {
  width: 100%;
}

.soc-employee-score-ranking-count-field .ds-input {
  min-width: 0;
}

.soc-employee-score-detail-pane .soc-employee-score-table-wrap {
  min-height: 0;
  overflow: auto;
}

.soc-employee-score-site-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.soc-employee-score-ranking-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.soc-employee-score-page-btn {
  min-width: 34px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.soc-employee-score-page-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.soc-employee-score-page-btn.is-active {
  border-color: color-mix(in srgb, var(--soc-primary) 34%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 60%, var(--ui-bg-surface, var(--soc-panel-bg)));
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-employee-score-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  font-weight: 700;
}

.soc-employee-score-insight-body {
  display: grid;
  gap: 10px;
}

.soc-employee-score-insight-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.soc-employee-score-insight-stat {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 82%, #fff);
}

.soc-employee-score-insight-label {
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

.soc-employee-score-insight-stat strong {
  font-size: var(--type-title-md-size, 20px);
  line-height: var(--type-title-md-line, 28px);
}

.soc-employee-score-insight-list {
  display: grid;
  gap: 0;
  padding-top: 2px;
}

.soc-employee-score-insight-hero {
  display: grid;
  gap: 3px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  border-radius: 0;
  background: transparent;
}

.soc-employee-score-insight-kicker {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
}

.soc-employee-score-insight-hero strong {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-employee-score-insight-hero .meta {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}

#employeeScorePanel .soc-mini-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

#employeeScorePanel .soc-mini-row:last-child {
  border-bottom: 0;
}

#employeeScorePanel .soc-mini-row:hover,
#employeeScorePanel .soc-mini-row:active {
  transform: none;
  box-shadow: none;
  background: transparent;
}

#employeeScorePanel .soc-mini-row strong {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#employeeScorePanel .soc-mini-row span {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  padding-left: 10px;
  text-align: right;
  line-height: 1.45;
  word-break: keep-all;
  font-weight: 600;
}

.soc-employee-score-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--ui-divider-default, var(--soc-divider));
  border-radius: 12px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
}

.soc-employee-score-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.soc-employee-score-table th,
.soc-employee-score-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  text-align: left;
  vertical-align: middle;
}

.soc-employee-score-table th {
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
  white-space: nowrap;
}

.soc-employee-score-table td {
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-employee-score-table tbody tr {
  cursor: pointer;
  transition: background 0.16s ease;
}

.soc-employee-score-table tbody tr:hover,
.soc-employee-score-table tbody tr.is-selected {
  background: color-mix(in srgb, var(--soc-primary-soft-bg) 54%, var(--ui-bg-surface, #fff));
}

.soc-employee-score-empty {
  padding: 24px 0 8px;
}

.soc-employee-score-breakdown-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.soc-employee-score-breakdown-visual {
  display: grid;
  gap: 12px;
}

.soc-employee-score-breakdown-bar {
  display: grid;
  place-items: center;
  min-height: 180px;
}

.soc-employee-score-breakdown-segment {
  display: block;
  min-height: 18px;
}

.soc-employee-score-breakdown-segment.is-primary {
  background: #f97316;
}

.soc-employee-score-breakdown-segment.is-support {
  background: #2563eb;
}

.soc-employee-score-breakdown-segment.is-critical {
  background: #dc2626;
}

.soc-employee-score-breakdown-segment.is-status {
  background: #cbd5e1;
}

.soc-employee-score-breakdown-segment.is-empty {
  background: color-mix(in srgb, var(--soc-border) 58%, transparent);
}

.soc-employee-score-breakdown-legend,
.soc-employee-score-breakdown-details {
  display: grid;
  gap: 10px;
}

.soc-employee-score-breakdown-donut-shell {
  display: grid;
  place-items: center;
  min-height: 180px;
}

.soc-employee-score-breakdown-donut {
  width: 156px;
  height: 156px;
}

.soc-employee-score-breakdown-details {
  gap: 0;
}

.soc-employee-score-breakdown-details .soc-mini-row {
  min-width: 0;
  padding: 8px 0;
}

.soc-employee-score-breakdown-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
}

.soc-employee-score-breakdown-legend-item strong {
  margin-left: auto;
}

.soc-employee-score-breakdown-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--score-breakdown-dot, #cbd5e1);
}

.soc-employee-score-breakdown-dot.is-primary {
  background: #f97316;
}

.soc-employee-score-breakdown-dot.is-support {
  background: #2563eb;
}

.soc-employee-score-breakdown-dot.is-critical {
  background: #dc2626;
}

.soc-employee-score-breakdown-dot.is-status {
  background: #cbd5e1;
}

.soc-employee-score-value-scale {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}

.soc-employee-score-value-track {
  position: relative;
  width: 100px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--soc-border) 68%, transparent);
}

.soc-employee-score-value-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, #fb923c 82%, white 18%), #f97316);
}

.soc-employee-score-value-scale strong {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

#employeeScorePanel .soc-employee-score-side-card .soc-employee-score-breakdown-section {
  padding-top: 12px;
  border-top: 1px solid var(--ui-divider-default, var(--soc-divider));
}

@media (max-width: 768px) {
  .soc-profile-top-shell,
  .soc-profile-hero-card,
  .soc-profile-score-main,
  .soc-profile-activity-strip,
  .soc-profile-account-strip {
    grid-template-columns: 1fr;
  }

  .soc-profile-hero-card {
    gap: 12px;
  }

  .soc-profile-hero-main {
    align-items: flex-start;
  }

  .soc-profile-score-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .soc-profile-score-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .soc-profile-score-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .soc-profile-score-head-actions .meta {
    max-width: none;
    text-align: left;
  }

  .soc-profile-score-hero-head {
    flex-wrap: wrap;
  }

  .soc-profile-record-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .soc-profile-detail-sheet-head {
    display: none;
  }

  .soc-profile-detail-sheet-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .soc-profile-record-row-side {
    justify-items: start;
    text-align: left;
  }

  .soc-profile-score-breakdown-popover {
    right: 0;
    left: auto;
    width: min(320px, calc(100vw - 40px));
  }

  .soc-profile-score-breakdown-popover::before {
    right: 9px;
  }

  .soc-employee-score-controls,
  .soc-employee-score-main-grid,
  .soc-employee-score-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .soc-employee-score-summary-grid,
  .soc-employee-score-insight-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .soc-employee-score-mini-donut-row,
  .soc-employee-score-combo-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-employee-score-bullet-legend {
    display: grid;
    gap: 6px;
  }

  .soc-employee-score-breakdown-donut {
    width: 136px;
    height: 136px;
  }

  .soc-employee-score-ranking-pane-head {
    grid-template-columns: 1fr;
  }

  .soc-employee-score-ranking-count-field {
    width: 100%;
    justify-self: stretch;
  }

  .soc-employee-score-table {
    min-width: 720px;
  }
}

/* Menu drawer final */
#menuToggleBtn {
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #6b7280;
}

#menuToggleBtn:not(.hidden) {
  display: inline-flex !important;
}

#menuToggleBtn:hover {
  background: transparent;
  box-shadow: none;
}

#menuToggleBtn:focus-visible {
  outline: 2px solid color-mix(in srgb, #ff6b00 42%, transparent);
  outline-offset: 2px;
}

#menuToggleBtn .menu-toggle-icon-lucide {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#menuSheetPanel .nav-sheet-handle {
  display: none !important;
}

#menuSheetPanel .admin-tab-list[data-legacy-menu="true"],
body.role-hq #menuSheetPanel [data-field-only="true"],
body.role-field #menuSheetPanel [data-hq-only="true"] {
  display: none !important;
}

body.nav-open #menuSheetPanel [data-field-only="true"].hidden,
body.nav-open #menuSheetPanel [data-hq-only="true"].hidden,
body.nav-open #menuSheetPanel [data-field-only="true"][aria-hidden="true"],
body.nav-open #menuSheetPanel [data-hq-only="true"][aria-hidden="true"] {
  display: none !important;
}

body.nav-open #menuSheetPanel,
body.nav-open .container.admin-layout #menuSheetPanel {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(88vw, 360px) !important;
  max-width: min(88vw, 360px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 16px 16px 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--soc-border) !important;
  transform: translateX(0) !important;
  overflow: hidden !important;
  background: var(--soc-nav-sheet-bg) !important;
}

body.nav-open #menuSheetPanel .mobile-menu-pager {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body.nav-open #menuSheetPanel #mobileMenuRootPage {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 4px 8px 8px;
  gap: 6px;
}

body.nav-open #menuSheetPanel > .ds-card-title {
  margin: 4px 8px 4px;
  padding: 0;
  font-size: 15px;
  line-height: 1.2;
}

body.nav-open #menuSheetPanel #mobileAdminShortcutList {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 0 0 4px;
  margin: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.nav-open #menuSheetPanel .soc-menu-group {
  display: block;
  margin: 0;
}

body.nav-open #menuSheetPanel .soc-menu-group + .soc-menu-group {
  margin-top: 4px;
}

body.nav-open #menuSheetPanel .soc-menu-group-toggle {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  min-height: 42px;
  padding: 8px 8px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  color: #6b7280;
  text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  body.nav-open #menuSheetPanel .soc-menu-group-toggle:hover,
  body.nav-open #menuSheetPanel .soc-menu-sub-item:hover {
    background: rgba(0, 0, 0, 0.04);
  }
}

body.nav-open #menuSheetPanel .soc-menu-group-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.nav-open #menuSheetPanel .soc-menu-group-icon svg,
body.nav-open #menuSheetPanel .soc-menu-group-chevron svg,
body.nav-open #menuSheetPanel .soc-menu-sub-item-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.nav-open #menuSheetPanel .soc-menu-group-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: transform 0.18s ease;
}

body.nav-open #menuSheetPanel .soc-menu-group-toggle.is-open .soc-menu-group-chevron {
  transform: rotate(180deg);
}

body.nav-open #menuSheetPanel .soc-menu-group-items {
  display: grid;
  gap: 2px;
  padding: 2px 0 2px;
}

body.nav-open #menuSheetPanel .soc-menu-group-items[hidden] {
  display: none !important;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  min-height: 38px;
  padding: 6px 8px 6px 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  color: #6b7280;
  text-align: left;
  position: relative;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item-label {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item-chevron {
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item.is-active {
  color: #ff6b00;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item.is-active::before {
  background: #ff6b00;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item.is-active .soc-menu-sub-item-chevron {
  color: #ff6b00;
}

body.nav-open #menuSheetPanel .soc-menu-submenu-wrap {
  display: grid;
  gap: 2px;
}

body.nav-open #menuSheetPanel .soc-menu-submenu-list {
  display: grid;
  gap: 2px;
  padding: 2px 0 0 30px;
}

body.nav-open #menuSheetPanel .soc-menu-submenu-wrap--always-open .soc-menu-submenu-list {
  padding-top: 4px;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item--nested {
  min-height: 34px;
  padding: 5px 8px 5px 10px;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 8px;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item--nested::before {
  display: none;
}

body.nav-open #menuSheetPanel .soc-menu-submenu-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.52;
}

@media (max-width: 900px) {
  body.nav-open #menuSheetPanel > .ds-card-title {
    margin: calc(env(safe-area-inset-top, 0px) + 8px) 10px 4px;
  }

  body.nav-open #menuSheetPanel #mobileMenuRootPage {
    min-height: 0;
    padding: 0 8px 8px;
    gap: 4px;
  }

  body.nav-open #menuSheetPanel #mobileAdminShortcutList {
    gap: 4px !important;
    padding: 0 0 2px;
    align-content: start;
    align-items: start;
    grid-auto-rows: min-content;
  }

  body.nav-open #menuSheetPanel .soc-menu-group + .soc-menu-group {
    margin-top: 8px;
  }

  body.nav-open #menuSheetPanel .soc-menu-group {
    align-self: start;
  }

  body.nav-open #menuSheetPanel .soc-menu-group-items {
    margin: 0;
    padding: 0;
  }

  body.nav-open #menuSheetPanel .soc-menu-group-items.is-open:not([hidden]) {
    padding: 2px 0 4px;
  }

  body.role-hq.nav-open #menuSheetPanel .mobile-nav-actions {
    margin-top: 8px;
    padding: 6px 0 0;
    justify-content: flex-start;
  }
}

/* PC browser half-width(769~1023): keep same menu composition as full PC */
@media (min-width: 769px) and (max-width: 1023.98px) {
  body.nav-open #menuSheetPanel .pc-sidebar-only {
    display: block !important;
  }

  body.nav-open #menuSheetPanel #mobileAdminShortcutList > .soc-menu-group:not(.pc-sidebar-only) {
    display: none !important;
  }

  body.nav-open #menuSheetPanel [data-field-only="true"].hidden,
  body.nav-open #menuSheetPanel [data-hq-only="true"].hidden,
  body.nav-open #menuSheetPanel [data-field-only="true"][aria-hidden="true"],
  body.nav-open #menuSheetPanel [data-hq-only="true"][aria-hidden="true"] {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  body.nav-open #menuSheetPanel,
  body.nav-open .container.admin-layout #menuSheetPanel {
    width: 320px !important;
    max-width: 320px !important;
  }
}

/* ===== UI 2026 premium bridge overrides (non-functional) ===== */
.topbar,
.soc-bottom-tab,
.soc-report-headerbar {
  background: var(--soc-surface);
}

.soc-bottom-tab-btn {
  border-radius: 8px;
  border-bottom: 2px solid transparent;
}

.soc-bottom-tab-btn.is-active {
  background: transparent;
  color: var(--soc-primary);
  border-bottom-color: var(--soc-primary);
  box-shadow: none;
}

.panel,
.panel.ds-card,
.ds-card {
  background: var(--soc-panel-bg);
  border: 1px solid var(--soc-border);
  box-shadow: var(--ui-shadow-1);
}

.panel:hover,
.ds-card:hover {
  transform: none;
  box-shadow: var(--ui-shadow-1);
}

.ds-btn,
button,
.report-tab,
.announcement-mode-btn,
.site-filter-btn,
.date-filter-btn,
.sla-page-btn {
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.ds-btn-primary:hover,
.ds-btn-danger:hover {
  filter: none;
}

@media (max-width: 1023px) {
  .panel,
  .panel.ds-card,
  .ds-card {
    border-radius: 10px;
  }

  .ds-btn,
  button,
  .report-tab,
  .announcement-mode-btn,
  .site-filter-btn,
  .date-filter-btn,
  .sla-page-btn {
    min-height: var(--ui-control-h-mobile, 44px);
    border-radius: 8px;
  }

  input,
  select,
  textarea,
  .ds-input,
  .ds-select,
  .ds-textarea {
    min-height: var(--ui-control-h-mobile, 44px);
    border-radius: 8px;
  }
}

@media (min-width: 1024px) {
  .ds-btn,
  button,
  .report-tab,
  .announcement-mode-btn,
  .site-filter-btn,
  .date-filter-btn,
  .sla-page-btn {
    min-height: var(--ui-control-h-desktop, 40px);
    border-radius: 6px;
  }

  input,
  select,
  textarea,
  .ds-input,
  .ds-select,
  .ds-textarea {
    min-height: var(--ui-control-h-desktop, 40px);
    border-radius: 6px;
  }
}

#homeView,
#alertsView,
#ticketsView,
#weeklyView,
#peopleView,
#analyticsView,
#reportsView,
#adminView,
#myProfileView,
#notificationPanel,
#reportPanel {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

#homeView,
#alertsView,
#ticketsView,
#weeklyView,
#peopleView,
#analyticsView,
#reportsView,
#adminView,
#myProfileView {
  contain: content;
}

/* ===== SOC UI 2026 shell/layout normalization (action-safe CSS only) ===== */
:root {
  --ui-breakpoint-mobile-max: 768px;
  --ui-breakpoint-desktop-min: 1024px;
}

.soc-app-shell {
  --soc-tabbar-h: 56px;
}

.soc-startup-overlay {
  z-index: var(--ui-z-startup);
}

.topbar {
  z-index: var(--ui-z-topbar);
  border-bottom: 1px solid var(--ui-border-subtle);
  background: var(--ui-bg-surface);
  box-shadow: none;
}

.nav-backdrop,
.soc-drawer-backdrop,
.modal-overlay {
  z-index: var(--ui-z-overlay);
  background: rgba(0, 0, 0, 0.4);
}

#menuSheetPanel,
#weeklyBuilderSheet,
#reportBuilderSheet,
#participantsSheet,
#reportParticipantPickerSheet,
#homeTrendInsightSheet {
  z-index: var(--ui-z-drawer);
}

#bottomTabNav.soc-bottom-tab {
  z-index: var(--ui-z-tabbar);
  border-top: 1px solid var(--ui-border-subtle);
}

.soc-mini-row {
  min-height: 44px;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.soc-mini-row:hover,
.soc-mini-row:active {
  transform: none;
  box-shadow: none;
}

#alertsView .soc-alerts-filter-compact-row {
  display: none;
}

.incident-mobile-meta,
.incident-mobile-comment,
.incident-mobile-eci,
.ticket-mobile-meta,
.ticket-mobile-comment {
  display: none;
}

#alertsView .incident-list,
#alertsView #alertsTicketList,
#ticketsView .ticket-list,
#peopleView #employeeDirectoryList,
#weeklyView #weeklyPreviewScroller,
#reportsView #reportPreviewScroller,
#analyticsView .soc-analytics-content {
  content-visibility: auto;
  contain-intrinsic-size: auto 680px;
}

@media (max-width: 768px) {
  .topbar {
    min-height: 52px;
    padding: calc(var(--soc-safe-top) + 6px) 10px 6px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .topbar-left {
    min-width: 0;
  }

  .topbar-right {
    gap: 4px;
    padding-right: max(2px, env(safe-area-inset-right, 0px));
  }

  .session-info {
    display: none !important;
  }

  #topbarNotificationPermissionBtn,
  #openPasswordBtn {
    display: none !important;
  }

  #topbarNotificationsBtn.topbar-btn:not(.hidden),
  #topbarMyProfileBtn.topbar-btn:not(.hidden) {
    display: inline-flex !important;
    min-height: var(--ui-control-h-mobile, 44px);
    height: var(--ui-control-h-mobile, 44px);
    border-radius: 8px;
    padding: 0 10px;
  }

  #bottomTabNav.soc-bottom-tab {
    min-height: calc(var(--soc-tabbar-h, 56px) + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(var(--soc-tabbar-h, 56px) + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--soc-tabbar-h, 56px) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
  }

  #bottomTabNav.soc-bottom-tab .soc-bottom-tab-btn {
    min-height: var(--soc-tabbar-h, 56px) !important;
    height: var(--soc-tabbar-h, 56px) !important;
    border-radius: 0;
    border-bottom-width: 0;
  }

  body.nav-open #menuSheetPanel,
  body.nav-open .container.admin-layout #menuSheetPanel,
  #menuSheetPanel,
  .container.admin-layout #menuSheetPanel {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: min(82dvh, 780px) !important;
    max-height: min(82dvh, 780px) !important;
    border-radius: 16px 16px 0 0 !important;
    border: 1px solid var(--ui-border-subtle) !important;
    border-bottom: 0 !important;
    background: var(--ui-bg-surface) !important;
    transform: translateY(104%) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden !important;
  }

  body.nav-open #menuSheetPanel,
  body.nav-open .container.admin-layout #menuSheetPanel {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #menuSheetPanel > .ds-card-title {
    margin: 0 10px 6px !important;
    padding-top: 2px;
  }

  #menuSheetPanel .nav-sheet-handle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin: 0;
    padding: 6px 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: var(--ui-bg-surface);
  }

  #menuSheetPanel .nav-sheet-handle span {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-text-tertiary) 85%, transparent);
  }

  #menuSheetPanel .mobile-menu-pager {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #menuSheetPanel .soc-menu-group-toggle,
  #menuSheetPanel .soc-menu-sub-item,
  #menuSheetPanel .mobile-nav-action-btn,
  #menuSheetPanel .mobile-admin-shortcut-btn {
    min-height: 44px !important;
  }

  #menuSheetPanel .soc-menu-group-label {
    font-size: var(--ui-text-14);
  }

  #menuSheetPanel .soc-menu-sub-item-label {
    font-size: var(--ui-text-13);
  }

  #alertsView .soc-realtime-datebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  #alertsView .soc-realtime-datebar > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    transform: none;
  }

  #alertsView .soc-realtime-date-display,
  #alertsView .soc-realtime-announce-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #alertsView .soc-realtime-date-display #realtimeDateDisplayText,
  #alertsView .soc-realtime-announce-btn .btn-label {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView {
    overflow-x: hidden;
  }

  #alertsView .soc-alerts-filter-compact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 2px;
    min-width: 0;
  }

  #alertsView .soc-alerts-filter-compact-summary {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-size: var(--ui-text-12, 12px);
    line-height: 1.35;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .soc-alerts-filter-compact-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding-inline: 10px;
  }

  #alertsView .soc-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  #alertsView .soc-summary-grid > .soc-summary-card,
  #alertsView .soc-summary-grid > .soc-summary-card-skeleton {
    width: 100%;
    min-width: 0;
  }

  #alertsView .soc-realtime-active-filters {
    display: none !important;
  }

  #alertsView .soc-realtime-active-filters .chip {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    transform: none;
  }

  #alertsView .soc-realtime-active-filters .chip > span {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #filterSheet .filter-chip-wrapper,
  #filterSheet .filter-chip-wrapper.active,
  #filterSheet .date-filter-group.filter-chip-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  #filterSheet,
  #filterSheet .soc-alerts-builder-scroller {
    overflow-x: hidden !important;
  }

  #filterSheet .soc-alerts-participant-pickers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #filterSheet .soc-participant-picker-trigger {
    min-width: 0;
    width: 100%;
    margin-left: 0 !important;
    transform: none !important;
  }

  #filterSheet .soc-participant-picker-summary {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #filterSheet .filter-chip-wrapper .filter-chip,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip:active,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip.is-active,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip.active,
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip[aria-selected="true"],
  #filterSheet .filter-chip-wrapper .soc-alerts-filter-chip[aria-pressed="true"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  #alertsView .incident-card,
  #alertsView .incident-ticket-card,
  #ticketsView .ticket-card {
    position: relative;
    display: grid;
    gap: 4px;
    border-radius: 12px;
    border: 1px solid var(--ui-border-subtle);
    box-shadow: none;
  }

  #alertsView .incident-card {
    padding: 10px 12px;
  }

  #ticketsView .ticket-card {
    padding: 10px 12px;
    gap: 6px;
  }

  #alertsView .incident-card:hover,
  #alertsView .incident-card:active,
  #ticketsView .ticket-card:hover,
  #ticketsView .ticket-card:active {
    transform: none;
    box-shadow: none;
  }

  #alertsView .incident-card .attachment-list,
  #ticketsView .ticket-card .attachment-list,
  #ticketsView .ticket-card .ticket-attachments {
    display: none !important;
  }

  #alertsView .incident-card-head,
  #ticketsView .ticket-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
  }

  #alertsView .incident-title,
  #ticketsView .ticket-title {
    min-width: 0;
    margin: 0;
    padding-right: 92px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-type,
  #alertsView .incident-created-at,
  #alertsView .incident-location,
  #alertsView .incident-type-badge,
  #alertsView .incident-ticket-description,
  #ticketsView .ticket-row-summary {
    display: none !important;
  }

  #alertsView .incident-card-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
    pointer-events: none;
  }

  #alertsView .incident-card-badges .incident-status,
  #alertsView .incident-card-badges .incident-ticket-status {
    margin: 0;
    min-height: 24px;
    font-size: 11px;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }

  #alertsView .incident-card-badges .incident-severity,
  #alertsView .incident-card-badges .incident-location,
  #alertsView .incident-card-badges .incident-type-badge {
    display: none !important;
  }

  #ticketsView .ticket-head-pills {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    gap: 4px;
    pointer-events: none;
  }

  #ticketsView .ticket-head-pills .ticket-status-pill {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.2;
    border-radius: 999px;
    white-space: nowrap;
  }

  #alertsView .incident-mobile-meta,
  #alertsView .incident-mobile-comment,
  #ticketsView .ticket-mobile-meta,
  #ticketsView .ticket-mobile-comment {
    display: block;
    margin: 0;
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-mobile-meta,
  #ticketsView .ticket-mobile-meta {
    padding-right: 96px;
  }

  #alertsView .incident-mobile-eci {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 0;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--soc-warning) 58%, var(--soc-border));
    background: color-mix(in srgb, var(--soc-warning) 14%, transparent);
    color: color-mix(in srgb, var(--soc-warning) 85%, #6b3b00);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    padding: 3px 7px;
    max-width: 44%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #reportsView .soc-report-header-actions.report-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "generate generate"
      "builder export";
    gap: 6px;
    align-items: stretch;
  }

  #reportsView .soc-report-header-actions.report-actions > :nth-child(1) { grid-area: builder; }
  #reportsView .soc-report-header-actions.report-actions > :nth-child(2) { grid-area: generate; }
  #reportsView .soc-report-header-actions.report-actions > :nth-child(3) { grid-area: export; }

  #reportsView .soc-report-header-actions.report-actions .ds-btn,
  #reportsView .soc-report-header-actions.report-actions .soc-export-menu-wrap,
  #reportsView .soc-report-header-actions.report-actions .soc-export-menu-wrap > .ds-btn {
    width: 100%;
    min-width: 0;
  }

  #weeklyView .soc-weekly-header-main {
    align-items: flex-start;
  }

  #weeklyView .soc-weekly-header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  #weeklyView .soc-weekly-header-actions > .ds-btn {
    flex: 1 1 0;
  }

  #weeklyView .soc-weekly-footer-actions {
    position: sticky;
    left: 0;
    right: 0;
    bottom: calc(var(--soc-tabbar-h, 56px) + env(safe-area-inset-bottom, 0px));
    z-index: var(--ui-z-tabbar);
    border-top: 1px solid var(--ui-border-subtle);
    background: var(--ui-bg-surface);
    padding: 10px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #weeklyView .soc-weekly-footer-actions .ds-btn {
    width: 100%;
    min-height: 44px;
  }

  #weeklyView .soc-weekly-ticket-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #weeklyView .soc-weekly-workspace-shell {
    gap: 12px;
  }

  #weeklyView .soc-weekly-control-card,
  #weeklyView .soc-weekly-review-card {
    padding: 14px;
  }

  #homeView .soc-list-mini,
  #ticketsView .ticket-list,
  #alertsView .incident-list {
    gap: 8px;
  }
}

@media (min-width: 769px) {
  .session-info {
    display: block;
  }

  .topbar-right .topbar-btn:not(.hidden) {
    display: inline-flex !important;
  }
}

@media (min-width: 1024px) {
  .container.ds-page {
    padding: 16px 18px 24px;
  }

  #menuSheetPanel,
  .container.admin-layout #menuSheetPanel {
    display: none !important;
  }

  body.nav-open #menuSheetPanel,
  body.nav-open .container.admin-layout #menuSheetPanel,
  body.role-hq.nav-open.admin-menu-sheet-open #menuSheetPanel,
  body.role-hq.nav-open.admin-menu-sheet-open .container.admin-layout #menuSheetPanel {
    display: flex !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 252px !important;
    max-width: 252px !important;
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--ui-border-subtle) !important;
    background: var(--ui-bg-surface) !important;
    overflow: hidden !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: var(--ui-z-drawer) !important;
  }

  body.nav-open #menuSheetPanel .nav-sheet-handle {
    display: none !important;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.24);
  }

  #bottomTabNav.soc-bottom-tab {
    position: static !important;
    inset: auto !important;
    min-height: 56px;
    height: 56px;
    max-height: 56px;
    border-radius: 10px;
  }

  #homeView .soc-home-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 12px;
  }

  #alertsView .incident-list,
  #ticketsView .ticket-list {
    gap: 8px;
  }

  #alertsView .incident-card,
  #alertsView .incident-ticket-card {
    border-radius: 10px;
    box-shadow: none;
    padding: 10px 12px 10px 14px;
  }

  #alertsView .incident-card:hover,
  #alertsView .incident-card:active {
    transform: none;
    box-shadow: none;
    background: var(--ui-bg-surface-muted);
  }

  #alertsView .incident-card-head {
    margin-bottom: 2px;
    align-items: center;
  }

  #alertsView .incident-card-badges {
    margin-bottom: 4px;
  }

  #alertsView .incident-created-at {
    margin: 0;
    font-size: var(--ui-text-12);
  }

  #ticketsView .ticket-card {
    border-radius: 10px;
    box-shadow: none;
    padding: 10px 12px;
    gap: 6px;
  }

  #ticketsView .ticket-card:hover,
  #ticketsView .ticket-card:active {
    transform: none;
    box-shadow: none;
    background: var(--ui-bg-surface-muted);
  }

  #ticketsView .ticket-card-head {
    align-items: center;
  }

  #ticketsView .ticket-meta {
    gap: 4px;
  }

  #alertsView .soc-pc-list-header,
  #ticketsView .soc-pc-list-header {
    display: grid;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    margin: 0 0 6px;
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  }

  #alertsView .soc-pc-incident-header {
    grid-template-columns: 84px 132px 84px 124px minmax(180px, 1.7fr) 136px minmax(170px, 1.1fr) 96px;
  }

  #ticketsView .soc-pc-ticket-header {
    grid-template-columns: 98px 132px 132px minmax(190px, 1.75fr) 140px minmax(170px, 1.1fr) minmax(148px, 1fr);
  }

  #alertsView .soc-pc-two-col-shell,
  #ticketsView .soc-pc-two-col-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 12px;
    align-items: start;
  }

  #alertsView .soc-pc-list-main,
  #ticketsView .soc-pc-list-main {
    min-width: 0;
  }

  #alertsView .soc-pc-side-panel,
  #ticketsView .soc-pc-side-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 360px;
    max-height: calc(100dvh - 122px);
    position: sticky;
    top: 72px;
    padding: 10px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    background: var(--ui-bg-surface, var(--soc-card-bg));
    box-shadow: none;
    overflow: hidden;
  }

  #alertsView .soc-pc-side-panel.hidden,
  #ticketsView .soc-pc-side-panel.hidden {
    display: none !important;
  }

  #alertsView .soc-pc-side-panel-head,
  #ticketsView .soc-pc-side-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  #alertsView .soc-pc-side-panel-head h4,
  #ticketsView .soc-pc-side-panel-head h4 {
    margin: 0;
    font-size: var(--ui-text-14, 14px);
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .soc-pc-side-panel-head-actions,
  #ticketsView .soc-pc-side-panel-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  #alertsView .soc-pc-status-menu-wrap,
  #ticketsView .soc-pc-status-menu-wrap,
  #opsSupportPanel .soc-pc-status-menu-wrap {
    position: relative;
  }

  #alertsView .soc-pc-status-menu,
  #ticketsView .soc-pc-status-menu,
  #opsSupportPanel .soc-pc-status-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 132px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 8px;
    background: var(--ui-bg-surface, var(--soc-card-bg));
    box-shadow: var(--ui-shadow-1, 0 1px 2px rgba(16, 24, 40, 0.06));
    padding: 6px;
    z-index: var(--ui-z-overlay, 300);
  }

  #alertsView .soc-pc-status-menu.hidden,
  #ticketsView .soc-pc-status-menu.hidden,
  #opsSupportPanel .soc-pc-status-menu.hidden {
    display: none !important;
  }

  #alertsView .soc-pc-status-menu-list,
  #ticketsView .soc-pc-status-menu-list,
  #opsSupportPanel .soc-pc-status-menu-list {
    display: grid;
    gap: 4px;
  }

  #alertsView .soc-pc-status-menu-item,
  #ticketsView .soc-pc-status-menu-item,
  #opsSupportPanel .soc-pc-status-menu-item {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-text-primary, var(--soc-text));
    font-size: var(--ui-text-12, 12px);
    font-weight: 600;
    line-height: 1.2;
    padding: 7px 8px;
    text-align: left;
    cursor: pointer;
  }

  #alertsView .soc-pc-status-menu-item:hover,
  #alertsView .soc-pc-status-menu-item:focus-visible,
  #ticketsView .soc-pc-status-menu-item:hover,
  #ticketsView .soc-pc-status-menu-item:focus-visible,
  #opsSupportPanel .soc-pc-status-menu-item:hover,
  #opsSupportPanel .soc-pc-status-menu-item:focus-visible {
    border-color: var(--ui-border-subtle, var(--soc-border));
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
    outline: none;
  }

  #alertsView .soc-pc-status-menu-item.is-current,
  #ticketsView .soc-pc-status-menu-item.is-current,
  #opsSupportPanel .soc-pc-status-menu-item.is-current {
    color: var(--ui-accent, var(--soc-accent));
    border-color: rgba(255, 132, 0, 0.35);
    background: rgba(255, 132, 0, 0.1);
  }

  #alertsView .soc-pc-status-menu-item:disabled,
  #ticketsView .soc-pc-status-menu-item:disabled,
  #opsSupportPanel .soc-pc-status-menu-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  #alertsView #opsCommentPanelDeleteBtn,
  #ticketsView #ticketCommentPanelDeleteBtn {
    min-width: 52px;
    padding-inline: 12px;
    font-weight: 700;
    border-color: rgba(239, 68, 68, 0.22);
    background: #fff;
    color: #b91c1c;
  }

  #alertsView .soc-pc-side-panel .meta,
  #ticketsView .soc-pc-side-panel .meta {
    margin: 0;
    font-size: var(--ui-text-12, 12px);
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #alertsView .soc-pc-side-panel-summary,
  #ticketsView .soc-pc-side-panel-summary {
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 8px;
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
    padding: 8px;
    max-height: 108px;
    overflow: auto;
  }

  #alertsView .soc-pc-side-panel-kv,
  #ticketsView .soc-pc-side-panel-kv {
    margin: 0;
    display: grid;
    gap: 6px;
  }

  #alertsView .soc-pc-side-panel-kv-row,
  #ticketsView .soc-pc-side-panel-kv-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  #alertsView .soc-pc-side-panel-kv-row dt,
  #ticketsView .soc-pc-side-panel-kv-row dt {
    margin: 0;
    font-size: var(--ui-text-12, 12px);
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #alertsView .soc-pc-side-panel-kv-row dd,
  #ticketsView .soc-pc-side-panel-kv-row dd {
    margin: 0;
    min-width: 0;
    font-size: var(--ui-text-12, 12px);
    color: var(--ui-text-primary, var(--soc-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .soc-pc-side-panel-thread,
  #ticketsView .soc-pc-side-panel-thread {
    flex: 1 1 auto;
    min-height: 220px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 8px;
    background: var(--ui-bg-surface, var(--soc-card-bg));
    padding: 8px;
    overflow: auto;
  }

  #alertsView .soc-pc-side-panel-thread-list,
  #ticketsView .soc-pc-side-panel-thread-list {
    display: grid;
    gap: 8px;
  }

  #alertsView .soc-pc-side-panel-thread-item,
  #ticketsView .soc-pc-side-panel-thread-item {
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 8px;
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
    padding: 8px;
    display: grid;
    gap: 6px;
  }

  #alertsView .soc-pc-side-panel-thread-head,
  #ticketsView .soc-pc-side-panel-thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  #alertsView .soc-pc-side-panel-thread-head strong,
  #ticketsView .soc-pc-side-panel-thread-head strong {
    min-width: 0;
    font-size: var(--ui-text-12, 12px);
    color: var(--ui-text-primary, var(--soc-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .soc-pc-side-panel-thread-head span,
  #ticketsView .soc-pc-side-panel-thread-head span {
    flex: 0 0 auto;
    font-size: var(--ui-text-11, 11px);
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #alertsView .soc-pc-side-panel-thread-text,
  #ticketsView .soc-pc-side-panel-thread-text {
    margin: 0;
    font-size: var(--ui-text-12, 12px);
    color: var(--ui-text-primary, var(--soc-text));
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  #alertsView .soc-pc-side-panel-form,
  #ticketsView .soc-pc-side-panel-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  #alertsView .soc-pc-side-panel-form.hidden,
  #ticketsView .soc-pc-side-panel-form.hidden {
    display: none !important;
  }

  #alertsView .soc-pc-side-panel-input,
  #ticketsView .soc-pc-side-panel-input {
    min-width: 0;
  }

  #alertsView .soc-pc-side-panel-actions,
  #ticketsView .soc-pc-side-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  #alertsView .soc-pc-list-header > span,
  #ticketsView .soc-pc-list-header > span {
    min-width: 0;
    font-size: var(--ui-text-12, 12px);
    font-weight: 600;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-list,
  #ticketsView .ticket-list {
    gap: 0;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    overflow: hidden;
    background: var(--ui-bg-surface, var(--soc-card-bg));
  }

  #alertsView .incident-card,
  #alertsView .incident-ticket-card {
    display: grid;
    grid-template-columns: 84px 132px 84px 124px minmax(180px, 1.7fr) 136px minmax(170px, 1.1fr) 96px;
    align-items: center;
    gap: 8px 10px;
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 0;
    padding: 8px 12px;
    box-shadow: none;
  }

  #alertsView .incident-list > .incident-card:last-child {
    border-bottom: 0;
  }

  #alertsView .incident-card::before {
    display: none;
  }

  #alertsView .incident-card-head,
  #alertsView .incident-card-badges {
    display: contents;
  }

  #alertsView .incident-status {
    grid-column: 1;
  }

  #alertsView .incident-type {
    grid-column: 2;
    margin: 0;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #alertsView .incident-severity {
    grid-column: 3;
  }

  #alertsView .incident-location {
    grid-column: 4;
  }

  #alertsView .incident-title {
    grid-column: 5;
    margin: 0;
    font-size: var(--ui-text-13, 13px);
  }

  #alertsView .incident-created-at {
    grid-column: 6;
    margin: 0;
    font-size: var(--ui-text-12, 12px);
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #alertsView .incident-comment-preview {
    display: block;
    grid-column: 7;
    margin: 0;
    font-size: var(--ui-text-12, 12px);
    color: var(--ui-text-secondary, var(--soc-text-sub));
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-head-actions,
  #alertsView .incident-actions {
    grid-column: 8;
    justify-content: flex-end;
    margin: 0;
  }

  #alertsView .incident-actions .viewDetailBtn {
    min-height: 32px;
    padding-inline: 10px;
    white-space: nowrap;
  }

  #alertsView .incident-more-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
  }

  #alertsView .incident-more-menu {
    top: 34px;
    right: 8px;
  }

  #alertsView .incident-attachments,
  #alertsView .instruction-list,
  #alertsView .instruction-form,
  #alertsView .incident-urgent-badge,
  #alertsView .incident-type-badge,
  #alertsView .incident-category-badge {
    display: none !important;
  }

  #alertsView .incident-card.incident-ticket-card .incident-ticket-description {
    display: block !important;
    grid-column: 7;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-size: var(--ui-text-12, 12px);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #ticketsView .ticket-card {
    display: grid;
    grid-template-columns: 98px 132px 132px minmax(190px, 1.75fr) 140px minmax(170px, 1.1fr) minmax(148px, 1fr);
    align-items: center;
    gap: 8px 10px;
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 0;
    padding: 8px 12px;
    box-shadow: none;
  }

  #ticketsView .ticket-list > .ticket-card:last-child {
    border-bottom: 0;
  }

  #alertsView .soc-pc-selectable-row,
  #ticketsView .soc-pc-selectable-row {
    cursor: pointer;
  }

  #alertsView .soc-pc-selectable-row.is-selected,
  #ticketsView .soc-pc-selectable-row.is-selected {
    background: var(--ui-accent-weak, rgba(255, 107, 0, 0.1));
    outline: 1px solid var(--ui-accent, #ff6b00);
    outline-offset: -1px;
  }

  #ticketsView .ticket-card::before {
    display: none;
  }

  #ticketsView .ticket-card-head,
  #ticketsView .ticket-row-summary {
    display: contents;
  }

  #ticketsView .ticket-head-pills {
    grid-column: 1;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  #ticketsView .ticket-urgent-pill {
    display: none;
  }

  #ticketsView .ticket-title {
    grid-column: 4;
    margin: 0;
    font-size: var(--ui-text-13, 13px);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #ticketsView .ticket-row-summary-item {
    margin: 0;
    min-width: 0;
    font-size: var(--ui-text-12, 12px);
    line-height: 1.35;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #ticketsView .ticket-row-summary-type {
    grid-column: 2;
  }

  #ticketsView .ticket-row-summary-site {
    grid-column: 3;
  }

  #ticketsView .ticket-row-summary-updated {
    grid-column: 5;
  }

  #ticketsView .ticket-row-summary-comment {
    grid-column: 6;
  }

  #alertsView .incident-type,
  #alertsView .incident-location,
  #alertsView .incident-title,
  #alertsView .incident-created-at,
  #alertsView .incident-comment-preview,
  #ticketsView .ticket-title,
  #ticketsView .ticket-row-summary-item,
  #ticketsView .ticket-status-pill,
  #ticketsView .ticket-head-pills {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-mobile-meta,
  #alertsView .incident-mobile-comment,
  #alertsView .incident-mobile-eci,
  #ticketsView .ticket-mobile-meta,
  #ticketsView .ticket-mobile-comment,
  #ticketsView .ticket-kv-row {
    display: none !important;
  }

  #ticketsView .ticket-full-content-actions,
  #ticketsView .ticket-actions-row,
  #ticketsView .ticket-comment-form,
  #ticketsView .ticket-attachment-form {
    grid-column: 7;
    justify-self: end;
    width: min(320px, 100%);
    margin: 0;
  }

  #ticketsView .ticket-full-content-actions {
    justify-content: flex-end;
  }

  #ticketsView .ticket-comment-form,
  #ticketsView .ticket-attachment-form {
    grid-template-columns: 1fr auto;
    gap: 6px;
  }

  #ticketsView .ticket-kv-list,
  #ticketsView .ticket-comments,
  #ticketsView .ticket-attachments,
  #ticketsView .ticket-meta-line,
  #ticketsView .ticket-action-row.ticket-extra {
    display: none !important;
  }

  #weeklyView .soc-weekly-preview-viewport {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #weeklyView .soc-weekly-section-card {
    min-height: 184px;
  }

  #weeklyView .soc-weekly-footer-actions {
    position: sticky;
    bottom: 0;
    background: var(--ui-bg-surface);
    border-top: 1px solid var(--ui-border-subtle);
    padding-top: 10px;
    z-index: var(--ui-z-overlay);
  }

  #peopleView table,
  #adminView table {
    table-layout: fixed;
  }
}

#opsSupportPanel {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#opsSupportPanel .soc-ops-support-toolbar {
  display: grid;
  gap: 8px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  padding: 12px 14px;
  box-shadow: var(--ui-shadow-0, 0 1px 2px rgba(15, 23, 42, 0.04));
}

#opsSupportPanel .soc-ops-support-header-top {
  align-items: flex-start;
  flex-wrap: wrap;
}

#opsSupportPanel .soc-ops-support-control-deck {
  display: grid;
  gap: 6px;
}

#opsSupportPanel .soc-ops-support-toolbar-main-row,
#opsSupportPanel .soc-ops-support-toolbar-system {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

#opsSupportPanel .soc-ops-support-toolbar-main-row {
  justify-content: space-between;
}

#opsSupportPanel .soc-ops-support-toolbar-system {
  flex: 1 1 520px;
  justify-content: flex-end;
}

#opsSupportPanel .soc-ops-support-support-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
  padding: 0 2px;
}

#opsSupportPanel .soc-ops-support-toolbar-stats {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

#opsSupportPanel .soc-ops-support-toolbar-stat {
  display: grid;
  gap: 2px;
  min-width: 76px;
  padding: 4px 8px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)));
}

#opsSupportPanel .soc-ops-support-toolbar-stat-label {
  font-size: var(--ui-text-11, 11px);
  line-height: 1.2;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-weight: 600;
}

#opsSupportPanel .soc-ops-support-toolbar-stat > strong {
  font-size: var(--ui-text-13, 13px);
  line-height: 1.3;
  color: var(--ui-text-primary, var(--soc-text));
  font-weight: 700;
}

#opsSupportPanel .soc-ops-support-toolbar-meta {
  margin: 0;
  min-width: 0;
  font-size: var(--ui-text-12, 12px);
  line-height: 1.5;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#opsSupportPanel .soc-ops-support-view-toggle {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: 2px;
  padding: 2px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)));
}

#opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'] {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

#opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].is-active {
  border-color: rgba(234, 88, 12, 0.22);
  background: rgba(234, 88, 12, 0.08);
  color: #c2410c;
}

#opsSupportPanel .soc-ops-support-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

#opsSupportPanel .soc-ops-support-compact-control {
  min-width: 124px;
  height: 36px;
  font-size: var(--ui-text-12, 12px);
  padding: 0 10px;
}

#opsSupportPanel .soc-ops-support-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-toolbar-action-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

#opsSupportPanel .ops-support-month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

#opsSupportPanel .ops-support-month-nav .month-label {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)));
  border-radius: 10px;
  padding: 0 12px;
  min-height: 36px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-text-primary, var(--soc-text));
  cursor: pointer;
}

#opsSupportPanel .ops-support-month-nav .month-arrow {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  background: var(--ui-bg-surface, var(--soc-card-bg));
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  min-height: 36px;
  min-width: 36px;
  padding: 0 8px;
  color: var(--ui-text-primary, var(--soc-text));
}

#opsSupportPanel .ops-support-month-nav .month-label:focus-visible,
#opsSupportPanel .ops-support-month-nav .month-arrow:focus-visible {
  outline: 2px solid var(--ui-accent, var(--soc-primary));
  outline-offset: 2px;
  border-radius: 6px;
}

#opsSupportPanel .soc-ops-support-mini-btn {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
}

#opsSupportPanel .soc-ops-support-mini-icon-btn {
  height: 32px;
  min-height: 32px;
  min-width: 32px;
  padding: 0 8px;
}

#opsSupportPanel .soc-ops-support-export-top-btn {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
}

#opsSupportPanel .soc-ops-support-save-btn {
  min-width: 72px;
}

#opsSupportPanel .soc-ops-support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#opsSupportPanel .soc-ops-support-main {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 14px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  padding: 12px;
  box-shadow: var(--ui-shadow-0, 0 1px 2px rgba(15, 23, 42, 0.04));
}

#opsSupportPanel .soc-ops-support-state {
  border: 1px dashed var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  padding: 12px;
}

#opsSupportPanel .soc-ops-support-view.hidden,
#opsSupportPanel .soc-ops-support-state.hidden {
  display: none !important;
}

#opsSupportPanel .soc-ops-support-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-calendar-weekdays > span {
  text-align: center;
  font-size: var(--ui-text-12, 12px);
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-weight: 600;
}

#opsSupportPanel .soc-ops-support-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-calendar-cell {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  min-height: 108px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  padding: 8px 7px;
  display: grid;
  gap: 5px;
  align-content: start;
}

#opsSupportPanel .soc-ops-support-calendar-cell.is-expanded {
  min-height: 108px;
}

#opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month {
  opacity: 0.58;
}

#opsSupportPanel .soc-ops-support-calendar-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

#opsSupportPanel .soc-ops-support-calendar-cell-head > strong {
  font-size: var(--ui-text-12, 12px);
  color: var(--ui-text-primary, var(--soc-text));
}

#opsSupportPanel .soc-ops-support-calendar-cell-head > span {
  font-size: var(--ui-text-10, 10px);
  color: var(--ui-text-secondary, var(--soc-text-sub));
  white-space: nowrap;
}

#opsSupportPanel .soc-ops-support-calendar-cell-body {
  display: grid;
  gap: 3px;
}

#opsSupportPanel .soc-ops-support-calendar-cell-body.is-expanded {
  gap: 4px;
}

#opsSupportPanel .soc-ops-support-calendar-line,
#opsSupportPanel .soc-ops-support-calendar-more {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  color: var(--ui-text-primary, var(--soc-text));
  border-radius: 8px;
  font-size: var(--ui-text-11, 11px);
  line-height: 1.3;
  padding: 4px 6px;
  text-align: left;
  min-width: 0;
}

#opsSupportPanel .soc-ops-support-calendar-line:hover,
#opsSupportPanel .soc-ops-support-calendar-more:hover {
  background: var(--ui-bg-surface, var(--soc-card-bg));
}

#opsSupportPanel .soc-ops-support-calendar-more.is-expanded {
  font-weight: 700;
}

#opsSupportPanel .soc-ops-support-calendar-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

#opsSupportPanel .soc-ops-support-calendar-line-label {
  min-width: 0;
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#opsSupportPanel .soc-ops-support-calendar-line strong {
  flex: 0 0 auto;
  font-size: var(--ui-text-11, 11px);
  white-space: nowrap;
  text-align: right;
}

#opsSupportPanel .soc-ops-support-calendar-line.is-selected,
#opsSupportPanel .soc-ops-support-calendar-cell.is-selected {
  border-color: rgba(234, 88, 12, 0.38);
  box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.18);
}

#opsSupportPanel .soc-ops-support-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #94a3b8;
  flex: 0 0 7px;
}

#opsSupportPanel .soc-ops-support-status-dot.state-approved {
  background: #22c55e;
}

#opsSupportPanel .soc-ops-support-status-dot.state-pending {
  background: #f59e0b;
}

#opsSupportPanel .soc-ops-support-status-dot.state-unavailable {
  background: #ef4444;
}

#opsSupportPanel .soc-ops-support-status-dot.state-rejected {
  background: #ef4444;
}

#opsSupportPanel .soc-ops-support-status-dot.state-cancelled {
  background: #94a3b8;
}

#opsSupportPanel .cal-line.state-pending {
  background: #FFF3E8;
  border: 1px solid #F5A623;
  color: #A85A00;
  border-radius: 8px;
  padding: 4px 8px;
}

#opsSupportPanel .cal-line.state-approved {
  background: #EAF7EE;
  border: 1px solid #34A853;
  color: #1E6B35;
  border-radius: 8px;
  padding: 4px 8px;
}

#opsSupportPanel .cal-line.state-unavailable {
  background: #FDECEC;
  border: 1px solid #E57373;
  color: #B42318;
  border-radius: 8px;
  padding: 4px 8px;
}

#opsSupportPanel .cal-line.state-rejected {
  background: #FDECEC;
  border: 1px solid #E57373;
  color: #B42318;
  border-radius: 8px;
  padding: 4px 8px;
}

#opsSupportPanel .cal-line.state-cancelled {
  background: #F2F4F7;
  border: 1px solid #CBD5E1;
  color: #667085;
  border-radius: 8px;
  padding: 4px 8px;
}

#opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned {
  background: #FDECEC;
  border: 1px solid #E57373;
  color: #B42318;
}

#opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned:hover {
  background: #FBD5D5;
}

#opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned .soc-ops-support-status-dot {
  background: #ef4444;
}

#opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned.is-selected {
  border-color: #dc2626;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.18);
}

#opsSupportPanel .soc-ops-support-list-groups {
  display: grid;
  gap: 12px;
}

#opsSupportPanel .soc-ops-support-day-group {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  overflow: hidden;
}

#opsSupportPanel .soc-ops-support-day-head {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
  background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  color: var(--ui-text-primary, var(--soc-text));
  min-height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-day-head > strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--ui-text-13, 13px);
}

#opsSupportPanel .soc-ops-support-day-head > span {
  flex: 0 0 auto;
  font-size: var(--ui-text-12, 12px);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#opsSupportPanel .soc-ops-support-over-assigned-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: var(--ui-text-11, 11px);
  font-weight: 700;
  color: #991b1b;
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-over-assigned-note {
  color: #fca5a5;
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned {
  background: rgba(127, 29, 29, 0.82);
  border-color: rgba(248, 113, 113, 0.48);
  color: #fecaca;
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned:hover {
  background: rgba(153, 27, 27, 0.88);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned .soc-ops-support-status-dot {
  background: #f87171;
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned.is-selected {
  border-color: rgba(248, 113, 113, 0.68);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.2);
}

#opsSupportPanel .soc-ops-support-day-table-wrap.hidden {
  display: none !important;
}

#opsSupportPanel .soc-ops-support-day-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#opsSupportPanel .soc-ops-support-day-table th,
#opsSupportPanel .soc-ops-support-day-table td {
  border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
  padding: 9px 10px;
  font-size: var(--ui-text-12, 12px);
  line-height: 1.35;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

#opsSupportPanel .soc-ops-support-day-table th {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-weight: 600;
  background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
}

#opsSupportPanel .soc-ops-support-day-table tbody tr:last-child td {
  border-bottom: 0;
}

#opsSupportPanel .soc-ops-support-day-status-cell {
  overflow: visible;
  text-overflow: clip;
}

#opsSupportPanel .soc-ops-support-day-row {
  cursor: pointer;
}

#opsSupportPanel .soc-ops-support-day-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

#opsSupportPanel .soc-ops-support-day-row:focus-visible {
  outline: 2px solid var(--ui-accent, var(--soc-primary));
  outline-offset: -2px;
}

#opsSupportPanel .support-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  color: var(--ui-text-primary, var(--soc-text));
  background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  font-size: var(--ui-text-11, 11px);
  font-weight: 600;
  line-height: 1.2;
}

#opsSupportPanel .support-status-chip.state-pending {
  background: #FFF3E8;
  color: #A85A00;
  border: 1px solid #F5A623;
}

#opsSupportPanel .support-status-chip.state-approved {
  background: #EAF7EE;
  color: #1E6B35;
  border: 1px solid #34A853;
}

#opsSupportPanel .support-status-chip.state-unavailable {
  background: #FDECEC;
  color: #B42318;
  border: 1px solid #E57373;
}

#opsSupportPanel .support-status-chip.state-rejected {
  background: #FDECEC;
  color: #B42318;
  border: 1px solid #E57373;
}

#opsSupportPanel .support-status-chip.state-cancelled {
  background: #F2F4F7;
  color: #667085;
  border: 1px solid #CBD5E1;
}

#opsSupportPanel .support-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ui-text-12, 12px);
  line-height: 1.3;
  color: var(--ui-text-primary, var(--soc-text));
  font-weight: 600;
}

#opsSupportPanel .support-status-inline.state-approved {
  color: #166534;
}

#opsSupportPanel .support-status-inline.state-pending {
  color: #a16207;
}

#opsSupportPanel .support-status-inline.state-unavailable {
  color: #b42318;
}

#opsSupportPanel .support-status-inline.state-rejected {
  color: #b42318;
}

#opsSupportPanel .support-status-inline.state-cancelled {
  color: #667085;
}

#opsSupportPanel .soc-ops-support-sheet {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 14px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  max-height: calc(100dvh - 96px);
  overflow: auto;
  box-shadow: var(--ui-shadow-0, 0 1px 2px rgba(15, 23, 42, 0.04));
}

#opsSupportPanel .soc-ops-support-sheet.hidden {
  display: none !important;
}

#opsSupportPanel .soc-ops-support-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
}

#opsSupportPanel .soc-ops-support-sheet-head-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#opsSupportPanel .soc-ops-support-sheet-head-copy > .meta:empty {
  display: none;
}

#opsSupportPanel .soc-ops-support-sheet-head-copy > h3 {
  margin: 0;
  font-size: var(--ui-text-16, 16px);
  line-height: 1.35;
}

#opsSupportPanel .soc-ops-support-sheet-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#opsSupportPanel .soc-ops-support-status-action {
  border-color: rgba(234, 88, 12, 0.22);
  background: rgba(234, 88, 12, 0.08);
  color: #c2410c;
}

#opsSupportPanel .soc-ops-support-status-action:hover,
#opsSupportPanel .soc-ops-support-status-action:focus-visible {
  border-color: rgba(234, 88, 12, 0.36);
  background: rgba(234, 88, 12, 0.14);
  color: #9a3412;
}

#opsSupportPanel .soc-ops-support-status-action:disabled {
  opacity: 0.52;
  background: rgba(148, 163, 184, 0.08);
  border-color: var(--ui-border-subtle, var(--soc-border));
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#opsSupportPanel .soc-ops-support-sheet-status-wrap {
  position: relative;
  flex: 0 0 auto;
}

#opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 132px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  box-shadow: var(--ui-shadow-1, 0 1px 2px rgba(16, 24, 40, 0.06));
  padding: 6px;
  z-index: var(--ui-z-overlay, 300);
}

#opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu.hidden {
  display: none !important;
}

#opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-list {
  display: grid;
  gap: 4px;
}

#opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-text-primary, var(--soc-text));
  font-size: var(--ui-text-12, 12px);
  font-weight: 600;
  line-height: 1.2;
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
}

#opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item:hover,
#opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item:focus-visible {
  border-color: var(--ui-border-subtle, var(--soc-border));
  background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  outline: none;
}

#opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item.is-current {
  color: var(--ui-accent, var(--soc-accent));
  border-color: rgba(255, 132, 0, 0.35);
  background: rgba(255, 132, 0, 0.1);
}

#opsSupportPanel .soc-ops-support-sheet-status-wrap .soc-pc-status-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#opsSupportPanel .soc-ops-support-export-drawer {
  position: fixed;
  top: 56px;
  right: 0;
  width: min(360px, 96vw);
  height: calc(100dvh - 56px);
  max-height: calc(100dvh - 56px);
  border-left: 1px solid var(--ui-border-strong, var(--soc-border));
  background: var(--ui-bg-surface, var(--soc-card-bg));
  box-shadow: var(--ui-shadow-2, 0 12px 24px rgba(15, 23, 42, 0.18));
  padding: 16px;
  display: grid;
  gap: 12px;
  overflow: auto;
  z-index: var(--ui-z-drawer, 420);
}

#opsSupportPanel .soc-ops-support-export-drawer.hidden {
  display: none !important;
}

#opsSupportPanel .soc-ops-support-export-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-export-drawer-head > h3 {
  margin: 0;
  font-size: var(--ui-text-14, 14px);
}

#opsSupportPanel .soc-ops-support-sheet-tab.hidden {
  display: none !important;
}

#opsSupportPanel .soc-ops-support-sheet-tab {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

#opsSupportPanel .soc-ops-support-summary-content {
  display: grid;
  flex: 1 1 auto;
  gap: 10px;
  min-height: 0;
}

#opsSupportPanel .soc-ops-support-detail-section--summary {
  gap: 12px;
}

#opsSupportPanel .soc-ops-support-detail-summary-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: var(--ui-text-12, 12px);
  line-height: 1.35;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#opsSupportPanel .soc-ops-support-detail-summary-context > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#opsSupportPanel .soc-ops-support-detail-summary-context > span:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.6;
}

#opsSupportPanel .soc-ops-support-detail-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-detail-summary-metric {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)));
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}

#opsSupportPanel .soc-ops-support-detail-summary-label {
  font-size: var(--ui-text-11, 11px);
  line-height: 1.2;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-weight: 600;
}

#opsSupportPanel .soc-ops-support-detail-summary-metric strong {
  font-size: var(--ui-text-15, 15px);
  line-height: 1.35;
  color: var(--ui-text-primary, var(--soc-text));
}

#opsSupportPanel .soc-ops-support-self-resolved-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(22, 163, 74, 0.18);
  background: rgba(22, 163, 74, 0.08);
  color: #166534;
  font-size: var(--ui-text-11, 11px);
  font-weight: 600;
  line-height: 1.2;
}

#opsSupportPanel .soc-ops-support-detail-summary-purpose {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}

#opsSupportPanel .soc-ops-support-detail-summary-purpose p {
  margin: 0;
  font-size: var(--ui-text-13, 13px);
  line-height: 1.5;
  color: var(--ui-text-primary, var(--soc-text));
  word-break: break-word;
}

#opsSupportPanel .soc-ops-support-detail-more {
  border-top: 1px dashed var(--ui-border-subtle, var(--soc-border));
  padding-top: 8px;
}

#opsSupportPanel .soc-ops-support-detail-more summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--ui-text-12, 12px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#opsSupportPanel .soc-ops-support-detail-more summary::-webkit-details-marker {
  display: none;
}

#opsSupportPanel .soc-ops-support-detail-more summary::after {
  content: "펼치기";
  margin-left: 6px;
  font-weight: 500;
  color: var(--ui-text-tertiary, var(--ui-text-secondary, var(--soc-text-sub)));
}

#opsSupportPanel .soc-ops-support-detail-more[open] summary::after {
  content: "접기";
}

#opsSupportPanel .soc-ops-support-detail-more .soc-ops-support-detail-kv {
  margin-top: 10px;
}

#opsSupportPanel .soc-ops-support-detail-more-span {
  grid-column: 1 / -1;
}

#opsSupportPanel .soc-ops-support-summary-empty {
  min-height: 152px;
  display: grid;
  align-content: start;
  justify-items: start;
  text-align: left;
  border: 1px dashed var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  padding: 14px;
  gap: 4px;
}

#opsSupportPanel .soc-ops-support-summary-empty.is-inline {
  min-height: 88px;
}

#opsSupportPanel .soc-ops-support-summary-hero {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  padding: 10px;
  display: grid;
  gap: 4px;
}

#opsSupportPanel .soc-ops-support-summary-count {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
  line-height: 1.1;
}

#opsSupportPanel .soc-ops-support-summary-kv {
  margin: 0;
  display: grid;
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-summary-kv > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

#opsSupportPanel .soc-ops-support-summary-kv dt {
  margin: 0;
  font-size: var(--ui-text-12, 12px);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#opsSupportPanel .soc-ops-support-summary-kv dd {
  margin: 0;
  font-size: var(--ui-text-12, 12px);
  color: var(--ui-text-primary, var(--soc-text));
  line-height: 1.4;
  word-break: break-word;
}

#opsSupportPanel .soc-ops-support-summary-work-purpose {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#opsSupportPanel .soc-ops-support-summary-memo-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#opsSupportPanel .soc-ops-support-summary-day-table-wrap {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  overflow: hidden;
}

#opsSupportPanel .soc-ops-support-summary-day-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#opsSupportPanel .soc-ops-support-summary-day-table th,
#opsSupportPanel .soc-ops-support-summary-day-table td {
  border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
  padding: 8px;
  font-size: var(--ui-text-12, 12px);
  text-align: left;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#opsSupportPanel .soc-ops-support-summary-day-table tbody tr:last-child td {
  border-bottom: 0;
}

#opsSupportPanel .soc-ops-support-detail-section {
  display: grid;
  gap: 12px;
  padding: 0;
}

#opsSupportPanel .soc-ops-support-detail-section + .soc-ops-support-detail-section {
  padding-top: 4px;
  border-top: 1px solid var(--ui-border-subtle, var(--soc-border));
}

#opsSupportPanel .soc-ops-support-detail-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#opsSupportPanel .soc-ops-support-detail-section-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#opsSupportPanel .soc-ops-support-detail-section-title {
  margin: 0;
  font-size: var(--ui-text-14, 14px);
  line-height: 1.35;
  color: var(--ui-text-primary, var(--soc-text));
}

#opsSupportPanel .soc-ops-support-detail-kv {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

#opsSupportPanel .soc-ops-support-detail-kv > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#opsSupportPanel .soc-ops-support-detail-kv dt {
  margin: 0;
  font-size: var(--ui-text-11, 11px);
  line-height: 1.3;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-weight: 600;
}

#opsSupportPanel .soc-ops-support-detail-kv dd {
  margin: 0;
  font-size: var(--ui-text-12, 12px);
  line-height: 1.45;
  color: var(--ui-text-primary, var(--soc-text));
  word-break: break-word;
}

#opsSupportPanel .soc-ops-support-day-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#opsSupportPanel .soc-ops-support-day-summary > div {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)));
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}

#opsSupportPanel .soc-ops-support-day-summary-label {
  font-size: var(--ui-text-11, 11px);
  line-height: 1.2;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-weight: 600;
}

#opsSupportPanel .soc-ops-support-day-summary strong {
  font-size: var(--ui-text-14, 14px);
  line-height: 1.35;
  color: var(--ui-text-primary, var(--soc-text));
}

#opsSupportPanel .soc-ops-support-detail-table-wrap {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  overflow: hidden;
}

#opsSupportPanel .soc-ops-support-day-request-table tbody tr {
  cursor: pointer;
}

#opsSupportPanel .soc-ops-support-day-request-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03);
}

#opsSupportPanel .soc-ops-support-detail-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}

#opsSupportPanel .soc-ops-support-detail-timeline::before {
  display: none;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  position: relative;
  min-width: 0;
  align-items: flex-start;
  padding: 0 0 16px;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-empty {
  grid-template-columns: 1fr;
  padding-left: 0;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item:last-child {
  padding-bottom: 0;
}

#opsSupportPanel .soc-ops-support-detail-timeline-connector {
  position: absolute;
  top: 9px;
  bottom: -14px;
  left: 7px;
  width: 2px;
  background: #dbe4ee;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item:last-child .soc-ops-support-detail-timeline-connector,
#opsSupportPanel .soc-ops-support-detail-timeline-item.is-empty .soc-ops-support-detail-timeline-connector {
  display: none;
}

#opsSupportPanel .soc-ops-support-detail-timeline-dot {
  width: 12px;
  height: 12px;
  margin-top: 3px;
  margin-left: 0;
  border-radius: 999px;
  background: #64748b;
  border: 2px solid #ffffff;
  box-shadow: none;
  position: relative;
  z-index: 1;
  justify-self: center;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-created .soc-ops-support-detail-timeline-dot {
  background: #ea580c;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-status .soc-ops-support-detail-timeline-dot {
  background: #334155;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-approved .soc-ops-support-detail-timeline-dot {
  background: #1ebfa3;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-pending .soc-ops-support-detail-timeline-dot {
  background: #ffbf3c;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-danger .soc-ops-support-detail-timeline-dot {
  background: #ff6b6b;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-muted .soc-ops-support-detail-timeline-dot {
  background: #64748b;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-worker .soc-ops-support-detail-timeline-dot {
  background: #1ebfa3;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-note .soc-ops-support-detail-timeline-dot {
  background: #64748b;
}

#opsSupportPanel .soc-ops-support-detail-timeline-body {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)));
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

#opsSupportPanel .soc-ops-support-detail-timeline-head {
  display: grid;
  gap: 4px;
}

#opsSupportPanel .soc-ops-support-detail-timeline-head > strong {
  font-size: var(--ui-text-12, 12px);
  line-height: 1.35;
  color: var(--ui-text-primary, var(--soc-text));
}

#opsSupportPanel .soc-ops-support-detail-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}

#opsSupportPanel .soc-ops-support-detail-timeline-copy {
  margin: 0;
  font-size: var(--ui-text-12, 12px);
  line-height: 1.45;
  color: var(--ui-text-primary, var(--soc-text));
  word-break: break-word;
}

#opsSupportPanel .soc-ops-support-confirmed-block {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)));
  padding: 12px;
  display: grid;
  gap: 10px;
}

#opsSupportPanel .soc-ops-support-confirmed-block.is-disabled {
  border-color: color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white);
  background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8))) 82%, white);
}

#opsSupportPanel .soc-ops-support-confirmed-disabled {
  min-height: 92px;
  border: 1px dashed var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.06);
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
}

#opsSupportPanel .soc-ops-support-confirmed-disabled-copy {
  margin: 0;
  font-size: var(--ui-text-13, 13px);
  line-height: 1.35;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-weight: 600;
}

#opsSupportPanel .soc-ops-support-confirmed-block > h4 {
  margin: 0;
  font-size: var(--ui-text-13, 13px);
}

#opsSupportPanel .soc-ops-support-confirmed-roster-table-wrap {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  overflow: hidden;
}

#opsSupportPanel .soc-ops-support-confirmed-roster-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#opsSupportPanel .soc-ops-support-confirmed-roster-table th,
#opsSupportPanel .soc-ops-support-confirmed-roster-table td {
  border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
  padding: 8px;
  font-size: var(--ui-text-12, 12px);
  line-height: 1.35;
  text-align: left;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#opsSupportPanel .soc-ops-support-confirmed-roster-table th {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  font-weight: 600;
}

#opsSupportPanel .soc-ops-support-confirmed-roster-table tbody tr:last-child td {
  border-bottom: 0;
}

#opsSupportPanel .confirmed-worker-list {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

#opsSupportPanel .worker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  position: relative;
  z-index: 1;
}

#opsSupportPanel .worker-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: fit-content;
  white-space: nowrap;
}

#opsSupportPanel .worker-row-actions .ds-btn {
  min-width: 34px;
}

#opsSupportPanel .worker-row-actions .worker-row-edit-btn {
  border-color: color-mix(in srgb, var(--soc-accent, #f97316) 44%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-accent, #f97316) 12%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: color-mix(in srgb, var(--soc-accent, #ea580c) 82%, var(--ui-text-primary, var(--soc-text)));
}

#opsSupportPanel .worker-row-actions .worker-row-edit-btn:hover,
#opsSupportPanel .worker-row-actions .worker-row-edit-btn:focus-visible {
  border-color: color-mix(in srgb, var(--soc-accent, #f97316) 60%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-accent, #f97316) 18%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: color-mix(in srgb, var(--soc-accent, #c2410c) 88%, var(--ui-text-primary, var(--soc-text)));
}

#opsSupportPanel .worker-row-actions .worker-row-delete-btn {
  border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 44%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-danger, #dc2626) 10%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: color-mix(in srgb, var(--soc-danger, #dc2626) 84%, var(--ui-text-primary, var(--soc-text)));
}

#opsSupportPanel .worker-row-actions .worker-row-delete-btn:hover,
#opsSupportPanel .worker-row-actions .worker-row-delete-btn:focus-visible {
  border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 62%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-danger, #dc2626) 16%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: color-mix(in srgb, var(--soc-danger, #b91c1c) 88%, var(--ui-text-primary, var(--soc-text)));
}

[data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-edit-btn {
  border-color: color-mix(in srgb, var(--soc-accent, #fb923c) 48%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-accent, #fb923c) 16%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: color-mix(in srgb, var(--soc-accent, #fdba74) 82%, var(--ui-text-primary, var(--soc-text)));
}

[data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-delete-btn {
  border-color: color-mix(in srgb, var(--soc-danger, #ef4444) 50%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-danger, #ef4444) 16%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: color-mix(in srgb, var(--soc-danger, #fecaca) 78%, var(--ui-text-primary, var(--soc-text)));
}

#opsSupportPanel .worker-row.is-assigned {
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--soc-success) 24%, var(--ui-border-subtle, var(--soc-border)));
  border-radius: 10px;
  background: color-mix(in srgb, var(--soc-success) 8%, var(--ui-bg-surface, var(--soc-card-bg)));
}

#opsSupportPanel .worker-row.is-over-assigned {
  border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 42%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-danger, #dc2626) 9%, var(--ui-bg-surface, var(--soc-card-bg)));
}

[data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned {
  border-color: color-mix(in srgb, var(--soc-danger, #ef4444) 50%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-danger, #ef4444) 14%, var(--ui-bg-surface, var(--soc-card-bg)));
}

#opsSupportPanel .worker-row input[type="text"] {
  width: 100%;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  color: var(--ui-text-primary, var(--soc-text));
  font-size: var(--ui-text-12, 12px);
  line-height: 1.4;
  padding: 8px 10px;
}

#opsSupportPanel .worker-row.is-assigned input[type="text"][readonly] {
  background: color-mix(in srgb, var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)) 78%, white);
  color: var(--ui-text-primary, var(--soc-text));
  cursor: default;
}

#opsSupportPanel .worker-row.is-over-assigned input[type="text"][readonly] {
  border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 34%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-danger, #dc2626) 8%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: color-mix(in srgb, var(--soc-danger, #991b1b) 74%, var(--ui-text-primary, var(--soc-text)));
}

#opsSupportPanel .worker-row.is-over-assigned .ds-btn {
  border-color: color-mix(in srgb, var(--soc-danger, #dc2626) 34%, var(--ui-border-subtle, var(--soc-border)));
  color: color-mix(in srgb, var(--soc-danger, #b91c1c) 72%, var(--ui-text-primary, var(--soc-text)));
  background: color-mix(in srgb, var(--soc-danger, #dc2626) 7%, var(--ui-bg-surface, var(--soc-card-bg)));
}

[data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned input[type="text"][readonly] {
  border-color: color-mix(in srgb, var(--soc-danger, #ef4444) 40%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-danger, #ef4444) 12%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: color-mix(in srgb, var(--soc-danger, #fecaca) 72%, var(--ui-text-primary, var(--soc-text)));
}

[data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .ds-btn {
  border-color: color-mix(in srgb, var(--soc-danger, #ef4444) 40%, var(--ui-border-subtle, var(--soc-border)));
  color: color-mix(in srgb, var(--soc-danger, #fecaca) 70%, var(--ui-text-primary, var(--soc-text)));
  background: color-mix(in srgb, var(--soc-danger, #ef4444) 12%, var(--ui-bg-surface, var(--soc-card-bg)));
}

#opsSupportPanel .worker-row-actions .worker-row-edit-btn,
#opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn,
[data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-edit-btn,
[data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn {
  background: var(--soc-primary) !important;
  border-color: var(--soc-primary-deep) !important;
  color: var(--soc-on-primary) !important;
}

#opsSupportPanel .worker-row-actions .worker-row-edit-btn:hover,
#opsSupportPanel .worker-row-actions .worker-row-edit-btn:focus-visible,
#opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn:hover,
#opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn:focus-visible,
[data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-edit-btn:hover,
[data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-edit-btn:focus-visible,
[data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn:hover,
[data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-edit-btn:focus-visible {
  background: color-mix(in srgb, var(--soc-primary) 92%, black) !important;
  border-color: color-mix(in srgb, var(--soc-primary-deep) 88%, black) !important;
  color: var(--soc-on-primary) !important;
}

#opsSupportPanel .worker-row-actions .worker-row-delete-btn,
#opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn,
[data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-delete-btn,
[data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn {
  background: var(--soc-danger, #dc2626) !important;
  border-color: var(--soc-danger-deep, #991b1b) !important;
  color: var(--soc-on-danger, #ffffff) !important;
}

#opsSupportPanel .worker-row-actions .worker-row-delete-btn:hover,
#opsSupportPanel .worker-row-actions .worker-row-delete-btn:focus-visible,
#opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn:hover,
#opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn:focus-visible,
[data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-delete-btn:hover,
[data-theme="dark"] #opsSupportPanel .worker-row-actions .worker-row-delete-btn:focus-visible,
[data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn:hover,
[data-theme="dark"] #opsSupportPanel .worker-row.is-over-assigned .worker-row-delete-btn:focus-visible {
  background: color-mix(in srgb, var(--soc-danger, #dc2626) 88%, black) !important;
  border-color: color-mix(in srgb, var(--soc-danger-deep, #991b1b) 88%, black) !important;
  color: var(--soc-on-danger, #ffffff) !important;
}

#opsSupportPanel .worker-add-btn {
  margin-top: 10px;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

#opsSupportPanel .worker-row [data-action="ops-support-save-workers"],
#opsSupportPanel .worker-row [data-action="ops-support-save-confirmed-worker"],
#opsSupportPanel .worker-row [data-action="ops-support-confirm-worker-row"],
#opsSupportPanel .worker-row [data-action="ops-support-save-edited-worker-row"] {
  min-width: 34px;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

#opsSupportPanel .worker-row [data-action="ops-support-remove-worker-row"] {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

#opsSupportPanel .worker-row-spacer {
  width: 34px;
  min-width: 34px;
  height: 34px;
}

#opsSupportPanel .export-section {
  display: grid;
  gap: 8px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  padding: 10px;
}

#opsSupportPanel .export-section-title {
  margin: 0;
  font-size: var(--ui-text-13, 13px);
}

#opsSupportPanel .export-option-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  padding: 6px 8px;
}

#opsSupportPanel .export-option-card > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#opsSupportPanel .export-option-card > span > strong {
  font-size: var(--ui-text-12, 12px);
}

#opsSupportPanel .export-option-card > span > small {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: var(--ui-text-11, 11px);
}

#opsSupportPanel .export-file-summary {
  gap: 4px;
}

#opsSupportPanel .soc-ops-support-export-block {
  display: grid;
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-export-block > h4 {
  margin: 0;
  font-size: var(--ui-text-13, 13px);
}

#opsSupportPanel .soc-ops-support-export-scope-list,
#opsSupportPanel .soc-ops-support-export-columns {
  display: grid;
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-export-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#opsSupportPanel .soc-ops-support-export-scope-list label,
#opsSupportPanel .soc-ops-support-export-columns label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ui-text-12, 12px);
  color: var(--ui-text-primary, var(--soc-text));
}

#opsSupportPanel .soc-ops-support-export-columns input[type="checkbox"],
#opsSupportPanel .soc-ops-support-export-scope-list input[type="radio"] {
  margin: 0;
}

#opsSupportPanel .soc-ops-support-worker-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ui-z-drawer) + 8);
}

#opsSupportPanel .soc-ops-support-worker-modal.hidden {
  display: none !important;
}

#opsSupportPanel .soc-ops-support-worker-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

#opsSupportPanel .soc-ops-support-worker-modal-dialog {
  position: relative;
  width: min(760px, 94vw);
  max-height: 90vh;
  margin: 6vh auto 0;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

#opsSupportPanel .soc-ops-support-worker-modal-head,
#opsSupportPanel .soc-ops-support-worker-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
}

#opsSupportPanel .soc-ops-support-worker-modal-head > h3 {
  margin: 0;
  font-size: var(--ui-text-14, 14px);
}

#opsSupportPanel .soc-ops-support-worker-modal-foot {
  justify-content: flex-end;
  border-bottom: 0;
  border-top: 1px solid var(--ui-border-subtle, var(--soc-border));
}

#opsSupportPanel .soc-ops-support-worker-modal-body {
  padding: 12px;
  overflow: auto;
}

@media (min-width: 1024px) {
  body.soc-desktop-shell #opsSupportPanel {
    max-height: calc(100dvh - 108px);
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .panel-title-row {
    margin-bottom: 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-page-header-main {
    display: grid;
    gap: 4px;
  }

  #opsSupportPanel .soc-ops-support-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  #opsSupportPanel .soc-ops-support-layout.has-detail-panel {
    grid-template-columns: minmax(0, 2.24fr) minmax(360px, 392px);
  }

  #opsSupportPanel .soc-ops-support-sheet {
    position: sticky;
    top: 72px;
    max-height: calc(100dvh - 120px);
    max-width: 392px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-drawer {
    top: 72px;
    height: calc(100dvh - 72px);
    max-height: calc(100dvh - 72px);
    border-top: 0;
    border-right: 0;
    box-shadow: none;
  }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  #opsSupportPanel .soc-ops-support-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #opsSupportPanel .soc-ops-support-sheet {
    position: fixed;
    top: 56px;
    right: 0;
    width: min(392px, 96vw);
    height: calc(100dvh - 56px);
    max-height: calc(100dvh - 56px);
    border-radius: 0;
    z-index: var(--ui-z-drawer);
  }
}

@media (max-width: 1023px) {
  #opsSupportPanel .soc-ops-support-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #opsSupportPanel .soc-ops-support-toolbar-main-row,
  #opsSupportPanel .soc-ops-support-toolbar-system {
    width: 100%;
    justify-content: space-between;
  }

  #opsSupportPanel .soc-ops-support-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #opsSupportPanel .worker-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  #opsSupportPanel .soc-ops-support-detail-kv,
  #opsSupportPanel .soc-ops-support-day-summary {
    grid-template-columns: 1fr;
  }

  #opsSupportPanel .soc-ops-support-sheet {
    max-height: none;
  }
}

/* ===== Desktop shell + density normalization (PC only) ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell {
    overflow: hidden;
    --soc-desktop-sidebar-width: 220px;
    --soc-desktop-sidebar-expanded-width: 220px;
  }

  body.soc-desktop-shell .soc-app-shell {
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    height: 100dvh;
  }

  body.soc-desktop-shell .topbar {
    min-height: 56px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--soc-border-strong);
  }

  body.soc-desktop-shell #menuToggleBtn {
    display: none !important;
  }

  body.soc-desktop-shell .container.ds-page,
  body.soc-desktop-shell .container.admin-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    min-height: calc(100dvh - 56px);
    height: calc(100dvh - 56px);
    max-height: calc(100dvh - 56px);
    padding: 0 20px 0 0 !important;
    gap: 0 !important;
    column-gap: 0 !important;
    grid-template-columns: var(--soc-desktop-sidebar-width) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch;
    overflow: hidden;
    overflow-x: hidden;
    background:
      linear-gradient(180deg, var(--soc-sidebar-bg-1) 0%, var(--soc-sidebar-bg-2) 100%) left top / var(--soc-desktop-sidebar-width) 100% no-repeat,
      linear-gradient(90deg, transparent calc(var(--soc-desktop-sidebar-width) - 1px), var(--soc-sidebar-divider) calc(var(--soc-desktop-sidebar-width) - 1px), var(--soc-sidebar-divider) var(--soc-desktop-sidebar-width), transparent var(--soc-desktop-sidebar-width)) left top / 100% 100% no-repeat,
      var(--soc-bg);
  }

  body.soc-desktop-shell .container.ds-page > :not(#menuSheetPanel),
  body.soc-desktop-shell .container.admin-layout > :not(#menuSheetPanel) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    height: calc(100dvh - 56px);
    max-height: calc(100dvh - 56px);
    margin-top: 0;
    margin-bottom: 0;
    align-self: stretch;
    box-sizing: border-box;
    padding-left: 22px;
    padding-right: 8px;
    padding-top: 20px;
    padding-bottom: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  body.soc-desktop-shell :is(
    #dashboardPanel,
    #reportPanel,
    #reportsHubView,
    #accountPanel,
    #managerStatusPanel,
    #employeeScorePanel,
    #opsSupportPanel,
    #siteReportsPanel,
    #typeReportsPanel,
    #announcementPanel,
    #notificationPanel,
    #themePanel,
    #hqReminderPanel,
    #auditPanel,
    #slaPanel,
    #excelPanel,
    #googleSheetsPanel
  ) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  body.soc-desktop-shell.role-hq:not(.nav-open) #menuSheetPanel,
  body.soc-desktop-shell.role-field:not(.nav-open) #menuSheetPanel,
  body.soc-desktop-shell #menuSheetPanel,
  body.soc-desktop-shell .container.admin-layout #menuSheetPanel {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch;
    width: var(--soc-desktop-sidebar-width) !important;
    min-width: var(--soc-desktop-sidebar-width) !important;
    max-width: var(--soc-desktop-sidebar-width) !important;
    min-height: calc(100dvh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--soc-sidebar-divider) !important;
    background: linear-gradient(180deg, var(--soc-sidebar-bg-1) 0%, var(--soc-sidebar-bg-2) 100%) !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    z-index: 4 !important;
  }

  body.soc-desktop-shell #menuSheetPanel > .ds-card-title {
    display: none !important;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-sidebar-header {
    display: none !important;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-sidebar-header-meta {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-sidebar-header-caption {
    font-size: var(--type-label-sm-size);
    line-height: var(--type-label-sm-line);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--soc-sidebar-text-muted);
    text-transform: uppercase;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-sidebar-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    max-width: 100%;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--soc-sidebar-divider) 88%, transparent);
    background: rgba(255, 255, 255, 0.06);
    color: var(--soc-sidebar-text-muted);
    font-size: var(--type-label-sm-size);
    line-height: var(--type-label-sm-line);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-sidebar-collapse-btn {
    display: none !important;
  }

  body.soc-desktop-shell #menuSheetPanel .mobile-menu-pager {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  body.soc-desktop-shell #menuSheetPanel #mobileTypeFlowTrack {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  body.soc-desktop-shell #menuSheetPanel #mobileMenuRootPage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
    padding: 12px 0 8px;
    gap: 8px;
  }

  body.soc-desktop-shell #menuSheetPanel #mobileAdminShortcutList {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    flex: 1 1 auto;
    min-height: 0;
    gap: 6px !important;
    margin: 0;
    padding: 0;
    overflow: visible;
    align-content: start;
  }

  body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only {
    display: block !important;
  }

  body.soc-desktop-shell #menuSheetPanel #mobileAdminShortcutList > .soc-menu-group:not(.pc-sidebar-only) {
    display: none !important;
  }

  body.soc-desktop-shell #menuSheetPanel #mobileAdminShortcutList > .soc-menu-section:not(.pc-sidebar-only) {
    display: none !important;
  }

  body.soc-desktop-shell #menuSheetPanel [data-field-only="true"].hidden,
  body.soc-desktop-shell #menuSheetPanel [data-hq-only="true"].hidden,
  body.soc-desktop-shell #menuSheetPanel [data-field-only="true"][aria-hidden="true"],
  body.soc-desktop-shell #menuSheetPanel [data-hq-only="true"][aria-hidden="true"] {
    display: none !important;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group {
    display: block;
    margin: 0;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group + .soc-menu-group {
    margin-top: 12px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-section {
    display: grid;
    gap: 2px;
    margin: 0;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-section + .soc-menu-section {
    margin-top: 14px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-section-label {
    margin: 0;
    padding: 0 18px;
    color: var(--soc-sidebar-text-muted);
    font-size: var(--type-label-sm-size);
    font-weight: 700;
    line-height: var(--type-label-sm-line);
    letter-spacing: 0.04em;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-section-items {
    display: grid;
    gap: 2px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group--pc-primary {
    margin-bottom: 2px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--soc-sidebar-text);
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    justify-items: start;
    gap: 12px;
    padding: 0 18px;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--soc-sidebar-text);
    text-align: left;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-icon svg,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-chevron svg,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.16s ease;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle.is-open .soc-menu-group-chevron {
    transform: rotate(180deg);
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle.is-open {
    background: var(--soc-sidebar-row-hover);
    color: var(--soc-sidebar-active-text);
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-items {
    display: grid;
    gap: 2px;
    padding: 0;
    margin-top: 2px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-items[hidden] {
    display: none !important;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--soc-sidebar-text);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 12px;
    padding: 0 16px;
    text-align: left;
    position: relative;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 0;
    background: transparent;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--soc-sidebar-text);
    text-align: left;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-chevron {
    display: none !important;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active {
    color: var(--soc-sidebar-active-text);
    background: var(--soc-sidebar-active-bg);
    box-shadow: inset 4px 0 0 var(--soc-sidebar-active-rail);
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active::before {
    background: transparent;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-icon {
    color: var(--soc-sidebar-icon);
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active .soc-menu-sub-item-icon {
    color: var(--soc-sidebar-active-text);
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active .soc-menu-sub-item-label {
    color: var(--soc-sidebar-active-text);
    font-weight: 600;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-submenu-wrap {
    display: grid;
    gap: 2px;
  }

  body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only .soc-menu-submenu-list {
    display: grid;
    gap: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 2px 0 0 20px;
    transform: translateY(-4px);
    transition: max-height 160ms ease, opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
  }

  body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only .soc-menu-submenu-wrap:is(:hover, :focus-within, .is-active-scope) .soc-menu-submenu-list {
    max-height: 160px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only .soc-menu-submenu-wrap--always-open .soc-menu-submenu-list {
    max-height: 160px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    padding-top: 4px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested {
    min-height: 34px;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 8px;
    padding: 2px 14px 2px 10px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested .soc-menu-submenu-bullet {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.52;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested.is-active {
    box-shadow: none;
  }

  body.soc-desktop-shell #menuSheetPanel .mobile-nav-actions {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 10px 0 8px;
    gap: 2px;
    background: linear-gradient(180deg, rgba(241, 245, 249, 0) 0%, var(--soc-sidebar-bg-2) 18%, var(--soc-sidebar-bg-2) 100%);
    border-top: 1px solid color-mix(in srgb, var(--soc-sidebar-divider) 82%, transparent);
  }

  body.soc-desktop-shell :is(
    .ds-card,
    .soc-filterbar,
    .soc-realtime-date-display,
    .soc-pc-side-panel,
    .soc-system-list-card,
    .soc-system-section-card,
    .soc-workspace-card,
    .soc-home-ticket-summary-item,
    .ds-input,
    .ds-select,
    .ds-textarea,
    input,
    select,
    textarea,
    .ds-btn-secondary,
    .ds-btn-ghost,
    table th,
    table td
  ) {
    border-color: var(--soc-border-strong);
  }

  body.soc-desktop-shell #dashboardPanel .soc-realtime-date-display,
  body.soc-desktop-shell #dashboardPanel .soc-filterbar {
    background: var(--soc-date-display-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-border-strong) 88%, transparent);
  }

  body.soc-desktop-shell.role-hq:not(.nav-open) #bottomTabNav.soc-bottom-tab,
  body.soc-desktop-shell.role-field:not(.nav-open) #bottomTabNav.soc-bottom-tab,
  body.soc-desktop-shell #bottomTabNav.soc-bottom-tab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.soc-desktop-shell .nav-backdrop {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.soc-desktop-shell #dashboardPanel {
    max-width: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  body.soc-desktop-shell #dashboardPanel > .soc-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }

  body.soc-desktop-shell #dashboardPanel .soc-page-header-main {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  body.soc-desktop-shell #dashboardPanel .soc-page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
  }

  body.soc-desktop-shell #dashboardPanel .soc-dashboard-workspace-tabs {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  body.soc-desktop-shell #dashboardPanel .soc-dashboard-workspace-tab {
    min-height: 28px;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  body.soc-desktop-shell #dashboardPanel .soc-dashboard-workspace-tab.is-active {
    border-color: rgba(234, 88, 12, 0.72);
    color: #c2410c;
  }

  body.soc-desktop-shell #reportsView .soc-report-headerbar,
  body.soc-desktop-shell #reportsHubView {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  body.soc-desktop-shell #reportsView .soc-report-headerbar {
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    gap: 12px;
  }

  body.soc-desktop-shell #reportsView .soc-report-header-main,
  body.soc-desktop-shell #reportsHubView .soc-hub-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  body.soc-desktop-shell #reportsView .report-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  body.soc-desktop-shell #reportsView .soc-report-empty-card,
  body.soc-desktop-shell #reportsView .soc-report-browse,
  body.soc-desktop-shell #reportsView .soc-report-browse-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  body.soc-desktop-shell #reportsView .soc-report-empty-actions,
  body.soc-desktop-shell #reportsView .soc-report-browse-actions {
    gap: 10px;
  }

  body.soc-desktop-shell #reportsView {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 16px;
  }

  body.soc-desktop-shell #reportsView .soc-report-headerbar {
    padding: 0 0 8px;
    border-bottom: 0;
  }

  body.soc-desktop-shell #reportsView .soc-report-header-main {
    display: grid;
    justify-items: start;
    gap: 6px;
  }

  body.soc-desktop-shell #reportsView .soc-report-actionbar {
    border: 1px solid var(--ui-border-subtle);
    border-radius: 12px;
    background: var(--ui-bg-surface);
    box-shadow: none;
  }

  body.soc-desktop-shell #reportsView .soc-report-actionbar-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
  }

  body.soc-desktop-shell #reportsView .soc-report-actionbar-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  body.soc-desktop-shell #reportsView .soc-report-actionbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
  }

  body.soc-desktop-shell #reportsView .soc-report-actionbar-actions .ds-btn,
  body.soc-desktop-shell #reportsView .soc-report-actionbar-actions .soc-export-menu-wrap,
  body.soc-desktop-shell #reportsView .soc-report-actionbar-actions .soc-export-menu-wrap > .ds-btn {
    min-width: 0;
  }

  body.soc-desktop-shell #reportBuilderBackdrop {
    display: none !important;
  }

  body.soc-desktop-shell #reportBuilderSheet,
  body.soc-desktop-shell #reportBuilderSheet.hidden {
    display: block !important;
    position: static;
    inset: auto;
    background: transparent;
    pointer-events: auto;
  }

  body.soc-desktop-shell #reportBuilderSheet .soc-bottom-sheet-panel.soc-report-builder-panel {
    width: 100%;
    min-height: 0;
    max-height: none;
    height: auto;
    padding: 20px 24px 24px;
    border: 1px solid var(--ui-border-subtle);
    border-radius: 12px;
    background: var(--ui-bg-surface);
    transform: none !important;
    box-shadow: none;
  }

  body.soc-desktop-shell #reportBuilderSheet .soc-sheet-head {
    margin-bottom: 12px;
  }

  body.soc-desktop-shell #closeReportBuilderBtn,
  body.soc-desktop-shell #reportBuilderHandle,
  body.soc-desktop-shell #reportBuilderStepper,
  body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-footer {
    display: none !important;
  }

  body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
    max-height: none;
    padding: 0;
  }

  body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-step[data-builder-step="3"] {
    grid-column: 1 / -1;
  }

  body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-step {
    padding: 16px;
    gap: 10px;
  }

  body.soc-desktop-shell #reportBuilderSheet .soc-report-builder-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  body.soc-desktop-shell #reportPreviewScroller {
    display: grid;
    align-content: start;
    gap: 16px;
  }

  body.soc-desktop-shell #reportsHubView .soc-hub-header {
    position: static;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    padding: 0 0 16px;
    margin-bottom: 12px;
    background: transparent;
  }

  body.soc-desktop-shell #reportsHubView .soc-hub-header-left {
    display: grid;
    gap: 4px;
  }

  body.soc-desktop-shell #reportsHubView .soc-hub-toolbar {
    justify-content: flex-start;
    margin-bottom: 16px;
  }

  body.soc-desktop-shell #reportsHubView .soc-hub-preview-scroller {
    padding-bottom: 0;
    gap: 16px;
  }

  body.soc-desktop-shell #reportsHubView .soc-hub-section-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  body.soc-desktop-shell #reportsHubView .soc-hub-section-card::before {
    display: none;
  }

  body.soc-desktop-shell :is(
    #slaPanel,
    #auditPanel,
    #accountPanel,
    #managerStatusPanel,
    #employeeScorePanel,
    #announcementPanel,
    #notificationPanel,
    #hqReminderPanel
  ) {
    max-width: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  body.soc-desktop-shell :is(
    #slaPanel > .soc-sla-header-bar,
    #auditPanel > .soc-audit-header-bar,
    #accountPanel > .panel-title-row,
    #managerStatusPanel > .panel-title-row,
    #employeeScorePanel > .panel-title-row,
    #announcementPanel > .soc-announcement-header,
    #notificationPanel > .notification-panel-head,
    #hqReminderPanel > .panel-title-row
  ) {
    margin-bottom: 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: transparent;
    box-shadow: none;
    position: static;
  }

  body.soc-desktop-shell #slaPanel .soc-sla-header-actions,
  body.soc-desktop-shell #auditPanel .soc-audit-header-actions,
  body.soc-desktop-shell #accountPanel .panel-actions,
  body.soc-desktop-shell #managerStatusPanel .panel-actions,
  body.soc-desktop-shell #notificationPanel .notification-panel-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }

  body.soc-desktop-shell #slaPanel .soc-sla-workspace-grid-flat,
  body.soc-desktop-shell #auditPanel .soc-audit-grid-flat,
  body.soc-desktop-shell #announcementPanel .soc-announcement-workspace,
  body.soc-desktop-shell #managerStatusPanel .soc-manager-status-workspace,
  body.soc-desktop-shell #accountPanel .soc-manage-workspace-grid {
    gap: 16px;
  }

  body.soc-desktop-shell #slaPanel .soc-sla-workspace-grid-flat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }

  body.soc-desktop-shell #auditPanel .soc-audit-grid-flat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }

  body.soc-desktop-shell #slaPanel .soc-sla-workspace-main,
  body.soc-desktop-shell #auditPanel .soc-audit-results,
  body.soc-desktop-shell #accountPanel .soc-manage-workspace-main,
  body.soc-desktop-shell #managerStatusPanel .soc-manager-status-shell,
  body.soc-desktop-shell #hqReminderPanel .soc-system-section-flat,
  body.soc-desktop-shell #announcementPanel .soc-announcement-list-card,
  body.soc-desktop-shell #notificationPanel .soc-system-section-flat {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  body.soc-desktop-shell :is(
    #slaPanel .soc-sla-detail-panel,
    #auditPanel .soc-audit-detail-panel,
    #accountPanel .soc-manage-workspace-side,
    #managerStatusPanel .soc-manage-workspace-side,
    #announcementPanel .soc-announcement-detail-card
  ) {
    border: 0;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 16px;
  }

  body.soc-desktop-shell #notificationPanel .soc-system-list-card {
    margin-top: 0;
  }

  body.soc-desktop-shell #announcementPanel .soc-announcement-detail-card {
    top: 0;
  }

  body.soc-desktop-shell #announcementPanel .soc-announcement-detail-body {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
  }

  body.soc-desktop-shell #announcementPanel #announcementListWrap {
    margin-top: 0;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-builder {
    gap: 20px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  body.soc-desktop-shell #managerStatusPanel .soc-manage-filter-bar {
    margin: 0 0 12px;
  }

  body.soc-desktop-shell #auditPanel .audit-list,
  body.soc-desktop-shell #slaPanel .sla-overview-list {
    padding: 0;
    min-height: 0;
  }

  body.soc-desktop-shell #slaPanel .soc-sla-preview-scroller,
  body.soc-desktop-shell #auditPanel .soc-audit-grid-flat {
    padding-bottom: 0;
  }

  body.soc-desktop-shell .soc-workspace-drawer {
    top: 72px;
    bottom: 0;
    height: calc(100dvh - 72px);
    border-top: 0;
    border-right: 0;
    box-shadow: none;
  }

  body.soc-desktop-shell #dashboardPanel,
  body.soc-desktop-shell #dashboardPanel :is(p, li, label, button, input, select, textarea, .meta) {
    font-size: 13px;
    line-height: 1.4;
  }

  body.soc-desktop-shell #homeView .soc-block,
  body.soc-desktop-shell #homeView .soc-kpi-card,
  body.soc-desktop-shell #homeView .soc-summary-card,
  body.soc-desktop-shell #alertsView .incident-card,
  body.soc-desktop-shell #ticketsView .ticket-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  body.soc-desktop-shell #homeView .soc-block:hover,
  body.soc-desktop-shell #alertsView .incident-card:hover,
  body.soc-desktop-shell #ticketsView .ticket-card:hover {
    transform: none;
    box-shadow: none;
  }

  body.soc-desktop-shell :is(
    #homeView .soc-kpi-label,
    #homeView .soc-kpi-value,
    #homeView .soc-block-value,
    #homeView .soc-summary-value,
    #alertsView .incident-title,
    #alertsView .incident-type,
    #ticketsView .ticket-title
  ) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.soc-desktop-shell #homeView {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-content: start;
  }

  body.soc-desktop-shell #homeView > #homeLoadingState,
  body.soc-desktop-shell #homeView > #homeErrorState,
  body.soc-desktop-shell #homeView > #homeEmptyState,
  body.soc-desktop-shell #homeView > .soc-home-row {
    grid-column: 1 / -1;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--briefing,
  body.soc-desktop-shell #homeView > .soc-home-row--analysis,
  body.soc-desktop-shell #homeView > .soc-home-row--activity {
    grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr);
    align-items: start;
    gap: 16px;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--analysis #homeTrend7d,
  body.soc-desktop-shell #homeView > .soc-home-row--activity #homeTicketBlock {
    min-height: 100%;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--analysis .soc-home-support-stack,
  body.soc-desktop-shell #homeView > .soc-home-row--activity #homeRecentBlock {
    align-content: start;
    gap: 12px;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--briefing #homeHeroStatus {
    max-width: 100%;
  }

  body.soc-desktop-shell #homeView > .soc-home-row .soc-block,
  body.soc-desktop-shell #homeView > .soc-home-row .soc-kpi-card {
    border: 1px solid var(--soc-border);
    border-radius: var(--soc-radius-card);
    background: var(--soc-block-bg);
    padding: 18px 20px;
    box-shadow: none;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--briefing,
  body.soc-desktop-shell #homeView > .soc-home-row--analysis,
  body.soc-desktop-shell #homeView > .soc-home-row--activity {
    grid-template-columns: minmax(0, 1.95fr) minmax(300px, 1fr);
    gap: 18px;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--briefing #homeWeeklyBriefing {
    gap: 12px;
    padding: 20px 22px 18px;
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-block-head {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-home-briefing-title {
    gap: 6px;
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-ratio-pill {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 12px;
  }

  body.soc-desktop-shell #homeWeeklyBriefing #homeWeeklySummaryLine {
    margin: 0;
    min-height: 0;
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line);
    color: var(--ui-text-secondary);
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--soc-border);
    border-radius: 12px;
    background: var(--soc-panel-bg);
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-bar {
    display: none;
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-label {
    order: 1;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--ui-text-secondary);
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-value {
    order: 2;
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ui-text-primary);
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-wow {
    order: 3;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: normal;
  }

  body.soc-desktop-shell #homeWeeklyBriefing .soc-briefing-actions {
    margin-top: 2px;
    justify-content: flex-start;
  }

  body.soc-desktop-shell #homeOpenWeeklyBtn {
    margin-top: 0;
  }

  body.soc-desktop-shell #homeHeroStatus {
    gap: 8px;
    padding: 18px 20px;
    background: var(--soc-panel-bg);
  }

  body.soc-desktop-shell #homeHeroStatus .soc-hero-status-head {
    align-items: center;
  }

  body.soc-desktop-shell #homeHeroStatus h3 {
    font-size: var(--type-section-md-size);
    line-height: var(--type-section-md-line);
  }

  body.soc-desktop-shell #homeHeroStatus .soc-hero-comment {
    margin: 0;
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line);
  }

  body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-card {
    min-height: 132px;
    padding: 18px 20px 16px;
    gap: 8px;
    background: var(--soc-kpi-bg);
  }

  body.soc-desktop-shell #homeView .soc-kpi-label,
  body.soc-desktop-shell #homeView .soc-kpi-subtext {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  body.soc-desktop-shell #homeView .soc-kpi-value {
    font-size: 34px;
    line-height: 1.02;
  }

  body.soc-desktop-shell #homeView .soc-kpi-trend {
    display: none;
  }

  body.soc-desktop-shell #homeTrend7d {
    padding: 22px 24px 18px;
  }

  body.soc-desktop-shell #homeTrend7d .soc-block-head {
    margin-bottom: 4px;
  }

  body.soc-desktop-shell #homeTrend7d .soc-sparkline-lg {
    height: 156px;
    margin-top: 12px;
  }

  body.soc-desktop-shell #homeTrend7d .meta {
    margin-top: 10px;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--analysis .soc-home-support-stack,
  body.soc-desktop-shell #homeView > .soc-home-row--activity #homeRecentBlock {
    gap: 10px;
  }

  body.soc-desktop-shell #homeRiskSignals,
  body.soc-desktop-shell #homeActionNeededBlock,
  body.soc-desktop-shell #homeRecentBlock {
    padding: 16px 18px;
  }

  body.soc-desktop-shell #homeRiskSignals > h3,
  body.soc-desktop-shell #homeActionNeededBlock > h3,
  body.soc-desktop-shell #homeRecentBlock > h3 {
    margin: 0 0 8px;
  }

  body.soc-desktop-shell #homeRiskSignals .soc-insight-item,
  body.soc-desktop-shell #homeActionNeededBlock .soc-mini-row,
  body.soc-desktop-shell #homeRecentBlock .soc-mini-row {
    padding: 10px 12px;
    border-radius: 10px;
  }

  body.soc-desktop-shell #homeTicketBlock {
    padding: 20px 22px 18px;
  }

  body.soc-desktop-shell #homeTicketBlock .soc-ticket-mini-dist {
    margin: 10px 0 12px;
  }

  body.soc-desktop-shell #homeTicketBlock .soc-home-ticket-summary-item {
    min-height: 36px;
    padding: 7px 10px;
  }

  body.soc-desktop-shell #homeRecentBlock .soc-list-mini {
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView {
    display: grid;
    gap: 10px;
    align-content: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-header {
    padding: 0;
    border: 0;
    background: transparent;
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-header-right {
    gap: 8px;
  }

  body.soc-desktop-shell #alertsView .soc-alerts-feed-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
  }

  body.soc-desktop-shell #alertsView .soc-alerts-feed-head h3 {
    margin: 0;
  }

  body.soc-desktop-shell #ticketsView .soc-ticket-feed-summary {
    margin: 8px 0 10px;
  }

  body.soc-desktop-shell #analyticsContentWrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-hero {
    grid-column: 1 / -1;
  }

  body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-kpi-grid {
    grid-column: 1 / -1;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-trend-grid {
    grid-column: 1 / span 8;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock {
    grid-column: 9 / span 4;
  }

  body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.soc-desktop-shell {
    --soc-desktop-sidebar-width: 220px;
    --soc-desktop-sidebar-expanded-width: 220px;
  }

  body.soc-desktop-shell #menuSheetPanel {
    width: var(--soc-desktop-sidebar-width) !important;
    min-width: var(--soc-desktop-sidebar-width) !important;
    max-width: var(--soc-desktop-sidebar-width) !important;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-sidebar-header-meta,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-chevron,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label {
    display: block !important;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-section-label {
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 1280px) {
  body.soc-desktop-shell.soc-sidebar-collapsed {
    --soc-desktop-sidebar-width: 220px;
    --soc-desktop-sidebar-expanded-width: 220px;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle:hover,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item:hover {
    background: var(--soc-sidebar-row-hover);
  }
}

/* ===== PC Incident/Ticket feed stabilization (1440~1512 safe) ===== */
@media (min-width: 1024px) {
  #alertsView {
    --soc-feed-cols-alerts: 88px 150px 88px 100px minmax(240px, 1fr) 148px 220px;
    --soc-feed-col-gap-compact: 10px;
  }

  #ticketsView {
    --soc-feed-cols-tickets: 84px 132px 64px 96px minmax(232px, 1fr) 116px 228px;
    --soc-feed-col-gap-compact: 6px;
  }

  #alertsView .soc-pc-two-col-shell,
  #ticketsView .soc-pc-two-col-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 360px);
    gap: 12px;
    align-items: start;
    min-width: 0;
  }

  #alertsView .soc-pc-list-main,
  #ticketsView .soc-pc-list-main {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 0;
  }

  #alertsView .soc-pc-side-panel,
  #ticketsView .soc-pc-side-panel {
    position: sticky !important;
    inset: auto !important;
    top: 72px !important;
    min-width: 0;
    width: clamp(300px, 22vw, 360px);
    max-width: clamp(300px, 22vw, 360px);
    max-height: calc(100dvh - 112px);
    overflow: hidden;
    z-index: 1;
  }

  #alertsView .soc-pc-list-header,
  #ticketsView .soc-pc-list-header {
    display: grid;
    column-gap: var(--soc-feed-col-gap-compact);
    align-items: center;
    min-height: 40px;
    padding-block: 6px;
    padding-inline: 12px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    margin: 0 0 8px;
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
    overflow: hidden;
  }

  #alertsView .soc-pc-list-header {
    grid-template-columns: var(--soc-feed-cols-alerts);
  }

  #ticketsView .soc-pc-list-header {
    grid-template-columns: var(--soc-feed-cols-tickets);
  }

  #alertsView .soc-pc-list-header > span,
  #ticketsView .soc-pc-list-header > span {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-list,
  #ticketsView .ticket-list {
    display: grid;
    gap: 0;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    overflow: hidden;
    background: var(--ui-bg-surface, var(--soc-card-bg));
  }

  #alertsView .incident-card,
  #alertsView .incident-ticket-card {
    display: grid;
    grid-template-columns: var(--soc-feed-cols-alerts);
    align-items: center;
    column-gap: var(--soc-feed-col-gap-compact);
    row-gap: 0;
    min-height: 76px;
    padding-block: 8px;
    padding-inline: 16px;
    border: 0;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  #alertsView .incident-list > .incident-card:last-child {
    border-bottom: 0;
  }

  #alertsView .incident-card::before,
  #ticketsView .ticket-card::before {
    display: none;
  }

  #alertsView .incident-card-head,
  #alertsView .incident-card-badges,
  #ticketsView .ticket-card-head,
  #ticketsView .ticket-row-summary {
    display: contents;
  }

  #alertsView .incident-head-actions {
    display: none !important;
  }

  #alertsView .incident-ticket-card .incident-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  #ticketsView .ticket-card {
    display: grid;
    grid-template-columns: var(--soc-feed-cols-tickets);
    align-items: center;
    min-height: 76px;
    column-gap: var(--soc-feed-col-gap-compact);
    row-gap: 0;
    padding-block: 8px;
    padding-inline: 16px;
    border: 0;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  #ticketsView .ticket-list > .ticket-card:last-child {
    border-bottom: 0;
  }

  #alertsView .incident-status {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  #alertsView .incident-type {
    grid-column: 2;
    grid-row: 1;
  }

  #alertsView .incident-severity {
    grid-column: 3;
    grid-row: 1;
  }

  #alertsView .incident-location {
    grid-column: 4;
    grid-row: 1;
  }

  #alertsView .incident-title {
    grid-column: 5;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }

  #alertsView .incident-created-at {
    grid-column: 6;
    grid-row: 1;
  }

  #alertsView .incident-comment-preview,
  #alertsView .incident-ticket-description {
    grid-column: 7;
    grid-row: 1;
  }

  #alertsView .incident-actions {
    display: none !important;
  }

  #alertsView .incident-head-actions,
  #alertsView .incident-more-btn,
  #alertsView .incident-more-menu {
    display: none !important;
  }

  #ticketsView .ticket-head-pills {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    justify-self: center;
  }

  #ticketsView .ticket-row-summary-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    text-align: center;
  }

  #ticketsView .ticket-row-summary-requested {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    font-weight: 700;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #ticketsView .ticket-row-summary-requested.is-highlight {
    color: var(--ui-accent, #ff8400);
    font-weight: 700;
  }

  #ticketsView .ticket-row-summary-requested.is-empty {
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-weight: 500;
  }

  #ticketsView .ticket-row-summary-site {
    grid-column: 4;
    grid-row: 1;
    justify-self: center;
    text-align: center;
  }

  #ticketsView .ticket-row-summary-updated {
    grid-column: 6;
    grid-row: 1;
    justify-self: center;
    text-align: center;
  }

  #ticketsView .ticket-row-summary-comment {
    grid-column: 7;
    grid-row: 1;
    justify-self: center;
    text-align: center;
  }

  #ticketsView .ticket-title {
    grid-column: 5;
    grid-row: 1;
    justify-self: center;
    text-align: center;
  }

  #ticketsView .ticket-requested-count-badge {
    flex: 0 0 auto;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-title,
  #alertsView .incident-type,
  #alertsView .incident-location,
  #alertsView .incident-created-at,
  #ticketsView .ticket-title,
  #ticketsView .ticket-row-summary-item,
  #ticketsView .ticket-status-pill,
  #ticketsView .ticket-head-pills {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-title {
    justify-self: start;
    text-align: left;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }

  #ticketsView .ticket-title {
    justify-self: center;
    text-align: center;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }

  #alertsView .incident-type,
  #alertsView .incident-location,
  #alertsView .incident-created-at,
  #ticketsView .ticket-row-summary-item {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
  }

  #alertsView .incident-created-at,
  #ticketsView .ticket-row-summary-updated {
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    white-space: nowrap;
  }

  #alertsView .incident-comment-preview,
  #alertsView .incident-ticket-description,
  #ticketsView .ticket-row-summary-comment {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.3;
    max-height: calc(1.3em * 2);
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #ticketsView .ticket-row-summary-comment.is-support-worker-state {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    -webkit-line-clamp: unset;
    max-height: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #ticketsView .ticket-support-worker-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #ticketsView .ticket-support-worker-state-badge.is-confirmed {
    background: #eaf7ee;
    border-color: #34a853;
    color: #1e6b35;
  }

  #ticketsView .ticket-support-worker-state-badge.is-unconfirmed {
    background: #feecec;
    border-color: #dc2626;
    color: #991b1b;
  }

  #alertsView .incident-ticket-description.is-support-worker-state {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    -webkit-line-clamp: unset;
    max-height: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-ticket-description.is-requested-count {
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-weight: 600;
  }

  #alertsView .incident-ticket-description .ticket-support-worker-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-confirmed {
    background: #eaf7ee;
    border-color: #34a853;
    color: #1e6b35;
  }

  #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-unconfirmed {
    background: #feecec;
    border-color: #dc2626;
    color: #991b1b;
  }

  #alertsView .incident-actions {
    grid-column: 8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: center;
    justify-self: end;
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    margin: 0;
    padding-top: 0;
    gap: 0;
    overflow: hidden;
  }

  #alertsView .incident-status,
  #alertsView .incident-severity,
  #ticketsView .ticket-status-pill,
  #ticketsView .ticket-requested-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #ticketsView .ticket-full-content-actions,
  #ticketsView .ticket-actions-row {
    display: none !important;
  }

  #ticketsView .ticket-actions-row .ticket-status-select {
    min-width: 64px;
    max-width: 72px;
  }

  #ticketsView .ticket-kv-list,
  #ticketsView .ticket-kv-row,
  #ticketsView .ticket-comments,
  #ticketsView .ticket-attachments,
  #ticketsView .ticket-comment-form,
  #ticketsView .ticket-attachment-form,
  #ticketsView .ticket-meta-line,
  #ticketsView .ticket-action-row.ticket-extra {
    display: none !important;
  }

  #alertsView .soc-pc-side-panel,
  #ticketsView .soc-pc-side-panel {
    display: grid;
    grid-template-rows: auto auto auto auto minmax(220px, 1fr) auto auto;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border-color: var(--ui-border-subtle, var(--soc-border));
    background: var(--ui-bg-surface, var(--soc-card-bg));
  }

  #alertsView .soc-pc-side-panel-kpi,
  #ticketsView .soc-pc-side-panel-kpi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }

  #alertsView .soc-pc-side-panel-kpi-item,
  #ticketsView .soc-pc-side-panel-kpi-item {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  }

  #alertsView .soc-pc-side-panel-kpi-label,
  #ticketsView .soc-pc-side-panel-kpi-label {
    margin: 0;
    font-size: var(--ui-text-11, 11px);
    color: var(--ui-text-secondary, var(--soc-text-sub));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .soc-pc-side-panel-kpi-value,
  #ticketsView .soc-pc-side-panel-kpi-value {
    margin: 0;
    font-size: var(--ui-text-13, 13px);
    font-weight: 600;
    color: var(--ui-text-primary, var(--soc-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .soc-pc-side-panel-head h4,
  #ticketsView .soc-pc-side-panel-head h4 {
    font-size: var(--ui-text-16, 16px);
    font-weight: 600;
  }

  #alertsView .soc-pc-side-panel .meta,
  #ticketsView .soc-pc-side-panel .meta {
    font-size: var(--ui-text-12, 12px);
    line-height: 1.35;
  }

  #alertsView .soc-pc-side-panel-section,
  #ticketsView .soc-pc-side-panel-section {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  #alertsView .soc-pc-side-panel-section-title,
  #ticketsView .soc-pc-side-panel-section-title {
    margin: 0;
    font-size: var(--ui-text-12, 12px);
    font-weight: 600;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #alertsView .soc-pc-side-panel-summary,
  #ticketsView .soc-pc-side-panel-summary {
    max-height: 148px;
    padding: 10px;
    border-radius: 10px;
  }

  #alertsView .soc-pc-side-panel-thread,
  #ticketsView .soc-pc-side-panel-thread {
    min-height: 220px;
    border-radius: 10px;
    padding: 10px;
  }

  #alertsView .soc-pc-side-panel-target,
  #ticketsView .soc-pc-side-panel-target {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--ui-text-12, 12px);
    color: var(--ui-text-secondary, var(--soc-text-sub));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .soc-pc-side-panel-form,
  #ticketsView .soc-pc-side-panel-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8));
  }

  #alertsView .soc-pc-side-panel-input,
  #ticketsView .soc-pc-side-panel-input {
    min-height: 36px;
  }

  #alertsView .soc-pc-side-panel-submit,
  #ticketsView .soc-pc-side-panel-submit {
    min-height: 32px;
  }

  #alertsView .incident-type,
  #ticketsView .ticket-row-summary-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  #alertsView .incident-location {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-type-badge,
  #alertsView .incident-urgent-badge,
  #alertsView .incident-category-badge,
  #alertsView .incident-attachments,
  #alertsView .instruction-list,
  #alertsView .instruction-form {
    display: none !important;
  }

  #alertsView .soc-pc-incident-header {
    grid-template-columns: var(--soc-feed-cols-alerts);
    column-gap: var(--soc-feed-col-gap-compact);
    min-height: 40px;
    padding-inline: 16px;
  }

  #ticketsView .soc-pc-ticket-header {
    grid-template-columns: var(--soc-feed-cols-tickets);
    column-gap: var(--soc-feed-col-gap-compact);
    min-height: 40px;
    padding-inline: 16px;
  }

  #ticketsView .soc-pc-ticket-header > span:nth-child(3) {
    justify-self: center;
    text-align: center;
  }

  #ticketsView .soc-pc-ticket-header > span:nth-child(1),
  #ticketsView .soc-pc-ticket-header > span:nth-child(2),
  #ticketsView .soc-pc-ticket-header > span:nth-child(4),
  #ticketsView .soc-pc-ticket-header > span:nth-child(5),
  #ticketsView .soc-pc-ticket-header > span:nth-child(6),
  #ticketsView .soc-pc-ticket-header > span:nth-child(7) {
    justify-self: center;
    text-align: center;
  }
}

/* ===== Tickets PC single-container layout (remove nested inner box) ===== */
@media (min-width: 1024px) {
  #ticketsView .soc-pc-list-main {
    padding-inline: 22px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #ticketsView .soc-pc-list-main > .help {
    margin: 0 0 10px;
    padding: 0;
  }

  #ticketsView .soc-pc-list-header {
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    min-height: 0;
  }

  #ticketsView .ticket-list {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  #ticketsView .ticket-list > .ticket-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-inline: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
  }

  #ticketsView .ticket-list > .ticket-card:last-child {
    border-bottom: 0 !important;
  }

  #ticketsView .ticket-card {
    background: transparent !important;
    border-radius: 0 !important;
    padding-inline: 0 !important;
  }

  #ticketsView .ticket-card:hover,
  #ticketsView .ticket-card:active {
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)) !important;
  }
}

/* ===== Desktop feed responsive lock (>=1024): keep one grid system ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell #alertsView {
    --soc-feed-cols-alerts: 88px 150px 88px 100px minmax(260px, 1fr) 152px 220px;
    --soc-feed-col-gap-compact: 8px;
  }

  body.soc-desktop-shell #ticketsView {
    --soc-feed-cols-tickets: 84px 132px 92px 100px minmax(256px, 1fr) 132px 226px;
    --soc-feed-col-gap-compact: 8px;
  }

  body.soc-desktop-shell #alertsView .soc-pc-list-header,
  body.soc-desktop-shell #ticketsView .soc-pc-list-header {
    display: grid !important;
    align-items: center;
    column-gap: var(--soc-feed-col-gap-compact);
    min-height: 40px;
    padding-inline: 16px;
    border-radius: 10px;
    overflow: hidden;
  }

  body.soc-desktop-shell #alertsView .soc-pc-list-header {
    grid-template-columns: var(--soc-feed-cols-alerts) !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-list-header {
    grid-template-columns: var(--soc-feed-cols-tickets) !important;
  }

  body.soc-desktop-shell #alertsView .incident-list,
  body.soc-desktop-shell #ticketsView .ticket-list {
    display: grid !important;
    gap: 0 !important;
    overflow: hidden;
  }

  body.soc-desktop-shell #alertsView .incident-card,
  body.soc-desktop-shell #alertsView .incident-ticket-card {
    display: grid !important;
    grid-template-columns: var(--soc-feed-cols-alerts) !important;
    align-items: center;
    column-gap: var(--soc-feed-col-gap-compact);
    row-gap: 0;
    min-height: 76px;
    padding-block: 8px;
    padding-inline: 16px;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-card {
    display: grid !important;
    grid-template-columns: var(--soc-feed-cols-tickets) !important;
    align-items: center;
    column-gap: var(--soc-feed-col-gap-compact);
    row-gap: 0;
    min-height: 76px;
    padding-block: 8px;
    padding-inline: 16px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #alertsView .incident-card-head,
  body.soc-desktop-shell #alertsView .incident-card-badges,
  body.soc-desktop-shell #ticketsView .ticket-card-head,
  body.soc-desktop-shell #ticketsView .ticket-row-summary {
    display: contents !important;
  }

  body.soc-desktop-shell #alertsView .incident-mobile-meta,
  body.soc-desktop-shell #alertsView .incident-mobile-comment,
  body.soc-desktop-shell #alertsView .incident-mobile-eci,
  body.soc-desktop-shell #ticketsView .ticket-mobile-meta,
  body.soc-desktop-shell #ticketsView .ticket-mobile-comment,
  body.soc-desktop-shell #ticketsView .ticket-kv-row {
    display: none !important;
  }

  body.soc-desktop-shell #alertsView .incident-title,
  body.soc-desktop-shell #ticketsView .ticket-title {
    justify-self: start !important;
    text-align: left !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.soc-desktop-shell #alertsView .incident-type,
  body.soc-desktop-shell #alertsView .incident-severity,
  body.soc-desktop-shell #alertsView .incident-location,
  body.soc-desktop-shell #alertsView .incident-created-at,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-item,
  body.soc-desktop-shell #ticketsView .ticket-head-pills,
  body.soc-desktop-shell #ticketsView .ticket-status-pill {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.soc-desktop-shell #ticketsView .ticket-row-summary-type,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-requested,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-site,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-updated {
    justify-self: start !important;
    text-align: left !important;
  }

  body.soc-desktop-shell #alertsView .incident-comment-preview,
  body.soc-desktop-shell #alertsView .incident-ticket-description,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment {
    min-width: 0;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.32;
    max-height: calc(1.32em * 2);
  }

  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment.is-support-worker-state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    -webkit-line-clamp: unset;
    max-height: none;
    white-space: nowrap;
  }

  body.soc-desktop-shell #alertsView .incident-actions,
  body.soc-desktop-shell #ticketsView .ticket-full-content-actions,
  body.soc-desktop-shell #ticketsView .ticket-actions-row {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    flex-shrink: 0;
  }

  body.soc-desktop-shell #alertsView .incident-actions,
  body.soc-desktop-shell #alertsView .incident-head-actions {
    display: none !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  body.soc-desktop-shell #alertsView {
    --soc-feed-cols-alerts: 84px 132px 80px 108px minmax(210px, 1fr) 128px 168px;
    --soc-feed-col-gap-compact: 7px;
  }

  body.soc-desktop-shell #ticketsView {
    --soc-feed-cols-tickets: 80px 122px 88px 86px minmax(216px, 1fr) 120px 180px;
    --soc-feed-col-gap-compact: 7px;
  }

  body.soc-desktop-shell #alertsView .incident-comment-preview,
  body.soc-desktop-shell #alertsView .incident-ticket-description,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment {
    -webkit-line-clamp: 1;
    max-height: 1.32em;
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  body.soc-desktop-shell #alertsView {
    --soc-feed-cols-alerts: 82px 126px 72px 0px minmax(220px, 1fr) 118px 152px;
    --soc-feed-col-gap-compact: 6px;
  }

  body.soc-desktop-shell #ticketsView {
    --soc-feed-cols-tickets: 78px 114px 84px 0px minmax(220px, 1fr) 112px 156px;
    --soc-feed-col-gap-compact: 6px;
  }

  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(4),
  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(4),
  body.soc-desktop-shell #alertsView .incident-location,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-site {
    display: none !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-list-header,
  body.soc-desktop-shell #ticketsView .soc-pc-list-header,
  body.soc-desktop-shell #alertsView .incident-card,
  body.soc-desktop-shell #alertsView .incident-ticket-card,
  body.soc-desktop-shell #ticketsView .ticket-card {
    padding-inline: 12px !important;
  }

  body.soc-desktop-shell #alertsView .incident-comment-preview,
  body.soc-desktop-shell #alertsView .incident-ticket-description,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment {
    -webkit-line-clamp: 1;
    max-height: 1.32em;
  }
}

/* ===== SOC PC layout hotfix (2026-03-01) ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell #homeView,
  body.soc-desktop-shell #ticketsView,
  body.soc-desktop-shell #homeView > *,
  body.soc-desktop-shell #ticketsView > *,
  body.soc-desktop-shell #homeView .soc-block,
  body.soc-desktop-shell #ticketsView .soc-block {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
  }

  body.soc-desktop-shell #alertsView .soc-pc-two-col-shell,
  body.soc-desktop-shell #ticketsView .soc-pc-two-col-shell {
    grid-template-columns: minmax(0, 1fr) 336px !important;
    gap: 14px !important;
    align-items: start;
  }

  body.soc-desktop-shell #alertsView .soc-pc-list-main,
  body.soc-desktop-shell #ticketsView .soc-pc-list-main {
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow-x: hidden !important;
    padding-inline: 12px !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel,
  body.soc-desktop-shell #ticketsView .soc-pc-side-panel {
    width: 336px !important;
    min-width: 336px !important;
    max-width: 336px !important;
  }

  body.soc-desktop-shell #alertsView {
    --soc-feed-cols-alerts: 76px 108px 76px 126px minmax(128px, 1fr) 106px minmax(108px, 156px);
    --soc-feed-col-gap-compact: 6px;
  }

  body.soc-desktop-shell #ticketsView {
    --soc-feed-cols-tickets: 76px 112px 88px 86px minmax(150px, 1fr) 108px minmax(130px, 182px);
    --soc-feed-col-gap-compact: 6px;
  }

  body.soc-desktop-shell #alertsView .soc-pc-list-header,
  body.soc-desktop-shell #ticketsView .soc-pc-list-header {
    display: grid !important;
    align-items: center;
    column-gap: var(--soc-feed-col-gap-compact) !important;
    padding-inline: 12px !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-incident-header {
    grid-template-columns: var(--soc-feed-cols-alerts) !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-ticket-header {
    grid-template-columns: var(--soc-feed-cols-tickets) !important;
  }

  body.soc-desktop-shell #alertsView .incident-card,
  body.soc-desktop-shell #alertsView .incident-ticket-card {
    grid-template-columns: var(--soc-feed-cols-alerts) !important;
    column-gap: var(--soc-feed-col-gap-compact) !important;
    min-height: 74px;
    padding-inline: 12px !important;
    padding-block: 8px !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-card {
    grid-template-columns: var(--soc-feed-cols-tickets) !important;
    column-gap: var(--soc-feed-col-gap-compact) !important;
    min-height: 74px;
    padding-inline: 12px !important;
    padding-block: 8px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(1),
  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(2),
  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(3),
  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(4),
  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(6),
  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(1),
  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(2),
  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(3),
  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(4),
  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(6) {
    justify-self: center !important;
    text-align: center !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(5),
  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(7),
  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(5),
  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(7) {
    justify-self: center !important;
    text-align: center !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-head-pills,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-type,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-requested,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-site,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-updated,
  body.soc-desktop-shell #alertsView .incident-status,
  body.soc-desktop-shell #alertsView .incident-type,
  body.soc-desktop-shell #alertsView .incident-severity,
  body.soc-desktop-shell #alertsView .incident-location,
  body.soc-desktop-shell #alertsView .incident-created-at {
    justify-self: center !important;
    text-align: center !important;
  }

  body.soc-desktop-shell #alertsView .incident-location {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-title,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment,
  body.soc-desktop-shell #alertsView .incident-title,
  body.soc-desktop-shell #alertsView .incident-comment-preview,
  body.soc-desktop-shell #alertsView .incident-ticket-description {
    justify-self: stretch !important;
    text-align: left !important;
    min-width: 0;
  }

  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment,
  body.soc-desktop-shell #alertsView .incident-comment-preview,
  body.soc-desktop-shell #alertsView .incident-ticket-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.32;
    max-height: calc(1.32em * 2);
  }

  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment.is-support-worker-state {
    justify-self: stretch !important;
    justify-content: flex-start !important;
    -webkit-line-clamp: unset;
    white-space: nowrap;
    max-height: none;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-list-main {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-list-header {
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 0 8px !important;
    padding: 0 12px 10px !important;
    overflow: visible !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-list {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card {
    border-inline: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card:last-child {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell #alertsView .soc-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }

  body.soc-desktop-shell #ticketsView .soc-ticket-summary-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
  }

  body.soc-desktop-shell #alertsView .soc-summary-card,
  body.soc-desktop-shell #ticketsView .soc-summary-card {
    min-height: 96px;
    padding: 12px 14px;
    border: 1px solid var(--soc-border-strong);
    background: color-mix(in srgb, var(--soc-card-bg) 88%, var(--soc-panel-bg) 12%);
    box-shadow: var(--soc-shadow-soft);
  }

  body.soc-desktop-shell #alertsView .soc-summary-card .soc-summary-label,
  body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-label {
    color: var(--soc-text-subtle);
  }

  body.soc-desktop-shell #alertsView .soc-summary-card .soc-summary-value,
  body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-value {
    color: var(--soc-text);
  }

  body.soc-desktop-shell #alertsView .soc-summary-card.is-active,
  body.soc-desktop-shell #ticketsView .soc-summary-card.is-active {
    border-color: var(--soc-summary-active-border);
    background: linear-gradient(180deg, var(--soc-summary-active-grad-1), var(--soc-summary-active-grad-2));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--soc-shadow) 90%, transparent);
  }

}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  body.soc-desktop-shell #alertsView {
    --soc-feed-cols-alerts: 74px 104px 72px 104px minmax(120px, 1fr) 102px minmax(102px, 148px);
  }

  body.soc-desktop-shell #ticketsView {
    --soc-feed-cols-tickets: 74px 104px 84px 80px minmax(142px, 1fr) 102px minmax(114px, 162px);
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  body.soc-desktop-shell #alertsView .soc-pc-two-col-shell,
  body.soc-desktop-shell #ticketsView .soc-pc-two-col-shell {
    grid-template-columns: minmax(0, 1fr) 312px !important;
    gap: 12px !important;
  }
}

/* ===== Mobile feed restore (<768): keep legacy card UI for alerts/tickets ===== */
@media (max-width: 767.98px) {
  #alertsView .soc-workspace-inline-summary,
  #ticketsView .soc-ticket-feed-summary {
    display: none !important;
  }

  #ticketsView .soc-ticket-datebar,
  #ticketsView .soc-ticket-summary-grid {
    display: none !important;
  }

  #ticketsView #ticketStatusFilterChips {
    display: flex !important;
  }

  #alertsView .soc-pc-list-header,
  #ticketsView .soc-pc-list-header,
  #alertsView .soc-pc-side-panel,
  #ticketsView .soc-pc-side-panel {
    display: none !important;
  }

  #alertsView .soc-pc-two-col-shell,
  #ticketsView .soc-pc-two-col-shell {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  #alertsView .soc-pc-list-main,
  #ticketsView .soc-pc-list-main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
    overflow: visible !important;
  }

  #alertsView .incident-list,
  #ticketsView .ticket-list {
    display: grid !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #alertsView .incident-card,
  #alertsView .incident-ticket-card,
  #ticketsView .ticket-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 6px !important;
    border-radius: 12px !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    background: var(--ui-bg-surface, var(--soc-card-bg)) !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    min-height: 0 !important;
  }

  #alertsView .incident-card::before,
  #ticketsView .ticket-card::before {
    display: none !important;
  }

  #alertsView .incident-card-head,
  #ticketsView .ticket-card-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  #alertsView .incident-title,
  #ticketsView .ticket-title {
    margin: 0 !important;
    min-width: 0 !important;
    padding-right: 96px !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #alertsView .incident-card-badges,
  #ticketsView .ticket-head-pills {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  #alertsView .incident-card-badges .incident-status,
  #alertsView .incident-card-badges .incident-ticket-status,
  #ticketsView .ticket-head-pills .ticket-status-pill {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  #alertsView .incident-type,
  #alertsView .incident-created-at,
  #alertsView .incident-location,
  #alertsView .incident-type-badge,
  #alertsView .incident-ticket-description,
  #ticketsView .ticket-row-summary {
    display: none !important;
  }

  #alertsView .incident-mobile-meta,
  #alertsView .incident-mobile-comment,
  #ticketsView .ticket-mobile-meta,
  #ticketsView .ticket-mobile-comment {
    display: block !important;
    margin: 0 !important;
    min-width: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #alertsView .incident-mobile-meta,
  #ticketsView .ticket-mobile-meta {
    padding-right: 96px !important;
  }

  #alertsView .incident-mobile-eci {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: 44% !important;
    min-height: 22px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    padding: 3px 7px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #alertsView .incident-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding-top: 2px !important;
  }

  #ticketsView .ticket-full-content-actions {
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin: 0 !important;
  }

  #ticketsView .ticket-full-content-actions .viewDetailBtn {
    min-height: 32px !important;
  }

  #alertsView .incident-attachments,
  #alertsView .instruction-list,
  #alertsView .instruction-form,
  #ticketsView .ticket-kv-row,
  #ticketsView .ticket-kv-list,
  #ticketsView .ticket-comments,
  #ticketsView .ticket-attachments,
  #ticketsView .ticket-meta-line,
  #ticketsView .ticket-action-row.ticket-extra {
    display: none !important;
  }
}

/* ===== Desktop-adaptive shell/feed (>=768): keep PC structure without mobile switch ===== */
@media (min-width: 768px) {
  #bottomTabNav.soc-bottom-tab {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  body.role-hq #menuToggleBtn:not(.hidden),
  body.role-field #menuToggleBtn:not(.hidden) {
    display: inline-flex !important;
  }

  body:not(.nav-open) #menuSheetPanel,
  body:not(.nav-open) .container.admin-layout #menuSheetPanel {
    display: none !important;
  }

  body.nav-open #menuSheetPanel,
  body.nav-open .container.admin-layout #menuSheetPanel {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(86vw, 320px) !important;
    max-width: min(86vw, 320px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 14px 14px 0 !important;
    border-right: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    z-index: var(--ui-z-drawer, 400) !important;
    transform: translateX(0) !important;
  }

  body.nav-open .nav-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.28) !important;
  }

  .container.admin-layout {
    grid-template-columns: 1fr !important;
  }

  .container.ds-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 16px calc(16px + var(--soc-safe-bottom, 0px)) !important;
  }

  #dashboardPanel {
    max-height: none !important;
    overflow: visible !important;
  }

  #homeView,
  #alertsView,
  #ticketsView,
  #weeklyView,
  #peopleView,
  #myProfileView,
  #analyticsView,
  #adminView,
  #reportsView {
    padding-bottom: 12px !important;
    overflow-y: auto !important;
  }

  #alertsView .soc-pc-two-col-shell,
  #ticketsView .soc-pc-two-col-shell,
  body.soc-desktop-shell #alertsView .soc-pc-two-col-shell,
  body.soc-desktop-shell #ticketsView .soc-pc-two-col-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  #alertsView .soc-pc-side-panel,
  #ticketsView .soc-pc-side-panel,
  body.soc-desktop-shell #alertsView .soc-pc-side-panel,
  body.soc-desktop-shell #ticketsView .soc-pc-side-panel {
    display: flex !important;
    position: fixed !important;
    top: 62px !important;
    right: 10px !important;
    width: min(92vw, 380px) !important;
    min-width: min(92vw, 380px) !important;
    max-width: min(92vw, 380px) !important;
    max-height: calc(100dvh - 74px) !important;
    border-radius: 12px !important;
    z-index: var(--ui-z-overlay, 300) !important;
    transform: translateX(calc(100% + 16px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.16s ease, opacity 0.16s ease;
  }

  #alertsView .soc-pc-side-panel.is-open,
  #ticketsView .soc-pc-side-panel.is-open,
  body.soc-desktop-shell #alertsView .soc-pc-side-panel.is-open,
  body.soc-desktop-shell #ticketsView .soc-pc-side-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  #alertsView .soc-pc-side-panel.hidden,
  #ticketsView .soc-pc-side-panel.hidden,
  body.soc-desktop-shell #alertsView .soc-pc-side-panel.hidden,
  body.soc-desktop-shell #ticketsView .soc-pc-side-panel.hidden {
    display: flex !important;
    transform: translateX(calc(100% + 16px));
    opacity: 0;
    pointer-events: none;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  #alertsView {
    --soc-feed-cols-alerts-adaptive: 82px 132px 84px 126px minmax(206px, 1fr) 130px 152px;
  }

  #ticketsView {
    --soc-feed-cols-tickets-adaptive: 84px 146px 92px 100px minmax(260px, 1fr) 140px 184px;
  }

  #alertsView .soc-pc-list-header,
  #ticketsView .soc-pc-list-header {
    display: grid !important;
    align-items: center;
    column-gap: 10px !important;
    min-height: 40px !important;
    padding-inline: 12px !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 10px !important;
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)) !important;
    margin: 0 0 6px !important;
  }

  #alertsView .soc-pc-incident-header {
    grid-template-columns: var(--soc-feed-cols-alerts-adaptive) !important;
  }

  #ticketsView .soc-pc-ticket-header {
    grid-template-columns: var(--soc-feed-cols-tickets-adaptive) !important;
  }

  #alertsView .incident-list,
  #ticketsView .ticket-list {
    display: grid !important;
    gap: 0 !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: var(--ui-bg-surface, var(--soc-card-bg)) !important;
  }

  #alertsView .incident-card,
  #alertsView .incident-ticket-card {
    display: grid !important;
    grid-template-columns: var(--soc-feed-cols-alerts-adaptive) !important;
    align-items: center !important;
    column-gap: 10px !important;
    min-height: 64px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #alertsView .incident-list > .incident-card:last-child {
    border-bottom: 0 !important;
  }

  #ticketsView .ticket-card {
    display: grid !important;
    grid-template-columns: var(--soc-feed-cols-tickets-adaptive) !important;
    align-items: center !important;
    column-gap: 10px !important;
    min-height: 64px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #ticketsView .ticket-list > .ticket-card:last-child {
    border-bottom: 0 !important;
  }

  #alertsView .incident-card::before,
  #ticketsView .ticket-card::before {
    display: none !important;
  }

  #alertsView .incident-card-head,
  #alertsView .incident-card-badges,
  #ticketsView .ticket-card-head,
  #ticketsView .ticket-row-summary {
    display: contents !important;
  }

  #alertsView .incident-mobile-meta,
  #alertsView .incident-mobile-comment,
  #alertsView .incident-mobile-eci,
  #ticketsView .ticket-mobile-meta,
  #ticketsView .ticket-mobile-comment,
  #ticketsView .ticket-kv-row,
  #ticketsView .ticket-kv-list,
  #ticketsView .ticket-comments,
  #ticketsView .ticket-attachments,
  #ticketsView .ticket-meta-line,
  #ticketsView .ticket-action-row.ticket-extra {
    display: none !important;
  }

  #alertsView .incident-title,
  #ticketsView .ticket-title {
    justify-self: stretch !important;
    text-align: left !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-comment-preview,
  #alertsView .incident-ticket-description,
  #ticketsView .ticket-row-summary-comment {
    min-width: 0;
    margin: 0;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.3;
    max-height: 1.3em;
  }

  #ticketsView .ticket-row-summary-comment.is-support-worker-state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    max-height: none;
  }

  #alertsView .incident-status,
  #alertsView .incident-type,
  #alertsView .incident-severity,
  #alertsView .incident-location,
  #alertsView .incident-created-at,
  #ticketsView .ticket-head-pills,
  #ticketsView .ticket-row-summary-type,
  #ticketsView .ticket-row-summary-requested,
  #ticketsView .ticket-row-summary-site,
  #ticketsView .ticket-row-summary-updated {
    justify-self: center !important;
    text-align: center !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #alertsView .incident-location {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    display: block !important;
  }
}

@media (min-width: 960px) and (max-width: 1199.98px) {
  #alertsView {
    --soc-feed-cols-alerts-adaptive: 78px 122px 80px 120px minmax(203px, 1fr) 126px 0px;
  }

  #ticketsView {
    --soc-feed-cols-tickets-adaptive: 80px 136px 88px 96px minmax(250px, 1fr) 136px 0px;
  }

  #alertsView .soc-pc-list-header > span:nth-child(7),
  #ticketsView .soc-pc-list-header > span:nth-child(7),
  #alertsView .incident-comment-preview,
  #alertsView .incident-ticket-description,
  #ticketsView .ticket-row-summary-comment {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 959.98px) {
  #alertsView {
    --soc-feed-cols-alerts-adaptive: 74px 116px 0px 0px minmax(220px, 1fr) 114px 0px;
  }

  #ticketsView {
    --soc-feed-cols-tickets-adaptive: 76px 124px 82px 0px minmax(230px, 1fr) 118px 0px;
  }

  #alertsView .soc-pc-list-header > span:nth-child(3),
  #alertsView .soc-pc-list-header > span:nth-child(4),
  #alertsView .soc-pc-list-header > span:nth-child(7),
  #ticketsView .soc-pc-list-header > span:nth-child(4),
  #ticketsView .soc-pc-list-header > span:nth-child(7),
  #alertsView .incident-severity,
  #alertsView .incident-location,
  #alertsView .incident-comment-preview,
  #alertsView .incident-ticket-description,
  #ticketsView .ticket-row-summary-site,
  #ticketsView .ticket-row-summary-comment {
    display: none !important;
  }

  #alertsView .incident-card,
  #alertsView .incident-ticket-card,
  #ticketsView .ticket-card {
    min-height: 60px !important;
    padding: 7px 10px !important;
    column-gap: 8px !important;
  }

  #alertsView .soc-pc-list-header,
  #ticketsView .soc-pc-list-header {
    min-height: 38px !important;
    padding-inline: 10px !important;
    column-gap: 8px !important;
  }
}

/* Support roster adaptive: 1200+ two-column, below stacked/overlay */
@media (min-width: 1200px) {
  #opsSupportPanel .soc-ops-support-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  #opsSupportPanel .soc-ops-support-layout.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  #opsSupportPanel .soc-ops-support-sheet {
    position: sticky;
    top: 72px;
  }
}

@media (min-width: 960px) and (max-width: 1199.98px) {
  #opsSupportPanel .soc-ops-support-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #opsSupportPanel .soc-ops-support-sheet {
    position: static;
    width: 100%;
    max-height: none;
  }
}

/* Mobile-only premium feed restoration (PC 영향 금지) */
@media (max-width: 767px) {
  #alertsView #realtimeListSkeleton,
  #alertsView #alerts:empty {
    display: none !important;
  }

  #alertsView .incident-list,
  #ticketsView .ticket-list {
    display: grid !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #alertsView .incident-card.m-feed-card,
  #alertsView .incident-ticket-card.m-feed-card,
  #ticketsView .ticket-card.m-feed-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 14px 14px 14px 16px !important;
    border: 1px solid #dbe2ee !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08) !important;
    overflow: visible !important;
  }

  #alertsView .incident-card.m-feed-card,
  #alertsView .incident-ticket-card.m-feed-card {
    gap: 12px !important;
    padding: 16px 16px 16px 18px !important;
  }

  #alertsView .incident-card.m-feed-card::before,
  #ticketsView .ticket-card.m-feed-card::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    border-radius: 16px 0 0 16px !important;
    background: var(--ui-accent, #ff6b00) !important;
    display: block !important;
  }

  #alertsView .incident-ticket-card.m-feed-card.status-needs-info::before,
  #ticketsView .ticket-card.m-feed-card.status-needs-info::before {
    background: var(--ui-warning, #f59e0b) !important;
  }

  #alertsView .incident-ticket-card.m-feed-card.status-approved::before,
  #ticketsView .ticket-card.m-feed-card.status-approved::before {
    background: var(--ui-success, #16a34a) !important;
  }

  #alertsView .incident-ticket-card.m-feed-card.status-rejected::before,
  #ticketsView .ticket-card.m-feed-card.status-rejected::before {
    background: var(--ui-danger, #dc2626) !important;
  }

  #alertsView .incident-ticket-card.m-feed-card.status-done::before,
  #ticketsView .ticket-card.m-feed-card.status-done::before {
    background: #667085 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-card-head,
  #ticketsView .ticket-card.m-feed-card .ticket-card-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  #alertsView .m-incident-card.m-card--escalation .incident-card-head {
    position: relative !important;
  }

  #alertsView .m-incident-card.m-card--escalation .incident-head-actions {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  #alertsView .m-incident-card.m-card--escalation .incident-card-head > .incident-status.m-pill {
    margin-right: 36px !important;
  }

  #alertsView .m-incident-card.m-card--escalation .incident-more-btn {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-title,
  #ticketsView .ticket-card.m-feed-card .ticket-title {
    margin: 0 !important;
    min-width: 0 !important;
    padding-right: 104px !important;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }

  #alertsView .incident-card.m-feed-card .incident-type,
  #alertsView .incident-card.m-feed-card .incident-created-at,
  #alertsView .incident-card.m-feed-card .incident-location,
  #alertsView .incident-card.m-feed-card .incident-ticket-description,
  #ticketsView .ticket-card.m-feed-card .ticket-row-summary {
    display: none !important;
  }

  #alertsView .incident-card.m-feed-card .incident-card-badges,
  #ticketsView .ticket-card.m-feed-card .ticket-head-pills {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  #alertsView .incident-card.m-feed-card .incident-card-badges .incident-status,
  #alertsView .incident-card.m-feed-card .incident-card-badges .incident-ticket-status,
  #ticketsView .ticket-card.m-feed-card .ticket-head-pills .ticket-status-pill {
    margin: 0 !important;
    min-height: 24px !important;
    border-radius: 999px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #alertsView .incident-card.m-feed-card .incident-card-badges .incident-severity,
  #alertsView .incident-card.m-feed-card .incident-card-badges .incident-location,
  #alertsView .incident-card.m-feed-card .incident-card-badges .incident-type-badge,
  #ticketsView .ticket-card.m-feed-card .ticket-head-pills .ticket-urgent-pill {
    display: none !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-meta,
  #alertsView .incident-card.m-feed-card .incident-mobile-comment,
  #ticketsView .ticket-card.m-feed-card .ticket-mobile-meta,
  #ticketsView .ticket-card.m-feed-card .ticket-mobile-comment {
    display: -webkit-box !important;
    margin: 0 !important;
    min-width: 0 !important;
    color: #667085 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-right: 104px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-meta-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    margin: 0 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-meta-label {
    color: #98a2b3 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-meta-value {
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-comment {
    display: block !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--ui-border-subtle, #d0d7e2) !important;
    border-radius: 12px !important;
    background: var(--ui-bg-surface, #ffffff) !important;
    color: #667085 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-guidance-title {
    margin: 0 !important;
    color: var(--ui-accent, #ff6b00) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-guidance-body {
    margin: 0 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-meta,
  #ticketsView .ticket-card.m-feed-card .ticket-mobile-meta {
    padding-right: 104px !important;
  }

  #alertsView .incident-card.m-feed-card .incident-mobile-eci {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-end !important;
    margin: 0 0 0 auto !important;
    min-height: 22px !important;
    border-radius: 999px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-actions,
  #ticketsView .ticket-card.m-feed-card .ticket-full-content-actions {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding-top: 2px !important;
  }

  #alertsView .incident-card.m-feed-card .incident-actions .viewDetailBtn,
  #ticketsView .ticket-card.m-feed-card .ticket-full-content-actions .viewDetailBtn {
    width: auto !important;
    min-width: 104px !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
  }

  #alertsView .incident-card.m-feed-card .incident-actions .viewDetailBtn.m-button,
  #ticketsView .ticket-card.m-feed-card .ticket-full-content-actions .viewDetailBtn.m-button {
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* Authoritative mobile incident card restoration: keep premium card sections visible. */
  #alertsView .incident-card.m-feed-card .incident-attachments:not(.hidden),
  #alertsView .incident-card.m-feed-card .instruction-list:not(.hidden),
  #alertsView .incident-card.m-feed-card .instruction-form:not(.hidden) {
    display: block !important;
  }

  #alertsView .incident-card.m-feed-card .instruction-list:not(.hidden) {
    margin: 0 !important;
    border: 1px solid var(--ui-border-subtle, #d0d7e2) !important;
    border-radius: 14px !important;
    background: var(--ui-bg-surface, #ffffff) !important;
    padding: 10px 12px !important;
    color: var(--ui-text-secondary, #667085) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: pre-wrap !important;
  }

  #alertsView .incident-card.m-feed-card .instruction-form:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-comment-target {
    margin: 0 !important;
    color: var(--ui-text-secondary, #667085) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  #alertsView .incident-card.m-feed-card .instructionInput {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
  }

  #alertsView .incident-card.m-feed-card .instruction-form .ds-btn {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-attachments:not(.hidden) {
    margin: 0 !important;
    padding: 0 !important;
  }

  #alertsView .incident-card.m-feed-card .incident-attachments .attachment-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #alertsView .incident-card.m-feed-card .incident-attachments .attachment-item {
    border: 1px solid var(--ui-border-subtle, #d0d7e2) !important;
    border-radius: 12px !important;
    background: var(--ui-bg-surface, #ffffff) !important;
    padding: 8px !important;
  }

  /* Authoritative mobile ticket card restoration: keep premium card sections visible. */
  #ticketsView .ticket-card.m-feed-card .ticket-kv-row,
  #ticketsView .ticket-card.m-feed-card .ticket-kv-list,
  #ticketsView .ticket-card.m-feed-card .ticket-comments,
  #ticketsView .ticket-card.m-feed-card .ticket-attachments,
  #ticketsView .ticket-card.m-feed-card .ticket-meta-line,
  #ticketsView .ticket-card.m-feed-card .ticket-action-row.ticket-extra,
  #ticketsView .ticket-card.m-feed-card .ticket-actions-row,
  #ticketsView .ticket-card.m-feed-card .ticket-comment-form,
  #ticketsView .ticket-card.m-feed-card .ticket-attachment-form {
    display: block !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-action-row.ticket-extra {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-location-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-comments {
    border: 1px solid var(--ui-border-subtle, #d0d7e2) !important;
    border-radius: 14px !important;
    background: var(--ui-bg-surface, #ffffff) !important;
    padding: 10px 12px !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-comments-title {
    margin: 0 0 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--ui-accent, #ff6b00) !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-comments .help,
  #ticketsView .ticket-card.m-feed-card .ticket-comment-item {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: var(--ui-text-secondary, #667085) !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-actions-row {
    margin: 0 !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-status-select {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-comment-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-comment-target {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--ui-text-secondary, #667085) !important;
    line-height: 1.3 !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-comment-input {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-comment-form .ds-btn {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-attachment-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  #ticketsView .ticket-card.m-feed-card .ticket-attachment-form .ds-btn {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 12px !important;
  }
}

@media (min-width: 768px) {
  #ticketsView #ticketStatusFilterChips {
    display: none !important;
  }
}

/* Mobile DS v1: incident/ticket/notice unified card system (PC 영향 금지) */
@media (max-width: 767px) {
  #alertsView .m-card,
  #ticketsView .m-card {
    border-radius: 16px !important;
    padding: 18px !important;
    gap: 14px !important;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08) !important;
  }

  #alertsView .m-card-header,
  #ticketsView .m-card-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding-right: 0 !important;
  }

  #alertsView .m-card-title,
  #ticketsView .m-card-title {
    min-width: 0 !important;
    margin: 0 !important;
    padding-right: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  #alertsView .m-pill-row,
  #ticketsView .m-pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #alertsView .m-pill,
  #ticketsView .m-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    height: 26px !important;
    border-radius: 14px !important;
    padding: 0 10px !important;
    border: 1px solid var(--ui-border-subtle, #d0d7e2) !important;
    background: var(--ui-bg-surface-muted, #f2f4f7) !important;
    color: var(--ui-text-secondary, #667085) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #alertsView .m-pill.m-pill--status,
  #ticketsView .m-pill.m-pill--status {
    color: #b45309 !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    background: #fff6e8 !important;
  }

  #alertsView .m-pill.m-pill--notice {
    color: #475467 !important;
    border-color: #d0d5dd !important;
    background: #f8fafc !important;
  }

  #alertsView .m-pill.m-pill--eci {
    color: #b45309 !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    background: #fff2e2 !important;
  }

  #alertsView .m-pill.m-pill--type,
  #ticketsView .m-pill.m-pill--type {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #3730a3 !important;
  }

  #alertsView .m-pill.m-pill--request,
  #ticketsView .m-pill.m-pill--request {
    background: #fff1e8 !important;
    border-color: rgba(255, 107, 0, 0.55) !important;
    color: #c2410c !important;
  }

  #alertsView .m-pill.m-pill--urgent,
  #ticketsView .m-pill.m-pill--urgent {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
  }

  #alertsView .m-meta-grid,
  #ticketsView .m-meta-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  #alertsView .m-meta-row,
  #ticketsView .m-meta-row {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
  }

  #alertsView .m-meta-label,
  #ticketsView .m-meta-label {
    color: #98a2b3 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  #alertsView .m-meta-value,
  #ticketsView .m-meta-value {
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #alertsView .m-subcard,
  #ticketsView .m-subcard {
    margin: 0 !important;
    border: 1px solid #d7dde7 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    padding: 12px !important;
    color: #475467 !important;
    box-shadow: none !important;
  }

  #alertsView .m-subcard-title,
  #ticketsView .m-subcard-title {
    margin: 0 0 8px !important;
    color: var(--ui-accent, #ff6b00) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  #alertsView .m-subcard.m-subcard--comment,
  #ticketsView .m-subcard.m-subcard--comment {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #667085 !important;
  }

  #alertsView .m-card-footer,
  #ticketsView .m-card-footer {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #alertsView .m-button,
  #ticketsView .m-button {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  #alertsView .m-incident-card .incident-mobile-eci {
    margin: 0 !important;
  }

  #ticketsView .m-ticket-card .ticket-mobile-detail-subcard .ticket-kv-row {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    border: 0 !important;
  }

  #ticketsView .m-ticket-card .ticket-mobile-detail-subcard .ticket-kv-label {
    font-size: 12px !important;
    color: #98a2b3 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  #ticketsView .m-ticket-card .ticket-mobile-detail-subcard .ticket-kv-value {
    font-size: 14px !important;
    color: #334155 !important;
    min-width: 0 !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 768px) and (max-width: 959.98px) {
  #opsSupportPanel .soc-ops-support-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #opsSupportPanel .soc-ops-support-sheet {
    position: fixed;
    top: 58px;
    right: 8px;
    width: min(94vw, 380px);
    max-height: calc(100dvh - 66px);
    z-index: var(--ui-z-overlay, 300);
    transform: translateX(calc(100% + 12px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.16s ease, opacity 0.16s ease;
  }

  #opsSupportPanel .soc-ops-support-sheet:not(.hidden) {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  #opsSupportPanel .soc-ops-support-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .soc-app-shell {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .topbar {
    display: flex !important;
    grid-template-columns: none !important;
    padding: 10px 14px !important;
  }

  .container.ds-page {
    padding: 12px 12px calc(12px + var(--soc-safe-bottom, 0px)) !important;
  }
}

@media (min-width: 1440px) {
  .container.ds-page {
    padding: 24px 24px 20px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
  .container.ds-page {
    padding: 20px 20px 18px !important;
  }
}

@media (min-width: 960px) and (max-width: 1199.98px) {
  .container.ds-page {
    padding: 16px 16px 14px !important;
  }

  #homeView .soc-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #analyticsContentWrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #analyticsContentWrap > #analyticsStoreComparisonBlock {
    grid-column: 1 / -1;
  }

  #alertsView .soc-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #ticketsView .soc-ticket-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 959.98px) {
  .container.ds-page {
    padding: 12px 12px 12px !important;
  }

  #homeView .soc-home-grid,
  #analyticsContentWrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #alertsView .soc-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #ticketsView .soc-ticket-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Authoritative desktop-adaptive guard (>=768): no mobile-shell fallback ===== */
@media (min-width: 768px) {
  body.soc-desktop-adaptive #bottomTabNav.soc-bottom-tab {
    display: none !important;
  }

  body.soc-desktop-adaptive #menuSheetPanel > .ds-card-title {
    display: none !important;
  }

  body.soc-desktop-adaptive #menuSheetPanel .soc-menu-group-label,
  body.soc-desktop-adaptive #menuSheetPanel .soc-menu-sub-item-label {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.soc-desktop-adaptive #menuSheetPanel .soc-menu-group-toggle,
  body.soc-desktop-adaptive #menuSheetPanel .soc-menu-sub-item {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body.soc-desktop-adaptive #menuSheetPanel .menu-footer,
  body.soc-desktop-adaptive #menuSheetPanel .sidebar-footer,
  body.soc-desktop-adaptive #menuSheetPanel .menu-role-section,
  body.soc-desktop-adaptive #menuSheetPanel .sidebar-bottom {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 959.98px) {
  #alertsView .soc-pc-side-panel,
  #ticketsView .soc-pc-side-panel,
  body.soc-desktop-shell #alertsView .soc-pc-side-panel,
  body.soc-desktop-shell #ticketsView .soc-pc-side-panel {
    top: 0 !important;
    right: 0 !important;
    width: min(96vw, 520px) !important;
    min-width: min(96vw, 520px) !important;
    max-width: min(96vw, 520px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  #alertsView .soc-pc-side-panel:not(.hidden),
  #ticketsView .soc-pc-side-panel:not(.hidden),
  body.soc-desktop-shell #alertsView .soc-pc-side-panel:not(.hidden),
  body.soc-desktop-shell #ticketsView .soc-pc-side-panel:not(.hidden) {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28) !important;
  }
}

/* Alerts feed: keep skeleton/empty blocks truly hidden in desktop-adaptive mode */
@media (min-width: 768px) {
  #alertsView #realtimeListSkeleton.hidden,
  #alertsView #realtimeEmptyState.hidden,
  #alertsView #realtimeErrorState.hidden {
    display: none !important;
  }

  #alertsView #alerts:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Tickets feed alignment override: keep header/cell center axis identical */
@media (min-width: 768px) {
  body.soc-desktop-shell #ticketsView .soc-pc-ticket-header > span,
  body.soc-desktop-shell #ticketsView .ticket-head-pills,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-type,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-requested,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-site,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-updated,
  body.soc-desktop-shell #ticketsView .ticket-title,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment {
    justify-self: center !important;
    text-align: center !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-title,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment.is-support-worker-state {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-line-clamp: unset;
    white-space: nowrap;
  }
}

/* Alerts feed alignment + ECI pill compact tuning (final override) */
@media (min-width: 768px) {
  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(5),
  body.soc-desktop-shell #alertsView .soc-pc-list-header > span:nth-child(7),
  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(5),
  body.soc-desktop-shell #ticketsView .soc-pc-list-header > span:nth-child(7),
  body.soc-desktop-adaptive #alertsView .soc-pc-list-header > span:nth-child(5),
  body.soc-desktop-adaptive #alertsView .soc-pc-list-header > span:nth-child(7),
  body.soc-desktop-adaptive #ticketsView .soc-pc-list-header > span:nth-child(5),
  body.soc-desktop-adaptive #ticketsView .soc-pc-list-header > span:nth-child(7) {
    justify-self: center !important;
    text-align: center !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-incident-header > span,
  body.soc-desktop-adaptive #alertsView .soc-pc-incident-header > span {
    justify-self: center !important;
    text-align: center !important;
  }

  body.soc-desktop-shell #alertsView .incident-status,
  body.soc-desktop-shell #alertsView .incident-type,
  body.soc-desktop-shell #alertsView .incident-location,
  body.soc-desktop-shell #alertsView .incident-created-at,
  body.soc-desktop-shell #alertsView .incident-title,
  body.soc-desktop-shell #alertsView .incident-comment-preview,
  body.soc-desktop-shell #alertsView .incident-ticket-description,
  body.soc-desktop-adaptive #alertsView .incident-status,
  body.soc-desktop-adaptive #alertsView .incident-type,
  body.soc-desktop-adaptive #alertsView .incident-location,
  body.soc-desktop-adaptive #alertsView .incident-created-at,
  body.soc-desktop-adaptive #alertsView .incident-title,
  body.soc-desktop-adaptive #alertsView .incident-comment-preview,
  body.soc-desktop-adaptive #alertsView .incident-ticket-description {
    justify-self: center !important;
    text-align: center !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.soc-desktop-shell #alertsView .incident-title,
  body.soc-desktop-adaptive #alertsView .incident-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.soc-desktop-shell #alertsView .incident-comment-preview,
  body.soc-desktop-shell #alertsView .incident-ticket-description,
  body.soc-desktop-adaptive #alertsView .incident-comment-preview,
  body.soc-desktop-adaptive #alertsView .incident-ticket-description {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }

  body.soc-desktop-shell #alertsView .incident-severity,
  body.soc-desktop-adaptive #alertsView .incident-severity {
    justify-self: center !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
}

/* Alerts/Tickets type column: word-based wrapping + centered multiline */
@media (min-width: 768px) {
  body.soc-desktop-shell #alertsView .incident-card,
  body.soc-desktop-shell #alertsView .incident-ticket-card,
  body.soc-desktop-adaptive #alertsView .incident-card,
  body.soc-desktop-adaptive #alertsView .incident-ticket-card {
    min-height: 86px !important;
    height: auto !important;
  }

  body.soc-desktop-shell #alertsView .incident-type,
  body.soc-desktop-adaptive #alertsView .incident-type,
  body.soc-desktop-shell #ticketsView .ticket-row-summary-type,
  body.soc-desktop-adaptive #ticketsView .ticket-row-summary-type {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-height: 1.35 !important;
  }
}

/* Alerts PC visual parity with Tickets (header/empty state/spacing) */
@media (min-width: 1024px) {
  #alertsView .soc-pc-list-main {
    padding-inline: 22px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #alertsView > .help {
    margin: 6px 0 8px !important;
  }

  #alertsView .soc-alerts-feed-section {
    margin-top: 0 !important;
    gap: 6px;
  }

  #alertsView .soc-alerts-feed-head {
    margin: 0 !important;
    min-height: 0;
  }

  #alertsView .soc-pc-list-header {
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    min-height: 0;
  }

  #alertsView .incident-list {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  #alertsView .incident-list > .incident-card,
  #alertsView .incident-list > .incident-ticket-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-inline: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
  }

  #alertsView .incident-list > .incident-card:last-child,
  #alertsView .incident-list > .incident-ticket-card:last-child {
    border-bottom: 0 !important;
  }

  #alertsView .incident-card,
  #alertsView .incident-ticket-card {
    background: transparent !important;
    border-radius: 0 !important;
    padding-inline: 0 !important;
  }

  #alertsView .incident-card:hover,
  #alertsView .incident-card:active,
  #alertsView .incident-ticket-card:hover,
  #alertsView .incident-ticket-card:active {
    background: var(--ui-bg-surface-muted, var(--soc-surface-overlay-8)) !important;
  }

  #alertsView #realtimeEmptyState {
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    color: var(--soc-text-sub);
    font-size: var(--ui-text-13, var(--soc-text-sm));
    line-height: 1.4;
  }
}

/* Report tab desktop-only layout (field): split selection cards + stable panel height */
@media (min-width: 1024px) {
  body.role-field #reportPanel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: calc(100dvh - (var(--soc-safe-top) + 66px) - 20px);
    overflow: hidden;
    overflow-anchor: none;
  }

  body.role-field #reportPanel > .ds-card-title {
    margin-bottom: 8px;
  }

  body.role-field #reportPanel #reportView {
    min-height: 0;
    width: 100%;
  }

  body.role-field #reportPanel.report-selection-active #reportView {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    min-height: 0;
    overflow: visible;
    width: min(1120px, calc(100% - 24px));
    max-width: min(1120px, calc(100% - 24px));
    margin-left: 0;
    margin-right: 0;
    margin-inline: auto;
    padding: 8px 0 28px;
    box-sizing: border-box;
  }

  body.role-field #reportPanel.report-selection-active #reportFlowStart {
    min-height: 0;
    overflow: visible;
    align-content: start;
  }

  body.role-field #reportPanel.report-selection-active .report-flow-step:not(.hidden) {
    min-height: 0;
    height: auto;
    gap: 14px;
    grid-template-rows: auto auto;
    align-content: start;
  }

  body.role-field #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(188px, auto);
    gap: 16px;
    align-items: stretch;
  }

  body.role-field #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-card {
    width: 100%;
    height: auto;
    min-height: 188px;
    max-height: none;
    aspect-ratio: auto;
    padding: 22px 20px 18px;
    align-content: flex-start;
  }

  body.role-field #reportPanel.report-selection-active .report-choice-grid-1col.selectable-card-grid--pair .report-choice-icon {
    font-size: 1.6rem;
  }

  body.role-field #reportPanel:not(.report-selection-active) #reportView {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    gap: 12px;
  }

  body.role-field #reportPanel:not(.report-selection-active) :is(#quickIncidentForm, #incidentForm, #ticketForm) {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    padding-bottom: 12px;
  }
}

#googleSheetsPanel {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.soc-weekly-subtabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 8px;
  background: var(--soc-surface-base);
  border-bottom: 1px solid var(--soc-border);
}

.soc-weekly-subtab-btn {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--soc-text-sub);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  min-height: 34px;
  padding: 0 8px;
  cursor: pointer;
}

.soc-weekly-subtab-btn.is-active {
  color: var(--soc-brand);
  border-bottom-color: var(--soc-brand);
}

.weekly-ops-section {
  display: grid;
  gap: 10px;
  scroll-margin-top: 56px;
}

.soc-google-sheet-section {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--soc-surface-overlay-4);
}

.soc-google-sheet-service {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.soc-google-sheet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.soc-google-sheet-service code {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-overlay-6);
  color: var(--soc-text-main);
  font-size: 12px;
  word-break: break-all;
}

.soc-google-sheet-summary-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 12px;
  background: #f8fafc;
}

.soc-google-sheet-summary-pill,
.soc-google-sheet-summary-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #ffffff;
  font-size: 12px;
  color: #475569;
}

.soc-google-sheet-active-site {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.soc-google-sheet-form-grid {
  display: grid;
  gap: 8px;
}

.soc-google-sheet-form-grid label {
  font-weight: 600;
  color: var(--soc-text-main);
}

.soc-google-sheet-form-grid input,
.soc-google-sheet-form-grid select {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-base);
  color: var(--soc-text-main);
  padding: 0 12px;
}

.soc-google-sheet-site-row {
  gap: 6px;
}

.soc-google-sheet-site-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
}

.soc-google-sheet-site-controls .soc-google-sheet-active-site {
  display: none;
}

.soc-google-sheet-mapping-table-wrap {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  overflow: auto;
  background: var(--soc-surface-base);
}

.soc-google-sheet-mapping-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.soc-google-sheet-mapping-table th,
.soc-google-sheet-mapping-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--soc-divider);
  vertical-align: middle;
  font-size: 13px;
  color: var(--soc-text-main);
}

.soc-google-sheet-mapping-table th {
  font-weight: 700;
  color: var(--soc-text-sub);
  background: var(--soc-surface-overlay-4);
  position: sticky;
  top: 0;
  z-index: 1;
}

.soc-google-sheet-mapping-table tr:last-child td {
  border-bottom: 0;
}

.soc-google-sheet-link-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.soc-google-sheet-link-main {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--soc-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-google-sheet-link-sub {
  font-size: 12px;
  color: var(--soc-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-google-sheet-link-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.soc-google-sheet-link-tools .ds-btn {
  min-height: 26px;
  padding: 2px 8px;
  font-size: 11px;
}

.soc-google-sheet-link-sub--status {
  max-width: 100%;
}

.soc-google-sheet-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-base);
  color: var(--soc-text-sub);
}

.soc-google-sheet-status-pill.is-ok {
  border-color: #34a853;
  color: #1e6b35;
  background: #eaf7ee;
}

.soc-google-sheet-status-pill.is-error {
  border-color: #f5a623;
  color: #a85a00;
  background: #fff3e8;
}

.soc-google-sheet-status-pill.is-warning {
  border-color: #f5a623;
  color: #a85a00;
  background: #fff7ed;
}

.soc-google-sheet-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.soc-google-sheet-row-actions .ds-btn {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.soc-google-sheet-row-action-danger {
  color: #b91c1c !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: #fff !important;
}

.soc-google-sheet-mapping-modal {
  width: min(560px, calc(100vw - 24px));
}

.soc-google-sheet-tab-name {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--soc-border);
  background: var(--soc-surface-base);
  color: var(--soc-text-main);
  padding: 0 12px;
  font-weight: 600;
}

.soc-google-sheet-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.soc-google-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-google-sheet-status {
  margin: 0;
}

.soc-google-sheet-result {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--soc-surface-overlay-5);
  display: grid;
  gap: 8px;
}

.soc-google-sheet-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.soc-google-sheet-result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--soc-border);
  color: var(--soc-text-sub);
  background: var(--soc-surface-base);
}

.soc-google-sheet-result-badge.is-ok {
  border-color: #34a853;
  color: #1e6b35;
  background: #eaf7ee;
}

.soc-google-sheet-result-badge.is-error {
  border-color: #f5a623;
  color: #a85a00;
  background: #fff3e8;
}

.soc-google-sheet-result-badge.is-warning {
  border-color: #f5a623;
  color: #a85a00;
  background: #fff7ed;
}

.soc-google-sheet-result-badge.is-warn {
  border-color: #f59e0b;
  color: #92400e;
  background: #fffbeb;
}

.soc-google-sheet-sheet-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--soc-text-sub);
  font-size: 12px;
}

.soc-google-sheet-template-section {
  display: grid;
  gap: 10px;
}

.soc-google-sheet-init-year-section {
  display: grid;
  gap: 10px;
}

.soc-google-sheet-check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--soc-text-sub);
  font-size: 13px;
  font-weight: 500;
}

.soc-google-sheet-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

@media (max-width: 1024px) {
  .soc-google-sheet-site-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .soc-workspace-panel {
    width: 100%;
    max-width: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #f7f8fa;
    box-shadow: none;
  }

  .soc-workspace-panel > .panel-title-row,
  .soc-workspace-panel > .soc-sla-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    margin: 0;
  }

  .soc-workspace-panel .panel-title-row .title-inline h2,
  .soc-workspace-panel .soc-sla-header-title-wrap h2 {
    margin: 0;
    font-size: var(--type-title-lg-size);
    line-height: var(--type-title-lg-line);
    font-weight: var(--type-title-lg-weight);
    color: #0f172a;
  }

  .soc-workspace-panel .panel-title-row .title-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  #dashboardPanel.soc-workspace-profile-subview > .panel-title-row {
    border-bottom: 0;
  }

  .soc-workspace-panel .panel-actions,
  .soc-workspace-panel .soc-sla-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .soc-workspace-panel .ds-btn.ds-btn-sm {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
  }

  .soc-workspace-panel .ds-btn:not(.ds-btn-sm),
  .soc-workspace-panel :is(.report-tab, .announcement-mode-btn, .site-filter-btn, .date-filter-btn, .sla-page-btn) {
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
  }

  .soc-workspace-panel :is(.panel-actions, .soc-report-browse-actions, .soc-sla-header-actions) .ds-btn {
    border-radius: 8px;
  }

  .soc-workspace-summary-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .soc-workspace-summary-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .soc-workspace-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .soc-workspace-card-head h3,
  .soc-workspace-card-head .audit-subtitle {
    margin: 0;
  }

  .soc-workspace-card-head .meta {
    margin: 4px 0 0;
  }

  .soc-workspace-panel :is(.soc-block, .soc-report-browse-card, .soc-hub-summary-card, .soc-sla-card, .soc-admin-card) {
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: none;
    background: #ffffff;
  }

  .soc-workspace-panel.soc-workspace-audit :is(#slaPreviewScroller, .audit-list) {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: #fff;
  }

  .soc-workspace-panel .chip-row,
  .soc-workspace-panel .soc-hub-mode-tabs,
  .soc-workspace-panel .date-filter-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .soc-workspace-panel .chip,
  .soc-workspace-panel .date-filter-btn {
    min-height: 32px;
    border-radius: 999px;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, 0.36);
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
  }

  .soc-workspace-panel .chip.is-active,
  .soc-workspace-panel .date-filter-btn.active {
    color: #c2410c;
    border-color: rgba(255, 132, 0, 0.42);
    background: #fff7ed;
  }

  .soc-manage-summary-strip {
    margin-top: -2px;
  }

  .soc-manage-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 380px);
    gap: 16px;
    align-items: start;
  }

  .soc-manage-section-card {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    min-height: 0;
    display: grid;
    gap: 12px;
  }

  .soc-manage-form-card .soc-workspace-card-head {
    margin-bottom: 2px;
  }

  .soc-manage-form-card form {
    margin: 0;
  }

  #accountPanel #accountAdminSection,
  #accountPanel #accountPasswordSection {
    display: grid;
    gap: 16px;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) {
    display: grid;
    gap: 16px;
    align-content: start;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-stats {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-stat {
    min-width: 88px;
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-label {
    font-size: var(--type-label-sm-size, 12px);
    line-height: var(--type-label-sm-line, 16px);
    font-weight: var(--type-label-sm-weight, 600);
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-stat strong {
    font-size: var(--type-section-md-size, 16px);
    line-height: var(--type-section-md-line, 24px);
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-controls {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
    min-width: min(680px, 100%);
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-field {
    min-width: 132px;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-search {
    min-width: min(240px, 100%);
    flex: 1 1 240px;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-danger {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-toolbar-note {
    margin: 0;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid {
    display: grid;
    gap: 12px;
    min-height: 0;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-notice {
    padding: 8px 12px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
    font-size: var(--type-body-sm-size, 13px);
    line-height: var(--type-body-sm-line, 18px);
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-state {
    min-height: 144px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 4px;
    padding: 18px;
    border: 1px dashed var(--ui-divider-default, var(--soc-divider));
    border-radius: 12px;
    background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-state strong {
    font-size: var(--type-section-md-size, 16px);
    line-height: var(--type-section-md-line, 24px);
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-state-actions {
    display: grid;
    justify-items: center;
    gap: 8px;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-wrap {
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 12px;
    background: var(--ui-bg-surface, #fff);
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table th,
  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ui-bg-surface, #fff);
    font-size: var(--type-label-sm-size, 12px);
    line-height: var(--type-label-sm-line, 16px);
    font-weight: var(--type-label-sm-weight, 600);
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table td {
    font-size: var(--type-body-sm-size, 13px);
    line-height: var(--type-body-sm-line, 18px);
    color: var(--ui-text-primary, var(--soc-text));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table tbody tr {
    cursor: pointer;
    transition: background 0.16s ease;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table tbody tr:hover,
  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-table tbody tr.is-selected {
    background: color-mix(in srgb, var(--soc-primary-soft-bg) 48%, var(--ui-bg-surface, #fff));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-primary {
    font-weight: 600;
    color: var(--ui-text-primary, var(--soc-text));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-grid-secondary {
    margin-top: 2px;
    font-size: var(--type-body-sm-size, 13px);
    line-height: var(--type-body-sm-line, 18px);
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-sort-button.is-active {
    color: var(--ui-text-primary, var(--soc-text));
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane) .soc-monitoring-sort-indicator {
    display: inline-flex;
    min-width: 10px;
    justify-content: center;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane, #managerStatusDrawer) .soc-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane, #managerStatusDrawer) .soc-status-dot.is-online {
    background: #16a34a;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane, #managerStatusDrawer) .soc-status-dot.is-idle {
    background: #f59e0b;
  }

  :is(#managerStatusPanel, #peopleHubAccountsPane, #managerStatusDrawer) .soc-status-dot.is-offline {
    background: #94a3b8;
  }

  #managerStatusDrawer .soc-monitoring-drawer-body {
    display: grid;
    gap: 14px;
    padding: 14px 16px 16px;
    overflow: auto;
  }

  #managerStatusDrawer .soc-people-account-detail-shell {
    display: grid;
    gap: 16px;
    min-width: 0;
  }

  #managerStatusDrawer .soc-people-account-detail-empty {
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 220px;
    padding: 18px;
    border: 1px dashed var(--ui-divider-default, var(--soc-divider));
    border-radius: 14px;
    background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  }

  #managerStatusDrawer .soc-people-account-detail-empty strong {
    color: var(--ui-text-primary, var(--soc-text));
    font-size: 16px;
    line-height: 24px;
  }

  #managerStatusDrawer .soc-people-account-hero {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 16px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--soc-primary-soft-bg) 38%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  #managerStatusDrawer .soc-people-account-hero-copy {
    display: grid;
    gap: 4px;
  }

  #managerStatusDrawer .soc-people-account-eyebrow {
    margin: 0;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-size: 11px;
    line-height: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  #managerStatusDrawer .soc-people-account-hero-copy strong {
    color: var(--ui-text-primary, var(--soc-text));
    font-size: 22px;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  #managerStatusDrawer .soc-people-account-hero-copy .meta {
    margin: 0;
  }

  #managerStatusDrawer .soc-people-account-hero-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  #managerStatusDrawer .soc-people-account-chip {
    border-color: var(--ui-border-subtle, var(--soc-border));
    background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 88%, transparent);
    color: var(--ui-text-primary, var(--soc-text));
  }

  #managerStatusDrawer .soc-people-account-stat-grid,
  #managerStatusDrawer .soc-people-account-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #managerStatusDrawer .soc-people-account-stat,
  #managerStatusDrawer .soc-people-account-info-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 12px;
    background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
    min-width: 0;
  }

  #managerStatusDrawer .soc-people-account-stat span,
  #managerStatusDrawer .soc-people-account-info-card span {
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
  }

  #managerStatusDrawer .soc-people-account-stat strong,
  #managerStatusDrawer .soc-people-account-info-card strong {
    color: var(--ui-text-primary, var(--soc-text));
    font-size: 15px;
    line-height: 22px;
    overflow-wrap: anywhere;
  }

  #managerStatusDrawer .soc-people-account-section {
    display: grid;
    gap: 10px;
    min-width: 0;
  }

  #managerStatusDrawer .soc-people-account-section-head {
    display: grid;
    gap: 4px;
  }

  #managerStatusDrawer .soc-people-account-section-head h4 {
    margin: 0;
    color: var(--ui-text-primary, var(--soc-text));
    font-size: 15px;
    line-height: 22px;
  }

  #managerStatusDrawer .soc-people-account-section-head .meta {
    display: none;
  }

  #managerStatusDrawer .soc-people-account-session-list {
    display: grid;
    gap: 0;
    padding: 0;
    border-top: 0;
  }

  #managerStatusDrawer .soc-people-account-session-list .soc-mini-row {
    padding-inline: 0;
  }

  #managerStatusDrawer .soc-monitoring-drawer-section {
    display: grid;
    gap: 10px;
  }

  #managerStatusDrawer .soc-monitoring-drawer-section > h4 {
    margin: 0;
    font-size: var(--type-section-md-size, 16px);
    line-height: var(--type-section-md-line, 24px);
  }

  #managerStatusDrawer .soc-monitoring-drawer-grid {
    display: grid;
    gap: 10px;
  }

  #managerStatusDrawer .soc-monitoring-drawer-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  }

  #managerStatusDrawer .soc-monitoring-drawer-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  #managerStatusDrawer .soc-monitoring-drawer-row .label {
    font-size: var(--type-label-sm-size, 12px);
    line-height: var(--type-label-sm-line, 16px);
    font-weight: var(--type-label-sm-weight, 600);
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  #employeeScorePanel .soc-employee-score-summary-strip {
    margin-top: -2px;
  }

  #employeeScorePanel .soc-employee-score-builder {
    gap: 14px;
  }

  #employeeScorePanel .soc-analytics-header {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    background: var(--ui-bg-surface, var(--soc-panel-bg));
  }

  #employeeScorePanel .soc-report-builder-step {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    background: var(--ui-bg-surface, var(--soc-panel-bg));
  }

  #employeeScorePanel .soc-employee-score-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
  }

  #reportsHubView .soc-hub-header {
    padding-bottom: 12px;
  }

  #reportsHubView .soc-hub-header-left {
    display: grid;
    gap: 4px;
  }

  #reportsHubView .soc-hub-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  #reportsHubView .soc-hub-summary-strip {
    justify-content: flex-end;
    flex: 1 1 auto;
  }

  #reportsHubView .soc-hub-preview-scroller {
    padding-bottom: 0;
    gap: 12px;
  }

  #reportsHubView .soc-hub-preview-scroller[data-hub-mode="weekly"],
  #reportsHubView .soc-hub-preview-scroller[data-hub-mode="apple"] {
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  }

  #reportsHubView .soc-hub-section-card {
    padding: 16px;
    border-radius: 16px;
  }

  #reportsHubView .soc-hub-section-card::before {
    top: 14px;
    bottom: 14px;
  }

  #reportsHubView {
    display: grid;
    gap: 20px;
  }

  #reportsHubView .soc-hub-header {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--divider-default, #d2dae5);
  }

  #reportsHubView .soc-hub-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  #reportsHubView .soc-hub-header-left {
    display: grid;
    gap: 6px;
  }

  #reportsHubView .soc-hub-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
  }

  #reportsHubView .soc-hub-filter-panel,
  #reportsHubView .soc-hub-results-panel,
  #reportsHubView .soc-hub-preview-panel {
    border: 1px solid var(--border-subtle, #d8dee6);
    border-radius: 12px;
    background: var(--bg-surface, #fff);
    box-shadow: none;
  }

  #reportsHubView .soc-hub-filter-header,
  #reportsHubView .soc-hub-results-header,
  #reportsHubView .soc-hub-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--divider-default, #d2dae5);
    background: var(--bg-surface-subtle, #f8fafc);
  }

  #reportsHubView .soc-hub-filter-heading {
    display: grid;
    gap: 4px;
  }

  #reportsHubView .soc-hub-filter-body,
  #reportsHubView .soc-hub-results-body,
  #reportsHubView .soc-hub-preview-body {
    padding: 20px 24px 24px;
  }

  #reportsHubView .soc-hub-filter-body {
    display: grid;
    gap: 18px;
  }

  #reportsHubView .soc-hub-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
  }

  #reportsHubView .soc-field-block {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  #reportsHubView .soc-field-block > span {
    color: var(--text-secondary, #667085);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
  }

  #reportsHubView .soc-hub-custom-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    grid-column: span 2;
  }

  #reportsHubView .soc-hub-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  #reportsHubView .soc-hub-filter-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  #reportsHubView .soc-hub-results-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  #reportsHubView.has-selected-result .soc-hub-results-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 380px);
  }

  #reportsHubView .soc-hub-preview-panel.hidden {
    display: none;
  }

  #reportsHubView .soc-hub-results-count {
    flex-shrink: 0;
    color: var(--text-primary, #101828);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }

  #reportsHubView .soc-hub-results-state,
  #reportsHubView .soc-hub-preview-empty {
    min-height: 164px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    border: 1px solid var(--border-subtle, #d8dee6);
    border-radius: 12px;
    color: var(--text-secondary, #667085);
    text-align: center;
    background: var(--bg-surface-subtle, #f8fafc);
  }

  #reportsHubView .soc-hub-state-title {
    color: var(--text-primary, #101828);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
  }

  #reportsHubView .soc-hub-state-description {
    margin: 0;
    max-width: 420px;
    color: var(--text-secondary, #667085);
    font-size: 13px;
    line-height: 18px;
  }

  #reportsHubView .soc-hub-results-table-wrap {
    overflow-x: auto;
  }

  #reportsHubView .soc-hub-results-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
  }

  #reportsHubView .soc-hub-results-table th,
  #reportsHubView .soc-hub-results-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--divider-default, #d2dae5);
    text-align: left;
    vertical-align: middle;
  }

  #reportsHubView .soc-hub-results-table th {
    color: var(--text-secondary, #667085);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
  }

  #reportsHubView .soc-hub-results-table td {
    color: var(--text-primary, #101828);
    font-size: 13px;
    line-height: 18px;
  }

  #reportsHubView .soc-hub-results-table td strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
  }

  #reportsHubView .soc-hub-results-table tr.soc-hub-result-row {
    cursor: pointer;
  }

  #reportsHubView .soc-hub-results-table tr.soc-hub-result-row:hover td {
    background: rgba(248, 250, 252, 0.92);
  }

  #reportsHubView .soc-hub-results-table tr.soc-hub-result-row.is-selected td {
    background: rgba(255, 247, 237, 0.86);
  }

  #reportsHubView .soc-hub-results-table .is-align-right {
    text-align: right;
  }

  #reportsHubView .soc-hub-preview-body {
    display: grid;
    gap: 16px;
  }

  #reportsHubView .soc-hub-preview-empty {
    min-height: auto;
    padding: 16px;
  }

  #reportsHubView .soc-hub-preview-summary {
    display: grid;
    gap: 6px;
  }

  #reportsHubView .soc-hub-preview-title {
    color: var(--text-primary, #101828);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
  }

  #reportsHubView .soc-hub-preview-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #reportsHubView .soc-hub-preview-fact {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border-subtle, #d8dee6);
    border-radius: 10px;
    background: var(--bg-surface-subtle, #f8fafc);
  }

  #reportsHubView .soc-hub-preview-fact-label {
    color: var(--text-secondary, #667085);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
  }

  #reportsHubView .soc-hub-preview-fact-value {
    color: var(--text-primary, #101828);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  #reportsHubView .soc-hub-preview-section {
    display: grid;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--divider-default, #d2dae5);
  }

  #reportsHubView .soc-hub-preview-section h4 {
    margin: 0;
    color: var(--text-primary, #101828);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
  }

  #reportsHubView .soc-hub-preview-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: var(--text-primary, #101828);
    font-size: 13px;
    line-height: 18px;
  }

  #reportsHubView .soc-hub-preview-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--divider-default, #d2dae5);
  }

  @media (max-width: 1100px) {
    #reportsHubView .soc-hub-filter-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #reportsHubView .soc-hub-results-layout,
    #reportsHubView.has-selected-result .soc-hub-results-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 720px) {
    #reportsHubView .soc-hub-filter-header,
    #reportsHubView .soc-hub-results-header,
    #reportsHubView .soc-hub-preview-header,
    #reportsHubView .soc-hub-filter-body,
    #reportsHubView .soc-hub-results-body,
    #reportsHubView .soc-hub-preview-body {
      padding-left: 16px;
      padding-right: 16px;
    }

    #reportsHubView .soc-hub-filter-grid,
    #reportsHubView .soc-hub-custom-range,
    #reportsHubView .soc-hub-preview-facts {
      grid-template-columns: minmax(0, 1fr);
    }

    #reportsHubView .soc-hub-filter-actions {
      align-items: stretch;
    }

    #reportsHubView .soc-hub-filter-cta {
      justify-content: stretch;
    }

    #reportsHubView .soc-hub-filter-cta > .ds-btn {
      flex: 1 1 0;
    }
  }

  #slaPanel .soc-sla-summary-strip,
  #auditPanel .soc-audit-summary-strip {
    margin-top: -4px;
  }

  #slaPanel .soc-sla-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 16px;
    align-items: start;
  }

  #slaPanel .soc-sla-side-column {
    display: grid;
    gap: 16px;
  }

  #slaPanel .soc-sla-section-card {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: #fff;
    padding: 16px;
  }

  #slaPanel .soc-sla-advanced-settings {
    padding: 14px 16px 16px;
    border-radius: 14px;
    margin: 0;
  }

  #slaPanel .soc-sla-advanced-settings > summary {
    margin-bottom: 0;
  }

  #slaPanel .soc-sla-advanced-settings[open] > summary {
    margin-bottom: 12px;
  }

  #auditPanel .soc-audit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }

  #auditPanel .soc-audit-section-card {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    min-height: 0;
    display: grid;
    gap: 10px;
  }

  #auditPanel .audit-list {
    min-height: 220px;
    padding: 10px;
  }
}

.soc-inline-overflow-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.soc-inline-overflow-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
}

.soc-inline-overflow-menu summary::-webkit-details-marker {
  display: none;
}

.soc-inline-overflow-panel {
  display: none;
}

.soc-inline-overflow-menu[open] > .soc-inline-overflow-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 4;
  min-width: 120px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  display: grid;
  gap: 6px;
}

.soc-inline-overflow-menu.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.soc-apple-weekly-shell {
  gap: 12px;
}

.soc-apple-weekly-mount {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.soc-apple-weekly-danger-zone {
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 12px;
  background: #fff5f5;
  display: grid;
  gap: 8px;
}

.soc-apple-weekly-danger-zone h4 {
  margin: 0;
  color: #b91c1c;
  font-size: 15px;
  font-weight: 700;
}

.soc-apple-weekly-danger-zone .soc-google-sheet-actions {
  margin-top: 2px;
}

.soc-apple-weekly-validation-log {
  margin-top: 4px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: #f8fafc;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.soc-apple-weekly-validation-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.soc-apple-weekly-validation-log h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.soc-apple-weekly-validation-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  overflow: hidden;
}

.soc-apple-weekly-validation-table th,
.soc-apple-weekly-validation-table td {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  color: #475569;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  vertical-align: middle;
}

.soc-apple-weekly-validation-table th {
  font-weight: 700;
  color: #334155;
  background: #f8fafc;
}

.soc-apple-weekly-validation-table tbody tr:last-child td {
  border-bottom: 0;
}

.soc-apple-weekly-validation-table .soc-apple-weekly-validation-message {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-apple-weekly-month-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.soc-apple-weekly-month-tabs .soc-apple-weekly-section-chip {
  min-height: 32px;
  padding: 0 10px;
}

.soc-weekly-subtabs-ops {
  position: sticky;
  top: 0;
  z-index: 2;
}

.soc-apple-weekly-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--soc-surface-overlay-4);
}

.soc-apple-weekly-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.soc-apple-weekly-field {
  display: grid;
  gap: 6px;
}

.soc-apple-weekly-field > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--soc-text-sub);
}

.soc-apple-weekly-field .ds-input {
  width: 100%;
  min-height: 38px;
}

.soc-apple-weekly-meta {
  display: grid;
  gap: 4px;
  margin: 0;
}

.soc-apple-weekly-meta p {
  margin: 0;
  font-size: 12px;
  color: var(--soc-text-sub);
}

.soc-apple-weekly-force-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--soc-text-sub);
  padding: 0 2px;
}

.soc-apple-weekly-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-apple-weekly-section-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  min-height: 30px;
  border: 1px solid var(--soc-border);
  border-radius: 999px;
  background: var(--soc-surface-overlay-6);
  font-size: 12px;
  color: var(--soc-text-main);
}

.soc-apple-weekly-section-chip input {
  width: 14px;
  height: 14px;
}

.soc-apple-weekly-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.soc-apple-weekly-form-grid {
  display: grid;
  gap: 8px;
}

.soc-apple-weekly-form-grid label {
  display: grid;
  gap: 4px;
}

.soc-apple-weekly-form-grid label > span {
  font-size: 12px;
  color: var(--soc-text-sub);
}

.soc-apple-weekly-form-grid .ds-input {
  width: 100%;
  min-height: 36px;
}

.soc-apple-weekly-form-grid .ds-select {
  width: 100%;
  min-height: 36px;
}

.soc-apple-weekly-time-picker {
  display: grid;
  grid-template-columns: minmax(86px, 0.9fr) minmax(72px, 0.8fr) minmax(72px, 0.8fr);
  gap: 6px;
}

.soc-apple-weekly-time-picker-select {
  width: 100%;
  min-width: 0;
}

.soc-apple-weekly-check {
  display: inline-flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--soc-text-sub);
}

.soc-apple-weekly-day-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.soc-apple-weekly-day-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--soc-text-main);
}

.soc-apple-weekly-override-list,
.soc-apple-weekly-conflict-list {
  display: grid;
  gap: 8px;
}

.soc-apple-weekly-override-item,
.soc-apple-weekly-conflict-item {
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
  background: var(--soc-surface-base);
}

.soc-apple-weekly-override-item strong,
.soc-apple-weekly-conflict-item strong {
  font-size: 13px;
}

.soc-apple-weekly-override-item span,
.soc-apple-weekly-conflict-item .meta {
  font-size: 12px;
  color: var(--soc-text-sub);
  margin: 0;
}

@media (max-width: 1279px) {
  .soc-apple-weekly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .soc-apple-weekly-grid-two {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .soc-apple-weekly-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#googleSheetsPanel.soc-apple-weekly-mode {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 24px;
  gap: 18px;
  background: transparent !important;
  border-radius: 0 !important;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: stretch;
  border: 0 !important;
  box-shadow: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode .panel-title-row {
  margin-bottom: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtabs-ops {
  display: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workspace-head {
  display: grid;
  gap: 14px;
  padding: 0 0 4px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
}

.soc-apple-weekly-workspace-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #f8fafc;
  color: #64748b;
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
}

.soc-apple-weekly-workspace-title h3 {
  margin: 6px 0 0;
  font-size: var(--type-title-lg-size);
  line-height: var(--type-title-lg-line);
  font-weight: var(--type-title-lg-weight);
  color: #0f172a;
}

.soc-apple-weekly-workspace-title p {
  margin: 4px 0 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  color: #475569;
}

.soc-apple-weekly-global-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.soc-apple-weekly-global-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(180px, 0.75fr);
  gap: 12px;
  min-width: 0;
}

.soc-apple-weekly-global-field {
  display: grid;
  gap: 6px;
}

.soc-apple-weekly-global-field > span {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
  color: #64748b;
}

.soc-apple-weekly-global-field .ds-input {
  min-height: 42px;
}

.soc-apple-weekly-global-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.soc-apple-weekly-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
  color: #334155;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-apple-weekly-status-badge[data-variant="is-ok"] {
  background: #ecfdf3;
  border-color: rgba(34, 197, 94, 0.38);
  color: #166534;
}

.soc-apple-weekly-status-badge[data-variant="is-error"] {
  background: #fff1f2;
  border-color: rgba(244, 63, 94, 0.38);
  color: #9f1239;
}

.soc-apple-weekly-main-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  max-width: none;
}

.soc-apple-weekly-main-tab-btn {
  appearance: none;
  border: 0;
  background: #f8fafc;
  color: #64748b;
  min-height: 48px;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.soc-apple-weekly-main-tab-btn.is-active {
  background: #fff7ed;
  color: #c2410c;
  box-shadow: inset 0 -3px 0 #ff8400;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tr.is-selected-year td {
  background: #fff7ed;
}

.soc-apple-weekly-main-help {
  display: none;
}

.soc-apple-weekly-main-help h4 {
  margin: 0 0 4px;
  font-size: var(--type-section-md-size);
  line-height: var(--type-section-md-line);
  color: #0f172a;
  font-weight: var(--type-section-md-weight);
}

.soc-apple-weekly-main-help p {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  color: #475569;
}

.soc-apple-weekly-subtabs {
  display: none !important;
}

.soc-apple-weekly-subtab-btn {
  display: none !important;
}

.soc-apple-weekly-subtab-btn.is-active {
  display: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-section,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-slim,
#googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-card {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
  padding: 18px;
}

#googleSheetsPanel.soc-apple-weekly-mode .ds-card-subtitle,
#googleSheetsPanel.soc-apple-weekly-mode h4 {
  font-size: var(--type-section-md-size);
  line-height: var(--type-section-md-line);
  font-weight: var(--type-section-md-weight);
  color: #0f172a;
  margin: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .meta,
#googleSheetsPanel.soc-apple-weekly-mode .help {
  color: #64748b;
  font-size: 13px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtabs {
  display: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode [data-subtabs-scope="google-sheets"] {
  display: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtab-btn {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 13px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtab-btn.is-active {
  color: #c2410c;
  border-color: rgba(255, 132, 0, 0.38);
  background: #fff7ed;
}

.soc-apple-weekly-step-head {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.soc-apple-weekly-step-head h4 {
  margin: 0;
}

.soc-apple-weekly-step-head .meta {
  margin: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-legacy-setup {
  display: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode {
  display: block;
  padding: 16px 18px 28px;
  gap: 0;
  border: 0;
  background: #f4f7fb;
  box-shadow: none;
}

#googleSheetsPanel.soc-apple-weekly-mode > .panel-title-row {
  display: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode #appleWeeklyWorkspaceMount {
  display: grid;
  gap: 16px;
  width: min(1400px, 100%);
  margin: 0 auto;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-mount:empty,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-phase1:empty {
  display: none;
}

.soc-apple-weekly-page-head {
  display: grid;
  gap: 4px;
  width: min(1400px, 100%);
  margin: 0 auto 4px;
}

.soc-apple-weekly-page-title-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 8px;
}

.soc-apple-weekly-page-title-copy {
  display: grid;
  gap: 2px;
}

.soc-apple-weekly-page-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c2410c;
}

.soc-apple-weekly-page-title-block h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  text-wrap: nowrap;
}

.soc-apple-weekly-page-title-block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
}

.soc-apple-weekly-page-head-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.soc-apple-weekly-page-flow-pill,
.soc-apple-weekly-page-selection,
.soc-apple-weekly-flow-context-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.88);
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.soc-apple-weekly-flow-shell {
  display: grid;
  gap: 8px;
}

.soc-apple-weekly-flow-back-row {
  display: flex;
  justify-content: flex-start;
}

.soc-apple-weekly-flow-back-row .ds-btn {
  min-height: 32px;
  padding-inline: 0;
  border: 0;
  background: transparent;
  color: #475569;
  box-shadow: none;
}

.soc-apple-weekly-flow-stepper-region,
.soc-apple-weekly-flow-header,
.soc-apple-weekly-flow-footer {
  width: 100%;
}

.soc-apple-weekly-flow-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.soc-apple-weekly-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px 12px 0 0;
}

.soc-apple-weekly-flow-step::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 42px;
  right: -8px;
  height: 2px;
  background: rgba(148, 163, 184, 0.3);
  z-index: 0;
}

.soc-apple-weekly-flow-step:last-child::after {
  display: none;
}

.soc-apple-weekly-flow-step-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.soc-apple-weekly-flow-step.is-complete::after {
  background: rgba(34, 197, 94, 0.45);
}

.soc-apple-weekly-flow-step.is-complete .soc-apple-weekly-flow-step-node {
  border-color: rgba(34, 197, 94, 0.55);
  background: #ecfdf5;
  color: #15803d;
}

.soc-apple-weekly-flow-step.is-active .soc-apple-weekly-flow-step-node {
  border-color: rgba(255, 132, 0, 0.5);
  background: #fff7ed;
  color: #c2410c;
}

.soc-apple-weekly-flow-step-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  min-width: 0;
}

.soc-apple-weekly-flow-step-copy strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
}

.soc-apple-weekly-flow-step-copy span {
  display: none;
}

.soc-apple-weekly-flow-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px;
}

.soc-apple-weekly-flow-header-copy {
  display: grid;
  gap: 2px;
}

.soc-apple-weekly-flow-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c2410c;
}

.soc-apple-weekly-flow-header h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-flow-header .meta {
  margin: 0;
  color: #475569;
}

.soc-apple-weekly-flow-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.soc-apple-weekly-flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.74fr) minmax(280px, 0.86fr);
  gap: 16px;
  align-items: start;
}

.soc-apple-weekly-flow-layout.is-main-only {
  grid-template-columns: minmax(0, 1fr);
}

.soc-apple-weekly-flow-main,
.soc-apple-weekly-flow-guide,
.soc-apple-weekly-flow-footer {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.soc-apple-weekly-flow-main {
  padding: 16px;
  min-width: 0;
}

.soc-apple-weekly-flow-main--with-inline-footer {
  padding-bottom: 0;
  overflow: hidden;
}

.soc-apple-weekly-flow-guide {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.soc-apple-weekly-guide-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #f8fafc;
}

.soc-apple-weekly-guide-card h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-guide-card .meta {
  margin: 0;
}

.soc-apple-weekly-guide-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.soc-apple-weekly-stage-surface {
  display: grid;
  gap: 14px;
}

.soc-apple-weekly-stage-surface > .soc-apple-weekly-step-head {
  display: none;
}

.soc-apple-weekly-stage-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.soc-apple-weekly-stage-section-head h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-stage-section-head .meta {
  margin: 4px 0 0;
}

.soc-apple-weekly-flow-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}

.soc-apple-weekly-flow-footer--inline {
  width: calc(100% + 32px);
  margin: 2px -16px 0;
  padding: 14px 16px 16px;
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0 0 20px 20px;
  background: transparent;
  box-shadow: none;
}

.soc-apple-weekly-flow-footer-left,
.soc-apple-weekly-flow-footer-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.soc-apple-weekly-flow-footer-right {
  justify-content: flex-end;
  margin-left: auto;
}

.soc-apple-weekly-flow-footer .ds-btn {
  min-width: 110px;
}

.soc-apple-weekly-flow-footer-placeholder {
  display: none;
}

.soc-apple-weekly-setup-phase1 {
  display: grid;
  gap: 16px;
  justify-items: stretch;
}

.soc-apple-weekly-setup-shell-card,
.soc-apple-weekly-setup-list-card {
  display: grid;
  gap: 14px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.soc-apple-weekly-setup-shell-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.soc-apple-weekly-setup-kicker {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #c2410c;
}

.soc-apple-weekly-setup-shell-head h3,
.soc-apple-weekly-setup-complete-card h4 {
  margin: 0;
}

.soc-apple-weekly-setup-head-note {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.24);
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.soc-apple-weekly-setup-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.soc-apple-weekly-setup-step {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #f8fafc;
  color: #64748b;
}

.soc-apple-weekly-setup-step.is-active {
  border-color: rgba(255, 132, 0, 0.34);
  background: #fff7ed;
  color: #9a3412;
}

.soc-apple-weekly-setup-step.is-complete {
  border-color: rgba(34, 197, 94, 0.24);
  background: #f0fdf4;
  color: #166534;
}

.soc-apple-weekly-setup-step-index {
  font-size: 12px;
  font-weight: 700;
}

.soc-apple-weekly-setup-step-label {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.soc-apple-weekly-setup-stage {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #f8fafc;
}

.soc-apple-weekly-setup-shell-card .soc-apple-weekly-setup-stage > .soc-apple-weekly-step-head {
  display: none;
}

.soc-apple-weekly-setup-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.soc-apple-weekly-setup-field {
  display: grid;
  gap: 6px;
}

.soc-apple-weekly-setup-field--full {
  grid-column: 1 / -1;
}

.soc-apple-weekly-setup-field > span {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.soc-apple-weekly-setup-context-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #f8fafc;
  color: #334155;
}

.soc-apple-weekly-setup-context-line strong {
  color: #0f172a;
}

.soc-apple-weekly-setup-context-line em {
  font-style: normal;
  color: #64748b;
}

.soc-apple-weekly-setup-note-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
}

.soc-apple-weekly-setup-note-row .meta {
  margin: 0;
  line-height: 1.5;
}

.soc-apple-weekly-setup-home-hero {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf9 0%, #ffffff 100%);
}

.soc-apple-weekly-setup-home-hero-copy {
  display: grid;
  gap: 8px;
}

.soc-apple-weekly-setup-home-hero-copy h4 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-setup-home-hero-copy .meta {
  margin: 0;
  max-width: 760px;
}

.soc-apple-weekly-setup-home-stats,
.soc-apple-weekly-setup-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.soc-apple-weekly-summary-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  padding: 2px 0;
}

.soc-apple-weekly-summary-list-grid div {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.soc-apple-weekly-summary-list-grid div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.soc-apple-weekly-summary-list-grid dd {
  display: grid;
  gap: 4px;
}

.soc-apple-weekly-summary-list-grid dd strong {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-summary-list-grid--compact dd strong {
  font-size: 15px;
}

.soc-apple-weekly-summary-list-grid dd .meta {
  margin: 0;
  color: #64748b;
}

.soc-apple-weekly-setup-home-stat,
.soc-apple-weekly-setup-summary-card {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: #ffffff;
}

.soc-apple-weekly-setup-home-stat span,
.soc-apple-weekly-setup-summary-card span {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.soc-apple-weekly-setup-home-stat strong,
.soc-apple-weekly-setup-summary-card strong {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-setup-home-stat .meta,
.soc-apple-weekly-setup-summary-card .meta {
  margin: 0;
}

.soc-apple-weekly-setup-step-stack {
  display: grid;
  gap: 12px;
}

.soc-apple-weekly-setup-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background: #ffffff;
}

.soc-apple-weekly-setup-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.soc-apple-weekly-setup-section-head h4 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-setup-section-head .meta {
  margin: 4px 0 0;
}

.soc-apple-weekly-setup-callout {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: #ffffff;
}

.soc-apple-weekly-setup-callout.is-warning {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fffbeb;
}

.soc-apple-weekly-setup-callout strong,
.soc-apple-weekly-setup-callout h5 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-setup-callout p,
.soc-apple-weekly-setup-callout .meta {
  margin: 0;
}

.soc-apple-weekly-setup-link-example {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  background: #f8fafc;
}

.soc-apple-weekly-setup-link-example strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.soc-apple-weekly-setup-link-example code {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  overflow-x: auto;
}

.soc-apple-weekly-setup-link-example .meta {
  margin: 0;
}

.soc-apple-weekly-setup-verify-grid,
.soc-apple-weekly-setup-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.soc-apple-weekly-setup-rule-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.soc-apple-weekly-setup-rule-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: #ffffff;
}

.soc-apple-weekly-setup-status-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.soc-apple-weekly-setup-status-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
}

.soc-apple-weekly-setup-status-list li.is-ready {
  border-color: rgba(34, 197, 94, 0.22);
  background: #f0fdf4;
}

.soc-apple-weekly-setup-status-list strong {
  display: block;
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.soc-apple-weekly-setup-status-list p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.soc-apple-weekly-setup-status-list span {
  align-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.soc-apple-weekly-sync-selection-list {
  display: grid;
  gap: 12px;
}

.soc-apple-weekly-sync-selection-card {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.soc-apple-weekly-sync-selection-card:hover {
  border-color: rgba(255, 132, 0, 0.32);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.soc-apple-weekly-sync-selection-card.is-selected {
  border-color: rgba(255, 132, 0, 0.36);
  background: #fffaf5;
  box-shadow: 0 12px 28px rgba(255, 132, 0, 0.08);
}

.soc-apple-weekly-sync-selection-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.36);
  background: #ffffff;
}

.soc-apple-weekly-sync-selection-radio > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
  transition: background-color 160ms ease;
}

.soc-apple-weekly-sync-selection-card.is-selected .soc-apple-weekly-sync-selection-radio {
  border-color: rgba(255, 132, 0, 0.5);
  background: #fff7ed;
}

.soc-apple-weekly-sync-selection-card.is-selected .soc-apple-weekly-sync-selection-radio > span {
  background: #ea580c;
}

.soc-apple-weekly-sync-selection-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.soc-apple-weekly-sync-selection-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.soc-apple-weekly-sync-selection-head strong {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 800;
}

.soc-apple-weekly-sync-selection-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.soc-apple-weekly-sync-selection-facts span {
  display: grid;
  gap: 2px;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.soc-apple-weekly-sync-selection-facts strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #94a3b8;
}

.soc-apple-weekly-sync-selection-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-apple-weekly-sync-selection-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: #475569;
  font-size: 12px;
  line-height: 1.4;
}

.soc-apple-weekly-sync-selection-note {
  display: block;
  min-width: 0;
  margin: 0;
}

.soc-apple-weekly-inline-hint {
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.soc-apple-weekly-setup-complete-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 20px;
  background: linear-gradient(180deg, #f6fff9 0%, #ffffff 100%);
}

.soc-apple-weekly-setup-complete-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #15803d;
  font-size: 30px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18);
}

.soc-apple-weekly-setup-complete-copy {
  display: grid;
  gap: 8px;
}

.soc-apple-weekly-setup-complete-copy h4 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-setup-complete-copy .meta {
  margin: 0;
}

.soc-apple-weekly-setup-footer {
  padding-top: 2px;
  justify-content: flex-end;
}

.soc-apple-weekly-setup-footer .ds-btn {
  min-width: 120px;
}

.soc-apple-weekly-setup-complete-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  background: #f0fdf4;
}

.soc-apple-weekly-setup-complete-card .meta {
  margin: 0;
}

.soc-apple-weekly-guide-emphasis {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 132, 0, 0.18);
  background: #fff7ed;
}

.soc-apple-weekly-guide-emphasis strong,
.soc-apple-weekly-guide-emphasis .meta {
  margin: 0;
}

.soc-apple-weekly-preview-stage {
  gap: 18px;
}

.soc-apple-weekly-preview-state {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fffdf9;
}

.soc-apple-weekly-preview-state.is-ok {
  border-color: rgba(34, 197, 94, 0.24);
  background: #f0fdf4;
}

.soc-apple-weekly-preview-state.is-warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffbeb;
}

.soc-apple-weekly-preview-state.is-error {
  border-color: rgba(239, 68, 68, 0.26);
  background: #fff7f7;
}

.soc-apple-weekly-preview-state-head {
  display: grid;
  gap: 6px;
}

.soc-apple-weekly-preview-state-head h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.22;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-preview-state-head .meta {
  margin: 0;
}

.soc-apple-weekly-preview-state-points {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.soc-apple-weekly-preview-progress-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.soc-apple-weekly-preview-progress-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
}

.soc-apple-weekly-preview-progress-list li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 12px;
  font-weight: 800;
}

.soc-apple-weekly-running-state {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(249, 115, 22, 0.18);
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
}

.soc-apple-weekly-running-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.soc-apple-weekly-running-head h4,
.soc-apple-weekly-running-head .meta {
  margin: 0;
}

.soc-apple-weekly-running-head h4 {
  font-size: 20px;
  line-height: 1.22;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-running-head strong {
  color: #c2410c;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
  white-space: nowrap;
}

.soc-apple-weekly-running-line {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #ffedd5;
}

.soc-apple-weekly-running-line > span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
  overflow: hidden;
  transition: width 260ms ease;
}

.soc-apple-weekly-running-line > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 36%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: soc-long-task-progress-sheen 1.05s ease-in-out infinite;
}

.soc-apple-weekly-running-line.is-indeterminate > span {
  width: 34% !important;
  animation: soc-long-task-progress-indeterminate 1.12s ease-in-out infinite;
}

.soc-apple-weekly-running-line.is-indeterminate > span::after {
  display: none;
}

.soc-apple-weekly-running-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.soc-apple-weekly-running-meta strong {
  color: #c2410c;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.soc-apple-weekly-progress-step-list {
  display: grid;
  gap: 10px;
}

.soc-apple-weekly-progress-step-list .soc-progress-step-item {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #ffffff;
}

.soc-apple-weekly-progress-step-list .soc-progress-step-node {
  width: 32px;
  height: 32px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid rgba(249, 115, 22, 0.18);
}

.soc-apple-weekly-progress-step-list .soc-progress-step-item.is-active {
  border-color: rgba(249, 115, 22, 0.22);
  background: #fffaf5;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.08);
}

.soc-apple-weekly-progress-step-list .soc-progress-step-item.is-complete .soc-progress-step-node {
  background: #dcfce7;
  border-color: rgba(34, 197, 94, 0.24);
  color: #166534;
}

.soc-apple-weekly-progress-step-list .soc-progress-step-item.is-active .soc-progress-step-node {
  background: #ffffff;
  border-color: rgba(249, 115, 22, 0.22);
}

.soc-apple-weekly-progress-step-list .soc-progress-step-copy strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}

.soc-apple-weekly-progress-step-list .soc-progress-step-copy .meta {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.soc-apple-weekly-progress-step-list .soc-progress-step-item.is-active .soc-progress-step-copy .meta {
  color: #c2410c;
}

.soc-apple-weekly-summary-list-grid a {
  color: inherit;
  text-decoration: none;
}

.soc-apple-weekly-summary-list-grid a:hover {
  text-decoration: underline;
}

.soc-apple-weekly-preview-count-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.soc-apple-weekly-preview-count-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
}

.soc-apple-weekly-preview-count-card.is-accent {
  border-color: rgba(255, 132, 0, 0.24);
  background: #fffaf5;
}

.soc-apple-weekly-preview-count-card.is-warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffdf6;
}

.soc-apple-weekly-preview-count-card.is-danger {
  border-color: rgba(239, 68, 68, 0.24);
  background: #fff7f7;
}

.soc-apple-weekly-preview-count-card span {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.soc-apple-weekly-preview-count-card strong {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-preview-count-card .meta {
  margin: 0;
}

.soc-apple-weekly-preview-count-card .meta:empty {
  display: none;
}

.soc-apple-weekly-preview-issue-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.soc-apple-weekly-preview-issue-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
}

.soc-apple-weekly-preview-issue-card.is-info {
  background: #f8fafc;
}

.soc-apple-weekly-preview-issue-card.is-warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffdf6;
}

.soc-apple-weekly-preview-issue-card.is-danger {
  border-color: rgba(239, 68, 68, 0.26);
  background: #fff7f7;
}

.soc-apple-weekly-preview-issue-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.soc-apple-weekly-preview-issue-head h5,
.soc-apple-weekly-preview-issue-head .meta {
  margin: 0;
}

.soc-apple-weekly-preview-issue-head .meta:empty {
  display: none;
}

.soc-apple-weekly-preview-issue-more {
  display: grid;
  gap: 10px;
}

.soc-apple-weekly-preview-issue-more summary {
  cursor: pointer;
  list-style: none;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.soc-apple-weekly-preview-issue-more > .soc-apple-weekly-log-list {
  padding-top: 2px;
}

.soc-apple-weekly-preview-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-apple-weekly-preview-detail-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.soc-apple-weekly-preview-detail-table {
  padding: 0;
}

.soc-apple-weekly-preview-details {
  display: grid;
  gap: 12px;
}

.soc-apple-weekly-preview-details summary {
  cursor: pointer;
  list-style: none;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.soc-apple-weekly-applying-stage,
.soc-apple-weekly-result-stage {
  display: grid;
  gap: 16px;
}

.soc-apple-weekly-applying-hero,
.soc-apple-weekly-result-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fffdf9;
}

.soc-apple-weekly-applying-hero {
  border-color: rgba(255, 132, 0, 0.2);
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
}

.soc-apple-weekly-result-hero.is-ok {
  border-color: rgba(34, 197, 94, 0.22);
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.soc-apple-weekly-result-hero.is-warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}

.soc-apple-weekly-result-hero.is-error {
  border-color: rgba(239, 68, 68, 0.26);
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.soc-apple-weekly-applying-badge,
.soc-apple-weekly-result-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-applying-badge {
  border: 1px solid rgba(255, 132, 0, 0.26);
  background: #fff1df;
  color: #c2410c;
}

.soc-apple-weekly-result-hero.is-ok .soc-apple-weekly-result-hero-badge {
  border: 1px solid rgba(34, 197, 94, 0.24);
  background: #dcfce7;
  color: #166534;
}

.soc-apple-weekly-result-hero.is-warning .soc-apple-weekly-result-hero-badge {
  border: 1px solid rgba(245, 158, 11, 0.24);
  background: #fef3c7;
  color: #b45309;
}

.soc-apple-weekly-result-hero.is-error .soc-apple-weekly-result-hero-badge {
  border: 1px solid rgba(239, 68, 68, 0.24);
  background: #fee2e2;
  color: #b91c1c;
}

.soc-apple-weekly-applying-copy,
.soc-apple-weekly-result-hero-copy {
  display: grid;
  gap: 8px;
}

.soc-apple-weekly-applying-copy h4,
.soc-apple-weekly-result-hero-copy h4 {
  margin: 0;
  font-size: 22px;
  line-height: 1.22;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-applying-copy .meta,
.soc-apple-weekly-result-hero-copy .meta,
.soc-apple-weekly-result-detail-card .meta {
  margin: 0;
}

.soc-apple-weekly-result-detail-card h5 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
}

.soc-apple-weekly-result-hero-note {
  color: #334155;
}

.soc-apple-weekly-result-summary-card,
.soc-apple-weekly-result-count-card,
.soc-apple-weekly-result-detail-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
}

.soc-apple-weekly-result-summary-card strong,
.soc-apple-weekly-result-count-card strong {
  color: #0f172a;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
}

.soc-apple-weekly-result-summary-grid,
.soc-apple-weekly-result-count-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
}

.soc-apple-weekly-result-summary-card span,
.soc-apple-weekly-result-count-card span {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.soc-apple-weekly-result-summary-card .meta,
.soc-apple-weekly-result-count-card .meta,
.soc-apple-weekly-applying-steps .meta {
  margin: 0;
}

.soc-apple-weekly-applying-line {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.soc-apple-weekly-applying-line > span {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
}

.soc-apple-weekly-applying-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.soc-apple-weekly-applying-steps li {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
  color: #334155;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

.soc-apple-weekly-applying-steps li::before {
  content: "";
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
}

.soc-apple-weekly-applying-steps li.is-complete {
  border-color: rgba(34, 197, 94, 0.2);
  background: #f8fafc;
  color: #0f172a;
}

.soc-apple-weekly-applying-steps li.is-complete::before {
  background: #22c55e;
}

.soc-apple-weekly-applying-steps li.is-active {
  border-color: rgba(249, 115, 22, 0.24);
  background: #fffaf5;
  color: #0f172a;
}

.soc-apple-weekly-applying-steps li.is-active::before {
  background: #f97316;
}

.soc-apple-weekly-result-summary-card strong a {
  color: inherit;
  text-decoration: none;
}

.soc-apple-weekly-result-summary-card strong a:hover {
  text-decoration: underline;
}

.soc-apple-weekly-result-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.soc-apple-weekly-result-conflict-shell {
  display: grid;
  gap: 12px;
}

.soc-apple-weekly-result-conflict-list {
  display: grid;
  gap: 8px;
}

.soc-apple-weekly-result-conflict-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #ffffff;
  color: #0f172a;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.soc-apple-weekly-result-conflict-item strong {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

.soc-apple-weekly-result-conflict-item span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

.soc-apple-weekly-result-conflict-item:hover {
  border-color: rgba(249, 115, 22, 0.24);
  background: #fffaf5;
}

.soc-apple-weekly-result-conflict-item.is-selected {
  border-color: rgba(249, 115, 22, 0.24);
  background: #fffaf5;
}

.soc-apple-weekly-result-conflict-resolution {
  display: grid;
  gap: 12px;
}

.soc-apple-weekly-result-conflict-action-group {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.soc-apple-weekly-result-conflict-note {
  margin: 0;
  color: #64748b;
}

.soc-apple-weekly-result-detail-card.is-warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffdf6;
}

.soc-apple-weekly-result-detail-card.is-error {
  border-color: rgba(239, 68, 68, 0.26);
  background: #fff7f7;
}

.soc-apple-weekly-result-detail-card.is-info {
  background: #f8fafc;
}

.soc-apple-weekly-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.92fr);
  gap: 14px;
  align-items: start;
}

.soc-apple-weekly-subcard {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
}

.soc-apple-weekly-subcard h5 {
  margin: 0;
  font-size: var(--type-section-md-size);
  line-height: var(--type-section-md-line);
  font-weight: var(--type-section-md-weight);
  color: #0f172a;
}

.soc-apple-weekly-setup-summary-card .soc-apple-weekly-inline-definition-list {
  margin-top: 2px;
}

.soc-apple-weekly-setup-summary-card strong a {
  color: inherit;
  text-decoration: none;
}

.soc-apple-weekly-setup-summary-card strong a:hover {
  text-decoration: underline;
}

.soc-apple-weekly-overtime-card {
  align-content: start;
}

.soc-apple-weekly-inline-head {
  display: grid;
  gap: 2px;
}

.soc-apple-weekly-inline-head h5,
.soc-apple-weekly-inline-head .meta {
  margin: 0;
}

.soc-apple-weekly-control-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 14px;
  align-items: start;
}

.soc-apple-weekly-control-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.soc-apple-weekly-override-card .soc-apple-weekly-card-actions--between {
  align-items: flex-start;
}

.soc-apple-weekly-override-item .soc-report-browse-actions {
  justify-content: flex-end;
  gap: 6px;
}

.soc-apple-weekly-danger-card {
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-radius: 12px;
  background: #fff7f7;
  padding: 12px;
}

.soc-apple-weekly-danger-card .soc-apple-weekly-force-row {
  align-items: center;
}

.soc-apple-weekly-value-summary {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  background: #f8fafc;
}

.soc-apple-weekly-value-summary strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.soc-apple-weekly-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.soc-apple-weekly-action-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  padding: 14px;
  background: #f8fafc;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 170px;
}

.soc-apple-weekly-action-card h5 {
  margin: 0;
  font-size: var(--type-section-md-size);
  line-height: var(--type-section-md-line);
  font-weight: var(--type-section-md-weight);
  color: #0f172a;
}

.soc-apple-weekly-action-card .ds-btn {
  min-height: 38px;
  align-self: end;
  justify-self: start;
}

.soc-apple-weekly-validation-guide {
  margin-top: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.44);
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
}

.soc-apple-weekly-validation-guide strong {
  display: block;
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
  color: #334155;
  margin-bottom: 6px;
}

.soc-apple-weekly-validation-guide ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
}

.soc-apple-weekly-advanced {
  border-top: 1px dashed rgba(148, 163, 184, 0.4);
  padding-top: 8px;
}

.soc-apple-weekly-advanced summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: #64748b;
  font-weight: 600;
}

.soc-apple-weekly-advanced summary::-webkit-details-marker {
  display: none;
}

.soc-apple-weekly-form-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-controls {
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 10px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-hidden-site-input {
  display: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly > .soc-google-sheet-site-label,
#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly #googleSheetsSiteSelect {
  display: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly .soc-google-sheet-site-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
  grid-template-columns: none;
  flex-wrap: wrap;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-row--apple-weekly .soc-google-sheet-active-site {
  display: inline-flex !important;
}

#googleSheetsPanel.soc-apple-weekly-mode #googleSheetsStatusBanner {
  display: none !important;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-site-controls .ds-btn {
  min-height: 32px;
  padding: 0 12px;
  flex: 0 0 auto;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap {
  border-radius: 14px;
  max-height: none;
  overflow: visible;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-toolbar {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-toolbar .soc-google-sheet-actions {
  justify-content: flex-end;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-template-section .soc-google-sheet-actions {
  justify-content: flex-start;
  gap: 8px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-summary-strip {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 2px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-summary-pill {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions .ds-btn {
  min-height: 32px;
  padding: 4px 10px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions .ds-btn-danger {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: #fff;
  color: #b91c1c;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions .soc-google-sheet-row-action-danger {
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #b91c1c;
  background: #fff;
}

.soc-apple-weekly-day-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-apple-weekly-day-chip {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: #f8fafc;
  color: #64748b;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.soc-apple-weekly-day-chip.is-active {
  background: #fff7ed;
  color: #c2410c;
  border-color: rgba(255, 132, 0, 0.42);
}

.soc-apple-weekly-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: auto;
}

.soc-apple-weekly-switch-row > span {
  flex: 1;
  min-width: 0;
}

.soc-apple-weekly-form-grid .soc-apple-weekly-switch-row {
  width: 100%;
}

.soc-apple-weekly-switch-input {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: #e2e8f0;
  transition: all 0.2s ease;
  cursor: pointer;
  flex: 0 0 auto;
  margin: 0;
  min-width: 44px !important;
  min-height: 24px !important;
  max-width: 44px;
  max-height: 24px;
  padding: 0 !important;
  display: inline-block !important;
  box-sizing: border-box;
  flex: 0 0 44px;
}

.soc-apple-weekly-switch-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
  transition: all 0.2s ease;
}

.soc-apple-weekly-switch-input:checked {
  background: #ffb56a;
  border-color: #ff8400;
}

.soc-apple-weekly-switch-input:checked::before {
  left: 22px;
}

.soc-apple-weekly-tag-editor {
  display: grid;
  gap: 10px;
}

.soc-apple-weekly-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-apple-weekly-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid rgba(255, 132, 0, 0.32);
  color: #9a3412;
  font-size: 12px;
  font-weight: 600;
}

.soc-apple-weekly-tag button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  padding: 0;
  line-height: 1;
}

.soc-apple-weekly-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.soc-apple-weekly-baseline-readonly {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  padding: 12px;
  background: #f8fafc;
  display: grid;
  gap: 6px;
}

.soc-apple-weekly-baseline-readonly p {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  color: #334155;
}

.soc-apple-weekly-sync-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.soc-apple-weekly-sync-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.soc-apple-weekly-sync-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #f8fafc;
  padding: 0 10px;
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soc-apple-weekly-sync-result {
  margin-top: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.soc-apple-weekly-sync-result .meta {
  margin: 0;
}

.soc-apple-weekly-validation-log > .meta {
  margin: 0 0 8px;
}

.soc-apple-weekly-weekday-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-apple-weekly-weekday-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #f8fafc;
  padding: 0 10px;
  font-size: 12px;
  color: #475569;
}

.soc-apple-weekly-weekday-chip.is-empty {
  border-style: dashed;
  color: #64748b;
}

.soc-apple-weekly-weekrange-summary {
  margin-top: 0;
}

.soc-apple-weekly-sync-targets .soc-apple-weekly-section-chip[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.soc-apple-weekly-rule-card {
  gap: 12px;
}

.soc-apple-weekly-rule-block {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: #f8fafc;
}

.soc-apple-weekly-rule-card .soc-report-browse-actions {
  justify-content: flex-end;
}

.soc-apple-weekly-rule-title {
  margin: 2px 0 0;
  font-size: var(--type-section-md-size);
  line-height: var(--type-section-md-line);
  font-weight: var(--type-section-md-weight);
  color: #0f172a;
}

.soc-apple-weekly-section-chip {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.36);
  background: #f8fafc;
  color: #334155;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.soc-apple-weekly-section-chip.is-active {
  background: #fff7ed;
  color: #c2410c;
  border-color: rgba(255, 132, 0, 0.45);
}

.soc-apple-weekly-conflict-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.soc-apple-weekly-conflict-compare .meta {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
  min-height: 72px;
}

.soc-apple-weekly-conflict-actions {
  justify-content: flex-end;
}

.soc-apple-weekly-danger-zone .ds-btn,
.soc-apple-weekly-danger-card .ds-btn:not(.ds-btn-sm) {
  min-height: 40px;
  padding-inline: 16px;
}

.soc-apple-weekly-inline-overflow {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.soc-apple-weekly-inline-overflow summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
}

.soc-apple-weekly-inline-overflow summary::-webkit-details-marker {
  display: none;
}

.soc-apple-weekly-inline-overflow[open] > .soc-report-browse-actions {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 3;
  min-width: 170px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.soc-apple-weekly-empty-state {
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  padding: 14px;
  background: #f8fafc;
}

.soc-apple-weekly-empty-state strong {
  display: block;
  color: #334155;
  font-size: 14px;
  margin-bottom: 4px;
}

.soc-apple-weekly-override-card {
  align-content: start;
}

.soc-apple-weekly-override-list {
  max-height: none;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions .ds-btn {
  width: auto;
  min-height: 38px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: 0 0 auto;
}

#googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-sm {
  min-height: 32px !important;
}

#googleSheetsPanel.soc-apple-weekly-mode .ds-btn:not(.ds-btn-sm) {
  min-height: 40px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-actions {
  justify-content: flex-end;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-actions--between {
  justify-content: space-between;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-actions .ds-btn {
  min-width: 0;
  padding-inline: 14px;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: none;
}

.soc-apple-weekly-force-row {
  justify-content: space-between;
  width: 100%;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-force-row .ds-btn {
  min-width: 142px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-switch-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  max-width: 44px !important;
  max-height: 24px !important;
}

.soc-apple-weekly-mobile-notice {
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  display: grid;
  gap: 8px;
}

.soc-apple-weekly-mobile-notice h4 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.soc-apple-weekly-mobile-notice p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-sections,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-mount {
  width: 100%;
  min-height: 0;
}

@media (max-width: 1440px) {
  #googleSheetsPanel.soc-apple-weekly-mode {
    padding: 12px 10px 22px;
  }

  .soc-apple-weekly-global-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-apple-weekly-global-controls {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    min-width: 100%;
  }

  .soc-apple-weekly-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .soc-apple-weekly-sync-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .soc-apple-weekly-conflict-compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-apple-weekly-control-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1024px) {
  .soc-apple-weekly-global-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-apple-weekly-global-status {
    justify-content: flex-start;
  }

  .soc-apple-weekly-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-apple-weekly-sync-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  #googleSheetsPanel.soc-apple-weekly-mode {
    display: block;
    padding: 10px 14px 24px;
    gap: 16px;
    background: transparent;
  }

  #googleSheetsPanel.soc-apple-weekly-mode > .panel-title-row {
    display: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-section,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-slim,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-head {
    display: grid;
    gap: 6px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: #0f172a;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block p {
    margin: 4px 0 0;
    color: #475569;
    font-size: 13px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar {
    display: grid;
    grid-template-columns: minmax(420px, 560px) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 180px);
    gap: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-field {
    display: grid;
    gap: 6px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-field > span,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field > span {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: #475569;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta strong {
    color: #64748b;
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta em {
    color: #0f172a;
    font-style: normal;
    font-weight: 600;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 0 0 2px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    min-height: 40px;
    padding: 0 2px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab.is-active {
    color: #0f172a;
    border-bottom-color: #0f172a;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-pane {
    display: grid;
    gap: 14px;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar:not(.soc-apple-weekly-section-bar--stacked) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h3,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    color: #0f172a;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar p,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head p {
    margin: 4px 0 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    color: #64748b;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workboard,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap {
    overflow: hidden;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table {
    width: 100%;
    border-collapse: collapse;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td {
    padding: 11px 12px;
    font-size: 13px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    vertical-align: middle;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr:last-child td,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table tbody tr:last-child td {
    border-bottom: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr[data-action="google-sheets-row-select"] {
    cursor: pointer;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr[data-action="google-sheets-row-select"]:hover td,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tr.is-selected-year td,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table tr.is-selected td {
    background: #f8fafc;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-link-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-link-sub {
    font-size: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions {
    justify-content: flex-end;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-footnote {
    margin: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-inspector {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: start;
    padding: 0 0 0 2px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-section {
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-section:first-child {
    border-top: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    background: transparent;
    padding: 12px 0;
    min-height: 40px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle > span:first-child {
    flex: 0 1 auto;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle.is-active {
    color: #0f172a;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle .meta {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body {
    display: none;
    gap: 12px;
    padding: 0 0 16px;
    min-width: 0;
    overflow: hidden;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle.is-active + .soc-google-sheet-inspector-body {
    display: grid;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body[hidden] {
    display: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body.is-active {
    display: grid !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-form,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #fff;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary .meta,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary strong {
    margin: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-form-grid,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-grid {
    gap: 10px 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result {
    padding: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone {
    margin-top: 0;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: #fff;
    gap: 10px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone h4 {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone.is-active {
    border-color: rgba(239, 68, 68, 0.28);
    background: #fff5f5;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone.is-active h4 {
    color: #b91c1c;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary.warning {
    border-color: rgba(245, 158, 11, 0.28);
    background: #fffaf0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-definition-list {
    display: grid;
    gap: 8px;
    margin: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-definition-list div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-definition-list dt {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-definition-list dd {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor {
    display: grid;
    gap: 18px;
    padding: 16px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section:first-of-type {
    padding-top: 0;
    border-top: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head {
    display: grid;
    gap: 2px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-group {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: #fcfcfd;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-group h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-row {
    gap: 6px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip {
    min-height: 32px;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #475569;
    font-size: 12px;
    font-weight: 600;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip.is-active {
    background: #f8fafc;
    border-color: #334155;
    color: #0f172a;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-note {
    margin: 0;
    font-size: 12px;
    color: #64748b;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-help {
    display: inline-block;
    margin-left: 6px;
    font-style: normal;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-editor {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #f8fafc;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sticky-footer {
    position: static;
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    background: #fff;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-workspace {
    display: grid;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel {
    border-color: rgba(239, 68, 68, 0.28);
    background: #fff7f7;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-copy {
    margin: 0;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-note {
    padding: 10px 12px;
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-empty-state {
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-nav-actions {
    justify-content: flex-end;
    gap: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-nav-actions .ds-btn.is-blocked {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-danger, #d93025) 50%, transparent);
    opacity: 0.85;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions .ds-btn,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-row-actions .ds-btn,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-menu summary {
    width: auto;
    white-space: nowrap;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-sm,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-menu summary {
    min-height: 32px !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn:not(.ds-btn-sm) {
    min-height: 40px !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-panel {
    min-width: 170px;
  }
}

@media (min-width: 1024px) {
  #googleSheetsPanel.soc-apple-weekly-mode {
    --apple-weekly-surface: var(--soc-card-bg);
    --apple-weekly-surface-muted: color-mix(in srgb, var(--soc-card-bg) 72%, var(--soc-panel-bg));
    --apple-weekly-surface-soft: color-mix(in srgb, var(--soc-panel-bg) 84%, transparent);
    --apple-weekly-border: color-mix(in srgb, var(--soc-border) 92%, transparent);
    --apple-weekly-border-strong: color-mix(in srgb, var(--soc-border-strong) 78%, var(--soc-border));
    --apple-weekly-text: var(--soc-text);
    --apple-weekly-text-sub: var(--soc-text-sub);
    --apple-weekly-accent: var(--soc-primary);
    --apple-weekly-accent-soft: color-mix(in srgb, var(--soc-primary) 12%, var(--soc-card-bg));
    --apple-weekly-success-soft: color-mix(in srgb, var(--soc-success) 12%, var(--soc-card-bg));
    --apple-weekly-warning-soft: color-mix(in srgb, var(--soc-warning) 12%, var(--soc-card-bg));
    --apple-weekly-danger-soft: color-mix(in srgb, var(--soc-danger) 10%, var(--soc-card-bg));
    --apple-weekly-danger-border: color-mix(in srgb, var(--soc-danger) 35%, var(--soc-border));
    --apple-weekly-success-border: color-mix(in srgb, var(--soc-success) 35%, var(--soc-border));
    --apple-weekly-warning-border: color-mix(in srgb, var(--soc-warning) 35%, var(--soc-border));
    --apple-weekly-shadow: none;
    background: transparent !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode > .panel-title-row {
    display: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-section,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-card-slim,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-card,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-workspace {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-head {
    display: grid !important;
    gap: 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--apple-weekly-border);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block > div {
    display: grid;
    gap: 4px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block h2 {
    margin: 0;
    font-size: var(--type-title-lg-size);
    line-height: var(--type-title-lg-line);
    font-weight: var(--type-title-lg-weight);
    color: var(--apple-weekly-text);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block p {
    display: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar {
    display: grid;
    grid-template-columns: minmax(440px, 600px) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(164px, 180px);
    gap: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-field,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field {
    display: grid;
    gap: 6px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-field > span,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field > span,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-switch > span,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-checkbox-row > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--apple-weekly-text-sub);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--apple-weekly-text-sub);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta strong {
    color: var(--apple-weekly-text-sub);
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta em {
    color: var(--apple-weekly-text);
    font-style: normal;
    font-weight: 600;
  }

  #googleSheetsPanel.soc-apple-weekly-mode input:not([type="checkbox"]):not([type="hidden"]),
  #googleSheetsPanel.soc-apple-weekly-mode select,
  #googleSheetsPanel.soc-apple-weekly-mode textarea {
    min-height: 40px;
    border: 1px solid var(--apple-weekly-border);
    border-radius: 10px;
    background: var(--apple-weekly-surface);
    color: var(--apple-weekly-text);
    box-shadow: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode input:not([type="checkbox"]):not([type="hidden"])::placeholder,
  #googleSheetsPanel.soc-apple-weekly-mode textarea::placeholder {
    color: var(--apple-weekly-text-sub);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 0 0 2px;
    border-bottom: 1px solid var(--apple-weekly-border);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-tab {
    appearance: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--apple-weekly-text-sub) !important;
    cursor: pointer;
    font-weight: 700;
    padding: 0 2px !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab {
    display: grid;
    gap: 4px;
    align-content: center;
    justify-items: start;
    min-height: 52px !important;
    min-width: 176px;
    font-size: 14px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-tab {
    min-height: 32px !important;
    font-size: 13px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab.is-active,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-tab.is-active {
    color: var(--apple-weekly-text) !important;
    border-bottom-color: var(--apple-weekly-accent) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab-label {
    color: inherit;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab-meta {
    color: var(--apple-weekly-text-sub);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
    display: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head .meta {
    display: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab.is-active .soc-apple-weekly-step-tab-meta {
    color: var(--apple-weekly-text);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner {
    border: 1px solid var(--apple-weekly-border);
    border-radius: 12px;
    background: var(--apple-weekly-surface-muted);
    box-shadow: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card-label,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner-label,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-label {
    color: var(--apple-weekly-text-sub);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card strong,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner strong,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card strong {
    color: var(--apple-weekly-text);
    font-size: 15px;
    line-height: 1.45;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card p,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner p,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card p {
    margin: 0;
    color: var(--apple-weekly-text-sub);
    line-height: 1.55;
    white-space: normal;
    word-break: break-word;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card p {
    display: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card p,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-readiness-inline .meta {
    display: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card.is-success,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner.is-success,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card.is-success {
    background: var(--apple-weekly-success-soft);
    border-color: var(--apple-weekly-success-border);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card.is-warning,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner.is-warning,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card.is-warning {
    background: var(--apple-weekly-warning-soft);
    border-color: var(--apple-weekly-warning-border);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card.is-danger,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner.is-danger,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card.is-danger {
    background: var(--apple-weekly-danger-soft);
    border-color: var(--apple-weekly-danger-border);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-head-card.is-accent,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner.is-accent,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card.is-accent {
    background: var(--apple-weekly-accent-soft);
    border-color: color-mix(in srgb, var(--apple-weekly-accent) 34%, var(--apple-weekly-border));
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-pane,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-workspace,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-operations-workspace,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-main,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side {
    gap: 16px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h3,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h4,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-form-section-head h4,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail-head h4,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-panel h5,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary h4 {
    margin: 0;
    color: var(--apple-weekly-text);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar h3 {
    font-size: 18px;
    line-height: 1.24;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .meta,
  #googleSheetsPanel.soc-apple-weekly-mode .help,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-link-sub,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-note {
    color: var(--apple-weekly-text-sub);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    color: var(--apple-weekly-text-sub);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workboard,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel {
    border: 1px solid var(--apple-weekly-border) !important;
    border-radius: 12px !important;
    background: var(--apple-weekly-surface) !important;
    box-shadow: var(--apple-weekly-shadow) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console {
    overflow: hidden;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table {
    width: 100%;
    border-collapse: collapse;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--apple-weekly-border);
    vertical-align: middle;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table thead th,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table thead th {
    background: var(--apple-weekly-surface-muted);
    color: var(--apple-weekly-text-sub);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr:last-child td,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table tbody tr:last-child td {
    border-bottom: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr[data-action="google-sheets-row-select"] {
    cursor: pointer;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tbody tr[data-action="google-sheets-row-select"]:hover td,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table tr.is-selected-year td,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table tr.is-selected td {
    background: var(--apple-weekly-accent-soft) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-link-main,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-summary-cell {
    color: var(--apple-weekly-text);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-service code {
    border-color: var(--apple-weekly-border);
    background: var(--apple-weekly-surface-muted);
    color: var(--apple-weekly-text);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge {
    border-color: var(--apple-weekly-border) !important;
    background: var(--apple-weekly-surface-muted) !important;
    color: var(--apple-weekly-text-sub) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill.is-ok,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge.is-ok {
    border-color: var(--apple-weekly-success-border) !important;
    background: var(--apple-weekly-success-soft) !important;
    color: var(--soc-success) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill.is-error,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge.is-error,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge.is-warn {
    border-color: var(--apple-weekly-warning-border) !important;
    background: var(--apple-weekly-warning-soft) !important;
    color: var(--soc-warning) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-inspector {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: start;
    padding-left: 2px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-section {
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 1px solid var(--apple-weekly-border);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-section:first-child {
    border-top: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: 12px 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--apple-weekly-text) !important;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle > span:first-child {
    flex: 0 1 auto;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-toggle .meta {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    color: var(--apple-weekly-text-sub);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-form,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-panel,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-editor,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-range-preview,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-group,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-note,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-empty-state {
    border: 1px solid var(--apple-weekly-border) !important;
    border-radius: 10px !important;
    background: var(--apple-weekly-surface-muted) !important;
    box-shadow: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-panel,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-editor,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-range-preview,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-note,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-empty-state {
    padding: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body {
    min-width: 0;
    overflow: hidden;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body[hidden] {
    display: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-inspector-body.is-active {
    display: grid !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-form,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-value-summary {
    padding: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone.is-active,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel {
    border-color: var(--apple-weekly-danger-border) !important;
    background: var(--apple-weekly-danger-soft) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-copy,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-zone.is-active h4 {
    color: var(--soc-danger) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary.warning {
    border-color: var(--apple-weekly-warning-border) !important;
    background: var(--apple-weekly-warning-soft) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table-wrap,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail {
    min-width: 0;
    padding: 14px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail {
    display: grid;
    gap: 12px;
    border-left: 1px solid var(--apple-weekly-border);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list div,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list li {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--apple-weekly-border);
    border-radius: 10px;
    background: var(--apple-weekly-surface-muted);
    list-style: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list dt,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list span {
    color: var(--apple-weekly-text-sub);
    font-size: 12px;
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list dd,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list strong,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list p {
    margin: 0;
    color: var(--apple-weekly-text);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-range-preview span {
    font-size: 11px;
    font-weight: 700;
    color: var(--apple-weekly-text-sub);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-range-preview strong {
    color: var(--apple-weekly-text);
    font-size: 14px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(280px, 0.76fr);
    gap: 16px;
    align-items: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workboard,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-danger-panel,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-editor {
    display: grid;
    gap: 12px;
    padding: 16px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-checkbox-row,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-checkbox-row input[type="checkbox"] {
    accent-color: var(--soc-primary);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip {
    min-height: 32px !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    border: 1px solid var(--apple-weekly-border) !important;
    background: var(--apple-weekly-surface) !important;
    color: var(--apple-weekly-text-sub) !important;
    box-shadow: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip.is-active {
    border-color: color-mix(in srgb, var(--soc-primary) 42%, var(--apple-weekly-border)) !important;
    background: var(--apple-weekly-accent-soft) !important;
    color: var(--soc-primary) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-switch-input {
    border-color: var(--apple-weekly-border-strong) !important;
    background: color-mix(in srgb, var(--soc-border) 85%, transparent) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-switch-input::before {
    background: var(--apple-weekly-surface) !important;
    box-shadow: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-switch-input:checked {
    background: var(--soc-primary) !important;
    border-color: var(--soc-primary) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sticky-footer {
    position: static;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    background: var(--apple-weekly-surface);
    z-index: 8;
    pointer-events: auto;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sticky-footer .ds-btn {
    position: relative;
    z-index: 9;
    pointer-events: auto;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-panel {
    min-width: 170px;
    border: 1px solid var(--apple-weekly-border) !important;
    border-radius: 10px;
    background: var(--apple-weekly-surface) !important;
    box-shadow: var(--soc-shadow-soft);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-action-danger,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-panel .soc-google-sheet-row-action-danger {
    border-color: var(--apple-weekly-danger-border) !important;
    background: var(--apple-weekly-danger-soft) !important;
    color: var(--soc-danger) !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-row-actions,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-actions,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-sm,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-inline-overflow-menu summary {
    min-height: 32px !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn:not(.ds-btn-sm) {
    min-height: 40px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1500px) {
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-body,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout.is-conflicts {
    grid-template-columns: minmax(0, 1fr);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side-column {
    padding-left: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail {
    border-left: 0;
    border-top: 1px solid var(--apple-weekly-border);
  }

}

@media (min-width: 1024px) {
  #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections {
    display: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections.hidden {
    display: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 40px;
    color: var(--apple-weekly-text-sub);
    font-size: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span strong {
    color: var(--apple-weekly-text-sub);
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span em {
    color: var(--apple-weekly-text);
    font-style: normal;
    font-weight: 600;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn {
    border-color: var(--apple-weekly-border);
    box-shadow: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-secondary,
  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-ghost {
    background: var(--apple-weekly-surface);
    color: var(--apple-weekly-text);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-primary {
    background: var(--soc-primary);
    border-color: var(--soc-primary-deep);
    color: #fff;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn.ds-btn-danger {
    background: var(--soc-danger);
    border-color: var(--soc-danger-deep);
    color: #fff;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .ds-btn[disabled] {
    opacity: 0.52;
    cursor: not-allowed;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap {
    overflow: auto !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table {
    min-width: 1080px;
    table-layout: fixed;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th:last-child,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td:last-child {
    width: 148px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions {
    justify-content: flex-start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-sub {
    display: block;
    margin-top: 4px;
    color: var(--apple-weekly-text-sub);
    font-size: 12px;
    font-weight: 500;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p strong,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p span {
    display: block;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary p span {
    text-align: right;
    word-break: break-word;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--apple-weekly-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--apple-weekly-surface-muted);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-item + .soc-apple-weekly-section-item {
    border-top: 1px solid var(--apple-weekly-border);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-item .soc-apple-weekly-checkbox-row {
    min-height: 54px;
    padding: 0 14px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-copy strong {
    color: var(--apple-weekly-text);
    font-size: 14px;
    line-height: 1.25;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-copy em {
    color: var(--apple-weekly-text-sub);
    font-size: 12px;
    font-style: normal;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-workspace {
    display: grid;
    gap: 16px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rules-status-table,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-override-table {
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-warning-inline {
    margin: 0;
    color: var(--soc-warning);
    font-size: 12px;
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-empty-state.compact {
    padding: 10px 12px !important;
  }
}

@media (min-width: 1024px) {
  #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections {
    display: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-meta {
    display: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls {
    width: min(620px, 100%);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    min-height: 40px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-controls > span em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar .soc-google-sheet-actions > .ds-btn,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-toolbar .soc-apple-weekly-toolbar-actions .ds-btn,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-toolbar .soc-apple-weekly-toolbar-actions .ds-btn {
    min-height: 40px !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-operations-workspace {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
    isolation: isolate;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-toolbar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--apple-weekly-border);
    background: var(--apple-weekly-surface);
    pointer-events: auto;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 4px 0 2px;
    border-bottom: 1px solid var(--apple-weekly-border);
    background: var(--apple-weekly-surface);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 16px;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    align-items: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-body.is-contained {
    grid-template-columns: minmax(0, 1fr);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field .ds-input,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field--readonly .soc-apple-weekly-static-field {
    min-height: 40px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-field--readonly .soc-apple-weekly-static-field {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--apple-weekly-border);
    border-radius: 10px;
    background: var(--apple-weekly-surface);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-static-field strong {
    color: var(--apple-weekly-text);
    font-size: 14px;
    line-height: 1.25;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-top-shell {
    position: static;
    display: grid;
    gap: 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--apple-weekly-border);
    background: var(--apple-weekly-surface);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-shell-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-shell-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-top-shell-main {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-context-line {
    color: var(--apple-weekly-text);
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
    word-break: break-word;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-readiness-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-readiness-inline .meta {
    margin: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-stage-card {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-card-head .meta {
    margin: 4px 0 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    padding: 14px 16px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner-copy {
    display: grid;
    gap: 6px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner-meta {
    justify-self: end;
    align-self: center;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-console {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 392px);
    align-items: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table-wrap {
    padding: 0;
    overflow: auto;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail {
    padding: 16px;
    gap: 10px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-main-column,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side-column {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    min-height: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-main-column {
    overflow: auto;
    padding-right: 4px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side-column {
    overflow: auto;
    padding-left: 2px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout {
    display: grid;
    gap: 12px;
    min-width: 0;
    min-height: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout.is-conflicts {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: start;
    height: 100%;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-body.is-contained > .soc-apple-weekly-ops-layout {
    min-height: 0;
    height: 100%;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout.is-conflicts > .soc-apple-weekly-ops-main-column,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-layout.is-conflicts > .soc-apple-weekly-ops-side-column {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-list-panel {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table-shell {
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--apple-weekly-border);
    border-radius: 12px;
    background: var(--apple-weekly-surface-muted);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table {
    min-width: 100%;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--apple-weekly-surface);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table tbody tr {
    cursor: pointer;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-table tbody tr.is-selected {
    background: color-mix(in srgb, var(--apple-weekly-accent-soft) 76%, var(--apple-weekly-surface-muted));
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-summary-cell {
    display: grid;
    gap: 4px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-summary-cell strong,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-summary-cell .meta {
    display: block;
    min-width: 0;
    margin: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-grid {
    display: grid;
    gap: 10px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--apple-weekly-border);
    border-radius: 10px;
    background: var(--apple-weekly-surface-muted);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-card.is-accent {
    border-color: color-mix(in srgb, var(--soc-primary) 36%, var(--apple-weekly-border));
    background: color-mix(in srgb, var(--apple-weekly-accent-soft) 82%, var(--apple-weekly-surface-muted));
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-card span {
    color: var(--apple-weekly-text-sub);
    font-size: 12px;
    font-weight: 700;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-compare-card pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font: inherit;
    color: var(--apple-weekly-text);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-conflict-action-group {
    display: grid;
    gap: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-conflict-action-group {
    gap: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-ops-side-column.is-conflict-detail {
    height: 100%;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-worksummary.warning {
    border-color: var(--apple-weekly-warning-border);
    background: var(--apple-weekly-warning-soft);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail-head {
    display: grid;
    gap: 8px;
    justify-items: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-detail-head .meta {
    margin: 2px 0 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list div {
    gap: 6px;
  }

  @media (max-width: 900px) {
    #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-conflict-action-group {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-detail-meta-list dd,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-panel p,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-log-list p {
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table {
    min-width: 100%;
    width: 100%;
    table-layout: fixed;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table {
    min-width: 760px;
    table-layout: fixed;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th:nth-child(1),
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td:nth-child(1) {
    width: 150px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th:nth-child(2),
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td:nth-child(2) {
    width: 92px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th:nth-child(3),
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td:nth-child(3) {
    width: 128px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th:nth-child(5),
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td:nth-child(5) {
    width: 88px;
  }

}

@media (min-width: 1024px) and (max-width: 1180px) {
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner {
    grid-template-columns: minmax(0, 1fr);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-stage-banner-meta {
    justify-self: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tab {
    min-width: 148px;
  }
}

.soc-settings-shell-bar {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 72%, white);
  overflow: visible;
}

.soc-settings-shell-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.soc-settings-shell-tab {
  position: relative;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.soc-settings-shell-tab:hover,
.soc-settings-shell-tab:focus-visible {
  color: var(--ui-text-primary, var(--soc-text));
  background: color-mix(in srgb, var(--ui-bg-surface, white) 92%, transparent);
  outline: none;
}

.soc-settings-shell-tab.is-active,
.soc-settings-shell-tab[aria-selected="true"] {
  color: var(--ui-text-primary, var(--soc-text));
  border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 26%, var(--ui-border-subtle, var(--soc-border)));
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.soc-settings-single-column {
  display: grid;
  gap: 18px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

.soc-settings-scope-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 12%, white);
  color: var(--ui-accent-strong, var(--soc-accent));
  font-size: 12px;
  font-weight: 700;
}

.soc-reminder-config-card,
.soc-notification-settings-card,
.soc-notification-center-shell {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 86%, white);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 72%, white) 100%
  );
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.soc-reminder-config-card {
  grid-template-columns: minmax(250px, 288px) minmax(0, 1fr);
  align-items: start;
  column-gap: 22px;
}

.soc-reminder-card-head {
  display: block;
}

.soc-reminder-card-copy {
  display: grid;
  gap: 10px;
  width: 100%;
  position: sticky;
  top: 18px;
}

.soc-reminder-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.soc-reminder-card-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.soc-reminder-card-head .meta {
  margin: 0;
}

.soc-reminder-form {
  display: grid;
  gap: 0;
  max-width: 100%;
  padding-top: 2px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  overflow: hidden;
}

.soc-reminder-row {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white);
  background: transparent;
}

.soc-reminder-row--toggle {
  grid-template-columns: 136px max-content;
}

.soc-reminder-row--control {
  align-items: start;
}

.soc-reminder-row--preview {
  align-items: start;
}

.soc-reminder-label {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  font-weight: 700;
}

.soc-reminder-inline-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.soc-reminder-inline-group--stacked {
  align-items: flex-start;
  justify-content: flex-start;
}

.soc-reminder-preset-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc-reminder-preset-group .ds-btn.is-active {
  border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 45%, var(--ui-border-strong, var(--soc-border)));
  background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 12%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-reminder-number-input {
  width: 110px;
}

.soc-reminder-counter-input {
  width: 72px;
  text-align: center;
}

.soc-reminder-inline-custom {
  display: inline-grid;
  gap: 6px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  font-weight: 700;
}

.soc-reminder-inline-custom .ds-input {
  min-height: 44px;
}

.soc-reminder-stepper {
  display: inline-grid;
  grid-template-columns: 40px 72px 40px;
  gap: 8px;
  align-items: center;
}

.soc-reminder-static-value {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.soc-reminder-preview-box {
  display: grid;
  gap: 8px;
  max-width: 100%;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-bg-surface-subtle, var(--soc-card-bg)) 82%, white);
}

.soc-reminder-preview-box strong {
  font-size: 14px;
}

.soc-switch-input {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: #e2e8f0;
  cursor: pointer;
  transition: all 0.18s ease;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.soc-switch-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
  transition: left 0.18s ease;
}

.soc-switch-input:checked {
  background: #ffb56a;
  border-color: #ff8400;
}

.soc-switch-input:checked::before {
  left: 22px;
}

.soc-reminder-preview-box strong,
.soc-reminder-preview-box .meta {
  margin: 0;
}

.soc-reminder-advanced {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white);
  border-radius: 0;
  background: transparent;
}

.soc-reminder-advanced > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
}

.soc-reminder-advanced > summary::-webkit-details-marker {
  display: none;
}

.soc-reminder-advanced-body {
  display: grid;
  gap: 14px;
  padding: 0 16px 16px;
}

.soc-reminder-advanced-head {
  display: grid;
  gap: 4px;
}

.soc-reminder-advanced-head strong,
.soc-reminder-advanced-head .meta {
  margin: 0;
}

.soc-reminder-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--soc-danger, #dc2626) 18%, var(--ui-border-subtle, var(--soc-border)));
  border-radius: 14px;
  background: color-mix(in srgb, var(--soc-danger, #dc2626) 3%, white);
}

.soc-reminder-danger-copy {
  display: grid;
  gap: 4px;
}

.soc-reminder-danger-copy strong,
.soc-reminder-danger-copy .meta {
  margin: 0;
}

.soc-reminder-danger-copy .meta {
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

.soc-reminder-danger-zone .ds-btn {
  flex: 0 0 auto;
}

.soc-settings-savebar {
  position: sticky;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 24%, var(--ui-border-subtle, var(--soc-border)));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  z-index: 4;
}

.soc-settings-savebar-copy {
  display: grid;
  gap: 4px;
}

.soc-settings-savebar-copy strong,
.soc-settings-savebar-copy .meta {
  margin: 0;
}

.soc-settings-savebar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.soc-notification-settings-form {
  display: grid;
  gap: 16px;
}

.soc-notification-permission-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(251, 146, 60, 0.28);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 7%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

.soc-notification-permission-banner strong,
.soc-notification-permission-banner .meta {
  margin: 0;
}

.soc-notification-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
}

.soc-notification-check-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 14px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

.soc-notification-check-copy {
  display: grid;
  gap: 6px;
}

.soc-notification-check-row strong,
.soc-notification-check-copy .meta {
  margin: 0;
}

.soc-notification-check-copy .meta {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 14px;
  line-height: 1.5;
}

.soc-notification-center-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.soc-notification-center-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.soc-notification-center-tab {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 999px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.soc-notification-center-tab.is-active,
.soc-notification-center-tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 45%, var(--ui-border-strong, var(--soc-border)));
  background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 12%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: var(--ui-text-primary, var(--soc-text));
}

.soc-notification-center-search {
  width: min(320px, 100%);
}

.soc-notification-center-list {
  display: grid;
  gap: 16px;
}

.soc-notification-center-group {
  display: grid;
  gap: 10px;
}

.soc-notification-center-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.soc-notification-center-group-title {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  font-weight: 700;
}

.soc-notification-center-group-count {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  font-weight: 600;
}

.soc-notification-center-item {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 14px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.soc-notification-center-item.is-unread {
  border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 28%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 4%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

.soc-notification-center-item:hover {
  border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 26%, var(--ui-border-subtle, var(--soc-border)));
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.soc-notification-center-dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--ui-accent, var(--soc-accent));
}

.soc-notification-center-item.is-read .soc-notification-center-dot {
  background: rgba(148, 163, 184, 0.35);
}

.soc-notification-center-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.soc-notification-center-item-body {
  display: grid;
  gap: 8px;
}

.soc-notification-center-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.soc-notification-center-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ui-bg-surface, white);
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  font-weight: 700;
}

.soc-notification-center-time {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  white-space: nowrap;
}

.soc-notification-center-title {
  margin: 0;
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 14px;
  font-weight: 700;
}

.soc-notification-center-summary {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  line-height: 1.5;
}

.soc-notification-center-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.soc-notification-center-item-hint {
  margin: 0;
  color: var(--ui-text-tertiary, color-mix(in srgb, var(--ui-text-secondary, var(--soc-text-sub)) 82%, transparent));
  font-size: 12px;
  line-height: 1.4;
}

.soc-notification-center-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.soc-notification-onboarding-modal .modal-head {
  justify-content: space-between;
}

.soc-notification-onboarding-head {
  display: grid;
  gap: 6px;
}

.soc-notification-onboarding-head h2 {
  margin: 0;
}

.soc-notification-onboarding-body {
  display: grid;
  gap: 14px;
}

.soc-notification-onboarding-hint {
  padding: 10px 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

.soc-notification-onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 880px) {
  .soc-settings-panel {
    width: calc(100vw - 24px);
    padding: 20px 18px 22px;
    border-radius: 18px;
  }

  .soc-settings-shell-bar {
    display: block;
    width: 100%;
    min-height: 0;
    overflow: visible;
    padding: 0;
  }

  .soc-settings-shell-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .soc-settings-shell-tab {
    justify-content: center;
    width: 100%;
    padding: 0 8px;
  }

  .soc-reminder-card-head,
  .soc-settings-savebar,
  .soc-reminder-danger-zone,
  .soc-notification-permission-banner,
  .soc-notification-center-toolbar,
  .soc-notification-center-item-footer,
  .soc-notification-state-row,
  .soc-notification-check-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .soc-reminder-row,
  .soc-reminder-row--toggle {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-reminder-config-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-reminder-card-copy {
    position: static;
  }

  .soc-reminder-form,
  .soc-reminder-preview-box,
  .soc-settings-single-column {
    max-width: none;
  }

  .soc-notification-center-search {
    width: 100%;
  }
}

body.soc-desktop-shell :is(
  #hqReminderPanel,
  #notificationSettingsPanel,
  #auditPanel
).soc-settings-panel {
  align-self: start;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 20px;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  width: min(980px, calc(100vw - var(--soc-desktop-sidebar-width) - 72px));
  max-width: 980px;
  margin: 20px auto 40px;
  padding: 26px 30px 30px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 90%, white) !important;
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 90%, white) 100%
  ) !important;
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.06) !important;
}

body.soc-desktop-shell .container.ds-page > :is(
  #hqReminderPanel,
  #notificationSettingsPanel,
  #auditPanel
).soc-settings-panel,
body.soc-desktop-shell .container.admin-layout > :is(
  #hqReminderPanel,
  #notificationSettingsPanel,
  #auditPanel
).soc-settings-panel {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

body.soc-desktop-shell :is(
  #hqReminderPanel,
  #notificationSettingsPanel,
  #auditPanel
).soc-settings-panel > .soc-settings-shell-bar {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 2px;
}

body.soc-desktop-shell :is(
  #hqReminderPanel,
  #notificationSettingsPanel,
  #auditPanel
).soc-settings-panel :is(
  .soc-settings-page-header,
  .soc-settings-single-column,
  .soc-settings-savebar
) {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.soc-settings-audit-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 16px;
}

.soc-settings-audit-tab {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 8px;
  background: var(--ui-bg-surface, var(--soc-card-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.soc-settings-audit-tab:hover,
.soc-settings-audit-tab:focus-visible {
  color: var(--ui-text-primary, var(--soc-text));
  border-color: var(--ui-border-strong, var(--soc-border));
  outline: none;
}

.soc-settings-audit-tab.is-active,
.soc-settings-audit-tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 45%, var(--ui-border-strong, var(--soc-border)));
  background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 12%, var(--ui-bg-surface, var(--soc-card-bg)));
  color: var(--ui-text-primary, var(--soc-text));
}

#themePanel.soc-settings-panel > h2 {
  margin-top: 0;
}

/* ===== Typography normalization pass ===== */
html,
body {
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--type-body-md-weight);
}

body,
p,
li,
dd,
textarea,
input,
select {
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--type-body-md-weight);
  letter-spacing: 0;
}

input::placeholder,
textarea::placeholder {
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--type-body-md-weight);
}

.topbar h1,
.topbar-brand-heading,
.topbar-brand-link {
  font-size: var(--type-section-md-size);
  line-height: var(--type-section-md-line);
  font-weight: var(--type-section-md-weight);
  letter-spacing: 0;
}

:is(
  .panel-title-row > h2,
  .soc-page-header-main > h2,
  .soc-report-header-main > h2,
  .soc-hub-title-row > h2,
  .soc-announcement-header .title-inline > h2,
  .soc-workspace-title > h2,
  #peopleAdminPageTitle,
  #reportPanel > .ds-card-title,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workspace-title > h3
) {
  font-size: var(--type-title-lg-size);
  line-height: var(--type-title-lg-line);
  font-weight: var(--type-title-lg-weight);
  letter-spacing: 0;
}

:is(
  .ds-card-title,
  .soc-block h3,
  .soc-block h4,
  .soc-report-empty-card h4,
  .soc-report-browse-card h4,
  .soc-report-cover-card h4,
  .soc-admin-sub-head h3,
  .soc-workspace-card-head h3,
  .soc-workspace-card-head h4,
  .soc-sheet-head h3,
  .modal-head h2,
  .soc-analytics-store-drawer-head h4,
  .report-flow-title,
  .ticket-title,
  .incident-title,
  .soc-employee-create-header h3,
  .soc-employee-create-section h4,
  .soc-report-builder-step h4,
  .soc-apple-weekly-main-help h4,
  .soc-apple-weekly-step-head h4,
  .soc-apple-weekly-subcard h5,
  .soc-apple-weekly-action-card h5,
  .soc-apple-weekly-rule-title,
  .soc-apple-weekly-danger-zone h4,
  .soc-apple-weekly-danger-card h4,
  .soc-apple-weekly-inline-head h5,
  .soc-apple-weekly-empty-state strong,
  .notification-empty-state strong,
  .global-notice-title
) {
  font-size: var(--type-section-md-size);
  line-height: var(--type-section-md-line);
  font-weight: var(--type-section-md-weight);
  letter-spacing: 0;
}

:is(
  .help,
  .meta,
  .session-info,
  .ds-card-subtitle,
  .ticket-desc,
  .ticket-meta-line,
  .ticket-kv-label,
  .ticket-kv-value,
  .global-notice-body,
  .soc-report-browse-list,
  .soc-report-header-left .meta,
  .soc-analytics-header-left .meta,
  .soc-mini-row .meta,
  .soc-insight-item,
  .notification-empty-state p,
  .soc-apple-weekly-workspace-title p,
  .soc-apple-weekly-sync-result .meta,
  .soc-apple-weekly-validation-log > .meta,
  .soc-apple-weekly-conflict-compare .meta,
  .soc-apple-weekly-baseline-readonly p,
  .soc-apple-weekly-empty-state p
) {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  letter-spacing: 0;
}

:is(
  label,
  .ds-label,
  .soc-filter-item label,
  .soc-menu-section-label,
  .soc-apple-weekly-global-field > span,
  .soc-apple-weekly-field > span,
  .soc-apple-weekly-form-grid label > span,
  .soc-apple-weekly-inline-field > span,
  .soc-kpi-label,
  .soc-summary-label,
  .soc-store-kpi-label,
  .soc-store-main-metric-label,
  .soc-home-weekly-chart-label,
  .soc-menu-item::before,
  .soc-sidebar-role-badge,
  .soc-sidebar-header-caption,
  .ticket-meta,
  .ticket-comment-item small,
  .case-timeline-event-time,
  .ticket-kv-label,
  .validation-error,
  .field-error
) {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
  letter-spacing: 0;
  text-transform: none;
}

:is(
  .ds-btn,
  .ds-btn-sm,
  button,
  .report-tab,
  .announcement-mode-btn,
  .site-filter-btn,
  .date-filter-btn,
  .sla-page-btn,
  .soc-settings-shell-tab,
  .soc-settings-audit-tab,
  .soc-dashboard-workspace-tab,
  .soc-hub-mode-tab,
  .soc-report-builder-step-tab,
  .soc-report-templates-tab,
  .soc-export-menu-item,
  .soc-admin-link-btn,
  .soc-menu-group-toggle,
  .soc-menu-sub-item,
  .mobile-nav-action-btn,
  .soc-apple-weekly-main-tab-btn,
  .soc-weekly-subtab-btn,
  .soc-apple-weekly-subtab-btn
) {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: 600;
  letter-spacing: 0;
}

:is(
  .soc-dashboard-workspace-tab,
  .soc-hub-mode-tab,
  .soc-settings-shell-tab,
  .soc-settings-audit-tab,
  .soc-report-builder-step-tab,
  .soc-apple-weekly-main-tab-btn,
  .soc-weekly-subtab-btn,
  .soc-apple-weekly-subtab-btn
) {
  font-weight: 600;
}

:is(
  .chip,
  .soc-chip,
  .soc-active-filter-chip,
  .ds-badge,
  .status-badge,
  .status-online,
  .status-offline,
  .incident-urgent-badge,
  .incident-type-badge,
  .incident-category-badge,
  .case-status-badge,
  .case-eci-badge,
  .case-chip,
  .mobile-type-chip,
  .topbar-notification-badge,
  .soc-hero-chip,
  .soc-weekly-status-badge,
  .soc-weekly-status-chip,
  .soc-home-weekly-ratio-pill,
  .soc-store-summary-chip,
  .soc-store-kpi-pill,
  .soc-google-sheet-summary-pill,
  .soc-google-sheet-status-pill,
  .soc-google-sheet-result-badge,
  .soc-apple-weekly-status-badge,
  .soc-apple-weekly-day-chip,
  .soc-apple-weekly-tag,
  .soc-apple-weekly-sync-summary span,
  .soc-apple-weekly-weekday-chip,
  .soc-apple-weekly-section-chip,
  .soc-participant-role-pill,
  .soc-participant-state-pill,
  .soc-participant-pill,
  .soc-role-pill,
  .ticket-status-pill,
  .ticket-urgent-pill,
  .ticket-location-pill,
  .ticket-requested-count-badge,
  .soc-participants-role-chip,
  .soc-participants-stat-chip,
  .soc-site-code-missing-badge,
  .soc-announcement-important-chip
) {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
  letter-spacing: 0;
  text-transform: none;
}

:is(
  .soc-kpi-value,
  .soc-summary-value,
  .soc-risk-gauge-value-wrap strong
) {
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-line);
  font-weight: var(--type-display-lg-weight);
  letter-spacing: 0;
}

:is(
  .soc-block-value,
  .soc-home-weekly-chart-value
) {
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-line);
  font-weight: var(--type-title-md-weight);
  letter-spacing: 0;
}

:is(
  .soc-kpi-subtext,
  .soc-home-weekly-chart-wow,
  .soc-store-chart-meta,
  .soc-ticket-mini-legend-item,
  .soc-home-ticket-summary-site
) {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
}

table th,
.ds-table th,
.soc-pc-list-header,
.soc-pc-list-header > * {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
  letter-spacing: 0;
}

table td,
.ds-table td,
.soc-report-browse-actions,
.soc-google-sheet-mapping-table td,
.soc-apple-weekly-console-table td,
.soc-apple-weekly-validation-table td {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  letter-spacing: 0;
}

:is(
  .soc-weekly-heatmap-table th,
  .soc-weekly-heatmap-table td,
  .report-heatmap-table th,
  .report-heatmap-table td,
  .soc-heatmap-header,
  .soc-heatmap-row-label
) {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
}

:is(
  .soc-toast,
  .validation-toast
) {
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--type-body-md-weight);
  letter-spacing: 0;
}

:is(
  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label,
  body.nav-open #menuSheetPanel .soc-menu-group-label,
  body.nav-open #menuSheetPanel .soc-menu-sub-item-label,
  .ds-nav-item,
  .admin-tab-btn,
  .soc-bottom-tab-btn,
  .soc-bottom-tab-btn > span:last-child
) {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  letter-spacing: 0;
}

:is(
  body.soc-desktop-shell #menuSheetPanel .soc-menu-section-label,
  body.nav-open #menuSheetPanel .soc-menu-section-label
) {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
  letter-spacing: 0;
  text-transform: none;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-workspace-kicker,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-status-badge,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-global-field > span,
#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-summary-pill,
#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-status-pill,
#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-badge,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-day-chip,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-tag,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sync-summary span,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-weekday-chip,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-chip {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table th,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table th,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-table th {
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table td,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-console-table td,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-validation-table td,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-baseline-readonly p,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-rule-block,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-sync-result,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-head .meta,
#googleSheetsPanel.soc-apple-weekly-mode .meta,
#googleSheetsPanel.soc-apple-weekly-mode .help {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-main-tab-btn,
#googleSheetsPanel.soc-apple-weekly-mode .soc-weekly-subtab-btn,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-subtab-btn {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: 600;
}

#googleSheetsPanel.soc-apple-weekly-mode .ds-btn,
#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-row-actions .ds-btn,
#googleSheetsPanel.soc-apple-weekly-mode .soc-report-browse-actions .ds-btn {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: 600;
}

/* ===== Light mode surface/divider normalization ===== */
[data-theme="light"] .panel,
[data-theme="light"] .panel.ds-card,
[data-theme="light"] .ds-card {
  background: var(--ui-bg-surface);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-1);
}

[data-theme="light"] .panel-title-row,
[data-theme="light"] .admin-sub-topbar,
[data-theme="light"] .soc-view-page-header {
  border-bottom-color: var(--ui-divider-default);
}

[data-theme="light"] .soc-profile-hero-avatar.is-glyph {
  background: #ffffff;
  border-color: var(--ui-border-subtle);
  color: #9aa4b2;
}

[data-theme="dark"] .soc-profile-hero-avatar.is-glyph {
  background: #111827;
  border-color: rgba(148, 163, 184, 0.26);
  color: #94a3b8;
}

[data-theme="light"] .soc-block,
[data-theme="light"] .soc-kpi-card,
[data-theme="light"] .soc-summary-card,
[data-theme="light"] .soc-summary-item,
[data-theme="light"] .soc-realtime-date-display,
[data-theme="light"] .soc-date-range-display,
[data-theme="light"] .soc-filterbar,
[data-theme="light"] .soc-workspace-card,
[data-theme="light"] .soc-workspace-panel {
  background: var(--ui-bg-surface);
  border-color: var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-1);
}

[data-theme="light"] .soc-block-head {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-divider-default);
}

[data-theme="light"] .soc-profile-record-head,
[data-theme="light"] .soc-profile-detail-head,
[data-theme="light"] #myProfileAccountSection > .soc-block-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

[data-theme="light"] .soc-kpi-subtext,
[data-theme="light"] .soc-block .meta,
[data-theme="light"] .soc-view-page-header .meta,
[data-theme="light"] .panel-title-row .meta {
  color: var(--ui-text-secondary);
}

[data-theme="light"] body.soc-desktop-shell .container.ds-page,
[data-theme="light"] body.soc-desktop-shell .container.admin-layout {
  background:
    linear-gradient(180deg, var(--soc-sidebar-bg-1) 0%, var(--soc-sidebar-bg-2) 100%) left top / var(--soc-desktop-sidebar-width) 100% no-repeat,
    linear-gradient(90deg, transparent calc(var(--soc-desktop-sidebar-width) - 1px), var(--ui-divider-default) calc(var(--soc-desktop-sidebar-width) - 1px), var(--ui-divider-default) var(--soc-desktop-sidebar-width), transparent var(--soc-desktop-sidebar-width)) left top / 100% 100% no-repeat,
    var(--ui-bg-canvas);
}

[data-theme="light"] body.soc-desktop-shell #menuSheetPanel,
[data-theme="light"] body.soc-desktop-shell .container.admin-layout #menuSheetPanel {
  border-right-color: var(--ui-divider-default) !important;
  background: linear-gradient(180deg, var(--soc-sidebar-bg-1) 0%, var(--soc-sidebar-bg-2) 100%) !important;
}

[data-theme="light"] body.soc-desktop-shell #analyticsView {
  gap: 16px;
}

[data-theme="light"] body.soc-desktop-shell #analyticsView .soc-analytics-header {
  border: 1px solid var(--ui-border-subtle);
  border-radius: 12px;
  background: var(--ui-bg-surface);
  padding: 20px 24px 16px;
  box-shadow: var(--ui-shadow-1);
  gap: 16px;
}

[data-theme="light"] body.soc-desktop-shell #analyticsView .soc-analytics-header-left .meta {
  margin-top: 6px;
  color: var(--ui-text-secondary);
}

[data-theme="light"] body.soc-desktop-shell #analyticsView .soc-analytics-header-right {
  gap: 10px;
  align-content: start;
}

[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap {
  gap: 12px;
}

[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-hero,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-trend-grid > .soc-block,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-kpi-grid .soc-kpi-card,
[data-theme="light"] body.soc-desktop-shell #analyticsScoreTopBlock {
  background: var(--ui-bg-surface);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-1);
}

[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-hero,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-trend-grid > .soc-block,
[data-theme="light"] body.soc-desktop-shell #analyticsScoreTopBlock {
  padding: 20px 24px 24px;
}

[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-kpi-grid .soc-kpi-card {
  padding: 18px 20px;
}

[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-hero .soc-analytics-hero-head,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock > .soc-block-head,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock > .soc-block-head,
[data-theme="light"] body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-trend-grid > .soc-block > .soc-block-head,
[data-theme="light"] body.soc-desktop-shell #analyticsScoreTopBlock > .soc-block-head {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-divider-default);
}

[data-theme="light"] body.soc-desktop-shell #analyticsHeatmapBlock .soc-heatmap-scroll,
[data-theme="light"] body.soc-desktop-shell #analyticsStoreComparisonList,
[data-theme="light"] body.soc-desktop-shell #analyticsScoreTopList {
  background: var(--ui-bg-surface);
}

[data-theme="light"] body.soc-desktop-shell #analyticsView .soc-analytics-state,
[data-theme="light"] body.soc-desktop-shell #analyticsView #analyticsErrorState,
[data-theme="light"] body.soc-desktop-shell #analyticsView #analyticsEmptyState {
  background: var(--ui-bg-surface);
  border: 1px solid var(--ui-border-subtle);
  box-shadow: var(--ui-shadow-1);
}

/* ===== Alerts/Tickets workspace template unification ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell #alertsView.soc-ops-workspace-view,
  body.soc-desktop-shell #ticketsView.soc-ops-workspace-view,
  body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame {
    display: grid;
    gap: 16px;
    min-width: 0;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame:hover,
  body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame:active {
    transform: none !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-header {
    display: grid;
    gap: 6px;
    margin: 0 !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 12px !important;
    background: var(--ui-bg-surface, var(--soc-panel-bg)) !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar .soc-realtime-date-display,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar .ds-btn {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis {
    margin: 0 !important;
    gap: 12px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card {
    min-height: 100px !important;
    padding: 16px 16px 14px !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 12px !important;
    background: var(--ui-bg-surface, var(--soc-panel-bg)) !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card.is-active {
    border-color: var(--ui-accent, var(--soc-accent)) !important;
    background: color-mix(
      in srgb,
      var(--ui-accent, var(--soc-accent)) 8%,
      var(--ui-bg-surface, var(--soc-panel-bg))
    ) !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label {
    color: var(--ui-text-secondary, var(--soc-text-sub)) !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value {
    color: var(--ui-text-primary, var(--soc-text)) !important;
    line-height: 1 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-helper {
    margin: 0 !important;
    color: var(--ui-text-secondary, var(--soc-text-sub)) !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 336px !important;
    gap: 16px !important;
    align-items: start !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel {
    min-width: 0;
    min-height: 560px;
    padding: 0 !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 12px !important;
    background: var(--ui-bg-surface, var(--soc-panel-bg)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-section {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    min-height: 100%;
    margin: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    margin: 0 !important;
    padding: 18px 20px 14px !important;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important;
    background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head h3 {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ui-text-primary, var(--soc-text));
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.soc-workspace-inline-summary, .soc-ticket-feed-summary) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-badge {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 999px;
    background: var(--ui-bg-surface, var(--soc-panel-bg));
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header {
    margin: 0 !important;
    min-height: 44px !important;
    padding: 0 20px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header > span {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    color: var(--ui-text-secondary, var(--soc-text-sub)) !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list, .ticket-list) {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card, .ticket-list > .ticket-card) {
    min-height: 72px !important;
    padding: 12px 20px !important;
    border-inline: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card:last-child, .incident-list > .incident-ticket-card:last-child, .ticket-list > .ticket-card:last-child) {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-card:hover, .incident-card:active, .incident-ticket-card:hover, .incident-ticket-card:active, .ticket-card:hover, .ticket-card:active) {
    background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-selectable-row.is-selected {
    background: color-mix(
      in srgb,
      var(--ui-accent, var(--soc-accent)) 10%,
      var(--ui-bg-surface, var(--soc-panel-bg))
    ) !important;
    outline: 1px solid color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 38%, transparent) !important;
    outline-offset: -1px;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-empty-state {
    min-height: 260px;
    margin: 0 !important;
    padding: 28px 20px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ui-text-secondary, var(--soc-text-sub)) !important;
    align-content: start;
    gap: 8px;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-empty-state p {
    margin: 0;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(#realtimeListSkeleton, .incident-list-skeleton) {
    margin: 0;
    padding: 0 20px 20px;
    border: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 336px !important;
    min-width: 336px !important;
    max-width: 336px !important;
    min-height: 560px;
    max-height: calc(100dvh - 128px) !important;
    padding: 0 !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 12px !important;
    background: var(--ui-bg-surface, var(--soc-panel-bg)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head {
    padding: 18px 20px 16px !important;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider)) !important;
    background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions {
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel .ds-btn.ds-btn-sm {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel > .meta {
    margin: 0 !important;
    padding: 14px 20px 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi {
    padding: 14px 20px 0 !important;
    gap: 10px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item {
    min-height: 74px;
    padding: 10px 12px !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 10px !important;
    background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section {
    padding: 14px 20px 0 !important;
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary {
    min-height: 96px;
    max-height: 160px;
    padding: 12px !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 10px !important;
    background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread {
    min-height: 240px !important;
    padding: 12px !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 10px !important;
    background: var(--ui-bg-surface, var(--soc-panel-bg)) !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form {
    margin: 14px 20px 0 !important;
    padding: 12px !important;
    border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
    border-radius: 10px !important;
    background: var(--ui-bg-surface-2, var(--soc-soft-bg)) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-input {
    min-height: 40px !important;
    height: 40px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-submit {
    min-height: 32px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions {
    margin-top: auto;
    padding: 14px 20px 20px !important;
    border-top: 1px solid var(--ui-divider-default, var(--soc-divider)) !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-header {
    padding-bottom: 14px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar {
    gap: 10px;
    padding: 10px 14px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .soc-realtime-date-display,
  body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .ds-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 13px !important;
  }

  body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-row {
    gap: 10px;
    padding: 6px 2px 0;
  }

  body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-summary {
    font-size: 12px;
    line-height: 16px;
  }

  body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-btn {
    min-height: 32px;
    height: 32px;
    padding-inline: 10px;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis {
    gap: 10px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card {
    min-height: 88px !important;
    padding: 14px 14px 12px !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label {
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value {
    font-size: 28px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-helper {
    font-size: 13px;
    line-height: 18px;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-main {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 14px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-results-panel {
    min-height: 520px;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head {
    min-height: 62px;
    padding: 16px 18px 12px !important;
  }

  body.soc-desktop-shell #alertsView .soc-workspace-inline-summary {
    gap: 4px;
  }

  body.soc-desktop-shell #alertsView .soc-workspace-inline-badge {
    min-height: 24px;
    padding: 0 8px;
  }

  body.soc-desktop-shell #alertsView .soc-pc-list-header {
    min-height: 40px !important;
    padding: 0 18px 10px !important;
  }

  body.soc-desktop-shell #alertsView :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card) {
    min-height: 68px !important;
    padding: 10px 18px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-empty-state {
    min-height: 188px;
    padding: 24px 18px 20px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-empty-state .ds-btn {
    min-height: 32px;
    height: 32px;
  }

  body.soc-desktop-shell #alertsView :is(#realtimeListSkeleton, .incident-list-skeleton) {
    padding: 0 18px 18px;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    min-height: 520px;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel-head {
    padding: 16px 18px 14px !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel-head-actions {
    gap: 6px !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel > .meta {
    padding: 12px 18px 0 !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi {
    padding: 12px 18px 0 !important;
    gap: 8px !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi-item {
    min-height: 66px;
    padding: 9px 10px !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel-section {
    padding: 12px 18px 0 !important;
    gap: 6px !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel-summary {
    min-height: 72px;
    max-height: 132px;
    padding: 10px !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel-thread {
    min-height: 188px !important;
    padding: 10px !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel-form {
    margin: 12px 18px 0 !important;
  }

  body.soc-desktop-shell #alertsView .soc-pc-side-panel-actions {
    padding: 12px 18px 18px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi-item {
    min-height: 58px;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary {
    min-height: 60px;
    max-height: 96px;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread {
    min-height: 120px !important;
  }

  body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread .help,
  body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary .help {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #ticketsView #ticketStatusFilterChips {
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
  }

  body.soc-desktop-shell #ticketsView #ticketStatusFilterChips .chip {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar {
    gap: 8px;
    padding: 9px 12px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .soc-realtime-date-display,
  body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .ds-btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-row {
    gap: 10px;
    padding: 0 2px 2px;
  }

  body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-summary {
    font-size: 12px;
    line-height: 16px;
  }

  body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-btn {
    min-height: 32px;
    height: 32px;
    padding-inline: 10px;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis {
    gap: 8px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card {
    min-height: 82px !important;
    padding: 12px 13px 10px !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value {
    font-size: 26px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-helper {
    font-size: 13px;
    line-height: 18px;
    margin-top: -2px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-main {
    grid-template-columns: minmax(0, 1fr) 308px !important;
    gap: 12px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-panel {
    min-height: 496px;
    background: var(--ui-bg-surface, var(--soc-panel-bg)) !important;
  }

body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head {
  min-height: 58px;
  padding: 14px 16px 11px !important;
}

body.soc-desktop-shell #ticketsView .soc-ticket-feed-summary {
  gap: 4px;
}

@media (min-width: 1024px) {
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-head {
    display: block !important;
    width: min(1400px, 100%);
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 4px;
    padding: 0;
    border: 0;
    gap: 6px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-block {
    display: block !important;
    grid-template-columns: none;
    align-items: start;
    gap: 0;
    height: auto !important;
    min-height: 0 !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-title-copy {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-page-head-meta {
    display: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-criteria-bar,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-step-tabs {
    display: none !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections,
  #googleSheetsPanel.soc-apple-weekly-mode [data-section] {
    display: none !important;
  }
}

  body.soc-desktop-shell #ticketsView .soc-workspace-inline-badge {
    min-height: 22px;
    padding: 0 7px;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-list-header {
    min-height: 38px !important;
    padding: 0 16px 9px !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card {
    min-height: 64px !important;
    padding: 9px 16px !important;
  }

  body.soc-desktop-shell #ticketsView .ticket-row-summary-comment {
    line-height: 1.28;
    max-height: calc(1.28em * 2);
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-empty-state {
    min-height: 156px;
    padding: 20px 16px 18px !important;
    justify-items: start;
    align-content: center;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-empty-state .ds-btn {
    min-height: 32px;
    height: 32px;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel {
    width: 308px !important;
    min-width: 308px !important;
    max-width: 308px !important;
    min-height: 496px;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head {
    padding: 14px 16px 12px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head-actions {
    gap: 6px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel > .meta {
    padding: 10px 16px 0 !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi {
    padding: 10px 16px 0 !important;
    gap: 7px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi-item {
    min-height: 60px;
    padding: 8px 9px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section {
    padding: 10px 16px 0 !important;
    gap: 5px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel-summary {
    min-height: 56px;
    max-height: 120px;
    padding: 9px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel-thread {
    min-height: 156px !important;
    padding: 9px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel-form {
    margin: 10px 16px 0 !important;
  }

  body.soc-desktop-shell #ticketsView .soc-pc-side-panel-actions {
    padding: 10px 16px 16px !important;
  }

  body.soc-desktop-shell #ticketsView #ticketCommentPanelCloseBtn {
    border-color: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 30%, var(--ui-border-default, var(--soc-border)));
    background: color-mix(in srgb, var(--ui-accent, var(--soc-accent)) 7%, var(--ui-bg-surface, var(--soc-panel-bg)));
    color: var(--ui-text-primary, var(--soc-text));
  }

  body.soc-desktop-shell #ticketsView #ticketCommentPanelDeleteBtn {
    border-color: color-mix(in srgb, var(--ui-danger, #dc2626) 18%, var(--ui-border-subtle, var(--soc-border)));
    background: transparent;
    color: color-mix(in srgb, var(--ui-danger, #dc2626) 78%, var(--ui-text-primary, var(--soc-text)));
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi-item {
    min-height: 52px;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary {
    min-height: 44px;
    max-height: 80px;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread {
    min-height: 88px !important;
  }

  body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread .help,
  body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary .help {
    margin: 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }
}

/* ===== Apple Weekly Step 1 template cleanup ===== */
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-support-card {
  gap: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-panel-status {
  margin: 0;
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-panel-body {
  gap: 16px !important;
  padding: 20px 24px 24px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-stack {
  display: grid;
  gap: 7px;
  min-width: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-label,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-stack > label {
  margin: 0;
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-help {
  margin: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-readonly-field,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-copy-field {
  min-height: 40px;
  border: 1px solid var(--ui-border-subtle, var(--apple-weekly-border));
  border-radius: 10px;
  background: var(--ui-bg-surface-subtle, var(--apple-weekly-surface));
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-readonly-field {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 8px 8px 12px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-copy-field .ds-btn,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-input-with-action .ds-btn {
  min-height: 32px;
  height: 32px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-copy-field-value,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-readonly-field-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-text-primary, var(--apple-weekly-text));
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
  font-family: var(--soc-font-mono, "SFMono-Regular", ui-monospace, Menlo, monospace);
}

/* ===== Pass19 corrective overrides: alerts/tickets + analytics + support + people ===== */
body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header {
  padding: 0 16px 2px !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header-main {
  gap: 4px;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill, .incident-card .incident-ticket-status),
body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge,
body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge {
  background: #ffffff !important;
  box-shadow: none !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-pending, .incident-card .incident-ticket-status.status-pending) {
  color: #d65c00 !important;
  border-color: #ff8a1f !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-needs-info, .incident-card .incident-ticket-status.status-needs-info) {
  color: #2f80ff !important;
  border-color: #2f80ff !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-approved, .incident-card .incident-ticket-status.status-approved),
body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-confirmed,
body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-confirmed {
  color: #15803d !important;
  border-color: #16a34a !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-unavailable, .ticket-status-pill.status-rejected, .incident-card .incident-ticket-status.status-unavailable, .incident-card .incident-ticket-status.status-rejected),
body.soc-desktop-shell :is(#alertsView, #ticketsView) .ticket-support-worker-state-badge.is-unconfirmed,
body.soc-desktop-shell #alertsView .incident-ticket-description .ticket-support-worker-state-badge.is-unconfirmed {
  color: #c81e1e !important;
  border-color: #ef4444 !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-status-pill.status-cancelled, .ticket-status-pill.status-done, .incident-card .incident-ticket-status.status-cancelled, .incident-card .incident-ticket-status.status-done) {
  color: #475569 !important;
  border-color: #94a3b8 !important;
  background: #ffffff !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable, .ticket-card.status-rejected, .incident-card.incident-ticket-card.status-unavailable, .incident-card.incident-ticket-card.status-rejected) {
  opacity: 1 !important;
}

body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.ticket-card.status-unavailable::before, .ticket-card.status-rejected::before, .incident-card.incident-ticket-card.status-unavailable::before, .incident-card.incident-ticket-card.status-rejected::before) {
  background: #ef4444 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body {
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge {
  width: 120px !important;
  height: 120px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap {
  inset: 0 !important;
  padding-top: 0 !important;
}

body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue {
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -0.04em;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary {
  gap: 8px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item {
  min-height: 52px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item:last-child {
  grid-column: auto !important;
}

body.soc-desktop-shell #analyticsView .soc-risk-grade.safe,
body.soc-desktop-shell #analyticsView .soc-risk-grade.stable {
  border-color: rgba(22, 163, 74, 0.28) !important;
  background: #ffffff !important;
  color: #15803d !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot {
  background: #16a34a !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-approved {
  background: #16a34a !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-pending {
  background: #ff6a13 !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-unavailable,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-rejected {
  background: #ef4444 !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot.state-cancelled {
  background: #64748b !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.cal-line.state-pending, .cal-line.state-approved, .cal-line.state-unavailable, .cal-line.state-rejected, .cal-line.state-cancelled) {
  background: #ffffff !important;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending {
  --ops-support-line-accent: #ff6a13;
  border-color: rgba(255, 106, 19, 0.68) !important;
  color: #c2410c !important;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved {
  --ops-support-line-accent: #16a34a;
  border-color: rgba(22, 163, 74, 0.58) !important;
  color: #15803d !important;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-unavailable,
body.soc-desktop-shell #opsSupportPanel .cal-line.state-rejected {
  --ops-support-line-accent: #ef4444;
  border-color: rgba(239, 68, 68, 0.62) !important;
  color: #c81e1e !important;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled {
  --ops-support-line-accent: #64748b;
  border-color: rgba(100, 116, 139, 0.48) !important;
  color: #475569 !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line:hover,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line.is-selected {
  background: #ffffff !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) {
  background: #ffffff !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-pending, .support-status-chip.state-pending) {
  border-color: #ff6a13 !important;
  color: #c2410c !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-approved, .support-status-chip.state-approved) {
  border-color: #16a34a !important;
  color: #15803d !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) {
  border-color: #ef4444 !important;
  color: #c81e1e !important;
}

body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-cancelled, .support-status-chip.state-cancelled) {
  border-color: #94a3b8 !important;
  color: #475569 !important;
}

body.soc-desktop-shell #peopleView :is(#peopleHubEmployeesPane, #peopleHubAccountsPane, #peopleHubHrPane) .soc-people-kpi-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-card {
  align-content: start;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-card.is-bars .soc-people-bar-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

@media (min-width: 1024px) {
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card {
    min-height: 74px !important;
    padding: 10px 12px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label {
    font-size: 11px !important;
    line-height: 14px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 12px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel {
    min-height: 500px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    min-height: 58px !important;
    padding: 14px 16px 10px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header {
    min-height: 38px !important;
    padding: 0 16px 9px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card, .ticket-list > .ticket-card) {
    min-height: 64px !important;
    padding: 9px 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    min-height: 500px !important;
  }
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-summary .soc-apple-weekly-readonly-field-value {
  font-family: inherit;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-input-with-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-input-with-action input {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#googleSheetsPanel.soc-apple-weekly-mode #googleSheetsTemplateResultWrap {
  gap: 10px;
  padding: 16px;
  border-color: var(--ui-border-subtle, var(--apple-weekly-border));
  background: var(--ui-bg-surface-subtle, var(--apple-weekly-surface));
}

#googleSheetsPanel.soc-apple-weekly-mode #googleSheetsTemplateResultWrap .soc-google-sheet-result-head {
  align-items: flex-start;
  gap: 10px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-summary strong {
  margin: 0;
  font-size: var(--type-section-md-size, 16px);
  line-height: var(--type-section-md-line, 24px);
  font-weight: var(--type-section-md-weight, 600);
  color: var(--ui-text-primary, var(--apple-weekly-text));
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-message,
#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-meta {
  margin: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-details {
  margin: 0;
  padding: 0;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-details > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
  font-weight: 600;
  color: var(--ui-text-primary, var(--apple-weekly-text));
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-result-details > summary::-webkit-details-marker {
  display: none;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-detail-list {
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

#googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-result-raw {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--ui-divider-default, var(--apple-weekly-border));
  border-radius: 10px;
  background: var(--ui-bg-surface, #fff);
  white-space: pre-wrap;
  word-break: break-word;
}

#googleSheetsPanel.soc-apple-weekly-mode #googleSheetsTemplateResultSheets {
  margin: 0;
  max-height: 120px;
  overflow: auto;
}

/* ===== Apple Weekly desktop scroll fix ===== */
@media (min-width: 1024px) {
  body.soc-apple-weekly-active .container.ds-page,
  body.soc-apple-weekly-active .container.admin-layout,
  body.soc-desktop-shell .container.ds-page:has(#googleSheetsPanel.soc-apple-weekly-host),
  body.soc-desktop-shell .container.admin-layout:has(#googleSheetsPanel.soc-apple-weekly-host) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.soc-apple-weekly-active #googleSheetsPanel.soc-apple-weekly-host {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.soc-apple-weekly-active #googleSheetsPanel.soc-apple-weekly-mode {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(var(--soc-main-scroll-padding, 24px) + 32px);
  }
}

/* ===== Apple Weekly Step 1 layout repair ===== */
@media (min-width: 1024px) {
  #googleSheetsPanel.soc-apple-weekly-mode #googleSheetsSetupSections.is-active-tab {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    gap: 24px !important;
    align-items: start;
    width: 100%;
    padding-top: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-pane {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-pane > .soc-apple-weekly-section-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 20px;
    align-items: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-link-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 24px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-service {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-service code {
    display: block;
    max-width: 100%;
    padding: 9px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 10px;
    background: var(--ui-bg-surface-subtle, #f8fafc);
    font-size: var(--type-body-sm-size, 13px);
    line-height: var(--type-body-sm-line, 18px);
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-inline-meta-row {
    align-items: center;
    justify-content: flex-end;
    gap: 10px 16px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-mapping-table-wrap {
    width: 100%;
    max-width: none;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-main,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-context {
    display: grid;
    gap: 24px;
    min-width: 0;
    align-content: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-support-card,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-context-card {
    display: grid;
    gap: 0;
    min-width: 0;
    width: 100%;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar--stacked {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 18px;
    align-items: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: start;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading > div {
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading h4 {
    margin: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading .meta,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading .soc-apple-weekly-panel-status {
    margin: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-heading .soc-apple-weekly-panel-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    justify-self: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar--stacked > .soc-google-sheet-actions {
    justify-content: flex-end;
    align-self: start;
    flex-wrap: wrap;
    gap: 8px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-section-bar--stacked > .soc-google-sheet-actions > .ds-btn {
    min-height: 40px !important;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-panel-body {
    display: grid !important;
    gap: 16px !important;
    padding: 20px 24px 24px;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--baseline,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--template,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--context {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    min-width: 0;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--baseline > .soc-apple-weekly-field-stack:first-child,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-field-stack--full {
    grid-column: 1 / -1;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--baseline .soc-apple-weekly-readonly-field-value,
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-support-fields--context .soc-apple-weekly-readonly-field-value {
    font-family: inherit;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-google-sheet-baseline-form .soc-google-sheet-form-grid {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 10px 16px;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-context-card .soc-google-sheet-status-pill {
    justify-self: start;
  }

  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-context-card .soc-apple-weekly-field-help {
    margin: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-setup-lower {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Analytics layout repair ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell #analyticsView {
    display: grid;
    gap: 24px;
    align-content: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-row {
    grid-template-columns: minmax(0, 1.65fr) auto minmax(240px, 320px);
    gap: 16px;
  }

  body.soc-desktop-shell #analyticsContentWrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  body.soc-desktop-shell #analyticsContentWrap > .soc-analytics-summary-zone,
  body.soc-desktop-shell #analyticsContentWrap > #analyticsTrendZone,
  body.soc-desktop-shell #analyticsContentWrap > #analyticsHeatmapBlock,
  body.soc-desktop-shell #analyticsContentWrap > #analyticsStoreComparisonBlock {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone {
    grid-template-columns: minmax(0, 1.62fr) minmax(336px, 0.98fr);
    gap: 20px;
    align-items: stretch;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary {
    min-width: 0;
    min-height: 0;
    padding: 22px 24px 24px;
    align-content: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 20px;
    align-items: center;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
    align-content: stretch;
    align-self: stretch;
    grid-auto-rows: minmax(132px, 1fr);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-head {
    gap: 14px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-headline {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-title-wrap {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-lead {
    max-width: 44ch;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row {
    justify-content: space-between;
    align-items: center;
    gap: 8px 14px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-content {
    gap: 16px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap {
    width: 190px;
    height: 190px;
    justify-self: end;
    align-self: center;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap {
    width: 190px;
    height: 190px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card,
  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-card {
    min-height: 132px;
    padding: 18px 20px;
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 10px;
    border: 1px solid var(--ui-border-subtle, var(--soc-border));
    border-radius: 12px;
    background: var(--ui-bg-surface, var(--soc-panel-bg));
    box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-value {
    align-self: end;
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendZone {
    display: grid;
    gap: 16px;
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendZone .soc-analytics-trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card {
    min-height: 264px;
  }

  body.soc-desktop-shell #analyticsView #analyticsHeatmapBlock {
    min-width: 0;
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock {
    display: grid;
    gap: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-store-comparison-actions {
    grid-template-columns: repeat(3, minmax(0, 220px)) auto;
    gap: 12px;
    align-items: end;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-body {
    grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.9fr);
    gap: 20px;
    align-items: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-main {
    display: grid;
    gap: 16px;
    min-width: 0;
    align-content: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-side {
    position: static;
    display: grid;
    gap: 16px;
    min-width: 0;
    align-content: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonList,
  body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock,
  body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel {
    width: 100%;
    min-width: 0;
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonList {
    min-height: 320px;
  }

  body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock {
    margin-top: 0;
  }
}

/* ===== Sentrix desktop phase 2 normalization ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell {
    --soc-pc-toolbar-pad-y: 14px;
    --soc-pc-toolbar-pad-x: 16px;
    --soc-pc-toolbar-gap: 12px;
    --soc-pc-row-gap: 12px;
    --soc-pc-field-gap: 6px;
    --soc-pc-control-height: 36px;
    --soc-pc-primary-height: 38px;
    --soc-pc-utility-height: 32px;
    --soc-pc-panel-gap: 14px;
    --soc-pc-panel-pad-y: 16px;
    --soc-pc-panel-pad-x: 18px;
    --soc-pc-table-head-y: 11px;
    --soc-pc-table-cell-y: 10px;
    --soc-pc-table-pad-x: 12px;
    --soc-pc-empty-min-height: 176px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-toolbar,
    #peopleView .soc-monitoring-toolbar,
    #employeeScorePanel .soc-employee-score-filter-bar,
    #opsSupportPanel .soc-ops-support-toolbar,
    #analyticsView .soc-analytics-filter-bar
  ) {
    gap: var(--soc-pc-toolbar-gap);
    padding: var(--soc-pc-toolbar-pad-y) var(--soc-pc-toolbar-pad-x);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-0, 0 1px 2px rgba(15, 23, 42, 0.04));
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-toolbar-row,
    #peopleView .soc-monitoring-toolbar-row
  ) {
    gap: var(--soc-pc-row-gap);
    align-items: end;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-toolbar-main,
    #peopleView .soc-monitoring-toolbar-controls,
    #opsSupportPanel .soc-ops-support-toolbar-left,
    #opsSupportPanel .soc-ops-support-toolbar-right
  ) {
    gap: 10px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-field,
    #peopleView .soc-monitoring-toolbar-field,
    #employeeScorePanel .soc-inline-field,
    #opsSupportPanel .soc-inline-field,
    #analyticsView .soc-analytics-filter-group,
    #analyticsView .soc-analytics-site-filter
  ) {
    gap: var(--soc-pc-field-gap);
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-toolbar,
    #peopleView .soc-monitoring-toolbar,
    #employeeScorePanel .soc-employee-score-filter-bar,
    #opsSupportPanel .soc-ops-support-toolbar,
    #analyticsView .soc-analytics-filter-bar
  ) :is(
    .ds-input,
    select,
    input[type='search'],
    input[type='date'],
    .ds-btn:not(.ds-btn-sm):not(.soc-ops-support-save-btn),
    .ops-support-month-nav .month-label,
    .ops-support-month-nav .month-arrow
  ) {
    min-height: var(--soc-pc-control-height);
    height: var(--soc-pc-control-height);
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-toolbar,
    #peopleView .soc-monitoring-toolbar
  ) :is(
    .ds-input,
    select,
    input[type='search']
  ) {
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    line-height: 20px;
    font-size: 14px;
    box-sizing: border-box;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-toolbar,
    #peopleView .soc-monitoring-toolbar
  ) :is(select, .ds-select) {
    padding-right: 38px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-toolbar,
    #peopleView .soc-monitoring-toolbar,
    #employeeScorePanel .soc-employee-score-filter-bar,
    #opsSupportPanel .soc-ops-support-toolbar,
    #analyticsView .soc-analytics-filter-bar
  ) .ds-btn:not(.ds-btn-sm) {
    padding-inline: 12px;
    border-radius: 8px;
    font-size: var(--type-body-sm-size, 13px);
    line-height: var(--type-body-sm-line, 18px);
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-toolbar,
    #peopleView .soc-monitoring-toolbar,
    #employeeScorePanel .soc-employee-score-filter-bar,
    #opsSupportPanel .soc-ops-support-toolbar,
    #analyticsView .soc-analytics-filter-bar,
    #opsSupportPanel .soc-ops-support-sheet,
    #employeeScorePanel,
    #analyticsView
  ) .ds-btn.ds-btn-sm {
    min-height: var(--soc-pc-utility-height);
    height: var(--soc-pc-utility-height);
    padding-inline: 10px;
    border-radius: 8px;
  }

  body.soc-desktop-shell :is(
    #peopleView,
    #employeeScorePanel,
    #opsSupportPanel,
    #analyticsView
  ) .ds-btn.ds-btn-primary:not(.ds-btn-sm) {
    min-height: var(--soc-pc-primary-height);
    height: var(--soc-pc-primary-height);
    padding-inline: 14px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-monitoring-toolbar-danger .ds-btn-danger,
    #peopleView .soc-monitoring-toolbar-danger .btn-danger
  ) {
    min-height: var(--soc-pc-utility-height);
    height: var(--soc-pc-utility-height);
    padding-inline: 10px;
    border-radius: 8px;
    border-color: rgba(180, 35, 24, 0.22);
    background: rgba(180, 35, 24, 0.06);
    color: #b42318;
    box-shadow: none;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-monitoring-toolbar-danger .ds-btn-danger,
    #peopleView .soc-monitoring-toolbar-danger .btn-danger
  ):hover {
    background: rgba(180, 35, 24, 0.1);
    border-color: rgba(180, 35, 24, 0.28);
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-summary-block,
    #peopleView .soc-monitoring-toolbar-stat,
    #opsSupportPanel .soc-ops-support-toolbar-stat
  ) {
    min-width: 78px;
    gap: 2px;
    padding: 6px 9px;
    border-radius: 9px;
    box-shadow: none;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-summary-block strong,
    #peopleView .soc-monitoring-toolbar-stat strong,
    #opsSupportPanel .soc-ops-support-toolbar-stat > strong
  ) {
    font-size: 15px;
    line-height: 22px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-toolbar-label,
    #peopleView .soc-monitoring-toolbar-label,
    #opsSupportPanel .soc-ops-support-toolbar-stat-label
  ) {
    font-size: 11px;
    line-height: 14px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-people-hub-switch-btn,
    #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'],
    #employeeScorePanel .soc-analytics-range-quick .ds-btn.ds-btn-sm
  ) {
    min-height: var(--soc-pc-utility-height);
    height: var(--soc-pc-utility-height);
    padding: 0 12px;
    border-radius: 8px;
  }

  body.soc-desktop-shell #peopleView .soc-people-hub-tabs {
    gap: 8px;
    padding: 0;
  }

  body.soc-desktop-shell #peopleView .soc-people-admin-header-wrap {
    gap: 10px;
    margin-bottom: 0;
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar {
    gap: var(--soc-pc-toolbar-gap);
    padding: var(--soc-pc-toolbar-pad-y) var(--soc-pc-toolbar-pad-x);
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-row {
    gap: var(--soc-pc-row-gap);
    align-items: end;
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-main {
    gap: 14px;
  }

  body.soc-desktop-shell #peopleView {
    --soc-people-filter-label-width: 40px;
    --soc-people-filter-label-gap: 12px;
  }

  body.soc-desktop-shell #peopleView :is(
    .soc-employee-directory-field,
    .soc-monitoring-toolbar-field
  ) {
    display: grid;
    grid-template-columns: var(--soc-people-filter-label-width) minmax(0, 1fr);
    align-items: center;
    gap: var(--soc-people-filter-label-gap);
    min-width: 0;
  }

  body.soc-desktop-shell #peopleView :is(
    .soc-employee-directory-field,
    .soc-monitoring-toolbar-field
  ) > span {
    padding-left: 0;
  }

  body.soc-desktop-shell #peopleView :is(
    .soc-employee-directory-search,
    .soc-monitoring-toolbar-search
  ) {
    min-width: min(360px, 100%);
    flex: 1 1 360px;
  }

  body.soc-desktop-shell #peopleView .soc-employee-directory-field:not(.soc-employee-directory-search),
  body.soc-desktop-shell #peopleView .soc-monitoring-toolbar-field:not(.soc-monitoring-toolbar-search) {
    min-width: 208px;
    flex: 0 1 208px;
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-utility {
    gap: 10px;
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-cluster {
    gap: 10px;
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-danger-cluster {
    padding-left: 12px;
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-badges {
    gap: 8px;
  }

  body.soc-desktop-shell #peopleView .soc-people-pane-summary {
    gap: 10px;
    padding: 14px 16px;
  }

  body.soc-desktop-shell #peopleView .soc-people-pane-summary-badges {
    gap: 8px;
  }

  body.soc-desktop-shell #peopleView .soc-people-directory-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.soc-desktop-shell #peopleView .soc-people-directory-layout.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 388px);
    align-items: start;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    position: relative;
    top: auto;
    min-height: 0;
    max-height: calc(100vh - 268px);
    overflow: hidden;
    align-self: start;
    opacity: 0;
    transform: translateX(22px);
    pointer-events: none;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel.is-open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    animation: socPeopleDetailPanelSlideIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel-head {
    padding: 16px 18px 12px;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-summary {
    padding: 0 16px 14px;
    gap: 8px;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel-body {
    padding: 0 18px 18px;
    min-height: 0;
    overflow-y: auto;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel-actions {
    padding: 14px 18px 18px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-tab-rail {
    gap: 14px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-hero-copy strong {
    font-size: 24px;
    line-height: 30px;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.soc-desktop-shell #peopleView .soc-people-stats-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr);
  }

  body.soc-desktop-shell #peopleView .soc-people-danger-utility {
    min-height: var(--soc-pc-utility-height);
    height: var(--soc-pc-utility-height);
    padding-inline: 10px;
    border-radius: 8px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-grid,
    #peopleView .soc-monitoring-grid,
    #employeeScorePanel .soc-employee-score-content,
    #opsSupportPanel .soc-ops-support-layout
  ) {
    gap: var(--soc-pc-panel-gap);
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-workspace-card-head,
    #employeeScorePanel .soc-workspace-card-head,
    #opsSupportPanel .soc-workspace-card-head,
    #analyticsView .soc-block-head
  ) {
    margin-bottom: 0;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-workspace-card-head > div,
    #employeeScorePanel .soc-workspace-card-head > div,
    #opsSupportPanel .soc-workspace-card-head > div,
    #analyticsView .soc-block-head > div
  ) {
    display: grid;
    gap: 4px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-grid-wrap,
    #peopleView .soc-monitoring-grid-wrap,
    #employeeScorePanel .soc-employee-score-table-wrap
  ) {
    border-radius: 12px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-table,
    #peopleView .soc-monitoring-grid-table,
    #employeeScorePanel .soc-employee-score-table
  ) th {
    padding: var(--soc-pc-table-head-y) var(--soc-pc-table-pad-x);
    vertical-align: middle;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-table,
    #peopleView .soc-monitoring-grid-table,
    #employeeScorePanel .soc-employee-score-table
  ) td {
    padding: var(--soc-pc-table-cell-y) var(--soc-pc-table-pad-x);
    vertical-align: middle;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-table thead th,
    #peopleView .soc-monitoring-grid-table th,
    #employeeScorePanel .soc-employee-score-table th
  ) {
    font-size: 12px;
    line-height: 16px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-table tbody td,
    #peopleView .soc-monitoring-grid-table td,
    #employeeScorePanel .soc-employee-score-table td
  ) {
    font-size: 13px;
    line-height: 18px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-directory-sort-button,
    #peopleView .soc-monitoring-sort-button
  ) {
    gap: 4px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-directory-sort-indicator,
    #peopleView .soc-monitoring-sort-indicator
  ) {
    min-width: 12px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-directory-status,
    #peopleView .soc-status-inline,
    #opsSupportPanel .support-status-inline,
    #employeeScorePanel .soc-employee-score-breakdown-legend-item
  ) {
    gap: 5px;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-employee-directory-state,
    #peopleView .soc-monitoring-grid-state,
    #opsSupportPanel .soc-ops-support-summary-empty
  ) {
    min-height: 144px;
    padding: 18px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-filter-bar {
    gap: 10px;
    padding: 12px var(--soc-pc-toolbar-pad-x) 14px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-controls {
    gap: 12px 14px;
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(240px, 0.56fr)
      minmax(280px, 0.72fr)
      minmax(176px, 0.34fr);
    align-items: start;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-control-cluster.is-sort {
    min-width: 0;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid {
    grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card {
    min-height: 188px;
    padding: 16px 18px;
    gap: 10px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual {
    min-height: 110px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 380px);
    gap: 14px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-side-card,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-primary-card,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-ranking-section,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-breakdown-section {
    gap: 14px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel {
    position: sticky;
    top: 14px;
    align-content: start;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-column {
    gap: 14px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-insight-body {
    gap: 10px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-insight-stat-grid {
    gap: 8px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-insight-stat {
    padding: 11px 12px;
    gap: 4px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-insight-list {
    gap: 0;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-breakdown-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-combo-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-breakdown-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-empty {
    padding: 16px 0 4px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-viewport {
    padding-right: 0;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar {
    padding: var(--soc-pc-toolbar-pad-y) var(--soc-pc-toolbar-pad-x);
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
    gap: 10px;
    padding: 0 2px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats {
    gap: 6px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-meta {
    font-size: 12px;
    line-height: 16px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control {
    min-width: 118px;
    height: var(--soc-pc-control-height);
    font-size: 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label,
  body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow {
    border-radius: 8px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout.has-detail-panel {
    grid-template-columns: minmax(0, 2.44fr) minmax(360px, 392px);
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main,
  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet {
    gap: 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main {
    padding: 12px 14px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet {
    padding: 12px 14px;
    min-height: 280px;
    max-width: 392px;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet.hidden {
    opacity: 0;
    transform: translateX(12px);
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head {
    gap: 10px;
    padding-bottom: 8px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-hero,
  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-state,
  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-group {
    border-radius: 10px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-content {
    gap: 10px;
  }

  body.soc-desktop-shell #opsSupportPanel #opsSupportSheetHint {
    display: none !important;
  }

  #opsSupportPanel #opsSupportSheetHint {
    display: none !important;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics {
    gap: 8px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric {
    padding: 10px 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-context {
    gap: 6px 10px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-purpose {
    padding: 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary {
    gap: 8px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary > div {
    padding: 10px 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline {
    gap: 10px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-body {
    padding: 10px 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-head {
    min-height: 40px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-table th,
  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-table td {
    padding: 10px 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-empty {
    min-height: 136px;
    padding: 16px;
  }

  body.soc-desktop-shell #analyticsView {
    gap: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar {
    padding: var(--soc-pc-toolbar-pad-y) var(--soc-pc-toolbar-pad-x);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-row {
    gap: 12px;
    align-items: end;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone {
    gap: 12px;
    grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.94fr);
    align-items: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary {
    gap: 10px;
    padding: 14px 16px 15px;
    align-self: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body {
    grid-template-columns: minmax(0, 1fr) 188px;
    gap: 14px;
    align-items: center;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side {
    width: 204px;
    justify-self: end;
    justify-items: center;
    align-content: center;
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap {
    width: 170px;
    height: 170px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap {
    justify-self: center;
    align-self: center;
    margin-top: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap strong {
    font-size: 30px;
    line-height: 1;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap span {
    font-size: 12px;
    line-height: 15px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-content {
    gap: 10px;
    padding-right: 2px;
    align-content: center;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-head {
    gap: 6px;
    padding-bottom: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-headline {
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-title-wrap {
    gap: 2px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-title {
    width: auto;
    text-align: left;
    justify-self: start;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-lead {
    max-width: 32ch;
    font-size: var(--type-body-sm-size, 13px);
    line-height: var(--type-body-sm-line, 18px);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row {
    justify-content: space-between;
    gap: 6px 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row .meta {
    font-size: var(--type-label-sm-size, 12px);
    line-height: var(--type-label-sm-line, 16px);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection--drivers {
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-driver-list {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-driver-row {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid {
    gap: 8px;
    grid-auto-rows: minmax(88px, auto);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card,
  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-card {
    min-height: 88px;
    padding: 11px 14px;
    gap: 4px;
    border-radius: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-label {
    font-size: var(--type-label-sm-size, 12px);
    line-height: var(--type-label-sm-line, 16px);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-value {
    font-size: 26px;
    line-height: 30px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-grid {
    gap: 14px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-zone,
  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card {
    gap: 14px;
    padding: 18px 20px 20px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-zone-head,
  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-block-head {
    padding-bottom: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-zone-head .meta,
  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .meta {
    margin-top: 4px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card {
    min-height: 236px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-sparkline-lg {
    height: 88px;
    min-height: 88px;
    margin-top: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-sparkline-line {
    stroke-width: 2.4;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-heatmap-toolbar {
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-scroll {
    min-height: 228px;
    padding-top: 2px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-body {
    grid-template-columns: minmax(0, 1.94fr) minmax(272px, 0.78fr);
    gap: 14px;
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-body {
    grid-template-columns: minmax(0, 1fr) minmax(248px, 0.62fr);
    gap: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-side {
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView :is(
    #analyticsScoreTopBlock,
    #analyticsStoreInsightPanel,
    .soc-analytics-insight-card
  ) {
    gap: 10px;
    padding: 16px 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-store-comparison-actions {
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 196px)) auto;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-summary {
    gap: 9px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat,
  body.soc-desktop-shell #analyticsView .soc-analytics-insight-stat {
    padding: 11px 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-insight-card > .soc-block-head {
    padding-bottom: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-insight-metrics {
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection {
    gap: 8px;
    padding-top: 10px;
  }

  body.soc-desktop-shell #analyticsView #analyticsScoreTopList,
  body.soc-desktop-shell #analyticsView #analyticsStoreInsightDelta {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView :is(#analyticsScoreTopList, #analyticsStoreInsightDelta) .soc-mini-row {
    padding: 8px 10px;
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonList {
    min-height: 288px;
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode #analyticsStoreComparisonList {
    min-height: 0;
  }
}

@media (max-width: 1280px) {
  #peopleView .soc-people-kpi-strip,
  #peopleView .soc-people-stats-grid,
  #peopleView .soc-people-employee-stat-grid,
  #peopleView .soc-people-employee-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #peopleView .soc-people-kpi-donut-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  #peopleView .soc-people-employee-info-card.is-span-2 {
    grid-column: auto;
  }

  #peopleView .soc-employee-directory-pagination {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  #peopleView .soc-employee-directory-pagination-summary,
  #peopleView .soc-employee-directory-pagination-controls {
    justify-content: center;
  }

  #peopleView .soc-employee-directory-pagination-summary {
    justify-self: center;
  }

  #peopleView .soc-employee-directory-pagination-spacer {
    display: none;
  }
}

@media (min-width: 1280px) {
  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body {
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.42fr);
    gap: 18px;
    align-items: start;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side {
    grid-column: 1;
    width: 220px;
    justify-self: start;
    justify-items: center;
    align-content: start;
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap {
    width: 158px;
    height: 158px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap {
    justify-self: center;
    align-self: start;
    margin-top: 4px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-content {
    grid-column: 2;
    align-content: start;
    padding-right: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection--drivers {
    padding-top: 2px;
  }
}

@media (min-width: 1200px) {
  body.soc-desktop-adaptive #analyticsView {
    gap: 16px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-workspace-header {
    padding-bottom: 2px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-filter-bar {
    padding: 10px 14px;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg))),
      var(--ui-bg-surface, var(--soc-panel-bg))
    );
    box-shadow: none;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-filter-row {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 248px);
    gap: 12px;
    align-items: center;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-range-quick .ds-btn,
  body.soc-desktop-adaptive #analyticsView .soc-analytics-filter-bar input[type="date"],
  body.soc-desktop-adaptive #analyticsView .soc-analytics-filter-bar select,
  body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-toolbar select {
    min-height: 36px;
    height: 36px;
    border-radius: 10px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-zone {
    display: grid;
    gap: 14px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    grid-auto-rows: minmax(88px, auto);
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-kpi-grid .soc-kpi-card,
  body.soc-desktop-adaptive #analyticsView .soc-analytics-kpi-card {
    min-height: 88px;
    padding: 12px 14px;
    gap: 6px;
    border-radius: 14px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-primary {
    padding: 16px 18px 18px;
    border-radius: 16px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-primary-body {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(288px, 0.92fr);
    gap: 18px;
    align-items: start;
  }

  body.soc-desktop-adaptive #analyticsView .soc-risk-summary-copy {
    order: 1;
    display: grid;
    gap: 12px;
    min-width: 0;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-primary-head {
    gap: 8px;
    padding-bottom: 0;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-meta-row {
    display: grid;
    gap: 8px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-content {
    display: grid;
    gap: 10px;
    align-content: start;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-subsection {
    gap: 8px;
    padding-top: 0;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-subsection--drivers {
    gap: 10px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-risk-overview-side {
    order: 2;
    width: auto;
    justify-self: stretch;
    justify-items: stretch;
    align-content: start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border)));
    border-radius: 16px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--soc-primary) 5%, var(--ui-bg-surface-subtle, var(--soc-card-bg))),
      var(--ui-bg-surface-subtle, var(--soc-card-bg))
    );
  }

  body.soc-desktop-adaptive #analyticsView .soc-risk-overview-cluster-head {
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  }

  body.soc-desktop-adaptive #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-wrap,
  body.soc-desktop-adaptive #analyticsView .soc-risk-gauge,
  body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-value-wrap {
    width: 164px;
    height: 164px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-wrap {
    justify-self: center;
    align-self: center;
    margin-top: 4px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-value-wrap strong {
    font-size: 34px;
    line-height: 38px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-risk-gauge-caption {
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-trend-grid {
    grid-template-columns: minmax(0, 1.64fr) minmax(300px, 0.82fr);
    gap: 14px;
    align-items: stretch;
  }

  body.soc-desktop-adaptive #analyticsView #analyticsTrendIncidentsBlock {
    min-height: 252px;
  }

  body.soc-desktop-adaptive #analyticsView #analyticsTrendEciBlock {
    min-height: 232px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-trend-card .soc-sparkline-lg {
    height: 122px;
    min-height: 122px;
    margin-top: 8px;
  }

  body.soc-desktop-adaptive #analyticsView #analyticsTrendEciBlock .soc-sparkline-lg {
    height: 104px;
    min-height: 104px;
  }

  body.soc-desktop-adaptive #analyticsView #analyticsHeatmapBlock {
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 16px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-heatmap-toolbar {
    gap: 8px 12px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-heatmap-scroll {
    min-height: 204px;
    padding-top: 0;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-toolbar {
    gap: 10px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-store-comparison-actions {
    grid-template-columns: repeat(3, minmax(0, 172px)) auto;
    gap: 10px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-body {
    grid-template-columns: minmax(0, 1.56fr) minmax(290px, 0.84fr);
    gap: 14px;
    align-items: start;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-main,
  body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-side {
    gap: 12px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-comparison-summary {
    gap: 10px;
  }

  body.soc-desktop-adaptive #analyticsView .soc-store-row.is-selected {
    border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--ui-border-default, var(--soc-divider)));
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))),
      var(--ui-bg-surface, var(--soc-panel-bg)) 72%
    );
  }

  body.soc-desktop-adaptive #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-body {
    grid-template-columns: minmax(0, 1.18fr) minmax(252px, 0.72fr);
    gap: 12px;
  }

  body.soc-desktop-adaptive #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.soc-desktop-adaptive #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-single-site-card {
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
  }

  body.soc-desktop-adaptive #analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover) {
    border-color: color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border));
    box-shadow: 0 18px 44px color-mix(in srgb, var(--soc-shadow) 52%, transparent);
    z-index: 70;
  }
}

@media (min-width: 1440px) {
  body.soc-desktop-adaptive #analyticsView .soc-analytics-summary-primary-body {
    grid-template-columns: minmax(0, 1.62fr) minmax(320px, 0.86fr);
  }

  body.soc-desktop-adaptive #analyticsView .soc-analytics-trend-grid {
    grid-template-columns: minmax(0, 1.72fr) minmax(316px, 0.76fr);
  }
}

@media (min-width: 1024px) {
  body.soc-desktop-shell #analyticsView {
    gap: 14px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-workspace-header {
    padding-bottom: 2px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-workspace-header h3 {
    font-size: 24px;
    line-height: 30px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-workspace-header .meta {
    font-size: 12px;
    line-height: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar {
    padding: 10px 14px;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
    box-shadow: none;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-row {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 248px);
    gap: 12px;
    align-items: center;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-group {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-label,
  body.soc-desktop-shell #analyticsView .soc-analytics-site-filter label,
  body.soc-desktop-shell #analyticsView .soc-analytics-control-field > label {
    font-size: 12px;
    line-height: 16px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-range-quick {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn,
  body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar input[type="date"],
  body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar select,
  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-toolbar select {
    min-height: 34px;
    height: 34px;
    border-radius: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn {
    min-width: 44px;
    padding: 0 12px;
    border-color: color-mix(in srgb, var(--soc-border) 80%, transparent);
    background: var(--ui-bg-surface, var(--soc-panel-bg));
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn.active {
    border-color: color-mix(in srgb, var(--soc-primary) 44%, var(--soc-border));
    background: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-bg-surface, var(--soc-panel-bg)));
    color: var(--soc-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone {
    display: grid;
    gap: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    grid-auto-rows: minmax(86px, auto);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card,
  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 86px;
    padding: 11px 14px 12px;
    gap: 6px;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
    box-shadow: none;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--analytics-kpi-accent, color-mix(in srgb, var(--soc-primary) 56%, transparent));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="primary"] {
    --analytics-kpi-accent: color-mix(in srgb, var(--soc-primary) 78%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="warning"] {
    --analytics-kpi-accent: color-mix(in srgb, var(--soc-warning) 76%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="caution"] {
    --analytics-kpi-accent: color-mix(in srgb, var(--soc-warning) 58%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="critical"] {
    --analytics-kpi-accent: color-mix(in srgb, var(--soc-danger) 78%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card.is-active {
    border-color: color-mix(in srgb, var(--analytics-kpi-accent, var(--soc-primary)) 44%, var(--ui-border-default, var(--soc-divider)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--analytics-kpi-accent, var(--soc-primary)) 16%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-label {
    font-size: 12px;
    line-height: 16px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-value {
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -0.02em;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary {
    padding: 16px 18px 18px;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 5%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
    box-shadow: none;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(280px, 0.92fr);
    gap: 16px;
    align-items: stretch;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-summary-copy {
    display: grid;
    gap: 12px;
    min-width: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-head {
    display: grid;
    gap: 8px;
    padding-bottom: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-title-wrap {
    gap: 4px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-title {
    margin: 0;
    font-size: 22px;
    line-height: 28px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-lead {
    margin: 0;
    max-width: none;
    font-size: 14px;
    line-height: 20px;
    color: color-mix(in srgb, var(--ui-text-primary, var(--soc-text)) 92%, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row {
    display: grid;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-chip {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-chip .label {
    font-size: 10px;
    line-height: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-chip strong {
    font-size: 12px;
    line-height: 16px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-content {
    display: grid;
    gap: 10px;
    align-content: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection {
    gap: 8px;
    padding-top: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection > h5 {
    font-size: 13px;
    line-height: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-driver-list {
    list-style: none;
    padding-left: 0;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-driver-row {
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-driver-row-empty {
    padding: 10px 12px;
    border: 1px dashed var(--ui-border-subtle, var(--soc-border));
    border-radius: 12px;
    background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side {
    justify-self: stretch;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border)));
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 6%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-cluster-head {
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  }

  body.soc-desktop-shell #analyticsView .soc-risk-cluster-label {
    font-size: 12px;
    line-height: 16px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-grade {
    white-space: nowrap;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-info-trigger {
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap {
    width: 168px;
    height: 168px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap {
    justify-self: center;
    align-self: center;
    margin-top: 2px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap strong {
    font-size: 36px;
    line-height: 40px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-caption {
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-zone,
  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card {
    gap: 12px;
    padding: 16px 18px 18px;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    box-shadow: none;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-zone-head,
  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-block-head {
    padding-bottom: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-zone-head h3,
  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-block-head h3,
  body.soc-desktop-shell #analyticsView .soc-analytics-insight-card > .soc-block-head h4 {
    font-size: 18px;
    line-height: 24px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-zone-head .meta,
  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .meta {
    font-size: 12px;
    line-height: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-grid {
    grid-template-columns: minmax(0, 1.74fr) minmax(280px, 0.86fr);
    gap: 12px;
    align-items: stretch;
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendIncidentsBlock {
    min-height: 258px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 6%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock {
    min-height: 242px;
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock.is-sparse {
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-warning) 5%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card.is-empty {
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-border) 22%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-sparkline-lg {
    height: 134px;
    min-height: 134px;
    margin-top: 8px;
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock .soc-sparkline-lg {
    height: 116px;
    min-height: 116px;
  }

  body.soc-desktop-shell #analyticsView #analyticsHeatmapBlock {
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 16px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-heatmap-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-day-tabs {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-day-btn {
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-scroll {
    min-height: 198px;
    padding-top: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-legend-empty,
  body.soc-desktop-shell #analyticsView .soc-analytics-empty-note {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px dashed var(--ui-border-subtle, var(--soc-border));
    border-radius: 12px;
    background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-size: 12px;
    line-height: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-legend-empty {
    min-height: 28px;
    padding: 6px 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-grid.is-empty-state {
    display: block;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
  }

  body.soc-desktop-shell #analyticsView .soc-store-comparison-actions {
    grid-template-columns: repeat(3, minmax(0, 164px)) auto;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView #analyticsComparisonContext {
    margin: 0;
    align-self: center;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-body {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.9fr);
    gap: 12px;
    align-items: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-main,
  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-side {
    gap: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat,
  body.soc-desktop-shell #analyticsView .soc-analytics-insight-stat {
    min-height: 78px;
    padding: 10px 12px;
    border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-store-row {
    gap: 12px;
    padding: 12px 14px;
    border-color: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-border-subtle, var(--soc-border)));
  }

  body.soc-desktop-shell #analyticsView .soc-store-row.is-selected {
    border-color: color-mix(in srgb, var(--soc-primary) 38%, var(--ui-border-default, var(--soc-divider)));
    background: linear-gradient(135deg, color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) 72%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-store-row-rank {
    min-height: 38px;
    background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel,
  body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock {
    padding: 14px 16px;
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel .soc-block-head strong,
  body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock .soc-block-head strong {
    color: var(--soc-primary);
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-body {
    grid-template-columns: minmax(0, 1.28fr) minmax(272px, 0.78fr);
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-comparison-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-single-site-card {
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 6%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-single-site-kicker {
    margin: 0 0 2px;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--soc-primary);
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-single-site-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-single-site-mode .soc-analytics-single-site-metric {
    padding: 10px 12px;
    border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    background: color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreComparisonBlock.is-empty-state .soc-analytics-comparison-body {
    grid-template-columns: 1fr;
  }

  body.soc-desktop-shell #analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover) {
    border-color: color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border));
    box-shadow: 0 18px 44px color-mix(in srgb, var(--soc-shadow) 52%, transparent);
    z-index: 70;
  }
}

@media (min-width: 1440px) {
  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body {
    grid-template-columns: minmax(0, 1.82fr) minmax(320px, 0.88fr);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-grid {
    grid-template-columns: minmax(0, 1.82fr) minmax(300px, 0.8fr);
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap {
    width: 176px;
    height: 176px;
  }
}

#analyticsView .soc-analytics-summary-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#analyticsView .soc-analytics-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 78%, transparent);
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-summary-chip .label {
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: 600;
  white-space: nowrap;
}

#analyticsView .soc-analytics-summary-chip strong {
  min-width: 0;
  font-size: var(--type-body-sm-size, 13px);
  line-height: var(--type-body-sm-line, 18px);
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#analyticsView .soc-analytics-summary-chip--accent {
  border-color: color-mix(in srgb, var(--soc-primary) 30%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

#analyticsView .soc-analytics-summary-chip--primary {
  border-color: color-mix(in srgb, var(--soc-primary) 24%, var(--soc-border));
}

#analyticsView .soc-analytics-summary-chip--focus {
  border-color: color-mix(in srgb, var(--soc-primary) 34%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

#analyticsView .soc-analytics-summary-chip--warning {
  border-color: color-mix(in srgb, var(--soc-warning) 34%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-warning) 10%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

#analyticsView .soc-analytics-summary-chip--caution {
  border-color: color-mix(in srgb, var(--soc-warning) 28%, var(--soc-border));
}

#analyticsView .soc-analytics-summary-chip--danger {
  border-color: color-mix(in srgb, var(--soc-danger) 38%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-danger) 10%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

#analyticsView .soc-analytics-summary-chip--safe {
  border-color: color-mix(in srgb, var(--soc-success) 34%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-success) 10%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

#analyticsView .soc-analytics-summary-chip--muted {
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#analyticsView .soc-risk-overview-cluster-head {
  display: grid;
  gap: 8px;
  width: 100%;
}

#analyticsView .soc-risk-cluster-label {
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: 700;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-kpi-grid .soc-kpi-card {
  cursor: default;
}

#analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-jump] {
  cursor: pointer;
}

#analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover)[data-placement="top"] {
  transform-origin: 50% 100%;
}

#analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover)[data-placement="bottom"] {
  transform-origin: 50% 0%;
}

@media (min-width: 1280px) {
  body.soc-desktop-shell #analyticsView {
    gap: 16px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar {
    padding: 12px 16px;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--soc-primary) 16%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
    box-shadow: none;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-row {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 248px);
    gap: 14px;
    align-items: center;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-group {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-filter-label {
    white-space: nowrap;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn,
  body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar input[type="date"],
  body.soc-desktop-shell #analyticsView .soc-analytics-filter-bar select,
  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-toolbar select {
    min-height: 36px;
    height: 36px;
    border-radius: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn {
    min-width: 46px;
    padding: 0 12px;
    border-color: color-mix(in srgb, var(--soc-border) 80%, transparent);
    background: var(--ui-bg-surface, var(--soc-panel-bg));
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-range-quick .ds-btn.active {
    border-color: color-mix(in srgb, var(--soc-primary) 44%, var(--soc-border));
    background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface, var(--soc-panel-bg)));
    color: var(--soc-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 16%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone > .soc-analytics-kpi-grid {
    grid-column: 1 / -1;
    order: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    grid-auto-rows: minmax(92px, auto);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-zone > .soc-analytics-summary-primary {
    grid-column: 1 / -1;
    order: 2;
    gap: 12px;
    padding: 16px 18px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-head {
    gap: 10px;
    padding-bottom: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-headline {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-title-wrap {
    gap: 4px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-title {
    font-size: 22px;
    line-height: 30px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-lead {
    max-width: 58ch;
    font-size: 14px;
    line-height: 20px;
    color: color-mix(in srgb, var(--ui-text-primary, var(--soc-text)) 92%, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-meta-row {
    display: grid;
    gap: 8px;
    justify-content: stretch;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body {
    grid-template-columns: minmax(0, 1.42fr) minmax(240px, 0.88fr);
    gap: 18px;
    align-items: stretch;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-content {
    gap: 10px;
    align-content: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection {
    gap: 8px;
    padding-top: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection--drivers {
    gap: 10px;
    padding-top: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-driver-list {
    list-style: none;
    padding-left: 0;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-driver-row {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    border-radius: 12px;
    background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  }

  body.soc-desktop-shell #analyticsView .soc-driver-row-empty {
    padding: 10px 12px;
    border: 1px dashed var(--ui-border-subtle, var(--soc-border));
    border-radius: 12px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side {
    width: auto;
    padding: 14px 14px 12px;
    border: 1px solid color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border)));
    border-radius: 16px;
    background: color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg)));
    justify-self: stretch;
    justify-items: stretch;
    align-content: start;
    gap: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-cluster-head {
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar {
    justify-content: space-between;
    align-items: center;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap {
    width: 156px;
    height: 156px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap {
    justify-self: center;
    align-self: center;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap strong {
    font-size: 34px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-caption {
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card,
  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 92px;
    padding: 12px 14px;
    gap: 6px;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    box-shadow: none;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--analytics-kpi-accent, color-mix(in srgb, var(--soc-primary) 50%, transparent));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="primary"] {
    --analytics-kpi-accent: color-mix(in srgb, var(--soc-primary) 72%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 7%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="warning"] {
    --analytics-kpi-accent: color-mix(in srgb, var(--soc-warning) 72%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="caution"] {
    --analytics-kpi-accent: color-mix(in srgb, var(--soc-warning) 52%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card[data-kpi-tone="critical"] {
    --analytics-kpi-accent: color-mix(in srgb, var(--soc-danger) 72%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-card.is-active {
    border-color: color-mix(in srgb, var(--analytics-kpi-accent, var(--soc-primary)) 48%, var(--ui-border-default, var(--soc-divider)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--analytics-kpi-accent, var(--soc-primary)) 16%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-label {
    font-size: 12px;
    line-height: 16px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-kpi-grid .soc-kpi-value {
    font-size: 24px;
    line-height: 28px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-zone,
  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card {
    gap: 12px;
    padding: 16px 18px 18px;
    border-radius: 16px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-zone-head,
  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-block-head {
    padding-bottom: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-grid {
    grid-template-columns: minmax(0, 1.46fr) minmax(300px, 0.92fr);
    gap: 14px;
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendIncidentsBlock {
    min-height: 248px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 5%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock {
    min-height: 236px;
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock.is-sparse {
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-warning) 4%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-trend-card .soc-sparkline-lg {
    height: 116px;
    min-height: 116px;
    margin-top: 6px;
  }

  body.soc-desktop-shell #analyticsView #analyticsTrendEciBlock .soc-sparkline-lg {
    height: 104px;
    min-height: 104px;
  }

  body.soc-desktop-shell #analyticsView #analyticsHeatmapBlock {
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-heatmap-toolbar {
    gap: 8px 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-day-tabs {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-day-btn {
    min-height: 28px;
    padding: 4px 9px;
  }

  body.soc-desktop-shell #analyticsView .soc-heatmap-scroll {
    min-height: 214px;
    padding-top: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-toolbar {
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-store-comparison-actions {
    grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(0, 168px));
    gap: 10px;
    align-items: end;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-body {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.98fr);
    gap: 14px;
    align-items: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat,
  body.soc-desktop-shell #analyticsView .soc-analytics-insight-stat {
    border-color: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    border-radius: 14px;
    display: grid;
    gap: 4px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat[data-tone="safe"] {
    border-color: color-mix(in srgb, var(--soc-success) 24%, var(--ui-border-subtle, var(--soc-border)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat[data-tone="caution"] {
    border-color: color-mix(in srgb, var(--soc-warning) 26%, var(--ui-border-subtle, var(--soc-border)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat[data-tone="danger"] {
    border-color: color-mix(in srgb, var(--soc-danger) 26%, var(--ui-border-subtle, var(--soc-border)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat .label {
    font-size: 12px;
    line-height: 16px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-stat strong {
    font-size: 22px;
    line-height: 28px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-list-shell {
    border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 2%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)));
    overflow: hidden;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-list-head,
  body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) minmax(90px, 0.8fr) minmax(90px, 0.75fr) minmax(100px, 0.9fr) minmax(126px, 1fr) minmax(90px, 0.8fr) minmax(90px, 0.86fr);
    gap: 12px;
    align-items: center;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-list-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
    background: color-mix(in srgb, var(--soc-primary) 6%, var(--ui-bg-surface, var(--soc-panel-bg)));
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-list {
    display: grid;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row {
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
    background: transparent;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row:last-child {
    border-bottom: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row:hover {
    background: color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-list-row.is-selected {
    background: linear-gradient(135deg, color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) 72%);
    box-shadow: inset 3px 0 0 var(--soc-primary);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-cell {
    min-width: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ui-text-primary, var(--soc-text));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-cell strong {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--ui-text-primary, var(--soc-text));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-cell small {
    display: block;
    margin-top: 2px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--score {
    font-weight: 800;
    color: var(--soc-primary);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--trend[data-tone="danger"] {
    color: var(--soc-danger);
    font-weight: 700;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--trend[data-tone="safe"] {
    color: var(--soc-success);
    font-weight: 700;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--trend[data-tone="muted"] {
    color: var(--ui-text-secondary, var(--soc-text-sub));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-cell--state .soc-risk-grade {
    min-width: 56px;
    justify-content: center;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-site-list-empty {
    padding: 18px 16px;
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-size: 13px;
    line-height: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-store-row {
    gap: 12px;
    padding: 12px 14px;
    border-color: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-border-subtle, var(--soc-border)));
  }

  body.soc-desktop-shell #analyticsView .soc-store-row.is-selected {
    border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--ui-border-default, var(--soc-divider)));
    background: linear-gradient(135deg, color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) 72%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 14%, transparent);
  }

  body.soc-desktop-shell #analyticsView .soc-store-row-rank {
    min-height: 38px;
    background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-comparison-side {
    gap: 12px;
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel {
    position: sticky;
    top: 14px;
    padding: 16px 18px 18px;
    border: 1px solid color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border)));
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-detail-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 4px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-detail-tabs button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--soc-border) 82%, transparent);
    border-radius: 10px;
    background: var(--ui-bg-surface, var(--soc-panel-bg));
    color: var(--ui-text-secondary, var(--soc-text-sub));
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-detail-tabs button.is-active {
    border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--ui-border-default, var(--soc-divider)));
    background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface, var(--soc-panel-bg)));
    color: var(--soc-primary);
  }

  body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel .soc-block-head strong,
  body.soc-desktop-shell #analyticsView #analyticsScoreTopBlock .soc-block-head strong {
    color: var(--soc-primary);
  }

  body.soc-desktop-shell #analyticsView :is(.soc-risk-info-popover, .soc-store-info-popover) {
    border-color: color-mix(in srgb, var(--soc-primary) 18%, var(--soc-border));
    box-shadow: 0 18px 44px color-mix(in srgb, var(--soc-shadow) 52%, transparent);
  }
}

#analyticsView .soc-analytics-detail-body {
  display: grid;
  gap: 12px;
  min-height: 220px;
}

#analyticsView .soc-analytics-detail-section {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

#analyticsView .soc-analytics-detail-section h5 {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#analyticsView .soc-analytics-detail-section-head .meta {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 16px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-detail-stack {
  display: grid;
  gap: 8px;
}

#analyticsView .soc-analytics-detail-empty,
#analyticsView .soc-analytics-detail-empty-inline {
  padding: 12px 14px;
  border: 1px dashed var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  font-size: 13px;
  line-height: 18px;
}

#analyticsView .soc-analytics-detail-empty[data-tone="error"] {
  border-color: color-mix(in srgb, var(--soc-danger) 36%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-danger) 6%, var(--ui-bg-surface-subtle, var(--soc-card-bg)));
}

#analyticsView .soc-analytics-detail-empty-inline--compact {
  padding: 9px 12px;
  font-size: 12px;
  line-height: 16px;
}

#analyticsView .soc-analytics-detail-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#analyticsView .soc-analytics-detail-segmented {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#analyticsView .soc-analytics-detail-segmented button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 82%, transparent);
  border-radius: 999px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

#analyticsView .soc-analytics-detail-segmented button.is-active {
  border-color: color-mix(in srgb, var(--soc-primary) 40%, var(--ui-border-default, var(--soc-divider)));
  background: color-mix(in srgb, var(--soc-primary) 12%, var(--ui-bg-surface, var(--soc-panel-bg)));
  color: var(--soc-primary);
}

#analyticsView .soc-analytics-pattern-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#analyticsView .soc-analytics-pattern-toolbar {
  display: grid;
  gap: 0;
  align-items: stretch;
}

#analyticsView #analyticsPatternPanel .soc-analytics-board-card-head {
  align-items: center;
}

#analyticsView .soc-analytics-pattern-head-actions {
  margin-left: auto;
  flex: 0 0 auto;
}

#analyticsView .soc-analytics-pattern-toolbar-top,
#analyticsView .soc-analytics-pattern-footer {
  display: flex;
  align-items: center;
}

#analyticsView .soc-analytics-pattern-toolbar-top {
  justify-content: flex-end;
}

#analyticsView .soc-analytics-pattern-footer {
  justify-content: flex-start;
  padding-top: 10px;
}

#analyticsView .soc-analytics-pattern-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#analyticsView .soc-analytics-pattern-summary-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--soc-primary) 14%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-primary) 8%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

#analyticsView .soc-analytics-pattern-summary-item .label {
  font-size: 11px;
  line-height: 15px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-pattern-summary-item strong {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-pattern-grid-wrap {
  overflow-x: auto;
  padding-bottom: 2px;
}

#analyticsView .soc-analytics-pattern-grid {
  display: grid;
  grid-template-columns: 60px repeat(12, minmax(48px, 1fr));
  gap: 5px;
  min-width: 760px;
  align-items: center;
}

#analyticsView .soc-analytics-pattern-corner,
#analyticsView .soc-analytics-pattern-header,
#analyticsView .soc-analytics-pattern-row-label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-pattern-header,
#analyticsView .soc-analytics-pattern-row-label {
  text-align: center;
}

#analyticsView .soc-analytics-pattern-header {
  white-space: nowrap;
  word-break: keep-all;
  letter-spacing: -0.02em;
}

#analyticsView .soc-analytics-pattern-cell {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 78%, transparent);
  border-radius: 10px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  padding: 0;
}

#analyticsView .soc-analytics-pattern-cell.i1 {
  background: #fff8f1;
  border-color: #ffe7d4;
  color: #9a6630;
}

#analyticsView .soc-analytics-pattern-cell.i2 {
  background: #ffe9d2;
  border-color: #ffcfaa;
  color: #8b5622;
}

#analyticsView .soc-analytics-pattern-cell.i3 {
  background: #ffd8b0;
  border-color: #ffb16f;
  color: #7b4314;
}

#analyticsView .soc-analytics-pattern-cell.i4 {
  background: #ffb97d;
  border-color: #ff8f3d;
  color: #6f3305;
}

#analyticsView .soc-analytics-pattern-cell.i5 {
  background: #ff7a1f;
  border-color: #ff6a13;
  color: #ffffff;
}

#analyticsView .soc-analytics-pattern-cell.is-selected {
  border-color: color-mix(in srgb, var(--soc-primary) 54%, var(--ui-border-default, var(--soc-divider)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 18%, transparent);
}

#analyticsView .soc-analytics-pattern-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#analyticsView .soc-analytics-pattern-legend-caption,
#analyticsView .soc-analytics-pattern-legend-range,
#analyticsView .soc-analytics-pattern-legend-item {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
}

#analyticsView .soc-analytics-pattern-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#analyticsView .soc-analytics-pattern-scale {
  width: 14px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 80%, transparent);
}

#analyticsView .soc-analytics-pattern-scale.i1 { background: #fff8f1; border-color: #ffe7d4; }
#analyticsView .soc-analytics-pattern-scale.i2 { background: #ffe9d2; border-color: #ffcfaa; }
#analyticsView .soc-analytics-pattern-scale.i3 { background: #ffd8b0; border-color: #ffb16f; }
#analyticsView .soc-analytics-pattern-scale.i4 { background: #ffb97d; border-color: #ff8f3d; }
#analyticsView .soc-analytics-pattern-scale.i5 { background: #ff7a1f; border-color: #ff6a13; }

#analyticsView .soc-analytics-pattern-drawer {
  padding-top: 2px;
}

#analyticsView .soc-analytics-cause-grid,
#analyticsView .soc-analytics-detail-column-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#analyticsView .soc-analytics-breakdown-list {
  display: grid;
  gap: 8px;
}

#analyticsView .soc-analytics-breakdown-row {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#analyticsView .soc-analytics-breakdown-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

#analyticsView .soc-analytics-breakdown-head strong {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
}

#analyticsView .soc-analytics-breakdown-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-border) 65%, transparent);
  overflow: hidden;
}

#analyticsView .soc-analytics-breakdown-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--soc-primary) 72%, transparent), color-mix(in srgb, var(--soc-accent) 64%, transparent));
}

#analyticsView .soc-analytics-cause-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#analyticsView .soc-analytics-cause-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--soc-primary) 18%, var(--ui-border-subtle, var(--soc-border)));
  background: color-mix(in srgb, var(--soc-primary) 8%, var(--ui-bg-surface-subtle, var(--soc-card-bg)));
}

#analyticsView .soc-analytics-detail-list {
  display: grid;
  gap: 8px;
}

#analyticsView .soc-analytics-detail-list-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--soc-border) 76%, transparent);
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#analyticsView .soc-analytics-detail-list-item strong {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
}

#analyticsView .soc-analytics-detail-list-item .meta {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
}

#analyticsView .soc-analytics-people-list {
  display: grid;
  gap: 8px;
}

#analyticsView .soc-analytics-people-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--soc-primary) 12%, var(--ui-border-subtle, var(--soc-border)));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  text-align: left;
}

#analyticsView .soc-analytics-people-row.is-actionable {
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

#analyticsView .soc-analytics-people-row.is-actionable:hover {
  background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  border-color: color-mix(in srgb, var(--soc-primary) 30%, var(--ui-border-subtle, var(--soc-border)));
}

#analyticsView .soc-analytics-people-row.is-actionable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--soc-primary) 45%, transparent);
  outline-offset: 2px;
}

#analyticsView .soc-analytics-people-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-bg-surface, var(--soc-panel-bg)));
  color: var(--soc-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
}

#analyticsView .soc-analytics-people-main,
#analyticsView .soc-analytics-people-score {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#analyticsView .soc-analytics-people-score {
  justify-items: end;
  text-align: right;
}

#analyticsView .soc-analytics-people-main strong,
#analyticsView .soc-analytics-people-score strong {
  min-width: 0;
  line-height: 1.2;
}

#analyticsView .soc-analytics-people-main .meta,
#analyticsView .soc-analytics-people-score .meta {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
}

#analyticsView .soc-analytics-v2-detail-body::-webkit-scrollbar {
  width: 10px;
}

#analyticsView .soc-analytics-v2-detail-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-primary) 24%, transparent);
}

[data-theme="dark"] #analyticsView .soc-analytics-pattern-card,
[data-theme="dark"] #analyticsView .soc-analytics-breakdown-row,
[data-theme="dark"] #analyticsView .soc-analytics-detail-list-item,
[data-theme="dark"] #analyticsView .soc-analytics-people-row,
[data-theme="dark"] #analyticsView .soc-analytics-pattern-summary-item,
[data-theme="dark"] #analyticsView .soc-analytics-v2-detail-header-chip,
[data-theme="dark"] #analyticsView .soc-analytics-v2-detail-stat {
  background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 92%, black 8%);
}

[data-theme="dark"] #analyticsView .soc-analytics-pattern-cell {
  border-color: color-mix(in srgb, var(--soc-border) 62%, transparent);
  color: color-mix(in srgb, var(--ui-text-primary, var(--soc-text)) 88%, var(--ui-text-secondary, var(--soc-text-sub)) 12%);
}

[data-theme="dark"] #analyticsView .soc-analytics-pattern-grid-wrap {
  scrollbar-color: color-mix(in srgb, var(--soc-primary) 24%, transparent) transparent;
}

body.soc-desktop-shell #analyticsView #analyticsStoreInsightPanel {
  min-height: 540px;
}

@media (max-width: 1280px) {
  #analyticsView .soc-analytics-cause-grid,
  #analyticsView .soc-analytics-detail-column-grid,
  #analyticsView .soc-analytics-pattern-summary {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-analytics-pattern-toolbar-top {
    justify-content: flex-end;
  }

  #analyticsView .soc-analytics-pattern-footer {
    justify-content: flex-start;
  }
}

@media (min-width: 1280px) {
  body.soc-desktop-shell #analyticsView .soc-analytics-summary-primary-body {
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.42fr);
    gap: 18px;
    align-items: start;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side {
    grid-column: 1;
    width: 220px;
    justify-self: start;
    justify-items: center;
    align-content: start;
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-overview-side .soc-risk-overview-toolbar {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge,
  body.soc-desktop-shell #analyticsView .soc-risk-gauge-value-wrap {
    width: 158px;
    height: 158px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-gauge-wrap {
    justify-self: center;
    align-self: start;
    margin-top: 4px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-content {
    grid-column: 2;
    align-content: start;
    padding-right: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-summary-subsection--drivers {
    padding-top: 2px;
  }
}
#analyticsView .soc-analytics-v2-dashboard {
  display: grid;
  gap: 20px;
}

#analyticsView .soc-analytics-v2-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  min-height: 72px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

#analyticsView .soc-analytics-v2-header-copy {
  display: grid;
  gap: 6px;
}

#analyticsView .soc-analytics-v2-header-copy h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
}

#analyticsView .soc-analytics-v2-header-copy .meta {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 16px;
  align-items: flex-end;
}

#analyticsView .soc-analytics-v2-toolbar-group {
  display: grid;
  gap: 8px;
}

#analyticsView .soc-analytics-v2-toolbar-group--actions {
  justify-self: end;
  min-width: max-content;
}

#analyticsView .soc-analytics-v2-toolbar-group--scope {
  min-width: 220px;
}

#analyticsView .soc-analytics-v2-site-picker {
  position: relative;
}

#analyticsView .soc-analytics-v2-site-picker-trigger {
  width: 100%;
  min-width: 220px;
  justify-content: center;
}

#analyticsView .soc-analytics-v2-site-picker-caret {
  display: none;
}

#analyticsView .soc-analytics-v2-site-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--ui-border-default, var(--soc-border)) 88%, transparent);
  border-radius: 14px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  box-shadow: var(--ui-shadow-2, 0 18px 34px rgba(15, 23, 42, 0.16));
}

#analyticsView .soc-analytics-v2-site-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-text-primary, var(--soc-text));
  text-align: left;
}

#analyticsView .soc-analytics-v2-site-picker-option:hover {
  background: color-mix(in srgb, var(--soc-primary) 8%, var(--ui-bg-surface-subtle, var(--soc-card-bg)));
}

#analyticsView .soc-analytics-v2-site-picker-option.is-selected {
  background: color-mix(in srgb, var(--soc-primary) 11%, var(--ui-bg-surface-subtle, var(--soc-card-bg)));
  color: var(--soc-primary);
  font-weight: 700;
}

#analyticsView .soc-analytics-v2-site-picker-option .name {
  min-width: 0;
}

#analyticsView .soc-analytics-v2-site-picker-option .check {
  color: currentColor;
  font-weight: 800;
}

#analyticsView .soc-analytics-v2-toolbar-label {
  font-size: var(--type-label-sm-size, 12px);
  line-height: var(--type-label-sm-line, 16px);
  font-weight: var(--type-label-sm-weight, 600);
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-toolbar-label--ghost {
  visibility: hidden;
  user-select: none;
}

#analyticsView .soc-analytics-v2-range-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#analyticsView .soc-analytics-v2-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#analyticsView .soc-analytics-v2-toolbar select,
#analyticsView .soc-analytics-v2-toolbar input[type="date"],
#analyticsView .soc-analytics-v2-toolbar .ds-btn {
  min-height: 40px;
  height: 40px;
}

#analyticsView .soc-analytics-v2-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

#analyticsView .soc-analytics-v2-content {
  display: block;
}

#analyticsView .soc-analytics-v2-shell {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(420px, 5fr);
  gap: 18px;
  align-items: start;
}

#analyticsView .soc-analytics-v2-main-column {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
  min-height: 0;
  height: auto;
  min-width: 0;
  align-content: start;
}

#analyticsView .soc-analytics-v2-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 5.6fr);
  gap: 14px;
  align-items: stretch;
}

#analyticsView .soc-analytics-v2-card {
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 18px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  box-shadow: var(--ui-shadow-1, var(--soc-shadow-soft));
  padding: 16px 18px;
  min-width: 0;
}

#analyticsView .soc-analytics-v2-card--risk {
  grid-column: auto;
}

#analyticsView .soc-analytics-v2-card--kpis {
  grid-column: auto;
}

#analyticsView .soc-analytics-v2-card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

#analyticsView .soc-analytics-v2-title-with-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#analyticsView .soc-analytics-v2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(15px, 0.98vw, 18px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-card--risk .soc-risk-info-trigger {
  font-size: clamp(15px, 0.98vw, 18px);
  line-height: 1;
}

#analyticsView .soc-analytics-v2-risk-body {
  display: grid;
  grid-template-columns: clamp(148px, 11vw, 184px) minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
  min-height: 228px;
}

#analyticsView .soc-analytics-v2-risk-gauge-wrap {
  position: relative;
  width: clamp(148px, 11vw, 184px);
  height: clamp(148px, 11vw, 184px);
  flex: 0 0 auto;
  align-self: center;
}

#analyticsView .soc-analytics-v2-risk-gauge,
#analyticsView .soc-analytics-v2-risk-value-wrap {
  width: 100%;
  height: 100%;
}

#analyticsView .soc-analytics-v2-risk-gauge {
  transform: rotate(-90deg);
  overflow: visible;
}

#analyticsView .soc-analytics-v2-risk-gauge-track,
#analyticsView .soc-analytics-v2-risk-gauge-arc {
  fill: none;
  stroke-width: 11;
  vector-effect: non-scaling-stroke;
}

#analyticsView .soc-analytics-v2-risk-gauge-track {
  stroke: color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 82%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

#analyticsView .soc-analytics-v2-risk-gauge-arc {
  stroke-linecap: round;
  transition: stroke-dashoffset 220ms ease, stroke 220ms ease;
}

#analyticsView .soc-analytics-v2-risk-value-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding-top: 4px;
}

#analyticsView .soc-analytics-v2-risk-value-wrap strong {
  position: static;
  font-size: clamp(34px, 2.7vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-risk-value-label {
  position: static;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  white-space: nowrap;
}

#analyticsView .soc-analytics-v2-risk-badge-row {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 26px;
}

#analyticsView .soc-analytics-v2-risk-badge-row .soc-risk-grade {
  min-width: 68px;
  justify-content: center;
}

#analyticsView .soc-analytics-v2-risk-summary {
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
}

#analyticsView .soc-analytics-v2-risk-summary-copy {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  max-width: 28ch;
}

#analyticsView .soc-analytics-v2-kpi-cluster {
  display: grid;
  gap: 12px;
}

@media (max-width: 1480px) {
  #analyticsView .soc-analytics-v2-risk-body {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 0;
    gap: 16px;
  }

  #analyticsView .soc-analytics-v2-risk-summary {
    width: 100%;
  }

  #analyticsView .soc-analytics-v2-risk-badge-row {
    padding-inline-start: 0;
  }

  #analyticsView .soc-analytics-v2-risk-summary-copy {
    max-width: none;
  }
}

#analyticsView .soc-analytics-v2-kpi-rack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#analyticsView .soc-analytics-v2-kpi-tile {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 88%, var(--ui-bg-canvas, var(--soc-bg)) 12%);
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 80%, transparent);
}

#analyticsView .soc-analytics-v2-kpi-tile .label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-kpi-tile .label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--analytics-kpi-tone, color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 92%, transparent));
  flex: 0 0 auto;
}

#analyticsView .soc-analytics-v2-kpi-tile strong {
  font-size: clamp(15px, 1.12vw, 19px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-kpi-tile[data-tone="primary"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-primary) 72%, white 28%); }
#analyticsView .soc-analytics-v2-kpi-tile[data-tone="warning"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-warning) 68%, white 32%); }
#analyticsView .soc-analytics-v2-kpi-tile[data-tone="caution"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-warning) 56%, var(--soc-danger) 44%); }
#analyticsView .soc-analytics-v2-kpi-tile[data-tone="danger"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-danger) 70%, white 30%); }
#analyticsView .soc-analytics-v2-kpi-tile[data-tone="safe"] { --analytics-kpi-tone: color-mix(in srgb, var(--soc-success) 72%, white 28%); }

#analyticsView .soc-analytics-v2-health-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 86%, transparent);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
}

#analyticsView .soc-analytics-v2-health-head {
  display: grid;
  gap: 6px;
}

#analyticsView .soc-analytics-v2-health-head .label {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-health-head strong {
  display: block;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: -0.01em;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-health-head .meta {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
}

#analyticsView .soc-analytics-v2-health-bar {
  display: flex;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soc-border) 66%, transparent);
}

#analyticsView .soc-analytics-v2-health-segment {
  display: block;
  height: 100%;
  min-width: 0;
  transition: width 180ms ease;
}

#analyticsView .soc-analytics-v2-health-segment.is-safe { background: color-mix(in srgb, var(--soc-success) 72%, white 28%); }
#analyticsView .soc-analytics-v2-health-segment.is-warning { background: color-mix(in srgb, var(--soc-warning) 72%, white 28%); }
#analyticsView .soc-analytics-v2-health-segment.is-danger { background: color-mix(in srgb, var(--soc-danger) 72%, white 28%); }

#analyticsView .soc-analytics-v2-health-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#analyticsView .soc-analytics-v2-health-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 84%, transparent);
  background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 90%, var(--ui-bg-canvas, var(--soc-bg)) 10%);
}

#analyticsView .soc-analytics-v2-health-item .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

#analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot { background: color-mix(in srgb, var(--soc-success) 72%, white 28%); }
#analyticsView .soc-analytics-v2-health-item[data-tone="warning"] .dot { background: color-mix(in srgb, var(--soc-warning) 72%, white 28%); }
#analyticsView .soc-analytics-v2-health-item[data-tone="danger"] .dot { background: color-mix(in srgb, var(--soc-danger) 72%, white 28%); }

#analyticsView .soc-analytics-v2-health-item .label {
  font-size: 11px;
  line-height: 15px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-health-item strong {
  font-size: 13px;
  line-height: 18px;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-help-btn {
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--soc-primary) 88%, var(--soc-text-sub));
  font-weight: 800;
  font-size: clamp(15px, 0.98vw, 18px) !important;
  line-height: 1;
  opacity: 1;
}

#analyticsView .soc-analytics-v2-help-btn:hover,
#analyticsView .soc-analytics-v2-help-btn:focus-visible {
  transform: none;
  box-shadow: none;
  background: transparent;
}

#analyticsView .soc-analytics-v2-help-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--soc-primary) 24%, transparent);
  outline-offset: 4px;
  border-radius: 999px;
}

#analyticsView .soc-analytics-v2-card--table,
#analyticsView .soc-analytics-v2-card--detail {
  min-height: 0;
}

#analyticsView .soc-analytics-v2-card--table {
  display: grid;
  grid-template-rows: auto auto auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  --analytics-comparison-body-max-height: auto;
}

#analyticsView .soc-analytics-v2-card--detail {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  min-width: 0;
  min-height: 0;
  height: var(--analytics-detail-panel-height, auto);
  max-height: var(--analytics-detail-panel-height, none);
  align-self: start;
  overflow: hidden;
}

#analyticsView .soc-analytics-v2-table-toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

#analyticsView .soc-analytics-v2-table-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(120px, 0.9fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: end;
}

#analyticsView .soc-analytics-v2-control-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#analyticsView .soc-analytics-v2-control-field label {
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-control-field input,
#analyticsView .soc-analytics-v2-control-field select {
  min-height: 36px;
  width: 100%;
}

#analyticsView .soc-analytics-v2-table-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, transparent);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--soc-primary) 1.5%, var(--ui-bg-surface-subtle, var(--soc-card-bg))), var(--ui-bg-surface, var(--soc-panel-bg)));
  overflow: hidden;
  min-height: 0;
  height: auto;
}

#analyticsView .soc-analytics-v2-table-head,
#analyticsView .soc-analytics-v2-site-row {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  grid-template-columns: minmax(138px, 1.08fr) minmax(82px, 0.68fr) minmax(68px, 0.54fr) minmax(86px, 0.68fr) minmax(104px, 0.82fr) minmax(76px, 0.58fr) minmax(92px, 0.72fr);
  gap: 4px;
  align-items: center;
  justify-items: center;
}

#analyticsView .soc-analytics-v2-table-head {
  padding: 11px 14px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
  background: color-mix(in srgb, var(--soc-primary) 3%, var(--ui-bg-surface, var(--soc-panel-bg)));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
}

#analyticsView .soc-analytics-v2-sort-head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
}

#analyticsView .soc-analytics-v2-sort-head::after {
  content: "↕";
  opacity: 0.38;
  font-size: 11px;
  line-height: 1;
}

#analyticsView .soc-analytics-v2-sort-head.is-active {
  color: var(--soc-primary);
}

#analyticsView .soc-analytics-v2-sort-head.is-active::after {
  opacity: 1;
}

#analyticsView .soc-analytics-v2-table-body {
  display: grid;
  align-content: start;
  min-height: 0;
  height: var(--analytics-comparison-body-max-height, auto);
  max-height: var(--analytics-comparison-body-max-height, none);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

#analyticsView .soc-analytics-v2-site-row {
  padding: 11px 10px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--soc-border) 72%, transparent);
  background: transparent;
  text-align: center;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

#analyticsView .soc-analytics-v2-site-row:last-child {
  border-bottom: 0;
}

#analyticsView .soc-analytics-v2-site-row:hover {
  background: color-mix(in srgb, var(--soc-primary) 4%, var(--ui-bg-surface, var(--soc-panel-bg)));
}

#analyticsView .soc-analytics-v2-site-row.is-selected {
  background: linear-gradient(135deg, color-mix(in srgb, var(--soc-primary) 7%, var(--ui-bg-surface, var(--soc-panel-bg))), var(--ui-bg-surface, var(--soc-panel-bg)) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soc-primary) 26%, transparent);
}

#analyticsView .soc-analytics-v2-site-cell {
  min-width: 0;
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--ui-text-primary, var(--soc-text));
  text-align: center;
}

#analyticsView .soc-analytics-v2-site-cell strong {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-site-cell small {
  display: block;
  margin-top: 2px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-table-head > *,
#analyticsView .soc-analytics-v2-site-row > * {
  min-width: 0;
  width: 100%;
}

#analyticsView .soc-analytics-v2-table-head > *,
#analyticsView .soc-analytics-v2-site-row > * {
  text-align: center;
}

#analyticsView .soc-analytics-v2-site-cell--name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#analyticsView .soc-analytics-v2-site-cell--name strong,
#analyticsView .soc-analytics-v2-site-cell--name small {
  width: auto;
  text-align: center;
}

#analyticsView .soc-analytics-v2-site-cell--score {
  font-weight: 800;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-site-cell--trend {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

#analyticsView .soc-analytics-v2-site-cell--trend[data-tone="danger"] {
  color: var(--soc-danger);
  font-weight: 700;
}

#analyticsView .soc-analytics-v2-site-cell--trend[data-tone="safe"] {
  color: var(--soc-success);
  font-weight: 700;
}

#analyticsView .soc-analytics-v2-site-cell--trend[data-tone="muted"] {
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-site-cell--state .soc-risk-grade {
  min-width: 60px;
  padding: 4px 10px;
  justify-content: center;
}

#analyticsView .soc-analytics-v2-site-cell--state {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-right: 0;
}

#analyticsView .soc-analytics-v2-detail-score {
  font-size: clamp(22px, 1.75vw, 30px);
  line-height: 1;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-detail-header-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

#analyticsView .soc-analytics-v2-detail-header-chip {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  background: color-mix(in srgb, var(--ui-bg-surface, var(--soc-panel-bg)) 90%, var(--ui-bg-canvas, var(--soc-bg)) 10%);
}

#analyticsView .soc-analytics-v2-detail-header-chip .label {
  font-size: 10px;
  line-height: 14px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-detail-header-chip strong {
  font-size: 12px;
  line-height: 16px;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, transparent);
}

#analyticsView .soc-analytics-v2-detail-tabs button {
  min-height: 34px;
  padding: 0 0 8px;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

#analyticsView .soc-analytics-v2-detail-tabs button.is-active {
  border-bottom-color: var(--soc-primary);
  color: var(--soc-primary);
}

#analyticsView .soc-analytics-v2-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

#analyticsView .soc-analytics-v2-detail-stat {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

#analyticsView .soc-analytics-v2-detail-stat .label {
  font-size: 10px;
  line-height: 14px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-detail-stat strong {
  font-size: 12px;
  line-height: 16px;
  color: var(--ui-text-primary, var(--soc-text));
}

#analyticsView .soc-analytics-v2-trend-value[data-tone="danger"] {
  color: var(--soc-danger);
}

#analyticsView .soc-analytics-v2-trend-value[data-tone="safe"] {
  color: var(--soc-success);
}

#analyticsView .soc-analytics-v2-trend-value[data-tone="muted"] {
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#analyticsView .soc-analytics-v2-detail-body {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

body.soc-desktop-shell #analyticsView #analyticsStoreComparisonList {
  min-height: 0;
}

#analyticsView .soc-analytics-overview-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}

#analyticsView .soc-analytics-overview-row strong {
  flex: 0 0 auto;
}

#analyticsView .soc-analytics-overview-row .meta {
  margin-top: 0;
  flex: 1 1 240px;
}

@media (max-height: 980px) and (min-width: 1361px) {
  #analyticsView .soc-analytics-v2-main-column {
    min-height: 0;
    height: auto;
  }

  #analyticsView .soc-analytics-v2-card--detail {
    min-height: 0;
  }

  #analyticsView .soc-analytics-v2-card {
    padding: 14px 16px;
  }

  #analyticsView .soc-analytics-v2-risk-body {
    min-height: 220px;
    gap: 12px;
  }

  #analyticsView .soc-analytics-v2-kicker {
    font-size: clamp(16px, 1.02vw, 18px);
  }

  #analyticsView .soc-analytics-v2-card--risk .soc-risk-info-trigger {
    font-size: clamp(16px, 1.02vw, 18px);
  }

  #analyticsView .soc-analytics-v2-help-btn {
    font-size: clamp(16px, 1.02vw, 18px) !important;
  }

  #analyticsView .soc-analytics-v2-kpi-tile {
    padding: 9px 9px;
  }
}

@media (max-height: 900px) and (min-width: 1361px) {
  #analyticsView .soc-analytics-v2-main-column {
    min-height: 0;
    height: auto;
  }

  #analyticsView .soc-analytics-v2-card--detail {
    min-height: 0;
  }

  #analyticsView .soc-analytics-v2-card {
    padding: 13px 14px;
  }

  #analyticsView .soc-analytics-v2-kicker {
    font-size: clamp(15px, 0.96vw, 17px);
  }

  #analyticsView .soc-analytics-v2-card--risk .soc-risk-info-trigger {
    font-size: clamp(15px, 0.96vw, 17px);
  }

  #analyticsView .soc-analytics-v2-help-btn {
    font-size: clamp(15px, 0.96vw, 17px) !important;
  }

  #analyticsView .soc-analytics-v2-risk-body {
    min-height: 202px;
  }

  #analyticsView .soc-analytics-v2-risk-gauge-wrap {
    width: clamp(152px, 10.8vw, 182px);
    height: clamp(152px, 10.8vw, 182px);
  }

  #analyticsView .soc-analytics-v2-risk-value-wrap strong {
    font-size: clamp(38px, 2.9vw, 52px);
  }

  #analyticsView .soc-analytics-v2-kpi-tile strong {
    font-size: clamp(16px, 1.22vw, 20px);
  }

  #analyticsView .soc-analytics-v2-detail-score {
    font-size: clamp(20px, 1.45vw, 24px);
  }
}

#analyticsView .soc-analytics-v2-detail-empty {
  padding: 14px 16px;
  border: 1px dashed var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  line-height: 18px;
}

#analyticsView .soc-analytics-site-list-empty {
  padding: 18px 16px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 13px;
  line-height: 18px;
}

@media (max-width: 1360px) {
  #analyticsView .soc-analytics-v2-header {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-analytics-v2-toolbar {
    justify-content: flex-start;
  }

  #analyticsView .soc-analytics-v2-shell {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-analytics-v2-main-column {
    height: auto;
    min-height: 0;
  }

  #analyticsView .soc-analytics-v2-hero-row {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-analytics-v2-card--risk,
  #analyticsView .soc-analytics-v2-card--kpis {
    grid-column: auto;
  }

  #analyticsView .soc-analytics-v2-card--table,
  #analyticsView .soc-analytics-v2-card--detail {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  #analyticsView .soc-analytics-v2-table-body {
    height: auto;
    max-height: none;
  }

  #analyticsView .soc-analytics-v2-risk-body {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  #analyticsView .soc-analytics-v2-risk-summary {
    width: 100%;
  }

  #analyticsView .soc-analytics-v2-health-legend,
  #analyticsView .soc-analytics-v2-detail-header-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  #analyticsView .soc-analytics-v2-risk-body {
    min-height: 0;
  }

  #analyticsView .soc-analytics-v2-risk-meta {
    width: 100%;
  }

  #analyticsView .soc-analytics-v2-kpi-rack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #analyticsView .soc-analytics-v2-health-legend,
  #analyticsView .soc-analytics-v2-detail-meta {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-analytics-v2-table-controls {
    grid-template-columns: 1fr;
  }

  #analyticsView .soc-analytics-v2-table-head,
  #analyticsView .soc-analytics-v2-site-row {
    grid-template-columns: minmax(140px, 1.4fr) repeat(6, minmax(72px, 1fr));
  }

  #analyticsView .soc-analytics-v2-detail-header-summary {
    grid-template-columns: 1fr;
  }
}

#googleSheetsPanel .soc-apple-weekly-form-subsection {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border-subtle, var(--soc-border));
}

#googleSheetsPanel .soc-apple-weekly-form-section-head.compact {
  gap: 4px;
}

#googleSheetsPanel .soc-apple-weekly-form-section-head.compact h5 {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ui-text-primary, var(--soc-text));
}

#googleSheetsPanel .soc-apple-weekly-inline-list-value {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 10px;
  background: var(--ui-bg-surface, var(--soc-panel-bg));
  color: var(--ui-text-primary, var(--soc-text));
}


/* ===== Support roster workspace refresh ===== */
#opsSupportPanel {
  --ops-support-ink: #0f172a;
  --ops-support-subtle: #475569;
  --ops-support-border: #cbd5e1;
  --ops-support-border-strong: #94a3b8;
  --ops-support-primary: #f97316;
  --ops-support-primary-strong: #ea580c;
  --ops-support-primary-soft: rgba(249, 115, 22, 0.12);
  --ops-support-primary-surface: #fff4eb;
  --ops-support-pending: #ea580c;
  --ops-support-pending-soft: #fff5eb;
  --ops-support-approved: #15803d;
  --ops-support-approved-soft: #f3fff7;
  --ops-support-danger: #dc2626;
  --ops-support-danger-soft: #fff4f4;
  --ops-support-cancelled: #475569;
  --ops-support-cancelled-soft: #ffffff;
}

#opsSupportPanel .soc-ops-support-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.98fr);
  align-items: start;
  gap: 16px 18px;
  padding: 16px 18px;
  border: 1px solid #dbe5ef;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#opsSupportPanel .soc-ops-support-toolbar-left,
#opsSupportPanel .soc-ops-support-toolbar-right {
  align-items: start;
  gap: 12px;
}

#opsSupportPanel .soc-ops-support-toolbar-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  justify-self: stretch;
  width: 100%;
}

#opsSupportPanel .soc-ops-support-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  width: 100%;
}

#opsSupportPanel .soc-ops-support-filter-field {
  display: grid;
  grid-template-rows: auto 40px;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

#opsSupportPanel .soc-ops-support-filter-label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ops-support-subtle);
  transform: translateY(-6px);
}

#opsSupportPanel .soc-ops-support-compact-control {
  min-width: 0;
  height: 40px;
  border-color: #c9d6e2;
  background: #ffffff;
  color: var(--ops-support-ink);
  font-size: 13px;
  font-weight: 600;
}

#opsSupportPanel .soc-ops-support-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: end;
  margin-top: 0;
}

#opsSupportPanel .soc-ops-support-toolbar-actions .ds-btn {
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

#opsSupportPanel .soc-ops-support-export-top-btn {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.08);
  color: var(--ops-support-primary);
}

#opsSupportPanel .soc-ops-support-export-top-btn:hover,
#opsSupportPanel .soc-ops-support-export-top-btn:focus-visible {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.14);
  color: var(--ops-support-primary-strong);
}

#opsSupportPanel .ops-support-month-nav {
  gap: 8px;
}

#opsSupportPanel .ops-support-month-nav .month-label,
#opsSupportPanel .ops-support-month-nav .month-arrow {
  border-color: #c9d6e2;
  background: #ffffff;
  color: var(--ops-support-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#opsSupportPanel .ops-support-month-nav .month-label {
  padding: 0 14px;
  font-size: 15px;
  font-weight: 700;
}

#opsSupportPanel .soc-ops-support-view-toggle {
  padding: 3px;
  border-color: #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

#opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'] {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  color: #52637a;
  font-weight: 700;
}

#opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].is-active {
  border-color: rgba(249, 115, 22, 0.28);
  background: var(--ops-support-primary);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.22);
}

#opsSupportPanel .soc-ops-support-support-strip {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: end;
  gap: 14px 18px;
}

#opsSupportPanel .soc-ops-support-toolbar-stats {
  gap: 10px;
}

#opsSupportPanel .soc-ops-support-toolbar-stat {
  position: relative;
  min-width: 104px;
  gap: 4px;
  padding: 11px 13px 11px 16px;
  border: 1px solid #d8e1eb;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

#opsSupportPanel .soc-ops-support-toolbar-stat::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 4px;
  border-radius: 999px;
  background: var(--ops-support-stat-accent, #94a3b8);
}

#opsSupportPanel .soc-ops-support-toolbar-stat.is-request {
  --ops-support-stat-accent: var(--ops-support-primary);
}

#opsSupportPanel .soc-ops-support-toolbar-stat.is-people {
  --ops-support-stat-accent: #0f172a;
}

#opsSupportPanel .soc-ops-support-toolbar-stat.is-pending {
  --ops-support-stat-accent: var(--ops-support-pending);
}

#opsSupportPanel .soc-ops-support-toolbar-stat.is-approved {
  --ops-support-stat-accent: var(--ops-support-approved);
}

#opsSupportPanel .soc-ops-support-toolbar-stat-label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ops-support-subtle);
}

#opsSupportPanel .soc-ops-support-toolbar-stat > strong {
  font-size: 18px;
  line-height: 22px;
  color: var(--ops-support-ink);
}

#opsSupportPanel .soc-ops-support-toolbar-meta {
  text-align: right;
  font-size: 12px;
  line-height: 17px;
  color: var(--ops-support-subtle);
}

#opsSupportPanel .soc-ops-support-layout {
  gap: 16px;
}

#opsSupportPanel .soc-ops-support-main,
#opsSupportPanel .soc-ops-support-sheet {
  border-color: #dbe5ef;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#opsSupportPanel .soc-ops-support-main {
  gap: 12px;
  padding: 15px;
}

#opsSupportPanel .soc-ops-support-calendar-weekdays {
  gap: 10px;
  align-items: stretch;
}

#opsSupportPanel .soc-ops-support-calendar-weekdays > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: #52637a;
}

#opsSupportPanel .soc-ops-support-calendar-grid {
  gap: 8px;
}

#opsSupportPanel .soc-ops-support-calendar-cell {
  min-height: 136px;
  padding: 10px 9px;
  gap: 8px;
  border: 1px solid #d7e0ea;
  border-radius: 14px;
  background: #ffffff;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

#opsSupportPanel .soc-ops-support-calendar-cell:hover {
  border-color: #bfd1e5;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

#opsSupportPanel .soc-ops-support-calendar-cell.is-selected {
  border-color: rgba(249, 115, 22, 0.58);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
  background: #ffffff;
}

#opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month {
  opacity: 0.72;
  background: #ffffff;
}

#opsSupportPanel .soc-ops-support-calendar-cell-head > strong {
  font-size: 15px;
  line-height: 18px;
  font-weight: 800;
  color: var(--ops-support-ink);
}

#opsSupportPanel .soc-ops-support-calendar-cell-head > span {
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid #d8e1eb;
  background: #ffffff;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  color: #64748b;
}

#opsSupportPanel .soc-ops-support-calendar-cell-body {
  gap: 6px;
}

#opsSupportPanel .soc-ops-support-calendar-line,
#opsSupportPanel .soc-ops-support-calendar-more {
  border: 1px solid var(--ops-support-line-border, #d7e0ea);
  border-radius: 12px;
  background: var(--ops-support-line-bg, #ffffff);
  color: var(--ops-support-line-color, var(--ops-support-ink));
  padding: 7px 8px;
}

#opsSupportPanel .soc-ops-support-calendar-line {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  box-shadow: inset 3px 0 0 var(--ops-support-line-accent, #94a3b8);
}

#opsSupportPanel .soc-ops-support-calendar-line:hover {
  border-color: rgba(249, 115, 22, 0.28);
  box-shadow: inset 3px 0 0 var(--ops-support-line-accent, #94a3b8), 0 6px 14px rgba(15, 23, 42, 0.06);
}

#opsSupportPanel .soc-ops-support-calendar-line.is-selected {
  border-color: rgba(249, 115, 22, 0.52);
  box-shadow: inset 3px 0 0 var(--ops-support-line-accent, #94a3b8), 0 0 0 2px rgba(249, 115, 22, 0.14);
}

#opsSupportPanel :is(.soc-ops-support-calendar-line, .soc-ops-support-list-row).ops-support-focus,
#opsSupportPanel :is(.soc-ops-support-calendar-line, .soc-ops-support-list-row).ops-support-highlight-pulse {
  border-color: rgba(249, 115, 22, 0.56);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.16), 0 10px 24px rgba(15, 23, 42, 0.08);
}

@keyframes socOpsSupportFocusPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.24), 0 10px 24px rgba(15, 23, 42, 0.08);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(249, 115, 22, 0), 0 14px 28px rgba(15, 23, 42, 0.12);
  }
  100% {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }
}

#opsSupportPanel :is(.soc-ops-support-calendar-line, .soc-ops-support-list-row).ops-support-highlight-pulse {
  animation: socOpsSupportFocusPulse 1.6s ease-out 1;
}

#opsSupportPanel .soc-ops-support-calendar-line-main {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

#opsSupportPanel .soc-ops-support-calendar-line-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#opsSupportPanel .soc-ops-support-calendar-line-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

#opsSupportPanel .soc-ops-support-calendar-line-top-side {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

#opsSupportPanel .soc-ops-support-calendar-line-label {
  font-size: 12px;
  line-height: 1.28;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#opsSupportPanel .soc-ops-support-calendar-line-meta-row {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
}

#opsSupportPanel .soc-ops-support-calendar-line-meta {
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #64748b;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#opsSupportPanel .soc-ops-support-calendar-line-count {
  font-size: 10px;
  line-height: 12px;
  font-weight: 800;
  color: var(--ops-support-ink);
  white-space: nowrap;
}

#opsSupportPanel .soc-ops-support-calendar-line-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

#opsSupportPanel .soc-ops-support-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  align-self: center;
  margin-top: 0;
  background: #64748b;
}

#opsSupportPanel .soc-ops-support-status-dot.state-approved {
  background: var(--ops-support-approved);
}

#opsSupportPanel .soc-ops-support-status-dot.state-pending {
  background: var(--ops-support-pending);
}

#opsSupportPanel .soc-ops-support-status-dot.state-unavailable,
#opsSupportPanel .soc-ops-support-status-dot.state-rejected {
  background: var(--ops-support-danger);
}

#opsSupportPanel .soc-ops-support-status-dot.state-cancelled {
  background: var(--ops-support-cancelled);
}

#opsSupportPanel .cal-line.state-pending {
  --ops-support-line-accent: var(--ops-support-pending);
  --ops-support-line-border: rgba(217, 119, 6, 0.34);
  --ops-support-line-bg: #ffffff;
  --ops-support-line-color: #9a3412;
}

#opsSupportPanel .cal-line.state-approved {
  --ops-support-line-accent: var(--ops-support-approved);
  --ops-support-line-border: rgba(21, 128, 61, 0.3);
  --ops-support-line-bg: #ffffff;
  --ops-support-line-color: #166534;
}

#opsSupportPanel .cal-line.state-unavailable,
#opsSupportPanel .cal-line.state-rejected {
  --ops-support-line-accent: var(--ops-support-danger);
  --ops-support-line-border: rgba(220, 38, 38, 0.34);
  --ops-support-line-bg: #ffffff;
  --ops-support-line-color: #b91c1c;
}

#opsSupportPanel .cal-line.state-cancelled {
  --ops-support-line-accent: var(--ops-support-cancelled);
  --ops-support-line-border: rgba(71, 85, 105, 0.28);
  --ops-support-line-bg: #ffffff;
  --ops-support-line-color: #475569;
}

#opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned {
  --ops-support-line-accent: var(--ops-support-danger);
  --ops-support-line-border: rgba(220, 38, 38, 0.42);
  --ops-support-line-bg: #ffffff;
  --ops-support-line-color: #991b1b;
}

#opsSupportPanel .soc-ops-support-calendar-line.is-over-assigned:hover {
  box-shadow: inset 3px 0 0 var(--ops-support-danger), 0 8px 16px rgba(220, 38, 38, 0.12);
}

#opsSupportPanel .soc-ops-support-calendar-more {
  border-style: dashed;
  text-align: center;
  font-weight: 800;
  color: #334155;
  background: #ffffff;
}

#opsSupportPanel .soc-ops-support-calendar-more:hover,
#opsSupportPanel .soc-ops-support-calendar-more:focus-visible {
  border-color: rgba(249, 115, 22, 0.32);
  color: var(--ops-support-primary);
  outline: none;
}

#opsSupportPanel .support-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}

#opsSupportPanel .support-status-inline.state-approved {
  border-color: rgba(21, 128, 61, 0.24);
  color: #166534;
}

#opsSupportPanel .support-status-inline.state-pending {
  border-color: rgba(217, 119, 6, 0.26);
  color: #9a3412;
}

#opsSupportPanel .support-status-inline.state-unavailable,
#opsSupportPanel .support-status-inline.state-rejected {
  border-color: rgba(220, 38, 38, 0.26);
  color: #b91c1c;
}

#opsSupportPanel .support-status-inline.state-cancelled {
  border-color: rgba(71, 85, 105, 0.22);
  color: #475569;
}

#opsSupportPanel .support-status-chip {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border-color: rgba(148, 163, 184, 0.28);
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}

#opsSupportPanel .support-status-chip.state-pending {
  background: #ffffff;
  border-color: rgba(217, 119, 6, 0.28);
  color: #9a3412;
}

#opsSupportPanel .support-status-chip.state-approved {
  background: #ffffff;
  border-color: rgba(21, 128, 61, 0.26);
  color: #166534;
}

#opsSupportPanel .support-status-chip.state-unavailable,
#opsSupportPanel .support-status-chip.state-rejected {
  background: #ffffff;
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}

#opsSupportPanel .support-status-chip.state-cancelled {
  background: #ffffff;
  border-color: rgba(71, 85, 105, 0.24);
  color: #475569;
}

#opsSupportPanel .soc-ops-support-sheet {
  padding: 16px 18px;
  min-height: 380px;
}

#opsSupportPanel .soc-ops-support-sheet-head {
  padding-bottom: 12px;
}

#opsSupportPanel .soc-ops-support-sheet-head-copy > h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  color: var(--ops-support-ink);
}

#opsSupportPanel .soc-ops-support-status-action {
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(249, 115, 22, 0.08);
  color: var(--ops-support-primary);
}

#opsSupportPanel .soc-ops-support-status-action:hover,
#opsSupportPanel .soc-ops-support-status-action:focus-visible {
  border-color: rgba(249, 115, 22, 0.38);
  background: rgba(249, 115, 22, 0.14);
  color: var(--ops-support-primary-strong);
}

#opsSupportPanel .soc-ops-support-open-ticket-btn {
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
  color: #0f172a;
}

#opsSupportPanel .soc-ops-support-open-ticket-btn:hover,
#opsSupportPanel .soc-ops-support-open-ticket-btn:focus-visible {
  border-color: rgba(249, 115, 22, 0.28);
  color: var(--ops-support-primary);
  background: var(--ops-support-primary-surface);
}

#opsSupportPanel .soc-ops-support-detail-summary-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 96px;
  gap: 8px;
  padding: 14px;
  border: 2px solid #cbd5e1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}

#opsSupportPanel .soc-ops-support-detail-summary-metric.is-requested {
  border-color: #f97316;
}

#opsSupportPanel .soc-ops-support-detail-summary-metric.is-self-staff {
  border-color: #94a3b8;
}

#opsSupportPanel .soc-ops-support-detail-summary-label {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#opsSupportPanel .soc-ops-support-detail-summary-metric strong {
  font-size: 18px;
  line-height: 22px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
}

#opsSupportPanel .soc-ops-support-detail-summary-purpose {
  border: 2px solid #cbd5e1;
  border-radius: 16px;
  background: #ffffff;
  padding: 14px 15px;
  box-shadow: none;
}

#opsSupportPanel .soc-ops-support-summary-empty {
  min-height: 164px;
  gap: 12px;
  border-style: solid;
  border-color: #dbe5ef;
  border-radius: 16px;
  background: #ffffff;
  padding: 18px;
}

#opsSupportPanel .soc-ops-support-summary-empty.is-inline {
  min-height: 112px;
  background: #ffffff;
  border-color: #d8e1eb;
}

#opsSupportPanel .soc-ops-support-summary-empty-dashboard {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  justify-items: stretch;
  min-height: 100%;
}

#opsSupportPanel .soc-ops-support-empty-hero {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dbe5ef;
}

#opsSupportPanel .soc-ops-support-empty-kicker {
  font-size: 11px;
  line-height: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ops-support-primary);
}

#opsSupportPanel .soc-ops-support-empty-hero > strong {
  font-size: 26px;
  line-height: 30px;
  font-weight: 800;
  color: var(--ops-support-ink);
}

#opsSupportPanel .soc-ops-support-empty-hero > .help {
  margin: 0;
  color: var(--ops-support-subtle);
}

#opsSupportPanel .soc-ops-support-empty-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  width: 100%;
  min-height: 308px;
  align-self: stretch;
}

#opsSupportPanel .soc-ops-support-empty-metric {
  display: grid;
  align-content: space-between;
  min-height: 0;
  gap: 8px;
  padding: 14px;
  width: 100%;
  border: 4px solid #cbd5e1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}

#opsSupportPanel .soc-ops-support-empty-metric.is-pending {
  border-color: #d97706;
}

#opsSupportPanel .soc-ops-support-empty-metric.is-approved {
  border-color: #16a34a;
}

#opsSupportPanel .soc-ops-support-empty-metric.is-today {
  border-color: #f97316;
}

#opsSupportPanel .soc-ops-support-empty-metric.is-alert {
  border-color: #dc2626;
}

#opsSupportPanel .soc-ops-support-empty-metric-label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ops-support-subtle);
}

#opsSupportPanel .soc-ops-support-empty-metric strong {
  font-size: 18px;
  line-height: 22px;
  font-weight: 800;
  color: var(--ops-support-ink);
}

#opsSupportPanel .soc-ops-support-day-head {
  background: #ffffff;
}

#opsSupportPanel .soc-ops-support-day-table th,
#opsSupportPanel .soc-ops-support-summary-day-table th,
#opsSupportPanel .soc-ops-support-confirmed-roster-table th {
  background: #f8fafc;
  color: #52637a;
}

#opsSupportPanel .soc-ops-support-day-table th:nth-child(3),
#opsSupportPanel .soc-ops-support-day-table td:nth-child(3),
#opsSupportPanel .soc-ops-support-summary-day-table th:nth-child(2),
#opsSupportPanel .soc-ops-support-summary-day-table td:nth-child(2) {
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.32;
}

#opsSupportPanel .soc-ops-support-day-table th:nth-child(4),
#opsSupportPanel .soc-ops-support-day-table td:nth-child(4) {
  width: 114px;
  min-width: 114px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#opsSupportPanel .soc-ops-support-day-summary > div,
#opsSupportPanel .soc-ops-support-summary-hero,
#opsSupportPanel .soc-ops-support-detail-timeline-body,
#opsSupportPanel .soc-ops-support-confirmed-block,
#opsSupportPanel .export-section {
  border-color: #d8e1eb;
  background: #ffffff;
  box-shadow: none;
}

#opsSupportPanel .soc-ops-support-confirmed-block.is-disabled,
#opsSupportPanel .soc-ops-support-confirmed-disabled {
  border-color: #d8e1eb;
  background: #ffffff;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-created .soc-ops-support-detail-timeline-dot {
  background: var(--ops-support-primary-strong);
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-status .soc-ops-support-detail-timeline-dot {
  background: #0f172a;
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-worker .soc-ops-support-detail-timeline-dot {
  background: var(--ops-support-approved);
}

#opsSupportPanel .soc-ops-support-detail-timeline-item.is-note .soc-ops-support-detail-timeline-dot {
  background: #64748b;
}

#opsSupportPanel .worker-row.is-assigned,
#opsSupportPanel .worker-row.is-over-assigned,
#opsSupportPanel .worker-row.is-assigned input[type="text"][readonly],
#opsSupportPanel .worker-row.is-over-assigned input[type="text"][readonly] {
  background: #ffffff;
}

#opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) {
  border-color: color-mix(in srgb, var(--soc-success, #16a34a) 52%, #cbd5e1);
  background: color-mix(in srgb, var(--soc-success, #16a34a) 12%, #ffffff);
}

#opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) input[type="text"][readonly] {
  border-color: color-mix(in srgb, var(--soc-success, #16a34a) 30%, #d8e1eb);
  background: color-mix(in srgb, var(--soc-success, #16a34a) 10%, #ffffff);
  color: color-mix(in srgb, var(--soc-success, #166534) 72%, var(--ui-text-primary, var(--soc-text)));
}

[data-theme="dark"] #opsSupportPanel {
  --ops-support-ink: var(--ui-text-primary, var(--soc-text));
  --ops-support-subtle: var(--ui-text-secondary, var(--soc-text-sub));
  --ops-support-border: var(--ui-border-subtle, var(--soc-border));
  --ops-support-border-strong: var(--ui-border-strong, var(--soc-border-strong));
  --ops-support-primary: var(--soc-primary);
  --ops-support-primary-strong: #ff9d57;
  --ops-support-primary-soft: color-mix(in srgb, var(--soc-primary) 18%, transparent);
  --ops-support-primary-surface: color-mix(in srgb, var(--soc-primary) 10%, var(--soc-card-bg));
  --ops-support-pending: #ff9d57;
  --ops-support-pending-soft: color-mix(in srgb, #ff9d57 14%, var(--soc-card-bg));
  --ops-support-approved: var(--soc-success);
  --ops-support-approved-soft: color-mix(in srgb, var(--soc-success) 14%, var(--soc-card-bg));
  --ops-support-danger: var(--soc-danger);
  --ops-support-danger-soft: color-mix(in srgb, var(--soc-danger) 14%, var(--soc-card-bg));
  --ops-support-cancelled: #94a3b8;
  --ops-support-cancelled-soft: color-mix(in srgb, #94a3b8 14%, var(--soc-card-bg));
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-toolbar,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-main,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-sheet,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-toolbar-stat,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-detail-summary-metric,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-detail-summary-purpose,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-summary-empty,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-day-summary > div,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-summary-hero,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-detail-timeline-body,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-confirmed-block,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-confirmed-disabled,
[data-theme="dark"] #opsSupportPanel .export-section {
  border-color: var(--ops-support-border);
  background: var(--soc-card-bg);
  box-shadow: var(--soc-shadow-soft);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-hero {
  border-bottom-color: var(--ops-support-border);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-toolbar-meta,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line-meta,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-hero > .help,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-day-head > span,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-day-table th,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-summary-day-table th,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-confirmed-roster-table th {
  color: var(--ops-support-subtle);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-compact-control,
[data-theme="dark"] #opsSupportPanel .ops-support-month-nav .month-label,
[data-theme="dark"] #opsSupportPanel .ops-support-month-nav .month-arrow,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-view-toggle,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-open-ticket-btn,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell-head > span,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more,
[data-theme="dark"] #opsSupportPanel .support-status-inline,
[data-theme="dark"] #opsSupportPanel .support-status-chip {
  border-color: var(--ops-support-border);
  background: var(--ui-bg-surface-2, var(--soc-soft-bg));
  color: var(--ops-support-ink);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-toolbar {
  background: var(--soc-panel-bg);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-main,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-sheet {
  background: var(--soc-panel-bg);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-weekdays > span,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell-head > span,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-day-head,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-day-table th,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-summary-day-table th,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-confirmed-roster-table th {
  background: var(--ui-bg-surface-muted, var(--soc-soft-bg));
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell {
  border-color: var(--ops-support-border);
  background: var(--soc-card-bg);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell:hover {
  border-color: color-mix(in srgb, var(--soc-primary) 34%, var(--ops-support-border));
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.3);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell.is-selected {
  border-color: color-mix(in srgb, var(--soc-primary) 58%, var(--ops-support-border));
  background: color-mix(in srgb, var(--soc-primary) 9%, var(--soc-card-bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--soc-primary) 18%, transparent);
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month {
  background: color-mix(in srgb, var(--ui-bg-surface-2, var(--soc-soft-bg)) 88%, var(--soc-card-bg));
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-line,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more {
  border-color: var(--ops-support-line-border, var(--ops-support-border));
  background: var(--ops-support-line-bg, var(--ui-bg-surface-2, var(--soc-soft-bg)));
  color: var(--ops-support-line-color, var(--ops-support-ink));
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more {
  color: var(--ops-support-subtle);
}

[data-theme="dark"] #opsSupportPanel .cal-line.state-pending {
  --ops-support-line-accent: var(--ops-support-pending);
  --ops-support-line-border: color-mix(in srgb, var(--ops-support-pending) 42%, var(--ops-support-border));
  --ops-support-line-bg: color-mix(in srgb, var(--ops-support-pending) 12%, var(--soc-card-bg));
  --ops-support-line-color: #ffd6bd;
}

[data-theme="dark"] #opsSupportPanel .cal-line.state-approved {
  --ops-support-line-accent: var(--ops-support-approved);
  --ops-support-line-border: color-mix(in srgb, var(--ops-support-approved) 42%, var(--ops-support-border));
  --ops-support-line-bg: color-mix(in srgb, var(--ops-support-approved) 12%, var(--soc-card-bg));
  --ops-support-line-color: #d7ffe5;
}

[data-theme="dark"] #opsSupportPanel .cal-line.state-unavailable,
[data-theme="dark"] #opsSupportPanel .cal-line.state-rejected {
  --ops-support-line-accent: var(--ops-support-danger);
  --ops-support-line-border: color-mix(in srgb, var(--ops-support-danger) 44%, var(--ops-support-border));
  --ops-support-line-bg: color-mix(in srgb, var(--ops-support-danger) 12%, var(--soc-card-bg));
  --ops-support-line-color: #ffd0d0;
}

[data-theme="dark"] #opsSupportPanel .cal-line.state-cancelled {
  --ops-support-line-accent: var(--ops-support-cancelled);
  --ops-support-line-border: color-mix(in srgb, var(--ops-support-cancelled) 38%, var(--ops-support-border));
  --ops-support-line-bg: color-mix(in srgb, var(--ops-support-cancelled) 12%, var(--soc-card-bg));
  --ops-support-line-color: #d5dfef;
}

[data-theme="dark"] #opsSupportPanel .support-status-inline.state-pending,
[data-theme="dark"] #opsSupportPanel .support-status-chip.state-pending {
  background: color-mix(in srgb, var(--ops-support-pending) 11%, var(--ui-bg-surface-2, var(--soc-soft-bg)));
  border-color: color-mix(in srgb, var(--ops-support-pending) 42%, var(--ops-support-border));
  color: #ffd6bd;
}

[data-theme="dark"] #opsSupportPanel .support-status-inline.state-approved,
[data-theme="dark"] #opsSupportPanel .support-status-chip.state-approved {
  background: color-mix(in srgb, var(--ops-support-approved) 11%, var(--ui-bg-surface-2, var(--soc-soft-bg)));
  border-color: color-mix(in srgb, var(--ops-support-approved) 42%, var(--ops-support-border));
  color: #d7ffe5;
}

[data-theme="dark"] #opsSupportPanel .support-status-inline.state-unavailable,
[data-theme="dark"] #opsSupportPanel .support-status-inline.state-rejected,
[data-theme="dark"] #opsSupportPanel .support-status-chip.state-unavailable,
[data-theme="dark"] #opsSupportPanel .support-status-chip.state-rejected {
  background: color-mix(in srgb, var(--ops-support-danger) 11%, var(--ui-bg-surface-2, var(--soc-soft-bg)));
  border-color: color-mix(in srgb, var(--ops-support-danger) 42%, var(--ops-support-border));
  color: #ffd0d0;
}

[data-theme="dark"] #opsSupportPanel .support-status-inline.state-cancelled,
[data-theme="dark"] #opsSupportPanel .support-status-chip.state-cancelled {
  background: color-mix(in srgb, var(--ops-support-cancelled) 10%, var(--ui-bg-surface-2, var(--soc-soft-bg)));
  border-color: color-mix(in srgb, var(--ops-support-cancelled) 38%, var(--ops-support-border));
  color: #d5dfef;
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-status-action {
  border-color: color-mix(in srgb, var(--soc-primary) 30%, var(--ops-support-border));
  background: color-mix(in srgb, var(--soc-primary) 10%, var(--ui-bg-surface-2, var(--soc-soft-bg)));
  color: #ffd4b8;
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-status-action:hover,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-status-action:focus-visible,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-open-ticket-btn:hover,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-open-ticket-btn:focus-visible,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more:hover,
[data-theme="dark"] #opsSupportPanel .soc-ops-support-calendar-more:focus-visible {
  background: color-mix(in srgb, var(--soc-primary) 14%, var(--ui-bg-surface-2, var(--soc-soft-bg)));
  border-color: color-mix(in srgb, var(--soc-primary) 38%, var(--ops-support-border));
  color: #ffe5d3;
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric.is-pending {
  border-color: color-mix(in srgb, var(--ops-support-pending) 54%, var(--ops-support-border));
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric.is-approved {
  border-color: color-mix(in srgb, var(--ops-support-approved) 54%, var(--ops-support-border));
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric.is-today {
  border-color: color-mix(in srgb, var(--soc-primary) 54%, var(--ops-support-border));
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-empty-metric.is-alert {
  border-color: color-mix(in srgb, var(--ops-support-danger) 54%, var(--ops-support-border));
}

[data-theme="dark"] #opsSupportPanel .worker-row.is-assigned,
[data-theme="dark"] #opsSupportPanel .worker-row.is-assigned input[type="text"][readonly] {
  background: color-mix(in srgb, var(--soc-success) 10%, var(--soc-card-bg));
}

[data-theme="dark"] #opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) {
  border-color: color-mix(in srgb, var(--soc-success) 42%, var(--ops-support-border));
  background: color-mix(in srgb, var(--soc-success) 12%, var(--soc-card-bg));
}

[data-theme="dark"] #opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) input[type="text"][readonly] {
  border-color: color-mix(in srgb, var(--soc-success) 34%, var(--ops-support-border));
  background: color-mix(in srgb, var(--soc-success) 10%, var(--ui-bg-surface-2, var(--soc-soft-bg)));
  color: #d7ffe5;
}

[data-theme="dark"] #opsSupportPanel .soc-ops-support-day-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 1279px) {
  #opsSupportPanel .soc-ops-support-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  #opsSupportPanel .soc-ops-support-toolbar-right {
    grid-template-columns: minmax(0, 1fr);
  }

  #opsSupportPanel .soc-ops-support-toolbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 1023px) {
  #opsSupportPanel .soc-ops-support-filters,
  #opsSupportPanel .soc-ops-support-empty-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  #opsSupportPanel .soc-ops-support-support-strip {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  #opsSupportPanel .soc-ops-support-toolbar-meta {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout.has-detail-panel {
    grid-template-columns: minmax(0, 2.28fr) minmax(376px, 408px);
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet {
    max-width: 408px;
    min-height: 420px;
    max-height: calc(100dvh - 118px);
    padding: 16px 18px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main {
    padding: 16px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-copy > h3 {
    white-space: nowrap;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1024px) {
  body.soc-desktop-shell #peopleView :is(.soc-employee-directory-toolbar, .soc-monitoring-toolbar)
    :is(input[type="search"], .ds-input, select, .ds-select) {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    line-height: 20px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  body.soc-desktop-shell #peopleView :is(.soc-employee-directory-toolbar, .soc-monitoring-toolbar)
    :is(select, .ds-select) {
    padding-right: 38px !important;
  }
}

/* Sentrix HR topbar parity */
.topbar-right {
  gap: 8px;
}

.session-info.hidden,
.topbar-profile-btn.hidden,
.topbar-theme-toggle.hidden {
  display: none !important;
}

#topbarNotificationPermissionBtn,
#openPasswordBtn {
  display: none !important;
}

.session-info {
  color: var(--ui-text-secondary, var(--soc-muted));
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(40vw, 340px);
  min-width: 0;
}

.topbar-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  cursor: pointer;
  flex: 0 0 auto;
}

.topbar-profile-btn:hover,
.topbar-profile-btn:focus-visible {
  color: var(--ui-text-primary, var(--soc-text));
  background: color-mix(in srgb, var(--ui-text-primary, var(--soc-text)) 8%, transparent);
  outline: none;
}

.topbar-profile-art {
  width: 19px;
  height: 19px;
  display: block;
}

.topbar-theme-toggle {
  position: relative;
  display: inline-flex;
  width: 76px;
  min-width: 76px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
  cursor: pointer;
}

.topbar-theme-toggle:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.45);
  outline-offset: 3px;
  border-radius: 999px;
}

.topbar-theme-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.18);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.topbar-theme-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  transition: transform 180ms ease;
}

.topbar-theme-icon {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: color 160ms ease, opacity 160ms ease;
}

.topbar-theme-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.topbar-theme-icon-sun {
  left: 11px;
}

.topbar-theme-icon-moon {
  right: 11px;
}

.topbar-theme-toggle[data-theme="light"] .topbar-theme-track {
  background: #f97316;
  border-color: rgba(249, 115, 22, 0.18);
}

.topbar-theme-toggle[data-theme="light"] .topbar-theme-thumb {
  transform: translateX(0);
}

.topbar-theme-toggle[data-theme="light"] .topbar-theme-icon-sun {
  color: #f97316;
}

.topbar-theme-toggle[data-theme="light"] .topbar-theme-icon-moon {
  color: rgba(255, 255, 255, 0.72);
}

.topbar-theme-toggle[data-theme="dark"] .topbar-theme-track {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.18);
}

.topbar-theme-toggle[data-theme="dark"] .topbar-theme-thumb {
  transform: translateX(36px);
}

.topbar-theme-toggle[data-theme="dark"] .topbar-theme-icon-sun {
  color: rgba(255, 255, 255, 0.64);
}

.topbar-theme-toggle[data-theme="dark"] .topbar-theme-icon-moon {
  color: #0f172a;
}

#topbarNotificationsBtn.topbar-btn:not(.hidden) {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

#topbarNotificationsBtn.topbar-btn:not(.hidden):hover,
#topbarNotificationsBtn.topbar-btn:not(.hidden):focus-visible {
  color: var(--ui-text-primary, var(--soc-text));
  outline: none;
}

@media (max-width: 900px) {
  .session-info,
  .topbar-profile-btn,
  .topbar-theme-toggle {
    display: none !important;
  }
}

/* support roster workspace cleanup (2026-03-27) */
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-workspace {
  display: grid;
  gap: 6px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top {
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top .soc-page-header-main {
  flex: 1 1 300px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-controls {
  display: grid;
  gap: 6px;
  width: auto;
  min-width: 0;
  justify-items: end;
  align-content: end;
  flex: 0 1 auto;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row {
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 16px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-month-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row > * {
  flex: 0 0 auto;
}

body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  padding: 0 6px;
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
}

body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label,
body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #0f172a;
}

body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label {
  padding: 0 8px;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow {
  width: 22px;
  border-radius: 999px;
  color: #64748b;
  font-size: 15px;
  font-weight: 700;
}

body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow:hover,
body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow:focus-visible,
body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label:hover,
body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label:focus-visible {
  color: #0f172a;
  background: rgba(148, 163, 184, 0.12);
  outline: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'],
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  background: #ffffff;
  color: #52637a;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].is-active,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'].chip.is-active {
  border-color: var(--ops-support-primary);
  background: var(--ops-support-primary);
  color: #ffffff;
  box-shadow: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  flex-wrap: wrap;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions .ds-btn,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn {
  min-height: 34px;
  height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn {
  border-color: #dbe5ef;
  background: #ffffff;
  color: #475569;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:hover,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:focus-visible {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.08);
  color: var(--ops-support-primary-strong);
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
  display: block;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat {
  --ops-support-summary-dot: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat::before {
  display: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #64748b;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label::before {
  content: "";
  display: inline-flex;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 6px;
  background: var(--ops-support-summary-dot);
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong {
  margin: 0;
  font-size: 14px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-request {
  --ops-support-summary-dot: transparent;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-request .soc-ops-support-toolbar-stat-label::before {
  display: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-people {
  --ops-support-summary-dot: #f59e0b;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-pending {
  --ops-support-summary-dot: #d97706;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-approved {
  --ops-support-summary-dot: #16a34a;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-rejected {
  --ops-support-summary-dot: #dc2626;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat.is-cancelled {
  --ops-support-summary-dot: #64748b;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top .soc-ops-support-filter-row {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 208px));
  gap: 8px;
  width: auto;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top .soc-ops-support-filters {
  gap: 8px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field {
  display: grid;
  grid-template-rows: auto 34px;
  gap: 2px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-label {
  transform: none;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #64748b;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control {
  height: 36px;
  min-width: 0;
  border-color: #d1d9e2;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top .soc-ops-support-filter-tools {
  align-self: end;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more {
  position: relative;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 74px;
  border: 1px solid #dbe5ef;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  user-select: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn::-webkit-details-marker {
  display: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn::after {
  content: "▾";
  font-size: 11px;
  line-height: 1;
  color: currentColor;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more[open] .soc-ops-support-filter-more-btn {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.08);
  color: var(--ops-support-primary-strong);
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 8;
  min-width: 188px;
  padding: 12px;
  border: 1px solid #dbe5ef;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-controls .soc-ops-support-active-filters {
  justify-content: flex-end;
  margin-top: 0;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.08);
  color: #9a3412;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge:hover,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge:focus-visible {
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.12);
  outline: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout {
  gap: 10px;
  margin-top: 0;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main {
  gap: 8px;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays {
  gap: 6px;
  padding: 0 2px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-grid {
  gap: 6px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell {
  min-height: 132px;
  border-radius: 12px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet {
  border-color: #dbe5ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}

[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row {
  border-bottom-color: var(--ops-support-border);
}

[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet {
  border-color: var(--ops-support-border);
  background: var(--soc-card-bg);
}

[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn {
  color: #f8fafc;
}

[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label,
[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-label {
  color: #cbd5e1;
}

[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-panel {
  border-color: var(--ops-support-border);
  background: var(--soc-card-bg);
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.34);
}

[data-theme="dark"] body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.16);
  color: #ffd7be;
}

/* ===== Shople reference alignment (2026-03-31) ===== */
body.soc-desktop-shell main,
body.soc-desktop-adaptive main {
  background: transparent;
}

body.soc-desktop-shell #dashboardPanel,
body.soc-desktop-shell #analyticsView,
body.soc-desktop-shell #homeView,
body.soc-desktop-shell #weeklyView,
body.soc-desktop-shell #peopleView,
body.soc-desktop-shell #alertsView,
body.soc-desktop-shell #ticketsView,
body.soc-desktop-shell #reportsHubView,
body.soc-desktop-shell #accountPanel,
body.soc-desktop-shell #employeeScorePanel,
body.soc-desktop-shell #opsSupportPanel,
body.soc-desktop-shell #announcementPanel,
body.soc-desktop-shell #notificationPanel,
body.soc-desktop-shell #notificationSettingsPanel,
body.soc-desktop-shell #excelPanel,
body.soc-desktop-shell #googleSheetsPanel,
body.soc-desktop-shell #auditPanel,
body.soc-desktop-shell #myProfileView {
  gap: 16px;
  background: transparent;
}

body.soc-desktop-shell .soc-page-header,
body.soc-desktop-shell .soc-view-page-header,
body.soc-desktop-shell .soc-hub-header,
body.soc-desktop-shell .admin-sub-topbar,
body.soc-desktop-shell .workspace-head,
body.soc-desktop-shell .soc-settings-page-header,
body.soc-desktop-shell .soc-report-headerbar,
body.soc-desktop-shell .soc-settings-shell-bar,
body.soc-desktop-shell .soc-profile-detail-head {
  padding: 0 !important;
  margin: 0 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.soc-desktop-shell .soc-page-header-main h2,
body.soc-desktop-shell .soc-page-header-main h3,
body.soc-desktop-shell .soc-hub-title-row h2,
body.soc-desktop-shell .workspace-head-main h2,
body.soc-desktop-shell .soc-report-title-wrap h3,
body.soc-desktop-shell .soc-people-admin-title-block h3 {
  letter-spacing: -0.02em;
}

body.soc-desktop-shell #dashboardWorkspaceIntroText,
body.soc-desktop-shell #dashboardWorkspaceMetaText,
body.soc-desktop-shell #hubSummaryText,
body.soc-desktop-shell #noticesViewSubtitle,
body.soc-desktop-shell #notificationMeta,
body.soc-desktop-shell #alertsView > .soc-ops-workspace-helper,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-helper,
body.soc-desktop-shell #peopleView .soc-people-admin-title-block .meta,
body.soc-desktop-shell #peopleView .soc-people-pane-summary-head .meta,
body.soc-desktop-shell #peopleView .soc-workspace-card-head .meta,
body.soc-desktop-shell #peopleDirectoryToolbarNote,
body.soc-desktop-shell #employeeScorePanel .soc-workspace-card-head .meta,
body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card .meta,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy .meta,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .meta,
body.soc-desktop-shell #analyticsComparisonContext,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy,
body.soc-desktop-shell #weeklyWorkflowDescription,
body.soc-desktop-shell #weeklyBlockedReasonText,
body.soc-desktop-shell #weeklyHeaderMetaHint,
body.soc-desktop-shell #weeklyReviewSummaryText,
body.soc-desktop-shell #accountPanel .soc-workspace-card-head .meta,
body.soc-desktop-shell #notificationSettingsPanel .soc-notification-check-copy .meta,
body.soc-desktop-shell #myProfileView #myProfileScoreMeta,
body.soc-desktop-shell #myProfileView .soc-profile-account-section-head .meta,
body.soc-desktop-shell #myProfileView .soc-profile-security-copy p {
  display: none !important;
}

body.soc-desktop-shell .soc-dashboard-workspace-tabs,
body.soc-desktop-shell .chip-row,
body.soc-desktop-shell .soc-settings-shell-tabs,
body.soc-desktop-shell .soc-notification-center-tabs,
body.soc-desktop-shell .workspace-tabs,
body.soc-desktop-shell .soc-people-segment-rail,
body.soc-desktop-shell .soc-ops-support-view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.soc-desktop-shell .soc-dashboard-workspace-tab,
body.soc-desktop-shell .chip,
body.soc-desktop-shell .soc-settings-shell-tab,
body.soc-desktop-shell .soc-notification-center-tab,
body.soc-desktop-shell .workspace-tabs > button,
body.soc-desktop-shell .soc-people-segment-btn,
body.soc-desktop-shell .soc-ops-support-view-toggle .chip {
  min-height: var(--soc-tab-height);
  height: var(--soc-tab-height);
  padding: 0 14px;
  border: 1px solid var(--soc-border);
  border-radius: 10px;
  background: var(--ui-bg-surface);
  box-shadow: none;
}

body.soc-desktop-shell .soc-dashboard-workspace-tab.is-active,
body.soc-desktop-shell .chip.is-active,
body.soc-desktop-shell .soc-settings-shell-tab.is-active,
body.soc-desktop-shell .soc-notification-center-tab.is-active,
body.soc-desktop-shell .soc-people-segment-btn.is-active {
  border-color: rgba(255, 106, 19, 0.24);
  background: var(--soc-primary-soft-bg);
  color: var(--soc-primary-deep);
}

body.soc-desktop-shell .soc-realtime-datebar,
body.soc-desktop-shell .soc-alerts-filter-compact-row,
body.soc-desktop-shell .soc-ticket-datebar,
body.soc-desktop-shell .soc-analytics-v2-toolbar,
body.soc-desktop-shell .soc-hub-filter-panel,
body.soc-desktop-shell .soc-people-workspace-toolbar,
body.soc-desktop-shell .soc-employee-score-filter-bar,
body.soc-desktop-shell .soc-notification-center-toolbar,
body.soc-desktop-shell .workspace-tabbar-row,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar,
body.soc-desktop-shell .soc-settings-savebar {
  border: 1px solid var(--soc-border) !important;
  border-radius: 12px !important;
  background: var(--ui-bg-surface) !important;
  box-shadow: none !important;
}

body.soc-desktop-shell .soc-analytics-v2-toolbar,
body.soc-desktop-shell .soc-people-workspace-toolbar,
body.soc-desktop-shell .soc-employee-score-filter-bar,
body.soc-desktop-shell .soc-notification-center-toolbar,
body.soc-desktop-shell .workspace-tabbar-row,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row {
  padding: 12px 14px;
}

body.soc-desktop-shell #dashboardPanel .soc-block,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-card,
body.soc-desktop-shell #reportsHubView .panel,
body.soc-desktop-shell #peopleView .panel,
body.soc-desktop-shell #accountPanel .soc-manage-section-card,
body.soc-desktop-shell #employeeScorePanel .soc-hub-section-card,
body.soc-desktop-shell #weeklyView .soc-weekly-control-card,
body.soc-desktop-shell #weeklyView .soc-weekly-review-card,
body.soc-desktop-shell #weeklyView .soc-weekly-section-card,
body.soc-desktop-shell #notificationSettingsPanel .soc-system-section-card,
body.soc-desktop-shell #auditPanel .soc-audit-results,
body.soc-desktop-shell #auditPanel #auditDetailPanel,
body.soc-desktop-shell #notificationPanel .soc-notification-center-shell,
body.soc-desktop-shell #announcementPanel .notices-panel,
body.soc-desktop-shell #myProfileView .soc-profile-account-strip,
body.soc-desktop-shell #myProfileView .soc-profile-score,
body.soc-desktop-shell #myProfileView .soc-profile-record-section,
body.soc-desktop-shell #myProfileView .soc-profile-account-card,
body.soc-desktop-shell #myProfileView .soc-profile-account-form,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main {
  border: 1px solid var(--soc-border) !important;
  border-radius: 12px !important;
  background: var(--ui-bg-surface) !important;
  box-shadow: none !important;
}

body.soc-desktop-shell .soc-summary-card,
body.soc-desktop-shell .soc-kpi-card,
body.soc-desktop-shell .soc-employee-score-summary-card,
body.soc-desktop-shell .soc-ops-support-toolbar-stat,
body.soc-desktop-shell .soc-analytics-v2-kpi-tile,
body.soc-desktop-shell .soc-analytics-v2-health-panel,
body.soc-desktop-shell .soc-profile-score-summary-item,
body.soc-desktop-shell .soc-people-kpi-strip > * {
  border: 1px solid var(--soc-border) !important;
  border-radius: 12px !important;
  background: var(--ui-bg-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #homeView {
  display: grid;
  gap: 16px;
}

body.soc-desktop-shell #homeView .soc-home-row--briefing,
body.soc-desktop-shell #homeView .soc-home-row--analysis,
body.soc-desktop-shell #homeView .soc-home-row--activity {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 16px;
  align-items: start;
}

body.soc-desktop-shell #homeView .soc-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.soc-desktop-shell #homeView #homeTrend7d {
  min-height: 0;
}

body.soc-desktop-shell #homeView #homeTrendSparkline {
  height: 120px;
}

body.soc-desktop-shell #alertsView .soc-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

body.soc-desktop-shell #ticketsView .soc-summary-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

body.soc-desktop-shell #alertsView .soc-summary-card,
body.soc-desktop-shell #ticketsView .soc-summary-card {
  min-height: 66px;
  padding: 12px 14px;
  align-items: flex-start;
}

body.soc-desktop-shell #alertsView .soc-pc-two-col-shell,
body.soc-desktop-shell #ticketsView .soc-pc-two-col-shell,
body.soc-desktop-shell #reportsHubView .soc-hub-results-layout,
body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid,
body.soc-desktop-shell #auditPanel .soc-audit-grid,
body.soc-desktop-shell #peopleView .soc-people-directory-layout,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-layout {
  grid-template-columns: minmax(0, 1.38fr) minmax(320px, 0.82fr);
  gap: 16px;
  align-items: start;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel,
body.soc-desktop-shell #reportsHubView .soc-hub-preview-panel,
body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel,
body.soc-desktop-shell #accountPanel #accountDetailPanel,
body.soc-desktop-shell #peopleView .soc-people-detail-panel,
body.soc-desktop-shell #auditPanel #auditDetailPanel,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet {
  position: sticky;
  top: 16px;
}

body.soc-desktop-shell #analyticsView #analyticsHeroRow {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap {
  width: 104px;
  height: 104px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap {
  width: 104px;
  height: 104px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap strong {
  font-size: 24px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.soc-desktop-shell #peopleView .soc-people-dashboard-summary,
body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar,
body.soc-desktop-shell #peopleView .soc-monitoring-toolbar,
body.soc-desktop-shell #peopleView .soc-people-stats-card,
body.soc-desktop-shell #peopleView .soc-employee-directory-grid,
body.soc-desktop-shell #peopleView .soc-monitoring-grid {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--ui-bg-surface);
  box-shadow: none;
}

body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card:last-child {
  display: none;
}

body.soc-desktop-shell #weeklyView .soc-weekly-header-main,
body.soc-desktop-shell #weeklyView .soc-weekly-header-meta {
  gap: 8px;
}

body.soc-desktop-shell #weeklyView .soc-weekly-workspace-shell {
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 16px;
}

body.soc-desktop-shell #weeklyView .soc-weekly-flow-list,
body.soc-desktop-shell #weeklyView .soc-weekly-config-grid {
  gap: 8px;
}

body.soc-desktop-shell #reportsHubView .soc-hub-filter-grid,
body.soc-desktop-shell #notificationSettingsPanel .soc-notification-settings-form {
  gap: 12px;
}

body.soc-desktop-shell #notificationPanel .soc-notification-center-shell {
  padding: 14px;
}

body.soc-desktop-shell #announcementPanel #noticesWorkspace {
  display: grid;
  gap: 14px;
}

body.soc-desktop-shell #announcementPanel .workspace-tabbar-row,
body.soc-desktop-shell #announcementPanel #noticesListPanel,
body.soc-desktop-shell #announcementPanel #noticesDetailPanel,
body.soc-desktop-shell #announcementPanel #noticesComposePanel {
  border: 1px solid var(--soc-border);
  border-radius: 12px;
  background: var(--ui-bg-surface);
  box-shadow: none;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
  padding: 0;
  border: 0;
  background: transparent;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell {
  min-height: 128px;
  border-radius: 12px;
  box-shadow: none;
}

/* support roster phase2 pass (2026-03-31) */
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-workspace {
  gap: 10px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-top {
  align-items: flex-start;
  gap: 12px 18px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-header-controls {
  gap: 8px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar {
  grid-template-columns: auto auto;
  justify-content: flex-end;
  gap: 8px 10px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-month-row,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row {
  min-height: 34px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row {
  justify-content: flex-end;
  gap: 8px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters {
  grid-template-columns: repeat(2, minmax(148px, 184px));
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field {
  grid-template-rows: auto 32px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control,
body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label,
body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action='ops-support-view'],
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions .ds-btn,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn {
  min-height: 32px;
  height: 32px;
  font-size: 12px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
  padding-top: 2px !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats {
  gap: 8px 12px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label {
  font-size: 11px;
  line-height: 14px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong {
  font-size: 13px;
  line-height: 15px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge {
  min-height: 26px;
  padding: 0 9px;
  font-size: 11px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-main {
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays {
  gap: 8px;
  padding: 2px 0 0;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays > span {
  font-size: 11px;
  line-height: 14px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-grid {
  gap: 8px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell {
  min-height: 136px;
  padding: 10px 8px;
  border-color: #e2e8f0;
  background: #ffffff;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell-head > span {
  padding: 2px 7px;
  border-color: #e2e8f0;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line,
body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-more {
  padding: 6px 8px;
  border-radius: 10px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line {
  box-shadow: none !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line:hover {
  border-color: rgba(249, 115, 22, 0.26);
  background: rgba(249, 115, 22, 0.06);
  box-shadow: none !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line.is-selected {
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.16) !important;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-label {
  font-size: 11px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-meta {
  font-size: 10px;
  line-height: 12px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-count {
  font-size: 10px;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-pending {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-approved {
  background: #ecfdf3;
  border-color: #86efac;
  color: #166534;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-unavailable,
body.soc-desktop-shell #opsSupportPanel .cal-line.state-rejected {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

body.soc-desktop-shell #opsSupportPanel .cal-line.state-cancelled {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet {
  padding: 12px 14px;
  border-radius: 14px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head {
  padding-bottom: 4px;
  border-bottom: 0;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-content {
  gap: 8px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics {
  gap: 6px;
}

body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric {
  padding: 8px 10px;
  border-radius: 10px;
}

body.soc-desktop-shell #myProfileView .soc-profile-top-shell,
body.soc-desktop-shell #myProfileView .soc-profile-overview-shell,
body.soc-desktop-shell #myProfileView .soc-profile-account-workspace {
  gap: 16px;
}

body.soc-desktop-shell #myProfileView .soc-profile-account-strip,
body.soc-desktop-shell #myProfileView .soc-profile-score,
body.soc-desktop-shell #myProfileView .soc-profile-record-section,
body.soc-desktop-shell #myProfileView .soc-profile-account-card,
body.soc-desktop-shell #myProfileView .soc-profile-account-form {
  padding: 16px;
}

body.soc-desktop-shell #homeWeeklyBriefing {
  gap: 10px;
  padding: 16px 18px 14px;
}

body.soc-desktop-shell #homeWeeklyBriefing #homeWeeklySummaryLine,
body.soc-desktop-shell #reportsHubView #hubSummaryMeta,
body.soc-desktop-shell #reportsHubView .soc-hub-filter-heading .meta,
body.soc-desktop-shell #reportsHubView #hubFilterContextText,
body.soc-desktop-shell #reportsHubView #hubResultsMeta,
body.soc-desktop-shell #reportsHubView .soc-hub-preview-header .meta {
  display: none !important;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart {
  gap: 10px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-item {
  padding: 12px 14px;
  gap: 4px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-value {
  font-size: 24px;
}

body.soc-desktop-shell #homeHeroStatus {
  padding: 16px 18px;
}

body.soc-desktop-shell #reportsHubView .soc-hub-header {
  margin-bottom: 6px !important;
}

body.soc-desktop-shell #reportsHubView .soc-hub-filter-header,
body.soc-desktop-shell #reportsHubView .soc-hub-results-header,
body.soc-desktop-shell #reportsHubView .soc-hub-preview-header {
  padding-bottom: 0;
}

body.soc-desktop-shell #reportsHubView .soc-hub-filter-body,
body.soc-desktop-shell #reportsHubView .soc-hub-results-body,
body.soc-desktop-shell #reportsHubView .soc-hub-preview-body {
  padding-top: 12px;
}

body.soc-desktop-shell #reportsHubView .soc-hub-filter-panel,
body.soc-desktop-shell #reportsHubView .soc-hub-results-panel,
body.soc-desktop-shell #reportsHubView .soc-hub-preview-panel {
  border-radius: 12px !important;
}

body.soc-desktop-shell #reportsHubView .soc-hub-results-state,
body.soc-desktop-shell #reportsHubView .soc-hub-preview-empty {
  min-height: 148px;
  padding: 18px;
  border-radius: 12px;
  background: #f8f9fc;
}

body.soc-desktop-shell #peopleView .soc-people-pane-summary {
  gap: 10px;
  padding: 12px 14px;
}

body.soc-desktop-shell #peopleView .soc-people-pane-summary-head h3 {
  font-size: 15px;
  line-height: 22px;
}

body.soc-desktop-shell #peopleView .soc-people-segment-rail {
  gap: 6px;
}

body.soc-desktop-shell #peopleView .soc-people-segment-btn {
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 16px;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-card {
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-head {
  gap: 8px;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-icon svg {
  width: 18px;
  height: 18px;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-copy h4 {
  font-size: 13px;
  line-height: 18px;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-donut-row {
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
  gap: 12px;
}

body.soc-desktop-shell #peopleView .soc-people-donut {
  width: 96px;
  height: 96px;
}

body.soc-desktop-shell #peopleView .soc-people-donut::after {
  inset: 12px;
}

body.soc-desktop-shell #peopleView .soc-people-donut-center {
  width: min(64px, calc(100% - 28px));
}

body.soc-desktop-shell #peopleView .soc-people-donut-center span {
  font-size: 11px;
  line-height: 14px;
}

body.soc-desktop-shell #peopleView .soc-people-donut-center strong {
  font-size: 18px;
  line-height: 22px;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-legend {
  gap: 6px;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-legend-row,
body.soc-desktop-shell #peopleView .soc-people-bar-row-head,
body.soc-desktop-shell #peopleView .soc-people-kpi-inline-row,
body.soc-desktop-shell #peopleView .soc-people-kpi-number-block span {
  font-size: 12px;
  line-height: 16px;
}

body.soc-desktop-shell #peopleView .soc-people-progress,
body.soc-desktop-shell #peopleView .soc-people-bar-track {
  height: 8px;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar {
  padding: 10px 12px;
}

body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-row {
  gap: 8px;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar-main {
  gap: 10px;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-field > span {
  margin-bottom: 5px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-search {
  flex: 1.35 1 360px;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-field:not(.soc-employee-directory-search) {
  flex: 0 1 138px;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-field :is(input, select),
body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-utility .ds-btn {
  min-height: 36px;
  height: 36px;
}

body.soc-desktop-shell #peopleView .soc-workspace-card-head {
  padding: 12px 14px 10px;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-grid-wrap {
  border-top: 1px solid var(--soc-border);
}

body.soc-desktop-shell #peopleView .soc-employee-directory-table th,
body.soc-desktop-shell #peopleView .soc-employee-directory-table td {
  padding: 10px 12px;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th {
  background: #fafbfe;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-table tbody td {
  font-size: 12px;
  line-height: 17px;
}

body.soc-desktop-shell #peopleView .soc-people-table-identity {
  gap: 10px;
}

body.soc-desktop-shell #peopleView .soc-people-avatar,
body.soc-desktop-shell #peopleView .soc-people-employee-avatar {
  width: 36px;
  height: 36px;
}

body.soc-desktop-shell #peopleView .soc-people-avatar {
  font-size: 11px;
}

body.soc-desktop-shell #homeView {
  gap: 14px;
}

body.soc-desktop-shell #homeView .soc-home-row--briefing {
  grid-template-columns: minmax(0, 2.2fr) minmax(240px, 0.88fr);
  gap: 14px;
}

body.soc-desktop-shell #homeView .soc-home-row--analysis,
body.soc-desktop-shell #homeView .soc-home-row--activity {
  grid-template-columns: minmax(0, 1.48fr) minmax(280px, 1fr);
  gap: 14px;
}

body.soc-desktop-shell #homeView > .soc-home-row--analysis #homeTrend7d,
body.soc-desktop-shell #homeView > .soc-home-row--activity #homeTicketBlock {
  min-height: 0;
}

body.soc-desktop-shell #homeWeeklyBriefing {
  gap: 8px;
  padding: 14px 16px 12px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-block-head {
  align-items: center;
  gap: 10px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-briefing-title h3 {
  font-size: 16px;
  line-height: 22px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-briefing-period {
  font-size: 11px;
  line-height: 15px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-ratio-pill {
  min-height: 26px;
  padding: 4px 9px;
  font-size: 11px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart {
  gap: 8px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-item {
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-value {
  font-size: 21px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-label,
body.soc-desktop-shell #homeWeeklyBriefing .soc-home-weekly-chart-wow {
  font-size: 11px;
  line-height: 15px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-briefing-actions {
  gap: 8px;
}

body.soc-desktop-shell #homeWeeklyBriefing .soc-briefing-actions .ds-btn {
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
}

body.soc-desktop-shell #homeHeroStatus {
  min-height: 0;
  align-self: start;
  gap: 6px;
  padding: 14px 16px;
}

body.soc-desktop-shell #homeHeroStatus .soc-hero-status-head {
  align-items: flex-start;
  gap: 10px;
}

body.soc-desktop-shell #homeHeroStatus h3 {
  font-size: 15px;
  line-height: 20px;
}

body.soc-desktop-shell #homeHeroStatus .soc-hero-chip {
  min-height: 26px;
  padding: 0 10px;
  font-size: 11px;
}

body.soc-desktop-shell #homeHeroStatus .soc-hero-comment {
  font-size: 12px;
  line-height: 17px;
}

body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-grid {
  gap: 10px;
}

body.soc-desktop-shell #homeView > .soc-home-row--kpis .soc-kpi-card {
  min-height: 104px;
  gap: 6px;
  padding: 14px 16px 13px;
  border-radius: 12px;
}

body.soc-desktop-shell #homeView .soc-kpi-label,
body.soc-desktop-shell #homeView .soc-kpi-subtext {
  font-size: 11px;
  line-height: 15px;
}

body.soc-desktop-shell #homeView .soc-kpi-subtext {
  color: var(--ui-text-tertiary);
}

body.soc-desktop-shell #homeView .soc-kpi-value {
  font-size: 30px;
}

body.soc-desktop-shell #homeTrend7d {
  padding: 16px 18px 14px;
}

body.soc-desktop-shell #homeTrend7d .soc-block-head {
  margin-bottom: 2px;
}

body.soc-desktop-shell #homeTrend7d .soc-block-value {
  font-size: 28px;
  line-height: 1;
}

body.soc-desktop-shell #homeTrend7d .soc-sparkline-lg {
  height: 112px;
  margin-top: 8px;
}

body.soc-desktop-shell #homeTrend7d .meta {
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
}

body.soc-desktop-shell #homeRiskSignals,
body.soc-desktop-shell #homeActionNeededBlock,
body.soc-desktop-shell #homeRecentBlock {
  padding: 14px 16px;
}

body.soc-desktop-shell #homeRiskSignals > h3,
body.soc-desktop-shell #homeActionNeededBlock > h3,
body.soc-desktop-shell #homeRecentBlock > h3 {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 20px;
}

body.soc-desktop-shell #homeRiskSignals .soc-insight-item,
body.soc-desktop-shell #homeActionNeededBlock .soc-mini-row,
body.soc-desktop-shell #homeRecentBlock .soc-mini-row {
  padding: 9px 10px;
  border-radius: 10px;
}

body.soc-desktop-shell #homeActionNeededBlock {
  border-color: color-mix(in srgb, var(--soc-primary) 16%, var(--soc-border));
  background: color-mix(in srgb, var(--soc-primary) 4%, #fff);
}

body.soc-desktop-shell #homeActionNeededBlock .soc-mini-row {
  background: #fff;
}

body.soc-desktop-shell #homeTicketBlock {
  padding: 16px 18px 14px;
}

body.soc-desktop-shell #homeTicketPendingMeta {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
}

body.soc-desktop-shell #homeTicketBlock .soc-ticket-mini-dist {
  margin: 8px 0 10px;
}

body.soc-desktop-shell #homeTicketPendingBtn {
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
}

body.soc-desktop-shell #homeRecentBlock .soc-list-mini {
  gap: 6px;
}

body.soc-desktop-shell #alertsView {
  gap: 12px;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar {
  gap: 8px;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .soc-realtime-date-display,
body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .ds-btn {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-row {
  gap: 8px;
  padding: 2px 0 0;
}

body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-summary {
  font-size: 11px;
  line-height: 15px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-btn {
  min-height: 30px;
  height: 30px;
  padding-inline: 10px;
  border-radius: 8px;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis {
  gap: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-summary-grid {
  gap: 8px;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card,
body.soc-desktop-shell #alertsView .soc-summary-card {
  min-height: 72px !important;
  padding: 10px 12px !important;
  align-content: start;
  gap: 4px;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label,
body.soc-desktop-shell #alertsView .soc-summary-card .soc-summary-label {
  font-size: 11px !important;
  line-height: 14px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value,
body.soc-desktop-shell #alertsView .soc-summary-card .soc-summary-value {
  font-size: 24px !important;
  line-height: 1 !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-main {
  grid-template-columns: minmax(0, 1fr) 304px !important;
  gap: 12px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-results-panel {
  min-height: 480px;
  border-radius: 10px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head {
  min-height: 56px;
  padding: 14px 16px 10px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head h3 {
  font-size: 15px;
  line-height: 20px;
}

body.soc-desktop-shell #alertsView .soc-workspace-inline-summary {
  gap: 4px;
}

body.soc-desktop-shell #alertsView .soc-workspace-inline-badge {
  min-height: 22px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 14px;
}

body.soc-desktop-shell #alertsView #alertsFeedSelectedBadge.hidden {
  display: none !important;
}

body.soc-desktop-shell #alertsView .soc-pc-list-header {
  min-height: 36px !important;
  padding: 0 16px 8px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-list-header > span {
  font-size: 11px !important;
  line-height: 14px !important;
}

body.soc-desktop-shell #alertsView :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card) {
  min-height: 60px !important;
  padding: 8px 16px !important;
}

body.soc-desktop-shell #alertsView :is(.incident-status, .incident-type, .incident-severity, .incident-location, .incident-created-at) {
  font-size: 11px !important;
  line-height: 15px !important;
}

body.soc-desktop-shell #alertsView .incident-title {
  font-size: 13px !important;
  line-height: 18px !important;
}

body.soc-desktop-shell #alertsView :is(.incident-comment-preview, .incident-ticket-description) {
  font-size: 11px !important;
  line-height: 15px !important;
  color: var(--ui-text-tertiary, var(--soc-text-sub)) !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-empty-state {
  min-height: 160px;
  padding: 20px 16px 18px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-empty-state .ds-btn {
  min-height: 30px;
  height: 30px;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel {
  width: 304px !important;
  min-width: 304px !important;
  max-width: 304px !important;
  min-height: 480px;
  border-radius: 10px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-head {
  padding: 14px 16px 12px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-head h4 {
  font-size: 15px !important;
  line-height: 20px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-head-actions {
  gap: 6px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel .ds-btn.ds-btn-sm {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel > .meta {
  padding: 10px 16px 0 !important;
  font-size: 12px;
  line-height: 16px;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi {
  padding: 10px 16px 0 !important;
  gap: 6px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi-item {
  min-height: 58px;
  padding: 8px 9px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-section {
  padding: 10px 16px 0 !important;
  gap: 6px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-section-title {
  font-size: 12px;
  line-height: 16px;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-summary {
  min-height: 64px;
  max-height: 116px;
  padding: 9px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-thread {
  min-height: 152px !important;
  padding: 9px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-form {
  margin: 10px 16px 0 !important;
  padding: 10px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-input {
  min-height: 36px !important;
  height: 36px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-actions {
  padding: 10px 16px 16px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi-item {
  min-height: 52px;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary {
  min-height: 52px;
  max-height: 84px;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread {
  min-height: 96px !important;
}

body.soc-desktop-shell #ticketsView {
  gap: 12px;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar {
  gap: 8px;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .soc-realtime-date-display,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .ds-btn {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-row {
  gap: 8px;
  padding: 2px 0 0;
}

body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-summary {
  font-size: 11px;
  line-height: 15px;
  color: var(--ui-text-secondary, var(--soc-text-sub));
}

body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-btn {
  min-height: 30px;
  height: 30px;
  padding-inline: 10px;
  border-radius: 8px;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis,
body.soc-desktop-shell #ticketsView .soc-summary-grid {
  gap: 6px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card,
body.soc-desktop-shell #ticketsView .soc-summary-card {
  min-height: 64px !important;
  padding: 8px 10px !important;
  gap: 3px;
  border-radius: 10px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label,
body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-label {
  font-size: 10px !important;
  line-height: 13px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value,
body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-value {
  font-size: 22px !important;
  line-height: 1 !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-main {
  grid-template-columns: minmax(0, 1fr) 296px !important;
  gap: 12px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-panel {
  min-height: 472px;
  border-radius: 10px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head {
  min-height: 54px;
  padding: 13px 15px 10px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head h3 {
  font-size: 15px;
  line-height: 20px;
}

body.soc-desktop-shell #ticketsView .soc-ticket-feed-summary {
  gap: 4px;
}

body.soc-desktop-shell #ticketsView .soc-workspace-inline-badge {
  min-height: 22px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 14px;
}

body.soc-desktop-shell #ticketsView #ticketsFeedSelectedBadge.hidden {
  display: none !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-list-header {
  min-height: 36px !important;
  padding: 0 15px 8px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-list-header > span {
  font-size: 11px !important;
  line-height: 14px !important;
}

body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card {
  min-height: 58px !important;
  padding: 8px 15px !important;
}

body.soc-desktop-shell #ticketsView .ticket-head-pills,
body.soc-desktop-shell #ticketsView .ticket-row-summary-type,
body.soc-desktop-shell #ticketsView .ticket-row-summary-site,
body.soc-desktop-shell #ticketsView .ticket-row-summary-updated {
  justify-self: start !important;
  text-align: left !important;
}

body.soc-desktop-shell #ticketsView .ticket-title,
body.soc-desktop-shell #ticketsView .ticket-row-summary-comment {
  justify-self: start !important;
  text-align: left !important;
}

body.soc-desktop-shell #ticketsView .ticket-title {
  font-size: 13px !important;
  line-height: 18px !important;
}

body.soc-desktop-shell #ticketsView :is(.ticket-row-summary-type, .ticket-row-summary-site, .ticket-row-summary-updated, .ticket-row-summary-requested) {
  font-size: 11px !important;
  line-height: 15px !important;
}

body.soc-desktop-shell #ticketsView .ticket-row-summary-comment {
  font-size: 11px !important;
  line-height: 15px !important;
  max-height: calc(1.36em * 2);
  color: var(--ui-text-tertiary, var(--soc-text-sub));
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-empty-state {
  min-height: 148px;
  padding: 18px 15px 16px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-empty-state .ds-btn {
  min-height: 30px;
  height: 30px;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel {
  width: 296px !important;
  min-width: 296px !important;
  max-width: 296px !important;
  min-height: 472px;
  border-radius: 10px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head {
  padding: 13px 15px 11px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head h4 {
  font-size: 15px !important;
  line-height: 20px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head-actions {
  gap: 6px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel .ds-btn.ds-btn-sm {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel > .meta {
  padding: 9px 15px 0 !important;
  font-size: 12px;
  line-height: 16px;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi {
  padding: 9px 15px 0 !important;
  gap: 6px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi-item {
  min-height: 56px;
  padding: 8px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section {
  padding: 9px 15px 0 !important;
  gap: 5px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section-title {
  font-size: 12px;
  line-height: 16px;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-summary {
  min-height: 52px;
  max-height: 110px;
  padding: 8px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-thread {
  min-height: 144px !important;
  padding: 8px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-form {
  margin: 9px 15px 0 !important;
  padding: 9px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-input {
  min-height: 36px !important;
  height: 36px !important;
}

body.soc-desktop-shell #ticketsView .soc-pc-side-panel-actions {
  padding: 9px 15px 15px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi-item {
  min-height: 48px;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-summary {
  min-height: 40px;
  max-height: 72px;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread {
  min-height: 82px !important;
}

/* Guardrails-based refinement: reduce repeated chrome, tighten filters, and strengthen list/detail focus */
body.soc-desktop-shell #alertsView .soc-ops-workspace-helper,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-helper {
  display: none !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar {
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .soc-realtime-date-display,
body.soc-desktop-shell #alertsView .soc-ops-workspace-topbar .ds-btn,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .soc-realtime-date-display,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-topbar .ds-btn {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-row,
body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-row {
  gap: 8px !important;
  padding: 0 !important;
}

body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-summary,
body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-summary {
  font-size: 11px !important;
  line-height: 15px !important;
  color: var(--ui-text-secondary, var(--soc-text-sub)) !important;
}

body.soc-desktop-shell #alertsView .soc-alerts-filter-compact-btn,
body.soc-desktop-shell #ticketsView .soc-ticket-filter-compact-btn {
  min-height: 30px !important;
  height: 30px !important;
  padding-inline: 10px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis,
body.soc-desktop-shell #ticketsView #ticketStatusFilterChips {
  gap: 6px !important;
}

body.soc-desktop-shell #ticketsView #ticketStatusFilterChips .chip {
  min-height: 28px;
  padding: 0 9px;
  font-size: 11px;
  line-height: 14px;
  border-radius: 999px;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card,
body.soc-desktop-shell #ticketsView .soc-summary-card {
  min-height: 62px !important;
  padding: 8px 10px !important;
  gap: 3px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-label,
body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-label {
  font-size: 10px !important;
  line-height: 13px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-kpis > .soc-summary-card .soc-summary-value,
body.soc-desktop-shell #ticketsView .soc-summary-card .soc-summary-value {
  font-size: 22px !important;
  line-height: 1 !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-main,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-main {
  gap: 12px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-main {
  grid-template-columns: minmax(0, 1fr) 292px !important;
}

body.soc-desktop-shell #ticketsView .soc-ops-workspace-main {
  grid-template-columns: minmax(0, 1fr) 292px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-results-panel,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-panel {
  min-height: 460px !important;
  border-radius: 10px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head {
  min-height: 52px !important;
  padding: 12px 14px 10px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-results-head h3,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-results-head h3 {
  font-size: 14px !important;
  line-height: 18px !important;
}

body.soc-desktop-shell #alertsView .soc-workspace-inline-badge,
body.soc-desktop-shell #ticketsView .soc-workspace-inline-badge {
  min-height: 20px !important;
  padding: 0 7px !important;
  font-size: 10px !important;
  line-height: 13px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-list-header,
body.soc-desktop-shell #ticketsView .soc-pc-list-header {
  min-height: 34px !important;
  padding: 0 14px 8px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--ui-bg-surface-muted, #f7f8fb) 94%, #ffffff) !important;
}

body.soc-desktop-shell #alertsView .soc-pc-list-header > span,
body.soc-desktop-shell #ticketsView .soc-pc-list-header > span {
  font-size: 10px !important;
  line-height: 13px !important;
  color: var(--ui-text-tertiary, var(--soc-text-sub)) !important;
}

body.soc-desktop-shell #alertsView :is(.incident-list > .incident-card, .incident-list > .incident-ticket-card),
body.soc-desktop-shell #ticketsView .ticket-list > .ticket-card {
  min-height: 56px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView :is(.incident-title, .incident-comment-preview, .incident-ticket-description),
body.soc-desktop-shell #ticketsView :is(.ticket-title, .ticket-row-summary-type, .ticket-row-summary-site, .ticket-row-summary-updated, .ticket-row-summary-comment, .ticket-row-summary-requested) {
  font-size: 11px !important;
  line-height: 15px !important;
}

body.soc-desktop-shell #alertsView .incident-title,
body.soc-desktop-shell #ticketsView .ticket-title {
  font-size: 13px !important;
  line-height: 17px !important;
}

body.soc-desktop-shell #alertsView .soc-ops-workspace-detail-panel,
body.soc-desktop-shell #ticketsView .soc-ops-workspace-detail-panel {
  width: 292px !important;
  min-width: 292px !important;
  max-width: 292px !important;
  min-height: 460px !important;
  border-radius: 10px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-head,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head {
  padding: 12px 14px 10px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-head h4,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-head h4 {
  font-size: 14px !important;
  line-height: 18px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel > .meta,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel > .meta {
  display: none !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi {
  padding: 8px 14px 0 !important;
  gap: 6px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-kpi-item,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-kpi-item {
  min-height: 52px !important;
  padding: 8px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-section,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section {
  padding: 8px 14px 0 !important;
  gap: 4px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-section-title,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-section-title {
  font-size: 11px !important;
  line-height: 15px !important;
  color: var(--ui-text-secondary, var(--soc-text-sub)) !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-summary,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-summary {
  min-height: 48px !important;
  max-height: 92px !important;
  padding: 8px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-thread,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-thread {
  min-height: 120px !important;
  padding: 8px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-form,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-form {
  margin: 8px 14px 0 !important;
  padding: 8px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #alertsView .soc-pc-side-panel-actions,
body.soc-desktop-shell #ticketsView .soc-pc-side-panel-actions {
  padding: 8px 14px 14px !important;
}

body.soc-desktop-shell #analyticsView {
  gap: 16px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-top: 4px;
  padding-bottom: 4px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy {
  display: grid;
  gap: 4px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy h3 {
  margin: 0;
  letter-spacing: -0.04em;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar {
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: var(--ui-bg-surface, var(--soc-panel-bg)) !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-label {
  font-size: 11px !important;
  line-height: 14px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-range-quick .ds-btn,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-actions .ds-btn,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-picker-trigger {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  gap: 12px;
  align-items: start;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-main-column {
  display: grid;
  gap: 12px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-hero-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.84fr) minmax(0, 1.16fr);
  gap: 12px;
  align-items: stretch;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-card {
  padding: 14px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head {
  margin-bottom: 10px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-kicker {
  font-size: 11px !important;
  line-height: 14px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-help-btn {
  min-height: 24px !important;
  width: 24px !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge {
  width: 128px !important;
  height: 128px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap {
  inset: 22px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-label {
  display: none !important;
}

body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue {
  font-size: 34px !important;
  line-height: 1 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-badge-row {
  margin-bottom: 6px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--ui-text-secondary, var(--soc-text-sub)) !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
  border-radius: 12px !important;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg)) !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile {
  min-height: 64px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile + .soc-analytics-v2-kpi-tile {
  border-inline-start: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile .label,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item .label {
  font-size: 10px !important;
  line-height: 13px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile strong,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item strong {
  font-size: 18px !important;
  line-height: 22px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .meta {
  display: none !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head strong {
  font-size: 13px !important;
  line-height: 18px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-panel {
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ui-border-subtle, var(--soc-border)) !important;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg)) !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-legend {
  gap: 14px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-toolbar {
  gap: 8px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-controls {
  gap: 8px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field label {
  font-size: 11px !important;
  line-height: 14px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field :is(input, select) {
  min-height: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #analyticsView #analyticsComparisonContext.hidden {
  display: none !important;
}

body.soc-desktop-shell #analyticsView #analyticsComparisonContext {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 15px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-sort-head,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head > span {
  font-size: 10px !important;
  line-height: 13px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail {
  position: sticky;
  top: 72px;
  padding: 12px 14px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-summary {
  gap: 6px !important;
  margin-bottom: 10px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip {
  padding: 9px 10px !important;
  border-radius: 10px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-meta {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-empty,
body.soc-desktop-shell #analyticsView .soc-analytics-detail-empty {
  border-style: solid !important;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg)) !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs {
  gap: 10px !important;
  padding-bottom: 4px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs > button {
  min-height: 30px !important;
  font-size: 12px !important;
}

body.soc-desktop-shell #peopleView .soc-people-pane-summary .meta,
body.soc-desktop-shell #peopleView .soc-workspace-card-head .meta {
  display: none !important;
}

body.soc-desktop-shell #peopleView .soc-people-pane-summary {
  gap: 8px !important;
  padding: 12px 14px !important;
}

body.soc-desktop-shell #peopleView .soc-people-segment-rail {
  gap: 6px !important;
}

body.soc-desktop-shell #peopleView .soc-people-segment-btn {
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-strip {
  gap: 8px !important;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-card {
  padding: 12px !important;
  gap: 10px !important;
  border-radius: 12px !important;
  background: var(--ui-bg-surface, var(--soc-panel-bg)) !important;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-primary,
body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-success,
body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-accent {
  background: var(--ui-bg-surface, var(--soc-panel-bg)) !important;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-copy h4 {
  font-size: 13px !important;
  line-height: 17px !important;
}

body.soc-desktop-shell #peopleView .soc-people-kpi-number-block strong {
  font-size: 16px !important;
  line-height: 20px !important;
}

body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar {
  padding: 12px 14px !important;
  border-radius: 10px !important;
}

body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-row {
  align-items: center !important;
}

body.soc-desktop-shell #peopleView :is(.soc-employee-directory-field, .soc-monitoring-toolbar-field) > span {
  font-size: 11px !important;
  line-height: 14px !important;
  color: var(--ui-text-secondary, var(--soc-text-sub)) !important;
}

body.soc-desktop-shell #peopleView :is(.soc-employee-directory-field, .soc-monitoring-toolbar-field) :is(input, select) {
  min-height: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

body.soc-desktop-shell #peopleView .soc-employee-directory-grid,
body.soc-desktop-shell #peopleView .soc-monitoring-grid {
  border-radius: 10px !important;
}

body.soc-desktop-shell #peopleView .soc-people-directory-layout.has-detail-panel {
  grid-template-columns: minmax(0, 1fr) 360px !important;
}

body.soc-desktop-shell #peopleView .soc-people-detail-panel {
  border-radius: 10px !important;
}

/* ===== Phase 1 rebuild: shell / home / alerts / tickets ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell {
    --soc-desktop-sidebar-width: 232px;
    --soc-desktop-sidebar-expanded-width: 232px;
  }

  body.soc-desktop-shell .topbar {
    min-height: 60px;
    padding: 10px 20px;
    border-bottom: 1px solid #e6eaf1;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px) saturate(170%);
  }

  body.soc-desktop-shell .topbar-right {
    gap: 10px;
  }

  body.soc-desktop-shell .container.ds-page,
  body.soc-desktop-shell .container.admin-layout {
    padding-right: 0 !important;
    background:
      linear-gradient(180deg, #fbfcff 0%, #f5f7fb 100%) left top / var(--soc-desktop-sidebar-width) 100% no-repeat,
      linear-gradient(90deg, transparent calc(var(--soc-desktop-sidebar-width) - 1px), #e7ebf3 calc(var(--soc-desktop-sidebar-width) - 1px), #e7ebf3 var(--soc-desktop-sidebar-width), transparent var(--soc-desktop-sidebar-width)) left top / 100% 100% no-repeat,
      #f6f7fb !important;
  }

  body.soc-desktop-shell .container.ds-page > :not(#menuSheetPanel),
  body.soc-desktop-shell .container.admin-layout > :not(#menuSheetPanel) {
    padding-left: 28px;
    padding-right: 18px;
    padding-top: 24px;
    padding-bottom: 28px;
  }

  body.soc-desktop-shell #menuSheetPanel {
    background: linear-gradient(180deg, #fbfcff 0%, #f5f7fb 100%) !important;
    border-right: 1px solid #e7ebf3 !important;
  }

  body.soc-desktop-shell #menuSheetPanel #mobileMenuRootPage {
    padding: 18px 0 14px;
    gap: 12px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-section + .soc-menu-section {
    margin-top: 18px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-section-label {
    padding: 0 22px;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item {
    margin: 0 12px;
    border-radius: 12px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle {
    min-height: 40px;
    grid-template-columns: 18px minmax(0, 1fr) 16px;
    gap: 10px;
    padding: 0 12px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item {
    min-height: 38px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding: 0 12px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item::before {
    display: none;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-toggle.is-open {
    background: #eef2f8;
    color: #202430;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item.is-active {
    background: #fff0e8;
    color: var(--soc-primary-deep);
    box-shadow: none;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item-label,
  body.soc-desktop-shell #menuSheetPanel .soc-menu-group-label {
    font-size: 13px;
    line-height: 17px;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested {
    min-height: 30px;
    margin: 0 12px 0 28px;
    padding: 0 10px;
    border-radius: 10px;
  }

  body.soc-desktop-shell .soc-phase1-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell .soc-phase1-page-header-main {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  body.soc-desktop-shell .soc-phase1-kicker {
    color: #7d8699;
    font-size: 10px;
    line-height: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body.soc-desktop-shell .soc-phase1-page-header-main h2 {
    margin: 0;
    color: #202430;
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.03em;
  }

  body.soc-desktop-shell .soc-phase1-surface {
    border: 1px solid #e6eaf1 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #homeView {
    gap: 16px !important;
  }

  body.soc-desktop-shell #homeView .soc-home-phase1-header {
    margin-bottom: 0 !important;
  }

  body.soc-desktop-shell #homeView .soc-home-row--briefing {
    grid-template-columns: minmax(0, 1.48fr) minmax(280px, 0.76fr);
    gap: 14px;
  }

  body.soc-desktop-shell #homeView .soc-home-row--analysis,
  body.soc-desktop-shell #homeView .soc-home-row--activity {
    grid-template-columns: minmax(0, 1.26fr) minmax(320px, 0.74fr);
    gap: 14px;
  }

  body.soc-desktop-shell #homeView #homeWeeklyBriefing,
  body.soc-desktop-shell #homeView #homeHeroStatus,
  body.soc-desktop-shell #homeView #homeTrend7d,
  body.soc-desktop-shell #homeView #homeRiskSignals,
  body.soc-desktop-shell #homeView #homeActionNeededBlock,
  body.soc-desktop-shell #homeView #homeTicketBlock,
  body.soc-desktop-shell #homeView #homeRecentBlock,
  body.soc-desktop-shell #homeView .soc-home-summary-surface {
    padding: 18px 20px 16px !important;
  }

  body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-card {
    min-height: 98px;
    padding: 12px 14px;
    border: 1px solid #edf1f6 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-label,
  body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-subtext {
    font-size: 11px;
    line-height: 15px;
  }

  body.soc-desktop-shell #homeView .soc-home-summary-surface .soc-kpi-value {
    font-size: 28px;
    line-height: 1;
  }

  body.soc-desktop-shell #homeView #homeWeeklyBriefing .soc-block-head,
  body.soc-desktop-shell #homeView #homeHeroStatus .soc-hero-status-head {
    align-items: flex-start;
    gap: 10px;
  }

  body.soc-desktop-shell #homeView #homeWeeklyBriefing .soc-home-weekly-chart {
    gap: 10px;
  }

  body.soc-desktop-shell #homeView #homeWeeklyBriefing .soc-home-weekly-chart-item {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
  }

  body.soc-desktop-shell #homeView #homeHeroStatus {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
  }

  body.soc-desktop-shell #homeView #homeHeroStatus h3,
  body.soc-desktop-shell #homeView #homeTrend7d h3,
  body.soc-desktop-shell #homeView :is(#homeRiskSignals, #homeActionNeededBlock, #homeTicketBlock, #homeRecentBlock) h3 {
    font-size: 15px;
    line-height: 20px;
  }

  body.soc-desktop-shell #homeView #homeTrend7d .soc-sparkline-lg {
    height: 116px;
    margin-top: 10px;
  }

  body.soc-desktop-shell #homeView :is(#homeRiskSignals, #homeActionNeededBlock, #homeRecentBlock) .soc-list-mini {
    gap: 8px;
  }

  body.soc-desktop-shell #homeView :is(#homeRiskSignals, #homeActionNeededBlock, #homeRecentBlock) .soc-mini-row {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #edf1f6;
    background: #fafbfd;
  }

  body.soc-desktop-shell #homeView #homeActionNeededBlock {
    border-color: color-mix(in srgb, var(--soc-primary) 18%, #e6eaf1) !important;
    background: color-mix(in srgb, var(--soc-primary) 5%, #ffffff) !important;
  }

  body.soc-desktop-shell #homeView #homeActionNeededBlock .soc-mini-row {
    background: #ffffff;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) {
    gap: 0 !important;
    padding-top: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) > .soc-phase1-ops-surface {
    display: grid;
    gap: 14px;
    padding: 22px 22px 20px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #e9edf4 !important;
    border-radius: 14px !important;
    background: #f9fbfe !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary {
    margin: 0 !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #697286 !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-tab-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  body.soc-desktop-shell #ticketsView #ticketStatusFilterChips .chip {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e6eaf1;
    background: #ffffff;
    font-size: 12px;
    line-height: 16px;
  }

  body.soc-desktop-shell #ticketsView #ticketStatusFilterChips .chip.is-active {
    border-color: rgba(255, 106, 19, 0.24);
    background: #fff1e8;
    color: var(--soc-primary-deep);
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) #realtimeActiveFilters,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) #ticketsActiveFilters {
    margin-top: -2px;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-summary-strip {
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-summary-strip > .soc-summary-card {
    min-height: 68px !important;
    padding: 12px 13px !important;
    border-radius: 14px !important;
    border: 1px solid #e9edf4 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-summary-strip > .soc-summary-card .soc-summary-label {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-summary-strip > .soc-summary-card .soc-summary-value {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-main {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 14px !important;
    align-items: start;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-panel,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel {
    min-height: 560px !important;
    border: 1px solid #e9edf4 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    min-height: 0;
    padding: 16px 18px 12px !important;
    border: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head h3 {
    font-size: 15px !important;
    line-height: 20px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-summary {
    gap: 6px;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-badge {
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    border: 1px solid #e9edf4 !important;
    background: #f6f7fb !important;
    font-size: 11px !important;
    line-height: 14px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header {
    min-height: 30px !important;
    padding: 0 18px 8px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-list-header > span {
    color: #8b93a6 !important;
    font-size: 10px !important;
    line-height: 13px !important;
    letter-spacing: 0.04em;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list, .ticket-list) {
    border-top: 1px solid #eef2f6;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-card, .incident-ticket-card, .ticket-card) {
    min-height: 64px !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-card, .incident-ticket-card, .ticket-card)::before {
    display: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-list > .incident-card:last-child, .ticket-list > .ticket-card:last-child) {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-title, .ticket-title) {
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.incident-type, .incident-location, .incident-created-at, .incident-comment-preview, .incident-ticket-description, .ticket-row-summary-type, .ticket-row-summary-site, .ticket-row-summary-updated, .ticket-row-summary-comment, .ticket-row-summary-requested) {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-empty-state {
    min-height: 220px !important;
    padding: 28px 18px 24px !important;
    border-top: 1px solid #eef2f6;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
    color: #697286;
  }

  body.soc-desktop-shell #alertsView .soc-focus-cta {
    padding: 12px 14px;
    border: 1px solid #f5d8c3;
    border-radius: 14px;
    background: #fff6f0;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head {
    padding: 16px 18px 12px !important;
    border: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions {
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi {
    padding: 0 18px !important;
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item {
    min-height: 58px !important;
    padding: 10px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section {
    padding: 12px 18px 0 !important;
    gap: 6px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title {
    font-size: 11px !important;
    line-height: 15px !important;
    color: #7d8699 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(.soc-pc-side-panel-summary, .soc-pc-side-panel-thread) {
    border: 1px solid #edf1f6 !important;
    border-radius: 12px !important;
    background: #fbfcff !important;
    padding: 10px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form {
    margin: 12px 18px 0 !important;
    padding: 10px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-input {
    min-height: 36px !important;
    height: 36px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions {
    padding: 12px 18px 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-summary.hidden {
    display: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-empty-state {
    min-height: 180px !important;
    padding: 24px 18px 20px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-head {
    padding-bottom: 6px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-head-actions,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-section,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-actions {
    display: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .meta {
    display: block !important;
    margin: 0 18px 0 !important;
    color: #7d8699 !important;
    font-size: 12px !important;
    line-height: 17px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection {
    min-height: 220px !important;
    align-self: start;
  }
}

/* ===== Phase 2 rebuild loop: analytics + support roster ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell {
    display: block !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-main-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.soc-desktop-shell #analyticsView #analyticsHeroRow {
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr) !important;
    gap: 14px !important;
    align-items: stretch;
  }

  body.soc-desktop-shell #analyticsView :is(.soc-analytics-v2-card--risk, .soc-analytics-v2-card--kpis, .soc-analytics-v2-card--table, .soc-analytics-v2-card--detail) {
    border-radius: 16px !important;
    border-color: #e7ecf3 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #analyticsView :is(.soc-analytics-v2-card--risk, .soc-analytics-v2-card--kpis) {
    padding: 18px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--table {
    padding: 14px 16px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail {
    position: static !important;
    top: auto !important;
    padding: 16px 18px !important;
    min-height: 0 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap {
    width: 112px !important;
    height: 112px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-track {
    stroke: #edf1f6 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-arc {
    stroke: var(--soc-primary) !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy {
    display: none !important;
  }

  body.soc-desktop-shell #analyticsView :is(.soc-risk-grade.safe, .soc-risk-grade.stable) {
    border: 1px solid rgba(255, 106, 19, 0.22) !important;
    background: #fff1e8 !important;
    color: #c95a08 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-grade.caution {
    border: 1px solid rgba(255, 191, 60, 0.3) !important;
    background: #fff7df !important;
    color: #9a6700 !important;
  }

  body.soc-desktop-shell #analyticsView :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical) {
    border: 1px solid rgba(255, 107, 107, 0.28) !important;
    background: #fff1f1 !important;
    color: #c24141 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack {
    gap: 10px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile {
    min-height: 80px !important;
    border-radius: 12px !important;
    background: #fff9f5 !important;
    border-color: #f0e3d7 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-panel {
    border-radius: 14px !important;
    background: #fffaf7 !important;
    border-color: #f2e2d2 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .meta {
    display: none !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-bar {
    background: #f7e9dd !important;
    border-radius: 999px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe {
    background: #ff8a3d !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-warning {
    background: #ffbf3c !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-danger {
    background: #ff6b6b !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot {
    background: #ff8a3d !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="warning"] .dot {
    background: #ffbf3c !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="danger"] .dot {
    background: #ff6b6b !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-toolbar {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-controls {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) minmax(160px, 0.55fr) minmax(180px, 0.7fr);
    gap: 10px;
    align-items: end;
  }

  body.soc-desktop-shell #analyticsView #analyticsComparisonContext {
    display: none !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-shell {
    border: 1px solid #edf1f6;
    border-radius: 14px;
    overflow: hidden;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head {
    min-height: 34px;
    padding: 0 16px;
    background: #fbfcfe;
    border-bottom: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row {
    min-height: 58px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid #eef2f6 !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row:last-child {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row.is-selected {
    background: #fff8f3 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell--state .soc-risk-grade {
    min-height: 26px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail[data-scope="overall"] {
    background: #fffaf7 !important;
    border-color: #f0dfd2 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall {
    padding: 14px 18px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail .soc-analytics-v2-card-head {
    padding-bottom: 12px !important;
    border-bottom: 1px solid #eef2f6 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall .soc-analytics-v2-card-head {
    padding-bottom: 10px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px !important;
    margin: 14px 0 12px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip {
    min-height: 76px;
    border-radius: 12px !important;
    border: 1px solid #f0e3d7 !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-stat {
    min-height: 68px;
    border: 1px solid #edf1f6;
    border-radius: 12px;
    background: #fbfcfe;
    padding: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs {
    gap: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-body {
    min-height: 0 !important;
    padding-top: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall .soc-analytics-v2-detail-header-summary {
    margin-bottom: 10px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall .soc-analytics-v2-detail-meta {
    margin-bottom: 10px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.is-compact-overall .soc-analytics-v2-detail-body {
    padding-top: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-overall-compact-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-overall-compact-item {
    min-height: 70px;
    padding: 12px;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    background: #ffffff;
    display: grid;
    align-content: start;
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-overall-compact-item .label {
    font-size: 11px;
    line-height: 14px;
    color: #697286;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-overall-compact-item strong {
    font-size: 13px;
    line-height: 18px;
    color: #202430;
  }

  body.soc-desktop-shell #opsSupportPanel #opsSupportLayout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 396px) !important;
  }

  body.soc-desktop-shell #opsSupportPanel #opsSupportLayout:not(.has-detail-panel) #opsSupportSheet {
    display: none !important;
  }

  body.soc-desktop-shell #opsSupportPanel #opsSupportMain {
    width: 100%;
    min-width: 0;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-cell {
    min-height: 132px;
    border-radius: 12px;
  }

  body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet {
    max-width: 396px;
  }
}

/* ===== Phase 2 rebuild loop 3: analytics density + shople ring rhythm ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px 24px;
    margin-bottom: 2px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy h3 {
    margin: 0;
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.03em;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: end;
    gap: 10px 12px;
    padding: 12px 14px !important;
    border: 1px solid #e7ecf3 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-group {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-group--actions {
    align-self: stretch;
    justify-self: end;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-group--scope {
    min-width: 220px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-label {
    font-size: 11px !important;
    line-height: 14px !important;
    color: #7d8699 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-range-quick {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-range-quick .ds-btn,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-picker-trigger,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar-actions .ds-btn,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-custom-range :is(input, .ds-btn) {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px !important;
    align-items: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-shell.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.4fr);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-main-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
  }

  body.soc-desktop-shell #analyticsView #analyticsHeroRow {
    grid-template-columns: minmax(296px, 0.62fr) minmax(0, 1.38fr) !important;
    gap: 12px !important;
    align-items: stretch;
  }

  body.soc-desktop-shell #analyticsView :is(.soc-analytics-v2-card--risk, .soc-analytics-v2-card--kpis, .soc-analytics-v2-card--table, .soc-analytics-v2-card--detail) {
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #analyticsView :is(.soc-analytics-v2-card--risk, .soc-analytics-v2-card--kpis) {
    padding: 16px 18px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head {
    padding: 0 !important;
    border: 0 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk {
    display: grid;
    align-content: start;
    gap: 12px;
    background: #ffffff !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk .soc-analytics-v2-title-with-help {
    align-items: center;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk .soc-risk-info-trigger {
    min-width: 26px;
    min-height: 26px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 999px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap {
    width: 110px !important;
    height: 110px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-track {
    stroke: #edf1f6 !important;
    stroke-width: 12px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-arc {
    stroke: var(--soc-primary) !important;
    stroke-width: 12px !important;
    stroke-linecap: round;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap strong {
    font-size: 22px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-label {
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy {
    display: block !important;
    margin: 0;
    color: #3b4458;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item {
    min-height: 56px;
    padding: 10px 11px;
    border: 1px solid #edf1f6;
    border-radius: 12px;
    background: #ffffff;
    display: grid;
    align-content: start;
    gap: 4px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item:last-child {
    grid-column: 1 / -1;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item .label {
    color: #7d8699;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item strong {
    color: #202430;
    font-size: 13px;
    line-height: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-grade.safe,
  body.soc-desktop-shell #analyticsView .soc-risk-grade.stable {
    border: 1px solid #cfe6df !important;
    background: #ffffff !important;
    color: #178f79 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-grade.caution {
    border: 1px solid #ffd79c !important;
    background: #ffffff !important;
    color: #9a6700 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-risk-grade.danger,
  body.soc-desktop-shell #analyticsView .soc-risk-grade.risk,
  body.soc-desktop-shell #analyticsView .soc-risk-grade.critical {
    border: 1px solid #ffc0c0 !important;
    background: #ffffff !important;
    color: #d35151 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--kpis {
    display: grid;
    align-content: start;
    gap: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-cluster {
    display: grid;
    gap: 12px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile {
    min-height: 72px !important;
    padding: 12px 14px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile .label {
    color: #7d8699;
    font-size: 11px;
    line-height: 15px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile strong {
    color: #202430;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.02em;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-panel {
    padding: 12px 14px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    display: grid;
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head {
    align-items: start;
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .label {
    color: #7d8699;
    font-size: 11px;
    line-height: 14px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head strong {
    color: #202430;
    font-size: 15px;
    line-height: 20px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-bar {
    height: 10px;
    border-radius: 999px !important;
    background: #eef2f6 !important;
    overflow: hidden;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe {
    background: #94a3b8 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-warning {
    background: #ffbf3c !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-danger {
    background: #ff6b6b !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item {
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid #edf1f6;
    border-radius: 12px;
    background: #ffffff;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot {
    background: #94a3b8 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="warning"] .dot {
    background: #ffbf3c !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="danger"] .dot {
    background: #ff6b6b !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--table {
    padding: 14px 16px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-toolbar {
    display: grid;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-controls {
    display: grid;
    grid-template-columns: minmax(260px, 1.42fr) minmax(140px, 0.55fr) minmax(220px, 0.82fr);
    align-items: end;
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field {
    gap: 6px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field label {
    color: #7d8699;
    font-size: 11px;
    line-height: 14px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field :is(input, select) {
    min-height: 36px;
    height: 36px;
    border-radius: 10px;
  }

  body.soc-desktop-shell #analyticsView #analyticsComparisonContext {
    display: none !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-shell {
    border: 1px solid #edf1f6;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head {
    min-height: 36px;
    padding: 0 14px;
    background: #fbfcfe;
    border-bottom: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head :is(button, span) {
    color: #7d8699;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-body {
    height: auto !important;
    max-height: none !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row {
    min-height: 60px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row:last-child {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row.is-selected {
    background: #fff6ef !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell--name strong {
    font-size: 13px;
    line-height: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell--name small,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-cell--trend {
    font-size: 11px;
    line-height: 15px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail {
    position: sticky !important;
    top: 16px !important;
    padding: 16px 18px !important;
    min-height: 0 !important;
    align-self: start;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail.hidden {
    display: none !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail .soc-analytics-v2-card-head {
    padding-bottom: 12px !important;
    border-bottom: 1px solid #eef2f6 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    margin: 12px 0 10px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip {
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #edf1f6 !important;
    border-radius: 12px !important;
    background: #fbfcfe !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip .label {
    font-size: 10px;
    line-height: 13px;
    color: #7d8699;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-header-chip strong {
    font-size: 13px;
    line-height: 18px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0 0 8px !important;
    border-top: 0 !important;
    border-bottom: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs button {
    min-height: 0;
    height: auto;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #697286;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-tabs button.is-active {
    border-bottom-color: var(--soc-primary);
    color: var(--soc-primary-deep);
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
    margin: 12px 0 10px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-stat {
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid #edf1f6;
    border-radius: 12px;
    background: #ffffff;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-detail-body {
    min-height: 0 !important;
    padding-top: 0 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-detail-stack {
    gap: 10px;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-detail-section {
    gap: 8px;
  }

  body.soc-desktop-shell #analyticsView .soc-mini-row.soc-analytics-overview-row,
  body.soc-desktop-shell #analyticsView .soc-analytics-detail-list-item,
  body.soc-desktop-shell #analyticsView .soc-analytics-breakdown-row {
    border-radius: 12px;
    border: 1px solid #edf1f6;
    background: #fbfcfe;
  }
}

/* ===== Phase 3 rebuild loop 1: people workspace / shople members rhythm ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell #peopleView {
    gap: 14px;
  }

  body.soc-desktop-shell #peopleView .soc-people-admin-header-wrap {
    display: grid;
    gap: 8px;
    margin-bottom: 0;
  }

  body.soc-desktop-shell #peopleView .soc-people-admin-title-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
  }

  body.soc-desktop-shell #peopleView .soc-people-admin-title-block {
    gap: 2px;
  }

  body.soc-desktop-shell #peopleView .soc-people-admin-title-block h3 {
    margin: 0;
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.03em;
  }

  body.soc-desktop-shell #peopleView .soc-people-pane-summary {
    display: grid;
    gap: 10px !important;
    padding: 14px 16px !important;
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-pane-summary-head {
    align-items: end;
    justify-content: space-between;
    gap: 12px;
  }

  body.soc-desktop-shell #peopleView .soc-people-pane-summary-eyebrow {
    margin: 0;
    color: #7d8699;
    font-size: 10px;
    line-height: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body.soc-desktop-shell #peopleView .soc-people-pane-summary-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.02em;
  }

  body.soc-desktop-shell #peopleView .soc-people-segment-rail {
    gap: 6px !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-segment-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    border-color: #e6eaf1 !important;
    background: #ffffff !important;
    color: #697286 !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-segment-btn.is-active,
  body.soc-desktop-shell #peopleView .soc-people-segment-btn[aria-pressed="true"] {
    border-color: rgba(255, 106, 19, 0.22) !important;
    background: #fff3ea !important;
    color: #c95a08 !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-card {
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 14px !important;
    background: #fbfcfe !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-primary,
  body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-success,
  body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-accent {
    background: #fbfcfe !important;
    border-color: #edf1f6 !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-head {
    gap: 8px;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #fff1e8;
    color: var(--soc-primary);
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-icon svg {
    width: 18px;
    height: 18px;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-copy h4 {
    font-size: 13px;
    line-height: 18px;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-donut-row {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  body.soc-desktop-shell #peopleView .soc-people-donut {
    width: 96px;
    height: 96px;
  }

  body.soc-desktop-shell #peopleView .soc-people-donut::after {
    inset: 12px;
    background: #ffffff;
  }

  body.soc-desktop-shell #peopleView .soc-people-donut-center {
    width: min(62px, calc(100% - 28px));
    gap: 1px;
  }

  body.soc-desktop-shell #peopleView .soc-people-donut-center span {
    font-size: 10px;
    line-height: 13px;
  }

  body.soc-desktop-shell #peopleView .soc-people-donut-center strong {
    font-size: 19px;
    line-height: 22px;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-legend {
    gap: 6px;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-legend-row,
  body.soc-desktop-shell #peopleView .soc-people-kpi-inline-row,
  body.soc-desktop-shell #peopleView .soc-people-bar-row-head {
    font-size: 12px;
    line-height: 16px;
  }

  body.soc-desktop-shell #peopleView .soc-people-progress,
  body.soc-desktop-shell #peopleView .soc-people-bar-track {
    height: 8px;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-number-block strong {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.03em;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-number-block span {
    font-size: 11px;
    line-height: 15px;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-subsection {
    display: grid;
    gap: 8px;
    padding-top: 2px;
    border-top: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-subsection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #7d8699;
    font-size: 10px;
    line-height: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.soc-desktop-shell #peopleView .soc-people-bar-row.is-compact {
    gap: 4px;
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar {
    display: grid;
    gap: 8px;
    padding: 12px 14px !important;
    border: 1px solid #e7ecf3 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-row {
    align-items: end;
    gap: 12px;
  }

  body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-main {
    gap: 10px;
  }

  body.soc-desktop-shell #peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls) .soc-inline-field {
    gap: 6px;
  }

  body.soc-desktop-shell #peopleView :is(.soc-employee-directory-field > span, .soc-monitoring-toolbar-field > span) {
    color: #7d8699;
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    padding-left: 0;
  }

  body.soc-desktop-shell #peopleView .soc-employee-directory-search {
    flex: 1 1 360px;
  }

  body.soc-desktop-shell #peopleView .soc-employee-directory-field:not(.soc-employee-directory-search),
  body.soc-desktop-shell #peopleView .soc-monitoring-toolbar-field:not(.soc-monitoring-toolbar-search) {
    flex: 0 1 150px;
  }

  body.soc-desktop-shell #peopleView :is(.soc-employee-directory-toolbar-main, .soc-monitoring-toolbar-controls) :is(input, select, .ds-input, .ds-select),
  body.soc-desktop-shell #peopleView .soc-people-workspace-toolbar-utility .ds-btn {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  body.soc-desktop-shell #peopleView .soc-employee-directory-toolbar-note {
    display: block !important;
    margin: 0;
    color: #7d8699;
    font-size: 11px;
    line-height: 15px;
  }

  body.soc-desktop-shell #peopleView .soc-people-directory-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-directory-layout.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) 360px !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-directory-layout:not(.has-detail-panel) .soc-people-detail-panel {
    display: none !important;
  }

  body.soc-desktop-shell #peopleView .soc-employee-directory-grid {
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #peopleView .soc-workspace-card-head {
    padding: 14px 16px 10px !important;
    border: 0 !important;
  }

  body.soc-desktop-shell #peopleView .soc-workspace-card-head h3 {
    font-size: 15px;
    line-height: 20px;
  }

  body.soc-desktop-shell #peopleView .soc-employee-directory-grid-wrap {
    border-top: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #peopleView .soc-employee-directory-table th,
  body.soc-desktop-shell #peopleView .soc-employee-directory-table td {
    padding: 10px 12px;
  }

  body.soc-desktop-shell #peopleView .soc-employee-directory-table thead th {
    background: #fbfcfe;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
    color: #7d8699;
  }

  body.soc-desktop-shell #peopleView .soc-employee-directory-table tbody td {
    font-size: 12px;
    line-height: 17px;
  }

  body.soc-desktop-shell #peopleView .soc-people-table-identity {
    gap: 10px;
  }

  body.soc-desktop-shell #peopleView .soc-people-avatar {
    width: 36px;
    height: 36px;
    font-size: 11px;
    background: #fff1e8;
    color: #c95a08;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 96px);
    overflow: hidden;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel-head {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel-heading h3 {
    color: #202430;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.02em;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel-heading .meta {
    display: block;
    color: #7d8699;
    font-size: 11px;
    line-height: 15px;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-summary {
    display: none !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel-body {
    padding: 12px 16px 16px;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-empty {
    min-height: 180px;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border-style: solid;
    border-color: #edf1f6;
    background: #fbfcfe;
  }

  body.soc-desktop-shell #peopleView .soc-people-detail-panel-actions {
    padding: 12px 16px 16px;
    border-top: 1px solid #eef2f6;
    background: #ffffff;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-detail-shell {
    gap: 14px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-hero {
    gap: 12px;
    padding: 0 0 12px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 16px;
    background: #fff1e8;
    color: #c95a08;
    box-shadow: none;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-hero-copy strong {
    font-size: 22px;
    line-height: 26px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-hero-copy .meta,
  body.soc-desktop-shell #peopleView .soc-people-employee-hero-context {
    font-size: 12px;
    line-height: 16px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-tab-rail {
    gap: 14px;
    padding-bottom: 10px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-tab-btn {
    padding-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-tab-btn::after {
    bottom: -10px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-info-card {
    grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-info-card strong {
    font-size: 14px;
    line-height: 20px;
  }

  body.soc-desktop-shell #peopleView .soc-people-employee-info-card.is-prominent strong {
    font-size: 19px;
    line-height: 24px;
  }
}

/* ===== Phase 3 rebuild loop 2c: people accounts / stats / score eof overrides ===== */
@media (min-width: 1200px) {
  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-people-kpi-strip,
  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid,
  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card {
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-wrap {
    border-top: 1px solid #eef2f6;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table th,
  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table td {
    padding: 10px 12px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table thead th {
    background: #fbfcfe;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
    color: #7d8699;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-table tbody td {
    font-size: 12px;
    line-height: 17px;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-primary {
    color: #202430;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
  }

  body.soc-desktop-shell #peopleView #peopleHubAccountsPane .soc-monitoring-grid-secondary {
    color: #7d8699;
    font-size: 11px;
    line-height: 15px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(1) {
    order: 3 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(2) {
    order: 2 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(3) {
    order: 1 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(4) {
    order: 4 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head {
    padding: 14px 16px 10px !important;
    border: 0 !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-workspace-card-head h3 {
    color: #202430;
    font-size: 15px;
    line-height: 20px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell {
    padding: 4px 16px 16px !important;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-chart {
    min-height: 180px !important;
    align-items: end;
    gap: 10px;
  }

  body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-trend-bars {
    height: 112px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card:nth-child(4) {
    display: none !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-main-grid {
    grid-template-columns: minmax(0, 1fr) 360px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  body.soc-desktop-shell #employeeScorePanel.has-score-focus .soc-employee-score-detail-panel {
    position: sticky !important;
    top: 16px !important;
    align-self: start !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-filter-bar,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-primary-card,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-ranking-section,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-detail-panel {
    border: 1px solid #e7ecf3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-card {
    min-height: 214px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-summary-visual {
    min-height: 100px;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-site-row {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th,
  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td {
    padding: 10px 12px !important;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table th {
    background: #fbfcfe;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.04em;
    color: #7d8699;
  }

  body.soc-desktop-shell #employeeScorePanel .soc-employee-score-table td {
    font-size: 12px;
    line-height: 17px;
  }
}


/* ===== Pass20b sidebar alignment winner overrides ===== */
body.nav-open #menuSheetPanel .soc-menu-submenu-list {
  padding: 2px 0 0 0 !important;
}

body.nav-open #menuSheetPanel .soc-menu-subitem,
body.nav-open #menuSheetPanel .soc-menu-sub-item--nested {
  margin-inline: 0 !important;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item--nested {
  min-height: 34px !important;
  padding: 0 12px !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 10px !important;
}

body.nav-open #menuSheetPanel .soc-menu-sub-item--nested .soc-menu-submenu-bullet {
  justify-self: center;
  align-self: center;
}

@media (min-width: 1024px) {
  body.soc-desktop-shell #menuSheetPanel .pc-sidebar-only .soc-menu-submenu-list {
    padding: 2px 0 0 0 !important;
    gap: 2px !important;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested {
    margin: 0 12px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }

  body.soc-desktop-shell #menuSheetPanel .soc-menu-sub-item--nested .soc-menu-submenu-bullet {
    justify-self: center;
    align-self: center;
  }
}

/* ===== Pass20c analytics hierarchy + fixed 5-row comparison pager ===== */
body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head {
  margin-bottom: 14px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-section-title {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #202430 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-title-with-help {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--kpis {
  min-height: 264px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk {
  background: #ffffff !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body {
  grid-template-columns: 136px minmax(0, 1fr) !important;
  gap: 18px !important;
  min-height: 0 !important;
  align-items: center !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap {
  position: relative !important;
  width: 136px !important;
  height: 136px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: start !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge {
  width: 136px !important;
  height: 136px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-wrap strong,
body.soc-desktop-shell #analyticsView #analyticsRiskScoreValue {
  font-size: 42px !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-value-label {
  font-size: 11px !important;
  line-height: 15px !important;
  font-weight: 700 !important;
  color: #697286 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary-copy {
  font-size: 14px !important;
  line-height: 20px !important;
  color: #202430 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item {
  min-height: 64px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item .label,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile .label,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item .label,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-control-field label {
  font-size: 12px !important;
  line-height: 16px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item strong {
  font-size: 15px !important;
  line-height: 20px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile {
  min-height: 84px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile strong {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head .label {
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: 800 !important;
  color: #202430 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head strong {
  font-size: 14px !important;
  line-height: 19px !important;
  color: #697286 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-segment.is-safe,
body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item[data-tone="safe"] .dot {
  background: #18b26b !important;
}

body.soc-desktop-shell #analyticsView :is(.soc-risk-grade.safe, .soc-risk-grade.stable) {
  border-color: rgba(24, 178, 107, 0.42) !important;
  background: #ffffff !important;
  color: #0f8a51 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--table {
  --analytics-comparison-row-height: 68px;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-shell {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head {
  min-height: 44px !important;
  padding: 0 16px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-head :is(button, span) {
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-body {
  display: grid !important;
  grid-auto-rows: var(--analytics-comparison-row-height) !important;
  min-height: calc(var(--analytics-comparison-row-height) * 5) !important;
  max-height: calc(var(--analytics-comparison-row-height) * 5) !important;
  height: calc(var(--analytics-comparison-row-height) * 5) !important;
  overflow: hidden !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row {
  min-height: var(--analytics-comparison-row-height) !important;
  height: var(--analytics-comparison-row-height) !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row.is-placeholder {
  pointer-events: none !important;
  background: #ffffff !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-site-row.is-placeholder > * {
  opacity: 0 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-site-list-empty {
  display: grid !important;
  place-items: center !important;
  min-height: 100% !important;
  padding: 16px !important;
  color: #697286 !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 56px !important;
  padding: 10px 16px !important;
  border-top: 1px solid #eef2f6 !important;
  background: #fbfcfe !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-pager {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-pager.hidden {
  display: none !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-page-btn {
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid #d7dee8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #445067 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-page-btn.is-active {
  border-color: #ff6a13 !important;
  background: #fff4eb !important;
  color: #ff6a13 !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-page-btn:disabled {
  opacity: 0.42 !important;
  cursor: default !important;
}

body.soc-desktop-shell #analyticsView .soc-analytics-v2-page-ellipsis {
  color: #8a94a6 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* ===== Pass21 page header hierarchy audit ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell {
    --soc-workspace-page-title-size: 32px;
    --soc-workspace-page-title-line: 40px;
    --soc-workspace-page-title-weight: 800;
  }

  body.soc-desktop-shell .soc-workspace-page-title {
    margin: 0 !important;
    font-size: var(--soc-workspace-page-title-size) !important;
    line-height: var(--soc-workspace-page-title-line) !important;
    font-weight: var(--soc-workspace-page-title-weight) !important;
    letter-spacing: -0.03em !important;
    color: #202430 !important;
  }

  body.soc-desktop-shell :is(
    #homeView .soc-phase1-page-header-main,
    #alertsView .soc-phase1-page-header-main,
    #ticketsView .soc-phase1-page-header-main,
    #analyticsView .soc-analytics-v2-header-copy,
    #peopleView .soc-people-admin-title-block,
    #employeeScorePanel > .panel-title-row .soc-page-header-main,
    #opsSupportPanel > .panel-title-row .soc-page-header-main,
    #announcementPanel .workspace-head-main,
    #notificationPanel .soc-page-header-main,
    #notificationSettingsPanel .soc-page-header-main,
    #googleSheetsPanel .soc-apple-weekly-page-title-copy,
    #googleSheetsPanel > .panel-title-row .title-inline
  ) {
    display: grid !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  body.soc-desktop-shell :is(
    #homeView .soc-phase1-page-header,
    #alertsView .soc-phase1-page-header,
    #ticketsView .soc-phase1-page-header,
    #analyticsView .soc-analytics-v2-header,
    #peopleView .soc-people-admin-title-row,
    #employeeScorePanel > .panel-title-row,
    #opsSupportPanel > .panel-title-row,
    #announcementPanel .workspace-head,
    #notificationPanel .notification-panel-head,
    #notificationSettingsPanel .soc-settings-page-header,
    #googleSheetsPanel .soc-apple-weekly-page-head,
    #googleSheetsPanel > .panel-title-row
  ) {
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    padding-top: 4px !important;
  }

  body.soc-desktop-shell .soc-phase1-kicker {
    display: none !important;
  }

  body.soc-desktop-shell :is(
    #homeView .soc-phase1-page-header-main,
    #alertsView .soc-phase1-page-header-main,
    #ticketsView .soc-phase1-page-header-main
  ) {
    gap: 0 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-header {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy {
    gap: 0 !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-admin-header-wrap {
    gap: 14px !important;
    margin-bottom: 0 !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-admin-title-row {
    align-items: flex-start !important;
  }

  body.soc-desktop-shell :is(
    #employeeScoreSummaryText,
    #noticesViewSubtitle,
    #opsSupportPanel > .panel-title-row .help
  ) {
    display: none !important;
  }

  body.soc-desktop-shell :is(
    #announcementPanel .workspace-head,
    #notificationPanel .notification-panel-head,
    #notificationSettingsPanel .soc-settings-page-header,
    #googleSheetsPanel .soc-apple-weekly-page-head
  ) {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) > .soc-phase1-ops-surface,
  body.soc-desktop-shell #ticketsView .soc-ops-workspace-frame {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-page-header {
    padding: 4px 0 2px !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) :is(
    .soc-realtime-datebar,
    #realtimeActiveFilters,
    #ticketsActiveFilters,
    #realtimeSummaryGrid,
    #ticketSummaryGrid,
    .soc-ops-workspace-main,
    .soc-phase1-tab-rail,
    #focusFallbackCta
  ) {
    margin-inline: 0 !important;
  }
}

/* ===== Pass22 section title hierarchy audit ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell {
    --soc-workspace-section-title-size: 20px;
    --soc-workspace-section-title-line: 28px;
    --soc-workspace-section-title-weight: 800;
    --soc-workspace-card-title-size: 16px;
    --soc-workspace-card-title-line: 24px;
    --soc-workspace-card-title-weight: 700;
    --soc-workspace-micro-title-size: 14px;
    --soc-workspace-micro-title-line: 20px;
    --soc-workspace-micro-title-weight: 700;
  }

  body.soc-desktop-shell :is(
    #analyticsView .soc-analytics-v2-section-title,
    #peopleView .soc-people-pane-summary-head h3,
    #employeeScorePanel .soc-employee-score-filter-bar .soc-workspace-card-head h3,
    #googleSheetsPanel .soc-apple-weekly-flow-header h3
  ) {
    margin: 0 !important;
    font-size: var(--soc-workspace-section-title-size) !important;
    line-height: var(--soc-workspace-section-title-line) !important;
    font-weight: var(--soc-workspace-section-title-weight) !important;
    letter-spacing: -0.025em !important;
    color: #202430 !important;
  }

  body.soc-desktop-shell :is(
    #homeView #homeWeeklyBriefing .soc-home-briefing-title h3,
    #homeView #homeHeroStatus .soc-hero-status-head h3,
    #homeView :is(#homeTrend7d, #homeTicketBlock) .soc-block-head h3,
    #homeView :is(#homeRiskSignals, #homeActionNeededBlock, #homeRecentBlock) > h3,
    #alertsView .soc-alerts-feed-head h3,
    #ticketsView .soc-alerts-feed-head h3,
    #alertsView .soc-pc-side-panel-head h4,
    #ticketsView .soc-pc-side-panel-head h4,
    #peopleView .soc-workspace-card-head h3,
    #employeeScorePanel :is(#employeeScoreSiteComparisonSection, #employeeScoreRankingSection, #employeeScoreSiteInsightPanel) .soc-workspace-card-head h3,
    #googleSheetsPanel .soc-apple-weekly-setup-section-head h4
  ) {
    margin: 0 !important;
    font-size: var(--soc-workspace-card-title-size) !important;
    line-height: var(--soc-workspace-card-title-line) !important;
    font-weight: var(--soc-workspace-card-title-weight) !important;
    letter-spacing: -0.02em !important;
    color: #202430 !important;
  }

  body.soc-desktop-shell :is(
    #peopleView .soc-people-kpi-copy h4,
    #peopleView .soc-people-kpi-subsection-head,
    #googleSheetsPanel .soc-apple-weekly-guide-card h4,
    #googleSheetsPanel .soc-apple-weekly-setup-callout strong,
    #googleSheetsPanel .soc-apple-weekly-setup-callout h5
  ) {
    font-size: var(--soc-workspace-micro-title-size) !important;
    line-height: var(--soc-workspace-micro-title-line) !important;
    font-weight: var(--soc-workspace-micro-title-weight) !important;
    letter-spacing: -0.01em !important;
  }

  body.soc-desktop-shell :is(
    #homeView .soc-block-head,
    #alertsView .soc-alerts-feed-head,
    #ticketsView .soc-alerts-feed-head,
    #alertsView .soc-pc-side-panel-head,
    #ticketsView .soc-pc-side-panel-head,
    #peopleView .soc-workspace-card-head,
    #employeeScorePanel .soc-workspace-card-head,
    #googleSheetsPanel .soc-apple-weekly-flow-header,
    #googleSheetsPanel .soc-apple-weekly-setup-section-head
  ) {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.soc-desktop-shell #homeView :is(
    #homeWeeklyBriefing .soc-block-head,
    #homeHeroStatus .soc-hero-status-head
  ) {
    min-height: 24px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head {
    margin-bottom: 12px !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-flow-header {
    gap: 8px !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-section-head {
    margin-bottom: 0 !important;
  }
}

/* ===== Pass23 row baseline audit ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell #homeView > :is(
    .soc-home-row--briefing,
    .soc-home-row--analysis,
    .soc-home-row--activity
  ) {
    align-items: stretch !important;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--briefing > :is(#homeWeeklyBriefing, #homeHeroStatus),
  body.soc-desktop-shell #homeView > .soc-home-row--analysis > :is(#homeTrend7d, .soc-home-support-stack),
  body.soc-desktop-shell #homeView > .soc-home-row--activity > :is(#homeTicketBlock, #homeRecentBlock) {
    height: 100% !important;
    min-height: 0 !important;
  }

  body.soc-desktop-shell #homeView > .soc-home-row--analysis .soc-home-support-stack {
    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    align-content: stretch !important;
    gap: 10px !important;
  }

  body.soc-desktop-shell #homeView :is(
    #homeHeroStatus,
    #homeTrend7d,
    #homeTicketBlock,
    #homeRecentBlock,
    #homeRiskSignals,
    #homeActionNeededBlock
  ) {
    display: grid !important;
    align-content: start !important;
  }

  body.soc-desktop-shell #homeView #homeHeroStatus {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  body.soc-desktop-shell #homeView #homeTrend7d {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  body.soc-desktop-shell #homeView #homeTicketBlock {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  body.soc-desktop-shell #homeView :is(#homeRecentBlock, #homeRiskSignals, #homeActionNeededBlock) {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body.soc-desktop-shell #homeView :is(#homeRiskSignalsList, #homeActionNeededList, #homeRecentList) {
    align-content: start !important;
  }
}

/* ===== Pass24 rhythm + chrome audit ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell #homeView #homeTicketBlock {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px 18px 16px !important;
  }

  body.soc-desktop-shell #homeView #homeTicketBlock .soc-block-head {
    margin-bottom: 0 !important;
  }

  body.soc-desktop-shell #homeView #homeTicketPendingMeta {
    margin: 0 !important;
  }

  body.soc-desktop-shell #homeView #homeTicketBlock .soc-ticket-mini-dist {
    margin: 0 !important;
    gap: 6px !important;
  }

  body.soc-desktop-shell #homeView #homeTicketPendingList {
    margin-top: 2px !important;
  }

  body.soc-desktop-shell #homeView #homeTicketPendingBtn {
    margin-top: auto !important;
    align-self: flex-start !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--risk,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--kpis {
    min-height: 244px !important;
    padding: 14px 16px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card-head {
    margin-bottom: 8px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-body {
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge-wrap,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-gauge {
    width: 128px !important;
    height: 128px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-summary {
    gap: 8px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-badge-row {
    padding-inline-start: 20px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta {
    gap: 8px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-risk-meta-item {
    min-height: 0 !important;
    padding: 10px 12px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-cluster {
    gap: 8px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-rack {
    gap: 0 !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 14px !important;
    background: #fafbfd !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile {
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-kpi-tile + .soc-analytics-v2-kpi-tile {
    border-left: 1px solid #edf1f6 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-panel {
    gap: 10px !important;
    padding: 12px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #edf1f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-head {
    gap: 4px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-bar {
    height: 8px !important;
    background: #e6eaf1 !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-legend {
    gap: 8px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-health-item {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--table,
  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail {
    padding: 14px 16px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-table-toolbar {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  body.soc-desktop-shell #analyticsView .soc-analytics-v2-card--detail .soc-analytics-v2-card-head {
    margin-bottom: 10px !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-flow-shell {
    gap: 6px !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-flow-header {
    gap: 6px !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-flow-main {
    padding: 14px !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-stage-surface {
    gap: 10px !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-step-stack {
    gap: 10px !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-section {
    gap: 10px !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-section + .soc-apple-weekly-setup-section {
    padding-top: 14px !important;
    border-top: 1px solid #edf1f6 !important;
  }

  body.soc-desktop-shell #googleSheetsPanel .soc-apple-weekly-setup-section-head {
    gap: 8px !important;
  }
}

/* ===== Pass25 detail rhythm + people chrome audit ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel {
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head {
    padding: 0 !important;
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel > .meta,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi {
    gap: 0 !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 10px !important;
    background: #fafbfd !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item {
    min-height: 0 !important;
    padding: 10px 9px !important;
    border: 0 !important;
    border-right: 1px solid #edf1f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:last-child {
    border-right: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section {
    gap: 4px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title {
    font-size: 11px !important;
    line-height: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #7d8699 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary {
    min-height: 56px !important;
    max-height: 108px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: #fafbfd !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread {
    min-height: 132px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form {
    padding-top: 2px !important;
    border-top: 1px solid #edf1f6 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions {
    padding-top: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel {
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-thread {
    min-height: 88px !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-pane-summary {
    gap: 8px !important;
    padding: 14px 16px !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-strip {
    gap: 0 !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 16px !important;
    background: #fbfcfe !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-card {
    gap: 8px !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-right: 1px solid #edf1f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-card:last-child {
    border-right: 0 !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-primary,
  body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-success,
  body.soc-desktop-shell #peopleView .soc-people-kpi-card.tone-accent {
    background: transparent !important;
    border-color: #edf1f6 !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-head {
    gap: 6px !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-subsection {
    gap: 6px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-legend {
    gap: 4px !important;
  }

  body.soc-desktop-shell #peopleView .soc-people-kpi-legend-row,
  body.soc-desktop-shell #peopleView .soc-people-kpi-inline-row,
  body.soc-desktop-shell #peopleView .soc-people-bar-row-head {
    font-size: 11px !important;
    line-height: 15px !important;
  }
}

/* ===== Pass26 ops detail cleanup final ===== */
@media (min-width: 1024px) {
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 40px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    flex: 1 1 460px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-main:has(.soc-phase1-toolbar-summary.hidden) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-topbar .soc-realtime-date-display {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions {
    gap: 6px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-phase1-toolbar-actions .ds-btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 72px !important;
    padding: 14px 16px 10px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-results-head h3 {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-workspace-inline-summary {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel {
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head h4 {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions {
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-head-actions .ds-btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-danger-btn {
    color: #d46464 !important;
    border-color: #f1d6d6 !important;
    background: #fffafa !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel > .meta {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    color: #697286 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty {
    display: none;
    gap: 4px;
    padding-top: 2px;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-title {
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: #202430;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-empty-copy {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    color: #697286;
    word-break: keep-all;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
    overflow: hidden !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-right: 1px solid #e6eaf1 !important;
    border-bottom: 1px solid #e6eaf1 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:first-child {
    grid-column: 1 / -1 !important;
    border-right: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(2) {
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-item:nth-child(3) {
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 11px !important;
    line-height: 15px !important;
    color: #7d8699 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kpi-value {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    color: #202430 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section {
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-section-title {
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #525d73 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-summary {
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv {
    gap: 8px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row dt {
    font-size: 12px !important;
    line-height: 17px !important;
    color: #7d8699 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-kv-row dd {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #202430 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-thread {
    min-height: 112px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-form {
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #edf1f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-pc-side-panel-actions {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel {
    gap: 10px !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-empty {
    display: grid !important;
  }

  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-head-actions,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-kpi,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-section,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-form,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection .soc-pc-side-panel-actions,
  body.soc-desktop-shell :is(#alertsView, #ticketsView) .soc-ops-workspace-detail-panel.is-empty-selection > .meta {
    display: none !important;
  }
}

/* ===== Ops support desktop final authority (2026-04-02 v2) ===== */
@media (min-width: 1024px) {
  html body.soc-desktop-shell #opsSupportPanel {
    --ops-support-rail-surface: #ffffff;
    --ops-support-rail-muted: #fafbfd;
    --ops-support-rail-border: #e6eaf1;
    --ops-support-rail-border-strong: #d7deea;
    --ops-support-rail-text: #202430;
    --ops-support-rail-subtle: #697286;
    --ops-support-neutral-bg: #ffffff;
    --ops-support-neutral-hover: #f7f9fc;
    --ops-support-neutral-border: #d7deea;
    --ops-support-pending-bg: #fff7e8;
    --ops-support-pending-border: #f1d49a;
    --ops-support-pending-text: #9c6700;
    --ops-support-pending-accent: #ffbf3c;
    --ops-support-approved-bg: #ebfbf7;
    --ops-support-approved-border: #98e1d4;
    --ops-support-approved-text: #117d69;
    --ops-support-approved-accent: #1ebfa3;
    --ops-support-danger-bg: #fff1f1;
    --ops-support-danger-border: #ffc6c6;
    --ops-support-danger-text: #bb5252;
    --ops-support-danger-accent: #ff6b6b;
    --ops-support-cancelled-bg: #f4f6f9;
    --ops-support-cancelled-border: #d6dde7;
    --ops-support-cancelled-text: #5f6b7c;
    --ops-support-cancelled-accent: #94a3b8;
    --ops-support-strong-primary: #ff6a13;
    --ops-support-strong-primary-border: #da5a0e;
    --ops-support-strong-primary-hover: #e75e0c;
    --ops-support-strong-danger: #ff6b6b;
    --ops-support-strong-danger-border: #d85151;
    --ops-support-strong-danger-hover: #eb5f5f;
  }

  html body.soc-desktop-shell #opsSupportPanel > .panel-title-row {
    margin-bottom: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-workspace {
    gap: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) minmax(336px, 352px) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout:not(.has-detail-panel) #opsSupportSheet {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportMain.soc-ops-support-main {
    min-height: var(--ops-support-shared-height, 640px) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportSheet.soc-ops-support-sheet {
    height: var(--ops-support-shared-height, 640px) !important;
    max-height: var(--ops-support-shared-height, 640px) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck {
    display: grid !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    padding: 0 0 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar {
    display: grid !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-month-row {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border: 1px solid var(--ops-support-neutral-border) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label,
  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label {
    padding: 0 10px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow {
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    color: #7b8599 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):hover,
  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):focus-visible {
    background: #f3f6fb !important;
    color: var(--ops-support-rail-text) !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-system {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px 12px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters {
    display: inline-grid !important;
    grid-template-columns: repeat(2, minmax(104px, 128px)) !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control {
    min-width: 104px !important;
    max-width: 128px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--ops-support-neutral-border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--ops-support-rail-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-tools,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-action-row {
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-meta {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding-top: 2px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters.hidden {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more {
    position: relative !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions .ds-btn,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] {
    border: 1px solid var(--ops-support-neutral-border) !important;
    background: #ffffff !important;
    color: #556177 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"].is-active {
    border-color: var(--ops-support-strong-primary) !important;
    background: var(--ops-support-strong-primary) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn {
    border: 1px solid var(--ops-support-neutral-border) !important;
    background: #ffffff !important;
    color: #556177 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-btn:focus-visible,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:focus-visible {
    border-color: #c7d2df !important;
    background: #f7f9fc !important;
    color: #334155 !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more[open] .soc-ops-support-filter-more-btn {
    border-color: rgba(255, 106, 19, 0.24) !important;
    background: rgba(255, 106, 19, 0.08) !important;
    color: var(--ops-support-strong-primary) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-more-panel {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 188px !important;
    padding: 12px !important;
    border: 1px solid var(--ops-support-rail-border-strong) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(255, 106, 19, 0.2) !important;
    border-radius: 999px !important;
    background: rgba(255, 106, 19, 0.08) !important;
    color: #c15510 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 6px 0 0 !important;
    margin: 0 !important;
    border-top: 1px solid #eef2f6 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong {
    font-size: 13px !important;
    line-height: 15px !important;
    font-weight: 800 !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(#opsSupportCalendarView, #opsSupportListView) {
    min-height: 0 !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays {
    gap: 6px !important;
    padding: 0 2px !important;
    margin: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays > span {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: #7b8599 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(144px, auto) !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 6px !important;
    align-content: start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 3px !important;
    min-height: 144px !important;
    height: auto !important;
    padding: 6px !important;
    overflow: hidden !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > strong {
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 800 !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 18px !important;
    padding: 0 6px !important;
    border: 1px solid #e9edf3 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #7d8699 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body {
    display: grid !important;
    gap: 3px !important;
    min-height: 0 !important;
    align-content: start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 7px 0 9px !important;
    border-radius: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--ops-support-line-border, var(--ops-support-rail-border)) !important;
    background: var(--ops-support-line-bg, #ffffff) !important;
    color: var(--ops-support-line-color, var(--ops-support-rail-text)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 4px !important;
    background: var(--ops-support-line-accent, var(--ops-support-cancelled-accent)) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line:hover {
    border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 36%, var(--ops-support-rail-border)) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-selected {
    box-shadow: inset 0 0 0 1px rgba(255, 106, 19, 0.12) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 12px !important;
    font-weight: 700 !important;
    color: inherit !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-side {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta-row,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-meta {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count {
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: inherit !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status {
    min-height: 16px !important;
    height: 16px !important;
    padding: 0 5px !important;
    gap: 3px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status .soc-ops-support-status-dot {
    width: 5px !important;
    height: 5px !important;
    flex: 0 0 5px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-flag,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-fresh-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 14px !important;
    height: 14px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-flag {
    border: 1px solid rgba(255, 107, 107, 0.32) !important;
    background: #fff1f1 !important;
    color: #c25555 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-fresh-badge {
    border: 1px solid rgba(255, 106, 19, 0.18) !important;
    background: #fff3e8 !important;
    color: var(--ops-support-strong-primary) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px dashed var(--ops-support-neutral-border) !important;
    background: #ffffff !important;
    color: #445067 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more:focus-visible {
    border-color: rgba(255, 106, 19, 0.3) !important;
    background: #fff8f3 !important;
    color: var(--ops-support-strong-primary) !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline, .support-status-chip) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .support-status-inline {
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .support-status-chip {
    min-height: 22px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-text {
    line-height: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-status-dot {
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 6px !important;
    margin-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-pending, .support-status-chip.state-pending) {
    background: var(--ops-support-pending-bg) !important;
    border-color: var(--ops-support-pending-border) !important;
    color: var(--ops-support-pending-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-approved, .support-status-chip.state-approved) {
    background: var(--ops-support-approved-bg) !important;
    border-color: var(--ops-support-approved-border) !important;
    color: var(--ops-support-approved-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-unavailable, .support-status-inline.state-rejected, .support-status-chip.state-unavailable, .support-status-chip.state-rejected) {
    background: var(--ops-support-danger-bg) !important;
    border-color: var(--ops-support-danger-border) !important;
    color: var(--ops-support-danger-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.support-status-inline.state-cancelled, .support-status-chip.state-cancelled) {
    background: var(--ops-support-cancelled-bg) !important;
    border-color: var(--ops-support-cancelled-border) !important;
    color: var(--ops-support-cancelled-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-status-cell {
    white-space: normal !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-status-stack {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet {
    width: min(100%, 352px) !important;
    min-width: 0 !important;
    max-width: 352px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 14px 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--ops-support-rail-border) !important;
    flex: 0 0 auto !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheetTitle {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-copy > .meta {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-sheet-head-actions .ds-btn, .worker-row-actions .ds-btn, .worker-add-btn, [data-action="ops-support-enter-worker-edit"]) {
    min-height: 34px !important;
    height: 34px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    padding-inline: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheetStatusBtn.soc-ops-support-status-action {
    border-color: var(--ops-support-neutral-border) !important;
    background: var(--ops-support-neutral-bg) !important;
    color: #445067 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheetStatusBtn.soc-ops-support-status-action:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheetStatusBtn.soc-ops-support-status-action:focus-visible {
    border-color: #c6d0dc !important;
    background: var(--ops-support-neutral-hover) !important;
    color: #2f3a4d !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(#opsSupportSheetDeleteBtn, .worker-row-actions .worker-row-delete-btn, .worker-row.is-over-assigned .worker-row-delete-btn) {
    border-color: var(--ops-support-strong-danger-border) !important;
    background: var(--ops-support-strong-danger) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(#opsSupportSheetDeleteBtn, .worker-row-actions .worker-row-delete-btn, .worker-row.is-over-assigned .worker-row-delete-btn):hover,
  html body.soc-desktop-shell #opsSupportPanel :is(#opsSupportSheetDeleteBtn, .worker-row-actions .worker-row-delete-btn, .worker-row.is-over-assigned .worker-row-delete-btn):focus-visible {
    border-color: var(--ops-support-strong-danger-border) !important;
    background: var(--ops-support-strong-danger-hover) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.worker-row-actions .worker-row-edit-btn, .worker-row.is-over-assigned .worker-row-edit-btn, .worker-add-btn) {
    border-color: var(--ops-support-strong-primary-border) !important;
    background: var(--ops-support-strong-primary) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.worker-row-actions .worker-row-edit-btn, .worker-row.is-over-assigned .worker-row-edit-btn, .worker-add-btn):hover,
  html body.soc-desktop-shell #opsSupportPanel :is(.worker-row-actions .worker-row-edit-btn, .worker-row.is-over-assigned .worker-row-edit-btn, .worker-add-btn):focus-visible {
    border-color: var(--ops-support-strong-primary-border) !important;
    background: var(--ops-support-strong-primary-hover) !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-content {
    gap: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section {
    display: grid !important;
    gap: 8px !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid #eef2f6 !important;
    background: transparent !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section--summary {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section-title {
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section-head .meta,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-context {
    font-size: 12px !important;
    line-height: 17px !important;
    color: var(--ops-support-rail-subtle) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-detail-summary-metric, .soc-ops-support-detail-summary-purpose, .soc-ops-support-confirmed-block, .soc-ops-support-confirmed-disabled, .soc-ops-support-detail-timeline-body, .soc-ops-support-day-summary > div) {
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric {
    min-height: 70px !important;
    padding: 10px 11px !important;
    background: var(--ops-support-rail-muted) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-purpose {
    padding: 11px 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline {
    display: grid !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline > li {
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    padding: 8px 10px !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .confirmed-worker-list {
    gap: 6px !important;
    max-height: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px !important;
    border: 1px solid var(--ops-support-rail-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.worker-row.is-assigned, .worker-row.is-over-assigned) {
    border-color: var(--ops-support-rail-border) !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row input[type="text"] {
    border-color: var(--ops-support-rail-border) !important;
    background: var(--ops-support-rail-muted) !important;
    color: var(--ops-support-rail-text) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
}

@media (min-width: 1024px) and (max-width: 1450px) {
  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-main-row {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-system {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-filter-row,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-action-row,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportActiveFilters {
    justify-content: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-action-row {
    flex-wrap: wrap !important;
  }
}

@media (min-width: 1024px) {
  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck {
    display: grid !important;
    gap: 8px !important;
    padding: 0 0 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar {
    display: grid !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-toolbar-left, .soc-ops-support-toolbar-center, .soc-ops-support-toolbar-right) {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-center {
    justify-content: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-right {
    justify-content: flex-end !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label, .soc-ops-support-today-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 10px !important;
    color: #47536a !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .soc-ops-support-today-btn {
    padding: 0 10px !important;
    border: 1px solid #e5ebf3 !important;
    background: #f8fafc !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label {
    padding: 0 10px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label, .soc-ops-support-today-btn):hover,
  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label, .soc-ops-support-today-btn):focus-visible {
    background: #f3f6fb !important;
    color: #202430 !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-inline-label {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #697286 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-label,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-tools,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-meta {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control {
    min-width: 116px !important;
    max-width: 160px !important;
    height: 34px !important;
    padding: 0 30px 0 10px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #202430 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-anchor {
    position: relative !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-export-top-btn, .soc-ops-support-view-toggle [data-action="ops-support-view"]) {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn {
    border: 1px solid #dce4ef !important;
    background: #ffffff !important;
    color: #42516a !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:focus-visible {
    border-color: #c8d3e0 !important;
    background: #f8fafc !important;
    color: #202430 !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    gap: 3px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] {
    border: 0 !important;
    background: transparent !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"].is-active {
    background: #ff6a13 !important;
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters.hidden {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-badge {
    min-height: 22px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(255, 106, 19, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 106, 19, 0.08) !important;
    color: #c15510 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid #e9eef5 !important;
    background: transparent !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    align-items: center !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stat > strong {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays > span {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: #7b8599 !important;
    text-align: center !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-content: start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 154px !important;
    padding: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > strong {
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 20px !important;
    padding: 0 7px !important;
    border: 1px solid #e8edf4 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #7d8699 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body {
    display: grid !important;
    gap: 4px !important;
    align-content: start !important;
    min-height: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more {
    min-height: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 8px 0 10px !important;
    overflow: hidden !important;
    border: 1px solid var(--ops-support-line-border, #e6eaf1) !important;
    background: var(--ops-support-line-bg, #ffffff) !important;
    color: var(--ops-support-line-color, #202430) !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 4px !important;
    background: var(--ops-support-line-accent, #94a3b8) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line:hover {
    border-color: color-mix(in srgb, var(--ops-support-line-accent, #ff6a13) 35%, #dfe6ef) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-selected {
    box-shadow: inset 0 0 0 1px rgba(255, 106, 19, 0.14) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    color: inherit !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-top-side,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-status,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-line-flag,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-fresh-badge {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 44px !important;
    min-height: 20px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-partial,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-full {
    background: rgba(30, 191, 163, 0.12) !important;
    color: #0c8872 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-over {
    background: rgba(255, 107, 107, 0.14) !important;
    color: #d04f4f !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px dashed #dce4ef !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportListView {
    padding-top: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table-wrap {
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table thead th {
    padding: 10px 12px !important;
    border-bottom: 1px solid #e9eef5 !important;
    background: #fafbfd !important;
    color: #697286 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table tbody td {
    padding: 11px 12px !important;
    border-bottom: 1px solid #eef2f6 !important;
    color: #202430 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    vertical-align: middle !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-table tbody tr:last-child td {
    border-bottom: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-row {
    cursor: pointer !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-row:hover {
    background: #fafcff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone-cell {
    width: 44px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone {
    display: inline-flex !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: #94a3b8 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-pending {
    background: #ffbf3c !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-approved {
    background: #1ebfa3 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-rejected,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-unavailable {
    background: #ff6b6b !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-tone.state-cancelled {
    background: #94a3b8 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress.is-partial,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress.is-full {
    background: rgba(30, 191, 163, 0.12) !important;
    color: #0c8872 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress.is-over {
    background: rgba(255, 107, 107, 0.14) !important;
    color: #d04f4f !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 30 !important;
    width: 240px !important;
    padding: 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-head {
    display: grid !important;
    gap: 3px !important;
    padding: 2px 2px 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-head > strong {
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-list {
    display: grid !important;
    gap: 4px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 9px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #202430 !important;
    text-align: left !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-item:hover,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-item:focus-visible {
    border-color: rgba(255, 106, 19, 0.14) !important;
    background: #fff8f3 !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-item:disabled {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-copy > strong {
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    color: inherit !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-copy > small,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-menu-meta {
    font-size: 11px !important;
    line-height: 14px !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    padding: 16px !important;
    gap: 12px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-body {
    padding-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-content {
    display: grid !important;
    gap: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section {
    display: grid !important;
    gap: 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid #eef2f6 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-section--summary {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-context {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    font-size: 12px !important;
    line-height: 17px !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics {
    display: grid !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics.is-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric {
    display: grid !important;
    gap: 8px !important;
    min-height: 88px !important;
    padding: 12px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-label {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric > strong {
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-note {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-partial > strong,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-full > strong {
    color: #0c8872 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-over > strong {
    color: #d04f4f !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress {
    position: relative !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: #e9eef5 !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress > span {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    border-radius: inherit !important;
    background: #94a3b8 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress.is-partial > span,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress.is-full > span {
    background: #1ebfa3 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-progress.is-over > span {
    background: #ff6b6b !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-purpose,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-confirmed-block,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary > div {
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-purpose {
    padding: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary > div {
    display: grid !important;
    gap: 6px !important;
    min-height: 80px !important;
    padding: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-label {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary strong {
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .confirmed-worker-list {
    display: grid !important;
    gap: 6px !important;
    max-height: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row input[type="text"] {
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 10px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.worker-row-actions .ds-btn, .worker-add-btn, [data-action="ops-support-enter-worker-edit"], .soc-ops-support-sheet-head-actions .ds-btn) {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline {
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 0 0 10px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item:last-child {
    padding-bottom: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-connector {
    position: absolute !important;
    top: 12px !important;
    bottom: -10px !important;
    left: 8px !important;
    width: 2px !important;
    background: #e6eaf1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item:last-child .soc-ops-support-detail-timeline-connector,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-empty .soc-ops-support-detail-timeline-connector {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-dot {
    position: relative !important;
    z-index: 1 !important;
    width: 10px !important;
    height: 10px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    background: #94a3b8 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-created .soc-ops-support-detail-timeline-dot {
    background: #ff6a13 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-worker .soc-ops-support-detail-timeline-dot {
    background: #1ebfa3 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status .soc-ops-support-detail-timeline-dot {
    background: #334155 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-body {
    border: 1px solid #e6eaf1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-head {
    display: grid !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-head strong {
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 800 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-copy {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    color: #445067 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-summary-day-table,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-confirmed-roster-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-summary-day-table, .soc-ops-support-confirmed-roster-table) th,
  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-summary-day-table, .soc-ops-support-confirmed-roster-table) td {
    padding: 9px 8px !important;
    border-bottom: 1px solid #eef2f6 !important;
    text-align: left !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-summary-day-table, .soc-ops-support-confirmed-roster-table) tbody tr:last-child td {
    border-bottom: 0 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1500px) {
  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-toolbar-main-row {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel :is(.soc-ops-support-toolbar-left, .soc-ops-support-toolbar-center, .soc-ops-support-toolbar-right) {
    justify-content: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-detail-summary-metrics.is-triple,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel .soc-ops-support-day-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===== Ops support desktop authority refinements (2026-04-03 v3) ===== */
@media (min-width: 1024px) {
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view.hidden,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view.hidden,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-state.hidden {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportListView.soc-ops-support-view:not(.hidden) {
    display: block !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel {
    grid-template-columns: minmax(0, 1fr) minmax(328px, 336px) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-toolbar-left, .soc-ops-support-toolbar-center, .soc-ops-support-toolbar-right) {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-center {
    justify-content: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-right {
    justify-content: flex-end !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-inline-label {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control {
    min-width: 122px !important;
    max-width: 144px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportActiveFilters {
    justify-content: flex-start !important;
    padding-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
    padding-top: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats {
    gap: 6px 16px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid {
    gap: 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell {
    min-height: 148px !important;
    padding: 7px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-body {
    gap: 3px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line {
    padding: 0 6px 0 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main {
    gap: 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy {
    gap: 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-label {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count {
    min-width: 36px !important;
    padding: 0 6px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1460px) {
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-toolbar-left, .soc-ops-support-toolbar-center, .soc-ops-support-toolbar-right) {
    justify-content: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions {
    flex-wrap: wrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
    padding-top: 0 !important;
  }
}

@media (min-width: 1024px) {
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy {
    justify-content: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5b6579 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-partial,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-full {
    background: transparent !important;
    color: #1ebfa3 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count.is-over {
    background: transparent !important;
    color: #ff6b6b !important;
  }
}

/* ===== Ops support work type badges (2026-04-03) ===== */
@media (min-width: 1024px) {
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-work-type-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border: 1px solid #d7deea !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #5b6579 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-work-type-badge.is-day {
    border-color: rgba(30, 191, 163, 0.28) !important;
    background: rgba(30, 191, 163, 0.1) !important;
    color: #0f8570 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-work-type-badge.is-night {
    border-color: rgba(255, 191, 60, 0.34) !important;
    background: rgba(255, 191, 60, 0.14) !important;
    color: #9c6700 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-work-type-badge.is-compact {
    min-width: 18px !important;
    min-height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-work-type-badge {
    margin-left: -2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-work-type,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-work-type {
    min-width: 40px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-work-type {
    min-height: 24px !important;
    padding: 0 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-context {
    align-items: center !important;
  }
}

/* ===== Ops support desktop authority refinements (2026-04-03 v4) ===== */
@media (min-width: 1024px) {
  html body.soc-desktop-shell #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck {
    display: grid !important;
    gap: 8px !important;
    padding: 0 0 14px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #d0d9e4 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar {
    gap: 4px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-main-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px !important;
    align-items: end !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e1e8f0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-left {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav {
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    gap: 10px !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-center {
    gap: 18px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-inline-month-nav {
    flex: 0 0 auto !important;
    margin-right: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label) {
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-arrow {
    width: auto !important;
    height: auto !important;
    font-size: 19px !important;
    line-height: 1 !important;
    color: #445067 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav .month-label {
    padding-bottom: 1px !important;
    color: #202430 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):hover,
  html body.soc-desktop-shell #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):focus-visible {
    background: transparent !important;
    color: #202430 !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filters {
    align-items: center !important;
    gap: 16px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-field {
    gap: 6px !important;
    padding-bottom: 2px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-filter-inline-label {
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #5f6b7c !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control {
    min-width: 118px !important;
    max-width: 136px !important;
    height: 30px !important;
    padding: 0 22px 0 0 !important;
    border: 0 !important;
    border-bottom: 1.5px solid #cfd9e5 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #202430 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control:hover,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-compact-control:focus-visible {
    border-color: #94a3b8 !important;
    background: transparent !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-actions {
    gap: 14px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn {
    min-height: auto !important;
    height: auto !important;
    padding: 0 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #445067 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:hover,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-export-top-btn:focus-visible {
    border: 0 !important;
    background: transparent !important;
    color: #202430 !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] {
    min-height: auto !important;
    height: auto !important;
    padding: 0 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7b8599 !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"].is-active {
    background: transparent !important;
    color: #202430 !important;
    box-shadow: inset 0 -2px 0 #ff6a13 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-support-strip {
    padding: 6px 0 0 !important;
    border-top: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-toolbar-stats {
    gap: 6px 16px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays {
    padding: 10px 12px 9px !important;
    border-top: 1px solid #dbe4ee !important;
    border-bottom: 1px solid #dbe4ee !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-calendar-weekdays > span {
    color: #5f6b7c !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet .soc-ops-support-sheet-head-copy {
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions {
    justify-self: end !important;
    gap: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions > * {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions > * + * {
    margin-left: 10px !important;
    padding-left: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-sheet-head-actions > * + *::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 13px !important;
    background: #cfd7e3 !important;
    border-radius: 999px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet :is(#opsSupportSheetStatusBtn, #opsSupportSheetDeleteBtn) {
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetStatusBtn.soc-ops-support-status-action:focus-visible {
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #64748b !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:hover,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet #opsSupportSheetDeleteBtn:focus-visible {
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #e25656 !important;
    outline: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    grid-template-areas:
      "label label"
      "value progress"
      "note progress" !important;
    align-items: center !important;
    column-gap: 16px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed > .soc-ops-support-detail-summary-label {
    grid-area: label !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed > strong {
    grid-area: value !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed .soc-ops-support-detail-progress {
    grid-area: progress !important;
    align-self: center !important;
    margin: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed .soc-ops-support-detail-summary-note {
    grid-area: note !important;
    align-self: start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-inline-summary {
    grid-template-areas:
      "label label"
      "note progress" !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-inline-summary .soc-ops-support-detail-summary-note {
    align-self: center !important;
    font-size: 13px !important;
    line-height: 17px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed > strong,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed .soc-ops-support-detail-summary-note {
    transition: color 140ms ease !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-success > strong,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-success .soc-ops-support-detail-summary-note {
    color: #0c8872 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-danger > strong,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-danger .soc-ops-support-detail-summary-note {
    color: #d04f4f !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-muted > strong,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metric.is-confirmed.is-tone-muted .soc-ops-support-detail-summary-note {
    color: #64748b !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-summary-metrics.is-triple {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-context {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-date {
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #202430 !important;
    letter-spacing: -0.02em !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card {
    display: grid !important;
    gap: 6px !important;
    min-height: 88px !important;
    padding: 12px 14px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) 118px !important;
    grid-template-areas:
      "label label"
      "value progress"
      "note progress" !important;
    align-items: center !important;
    column-gap: 14px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed > .soc-ops-support-day-summary-label {
    grid-area: label !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed > .soc-ops-support-day-summary-value {
    grid-area: value !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed > .soc-ops-support-detail-progress {
    grid-area: progress !important;
    margin: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-card.is-confirmed > .soc-ops-support-day-summary-note {
    grid-area: note !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-value {
    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    color: #202430 !important;
    word-break: keep-all !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-summary-note {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-day-headcount,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count {
    background: transparent !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-list-progress {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-day-headcount, .soc-ops-support-list-progress, #opsSupportCalendarGrid .soc-ops-support-calendar-line-count, .soc-ops-support-day-summary-value, .soc-ops-support-day-summary-note).is-tone-success {
    color: #0c8872 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-day-headcount, .soc-ops-support-list-progress, #opsSupportCalendarGrid .soc-ops-support-calendar-line-count, .soc-ops-support-day-summary-value, .soc-ops-support-day-summary-note).is-tone-danger {
    color: #d04f4f !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-day-headcount, .soc-ops-support-list-progress, #opsSupportCalendarGrid .soc-ops-support-calendar-line-count, .soc-ops-support-day-summary-value, .soc-ops-support-day-summary-note).is-tone-muted {
    color: #64748b !important;
  }

  html body.soc-desktop-shell #opsSupportPanel :is(.soc-ops-support-day-headcount, .soc-ops-support-list-progress, #opsSupportCalendarGrid .soc-ops-support-calendar-line-count, .soc-ops-support-day-summary-value, .soc-ops-support-day-summary-note).is-tone-neutral {
    color: #202430 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-confirmed-block {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .confirmed-worker-list {
    gap: 6px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row {
    border: 0 !important;
    border-bottom: 1px solid #e7edf4 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 8px 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row.is-assigned:not(.is-over-assigned) {
    padding: 9px 10px !important;
    border: 1.5px solid rgba(30, 191, 163, 0.5) !important;
    border-radius: 12px !important;
    background: rgba(30, 191, 163, 0.07) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row.is-over-assigned {
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 107, 107, 0.42) !important;
    border-radius: 12px !important;
    background: rgba(255, 107, 107, 0.06) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .worker-row.is-assigned input[type="text"][readonly] {
    border-color: rgba(30, 191, 163, 0.22) !important;
    background: rgba(255, 255, 255, 0.9) !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline {
    gap: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline::before {
    display: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline > li,
  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: flex-start !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 0 16px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item:last-child {
    padding-bottom: 0 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-connector {
    top: 9px !important;
    bottom: -14px !important;
    left: 7px !important;
    width: 2px !important;
    background: #dbe4ee !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-dot {
    left: auto !important;
    top: auto !important;
    justify-self: center !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: 3px !important;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
    background: #64748b !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-body {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-body,
  html body.soc-desktop-shell #opsSupportPanel #opsSupportSheet .soc-ops-support-detail-timeline-item .soc-ops-support-detail-timeline-body {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-head {
    margin-bottom: 4px !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-approved .soc-ops-support-detail-timeline-dot {
    background: #1ebfa3 !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-pending .soc-ops-support-detail-timeline-dot {
    background: #ffbf3c !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-danger .soc-ops-support-detail-timeline-dot {
    background: #ff6b6b !important;
  }

  html body.soc-desktop-shell #opsSupportPanel .soc-ops-support-detail-timeline-item.is-status.is-status-muted .soc-ops-support-detail-timeline-dot {
    background: #64748b !important;
  }
}

/* ===== Analytics followup + hotspot emphasis ===== */
@media (min-width: 1024px) {
  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-shell,
  html body.soc-desktop-shell #analyticsView #analyticsCausePanel .soc-analytics-cause-shell,
  html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-columns {
    padding: 0 20px 18px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row {
    display: grid !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 10px !important;
    min-height: 156px !important;
    padding: 14px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable:hover,
  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-row.is-actionable:focus-visible {
    transform: none !important;
    border-color: #ffb57d !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-topline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-rank {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    background: #f3f6fb !important;
    color: #697286 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #202430 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score-badge[data-tone="focus"] {
    border-color: #8ebaff !important;
    background: #ffffff !important;
    color: #2f80ff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score-badge[data-tone="warning"] {
    border-color: #ffd79c !important;
    background: #ffffff !important;
    color: #a15b00 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-score-badge[data-tone="danger"] {
    border-color: #ffc0c0 !important;
    background: #ffffff !important;
    color: #d04f4f !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-main {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-head {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-head strong {
    min-width: 0 !important;
    color: #202430 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-role {
    color: #697286 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-metrics {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-metric-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #f6f8fb !important;
    color: #5f697d !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-last {
    margin: 0 !important;
    color: #8b93a6 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-bar {
    height: 8px !important;
    border-radius: 999px !important;
    background: #eef2f6 !important;
    overflow: hidden !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-bar span {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #2f80ff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-bar span[data-tone="warning"] {
    background: #ffbf3c !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsPeoplePanel .soc-analytics-hotspot-bar span[data-tone="danger"] {
    background: #ff6b6b !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsFollowupBand .soc-analytics-followup-column {
    padding: 16px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-column h4 {
    margin: 0 0 12px !important;
    color: #202430 !important;
    font-size: 16px !important;
    line-height: 23px !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-stack {
    display: grid !important;
    gap: 10px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid #e8ecf3 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero[data-tone="focus"] {
    background: #ffffff !important;
    border-color: #8ebaff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero[data-tone="warning"] {
    background: #ffffff !important;
    border-color: #ffd79c !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero[data-tone="danger"] {
    background: #ffffff !important;
    border-color: #ffc0c0 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero-main {
    display: grid !important;
    gap: 4px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-eyebrow {
    color: #697286 !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero-main strong {
    color: #202430 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero-main p {
    margin: 0 !important;
    color: #697286 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-hero-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #e6eaf1 !important;
    color: #202430 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-list-body {
    display: grid !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item {
    display: block !important;
    padding: 12px 14px !important;
    border: 1px solid #e9edf4 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="focus"] {
    background: #ffffff !important;
    border-color: #8ebaff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="warning"] {
    background: #ffffff !important;
    border-color: #ffd79c !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="danger"] {
    background: #ffffff !important;
    border-color: #ffc0c0 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-main {
    display: grid !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-head strong {
    min-width: 0 !important;
    color: #202430 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 800 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-age {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #f5f7fb !important;
    color: #202430 !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="focus"] .soc-analytics-followup-item-age {
    background: #ffffff !important;
    border: 1px solid #8ebaff !important;
    color: #2f80ff !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="warning"] .soc-analytics-followup-item-age {
    background: #ffffff !important;
    border: 1px solid #ffd79c !important;
    color: #9c6700 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item[data-tone="danger"] .soc-analytics-followup-item-age {
    background: #ffffff !important;
    border: 1px solid #ffc0c0 !important;
    color: #d04f4f !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #f5f7fb !important;
    color: #697286 !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item-meta {
    margin: 0 !important;
    color: #8b93a6 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-followup-item.is-empty {
    display: flex !important;
    align-items: center !important;
    min-height: 88px !important;
    color: #697286 !important;
    background: #fbfcff !important;
  }
}

/* ===== Analytics hero row 3-up rebalance ===== */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body.soc-desktop-shell #analyticsView #analyticsHeroRow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 1280px) {
  html body.soc-desktop-shell #analyticsView #analyticsHeroRow {
    grid-template-columns: minmax(248px, 0.76fr) minmax(260px, 0.9fr) minmax(320px, 1.14fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
}

@media (min-width: 1024px) {
  html body.soc-desktop-shell #analyticsView :is(
    .soc-analytics-v2-card--risk,
    .soc-analytics-v2-card--kpis,
    .soc-analytics-board-card--health
  ) {
    min-height: 208px !important;
    padding: 14px 16px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard {
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-head,
  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-head,
  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-board-card-head {
    margin-bottom: 10px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-body {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard :is(
    .soc-analytics-v2-risk-gauge-wrap,
    .soc-analytics-v2-risk-gauge
  ) {
    width: 108px !important;
    height: 108px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track,
  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc {
    stroke-width: 11px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-value-wrap strong,
  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard #analyticsRiskScoreValue {
    font-size: 36px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-summary {
    gap: 6px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-badge-row {
    padding-inline-start: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-summary-copy {
    font-size: 13px !important;
    line-height: 19px !important;
    max-width: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-body,
  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-board-card-body {
    display: grid !important;
    min-height: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile {
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile + .soc-analytics-v2-kpi-tile {
    border-left: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong {
    font-size: 22px !important;
    line-height: 1.08 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-panel {
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 12px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head {
    gap: 2px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head > div {
    display: grid !important;
    gap: 4px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head .label {
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head strong {
    font-size: 24px !important;
    line-height: 1.08 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-bar {
    height: 12px !important;
    margin-top: 2px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-legend {
    gap: 10px !important;
    margin-top: auto !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item {
    padding: 10px 12px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }
}

/* ===== Analytics hero density fill final ===== */
@media (min-width: 1024px) {
  html body.soc-desktop-shell #analyticsView .soc-analytics-v2-header {
    align-items: end !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy {
    gap: 4px !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-v2-header-copy .meta {
    display: block !important;
    margin: 0 !important;
    color: #697286 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #analyticsView .soc-analytics-v2-toolbar {
    min-height: 0 !important;
    padding: 10px 12px !important;
    gap: 10px 12px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRow {
    grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.02fr) minmax(320px, 1.08fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  html body.soc-desktop-shell #analyticsView :is(#analyticsHeroRiskCard, #analyticsHeroKpiRack, #analyticsHeroHealthCard) {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 220px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #analyticsView :is(#analyticsHeroRiskCard, #analyticsHeroKpiRack, #analyticsHeroHealthCard) .soc-analytics-board-card-head {
    margin-bottom: 0 !important;
    padding: 18px 20px 10px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-body--risk,
  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-board-card-body,
  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-board-card-body--health {
    display: grid !important;
    min-height: 0 !important;
    padding: 0 20px 18px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard {
    background: linear-gradient(150deg, #ff8d34 0%, #ff6a13 38%, #ee5b00 68%, #cf4700 100%) !important;
    border-color: #de5a08 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-board-card-head h3 {
    color: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-core {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    align-items: center !important;
    align-content: center !important;
    justify-items: center !important;
    height: 100% !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap,
  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge {
    width: 196px !important;
    height: 196px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track,
  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc {
    stroke-width: 13px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track {
    stroke: rgba(255, 255, 255, 0.22) !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc {
    stroke: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard #analyticsRiskScoreValue {
    color: #ffffff !important;
    font-size: 60px !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-title-with-help {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-value-wrap {
    gap: 12px !important;
    padding-top: 4px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-side,
  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-hero-side-head {
    display: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-risk-info-trigger,
  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-help-btn {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.88) !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1 !important;
    border-radius: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-risk-grade {
    min-height: 32px !important;
    padding: 0 16px !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 32px !important;
    font-weight: 700 !important;
    backdrop-filter: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-updated-inline {
    display: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-grid {
    display: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact {
    display: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact .label {
    color: #697286 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact strong {
    color: #202430 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact[data-tone="warning"] strong {
    color: #9c6700 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroRiskCard .soc-analytics-risk-stat-compact[data-tone="danger"] strong {
    color: #d45b5b !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-rack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile {
    min-height: 84px !important;
    padding: 12px 14px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .label {
    font-size: 11px !important;
    line-height: 15px !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile strong {
    font-size: 24px !important;
    line-height: 1.04 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroKpiRack .soc-analytics-v2-kpi-tile .meta {
    display: block !important;
    color: #8b93a6 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-panel {
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    gap: 12px !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head {
    gap: 4px !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head strong {
    font-size: 28px !important;
    line-height: 1.05 !important;
    color: #202430 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head .label {
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    color: #697286 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-head .meta {
    color: #8b93a6 !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-bar {
    height: 10px !important;
    margin: 0 !important;
    background: #e6eaf1 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-segment.is-safe {
    background: #1ebfa3 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-segment.is-warning {
    background: #ffbf3c !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-segment.is-danger {
    background: #ff6b6b !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-self: end !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 72px !important;
    padding: 10px 12px !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item .label {
    color: #697286 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    font-weight: 700 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item .meta {
    color: #8b93a6 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    font-weight: 600 !important;
  }

  html body.soc-desktop-shell #analyticsView #analyticsHeroHealthCard .soc-analytics-v2-health-item strong {
    font-size: 18px !important;
    line-height: 1.05 !important;
    color: #202430 !important;
  }
}

/* switch normalization */
html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input) {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  line-height: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #cbd5e1 !important;
  background: #dbe3ee !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  position: relative !important;
}

html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input)::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22) !important;
  transform: translateX(0) !important;
  transition: transform 0.18s ease !important;
}

html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input):checked {
  background: #ff6a13 !important;
  border-color: #ff6a13 !important;
}

html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input):checked::before {
  left: 2px !important;
  transform: translateX(18px) !important;
}

html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input):focus-visible {
  outline: 2px solid rgba(255, 106, 19, 0.28) !important;
  outline-offset: 3px !important;
}

html body.soc-desktop-shell :is(.soc-switch-input, .soc-apple-weekly-switch-input):disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
}

html body.soc-desktop-shell .notices-switch-button {
  min-height: 24px !important;
  gap: 8px !important;
  color: #202430 !important;
}

html body.soc-desktop-shell .notices-switch-track,
html body.soc-desktop-shell .soc-report-section-switch {
  width: 42px !important;
  height: 24px !important;
  border-radius: 999px !important;
  border: 1px solid #cbd5e1 !important;
  background: #dbe3ee !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.soc-desktop-shell .notices-switch-track::after,
html body.soc-desktop-shell .soc-report-section-switch-thumb {
  width: 18px !important;
  height: 18px !important;
  top: 2px !important;
  left: 2px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22) !important;
}

html body.soc-desktop-shell .notices-switch-button.is-active .notices-switch-track,
html body.soc-desktop-shell .soc-report-section-row.is-on .soc-report-section-switch {
  border-color: #ff6a13 !important;
  background: #ff6a13 !important;
}

html body.soc-desktop-shell .notices-switch-button.is-active .notices-switch-track::after,
html body.soc-desktop-shell .soc-report-section-row.is-on .soc-report-section-switch-thumb {
  transform: translateX(18px) !important;
}

html body.soc-desktop-shell .notices-switch-copy {
  color: #445067 !important;
}

html body.soc-desktop-shell .notices-switch-button.is-active .notices-switch-copy {
  color: #c2410c !important;
}

@media (min-width: 1024px) {
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel {
    align-content: start !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel #noticesWorkspace {
    display: grid !important;
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: min(1120px, calc(100% - 48px)) !important;
    margin-inline: auto !important;
    gap: 16px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel #noticesWorkspace > :is(
    .workspace-head,
    .workspace-tabbar-row,
    #noticesListPanel,
    #noticesDetailPanel,
    #noticesComposePanel
  ) {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .workspace-head {
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .workspace-head-actions {
    justify-content: flex-end !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-toolbar-row {
    justify-content: space-between !important;
    align-items: center !important;
    gap: 14px 18px !important;
    padding: 0 0 12px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel #noticesCategoryTabs {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-form {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-left: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-input-wrap {
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    transform: translateX(8px) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.42) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-form.is-expanded .notices-search-input-wrap {
    width: min(296px, 28vw) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-toggle {
    display: inline-flex !important;
    width: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* ===== Notices light shell follow-up ===== */
body.soc-desktop-shell #announcementPanel.soc-workspace-panel {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 36px 40px 64px !important;
  gap: 0 !important;
}

body.soc-desktop-shell #announcementPanel #noticesWorkspace {
  width: min(920px, 100%) !important;
  max-width: min(920px, 100%) !important;
  gap: 0 !important;
}

body.soc-desktop-shell #announcementPanel #noticesWorkspace > :is(
  .workspace-head,
  .workspace-tabbar-row,
  #noticesListPanel,
  #noticesDetailPanel,
  #noticesComposePanel
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #announcementPanel .workspace-head {
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding: 0 0 28px !important;
  margin: 0 !important;
}

body.soc-desktop-shell #announcementPanel .workspace-head-main {
  display: grid !important;
  gap: 0 !important;
}

body.soc-desktop-shell #announcementPanel .workspace-head-main h2 {
  font-size: 46px !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
  color: #202430 !important;
}

body.soc-desktop-shell #announcementPanel .workspace-head-actions {
  gap: 16px !important;
  align-items: center !important;
}

body.soc-desktop-shell #announcementPanel #noticesCreateBtn {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #202430 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #announcementPanel #noticesCreateBtn:hover,
body.soc-desktop-shell #announcementPanel #noticesCreateBtn:focus-visible {
  color: #ff6a13 !important;
}

body.soc-desktop-shell #announcementPanel .notices-toolbar-row {
  padding: 0 0 14px !important;
  margin: 0 0 8px !important;
  border-bottom: 1px solid #e6eaf1 !important;
  align-items: center !important;
  gap: 18px !important;
}

body.soc-desktop-shell #announcementPanel #noticesCategoryTabs {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}

body.soc-desktop-shell #announcementPanel #noticesCategoryTabs .workspace-tab {
  min-height: auto !important;
  padding: 0 0 8px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #697286 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #announcementPanel #noticesCategoryTabs .workspace-tab.is-active,
body.soc-desktop-shell #announcementPanel #noticesCategoryTabs .workspace-tab[aria-selected="true"] {
  border-bottom-color: #202430 !important;
  color: #202430 !important;
}

body.soc-desktop-shell #announcementPanel .notices-search-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #announcementPanel .notices-search-toggle:hover,
body.soc-desktop-shell #announcementPanel .notices-search-toggle:focus-visible {
  background: transparent !important;
  color: #202430 !important;
}

body.soc-desktop-shell #announcementPanel .notices-list-panel,
body.soc-desktop-shell #announcementPanel .notices-detail-panel,
body.soc-desktop-shell #announcementPanel .notices-compose-panel {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.soc-desktop-shell #announcementPanel .notices-list-rows {
  border-top: 0 !important;
}

body.soc-desktop-shell #announcementPanel .notices-list-item {
  border-bottom: 1px solid #e6eaf1 !important;
}

body.soc-desktop-shell #announcementPanel .notices-list-item:first-child {
  border-top: 1px solid #e6eaf1 !important;
}

body.soc-desktop-shell #announcementPanel .notices-list-button {
  grid-template-columns: 72px minmax(0, 1fr) 110px !important;
  gap: 16px !important;
  padding: 18px 0 !important;
}

body.soc-desktop-shell #announcementPanel .notices-list-title {
  font-size: 18px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  color: #202430 !important;
}

body.soc-desktop-shell #announcementPanel .notices-list-summary,
body.soc-desktop-shell #announcementPanel .notices-list-submeta {
  color: #697286 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.soc-desktop-shell #announcementPanel .notices-list-summary {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.soc-desktop-shell #announcementPanel .notices-list-date,
body.soc-desktop-shell #announcementPanel .notices-list-category {
  color: #697286 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
}

body.soc-desktop-shell #announcementPanel .notices-detail-panel,
body.soc-desktop-shell #announcementPanel .notices-compose-panel {
  padding-top: 18px !important;
}

body.soc-desktop-shell #announcementPanel .notices-detail-panel {
  justify-items: stretch !important;
}

body.soc-desktop-shell #announcementPanel .notices-detail-panel > .notices-section-head,
body.soc-desktop-shell #announcementPanel .notices-detail-panel > .notices-detail-body {
  width: min(740px, 100%) !important;
  margin-inline: auto !important;
}

body.soc-desktop-shell #announcementPanel .notices-section-head {
  padding: 0 0 16px !important;
  border-bottom: 1px solid #e6eaf1 !important;
}

body.soc-desktop-shell #announcementPanel .notices-section-head h3 {
  font-size: 32px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.04em !important;
  color: #202430 !important;
}

body.soc-desktop-shell #announcementPanel .notices-detail-actions {
  gap: 18px !important;
}

body.soc-desktop-shell #announcementPanel .notices-detail-actions .btn {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #697286 !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #announcementPanel .notices-detail-actions .btn:hover,
body.soc-desktop-shell #announcementPanel .notices-detail-actions .btn:focus-visible {
  color: #202430 !important;
}

body.soc-desktop-shell #announcementPanel .notices-detail-body {
  gap: 18px !important;
  padding: 22px 0 0 !important;
  min-height: 0 !important;
}

body.soc-desktop-shell #announcementPanel .notices-detail-body .desc {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #202430 !important;
}

body.soc-desktop-shell #announcementPanel .notices-compose-settings-panel {
  padding: 0 0 16px !important;
  border-bottom: 1px solid #e6eaf1 !important;
}

body.soc-desktop-shell #announcementPanel .notices-compose-document {
  padding: 20px 0 0 !important;
  gap: 18px !important;
}

body.soc-desktop-shell #announcementPanel .notices-compose-title-input {
  font-size: 34px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.05em !important;
}

body.soc-desktop-shell #announcementPanel .notices-compose-toolbar {
  padding: 10px 0 12px !important;
  border-top: 1px solid #e6eaf1 !important;
  border-bottom: 1px solid #e6eaf1 !important;
}

body.soc-desktop-shell #announcementPanel .notices-toolbar-item,
body.soc-desktop-shell #announcementPanel .notices-editor-action,
body.soc-desktop-shell #announcementPanel .notices-inline-remove,
body.soc-desktop-shell #announcementPanel .notices-inline-drag-handle,
body.soc-desktop-shell #announcementPanel .notices-command-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.soc-desktop-shell #announcementPanel .notices-toolbar-size-input-wrap,
body.soc-desktop-shell #announcementPanel .notices-toolbar-floating-toggle,
body.soc-desktop-shell #announcementPanel .notices-toolbar-color-trigger,
body.soc-desktop-shell #announcementPanel .notices-toolbar-highlight-trigger,
body.soc-desktop-shell #announcementPanel .notices-inline-remove-icon,
body.soc-desktop-shell #announcementPanel .notices-editor-action-icon,
body.soc-desktop-shell #announcementPanel .notices-inline-drag-handle-edge {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

body.soc-desktop-shell #announcementPanel .notices-toolbar-popover {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
}

body.soc-desktop-shell #announcementPanel .notices-command-publish {
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid color-mix(in srgb, var(--soc-primary, #f97316) 28%, transparent) !important;
  border-radius: 999px !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--soc-primary, #f97316) 82%, white) 0%,
    var(--soc-primary, #f97316) 100%
  ) !important;
  color: var(--soc-on-primary, #ffffff) !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--soc-primary, #f97316) 18%, transparent) !important;
}

body.soc-desktop-shell #announcementPanel .notices-command-publish:hover,
body.soc-desktop-shell #announcementPanel .notices-command-publish:focus-visible {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--soc-primary, #f97316) 72%, white) 0%,
    var(--soc-primary-deep, var(--soc-primary, #fb7f1f)) 100%
  ) !important;
  color: var(--soc-on-primary, #ffffff) !important;
}

@media (min-width: 1024px) {
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 32px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 11px !important;
    align-self: center !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon::before {
    inset: 7px 9px auto !important;
    height: 6px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon::after {
    inset: auto 9px 7px !important;
    height: 6px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-label {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
}

@media (min-width: 1024px) {
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-wrap {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge {
    display: block !important;
    margin: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-value-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard #analyticsRiskScoreValue {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -58%) !important;
    display: block !important;
    margin: 0 !important;
    line-height: 0.92 !important;
    white-space: nowrap !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard #analyticsRiskGrade {
    position: absolute !important;
    top: calc(50% + 32px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
    min-height: 28px !important;
    line-height: 28px !important;
    padding: 0 14px !important;
  }
}

@media (min-width: 1024px) {
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel {
    --ops-support-shared-height: clamp(620px, calc(100dvh - 214px), 980px) !important;
    align-content: start !important;
    justify-content: stretch !important;
    grid-auto-rows: max-content !important;
    gap: 4px !important;
    padding-top: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel:not(.hidden) {
    display: grid !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel.hidden,
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel[aria-hidden="true"] {
    display: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel > .panel-title-row {
    min-height: auto !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    align-items: flex-start !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel > .panel-title-row .soc-page-header-main,
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel > .panel-title-row .title-inline {
    gap: 0 !important;
    margin: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-workspace {
    gap: 2px !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout {
    align-items: start !important;
    margin-top: 0 !important;
    min-height: var(--ops-support-shared-height, 640px) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout:not(.has-detail-panel) #opsSupportMain.soc-ops-support-main,
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportMain.soc-ops-support-main {
    min-height: var(--ops-support-shared-height, 640px) !important;
    height: var(--ops-support-shared-height, 640px) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportSheet.soc-ops-support-sheet {
    height: var(--ops-support-shared-height, 640px) !important;
    max-height: var(--ops-support-shared-height, 640px) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportMain.soc-ops-support-main {
    flex: 1 1 auto !important;
    gap: 2px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: var(--ops-support-shared-height, 640px) !important;
    height: var(--ops-support-shared-height, 640px) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck {
    gap: 4px !important;
    padding: 0 0 4px !important;
    margin: 0 !important;
    margin-top: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar {
    gap: 2px !important;
    margin: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-main-row {
    padding-bottom: 4px !important;
    margin: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-support-strip {
    padding: 2px 0 0 !important;
    margin: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell {
    min-height: 0 !important;
    height: auto !important;
  }
}

@media (min-width: 1600px) {
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsAnalysisBoard {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsTrendPanel .soc-analytics-chart-shell {
    width: 100% !important;
    max-width: 860px !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
    justify-self: center !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsTrendPanel .soc-analytics-line-chart {
    height: 248px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-shell {
    width: 100% !important;
    max-width: 728px !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
    justify-self: center !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-grid-board {
    justify-content: center !important;
  }
}

@media (min-width: 2200px) {
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsTrendPanel .soc-analytics-chart-shell {
    max-width: 920px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-shell {
    max-width: 760px !important;
  }
}

/* ===== Ops support Outlook Web month view final authority ===== */
@media (min-width: 1024px) {
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel {
    --ops-support-shared-height: clamp(720px, calc(100dvh - 160px), 1240px) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel > .panel-title-row {
    margin: 0 0 6px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-workspace {
    gap: 0 !important;
    min-height: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportMain.soc-ops-support-main {
    display: grid !important;
    grid-template-rows: max-content minmax(0, 1fr) !important;
    align-content: start !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportMain.soc-ops-support-main > .soc-ops-support-control-deck {
    gap: 0 !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    border-bottom: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-main-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid #dbe4ee !important;
    overflow: visible !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-left {
    display: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-center {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filters {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-field {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-inline-label {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #697286 !important;
    white-space: nowrap !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-compact-control {
    min-width: 116px !important;
    max-width: 132px !important;
    height: 28px !important;
    padding: 0 22px 0 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #cfd8e3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #202430 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-compact-control:hover,
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-compact-control:focus-visible {
    border-bottom-color: #94a3b8 !important;
    background: transparent !important;
    outline: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label) {
    min-height: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #202430 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav .month-arrow {
    font-size: 18px !important;
    line-height: 1 !important;
    color: #445067 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav .month-label {
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):hover,
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label):focus-visible {
    background: transparent !important;
    color: #202430 !important;
    outline: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-right {
    align-self: end !important;
    justify-self: end !important;
    min-width: max-content !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-actions {
    gap: 14px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-export-top-btn {
    min-height: auto !important;
    height: auto !important;
    padding: 0 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #445067 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-view-toggle {
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"] {
    min-height: auto !important;
    height: auto !important;
    padding: 0 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #7b8599 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-view-toggle [data-action="ops-support-view"].is-active {
    background: transparent !important;
    color: #202430 !important;
    box-shadow: inset 0 -2px 0 #ff6a13 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel :is(#opsSupportActiveFilters, .soc-ops-support-support-strip) {
    display: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel:has(#opsSupportCalendarView.soc-ops-support-view:not(.hidden)) #opsSupportEmptyState {
    display: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    border: 1px solid #dbe4ee !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 7px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e4ebf3 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-weekdays > span {
    justify-content: flex-start !important;
    min-height: auto !important;
    padding: 0 8px !important;
    color: #687284 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid {
    min-height: 0 !important;
    height: 100% !important;
    gap: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell {
    gap: 3px !important;
    padding: 5px 6px 3px !important;
    border: 0 !important;
    border-right: 1px solid #e4ebf3 !important;
    border-bottom: 1px solid #e4ebf3 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell:nth-child(7n) {
    border-right: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell:hover {
    border-color: transparent !important;
    background: #fafcff !important;
    box-shadow: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-selected {
    background: #f7fbff !important;
    box-shadow: inset 0 0 0 2px rgba(47, 128, 255, 0.35) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month {
    background: #fbfcfe !important;
    opacity: 1 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month .soc-ops-support-calendar-cell-head > strong {
    color: rgba(32, 36, 48, 0.42) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month :is(.soc-ops-support-calendar-line-label, .soc-ops-support-calendar-line-count) {
    color: rgba(32, 36, 48, 0.46) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month .soc-ops-support-calendar-line {
    opacity: 0.72 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-head {
    align-items: flex-start !important;
    margin-bottom: 1px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-head > strong {
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 700 !important;
    color: #202430 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-head > span {
    display: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-body {
    gap: 1px !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel :is(.soc-ops-support-calendar-line, .soc-ops-support-calendar-more) {
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line {
    min-height: 20px !important;
    padding: 0 4px 0 7px !important;
    color: #202430 !important;
    background: var(--ops-support-line-soft, #f8fafc) !important;
    box-shadow: inset 2px 0 0 var(--ops-support-line-accent, #94a3b8) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line:hover,
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line:focus-visible,
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line.is-selected {
    background: var(--ops-support-line-soft, #f8fafc) !important;
    box-shadow: inset 2px 0 0 var(--ops-support-line-accent, #94a3b8) !important;
    outline: none !important;
    filter: brightness(0.985) !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy {
    display: block !important;
    min-width: 0 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-label {
    display: block !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    color: #202430 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-count {
    padding-left: 6px !important;
    font-size: 11px !important;
    line-height: 15px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-status-dot {
    display: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more {
    align-self: flex-start !important;
    min-height: auto !important;
    padding: 0 4px 0 8px !important;
    color: #5b6577 !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more:hover,
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more:focus-visible {
    background: transparent !important;
    color: #202430 !important;
    outline: none !important;
  }

  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportSheet.soc-ops-support-sheet {
    width: clamp(312px, 21vw, 348px) !important;
    min-width: clamp(312px, 21vw, 348px) !important;
  }
}

@media (min-width: 1024px) {
  #opsSupportPanel {
    --ops-support-shared-height: clamp(620px, calc(100dvh - 186px), 1120px) !important;
  }

  #opsSupportPanel .soc-ops-support-workspace,
  #opsSupportPanel #opsSupportLayout.soc-ops-support-layout,
  #opsSupportPanel #opsSupportMain.soc-ops-support-main,
  #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) {
    min-height: 0 !important;
  }

  #opsSupportPanel #opsSupportLayout.soc-ops-support-layout {
    min-height: var(--ops-support-shared-height, 620px) !important;
    height: var(--ops-support-shared-height, 620px) !important;
    max-height: var(--ops-support-shared-height, 620px) !important;
    overflow: hidden !important;
  }

  #opsSupportPanel #opsSupportMain.soc-ops-support-main {
    display: grid !important;
    grid-template-rows: max-content minmax(0, 1fr) !important;
    align-content: start !important;
    min-height: var(--ops-support-shared-height, 620px) !important;
    height: var(--ops-support-shared-height, 620px) !important;
    max-height: var(--ops-support-shared-height, 620px) !important;
    overflow: hidden !important;
  }

  #opsSupportPanel #opsSupportLayout.soc-ops-support-layout.has-detail-panel #opsSupportSheet.soc-ops-support-sheet {
    min-height: var(--ops-support-shared-height, 620px) !important;
    height: var(--ops-support-shared-height, 620px) !important;
    max-height: var(--ops-support-shared-height, 620px) !important;
  }

  #opsSupportPanel .soc-ops-support-toolbar-main-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  #opsSupportPanel .soc-ops-support-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #opsSupportPanel .soc-ops-support-toolbar-center {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  #opsSupportPanel .soc-ops-support-toolbar-left {
    display: none !important;
  }

  #opsSupportPanel .ops-support-month-nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    min-height: 36px !important;
    height: 36px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #opsSupportPanel :is(#opsSupportActiveFilters, .soc-ops-support-support-strip) {
    display: none !important;
  }
}

/* ===== Final dark-mode authority: app-wide desktop surfaces ===== */
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) {
  background: var(--ui-bg-canvas) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  #dashboardPanel,
  #homeView,
  #alertsView,
  #ticketsView,
  #analyticsView,
  #peopleView,
  #accountPanel,
  #employeeScorePanel,
  #opsSupportPanel,
  #hqReminderPanel,
  #notificationPanel,
  #notificationSettingsPanel,
  #auditPanel,
  #announcementPanel,
  #weeklyView,
  #reportsHubView,
  #excelPanel,
  #googleSheetsPanel
) {
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  #homeView .soc-home-hub-card,
  #analyticsView .soc-analytics-board-card,
  #alertsView .soc-phase1-surface,
  #ticketsView .soc-phase1-surface,
  #alertsView .soc-summary-card,
  #ticketsView .soc-summary-card,
  #alertsView .soc-pc-side-panel,
  #ticketsView .soc-pc-side-panel,
  #peopleView .panel,
  #peopleView .soc-people-stats-card,
  #peopleView .soc-people-pane-summary,
  #peopleView .soc-people-detail-panel,
  #employeeScorePanel .panel,
  #employeeScorePanel .soc-hub-section-card,
  #employeeScorePanel .soc-employee-score-summary-card,
  #employeeScorePanel .soc-employee-score-detail-panel,
  #opsSupportPanel .soc-ops-support-workspace,
  #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden),
  #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet,
  #hqReminderPanel .soc-system-section-card,
  #hqReminderPanel .soc-reminder-config-card,
  #hqReminderPanel .soc-reminder-preview-box,
  #hqReminderPanel .soc-reminder-danger-zone,
  #notificationPanel .soc-notification-center-shell,
  #notificationPanel .soc-notification-center-group,
  #notificationPanel .soc-notification-permission-banner,
  #notificationPanel .soc-notification-onboarding-modal,
  #notificationSettingsPanel .soc-system-section-card,
  #auditPanel .soc-system-section-card,
  #announcementPanel .notices-panel,
  #announcementPanel .notices-compose-document,
  #announcementPanel .notices-compose-settings-panel,
  #announcementPanel .notices-table-picker,
  #weeklyView .soc-weekly-control-card,
  #weeklyView .soc-weekly-review-card,
  #weeklyView .soc-weekly-section-card,
  #weeklyView .soc-weekly-builder-scope-card,
  #weeklyView .soc-report-headerbar,
  #reportsHubView .panel,
  #excelPanel .panel,
  #googleSheetsPanel .panel,
  .soc-workspace-drawer,
  .soc-bottom-sheet-panel,
  .soc-risk-info-popover
) {
  background: var(--ui-bg-surface) !important;
  border-color: var(--ui-border-subtle) !important;
  color: var(--ui-text-primary) !important;
  box-shadow: var(--soc-shadow-soft) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  .soc-block-head h3,
  .soc-workspace-card-head h3,
  .soc-home-hub-card-head h3,
  .soc-analytics-board-card-head h3,
  .soc-pc-side-panel-head h4,
  .soc-phase1-page-header-main .soc-workspace-page-title,
  .soc-page-header-main .soc-workspace-page-title,
  .soc-people-admin-title-block h2,
  .panel-title-row h2,
  .notices-detail-title,
  .notices-compose-title-input,
  #announcementPanel .notices-list-title,
  #weeklyView h3,
  #weeklyView h4
) {
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  .meta,
  .help,
  .soc-home-hub-kpi-meta,
  .soc-home-hub-header-note,
  .soc-home-hub-card-head .meta,
  .soc-analytics-v2-toolbar-label,
  .soc-analytics-v2-toolbar-label--ghost,
  .soc-analytics-v2-kpi-tile .meta,
  .soc-analytics-v2-health-item .meta,
  .soc-analytics-line-axis,
  .soc-analytics-pattern-row-label,
  .soc-analytics-pattern-axis,
  .soc-analytics-followup-item-meta,
  .soc-analytics-hotspot-role,
  .soc-analytics-hotspot-summary,
  .soc-analytics-hotspot-last,
  .soc-pc-side-panel-empty-copy,
  .soc-pc-side-panel-kpi-label,
  .soc-pc-side-panel-section-title,
  .soc-people-pane-summary-eyebrow,
  .soc-employee-score-summary-label,
  .soc-employee-score-site-row-meta,
  .notices-search-form input::placeholder,
  .notices-compose-placeholder,
  .notices-compose-help,
  .soc-reminder-card-copy .meta,
  .soc-reminder-advanced-head .meta,
  .soc-notification-center-summary,
  .soc-notification-center-item-hint
) {
  color: var(--ui-text-secondary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select,
  .ds-input,
  .soc-pc-side-panel-input,
  .notices-compose-title-input,
  .notices-search-form input,
  .soc-notification-center-search input
) {
  background: var(--soc-input-bg) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text-primary) !important;
  box-shadow: none !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  input:not([type="checkbox"]):not([type="radio"])::placeholder,
  textarea::placeholder
) {
  color: var(--soc-placeholder) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  .ds-btn.ds-btn-secondary,
  .ds-btn.ds-btn-ghost,
  .report-tab,
  .announcement-mode-btn,
  .site-filter-btn,
  .date-filter-btn,
  .sla-page-btn,
  .notices-search-toggle,
  .soc-notification-center-tab,
  #analyticsView .soc-analytics-detail-segmented button,
  #peopleView .soc-people-segment-btn,
  #peopleView .soc-people-hub-switch-btn,
  #ticketsView .chip,
  #opsSupportPanel .soc-ops-support-view-toggle button
) {
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text-primary) !important;
  box-shadow: none !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  .ds-btn.ds-btn-secondary:hover,
  .ds-btn.ds-btn-ghost:hover,
  .notices-search-toggle:hover,
  .notices-search-toggle:focus-visible,
  .soc-notification-center-tab:hover,
  #analyticsView .soc-analytics-detail-segmented button:hover,
  #peopleView .soc-people-segment-btn:hover,
  #peopleView .soc-people-hub-switch-btn:hover
) {
  background: rgba(148, 163, 184, 0.14) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  .soc-notification-center-tab.is-active,
  .soc-notification-center-tab[aria-selected="true"],
  #analyticsView .soc-analytics-detail-segmented button.is-active,
  #peopleView .soc-people-segment-btn.is-active,
  #peopleView .soc-people-hub-switch-btn.is-active,
  #ticketsView .chip.is-active,
  #opsSupportPanel .soc-ops-support-view-toggle button.is-active
) {
  background: rgba(255, 107, 0, 0.16) !important;
  border-color: rgba(255, 107, 0, 0.34) !important;
  color: #ffd8c2 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  #homeView .soc-home-priority-row,
  #homeView .soc-home-ticket-row,
  #homeView .soc-home-mini-row,
  #homeView .soc-home-watch-row,
  #analyticsView .soc-analytics-hotspot-row,
  #analyticsView .soc-analytics-followup-column,
  #analyticsView .soc-analytics-followup-hero,
  #analyticsView .soc-analytics-followup-item,
  #analyticsView .soc-analytics-v2-site-row,
  #alertsView .soc-pc-selectable-row,
  #ticketsView .soc-pc-selectable-row,
  #employeeScorePanel .soc-employee-score-site-row,
  #notificationPanel .soc-notification-center-item
) {
  background: var(--ui-bg-surface-2) !important;
  border-color: var(--ui-border-subtle) !important;
  color: var(--ui-text-primary) !important;
  box-shadow: none !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  #homeView .soc-home-priority-row:hover,
  #homeView .soc-home-ticket-row:hover,
  #homeView .soc-home-mini-row:hover,
  #homeView .soc-home-watch-row:hover,
  #analyticsView .soc-analytics-hotspot-row.is-actionable:hover,
  #analyticsView .soc-analytics-followup-item:hover,
  #analyticsView .soc-analytics-v2-site-row:hover,
  #alertsView .soc-pc-selectable-row:hover,
  #ticketsView .soc-pc-selectable-row:hover,
  #employeeScorePanel .soc-employee-score-site-row:hover,
  #notificationPanel .soc-notification-center-item:hover
) {
  background: #152242 !important;
  border-color: var(--ui-border-strong) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  #alertsView .soc-summary-card,
  #ticketsView .soc-summary-card,
  #alertsView .soc-pc-side-panel-kpi-item,
  #ticketsView .soc-pc-side-panel-kpi-item,
  #employeeScorePanel .soc-employee-score-summary-card,
  #analyticsView .soc-analytics-v2-kpi-tile,
  #analyticsView .soc-analytics-v2-health-item
) {
  background: var(--ui-bg-surface-2) !important;
  border-color: var(--ui-border-subtle) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  #alertsView .soc-summary-value,
  #ticketsView .soc-summary-value,
  #analyticsView .soc-analytics-v2-kpi-tile strong,
  #analyticsView .soc-analytics-v2-health-item strong,
  #employeeScorePanel .soc-employee-score-summary-value
) {
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-chart-shell,
  .soc-analytics-pattern-shell,
  .soc-analytics-cause-shell,
  .soc-analytics-hotspot-shell,
  .soc-analytics-v2-table-shell
) {
  background: var(--ui-bg-surface-2) !important;
  border-color: var(--ui-border-subtle) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-line-chart .grid {
  stroke: rgba(169, 182, 211, 0.22) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-line-chart .area {
  fill: rgba(255, 107, 0, 0.12) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-line-chart .line {
  stroke: #ff7a1a !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-pattern-cell,
  .soc-analytics-pattern-cell-board
) {
  background: #101a30 !important;
  border-color: #223055 !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-pattern-cell.i1,
  .soc-analytics-pattern-cell-board.i1,
  .soc-analytics-pattern-scale.i1
) {
  background: rgba(255, 122, 26, 0.08) !important;
  border-color: rgba(255, 122, 26, 0.16) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-pattern-cell.i2,
  .soc-analytics-pattern-cell-board.i2,
  .soc-analytics-pattern-scale.i2
) {
  background: rgba(255, 122, 26, 0.16) !important;
  border-color: rgba(255, 122, 26, 0.26) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-pattern-cell.i3,
  .soc-analytics-pattern-cell-board.i3,
  .soc-analytics-pattern-scale.i3
) {
  background: rgba(255, 122, 26, 0.24) !important;
  border-color: rgba(255, 122, 26, 0.34) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-pattern-cell.i4,
  .soc-analytics-pattern-cell-board.i4,
  .soc-analytics-pattern-scale.i4
) {
  background: rgba(255, 122, 26, 0.34) !important;
  border-color: rgba(255, 122, 26, 0.44) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-pattern-cell.i5,
  .soc-analytics-pattern-cell-board.i5,
  .soc-analytics-pattern-scale.i5
) {
  background: #ff7a1a !important;
  border-color: #ff7a1a !important;
  color: #ffffff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-cause-head {
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-cause-track {
  background: #182542 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-cause-track span {
  background: #ff7a1a !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-table-head {
  background: #111a31 !important;
  border-bottom-color: var(--ui-border-subtle) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-v2-table-head > *,
  .soc-analytics-v2-sort-head
) {
  color: var(--ui-text-secondary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-row.is-selected {
  background: #17284a !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-search-input-wrap {
  border-bottom-color: rgba(169, 182, 211, 0.26) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel :is(
  .notices-toolbar-item,
  .notices-editor-action
) {
  color: var(--ui-text-secondary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel :is(
  .notices-toolbar-item:hover,
  .notices-toolbar-item:focus-visible,
  .notices-editor-action:hover,
  .notices-editor-action:focus-visible,
  .notices-toolbar-item.is-active
) {
  color: #ffd1b4 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-table-picker {
  background: #10182d !important;
  border-color: var(--ui-border-strong) !important;
  box-shadow: var(--soc-shadow-card) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-table-picker-cell {
  background: #0e1729 !important;
  border-color: #26365f !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #announcementPanel .notices-table-picker-cell.is-active {
  background: rgba(255, 122, 26, 0.22) !important;
  border-color: rgba(255, 122, 26, 0.4) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationPanel :is(
  .soc-notification-center-item,
  .soc-notification-onboarding-modal .modal-panel,
  .soc-notification-permission-banner
) {
  background: var(--ui-bg-surface-2) !important;
  border-color: var(--ui-border-subtle) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  #alertsView .soc-pc-side-panel-thread,
  #ticketsView .soc-pc-side-panel-thread,
  #alertsView .soc-pc-side-panel-summary,
  #ticketsView .soc-pc-side-panel-summary,
  #peopleView .soc-people-detail-summary,
  #employeeScorePanel .soc-employee-score-breakdown-section,
  #employeeScorePanel .soc-employee-score-breakdown-details,
  #employeeScorePanel .soc-employee-score-table-wrap,
  #hqReminderPanel .soc-reminder-preview-box,
  #hqReminderPanel .soc-reminder-danger-zone
) {
  background: var(--ui-bg-surface-2) !important;
  border-color: var(--ui-border-subtle) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel {
  background: transparent !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-main-row {
  background: transparent !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) {
  background: var(--ui-bg-surface) !important;
  border-color: var(--ui-border-subtle) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-weekdays {
  background: #10192e !important;
  border-bottom-color: var(--ui-border-subtle) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-weekdays > span {
  color: var(--ui-text-secondary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid > .soc-ops-support-calendar-cell {
  background: var(--ui-bg-surface) !important;
  border-color: var(--ui-border-subtle) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month {
  background: #0f1729 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month .soc-ops-support-calendar-cell-head > strong {
  color: rgba(241, 245, 249, 0.44) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month :is(.soc-ops-support-calendar-line-label, .soc-ops-support-calendar-line-count) {
  color: rgba(241, 245, 249, 0.5) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-outside-month .soc-ops-support-calendar-line {
  opacity: 0.68 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell:hover {
  background: #121d35 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell.is-selected {
  background: #14213d !important;
  box-shadow: inset 0 0 0 2px rgba(255, 107, 0, 0.32) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-cell-head > strong,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line-label {
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line {
  background: #101c34 !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-more {
  color: var(--ui-text-secondary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet.soc-ops-support-sheet {
  background: var(--ui-bg-surface) !important;
  border-color: var(--ui-border-subtle) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet :is(
  .soc-ops-support-detail-section,
  .soc-ops-support-detail-summary-metric,
  .soc-ops-support-detail-summary-purpose,
  .worker-row,
  .soc-ops-support-detail-more,
  .soc-ops-support-detail-timeline-item
) {
  background: var(--ui-bg-surface-2) !important;
  border-color: var(--ui-border-subtle) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  .soc-realtime-date-icon-img,
  .soc-ticket-datebar .soc-realtime-date-icon-img
) {
  filter: brightness(1.25) contrast(0.92) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) .soc-app-shell > header.topbar {
  background: rgba(18, 28, 47, 0.94) !important;
  border-bottom: 1px solid var(--ui-border-subtle) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) .soc-app-shell > main.container.ds-page,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) .soc-app-shell > main.container.ds-page.admin-layout {
  background: var(--ui-bg-canvas) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(
  #homeView,
  #analyticsView,
  #announcementPanel,
  #alertsView,
  #ticketsView,
  #peopleView,
  #employeeScorePanel,
  #hqReminderPanel,
  #notificationSettingsPanel,
  #auditPanel,
  #weeklyView
) {
  background: transparent !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-v2-toolbar,
  .soc-analytics-v2-kpi-tile,
  .soc-analytics-v2-health-item,
  .soc-analytics-hotspot-row,
  .soc-analytics-v2-table-shell,
  .soc-analytics-followup-column,
  .soc-analytics-followup-hero,
  .soc-analytics-followup-item
) {
  background: var(--ui-bg-surface-2) !important;
  border-color: var(--ui-border-subtle) !important;
  color: var(--ui-text-primary) !important;
  box-shadow: none !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-v2-toolbar .ds-btn,
  .soc-analytics-v2-toolbar select,
  .soc-analytics-v2-toolbar input,
  .soc-analytics-v2-toolbar button:not(.soc-primary-btn)
) {
  background: #10192b !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  .soc-analytics-hotspot-score-badge,
  .soc-analytics-followup-hero-chip,
  .soc-analytics-followup-item-age
) {
  background: #10192b !important;
  border-color: var(--ui-border-strong) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#alertsView, #ticketsView) :is(
  .soc-realtime-datebar,
  .soc-ops-workspace-topbar,
  .soc-pc-list-main,
  .soc-realtime-state
) {
  background: var(--ui-bg-surface-2) !important;
  border-color: var(--ui-border-subtle) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#alertsView, #ticketsView) :is(
  .soc-workspace-inline-badge,
  .soc-pc-selectable-row,
  .soc-pc-list-header
) {
  background: #10192b !important;
  border-color: var(--ui-border-subtle) !important;
  color: var(--ui-text-secondary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#alertsView, #ticketsView) .soc-pc-selectable-row.is-selected {
  background: #14233a !important;
  border-color: rgba(255, 122, 26, 0.26) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-form {
  background: var(--ui-bg-surface-2) !important;
  border-color: var(--ui-border-subtle) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-form :is(
  input,
  select,
  textarea,
  .ds-btn:not(.soc-primary-btn)
) {
  background: #10192b !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text-primary) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-calendar-line {
  background: #121d31 !important;
  border-color: rgba(255, 122, 26, 0.22) !important;
}

/* ===== Final dark-mode authority: neon text + no bright fills ===== */
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard {
  background: linear-gradient(180deg, rgba(18, 28, 47, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-color: rgba(255, 122, 26, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.08), 0 0 0 1px rgba(255, 122, 26, 0.08) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-track {
  stroke: rgba(235, 241, 255, 0.22) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-analytics-v2-risk-gauge-arc {
  stroke: #ff7a1a !important;
  filter: none !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard :is(
  h3,
  .soc-analytics-v2-title-with-help,
  #analyticsRiskScoreValue,
  .soc-risk-grade,
  .soc-risk-info-trigger,
  .soc-analytics-v2-help-btn
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsHeroRiskCard .soc-risk-grade {
  background: rgba(255, 122, 26, 0.18) !important;
  border-color: rgba(255, 140, 48, 0.44) !important;
  color: #fff4ea !important;
  box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.12) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView :is(
  #analyticsHeroKpiRack h3,
  #analyticsHeroKpiRack strong,
  #analyticsHeroKpiRack .meta,
  #analyticsHeroHealthCard h3,
  #analyticsHeroHealthCard strong,
  #analyticsHeroHealthCard .meta,
  .soc-analytics-followup-column h3,
  .soc-analytics-followup-column strong,
  .soc-analytics-followup-column p,
  .soc-analytics-followup-hero strong,
  .soc-analytics-followup-hero p,
  .soc-analytics-followup-item strong,
  .soc-analytics-followup-item p
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView :is(
  .soc-home-ticket-title,
  .soc-home-mini-title,
  .soc-home-watch-title,
  .soc-home-priority-title,
  .soc-home-hub-card-head h3,
  .soc-home-watch-empty-title
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView :is(
  .soc-home-ticket-meta,
  .soc-home-ticket-age,
  .soc-home-mini-meta,
  .soc-home-mini-age,
  .soc-home-watch-meta,
  .soc-home-priority-meta,
  .soc-home-watch-empty-copy
) {
  color: rgba(232, 238, 248, 0.76) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-status-chip.is-active.is-warning {
  background: rgba(255, 191, 60, 0.18) !important;
  border-color: rgba(255, 191, 60, 0.38) !important;
  color: #fff2cf !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-status-chip.is-active.is-alert {
  background: rgba(255, 122, 26, 0.2) !important;
  border-color: rgba(255, 122, 26, 0.38) !important;
  color: #fff0e6 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-chip[data-tone="incident"] {
  background: rgba(255, 122, 26, 0.18) !important;
  border-color: rgba(255, 122, 26, 0.34) !important;
  color: #fff1e5 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-chip[data-tone="ticket"] {
  background: rgba(47, 128, 255, 0.16) !important;
  border-color: rgba(47, 128, 255, 0.34) !important;
  color: #eff6ff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-badge[data-tone="warning"] {
  background: rgba(255, 191, 60, 0.14) !important;
  border-color: rgba(255, 191, 60, 0.32) !important;
  color: #fff0cd !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-badge[data-tone="danger"] {
  background: rgba(255, 122, 26, 0.18) !important;
  border-color: rgba(255, 122, 26, 0.34) !important;
  color: #fff0e6 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-priority-badge[data-tone="neutral"] {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(169, 182, 211, 0.24) !important;
  color: #eef4ff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-watch-chip[data-tone="danger"] {
  background: rgba(255, 107, 107, 0.16) !important;
  border-color: rgba(255, 107, 107, 0.34) !important;
  color: #fff0f0 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-watch-chip[data-tone="caution"] {
  background: rgba(255, 191, 60, 0.14) !important;
  border-color: rgba(255, 191, 60, 0.3) !important;
  color: #fff0cd !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-ticket-state {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(169, 182, 211, 0.24) !important;
  color: #eef4ff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-cell-head > strong {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line {
  border: 1px solid rgba(255, 122, 26, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(255, 122, 26, 0.08) !important;
  color: #f8fbff !important;
  box-shadow: inset 2px 0 0 rgba(255, 122, 26, 0.9), 0 0 16px rgba(255, 122, 26, 0.08) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-pending,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-pending {
  background: rgba(255, 166, 43, 0.12) !important;
  border-color: rgba(255, 191, 60, 0.36) !important;
  color: #fff3d4 !important;
  box-shadow: inset 2px 0 0 #ffbf3c, 0 0 14px rgba(255, 191, 60, 0.08) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-approved,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-confirmed,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-approved {
  background: rgba(30, 191, 163, 0.12) !important;
  border-color: rgba(30, 191, 163, 0.34) !important;
  color: #eafffb !important;
  box-shadow: inset 2px 0 0 #1ebfa3, 0 0 14px rgba(30, 191, 163, 0.08) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-unavailable,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-rejected,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-unavailable,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-rejected,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.is-over-assigned {
  background: rgba(255, 107, 107, 0.12) !important;
  border-color: rgba(255, 107, 107, 0.34) !important;
  color: #ffecee !important;
  box-shadow: inset 2px 0 0 #ff6b6b, 0 0 14px rgba(255, 107, 107, 0.08) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line.state-cancelled,
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .cal-line.state-cancelled {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(169, 182, 211, 0.26) !important;
  color: #eaf1ff !important;
  box-shadow: inset 2px 0 0 #a9b6d3, 0 0 14px rgba(169, 182, 211, 0.06) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid :is(
  .soc-ops-support-calendar-line-label,
  .soc-ops-support-calendar-line-copy,
  .soc-ops-support-calendar-line-main,
  .soc-ops-support-calendar-line-count
) {
  color: inherit !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet :is(
  h3,
  h4,
  strong,
  .soc-ops-support-detail-summary-meta,
  .soc-ops-support-detail-summary-label,
  .soc-ops-support-detail-summary-value,
  .soc-ops-support-detail-summary-inline,
  .soc-ops-support-detail-timeline-copy,
  .soc-ops-support-detail-timeline-meta,
  .soc-ops-support-detail-section-title,
  .soc-ops-support-detail-empty-copy,
  .worker-row,
  .worker-row span,
  .worker-row strong,
  .worker-row button
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet :is(
  .worker-row,
  .soc-ops-support-detail-summary-metric,
  .soc-ops-support-detail-summary-purpose,
  .soc-ops-support-detail-timeline-item
) {
  background: #141e34 !important;
  border-color: rgba(169, 182, 211, 0.18) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportSheet :is(
  .worker-row .ds-btn:not(.soc-primary-btn):not(.ds-btn-primary),
  .worker-row button:not(.soc-primary-btn):not(.ds-btn-primary)
) {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(169, 182, 211, 0.24) !important;
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#alertsView, #ticketsView) .soc-pc-side-panel :is(
  h3,
  h4,
  strong,
  label,
  span,
  p,
  dt,
  dd,
  .soc-pc-side-panel-summary-value,
  .soc-pc-side-panel-thread-copy
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView :is(
  h3,
  h4,
  .soc-workspace-card-head h3,
  .soc-monitoring-grid-primary,
  .soc-people-detail-panel strong,
  .soc-people-detail-panel span,
  .soc-people-detail-panel p
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView :is(
  .soc-people-pane-summary-head h3,
  .soc-workspace-card-head h3,
  .soc-people-detail-panel-head h3,
  .soc-workspace-drawer-head h3,
  .soc-sheet-head h3
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#peopleView, #employeeScorePanel) :is(
  .soc-people-donut-center,
  .soc-people-donut-center strong,
  .soc-people-donut-center span
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#peopleView, #employeeScorePanel) .soc-monitoring-grid-primary {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is(
  .soc-reminder-card-head h3,
  .soc-settings-scope-label,
  .soc-notification-setting-row strong,
  .soc-notification-setting-row span,
  .soc-notification-settings-form h4,
  .soc-notification-settings-form label
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-settings-scope-label {
  background: rgba(255, 122, 26, 0.14) !important;
  border-color: rgba(255, 122, 26, 0.3) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel :is(
  .soc-apple-weekly-flow-shell,
  .soc-apple-weekly-flow-main,
  .soc-apple-weekly-stage-surface,
  .soc-apple-weekly-sync-selection-card,
  .soc-apple-weekly-setup-shell-card,
  .soc-apple-weekly-setup-list-card,
  .soc-apple-weekly-setup-section,
  .soc-apple-weekly-setup-support-card,
  .soc-apple-weekly-setup-context-card
) {
  background: #141e34 !important;
  border-color: rgba(169, 182, 211, 0.18) !important;
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel :is(
  .soc-apple-weekly-flow-header h3,
  .soc-apple-weekly-flow-step-copy strong,
  .soc-apple-weekly-sync-selection-head strong,
  .soc-apple-weekly-sync-selection-link,
  .soc-apple-weekly-sync-selection-facts em,
  .soc-apple-weekly-sync-selection-facts b,
  .soc-apple-weekly-setup-section-head h4,
  .soc-apple-weekly-stage-banner strong,
  .soc-apple-weekly-stage-banner p
) {
  color: #f8fbff !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel :is(
  .soc-apple-weekly-stage-actions .ds-btn:not(.ds-btn-primary),
  .soc-apple-weekly-setup-footer .ds-btn:not(.ds-btn-primary),
  .soc-apple-weekly-flow-back-row .ds-btn:not(.ds-btn-primary)
) {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(169, 182, 211, 0.24) !important;
  color: #f8fbff !important;
}

@media (min-width: 1024px) {
  body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container.ds-page > :is(
    #hqReminderPanel,
    #notificationSettingsPanel,
    #auditPanel
  ).soc-settings-panel,
  body:is(.soc-desktop-shell, .soc-desktop-adaptive) .container.admin-layout > :is(
    #hqReminderPanel,
    #notificationSettingsPanel,
    #auditPanel
  ).soc-settings-panel {
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable both-edges;
  }
}

@media (min-width: 1024px) {
  body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-stepper-region {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 -2px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-stepper {
    width: 100% !important;
    margin: 0 !important;
  }

  body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step-node {
    box-shadow: none !important;
    filter: none !important;
  }

  [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step.is-active .soc-apple-weekly-flow-step-node,
  [data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #googleSheetsPanel.soc-apple-weekly-mode .soc-apple-weekly-flow-step.is-complete .soc-apple-weekly-flow-step-node {
    box-shadow: none !important;
    filter: none !important;
  }
}

/* ===== Final dark authority: analytics top risk sites pager + status chips ===== */
[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-table-footer {
  border-top-color: rgba(169, 182, 211, 0.14) !important;
  background: #121b2d !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-btn {
  border-color: rgba(169, 182, 211, 0.24) !important;
  background: #141f34 !important;
  color: #eef4ff !important;
  box-shadow: none !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-btn:hover:not(:disabled) {
  border-color: rgba(255, 122, 26, 0.34) !important;
  background: rgba(255, 122, 26, 0.12) !important;
  color: #fff4ea !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-btn.is-active {
  border-color: rgba(255, 122, 26, 0.58) !important;
  background: rgba(255, 122, 26, 0.16) !important;
  color: #fff4ea !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-btn:disabled {
  border-color: rgba(169, 182, 211, 0.16) !important;
  background: rgba(148, 163, 184, 0.12) !important;
  color: rgba(232, 238, 248, 0.48) !important;
  opacity: 1 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-page-ellipsis {
  color: rgba(232, 238, 248, 0.68) !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-cell--state .soc-risk-grade {
  background: #18233a !important;
  color: #f8fbff !important;
  box-shadow: none !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, .soc-risk-grade[data-risk-level="safe"]) {
  border-color: rgba(24, 178, 107, 0.4) !important;
  background: rgba(24, 178, 107, 0.16) !important;
  color: #eafff4 !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.caution, .soc-risk-grade.is-caution, .soc-risk-grade[data-risk-level="caution"]) {
  border-color: rgba(255, 191, 60, 0.4) !important;
  background: rgba(255, 191, 60, 0.16) !important;
  color: #fff1cf !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical, .soc-risk-grade.is-danger, .soc-risk-grade[data-risk-level="danger"]) {
  border-color: rgba(255, 107, 107, 0.42) !important;
  background: rgba(255, 107, 107, 0.16) !important;
  color: #fff0f1 !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer,
html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer > * {
  background: #121b2d !important;
  color: #eef4ff !important;
  border-top-color: rgba(169, 182, 211, 0.14) !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer :is(button, span),
html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager :is(button, span) {
  color: #eef4ff !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn {
  border-color: rgba(169, 182, 211, 0.24) !important;
  background: #141f34 !important;
  color: #eef4ff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:hover:not(:disabled) {
  border-color: rgba(255, 122, 26, 0.34) !important;
  background: rgba(255, 122, 26, 0.12) !important;
  color: #fff4ea !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn.is-active {
  border-color: rgba(255, 122, 26, 0.58) !important;
  background: rgba(255, 122, 26, 0.16) !important;
  color: #fff4ea !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:disabled {
  border-color: rgba(169, 182, 211, 0.16) !important;
  background: rgba(148, 163, 184, 0.12) !important;
  color: rgba(232, 238, 248, 0.48) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-ellipsis {
  color: rgba(232, 238, 248, 0.68) !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state .soc-risk-grade {
  background: #18233a !important;
  color: #f8fbff !important;
  border-color: rgba(169, 182, 211, 0.2) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, .soc-risk-grade[data-risk-level="safe"]) {
  border-color: rgba(24, 178, 107, 0.4) !important;
  background: rgba(24, 178, 107, 0.16) !important;
  color: #eafff4 !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.caution, .soc-risk-grade.is-caution, .soc-risk-grade[data-risk-level="caution"]) {
  border-color: rgba(255, 191, 60, 0.4) !important;
  background: rgba(255, 191, 60, 0.16) !important;
  color: #fff1cf !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical, .soc-risk-grade.is-danger, .soc-risk-grade[data-risk-level="danger"]) {
  border-color: rgba(255, 107, 107, 0.42) !important;
  background: rgba(255, 107, 107, 0.16) !important;
  color: #fff0f1 !important;
}

/* ===== Final authority: home hub KPI icons + header cleanup ===== */
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-header-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-header-note {
  display: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-header-meta > :not(.soc-home-hub-live-pill) {
  display: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon {
  --soc-home-kpi-icon-mask: none;
  --soc-home-kpi-icon-size: 20px;
  --soc-home-kpi-icon-foreground: #64748b;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: var(--soc-home-kpi-icon-size) !important;
  height: var(--soc-home-kpi-icon-size) !important;
  border-radius: 0 !important;
  background: var(--soc-home-kpi-icon-foreground) !important;
  -webkit-mask: var(--soc-home-kpi-icon-mask) center / var(--soc-home-kpi-icon-size) var(--soc-home-kpi-icon-size) no-repeat !important;
  mask: var(--soc-home-kpi-icon-mask) center / var(--soc-home-kpi-icon-size) var(--soc-home-kpi-icon-size) no-repeat !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon::after {
  content: none !important;
  display: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="intake"] .soc-home-hub-kpi-icon {
  --soc-home-kpi-icon-foreground: #2866ec;
  --soc-home-kpi-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 8.5A2.5 2.5 0 0 1 6.5 6H8l1.1 1.4A2 2 0 0 0 10.7 8H17.5A2.5 2.5 0 0 1 20 10.5v6A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-8Z'/%3E%3Cpath d='M12 10.2a.85.85 0 0 1 .85.85v2.08l.92-.92a.85.85 0 1 1 1.2 1.2l-2.37 2.37a.85.85 0 0 1-1.2 0l-2.37-2.37a.85.85 0 0 1 1.2-1.2l.92.92v-2.08a.85.85 0 0 1 .85-.85Z'/%3E%3C/svg%3E");
  border-color: transparent !important;
  background: transparent !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="critical"] .soc-home-hub-kpi-icon {
  --soc-home-kpi-icon-foreground: #c27d00;
  --soc-home-kpi-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11.17 3.86a1 1 0 0 1 1.66 0l8.31 13.07A1 1 0 0 1 20.3 18H3.7a1 1 0 0 1-.85-1.07L11.17 3.86Z'/%3E%3Crect x='11.15' y='8.2' width='1.7' height='5.8' rx='.85' fill='white'/%3E%3Ccircle cx='12' cy='16.55' r='1.05' fill='white'/%3E%3C/svg%3E");
  border-color: transparent !important;
  background: transparent !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="pending"] .soc-home-hub-kpi-icon {
  --soc-home-kpi-icon-foreground: #5f708d;
  --soc-home-kpi-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3.5A8.5 8.5 0 1 0 20.5 12 8.51 8.51 0 0 0 12 3.5Zm0 1.9A6.6 6.6 0 1 1 5.4 12 6.61 6.61 0 0 1 12 5.4Z'/%3E%3Cpath d='M12 7.4a.95.95 0 0 1 .95.95v3.2l2.1 1.26a.95.95 0 1 1-.98 1.63l-2.56-1.54a.95.95 0 0 1-.46-.81V8.35A.95.95 0 0 1 12 7.4Z'/%3E%3C/svg%3E");
  border-color: transparent !important;
  background: transparent !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="urgent"] .soc-home-hub-kpi-icon {
  --soc-home-kpi-icon-size: 21px;
  --soc-home-kpi-icon-foreground: #f3681d;
  --soc-home-kpi-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.4 8.3a2.6 2.6 0 1 1 5.2 0v4.7H9.4V8.3Z'/%3E%3Cpath d='M7.3 12h9.4a2.2 2.2 0 0 1 2.2 2.2V18a1 1 0 0 1-1 1H6.1a1 1 0 0 1-1-1v-3.8A2.2 2.2 0 0 1 7.3 12Z'/%3E%3Cpath d='M7.1 6.2a.9.9 0 0 1 1.27-.05l1.4 1.3a.9.9 0 1 1-1.22 1.32l-1.4-1.3a.9.9 0 0 1-.06-1.27ZM16.84 6.14a.9.9 0 0 1 0 1.27l-1.32 1.32a.9.9 0 1 1-1.27-1.27l1.32-1.32a.9.9 0 0 1 1.27 0ZM12 4a.9.9 0 0 1 .9.9v1.34a.9.9 0 1 1-1.8 0V4.9A.9.9 0 0 1 12 4Z'/%3E%3C/svg%3E");
  border-color: transparent !important;
  background: transparent !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi-icon {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="intake"] .soc-home-hub-kpi-icon {
  --soc-home-kpi-icon-foreground: #8eb5ff;
  border-color: transparent !important;
  background: transparent !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="critical"] .soc-home-hub-kpi-icon {
  --soc-home-kpi-icon-foreground: #ffd56b;
  border-color: transparent !important;
  background: transparent !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="pending"] .soc-home-hub-kpi-icon {
  --soc-home-kpi-icon-foreground: #cbd5e1;
  border-color: transparent !important;
  background: transparent !important;
}

[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #homeView .soc-home-hub-kpi[data-tone="urgent"] .soc-home-hub-kpi-icon {
  --soc-home-kpi-icon-foreground: #ff9a62;
  border-color: transparent !important;
  background: transparent !important;
}

/* ===== Ultimate dark authority: analytics Top risk sites pager + status chips ===== */
html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer,
html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer > *,
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer,
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-table-footer > * {
  background: #121b2d !important;
  color: #eef4ff !important;
  border-top-color: rgba(169, 182, 211, 0.14) !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager :is(button, span),
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager :is(button, span) {
  color: #eef4ff !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn,
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn {
  background: #141f34 !important;
  border: 1px solid rgba(169, 182, 211, 0.24) !important;
  color: #eef4ff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:hover:not(:disabled),
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:hover:not(:disabled) {
  background: rgba(255, 122, 26, 0.12) !important;
  border-color: rgba(255, 122, 26, 0.34) !important;
  color: #fff4ea !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn.is-active,
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn.is-active {
  background: rgba(255, 122, 26, 0.16) !important;
  border-color: rgba(255, 122, 26, 0.58) !important;
  color: #fff4ea !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:disabled,
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-btn:disabled {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(169, 182, 211, 0.16) !important;
  color: rgba(232, 238, 248, 0.48) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-ellipsis,
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable #analyticsComparisonPager .soc-analytics-v2-page-ellipsis {
  color: rgba(232, 238, 248, 0.68) !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state .soc-risk-grade,
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state .soc-risk-grade {
  background: #18233a !important;
  border: 1px solid rgba(169, 182, 211, 0.22) !important;
  color: #f8fbff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, .soc-risk-grade[data-risk-level="safe"]),
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.safe, .soc-risk-grade.stable, .soc-risk-grade.is-safe, .soc-risk-grade[data-risk-level="safe"]) {
  background: rgba(24, 178, 107, 0.16) !important;
  border-color: rgba(24, 178, 107, 0.42) !important;
  color: #eafff4 !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.caution, .soc-risk-grade.is-caution, .soc-risk-grade[data-risk-level="caution"]),
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.caution, .soc-risk-grade.is-caution, .soc-risk-grade[data-risk-level="caution"]) {
  background: rgba(255, 191, 60, 0.16) !important;
  border-color: rgba(255, 191, 60, 0.42) !important;
  color: #fff1cf !important;
}

html[data-theme="dark"] body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical, .soc-risk-grade.is-danger, .soc-risk-grade[data-risk-level="danger"]),
body[data-theme="dark"]:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsSiteTable .soc-analytics-v2-site-cell--state :is(.soc-risk-grade.danger, .soc-risk-grade.risk, .soc-risk-grade.critical, .soc-risk-grade.is-danger, .soc-risk-grade[data-risk-level="danger"]) {
  background: rgba(255, 107, 107, 0.16) !important;
  border-color: rgba(255, 107, 107, 0.44) !important;
  color: #fff0f1 !important;
}

/* ===== Ultimate authority: ops support 5-week month view ===== */
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-main-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-toolbar-center {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav :is(.month-arrow, .month-label) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 36px !important;
  vertical-align: middle !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .ops-support-month-nav .month-label {
  padding-inline: 2px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filters {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-field {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-filter-inline-label {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  line-height: 36px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-compact-control {
  min-height: 36px !important;
  height: 36px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportEmptyState,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportEmptyState.hidden,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel:has(#opsSupportCalendarView.soc-ops-support-view:not(.hidden)) #opsSupportEmptyState {
  display: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarView.soc-ops-support-view:not(.hidden) {
  display: grid !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid.soc-ops-support-calendar-grid {
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-day-request-table .soc-ops-support-work-type-badge,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-day-request-table .support-status-inline {
  min-width: 0 !important;
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-day-request-table .soc-ops-support-work-type-badge {
  justify-content: flex-start !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel .soc-ops-support-day-request-table .support-status-inline {
  gap: 6px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

/* ===== Ultimate authority: settings flat panels ===== */
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) :is(#hqReminderPanel, #notificationSettingsPanel) :is(
  .soc-reminder-form,
  .soc-notification-settings-form
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is(.soc-notification-state-row, .soc-notification-check-row) {
  border: 0 !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row {
  padding-inline: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is(.soc-notification-state-row, .soc-notification-check-row) {
  padding-inline: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-preview-box,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-permission-banner {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is(
  .soc-settings-scope-label,
  #notificationPermissionBadge
) {
  display: none !important;
}

/* ===== Ultimate authority: people HR stats meaning + chart ratio ===== */
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-kpi-strip {
  grid-template-columns: minmax(250px, 0.95fr) minmax(340px, 1.15fr) minmax(250px, 0.9fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-kpi-card.is-sparkline {
  gap: 12px !important;
  align-content: start !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-sparkline-header {
  justify-content: flex-start !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-sparkline-shell {
  width: min(100%, 420px) !important;
  justify-self: center !important;
  align-self: start !important;
  padding: 10px 12px 8px !important;
  border-radius: 16px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-sparkline {
  height: 108px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-sparkline-caption {
  margin: 0 !important;
  color: var(--ui-text-secondary, var(--soc-text-sub)) !important;
  font-size: 12px !important;
  line-height: 17px !important;
  text-align: center !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-stats-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr) !important;
  gap: 16px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-chart {
  width: min(100%, 860px) !important;
  justify-self: center !important;
  min-height: 244px !important;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
  gap: 12px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-bars {
  min-height: 156px !important;
  height: 156px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-meta {
  gap: 4px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-meta strong {
  font-size: 12px !important;
  line-height: 17px !important;
  white-space: nowrap !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-workspace-card-head .meta {
  max-width: 32ch;
}

@media (min-width: 1800px) {
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #peopleView #peopleHubHrPane .soc-people-trend-chart {
    width: min(100%, 920px) !important;
  }
}

/* ===== Ultimate authority: settings inner chrome cleanup ===== */
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-form {
  gap: 10px !important;
  padding-top: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row {
  padding: 8px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row--preview {
  padding-top: 4px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel :is(
  .soc-reminder-preview-box,
  .soc-reminder-advanced,
  .soc-reminder-advanced-body,
  .soc-reminder-danger-zone
) {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-preview-box {
  padding: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-advanced > summary {
  padding: 10px 0 2px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-advanced-body {
  padding: 6px 0 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-danger-zone {
  padding: 6px 0 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-settings-form {
  gap: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is(
  .soc-settings-scope-label,
  #notificationPermissionBadge
) {
  display: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-permission-banner {
  padding: 0 0 10px !important;
  margin: 0 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-state-row {
  padding: 0 0 12px !important;
  margin: 0 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row {
  padding: 14px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row {
  border-top: 1px solid color-mix(in srgb, var(--ui-border-subtle, var(--soc-border)) 88%, white) !important;
}

/* ===== Ultimate authority: settings single-shell cleanup ===== */
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-config-card,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-settings-card {
  overflow: hidden !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-form {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 10px !important;
  padding: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row + .soc-reminder-row,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row--preview,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel :is(
  .soc-reminder-preview-box,
  .soc-reminder-advanced,
  .soc-reminder-advanced-body,
  .soc-reminder-danger-zone
) {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row {
  padding: 8px 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-row--preview {
  padding-top: 2px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-preview-box,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-advanced-body,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-danger-zone {
  padding: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #hqReminderPanel .soc-reminder-advanced > summary {
  padding: 8px 0 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-settings-form {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel :is(
  .soc-settings-scope-label,
  #notificationPermissionBadge,
  .soc-notification-permission-banner
) {
  display: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-state-row,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-state-row {
  padding: 0 0 10px !important;
  margin: 0 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #notificationSettingsPanel .soc-notification-check-row {
  padding: 12px 0 !important;
}

/* ===== Ultimate authority: ops support fresh pending burst ===== */
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line {
  position: relative !important;
  overflow: visible !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-calendar-line-copy {
  overflow: visible !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge {
  display: block !important;
  position: absolute !important;
  top: -23px !important;
  right: -12px !important;
  width: 50px !important;
  height: 38px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i {
  position: absolute !important;
  display: block !important;
  width: 1.4px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: #ff8a1f !important;
  box-shadow: none !important;
  transform-origin: 50% 50% !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i:nth-child(1) {
  top: 2px !important;
  right: 36px !important;
  height: 13px !important;
  transform: rotate(-9deg) !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i:nth-child(2) {
  top: -2px !important;
  right: 25px !important;
  height: 21px !important;
  transform: rotate(11deg) !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i:nth-child(3) {
  top: 16px !important;
  right: 0 !important;
  width: 21px !important;
  height: 1.4px !important;
  transform: rotate(-9deg) !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #opsSupportPanel #opsSupportCalendarGrid .soc-ops-support-fresh-badge-burst > i:nth-child(4) {
  top: 30px !important;
  right: 6px !important;
  width: 15px !important;
  height: 1.4px !important;
  transform: rotate(2deg) !important;
}

/* ===== Ultimate authority: settings no inner boxes ===== */
#hqReminderPanel .soc-reminder-form,
#notificationSettingsPanel .soc-notification-settings-form {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#hqReminderPanel .soc-reminder-row,
#hqReminderPanel .soc-reminder-row + .soc-reminder-row,
#hqReminderPanel .soc-reminder-row--preview,
#hqReminderPanel :is(
  .soc-reminder-preview-box,
  .soc-reminder-advanced,
  .soc-reminder-advanced-body,
  .soc-reminder-danger-zone
) {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#hqReminderPanel .soc-reminder-row {
  padding: 10px 0 !important;
}

#hqReminderPanel .soc-reminder-row--preview,
#hqReminderPanel .soc-reminder-preview-box,
#hqReminderPanel .soc-reminder-advanced-body,
#hqReminderPanel .soc-reminder-danger-zone {
  padding: 0 !important;
}

#hqReminderPanel .soc-reminder-advanced > summary {
  padding: 10px 0 0 !important;
}

#notificationSettingsPanel .soc-settings-scope-label,
#notificationSettingsPanel #notificationPermissionBadge,
#notificationSettingsPanel #notificationPermissionBanner {
  display: none !important;
}

#notificationSettingsPanel .soc-notification-state-row,
#notificationSettingsPanel .soc-notification-check-row,
#notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#notificationSettingsPanel .soc-notification-state-row {
  padding: 0 0 8px !important;
  margin: 0 !important;
}

#notificationSettingsPanel .soc-notification-check-row {
  padding: 12px 0 !important;
}

/* ===== Final authority: settings single outer shell only ===== */
#hqReminderPanel .soc-reminder-config-card,
#notificationSettingsPanel .soc-notification-settings-card {
  overflow: hidden !important;
}

#hqReminderPanel .soc-reminder-card-head,
#notificationSettingsPanel .soc-reminder-card-head {
  padding-bottom: 12px !important;
}

#hqReminderPanel .soc-reminder-form {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#hqReminderPanel .soc-reminder-row,
#hqReminderPanel .soc-reminder-row + .soc-reminder-row,
#hqReminderPanel .soc-reminder-row--preview,
#hqReminderPanel .soc-reminder-row--control,
#hqReminderPanel .soc-reminder-row--toggle,
#hqReminderPanel :is(
  .soc-reminder-preview-box,
  .soc-reminder-advanced,
  .soc-reminder-advanced-body,
  .soc-reminder-danger-zone
) {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#hqReminderPanel .soc-reminder-row {
  padding: 8px 0 !important;
  margin: 0 !important;
  row-gap: 10px !important;
}

#hqReminderPanel .soc-reminder-row--preview,
#hqReminderPanel .soc-reminder-preview-box,
#hqReminderPanel .soc-reminder-advanced-body,
#hqReminderPanel .soc-reminder-danger-zone {
  padding: 0 !important;
}

#hqReminderPanel .soc-reminder-advanced > summary {
  padding: 10px 0 0 !important;
  border: 0 !important;
}

#hqReminderPanel .soc-reminder-row + .soc-reminder-row,
#hqReminderPanel .soc-reminder-row--control + .soc-reminder-row,
#hqReminderPanel .soc-reminder-row--toggle + .soc-reminder-row,
#hqReminderPanel .soc-reminder-row--control + .soc-reminder-row--control,
#hqReminderPanel .soc-reminder-row--toggle + .soc-reminder-row--control,
#hqReminderPanel .soc-reminder-row--control + .soc-reminder-row--preview,
#hqReminderPanel .soc-reminder-row--preview + .soc-reminder-row,
#hqReminderPanel .soc-reminder-row--preview + .soc-reminder-advanced,
#hqReminderPanel .soc-reminder-advanced + .soc-reminder-row,
#hqReminderPanel .soc-reminder-advanced + .soc-reminder-row--preview,
#hqReminderPanel .soc-reminder-row--control::before,
#hqReminderPanel .soc-reminder-row--toggle::before,
#hqReminderPanel .soc-reminder-row--preview::before,
#hqReminderPanel .soc-reminder-form > *::before,
#hqReminderPanel .soc-reminder-form > *::after,
#hqReminderPanel .soc-reminder-row::before,
#hqReminderPanel .soc-reminder-row::after {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

#notificationSettingsPanel .soc-reminder-card-head .soc-settings-scope-label,
#notificationSettingsPanel #notificationPermissionBadge,
#notificationSettingsPanel #notificationPermissionBanner {
  display: none !important;
}

#notificationSettingsPanel .soc-reminder-card-head .chip,
#notificationSettingsPanel .soc-reminder-card-head .soc-settings-summary-chip,
#notificationSettingsPanel .soc-reminder-card-head .soc-settings-scope-label,
#notificationSettingsPanel .soc-notification-state-value,
#notificationSettingsPanel .soc-notification-state-meta,
#notificationSettingsPanel [data-notification-state],
#notificationSettingsPanel [data-notification-permission] {
  display: none !important;
}

#notificationSettingsPanel .soc-notification-settings-form {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#notificationSettingsPanel .soc-notification-state-row,
#notificationSettingsPanel .soc-notification-check-row,
#notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#notificationSettingsPanel .soc-notification-state-row {
  padding: 0 0 10px !important;
  margin: 0 !important;
}

#notificationSettingsPanel .soc-notification-check-row {
  padding: 12px 0 !important;
  margin: 0 !important;
}

#notificationSettingsPanel .soc-notification-state-row,
#notificationSettingsPanel .soc-notification-check-row,
#notificationSettingsPanel .soc-notification-check-row + .soc-notification-check-row,
#notificationSettingsPanel .soc-notification-settings-form > *::before,
#notificationSettingsPanel .soc-notification-settings-form > *::after,
#notificationSettingsPanel .soc-notification-state-row::before,
#notificationSettingsPanel .soc-notification-state-row::after,
#notificationSettingsPanel .soc-notification-check-row::before,
#notificationSettingsPanel .soc-notification-check-row::after {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* ===== Phase 3 current pass: people detail simplification + stats cleanup + header clipping fix ===== */
body.soc-desktop-shell #peopleView .soc-people-admin-header-wrap {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 4px 0 8px;
  background:
    linear-gradient(
      180deg,
      var(--ui-bg-canvas, #f6f7fb) 0%,
      color-mix(in srgb, var(--ui-bg-canvas, #f6f7fb) 92%, transparent) 78%,
      transparent 100%
    );
  backdrop-filter: blur(10px);
}

body.soc-desktop-shell #peopleView .soc-people-admin-title-row {
  align-items: flex-start !important;
}

.soc-people-detail-body-shell {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.soc-people-detail-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ui-divider-default, var(--soc-divider));
}

.soc-people-detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--soc-people-accent-surface, rgba(249, 115, 22, 0.12)) 100%, transparent);
  color: var(--soc-people-accent-strong, #c2410c);
  box-shadow: none;
}

.soc-people-detail-hero-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.soc-people-detail-hero-eyebrow {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.soc-people-detail-hero-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.soc-people-detail-hero-headline strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.soc-people-detail-hero-copy .meta,
.soc-people-detail-hero-context {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 17px;
}

.soc-people-detail-hero-context {
  color: var(--ui-text-primary, var(--soc-text));
  font-weight: 700;
}

.soc-people-detail-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.soc-people-detail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 999px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.soc-people-detail-pill.is-accent {
  border-color: rgba(249, 115, 22, 0.22);
  background: rgba(249, 115, 22, 0.10);
  color: var(--soc-people-accent-strong, #c2410c);
}

.soc-people-detail-summary-grid,
.soc-people-detail-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.soc-people-detail-summary-grid--compact {
  gap: 8px;
}

.soc-people-detail-section-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.soc-people-detail-section-head {
  display: grid;
  gap: 3px;
}

.soc-people-detail-section-eyebrow {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 10px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.soc-people-detail-section-head h4 {
  margin: 0;
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.02em;
}

.soc-people-detail-metric-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ui-border-subtle, var(--soc-border));
  border-radius: 12px;
  background: var(--ui-bg-surface-subtle, var(--soc-card-bg));
}

.soc-people-detail-metric-card.is-wide {
  grid-column: 1 / -1;
}

.soc-people-detail-metric-card.is-primary {
  border-color: rgba(249, 115, 22, 0.18);
  background: color-mix(in srgb, var(--ui-bg-surface, #fff) 90%, rgba(249, 115, 22, 0.10));
}

.soc-people-detail-metric-card.is-accent {
  border-color: rgba(249, 115, 22, 0.22);
  background: color-mix(in srgb, var(--ui-bg-surface, #fff) 88%, rgba(249, 115, 22, 0.12));
}

.soc-people-detail-metric-card span {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
}

.soc-people-detail-metric-card strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 15px;
  line-height: 21px;
  overflow-wrap: anywhere;
}

body.soc-desktop-shell #peopleView .soc-people-detail-panel-body,
#managerStatusDrawer .soc-monitoring-drawer-body {
  padding-top: 0;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(1),
body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(2),
body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(3),
body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card:nth-child(4) {
  order: initial !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-stats-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 100% !important;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 0 16px 16px !important;
}

.soc-people-stats-overview-shell,
.soc-people-stats-donut-shell,
.soc-people-stats-linkage-shell {
  display: grid;
  gap: 12px;
}

.soc-people-stats-overview-hero {
  display: grid;
  gap: 4px;
}

.soc-people-stats-overview-hero strong {
  color: var(--ui-text-primary, var(--soc-text));
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.03em;
}

.soc-people-stats-overview-hero span {
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 12px;
  line-height: 17px;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-sparkline-shell {
  padding: 0;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-sparkline {
  height: 88px;
}

body.soc-desktop-shell #peopleView #peopleHubHrPane .soc-people-chart-shell .soc-people-sparkline-caption {
  margin: 0;
  color: var(--ui-text-secondary, var(--soc-text-sub));
  font-size: 11px;
  line-height: 15px;
}

.soc-people-stats-donut-shell {
  grid-template-columns: minmax(104px, 124px) minmax(0, 1fr);
  align-items: center;
}

.soc-people-stats-linkage-shell .soc-people-segmented-track,
.soc-people-stats-linkage-shell .soc-people-segmented-grid {
  margin-top: 0;
}

@media (max-width: 900px) {
  .soc-people-detail-summary-grid,
  .soc-people-detail-metric-grid,
  .soc-people-stats-donut-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .soc-people-detail-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Phase 3 follow-up pass: single employees workspace ===== */
body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card {
  min-height: 210px !important;
}

body.soc-desktop-shell #peopleView #peopleHubEmployeesPane .soc-people-kpi-card.is-sparkline {
  border-color: rgba(249, 115, 22, 0.18) !important;
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.06) 0%, rgba(249, 115, 22, 0.01) 100%), #ffffff !important;
}

body.soc-desktop-shell #peopleView .soc-people-directory-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.soc-desktop-shell #peopleView .soc-people-detail-panel {
  display: none !important;
}

body.soc-desktop-shell #managerStatusDrawer.soc-workspace-drawer {
  width: min(520px, 100vw) !important;
}

body.soc-desktop-shell #managerStatusDrawer .soc-monitoring-drawer-body {
  padding: 18px 20px 22px !important;
  gap: 16px !important;
}

body.soc-desktop-shell #managerStatusDrawer .soc-people-detail-body-shell {
  gap: 16px !important;
}

body.soc-desktop-shell #managerStatusDrawer .soc-people-detail-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* ===== Sentrix enterprise selected-B functional icons ===== */
.sentrix-theme-icon {
  display: block;
  object-fit: contain;
}

.sentrix-theme-icon-dark {
  display: none !important;
}

html[data-theme="dark"] .sentrix-theme-icon-light,
body[data-theme="dark"] .sentrix-theme-icon-light,
[data-theme="dark"] .sentrix-theme-icon-light {
  display: none !important;
}

html[data-theme="dark"] .sentrix-theme-icon-dark,
body[data-theme="dark"] .sentrix-theme-icon-dark,
[data-theme="dark"] .sentrix-theme-icon-dark {
  display: block !important;
}

.report-choice-icon .sentrix-theme-icon,
.soc-bottom-tab-icon .sentrix-theme-icon {
  flex-shrink: 0;
}

#menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) .sentrix-theme-icon {
  width: 20px;
  height: 20px;
}

body.nav-open #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) .sentrix-theme-icon {
  width: 22px;
  height: 22px;
}

body.soc-desktop-shell #menuSheetPanel :is(.soc-menu-group-icon, .soc-menu-sub-item-icon) .sentrix-theme-icon {
  width: 20px;
  height: 20px;
}

.soc-realtime-date-icon .sentrix-theme-icon {
  width: 18px;
  height: 18px;
}

.topbar-notification-icon .sentrix-theme-icon {
  width: 28px;
  height: 28px;
}

.soc-back-arrow-btn::before {
  background: center / contain no-repeat url("/icons/sentrix-enterprise/light/ui-back-arrow.svg?v=20260416-selected-b-boardingpass-03") !important;
}

html[data-theme="dark"] .soc-back-arrow-btn::before,
body[data-theme="dark"] .soc-back-arrow-btn::before,
[data-theme="dark"] .soc-back-arrow-btn::before {
  background-image: url("/icons/sentrix-enterprise/dark/ui-back-arrow.svg?v=20260416-selected-b-boardingpass-03") !important;
}

/* ===== Workspace hidden-state final guard ===== */
html body :is(
  .admin-tab-content.hidden,
  .admin-tab-content[hidden],
  .admin-tab-content[aria-hidden="true"],
  .soc-workspace-panel.hidden,
  .soc-workspace-panel[hidden],
  .soc-workspace-panel[aria-hidden="true"]
) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===== Analytics heatmap and Live Activity final layout ===== */
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-shell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 20px 14px !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-grid-board {
  display: grid !important;
  grid-template-columns: 64px repeat(24, 46px) !important;
  grid-auto-columns: 46px !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 6px !important;
  min-width: max-content !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-axis,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-row-label {
  min-width: 0 !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  color: #697286 !important;
  font-size: 10px !important;
  line-height: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-row-label,
html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-axis:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 2 !important;
  justify-content: end !important;
  padding-right: 8px !important;
  background: var(--ui-bg-surface, #ffffff) !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsPatternPanel .soc-analytics-pattern-cell-board {
  width: 46px !important;
  min-width: 46px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  line-height: 14px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView #analyticsTrendPanel .soc-analytics-chart-shell {
  padding-bottom: 6px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-activity {
  display: grid !important;
  gap: 10px !important;
  padding: 0 20px 16px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 2px 12px !important;
  align-items: baseline !important;
  padding: 12px 14px !important;
  border: 1px solid #e6eaf1 !important;
  border-radius: 12px !important;
  background: #fbfcfe !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-head span {
  min-width: 0 !important;
  color: #202430 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 800 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-head strong {
  color: #ff6a13 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 900 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-head small {
  grid-column: 1 / -1 !important;
  color: #697286 !important;
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-bucket {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #e6eaf1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-bucket span {
  color: #697286 !important;
  font-size: 11px !important;
  line-height: 15px !important;
  font-weight: 800 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-bucket strong {
  color: #202430 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 900 !important;
}

html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-activity-empty {
  padding: 10px 12px !important;
  border: 1px dashed #dce3ec !important;
  border-radius: 12px !important;
  color: #697286 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
}

@media (max-width: 1400px) {
  html body:is(.soc-desktop-shell, .soc-desktop-adaptive) #analyticsView .soc-analytics-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===== Announcement workspace isolation guard ===== */
html body:has(#announcementPanel.is-active) #reportPanel,
html body:has(#announcementPanel[aria-hidden="false"]) #reportPanel,
html body:has(#announcementPanel:not(.hidden):not([hidden])) #reportPanel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}