/* EmpireConnections approved visual direction — September 2026.
   This is the final presentation authority for the representative workspace,
   Campaign Command Center, and Playlist Studio. It follows the two approved
   focused-workspace concepts: pale-blue canvas, white work surfaces, compact
   vertical navigation, electric-blue actions, green readiness, and restrained
   red/gold operational accents. */

body.empire-focused-advisor {
  --approved-page: #f3f6fb;
  --approved-surface: #ffffff;
  --approved-module: #f7f9fc;
  --approved-soft: #eef3fb;
  --approved-blue-soft: #eaf2ff;
  --approved-ink: #13213d;
  --approved-muted: #66738b;
  --approved-line: #d9e1ee;
  --approved-blue: #1261e8;
  --approved-blue-strong: #084ec6;
  --approved-navy: #10284a;
  --approved-green: #137b4a;
  --approved-green-soft: #e5f7ed;
  --approved-red: #bb3243;
  --approved-red-soft: #fff0f2;
  --approved-gold: #a66a00;
  --approved-shadow: 0 18px 42px rgba(18, 38, 74, .12);
  background: var(--approved-page) !important;
}

/* Page-title hierarchy: H1 is Empire navy; section-level H2 is charcoal.
   The global dark header and custom playlist banners keep their own contrast. */
:is(.content-heading h1, #workspace-title),
body #workspace > .content-heading #workspace-title {
  color: #10233d !important;
}

body :is(.panel h2, .content-heading h2, .ecs-head h2) {
  color: #343b46 !important;
}

/* The approved concept uses a light application bar, not a dark banner. */
body.empire-focused-advisor .topbar.empireos-unified-header,
body:has(#admin-panel:not([hidden])) .topbar.empireos-unified-header {
  display: grid !important;
  grid-template-columns: minmax(190px, auto) minmax(240px, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 66px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--approved-line) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 7px 24px rgba(18, 38, 74, .08) !important;
}

body.empire-focused-advisor .topbar #workspace-brand-logo,
body:has(#admin-panel:not([hidden])) .topbar #workspace-brand-logo {
  height: 38px !important;
  max-width: 235px !important;
  filter: brightness(0) saturate(100%) invert(13%) sepia(24%) saturate(1518%) hue-rotate(179deg) brightness(91%) contrast(96%);
}

body.empire-focused-advisor .topbar .top-actions,
body:has(#admin-panel:not([hidden])) .topbar .top-actions {
  gap: 8px !important;
}

body.empire-focused-advisor .topbar :is(#system-health, #customer-data-custody),
body:has(#admin-panel:not([hidden])) .topbar :is(#system-health, #customer-data-custody) {
  border-color: #b9dfcb !important;
  background: var(--approved-green-soft) !important;
  color: var(--approved-green) !important;
}

body.empire-focused-advisor .topbar :is(.text-button, .dual-view-admin),
body:has(#admin-panel:not([hidden])) .topbar :is(.text-button, .dual-view-admin) {
  border-color: var(--approved-line) !important;
  background: transparent !important;
  color: #42536d !important;
}

body.empire-focused-advisor .topbar .dual-view-admin,
body:has(#admin-panel:not([hidden])) .topbar .dual-view-admin {
  border: 1px solid #b8cff0 !important;
  border-radius: 9px !important;
  background: var(--approved-blue-soft) !important;
  color: var(--approved-blue-strong) !important;
}

.empire-focused-global-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 620px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--approved-line);
  border-radius: 10px;
  background: var(--approved-page);
  color: var(--approved-muted);
}

.empire-focused-global-search .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.empire-focused-advisor .topbar #empireos-header-refresh,
body:has(#admin-panel:not([hidden])) .topbar #empireos-header-refresh {
  border-color: #c9d9ed !important;
  background: var(--approved-blue-soft) !important;
  color: var(--approved-blue) !important;
}

body:has(#admin-panel:not([hidden])) .topbar .empireos-header-copy h1 {
  color: #10233d !important;
}

body:has(#admin-panel:not([hidden])) .topbar .empireos-header-copy p {
  color: #66758a !important;
}

/* Retire the remaining dark legacy heading surfaces in the admin workspace so
   every H2 can consistently use charcoal without losing contrast. */
body:has(#admin-panel:not([hidden])) #admin-panel :is(
  .empire-vendor-hero,
  .empire-vendor-results-head,
  .empire-phone-v4-hero,
  .empire-dialer-overview,
  .empire-calling-window
) {
  border: 1px solid #d7e0ea !important;
  border-radius: 13px !important;
  background: #f1f4f8 !important;
  box-shadow: 0 9px 24px rgba(18, 38, 74, .07) !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-vendor-results-head {
  padding: 14px 16px !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel :is(
  .empire-vendor-hero,
  .empire-vendor-results-head,
  .empire-phone-v4-hero,
  .empire-dialer-overview,
  .empire-calling-window
) h2 {
  color: #343b46 !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel :is(
  .empire-vendor-hero,
  .empire-phone-v4-hero,
  .empire-dialer-overview,
  .empire-calling-window
) p {
  color: #66758a !important;
}

.empire-focused-global-search input {
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--approved-ink) !important;
}

body.empire-focused-advisor #workspace.content {
  padding: 14px !important;
}

/* The live workspace is one app frame, matching the approved full-screen mockup. */
body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root {
  position: relative !important;
  min-height: 610px !important;
  padding: 0 0 0 78px !important;
  overflow: hidden !important;
  border: 1px solid var(--approved-line) !important;
  border-radius: 16px !important;
  background: var(--approved-page) !important;
  box-shadow: var(--approved-shadow) !important;
}

body.empire-focused-advisor #empire-focused-context {
  min-height: 74px !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--approved-line) !important;
  border-radius: 0 !important;
  background: var(--approved-surface) !important;
}

.empire-focused-person-mark {
  background: var(--approved-blue-soft) !important;
  color: var(--approved-blue) !important;
}

.empire-focused-navigation {
  position: absolute !important;
  z-index: 15 !important;
  inset: 0 auto 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 78px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 8px !important;
  border: 0 !important;
  border-right: 1px solid var(--approved-line) !important;
  border-radius: 0 !important;
  background: var(--approved-surface) !important;
  box-shadow: none !important;
}

.empire-focused-primary-nav,
.empire-focused-utility-nav {
  display: flex !important;
  width: 100% !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.empire-focused-utility-nav {
  margin-top: auto !important;
}

.empire-focused-navigation button,
.empire-focused-navigation summary {
  display: flex !important;
  width: 60px !important;
  min-height: 56px !important;
  padding: 7px 4px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--approved-muted) !important;
  line-height: 1 !important;
}

.empire-focused-navigation button > span,
.empire-focused-navigation summary > span {
  font-size: 17px;
}

.empire-focused-navigation button > small,
.empire-focused-navigation summary > small {
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.empire-focused-navigation button:hover,
.empire-focused-navigation summary:hover,
.empire-focused-navigation button.is-active,
.empire-focused-navigation button[aria-pressed="true"] {
  background: var(--approved-blue-soft) !important;
  color: var(--approved-blue) !important;
}

.empire-focused-more-menu {
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  left: calc(100% + 9px) !important;
  width: 226px !important;
  padding: 7px !important;
  border: 1px solid var(--approved-line) !important;
  background: var(--approved-surface) !important;
  box-shadow: var(--approved-shadow) !important;
}

.empire-focused-more-menu button {
  width: 100% !important;
  min-height: 40px !important;
  padding: 8px 11px !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.empire-focused-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 49px;
  padding: 0 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--approved-line);
  background: var(--approved-surface);
}

.empire-focused-tabs button {
  min-height: 49px;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--approved-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.empire-focused-tabs button:hover,
.empire-focused-tabs button.is-active,
.empire-focused-tabs button[aria-pressed="true"] {
  border-bottom-color: var(--approved-blue);
  color: var(--approved-blue);
}

body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root > :is(.empire-mode-kpis, .empire-mode-grid, .empire-mode-lower, .empire-mode-tools-lower) {
  margin: 0 !important;
  padding: 14px !important;
}

body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root > .empire-mode-grid {
  min-height: 0 !important;
  height: auto !important;
  align-content: start !important;
  background: var(--approved-page) !important;
}

body.empire-focused-advisor[data-empire-focus-view="work"][data-empire-call-phase="ready"] #empire-mode-workspace-root > .empire-mode-grid {
  grid-template-rows: minmax(280px, 1fr) auto !important;
}

body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root > .empire-mode-grid > .empire-mode-phone {
  grid-row: 2 !important;
}

.empire-focused-ready {
  min-height: 280px !important;
  padding: clamp(24px, 4vw, 46px) !important;
  border: 1px solid #cddbf0 !important;
  border-left: 5px solid var(--approved-blue) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 64%, #edf4ff 100%) !important;
  box-shadow: 0 12px 30px rgba(18, 38, 74, .08) !important;
}

.empire-focused-ready-copy h2 {
  font-size: clamp(24px, 2.4vw, 34px) !important;
  letter-spacing: -.035em !important;
}

.empire-focused-ready-actions .primary:not(:disabled) {
  background: var(--approved-blue) !important;
}

.empire-focused-ready-actions .manual {
  border-color: #b9dfcb !important;
  background: var(--approved-green-soft) !important;
  color: var(--approved-green) !important;
}

body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root :is(.panel, #call-history, #advisor-messages, #mason-ai) {
  border-color: var(--approved-line) !important;
  border-radius: 13px !important;
  background: var(--approved-module) !important;
  color: var(--approved-ink) !important;
  box-shadow: 0 10px 28px rgba(18, 38, 74, .08) !important;
}

body.empire-focused-advisor #campaign-workspace > .panel,
body.empire-focused-advisor #customer-card,
body.empire-focused-advisor #disposition-center {
  border-top: 4px solid #2d6cb5 !important;
}

body.empire-focused-advisor .script-panel .script-copy,
body.empire-focused-advisor #campaign-workspace :is(.package-content, .tenant-resource-card),
body.empire-focused-advisor #customer-card .empire-customer-field {
  border: 1px solid #d9e5f6 !important;
  background: var(--approved-blue-soft) !important;
}

/* The call controls are a compact footer, not a second full workspace. */
body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root > .empire-mode-grid > .empire-mode-phone,
body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root .empire-mode-phone > .phone-panel {
  border-color: var(--approved-line) !important;
  background: var(--approved-surface) !important;
  box-shadow: none !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel {
  display: grid !important;
  grid-template-columns: minmax(240px, .72fr) minmax(500px, 1.28fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 14px !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel > .panel-heading {
  margin: 0 !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel-heading-actions {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone #phone-campaign-command {
  flex: 1 1 auto !important;
  width: auto !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-action-stack > button {
  border-color: var(--approved-line) !important;
  background: var(--approved-page) !important;
  color: var(--approved-ink) !important;
  text-shadow: none !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-action-stack > #call-button:not(:disabled) {
  border-color: var(--approved-blue) !important;
  background: var(--approved-blue) !important;
  color: #ffffff !important;
}

body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-action-stack > #hangup-button:not(:disabled) {
  border-color: #ecc4ca !important;
  background: var(--approved-red-soft) !important;
  color: var(--approved-red) !important;
}

/* Campaign Command Center — same approved surfaces with deliberate hierarchy. */
.ecs-overlay {
  padding: 18px !important;
  background: rgba(16, 40, 74, .48) !important;
  backdrop-filter: blur(5px) !important;
}

.ecs-drawer {
  position: relative !important;
  inset: auto !important;
  width: min(1500px, 100%) !important;
  height: 100% !important;
  margin-left: auto !important;
  padding: clamp(22px, 3vw, 38px) !important;
  border: 1px solid #cdd9e8 !important;
  border-radius: 16px !important;
  background: #f3f6fb !important;
  color: #13213d !important;
  box-shadow: 0 24px 80px rgba(4, 17, 36, .28) !important;
  animation: none !important;
}

.ecs-head {
  min-height: 78px !important;
  padding: 0 0 18px 17px !important;
  border-bottom: 1px solid #d8e1ee !important;
  border-left: 5px solid #1261e8 !important;
}

.ecs-head span,
.ecs-builder > * > span,
.ecs-sources header span,
.ecs-yesterday-card > span {
  color: #2865aa !important;
}

.ecs-yesterday-card,
.ecs-spiff,
.ecs-builder > section,
.ecs-builder > aside {
  border: 1px solid #d8e1ee !important;
  border-radius: 13px !important;
  background: #f7f9fc !important;
  color: #13213d !important;
  box-shadow: 0 10px 28px rgba(18, 38, 74, .07) !important;
}

.ecs-yesterday-card {
  border-left: 5px solid #2d6cb5 !important;
}

.ecs-spiff {
  border-top: 4px solid #d5aa3d !important;
  background: linear-gradient(145deg, #ffffff 0%, #fffaf0 100%) !important;
}

.ecs-spiff header span {
  color: #946100 !important;
}

.ecs-progress em {
  background: linear-gradient(90deg, #1261e8, #4d91f2) !important;
}

.ecs-spiff .ecs-progress em {
  background: linear-gradient(90deg, #bd7d08, #efc45e) !important;
}

/* Solid performance cards, matching the confidence of the active Call Mode. */
.ecs-yesterday-card {
  border-color: #285b8c !important;
  background: #173b61 !important;
  background-image: none !important;
  box-shadow: 0 12px 28px rgba(23, 59, 97, .24) !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(1) {
  border-color: #1d7655 !important;
  background: #145a3f !important;
  background-image: none !important;
  box-shadow: 0 12px 28px rgba(20, 90, 63, .24) !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(2) {
  border-color: #4b5665 !important;
  background: #343d49 !important;
  background-image: none !important;
  box-shadow: 0 12px 28px rgba(35, 43, 54, .24) !important;
}

.ecs-yesterday-card::before,
.ecs-spiff::before {
  display: none !important;
}

.ecs-yesterday-card :is(h3, strong, small),
.ecs-spiff :is(header strong, .ecs-progress small, .ecs-progress b) {
  color: #ffffff !important;
}

.ecs-yesterday-card > span {
  color: #b9dcff !important;
}

.ecs-progress b i {
  color: rgba(255, 255, 255, .66) !important;
}

.ecs-progress > span {
  background: rgba(255, 255, 255, .20) !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(1) header span {
  color: #b9f0d5 !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(1) .ecs-progress em {
  background: #79dfac !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(2) header span {
  color: #f2d17d !important;
}

#ecs-spiffs > .ecs-spiff:nth-child(2) .ecs-progress em {
  background: #e7ba4f !important;
}

.ecs-builder > section:first-child {
  border-top: 4px solid #2d6cb5 !important;
}

.ecs-mode-buttons button {
  border-color: #cedae8 !important;
  background: #f7f9fc !important;
  color: #42536d !important;
}

.ecs-mode-buttons button.active {
  border-color: #1261e8 !important;
  background: linear-gradient(145deg, #1261e8, #0b4ea9) !important;
  color: #ffffff !important;
  box-shadow: 0 9px 20px rgba(18, 97, 232, .23) !important;
}

.ecs-mode-buttons button.active small {
  color: #dceaff !important;
}

#ecs-summary {
  border: 1px solid #153b68 !important;
  background: linear-gradient(145deg, #173f6d, #102c50) !important;
  box-shadow: 0 10px 24px rgba(16, 44, 80, .18) !important;
}

#ecs-summary :is(strong, span) {
  color: #ffffff !important;
}

#ecs-summary .ready { color: #7be1ad !important; }
#ecs-summary .blocked { color: #ffc1ca !important; }

.ecs-manual-option {
  border-color: #b6dfca !important;
  background: #e8f7ef !important;
}

.ecs-manual-option button,
.ecs-incoming button {
  border-color: #137b4a !important;
  background: #16865f !important;
  color: #ffffff !important;
}

.ecs-sources {
  border-top: 4px solid #1261e8 !important;
}

.ecs-source {
  border-color: #d5dfeb !important;
  background: #f9fbfe !important;
}

.ecs-source.selected {
  border-color: #1261e8 !important;
  background: #eaf2ff !important;
  box-shadow: inset 4px 0 0 #1261e8 !important;
}

.ecs-incoming {
  border-top: 4px solid #16865f !important;
  background: linear-gradient(145deg, #ffffff, #f0faf5) !important;
}

/* Playlist Studio carries the same clear blue/green score hierarchy. */
.campaign-health-monitor,
.live-playlist-card {
  border-color: #d2deeb !important;
  border-radius: 13px !important;
  background: #f7f9fc !important;
  box-shadow: 0 10px 28px rgba(18, 38, 74, .07) !important;
}

/* Keep the studio heading quiet; the actual collapsible playlist rows carry
   the selected banner color. */
#live-playlists > .section-title {
  align-items: center !important;
  padding: 18px 20px !important;
  border: 1px solid #d8e1eb !important;
  border-radius: 13px !important;
  background: #f7f9fc !important;
  box-shadow: 0 9px 24px rgba(18, 38, 74, .07) !important;
}

#live-playlists > .section-title .eyebrow {
  color: #245f9f !important;
}

#live-playlists > .section-title h2 {
  color: #343b46 !important;
}

#live-playlists > .section-title p {
  color: #66758a !important;
}

#live-playlists > .section-title .status {
  border-color: #c8d8e8 !important;
  background: #ffffff !important;
  color: #245f9f !important;
  box-shadow: none !important;
}

/* Lead acquisition economics is its own administrator workspace, not part of Playlist Studio. */
#admin-panel > .lead-vendors-roi-workspace {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 2px solid rgba(16, 35, 61, .14);
  scroll-margin-top: 24px;
}

#lead-vendors-roi > .empire-vendor-library {
  width: 100%;
  margin: 0;
}

/* The expanded management menu uses one solid Empire navy field so its white
   labels and electric-green icons keep consistent contrast at every height. */
.app-layout > .sidebar {
  border-right-color: #2f6da8 !important;
  background: #10233d !important;
  box-shadow: 12px 0 34px rgba(4, 18, 36, .28) !important;
  color: #ffffff !important;
}

.app-layout > .sidebar :is(.sidebar-title, .nav-section) {
  color: #cbd7e5 !important;
}

.app-layout > .sidebar .nav-item:is(:hover, :focus-visible, .active) {
  background: #1c5f9e !important;
}

/* ROI keeps its charcoal shell, while the working modules use a warm off-white
   surface so economics, forms, and scorecards remain easy to scan. */
body:has(#admin-panel:not([hidden])) #lead-vendors-roi .empire-vendor-body {
  background: #e9edf2 !important;
  color: #343b46 !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(
  .empire-vendor-hero,
  .empire-vendor-summary-grid article,
  .empire-vendor-control,
  .empire-vendor-card,
  .empire-vendor-metrics article,
  .empire-vendor-roi-card,
  .empire-vendor-table-wrap,
  .empire-vendor-empty
) {
  border-color: #d8d2c6 !important;
  background: #f7f4ed !important;
  box-shadow: 0 7px 20px rgba(18, 38, 74, .07) !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(
  .empire-vendor-hero h2,
  .empire-vendor-control h3,
  .empire-vendor-card-head h3,
  .empire-vendor-summary-grid strong,
  .empire-vendor-metrics strong,
  .empire-vendor-empty strong,
  .empire-vendor-table td strong
) {
  color: #10233d !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(
  .empire-vendor-hero p,
  .empire-vendor-status,
  .empire-vendor-card-head p,
  .empire-vendor-summary-grid small,
  .empire-vendor-metrics small,
  .empire-vendor-range span,
  .empire-vendor-table td,
  .empire-vendor-table td small,
  .empire-vendor-notes,
  .empire-vendor-empty span
) {
  color: #5f6d7d !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(
  .empire-vendor-label,
  .empire-vendor-hero span,
  .empire-vendor-control legend,
  .empire-vendor-table th,
  .empire-vendor-card-badge,
  .empire-vendor-roi-card strong
) {
  color: #167554 !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi .empire-vendor-table th {
  background: #ece8df !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi .empire-vendor-table td {
  border-bottom-color: #ddd8ce !important;
  background: #fbf9f4 !important;
}

body:has(#admin-panel:not([hidden])) #lead-vendors-roi :is(input, select, textarea) {
  border-color: #cbd3dc !important;
  background: #ffffff !important;
  color: #24364d !important;
}

/* Dispositions and their mappings are a dedicated workflow studio. */
#admin-panel > .layout-admin,
#advisor-layout-workspace > .layout-admin,
#admin-panel > #disposition-workflows {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#admin-panel > .layout-admin > :is(.eyebrow, h2, h2 + p, h3),
#advisor-layout-workspace > .layout-admin > :is(.eyebrow, h2, h2 + p, h3),
#admin-panel > .layout-admin :is(.layout-field-grid, .layout-defaults, #layout-section-list),
#advisor-layout-workspace > .layout-admin :is(.layout-field-grid, .layout-defaults, #layout-section-list) {
  display: block !important;
}

#admin-panel > .layout-admin .layout-field-grid,
#advisor-layout-workspace > .layout-admin .layout-field-grid {
  display: grid !important;
}

#admin-panel > .layout-admin > h2,
#advisor-layout-workspace > .layout-admin > h2 {
  position: static !important;
  margin: 5px 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #10233d !important;
  box-shadow: none !important;
}

.disposition-workflow-studio {
  scroll-margin-top: 24px;
  border-color: #ccd7e4 !important;
  background: #eef2f6 !important;
  color: #343b46 !important;
}

.disposition-workflow-studio > .section-title h2,
.disposition-workflow-studio h3 {
  color: #10233d !important;
}

.disposition-workflow-studio p,
.disposition-workflow-studio .workflow-form-safety {
  color: #607084 !important;
}

.disposition-workflow-map,
.disposition-form-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
  gap: 16px;
  margin-top: 20px;
}

.disposition-mapping-editor,
.disposition-workflow-guide,
.disposition-form-builder,
.disposition-form-controls,
.disposition-form-preview-shell {
  border: 1px solid #d7d2c7;
  border-radius: 14px;
  background: #f7f4ed;
  box-shadow: 0 8px 22px rgba(18, 38, 74, .07);
}

.disposition-mapping-editor,
.disposition-workflow-guide,
.disposition-form-controls,
.disposition-form-preview-shell {
  padding: 18px;
}

.workflow-step-kicker {
  display: block;
  color: #167554;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.disposition-mapping-editor #layout-disposition-list {
  display: grid !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 520px !important;
  margin-top: 15px;
  padding-right: 6px;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

.disposition-workflow-studio .disposition-editor-row {
  grid-template-columns: minmax(150px, .7fr) minmax(290px, 1.35fr) 130px auto auto auto !important;
  border-color: #d7dee7 !important;
  background: #ffffff !important;
}

.disposition-workflow-studio :is(input, select, textarea) {
  border-color: #c8d2de !important;
  background: #ffffff !important;
  color: #24364d !important;
}

.disposition-workflow-studio .layout-editor-row button,
.disposition-workflow-studio .workflow-edit-form {
  border: 1px solid #bfd0e1 !important;
  background: #eaf2fb !important;
  color: #1c5f9e !important;
}

.disposition-workflow-studio .remove-layout-item {
  border-color: #dfb7bd !important;
  background: #fff0f2 !important;
  color: #9f3445 !important;
}

.disposition-workflow-guide ol {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding-left: 22px;
  color: #34475f;
}

.disposition-workflow-guide li::marker {
  color: #167554;
  font-weight: 900;
}

.disposition-form-builder {
  margin-top: 18px;
  padding: 20px;
}

.disposition-form-builder-heading,
.workflow-form-fields-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.disposition-form-builder-heading > label {
  min-width: 260px;
  margin: 0;
  color: #42546b;
}

.workflow-form-toggle,
.workflow-field-required,
.workflow-preview-checkbox {
  display: flex !important;
  align-items: center;
  gap: 9px;
}

.disposition-form-controls > label:not(.workflow-form-toggle) {
  display: grid !important;
  gap: 7px;
  margin: 14px 0 0 !important;
  color: #42546b !important;
  font-size: 12px;
  font-weight: 750;
}

.disposition-form-controls > label:not(.workflow-form-toggle) > :is(input, textarea, select) {
  display: block;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}

.disposition-form-controls > label:not(.workflow-form-toggle) > textarea {
  min-height: 92px;
  resize: vertical;
}

.disposition-form-controls > .workflow-form-toggle {
  margin: 0 0 14px !important;
}

.workflow-form-toggle input,
.workflow-field-required input,
.workflow-preview-checkbox input {
  width: auto !important;
  margin: 0 !important;
}

.workflow-form-field-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.workflow-form-field-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 130px auto minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d7dee7;
  border-radius: 10px;
  background: #ffffff;
}

.workflow-form-field-row > :is(input, select) {
  margin: 0 !important;
}

.workflow-form-field-row > span {
  display: flex;
  gap: 5px;
}

.workflow-form-field-row button {
  padding: 8px 10px;
}

.workflow-form-empty,
.disposition-form-preview small {
  padding: 13px;
  border: 1px dashed #c6d1dd;
  border-radius: 9px;
  background: #f1f4f8;
  color: #607084 !important;
}

.disposition-form-preview {
  display: grid;
  gap: 11px;
  margin-top: 12px;
}

.disposition-form-preview h4 {
  margin: 0;
  color: #10233d;
  font-size: 20px;
}

.disposition-form-preview label,
.disposition-workflow-form-fields label {
  display: grid;
  gap: 5px;
  margin: 0;
  color: #42546b;
  font-size: 12px;
  font-weight: 750;
}

.workflow-preview-protected-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.workflow-preview-protected-fields span {
  padding: 9px;
  border: 1px solid #d6dee7;
  border-radius: 8px;
  background: #ffffff;
  color: #34475f;
  font-size: 11px;
}

.disposition-form-preview > button {
  background: #1c5f9e !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.disposition-workflow-card {
  width: min(720px, 96vw) !important;
  max-height: 92vh;
  overflow: auto;
}

.disposition-workflow-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 20px;
}

@media (max-width: 1100px) {
  .disposition-workflow-map,
  .disposition-form-builder-grid,
  .disposition-workflow-studio .disposition-editor-row,
  .workflow-form-field-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 700px) {
  .disposition-workflow-map,
  .disposition-form-builder-grid,
  .disposition-workflow-studio .disposition-editor-row,
  .workflow-form-field-row,
  .disposition-workflow-form-fields {
    grid-template-columns: 1fr !important;
  }

  .disposition-form-builder-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Release 33: DIDs & Live Calls is a standalone Telephony section instead of
   being buried in the pacing accordion. Its light overview uses dark-blue
   labels and blue results; the two inventory panels are navy with white copy. */
body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-phone-v4-hero span {
  color: #173b63 !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-phone-v4-stats strong {
  color: #61b3ff !important;
  -webkit-text-fill-color: #61b3ff !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  border: 1px solid #c8d7e7 !important;
  background: linear-gradient(145deg, #f8fafc 0%, #edf2f7 100%) !important;
  color: #10233d !important;
  box-shadow: 0 16px 36px rgba(16, 47, 82, .12) !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-overview-heading :is(span, h2),
body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel #empire-dialer-overview-status,
body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-overview-metrics small {
  color: #102f52 !important;
  -webkit-text-fill-color: #102f52 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-overview-heading p {
  color: #53657b !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel #empire-dialer-overview-status {
  padding: 7px 12px !important;
  border: 1px solid #9eb6cf !important;
  border-radius: 999px !important;
  background: #e1eaf4 !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-overview-metrics article {
  border-color: #c5d3e2 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(16, 47, 82, .07) !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-overview-metrics strong {
  color: #176fb8 !important;
  -webkit-text-fill-color: #176fb8 !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-overview-columns > section {
  border-color: #315a83 !important;
  background: linear-gradient(145deg, #183b63 0%, #102f52 52%, #091f3a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(9, 31, 58, .24) !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-list-heading :is(h3, a, span),
body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-overview-list :is(strong, small) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-overview-list article {
  border-left-color: #61b3ff !important;
  background: rgba(255, 255, 255, .1) !important;
}

body:has(#admin-panel:not([hidden])) #telephony-workspace > .empire-telephony-overview-panel .empire-dialer-overview-list article[data-tone="healthy"] {
  border-left-color: #4fd39a !important;
}

/* Labor Day, Free Bali, and every other collapsible playlist use this banner.
   The custom properties are set from the playlist's saved hex color. */
.playlist-studio-card .campaign-admin-card-heading {
  border-color: var(--playlist-banner-chrome-border, rgba(255, 255, 255, .42)) !important;
  background: linear-gradient(145deg,
    var(--playlist-banner-start, #3a89c9) 0%,
    var(--playlist-banner-color, #176fb8) 48%,
    var(--playlist-banner-end, #0d416b) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

.playlist-studio-card .campaign-admin-card-heading :is(strong, span, small, b) {
  color: var(--playlist-banner-ink, #ffffff) !important;
}

.playlist-studio-card .campaign-admin-card-heading .playlist-card-heading-copy span {
  color: var(--playlist-banner-muted, rgba(239, 247, 255, .82)) !important;
}

.playlist-studio-card .campaign-admin-card-heading::after {
  border-color: var(--playlist-banner-chrome-border, rgba(255, 255, 255, .42)) !important;
  background: var(--playlist-banner-chrome, rgba(255, 255, 255, .17)) !important;
  color: var(--playlist-banner-ink, #ffffff) !important;
}

.playlist-studio-card[open] .campaign-admin-card-heading {
  border-bottom-color: var(--playlist-banner-chrome-border, rgba(255, 255, 255, .42)) !important;
}

.playlist-banner-color-label {
  align-content: start;
}

.playlist-color-control {
  display: grid;
  grid-template-columns: 46px minmax(112px, 1fr);
  gap: 9px;
  align-items: center;
}

.playlist-studio-panel .playlist-color-control input[type="color"] {
  width: 46px !important;
  height: 42px;
  padding: 3px !important;
  overflow: hidden;
  border: 1px solid #b8c7d8 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  cursor: pointer;
}

.playlist-color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.playlist-color-control input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.playlist-color-control input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

.playlist-banner-color-label > small {
  color: #728096 !important;
  font-size: 10px;
  font-weight: 600;
}

.playlist-color-control input[type="text"]:invalid {
  border-color: #ba4f5f !important;
  box-shadow: 0 0 0 3px rgba(186, 79, 95, .12) !important;
}

.playlist-builder-step:first-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.campaign-health-monitor {
  border-top: 4px solid #1261e8 !important;
}

.live-playlist-card[open] {
  border-left: 5px solid #1261e8 !important;
}

.live-playlist-health > span,
.campaign-health-status {
  border-color: #b7dfca !important;
  background: #e8f7ef !important;
  color: #137b4a !important;
}

.live-playlist-health strong,
.campaign-health-status strong {
  color: #0f6d41 !important;
}

/* Keep status copy legible inside the navy health-score panel. */
.playlist-health-score > span {
  color: #f7faff !important;
}

.playlist-health-score > span small {
  color: #e4edf8 !important;
}

.playlist-health-score > span b {
  color: #ff9bad !important;
  font-weight: 850;
}

.playlist-health-score[data-tone="critical"] > strong {
  color: #8f2336 !important;
}

.playlist-health-score[data-tone="warning"] > span b {
  color: #ffd47d !important;
}

.playlist-health-score[data-tone="healthy"] > span b {
  color: #7de6b4 !important;
}

/* Semantic status authority: forest green means good; orange means attention. */
:root {
  --approved-success-gradient: linear-gradient(135deg, #1f684b 0%, #0d4936 55%, #073325 100%);
  --approved-attention-gradient: linear-gradient(135deg, #d96b16 0%, #b94f0d 55%, #843407 100%);
}

:is(
  .status[data-tone="online"],
  .status[data-tone="success"],
  .advisor-live-status.ready,
  .advisor-live-status.on-call,
  .to-person.available,
  .empire-phone-v4-status[data-tone="online"],
  .empire-calling-window-heading > strong[data-tone="online"],
  .empire-dialer-overview-heading > strong[data-tone="online"]
) {
  border: 1px solid #3f9a73 !important;
  border-radius: 999px !important;
  background: var(--approved-success-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(7, 51, 37, .22) !important;
}

:is(
  .status[data-tone="warning"],
  .status[data-tone="error"],
  .status[data-tone="attention"],
  .status[data-tone="offline"],
  .status[data-tone="pending"],
  .advisor-live-status.paused,
  .to-person.busy,
  .to-person.offline,
  .empire-phone-v4-status[data-tone="error"],
  .empire-calling-window-heading > strong[data-tone="error"],
  .empire-dialer-overview-heading > strong[data-tone="error"]
) {
  border: 1px solid #ed8c3f !important;
  border-radius: 999px !important;
  background: var(--approved-attention-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(132, 52, 7, .22) !important;
}

#admin-panel .empire-phone-v4 .empire-calling-window-heading > div > span,
#admin-panel .empire-phone-v4 .empire-calling-window-fields label > span {
  color: #42546b !important;
}

#admin-panel .empire-phone-v4 .empire-calling-window-fields label > small {
  color: #66758a !important;
}

#admin-panel .empire-phone-v4 .empire-calling-window-rule,
.disposition-workflow-studio .workflow-form-safety {
  border: 1px solid #ed8c3f !important;
  border-left: 5px solid #ffad61 !important;
  border-radius: 10px !important;
  background: var(--approved-attention-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(132, 52, 7, .2) !important;
}

#admin-panel .empire-phone-v4 .empire-calling-window-rule :is(b, span) {
  color: #ffffff !important;
  text-shadow: none !important;
}

.disposition-workflow-studio .workflow-form-safety {
  display: block;
  padding: 12px 14px;
  line-height: 1.5;
}

.playlist-health-score[data-tone="healthy"] > span {
  border: 1px solid #3f9a73 !important;
  background: var(--approved-success-gradient) !important;
}

.playlist-health-score:is([data-tone="warning"], [data-tone="critical"]) > span {
  border: 1px solid #ed8c3f !important;
  background: var(--approved-attention-gradient) !important;
}

.playlist-health-score:is([data-tone="warning"], [data-tone="critical"]) > span :is(small, b),
.playlist-health-score[data-tone="healthy"] > span :is(small, b) {
  color: #ffffff !important;
}

@media (max-width: 1100px) {
  body.empire-focused-advisor .topbar.empireos-unified-header {
    grid-template-columns: auto minmax(180px, 1fr) auto !important;
  }

  body.empire-focused-advisor .topbar .top-actions :is([data-travel-empire-only]:not(.dual-view-admin), #customer-data-custody) {
    display: none !important;
  }

  body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .playlist-builder-step:first-child {
    grid-template-columns: 1fr;
  }

  body.empire-focused-advisor .topbar.empireos-unified-header {
    grid-template-columns: minmax(150px, 1fr) auto !important;
  }

  .empire-focused-global-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  body.empire-focused-advisor #advisor-panel#advisor-panel #empire-mode-workspace-root {
    min-height: 0 !important;
    padding-left: 0 !important;
  }

  .empire-focused-navigation {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: 7px !important;
    flex-direction: row !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--approved-line) !important;
  }

  .empire-focused-primary-nav,
  .empire-focused-utility-nav {
    width: auto !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
  }

  .empire-focused-utility-nav { margin-top: 0 !important; }

  .empire-focused-navigation button,
  .empire-focused-navigation summary {
    width: auto !important;
    min-width: 52px !important;
    min-height: 48px !important;
    flex: 1 1 auto !important;
  }

  .empire-focused-more-menu {
    inset: calc(100% + 7px) 0 auto auto !important;
  }

  .empire-focused-context {
    border-top: 0 !important;
  }

  body.empire-focused-advisor #empire-mode-workspace-root .empire-mode-phone .phone-panel {
    grid-template-columns: 1fr !important;
  }

  .ecs-overlay { padding: 0 !important; }
  .ecs-drawer { border-radius: 0 !important; }
}

@media (max-width: 560px) {
  body.empire-focused-advisor .topbar.empireos-unified-header {
    padding: 8px 10px !important;
  }

  body.empire-focused-advisor .topbar .top-actions .text-button:not(.dual-view-admin),
  body.empire-focused-advisor .topbar #system-health {
    display: none !important;
  }

  .empire-focused-tabs { gap: 16px; padding: 0 13px; }
  .empire-focused-ready { border-left-width: 1px !important; border-top: 5px solid var(--approved-blue) !important; }

  .ecs-head {
    padding-left: 12px !important;
  }
}

/* Release 43: Remove the final pale title strip from Campaigns & Playlists.
   The page title now uses the same approved green, gold, and white hierarchy. */
body[data-admin-workspace="campaigns-playlists"]:has(#admin-panel:not([hidden]))
  #workspace
  > .content-heading {
  margin: 0 0 28px !important;
  padding: 24px 30px !important;
  border: 1px solid #2f7259 !important;
  border-left: 8px solid #f0b849 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #194f3d 0%, #103d31 52%, #082a22 100%) !important;
  box-shadow: 0 16px 34px rgba(8, 42, 34, .24) !important;
}

body[data-admin-workspace="campaigns-playlists"]:has(#admin-panel:not([hidden]))
  #workspace
  > .content-heading
  #workspace-eyebrow {
  color: #f0c45c !important;
  -webkit-text-fill-color: #f0c45c !important;
}

body[data-admin-workspace="campaigns-playlists"]:has(#admin-panel:not([hidden]))
  #workspace
  > .content-heading
  :is(#workspace-title, #workspace-description) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Release 44: Stop-after-next-call is a clear action button, not a checkbox. */
body.empire-focused-advisor #empire-focused-last-call.empire-focused-last-call {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid #d99532 !important;
  border-radius: 9px !important;
  background: #fff3df !important;
  color: #7d4300 !important;
  -webkit-text-fill-color: #7d4300 !important;
  font-weight: 850 !important;
}

body.empire-focused-advisor #empire-focused-last-call.empire-focused-last-call[aria-pressed="true"] {
  border-color: #ad4d0a !important;
  background: linear-gradient(135deg, #d97616 0%, #a94408 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Release 45: The advisor's campaign chooser is a prominent green action. */
body.empire-focused-advisor
  #empire-focused-campaign-button.empire-focused-campaign-button,
body.empire-focused-advisor
  #empire-focused-campaign-button.secondary {
  border: 1px solid #3b785f !important;
  background: linear-gradient(135deg, #194f3d 0%, #103d31 52%, #082a22 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(8, 42, 34, .22) !important;
  opacity: 1 !important;
}

/* Release 46: Native Workspace Layout select menus open on a light surface,
   so every option needs explicit dark ink instead of inheriting white text. */
body:has(#admin-panel:not([hidden]))
  #advisor-layout-workspace
  > .layout-admin
  .layout-field-grid
  select {
  color-scheme: light !important;
}

body:has(#admin-panel:not([hidden]))
  #advisor-layout-workspace
  > .layout-admin
  .layout-field-grid
  select
  option {
  background: #ffffff !important;
  color: #10233d !important;
  -webkit-text-fill-color: #10233d !important;
}

/* Release 47: Keep the disposition save state in the action row with
   deliberate breathing room instead of crowding the Add button below it. */
body:has(#admin-panel:not([hidden]))
  #advisor-layout-workspace
  .disposition-mapping-editor
  > .layout-actions {
  align-items: stretch !important;
  flex-wrap: wrap !important;
  gap: 14px 16px !important;
  margin-top: 20px !important;
}

body:has(#admin-panel:not([hidden]))
  #advisor-layout-workspace
  #layout-save-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 170px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 8px 22px !important;
  border-radius: 999px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

/* Release 48: The page-level Campaigns & Playlists hero is the single title
   banner. Remove its duplicate interior banner and give health status copy
   comfortable inset spacing beside the score ring. */
body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  > .admin-workspace-heading {
  display: none !important;
}

body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  .playlist-health-score
  > span,
body:has(#admin-panel:not([hidden]))
  #live-playlists
  .playlist-health-score
  > span {
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  min-height: 58px !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* Release 38: Numeric health scores must remain visible inside white rings,
   even when a custom playlist banner makes the surrounding copy white. The
   playlist header and Telephony load status also use compact, intentional
   spacing instead of stretched or edge-touching layouts. */
body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  .playlist-studio-card
  > .campaign-admin-card-heading {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(190px, auto) auto !important;
  align-items: center !important;
  align-content: center !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
}

body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  .playlist-studio-card
  > .campaign-admin-card-heading
  .playlist-card-heading-copy {
  min-width: 0 !important;
  margin: 0 !important;
}

body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  .playlist-studio-card
  > .campaign-admin-card-heading
  .playlist-health-score {
  justify-self: end !important;
  width: auto !important;
  min-width: 190px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  .playlist-health-score
  > strong,
body:has(#admin-panel:not([hidden]))
  #live-playlists
  .playlist-health-score
  > strong {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #a45b08 !important;
  -webkit-text-fill-color: #a45b08 !important;
  font-weight: 900 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  .playlist-health-score[data-tone="healthy"]
  > strong,
body:has(#admin-panel:not([hidden]))
  #live-playlists
  .playlist-health-score[data-tone="healthy"]
  > strong {
  color: #0f6d41 !important;
  -webkit-text-fill-color: #0f6d41 !important;
}

body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  .playlist-health-score[data-tone="critical"]
  > strong,
body:has(#admin-panel:not([hidden]))
  #live-playlists
  .playlist-health-score[data-tone="critical"]
  > strong {
  color: #8f2336 !important;
  -webkit-text-fill-color: #8f2336 !important;
}

body:has(#admin-panel:not([hidden]))
  #telephony-workspace
  .empire-phone-v4-hero
  .empire-phone-v4-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 15px !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
}

@media (max-width: 720px) {
  body:has(#admin-panel:not([hidden]))
    #campaigns-playlists-workspace
    .playlist-studio-card
    > .campaign-admin-card-heading {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 14px !important;
  }

  body:has(#admin-panel:not([hidden]))
    #campaigns-playlists-workspace
    .playlist-studio-card
    > .campaign-admin-card-heading
    .playlist-health-score {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    min-width: 0 !important;
  }

  body:has(#admin-panel:not([hidden]))
    #telephony-workspace
    .empire-phone-v4-hero
    .empire-phone-v4-status {
    align-self: flex-start !important;
  }
}

/* Release 39: Power Goal's light checkbox and input surfaces use Empire navy
   ink. This keeps instructional copy and placeholders readable without
   changing the white labels that sit directly on the navy fieldset. */
body:has(#admin-panel:not([hidden]))
  #telephony-workspace
  #admin-dialer-control
  .admin-power-goal-settings
  .admin-policy-check {
  border-color: #b9cadc !important;
  background: #f7f9fc !important;
}

body:has(#admin-panel:not([hidden]))
  #telephony-workspace
  #admin-dialer-control
  .admin-power-goal-settings
  .admin-policy-check
  > span {
  color: #102f52 !important;
  -webkit-text-fill-color: #102f52 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body:has(#admin-panel:not([hidden]))
  #telephony-workspace
  #admin-dialer-control
  .admin-power-goal-settings
  :is(input, textarea)::placeholder {
  color: #29496d !important;
  -webkit-text-fill-color: #29496d !important;
  opacity: 1 !important;
}

body:has(#admin-panel:not([hidden]))
  #telephony-workspace
  #admin-dialer-control
  .admin-power-goal-settings
  input:not([type="checkbox"]) {
  color: #102f52 !important;
  -webkit-text-fill-color: #102f52 !important;
}

/* Release 36: Priority is never an unexplained number. */
body:has(#admin-panel:not([hidden])) #admin-panel .priority-scale-help {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 5px 0 9px !important;
  padding: 5px 9px !important;
  border: 1px solid #9ebce0 !important;
  border-radius: 999px !important;
  background: #eaf2ff !important;
  color: #173b63 !important;
  -webkit-text-fill-color: #173b63 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Release 37: The Campaigns & Playlists interior banner uses the approved
   dark forest-green treatment with high-contrast white copy. */
body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  > .admin-workspace-heading {
  border-color: #2f7259 !important;
  border-left-color: #f0b849 !important;
  background: linear-gradient(135deg, #194f3d 0%, #103d31 52%, #082a22 100%) !important;
  box-shadow: 0 16px 34px rgba(8, 42, 34, .24) !important;
}

body:has(#admin-panel:not([hidden]))
  #campaigns-playlists-workspace
  > .admin-workspace-heading
  :is(.eyebrow, h2, p) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Release 19: Admin is a set of focused workspaces, not one merged page. */
body:has(#admin-panel:not([hidden])) #admin-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

#admin-panel > .admin-workspace {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#admin-panel > .admin-workspace[hidden] {
  display: none !important;
}

.admin-workspace > .admin-workspace-heading {
  grid-column: 1 / -1 !important;
  padding: 26px 30px !important;
  border: 1px solid #cad6e4 !important;
  border-left: 8px solid #176fb8 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #e9eef4 100%) !important;
  box-shadow: 0 12px 30px rgba(16, 35, 61, .09) !important;
}

.admin-workspace > .admin-workspace-heading .eyebrow {
  color: #176fb8 !important;
}

.admin-workspace > .admin-workspace-heading h2 {
  margin: 6px 0 5px !important;
  color: #10233d !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.08 !important;
}

.admin-workspace > .admin-workspace-heading p {
  max-width: 850px !important;
  margin: 0 !important;
  color: #56677b !important;
}

#campaigns-playlists-workspace > :is(.panel, #lead-command-center),
#telephony-workspace > :is(.empire-phone-v4, #trial-readiness-card, #advisor-wait-reporting),
#advisor-layout-workspace > :is(.layout-admin, #disposition-workflows),
#team-access-workspace > :is(#tenant-resource-admin, #sentinel-security-panel) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

#lead-vendors-roi.admin-workspace {
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
}

#lead-vendors-roi.admin-workspace > .empire-vendor-library {
  grid-column: 1 / -1 !important;
}

#telephony-workspace > .empire-phone-v4 {
  margin: 0 !important;
}

#campaigns-playlists-workspace > .campaign-control-center,
#campaigns-playlists-workspace > #live-playlists,
#campaigns-playlists-workspace > #lead-command-center,
#advisor-layout-workspace > :is(.layout-admin, #disposition-workflows) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.sidebar [data-admin-workspace-link].active {
  background: linear-gradient(135deg, #2479c9 0%, #175b98 100%) !important;
  color: #ffffff !important;
  box-shadow: inset 4px 0 0 #f0b849, 0 8px 18px rgba(0, 0, 0, .18) !important;
}

@media (max-width: 900px) {
  #admin-panel > .admin-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Release 20: Telephony overview uses the Empire navy field requested for
   contrast. Gray inventory cards now belong to that field, and eyebrow copy
   uses gold instead of disappearing as white text on a pale surface. */
body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 :is(
  .empire-phone-v4-hero,
  .empire-dialer-overview
) {
  border-color: #315a83 !important;
  background: linear-gradient(145deg, #183b63 0%, #102f52 48%, #091f3a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(5, 23, 43, .28) !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 :is(
  .empire-phone-v4-hero span,
  .empire-dialer-overview-heading span,
  .empire-dialer-list-heading a,
  .empire-dialer-list-heading > span
) {
  color: #f0c45c !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 :is(
  .empire-phone-v4-hero h2,
  .empire-dialer-overview-heading h2,
  .empire-dialer-list-heading h3
) {
  color: #ffffff !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 :is(
  .empire-phone-v4-hero p,
  .empire-dialer-overview-heading p
) {
  color: #c7d5e6 !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-metrics article {
  border-color: #657384 !important;
  background: linear-gradient(145deg, #586473 0%, #46515f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-metrics small {
  color: #e2e9f1 !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-columns > section {
  border-color: #7a8491 !important;
  background: linear-gradient(145deg, #69737f 0%, #555f6c 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-list article {
  border-left-color: #7fb6ee !important;
  background: rgba(27, 43, 61, .28) !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-list article[data-tone="healthy"] {
  border-left-color: #39e58c !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-list :is(strong, small) {
  color: #ffffff !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-list small {
  color: #d2dce8 !important;
}

/* Release 21: Light dialer-control surfaces always use dark operational copy. */
body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 :is(
  .empire-calling-window-heading > div > span,
  #admin-dialer-control .eyebrow,
  #admin-dialer-control .admin-dialer-control-grid label > span,
  #admin-dialer-control .admin-policy-check span,
  #admin-dialer-control fieldset legend,
  #incoming-call-assignments .eyebrow
) {
  color: #31465f !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 #admin-dialer-control :is(h2, h3, strong) {
  color: #10233d !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 #admin-dialer-control :is(p, small) {
  color: #5c6d81 !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-calling-window-rule {
  border-color: #d57b25 !important;
  border-left-color: #b65712 !important;
  background: linear-gradient(135deg, #ffe8cb 0%, #f7c98f 56%, #edaa60 100%) !important;
  color: #51280a !important;
  box-shadow: 0 10px 24px rgba(132, 52, 7, .14) !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-calling-window-rule :is(b, span) {
  color: #51280a !important;
  text-shadow: none !important;
}

/* Release 22: DID and live-line records use dark ink on their gray cards. */
body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-list article {
  background: rgba(255, 255, 255, .28) !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-list strong {
  color: #10233d !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-dialer-overview-list small {
  color: #2f435b !important;
  text-shadow: none !important;
}

/* Release 23: Every Destination Calling Hours instruction is dark on white. */
body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-calling-window {
  color: #10233d !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-calling-window-heading h2 {
  color: #10233d !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-calling-window-heading p {
  color: #53657b !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-calling-window :is(
  .empire-calling-window-heading > div > span,
  .empire-calling-window-fields label > span
) {
  color: #31465f !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-calling-window-fields label > small {
  color: #53657b !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 .empire-calling-window-fields input {
  border-color: #b8c6d6 !important;
  background: #ffffff !important;
  color: #10233d !important;
  color-scheme: light !important;
}

/* Release 24: Active destination-time status uses dark copy on light green. */
body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 #empire-calling-window-status[data-tone="online"] {
  border-color: #74b596 !important;
  background: linear-gradient(135deg, #e8f6ee 0%, #cdebdc 100%) !important;
  color: #14563c !important;
  text-shadow: none !important;
  box-shadow: 0 7px 18px rgba(20, 86, 60, .12) !important;
}

/* Release 25: Power Goal is a deliberate dark control block, not a pale
   placeholder. Its live placeholder/status remains clearly readable. */
body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 #admin-dialer-control .admin-power-goal-settings {
  border-color: #315a83 !important;
  background: linear-gradient(145deg, #183b63 0%, #102f52 52%, #091f3a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(5, 23, 43, .22) !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 #admin-dialer-control .admin-power-goal-settings legend {
  color: #f0c45c !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 #admin-dialer-control .admin-power-goal-settings :is(
  label,
  label > span
) {
  color: #edf4fb !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 #admin-dialer-control #admin-power-goal-status {
  border-color: #8eacc9 !important;
  background: #e8eef5 !important;
  color: #10233d !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Release 26: Incoming-call administration uses dark ink on its light card. */
body:has(#admin-panel:not([hidden])) #admin-panel .empire-phone-v4 #incoming-call-assignments .eyebrow {
  color: #10233d !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Release 27: Workspace Layout uses compact columns, generous field spacing,
   and high-contrast blue controls instead of full-width dark strips. */
body:has(#admin-panel:not([hidden])) #advisor-layout-workspace > .layout-admin .layout-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

body:has(#admin-panel:not([hidden])) #advisor-layout-workspace > .layout-admin .layout-field-grid select {
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 10px 38px 10px 14px !important;
  border-color: #3278b7 !important;
  background: linear-gradient(145deg, #245f9f 0%, #174e84 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(23, 78, 132, .16) !important;
  color-scheme: dark !important;
}

body:has(#admin-panel:not([hidden])) #advisor-layout-workspace > .layout-admin #layout-section-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

body:has(#admin-panel:not([hidden])) #advisor-layout-workspace > .layout-admin #layout-section-list .layout-editor-row {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
  border-color: #3278b7 !important;
  background: linear-gradient(145deg, #245f9f 0%, #174e84 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(23, 78, 132, .16) !important;
}

body:has(#admin-panel:not([hidden])) #advisor-layout-workspace > .layout-admin #layout-section-list .layout-editor-row strong {
  color: #ffffff !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #advisor-layout-workspace > .layout-admin #layout-section-list .layout-editor-row button {
  border-color: rgba(255, 255, 255, .55) !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
}

@media (max-width: 820px) {
  body:has(#admin-panel:not([hidden])) #advisor-layout-workspace > .layout-admin .layout-field-grid,
  body:has(#admin-panel:not([hidden])) #advisor-layout-workspace > .layout-admin #layout-section-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Release 28: Advisor layout is its own focused administrator workspace. */
#advisor-layout-workspace > .layout-admin {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Release 29: The Workspace Layout save state is a slim, centered pill. */
body:has(#admin-panel:not([hidden])) #advisor-layout-workspace #workspace-layout-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(280px, 100%) !important;
  min-width: 220px !important;
  min-height: 28px !important;
  padding: 3px 24px !important;
  border-radius: 999px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

/* Release 30: Workspace Layout and Disposition Workflow Studio share one
   focused administrator workspace. The ADMIN CONTROL state stays on one
   horizontal line inside a long, slim, centered pill. */
#advisor-layout-workspace > #disposition-workflows {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 !important;
}

body:has(#admin-panel:not([hidden])) #advisor-layout-workspace .admin-control-status {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 260px !important;
  min-width: 260px !important;
  min-height: 30px !important;
  padding: 4px 28px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  line-height: 1 !important;
  text-align: center !important;
}

@media (max-width: 720px) {
  body:has(#admin-panel:not([hidden])) #advisor-layout-workspace #disposition-workflows > .section-title {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body:has(#admin-panel:not([hidden])) #advisor-layout-workspace .admin-control-status {
    align-self: center !important;
    width: min(260px, 100%) !important;
    min-width: 0 !important;
  }
}

/* Release 31: Each outcome/action section in Disposition Workflow Studio
   uses a solid Empire navy card behind its light, high-contrast controls. */
body:has(#admin-panel:not([hidden])) #advisor-layout-workspace #layout-disposition-list .disposition-editor-row {
  border-color: #2f6fa8 !important;
  background: #102f52 !important;
  box-shadow: 0 9px 20px rgba(9, 31, 58, .2) !important;
}

/* Release 32: Health rings always show their numeric score. Scores above 70
   are green, scores below 65 are deep red, and 65–70 remains orange. The
   playlist card also keeps Eligible Leads and Total Leads inside the box. */
body:has(#admin-panel:not([hidden])) #live-playlists .playlist-health-score > strong {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #a45b08 !important;
  -webkit-text-fill-color: #a45b08 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
}

body:has(#admin-panel:not([hidden])) #live-playlists .playlist-health-score[data-tone="healthy"] > strong {
  color: #0f6d41 !important;
  -webkit-text-fill-color: #0f6d41 !important;
}

body:has(#admin-panel:not([hidden])) #live-playlists .playlist-health-score[data-tone="critical"] > strong {
  color: #8f2336 !important;
  -webkit-text-fill-color: #8f2336 !important;
}

body:has(#admin-panel:not([hidden])) #live-playlists .live-playlist-health {
  grid-template-columns: minmax(180px, 1.35fr) repeat(2, minmax(110px, .75fr)) !important;
  align-items: stretch !important;
}

body:has(#admin-panel:not([hidden])) #live-playlists .live-playlist-health > * {
  min-width: 0 !important;
}

body:has(#admin-panel:not([hidden])) #live-playlists .live-playlist-health > span :is(small, strong) {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
}

@media (max-width: 700px) {
  body:has(#admin-panel:not([hidden])) #live-playlists .live-playlist-health {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:has(#admin-panel:not([hidden])) #live-playlists .live-playlist-health > .playlist-health-score {
    grid-column: 1 / -1 !important;
  }
}

/* Release 35: Every EmpireConnections page uses one unmistakable Empire
   banner: navy gradient, yellow eyebrow, white H1, and white supporting copy. */
body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 108px !important;
  padding: 18px 28px !important;
  border-bottom: 1px solid #315a83 !important;
  background: linear-gradient(135deg, #183b63 0%, #102f52 52%, #071f3a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(5, 23, 43, .3) !important;
}

body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .empireos-header-copy {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 4px !important;
}

body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .empireos-header-copy > span {
  color: #f0c45c !important;
  -webkit-text-fill-color: #f0c45c !important;
  text-shadow: none !important;
}

body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .empireos-header-copy h1,
body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .empireos-header-copy p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .empireos-header-copy h1 {
  font-weight: 650 !important;
}

body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header :is(.empireos-header-mark, #workspace-brand) {
  display: none !important;
}

body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  margin-left: 0 !important;
}

body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header :is(.text-button, .dual-view-admin, #empireos-header-refresh) {
  border-color: rgba(255, 255, 255, .45) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 760px) {
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 96px !important;
    padding: 13px 14px !important;
  }

  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .empireos-header-copy h1 {
    font-size: 21px !important;
  }

  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .empireos-header-copy p {
    display: block !important;
    max-width: 500px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 560px) {
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .top-actions > :not(#empireos-header-refresh):not(.account),
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden]))) .topbar.empireos-unified-header .account > :not(.dual-view-admin):not(#logout-button) {
    display: none !important;
  }
}

/* Release 40: Keep the complete Power Goal section title inside its module.
   Native fieldset legends otherwise straddle the border and can be clipped. */
body:has(#admin-panel:not([hidden]))
  #telephony-workspace
  #admin-dialer-control
  .admin-power-goal-settings {
  position: relative !important;
  overflow: visible !important;
  padding: 34px 14px 14px !important;
  box-sizing: border-box !important;
}

body:has(#admin-panel:not([hidden]))
  #telephony-workspace
  #admin-dialer-control
  .admin-power-goal-settings
  > legend {
  position: absolute !important;
  top: 11px !important;
  left: 14px !important;
  display: block !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #f0c45c !important;
  -webkit-text-fill-color: #f0c45c !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: .1em !important;
  white-space: normal !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Release 41: Campaigns & Playlists carries the approved Empire-green
   gradient through the main page banner as well as its interior heading. */
body[data-admin-workspace="campaigns-playlists"]:has(#admin-panel:not([hidden]))
  .topbar.empireos-unified-header {
  border-bottom-color: #3b785f !important;
  background: linear-gradient(135deg, #194f3d 0%, #103d31 52%, #082a22 100%) !important;
  box-shadow: 0 12px 30px rgba(8, 42, 34, .32) !important;
}

/* Release 41: Provider list inventory belongs with Lead Vendors & ROI.
   Its titles stay white against the dark navy list cards. */
body:has(#admin-panel:not([hidden]))
  #lead-vendors-roi
  > .lead-list-library-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

body:has(#admin-panel:not([hidden]))
  #lead-vendors-roi
  .lead-list-card
  > div:first-child
  > strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Release 42: Workspace field controls need visible breathing room whether
   they render as three columns or collapse into a single column. */
body:has(#admin-panel:not([hidden]))
  #advisor-layout-workspace
  > .layout-admin
  .layout-field-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
  padding: 2px 0 !important;
}

body:has(#admin-panel:not([hidden]))
  #advisor-layout-workspace
  > .layout-admin
  .layout-field-grid
  select {
  margin: 0 !important;
}

@media (max-width: 820px) {
  body:has(#admin-panel:not([hidden]))
    #advisor-layout-workspace
    > .layout-admin
    .layout-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body:has(#admin-panel:not([hidden]))
    #advisor-layout-workspace
    > .layout-admin
    .layout-field-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Release 49: Keep the shared header usable in split-screen and compact
   windows. Text actions stay visually clean, long labels swap to compact
   product IDs, Power Goal drops out, and Sentinel moves to the page footer. */
.header-action-label-compact {
  display: none;
}

body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
  .topbar.empireos-unified-header
  .account
  .text-button {
  min-width: 0 !important;
  padding: 6px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
  .topbar.empireos-unified-header
  .account
  .text-button:is(:hover, :focus-visible) {
  color: #f0c45c !important;
  -webkit-text-fill-color: #f0c45c !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

.empireos-status-footer {
  display: none !important;
}

@media (max-width: 1180px) {
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    #power-goal-live,
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    #system-health {
    display: none !important;
  }

  .header-action-label-full {
    display: none !important;
  }

  .header-action-label-compact {
    display: inline !important;
  }

  body:has(#app-view:not([hidden])) .empireos-status-footer {
    display: flex !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-top: 1px solid #315a83 !important;
    background: linear-gradient(135deg, #183b63 0%, #102f52 52%, #071f3a 100%) !important;
  }

  .empireos-status-footer .system-ready {
    display: inline-flex !important;
    color: #ffffff !important;
  }
}

@media (max-width: 900px) {
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    .empireos-header-copy
    p {
    display: none !important;
  }

  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    .top-actions,
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    .account {
    gap: 9px !important;
  }
}

@media (max-width: 700px) {
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header {
    min-height: 76px !important;
    padding: 10px 12px !important;
  }

  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    .empireos-header-copy
    > span,
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    #empireos-header-refresh,
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    .new-sale-link {
    display: none !important;
  }

  body.empire-focused-advisor
    .topbar.empireos-unified-header
    .account
    > a[data-feature="platform.insights"]:not([hidden]) {
    display: inline-flex !important;
  }
}

@media (max-width: 460px) {
  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    .empireos-header-copy {
    display: none !important;
  }

  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:is(.empire-focused-advisor, :has(#admin-panel:not([hidden])))
    .topbar.empireos-unified-header
    .top-actions {
    justify-content: center !important;
  }
}