/* v15 — extend the soft green image background to every page and the Settings sidebar. */
:root {
  --dnxt-v15-green-soft: #f1f9fa;
  --dnxt-v15-green-card: #f6fbfc;
  --dnxt-v15-green-border: rgba(18,106,116, .22);
  --dnxt-v15-page-art: url('/img/workspace-bg-diagonal-green.svg?v=20260713-v15');
  --dnxt-v15-surface-art: url('/img/side-card-bg.png?v=20260713-v15');
}

/* Keep the green image visible on all app pages. */
html,
body:not([data-page="login"]) {
  background-color: var(--dnxt-v15-green-soft) !important;
}
body:not([data-page="login"]) .shell {
  background: transparent !important;
}
body:not([data-page="login"]) .workspace,
body:not([data-page="login"]) .content-layout,
body:not([data-page="login"]) .canvas-area,
body.app-nav-home .workspace,
body.app-nav-home .content-layout,
body.app-nav-home .canvas-area,
body[data-page="settings"] .workspace,
body[data-page="profile"] .workspace,
body[data-page="notifications"] .workspace,
body[data-page="browse-teams"] .workspace {
  background-color: #f8fcfd !important;
  background-image:
    linear-gradient(rgba(255,255,255,.70), rgba(248,252,253,.80)),
    var(--dnxt-v15-page-art),
    var(--dnxt-v15-surface-art) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center center, center center, center center !important;
  background-size: cover, cover, cover !important;
}

/* Sidebar should use the same soft image surface on Settings and all other pages. */
body[data-page="settings"] .sidebar,
.stg-sidebar,
.stg-preview-sidebar-mini,
.stg-col-side {
  background-color: var(--dnxt-v15-green-soft) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(241,249,250,.88)),
    var(--dnxt-v15-surface-art) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  border-right: 1px solid var(--dnxt-v15-green-border) !important;
}
body[data-page="settings"] .sidebar .brand,
body[data-page="settings"] .sidebar .side-group,
body[data-page="settings"] .sidebar .sidebar-footer,
body[data-page="settings"] .sidebar .create-wrapper,
body[data-page="settings"] .sidebar .project-list,
body[data-page="settings"] .sidebar .teams-sidebar-list {
  background: transparent !important;
}

/* Settings layout surfaces should match the same light green card treatment. */
.stg-page,
.stg-page-wide,
.stg-content,
.stg-content-wide,
.stg-col-main,
.stg-two-col,
.stg-tp-main,
.stg-tp-content,
.stg-card,
.stg-role-card,
.stg-team-overview,
.stg-preview-box,
.stg-api-section,
.stg-import-export,
.stg-quick-info,
.stg-status-list,
.stg-option-group,
.stg-fields-list,
.stg-field-row,
.stg-field-list,
.stg-integration-row,
.stg-integration-list,
.stg-notif-summary,
.stg-role-grid,
.settings-card,
.settings-panel {
  background-color: var(--dnxt-v15-green-card) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(241,249,250,.86)),
    var(--dnxt-v15-surface-art) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  border-color: var(--dnxt-v15-green-border) !important;
}

/* Make common top bars slightly translucent so the page image still feels present. */
body:not([data-page="login"]) .global-topbar,
body:not([data-page="login"]) .settings-topbar,
body:not([data-page="login"]) .profile-topbar-clean {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(18,106,116,.14) !important;
}

html[data-theme="dark"] body:not([data-page="login"]) .workspace,
html[data-theme="dark"] body:not([data-page="login"]) .content-layout,
html[data-theme="dark"] body:not([data-page="login"]) .canvas-area {
  background-color: #061617 !important;
  background-image:
    linear-gradient(rgba(4,15,16,.86), rgba(4,15,16,.90)),
    var(--dnxt-v15-page-art),
    var(--dnxt-v15-surface-art) !important;
}
html[data-theme="dark"] body[data-page="settings"] .sidebar,
html[data-theme="dark"] .stg-sidebar,
html[data-theme="dark"] .stg-preview-sidebar-mini,
html[data-theme="dark"] .stg-col-side {
  background-color: #081a1c !important;
  background-image:
    linear-gradient(180deg, rgba(9,25,27,.90), rgba(7,21,23,.92)),
    var(--dnxt-v15-surface-art) !important;
  border-right-color: rgba(110,201,212,.18) !important;
}
html[data-theme="dark"] .stg-page,
html[data-theme="dark"] .stg-page-wide,
html[data-theme="dark"] .stg-content,
html[data-theme="dark"] .stg-content-wide,
html[data-theme="dark"] .stg-col-main,
html[data-theme="dark"] .stg-two-col,
html[data-theme="dark"] .stg-tp-main,
html[data-theme="dark"] .stg-tp-content,
html[data-theme="dark"] .stg-card,
html[data-theme="dark"] .stg-role-card,
html[data-theme="dark"] .stg-team-overview,
html[data-theme="dark"] .stg-preview-box,
html[data-theme="dark"] .stg-api-section,
html[data-theme="dark"] .stg-import-export,
html[data-theme="dark"] .stg-quick-info,
html[data-theme="dark"] .stg-status-list,
html[data-theme="dark"] .stg-option-group,
html[data-theme="dark"] .stg-fields-list,
html[data-theme="dark"] .stg-field-row,
html[data-theme="dark"] .stg-field-list,
html[data-theme="dark"] .stg-integration-row,
html[data-theme="dark"] .stg-integration-list,
html[data-theme="dark"] .stg-notif-summary,
html[data-theme="dark"] .stg-role-grid,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-panel {
  background-color: #081a1c !important;
  background-image:
    linear-gradient(135deg, rgba(9,25,27,.92), rgba(7,21,23,.90)),
    var(--dnxt-v15-surface-art) !important;
  border-color: rgba(110,201,212,.20) !important;
}