/* DOMINO 360 official Cappuccino Ink theme.
 * The palette is intentionally contrast-led: dark ink text never sits on the
 * dark shell, and cream text is reserved for navy surfaces.
 */

html body[data-portal-preset="cappuccino"] {
  --portal-accent: #17324D;
  --portal-action-text: #FFFFFF;
  --portal-accent-hover: #203F5D;
  --portal-accent-active: #10263B;
}

html body[data-portal-surface="cappuccino"] {
  --portal-bg: #E8D7C3;
  --portal-bg-alt: #DDC9AE;
  --portal-text: #171426;
  --portal-muted: #5A4C40;
  --portal-color-scheme: light;
  --w3-canvas: #E8D7C3;
  --w3-card: #FAF6EF;
  --w3-card-alt: #E9DBC7;
  --w3-border: #C9B79E;
  --w3-heading: #171426;
  --w3-copy: #5A4C40;
  --premium-row: #F5EEE4;
  --premium-row-alt: #E9DBC7;
}

/* Platform owner and company-account hub — unified DOMINO 360 cappuccino shell. */
html body.platform-mode .company-hub-shell {
  min-height: 100svh;
  padding: clamp(18px, 4vw, 54px);
  place-items: center;
  background:
    radial-gradient(circle at 9% 14%, rgba(23, 50, 77, .12), transparent 28rem),
    radial-gradient(circle at 88% 82%, rgba(114, 78, 55, .13), transparent 30rem),
    #E8D7C3 !important;
}

html body.platform-mode .company-hub-panel {
  position: relative;
  isolation: isolate;
  width: min(1180px, 100%);
  margin: 0;
  padding: clamp(22px, 3.2vw, 44px);
  overflow: hidden;
  color: #171426;
  border: 1px solid #C9B79E;
  border-radius: 28px;
  background: rgba(250, 246, 239, .96);
  box-shadow: 0 30px 90px rgba(56, 39, 31, .18), 0 5px 16px rgba(56, 39, 31, .08);
}

html body.platform-mode .company-hub-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: -70px;
  bottom: -38px;
  width: clamp(320px, 42vw, 600px);
  aspect-ratio: 1983 / 793;
  pointer-events: none;
  background: url("assets/domino360-logo-transparent.png") center / contain no-repeat;
  opacity: .035;
}

html body.platform-mode .company-hub-brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: clamp(-44px, -3.2vw, -22px) clamp(-44px, -3.2vw, -22px) 30px;
  padding: 18px clamp(22px, 3.2vw, 44px);
  color: #F4F1EA;
  border-bottom: 1px solid #2B3150;
  background: #080824;
}

html body.platform-mode .company-hub-brandbar img {
  display: block;
  width: clamp(190px, 22vw, 278px);
  height: auto;
  object-fit: contain;
}

html body.platform-mode .company-hub-brandbar > div {
  display: grid;
  gap: 4px;
  text-align: end;
}

html body.platform-mode .company-hub-brandbar strong { color: #FFFFFF; font-size: 1rem; }
html body.platform-mode .company-hub-brandbar span { color: #C5C4D2; font-size: .84rem; }

html body.platform-mode .company-hub-heading {
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid #D8C7B0;
}

html body.platform-mode .company-hub-heading .eyebrow {
  margin: 0 0 6px;
  color: #806452;
  font-size: .76rem;
  letter-spacing: .02em;
}

html body.platform-mode .company-hub-heading h1 {
  margin: 0 0 8px;
  color: #171426;
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  line-height: 1.2;
}

html body.platform-mode .company-hub-heading .muted { color: #5A4C40; }

html body.platform-mode #company-hub-logout {
  min-height: 46px;
  padding-inline: 20px;
  color: #FFFFFF !important;
  border-color: #17324D !important;
  background: #17324D !important;
  box-shadow: 0 10px 24px rgba(23, 50, 77, .16);
}

html body.platform-mode #company-hub-logout:hover,
html body.platform-mode #company-hub-logout:focus-visible { background: #203F5D !important; }

html body.platform-mode .company-hub-grid {
  grid-template-columns: 1fr;
  gap: 18px;
}

html body.platform-mode .company-hub-grid > section {
  position: relative;
  z-index: 1;
  padding: clamp(18px, 2.4vw, 28px);
  border-color: #C9B79E;
  border-radius: 20px;
  background: #F6EEE3;
  box-shadow: inset 0 1px rgba(255, 255, 255, .76);
}

html body.platform-mode .company-hub-grid .surface-title {
  padding-bottom: 16px;
  border-bottom: 1px solid #D8C7B0;
}

html body.platform-mode .company-hub-grid .surface-title h2 { color: #171426; font-size: 1.25rem; }
html body.platform-mode .company-hub-grid .surface-title p { color: #5A4C40; }

html body.platform-mode .company-account-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

html body.platform-mode .company-account-card {
  min-width: 0;
  padding: 18px;
  border-color: #C9B79E;
  border-radius: 16px;
  background: #FAF6EF;
  box-shadow: 0 12px 34px rgba(56, 39, 31, .08);
}

html body.platform-mode .company-account-card h3 { color: #171426; }
html body.platform-mode .company-account-card p { color: #5A4C40; }
html body.platform-mode .company-account-facts span { color: #17324D; background: #E3EAF0; }
html body.platform-mode .company-account-card .button.primary { color: #FFFFFF; background: #17324D; }

html body.platform-mode .company-account-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 30px;
  color: #5A4C40;
  border-color: #B9A68C;
  background: rgba(250, 246, 239, .72);
}

@media (max-width: 760px) {
  html body.platform-mode .company-hub-shell { padding: 12px; align-items: start; }
  html body.platform-mode .company-hub-panel { padding: 18px; border-radius: 20px; }
  html body.platform-mode .company-hub-brandbar {
    align-items: flex-start;
    flex-direction: column;
    margin: -18px -18px 22px;
    padding: 17px 18px;
  }
  html body.platform-mode .company-hub-brandbar img { width: min(230px, 74vw); }
  html body.platform-mode .company-hub-brandbar > div { text-align: start; }
  html body.platform-mode .company-account-list { grid-template-columns: 1fr; }
  html body.platform-mode .company-hub-panel::after { inset-inline-start: -120px; width: 420px; opacity: .025; }
}

/* Official one-click choices: paired swatches make the complete identity clear. */
html body[data-dashboard-theme] .dashboard-official-axis {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--portal-accent) 38%, var(--w3-border)) !important;
  background: color-mix(in srgb, var(--w3-card) 92%, var(--portal-accent)) !important;
}

html body[data-dashboard-theme] .dashboard-preset-picker .dashboard-theme-swatch {
  display: flex !important;
  width: 38px !important;
  height: 28px !important;
  border-radius: 8px !important;
}

html body[data-dashboard-theme] .dashboard-preset-picker .dashboard-theme-swatch i {
  display: block !important;
  flex: 1 1 50% !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
}

/* Cappuccino Field shell: calm navy framing with a light operational canvas. */
html body[data-portal-preset="cappuccino"] #portal-view > .sidebar,
html body[data-portal-preset="cappuccino"] #portal-view > .sidebar .sidebar-foot,
html body[data-portal-preset="cappuccino"] #portal-view > .sidebar > .sidebar-brand,
html body[data-portal-preset="cappuccino"] #portal-view > .workspace > .topbar {
  background-color: #080824 !important;
  background-image: none !important;
  border-color: #2B3150 !important;
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #portal-view > .sidebar :is(
  .nav-item, .nav-item b, .nav-item small, .nav-tree-root, .nav-tree-root b,
  .sidebar-user, .sidebar-user strong, .sidebar-user small
) {
  color: #EDEAF2 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view > .sidebar .nav-item > span {
  color: #B6B4C8 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view > .sidebar :is(
  .nav-item:hover, .nav-item:focus-visible, .nav-item.active,
  .nav-tree-group.is-open > .nav-tree-root
) {
  background-color: #17324D !important;
  border-color: #8FA8BF !important;
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #portal-view > .sidebar :is(
  .nav-item:hover, .nav-item:focus-visible, .nav-item.active,
  .nav-tree-group.is-open > .nav-tree-root
) :where(*) {
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #portal-view > .workspace > .topbar :where(*) {
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #portal-view > .workspace > .topbar :is(
  button, .icon-button, .topbar-brand-home
) {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #portal-view > .workspace > .topbar :is(
  button, .icon-button, .topbar-brand-home
):hover,
html body[data-portal-preset="cappuccino"] #portal-view > .workspace > .topbar :is(
  button, .icon-button, .topbar-brand-home
):focus-visible {
  background-color: #17324D !important;
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #portal-global-search {
  background-color: #121532 !important;
  border-color: #4B5070 !important;
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #portal-global-search::placeholder {
  color: #C5C4D2 !important;
  opacity: 1;
}

html body[data-portal-preset="cappuccino"] #portal-search-submit {
  background-color: #17324D !important;
  border-color: #17324D !important;
  color: #FFFFFF !important;
}

/* Content contrast: cappuccino canvas, ivory cards, dark ink typography. */
html body[data-portal-preset="cappuccino"] #portal-view :is(
  .workspace, .content, .page-view, main
) {
  background-color: #E8D7C3 !important;
  color: #171426 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view :is(
  .portal-page-title, .surface, .metric, .metric-card, .command-banner,
  [class*="-card"], [class*="-panel"], [class*="-toolbar"], [class*="-dialog"],
  dialog, dialog form, .table-wrap, fieldset
):not(.dashboard-motion-lab):not(.dashboard-scene):not(.dashboard-scene-stat):not(.leaflet-container):not(.leaflet-container *) {
  background-color: #FAF6EF !important;
  border-color: #C9B79E !important;
  color: #171426 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view :is(
  .portal-page-title, .surface, .metric, .metric-card, .command-banner,
  [class*="-card"], [class*="-panel"], [class*="-toolbar"], [class*="-dialog"],
  dialog, dialog form, .table-wrap, fieldset
) :is(h1, h2, h3, h4, h5, h6, strong, b, label, legend, dt, dd) {
  color: #171426 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view :is(
  .portal-page-title, .surface, .metric, .metric-card, .command-banner,
  [class*="-card"], [class*="-panel"], [class*="-toolbar"], [class*="-dialog"],
  dialog, dialog form, .table-wrap, fieldset
) :is(p, small, time) {
  color: #5A4C40 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view :is(input, select, textarea, option, .search-box):not(#portal-global-search) {
  background-color: #FFFDFC !important;
  border-color: #AD987D !important;
  color: #171426 !important;
  color-scheme: light !important;
}

html body[data-portal-preset="cappuccino"] #portal-view :is(input, select, textarea, .search-box):not(#portal-global-search)::placeholder {
  color: #6C5D50 !important;
  opacity: 1;
}

/* Tables and repeated lists use restrained alternate rows without sacrificing contrast. */
html body[data-portal-preset="cappuccino"] #portal-view table {
  background-color: #FAF6EF !important;
  border-color: #C9B79E !important;
  color: #171426 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view thead th {
  background-color: #DDC9AE !important;
  border-color: #BDA98E !important;
  color: #171426 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view tbody tr:nth-child(odd) td {
  background-color: #FAF6EF !important;
  color: #171426 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view tbody tr:nth-child(even) td {
  background-color: #E9DBC7 !important;
  color: #171426 !important;
}

html body[data-portal-preset="cappuccino"] #portal-view tbody tr:hover td {
  background-color: #DCC9AE !important;
  color: #171426 !important;
}

/* The cinematic dashboard stays ink-dark with cream copy and navy controls. */
html body[data-portal-preset="cappuccino"] #dashboard-motion-lab,
html body[data-portal-preset="cappuccino"] #dashboard-motion-lab #dashboard-scene-track .dashboard-scene,
html body[data-portal-preset="cappuccino"] #dashboard-motion-lab #dashboard-scene-track .dashboard-scene-stat {
  --motion-ink: #FFFFFF;
  --motion-muted: #D8D6E1;
  background-color: #080824 !important;
  border-color: #2B3150 !important;
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #dashboard-motion-lab :where(*) {
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #dashboard-motion-lab :is(
  .dashboard-motion-controls button, .dashboard-scene-copy .button
) {
  background-color: #17324D !important;
  border-color: #8FA8BF !important;
  color: #FFFFFF !important;
}

html body[data-portal-preset="cappuccino"] #dashboard-motion-lab .dashboard-motion-controls button.active {
  background-color: #FAF6EF !important;
  border-color: #FAF6EF !important;
  color: #171426 !important;
}

html body[data-portal-preset="cappuccino"] #dashboard-motion-lab .dashboard-motion-controls button.active :where(*) {
  color: #171426 !important;
}

/* Final specificity guard: the Cappuccino preset must remain navy + cappuccino only. */
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] {
  --portal-accent: #17324D !important;
  --portal-action-text: #FFFFFF !important;
  --theme-accent: #17324D !important;
  --blue: #17324D !important;
  --orange: #17324D !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar {
  scrollbar-color: #52667B transparent !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar::-webkit-scrollbar-thumb {
  background: #52667B !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar :is(
  .nav-item:hover, .nav-item:focus-visible, .nav-item.active,
  .nav-tree-group.is-open > .nav-tree-root
) {
  background: #17324D !important;
  border-color: #8FA8BF !important;
  box-shadow: inset -3px 0 0 #E8D7C3 !important;
  color: #FFFFFF !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .workspace > .topbar {
  border-color: #2B3150 !important;
  border-bottom-color: #2B3150 !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .workspace > .topbar .topbar-brand-home {
  background: transparent !important;
  border-color: transparent !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .workspace > .topbar :is(
  button, .icon-button, .topbar-brand-home
):hover,
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .workspace > .topbar :is(
  button, .icon-button, .topbar-brand-home
):focus-visible {
  background: #17324D !important;
  color: #FFFFFF !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .workspace > .topbar .w3-header-search:focus-within {
  border-color: #8FA8BF !important;
  box-shadow: 0 0 0 .16rem rgba(143,168,191,.25) !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .workspace > .topbar #portal-search-submit,
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .workspace > .topbar #portal-search-submit:hover,
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .workspace > .topbar #portal-search-submit:focus-visible {
  background: #17324D !important;
  border-color: #17324D !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view :is(
  .button.primary, .button.success, .button:not(.ghost):not(.danger),
  .period-selector button.active, [class*="tabs"] button.active,
  .dashboard-scene-dots button.active
) {
  background: #17324D !important;
  border-color: #17324D !important;
  color: #FFFFFF !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #dashboard-motion-lab,
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #dashboard-motion-lab #dashboard-scene-track .dashboard-scene,
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #dashboard-motion-lab #dashboard-scene-track .dashboard-scene-stat {
  background-color: #080824 !important;
  background-image: none !important;
  border-color: #2B3150 !important;
  color: #FFFFFF !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #realtime-status.connected {
  background: #17324D !important;
  color: #FFFFFF !important;
}

/* Sidebar typography guard: two navy surfaces and one restrained text hierarchy. */
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar .nav-item {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #E3E7ED !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar .nav-item :is(b, small) {
  color: inherit !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar .nav-item > span,
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar .nav-tree-root > i {
  color: #AEB8C6 !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar .nav-context-submenu {
  --ink: #E3E7ED !important;
  --muted: #C5CDD8 !important;
  --line: #2B3150 !important;
  --soft: #17324D !important;
  --white: #080824 !important;
  background: transparent !important;
  border-color: #2B3150 !important;
  color: #E3E7ED !important;
  box-shadow: none !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar .nav-context-submenu .nav-item,
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar .nav-context-submenu .nav-flyout-featured,
html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar .nav-context-submenu .sensitive-action {
  background: transparent !important;
  border-color: transparent !important;
  color: #C5CDD8 !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar :is(
  .nav-item:hover, .nav-item:focus-visible, .nav-item.active,
  .nav-tree-group.is-open > .nav-tree-root,
  .nav-context-submenu .nav-item:hover,
  .nav-context-submenu .nav-item:focus-visible,
  .nav-context-submenu .nav-item.active
) {
  background: #17324D !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar :is(
  .nav-item:hover, .nav-item:focus-visible, .nav-item.active,
  .nav-tree-group.is-open > .nav-tree-root,
  .nav-context-submenu .nav-item:hover,
  .nav-context-submenu .nav-item:focus-visible,
  .nav-context-submenu .nav-item.active
) :where(*) {
  color: #FFFFFF !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view > .sidebar .nav-context-submenu .nav-item::before {
  background: #AEB8C6 !important;
}

html body[data-dashboard-theme][data-portal-preset="cappuccino"][data-portal-accent][data-portal-surface] #portal-view.sidebar-collapsed > .sidebar .nav-context-submenu {
  background: #080824 !important;
  border: 1px solid #2B3150 !important;
  box-shadow: 0 18px 42px rgba(2,5,18,.34) !important;
}

/*
 * Absolute sidebar palette guard.
 * The selected surface is the durable theme signal; unlike the preset name it
 * remains available when a user restores a customised dashboard preference.
 * Keep every navigation group on one ink canvas and reserve navy for state.
 */
html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar,
html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar nav,
html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar .nav-flyout-group,
html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar .nav-tree-group,
html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar .nav-context-submenu {
  background-color: #080824 !important;
  background-image: none !important;
  border-color: #2B3150 !important;
  color: #DCE2EA !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar :is(
  .nav-item,
  .nav-tree-root,
  .nav-context-submenu .nav-item,
  .nav-context-submenu .nav-flyout-featured,
  .nav-context-submenu .sensitive-action
) {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #DCE2EA !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar :is(
  .nav-item,
  .nav-tree-root,
  .nav-context-submenu .nav-item
) :where(*) {
  color: inherit !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar :is(
  .nav-item:hover,
  .nav-item:focus-visible,
  .nav-item.active,
  .nav-tree-group.is-open > .nav-tree-root,
  .nav-context-submenu .nav-item:hover,
  .nav-context-submenu .nav-item:focus-visible,
  .nav-context-submenu .nav-item.active
) {
  background-color: #17324D !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar :is(
  .nav-item:hover,
  .nav-item:focus-visible,
  .nav-item.active,
  .nav-tree-group.is-open > .nav-tree-root,
  .nav-context-submenu .nav-item:hover,
  .nav-context-submenu .nav-item:focus-visible,
  .nav-context-submenu .nav-item.active
) :where(*) {
  color: #FFFFFF !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar .nav-context-submenu .nav-item::before {
  background-color: #DCE2EA !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-view.sidebar-collapsed #portal-sidebar .nav-context-submenu {
  background-color: #080824 !important;
  border: 1px solid #2B3150 !important;
  box-shadow: 0 18px 42px rgba(2,5,18,.34) !important;
}

/* Dark-cappuccino submenu layer for Inventory & Goods and every peer group. */
html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar .nav-context-submenu {
  --ink: #F2E8DC !important;
  --muted: #D8C8B8 !important;
  --line: #6B5244 !important;
  --soft: #5A4336 !important;
  --white: #3B2A22 !important;
  background-color: #3B2A22 !important;
  background-image: none !important;
  border-color: #6B5244 !important;
  color: #F2E8DC !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar .nav-context-submenu :is(
  .nav-item,
  .nav-flyout-featured,
  .sensitive-action
) {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #F2E8DC !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar .nav-context-submenu :is(
  .nav-item,
  .nav-flyout-featured,
  .sensitive-action
) :where(*) {
  color: inherit !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar .nav-context-submenu :is(
  .nav-item:hover,
  .nav-item:focus-visible,
  .nav-item.active,
  .nav-flyout-featured:hover,
  .nav-flyout-featured:focus-visible
) {
  background-color: #5A4336 !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-sidebar .nav-context-submenu .nav-item::before {
  background-color: #E8D7C3 !important;
}

html body[data-dashboard-theme][data-portal-surface="cappuccino"] #portal-view.sidebar-collapsed #portal-sidebar .nav-context-submenu {
  background-color: #3B2A22 !important;
  border-color: #6B5244 !important;
  box-shadow: 0 18px 42px rgba(35,23,18,.38) !important;
}

@media (max-width: 700px) {
  html body[data-dashboard-theme] .dashboard-official-axis { grid-column: auto; }
  html body[data-dashboard-theme] .dashboard-preset-picker { grid-template-columns: 1fr !important; }
}

/* Final platform-owner guard: remove the legacy purple admin skin. */
html body.platform-mode #portal-view > .workspace,
html body.platform-mode #portal-view .page-view { background-color: #E8D7C3 !important; color: #171426 !important; }

html body.platform-mode #view-companies > .section-heading {
  color: #FFFFFF !important;
  border: 1px solid #2B3150 !important;
  border-radius: 18px !important;
  background: #080824 !important;
  box-shadow: 0 16px 40px rgba(8, 8, 36, .16) !important;
}

html body.platform-mode #view-companies > .section-heading :where(h2, p) { color: inherit !important; }
html body.platform-mode #view-companies > .section-heading p { color: #C5C4D2 !important; opacity: 1 !important; }

html body.platform-mode #view-companies :is(.metric, .surface, .platform-user-card) {
  color: #171426 !important;
  border-color: #C9B79E !important;
  background-color: #FAF6EF !important;
  background-image: none !important;
}

html body.platform-mode #view-companies .metric { border-top: 4px solid #17324D !important; }
html body.platform-mode #view-companies .metric-icon,
html body.platform-mode #view-companies .platform-user-avatar { color: #FFFFFF !important; background: #17324D !important; }
html body.platform-mode #view-companies .platform-users-panel { border-top-color: #17324D !important; }
html body.platform-mode #view-companies .button.primary { color: #FFFFFF !important; border-color: #17324D !important; background: #17324D !important; }
html body.platform-mode #view-companies .button.primary:hover { background: #203F5D !important; }
html body.platform-mode #view-companies :is(input, select, textarea):focus { border-color: #17324D !important; outline-color: rgba(23, 50, 77, .22) !important; }