/** * App-wide theme presets (Morning / Night / Monitor). * Applied via from Header. */ :root, html[data-app-theme="morning"] { --app-bg: #f4f6fb; --app-surface: #ffffff; --app-text: #1e293b; --app-muted: #64748b; --app-header-bg: #ffffff; --app-border: #e2e8f0; --app-accent: #ff7043; --header-deploy-bg: #28a745; --zoas-header-logo-box-w-desktop: 272px; --zoas-header-logo-box-h-desktop: 72px; --zoas-header-logo-box-w-tablet: min(236px, 48vw); --zoas-header-logo-box-h-tablet: 64px; --zoas-header-logo-box-w-mobile: clamp(132px, 38vw, 168px); --zoas-header-logo-box-h-mobile: 50px; } html[data-app-theme="night"] { --app-bg: #0f1419; --app-surface: #1a1f2e; --app-text: #e8eaed; --app-muted: #94a3b8; --app-header-bg: #151b26; --app-border: #2d3748; --app-accent: #ff8a65; --header-deploy-bg: #28a745; } /* "Monitor" = softer dimmed workspace (reduced glare vs pure black) */ html[data-app-theme="monitor"] { --app-bg: #2d333d; --app-surface: #3a4150; --app-text: #eceff4; --app-muted: #a8b0bd; --app-header-bg: #323945; --app-border: #4a5568; --app-accent: #ffb74d; } /* data-app-theme is morning|night|monitor (monitor uses OS preference via Header syncAppTheme) */ html[data-app-theme="night"] body, html[data-app-theme="morning"] body, html[data-app-theme="monitor"] body { color: var(--app-text); background: var(--app-bg); } /* Header subtitle (wordmark is in the PNG) — night contrast */ html[data-theme-mode='night'] .header-brand-fullname, html[data-app-theme='night'] .header-brand-fullname { color: var(--theme-text-muted) !important; } html[data-app-theme="night"] .main-header, html[data-app-theme="morning"] .main-header, html[data-app-theme="monitor"] .main-header { background: var(--app-header-bg) !important; border-bottom: 1px solid var(--app-border); } html[data-app-theme="night"] .navbar-brand span, html[data-app-theme="morning"] .navbar-brand span, html[data-app-theme="monitor"] .navbar-brand span { color: var(--app-text) !important; } html[data-app-theme="night"] .user-info, html[data-app-theme="morning"] .user-info, html[data-app-theme="monitor"] .user-info { color: var(--app-text) !important; } /* Login: centered Zinnia + ZOAS; shared wordmark box (morning + night PNGs) — height aligns with .login-zoas-img max-height so neither dominates */ body.login .login-brand-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 12px; box-sizing: border-box; } body.login .card.card-primary.login-card .card-header .login-logo-container { text-align: center; } body.login .card.card-primary.login-card .card-header .login-logo-container .login-zinnia-wordmark { width: 220px; height: 96px; max-width: 100%; object-fit: contain; object-position: center; display: block; margin-left: auto; margin-right: auto; box-sizing: border-box; flex-shrink: 0; } body.login .card.card-primary.login-card .card-header .login-logo-container .login-zoas-img { height: auto !important; width: auto; object-fit: contain; display: block; margin-left: auto; margin-right: auto; } body.login .card.card-primary.login-card .card-header .login-logo-container .login-zoas-img { max-height: 96px; max-width: min(100%, 380px); } @media (max-width: 768px) { body.login .card.card-primary.login-card .card-header .login-logo-container .login-zinnia-wordmark { width: min(200px, 100%); height: calc(96px * 200 / 220); } body.login .card.card-primary.login-card .card-header .login-logo-container .login-zoas-img { max-height: 76px; max-width: 100%; } } @media (max-width: 375px) { body.login .card.card-primary.login-card .card-header .login-logo-container .login-zinnia-wordmark { width: min(180px, 100%); height: calc(96px * 180 / 220); } body.login .card.card-primary.login-card .card-header .login-logo-container .login-zoas-img { max-height: 64px; } } /* Header: viewport-centered Deploy (grid). Monitor mode uses data-app-theme morning|night via syncAppTheme. */ .main-header-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; width: 100%; box-sizing: border-box; } .main-header-grid__brand { display: flex; align-items: center; justify-content: flex-start; min-width: 0; } /* Pull post-login header logo toward the left (style.css adds heavy .navbar-brand padding) */ .main-header > .container-fluid { padding-left: max(0.5rem, env(safe-area-inset-left, 0px)); } .main-header .navbar-brand { padding-left: 0 !important; margin-left: 0; display: flex; align-items: center; min-width: 0; } /* Reusable logo contract (header, hero, modal overlays). */ .zoas-logo { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: left center; box-sizing: border-box; } .zoas-logo--header { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; min-width: 0 !important; } .zoas-logo--hero { width: auto; height: auto; max-width: min(100%, 220px); max-height: 64px; object-position: left center; } .zoas-logo--modal { width: min(240px, 70vw); height: auto; max-width: 240px; max-height: 64px; object-position: center; } .main-header .header-brand-logo-wrap { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; width: var(--zoas-header-logo-box-w-desktop); height: var(--zoas-header-logo-box-h-desktop); min-width: 124px; overflow: visible; max-width: min(100%, var(--zoas-header-logo-box-w-desktop)); } /* Keep legacy class supported, but size via reusable logo class tokens. */ .navbar-brand .header-app-logo { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: left center !important; flex-shrink: 0; box-sizing: border-box; } @media (max-width: 991px) { .main-header .header-brand-logo-wrap { width: var(--zoas-header-logo-box-w-tablet); height: var(--zoas-header-logo-box-h-tablet); max-width: min(100%, var(--zoas-header-logo-box-w-tablet)); } .main-header .navbar-brand .zoas-logo--header, .main-header .navbar-brand .header-app-logo { width: 100% !important; height: 100% !important; object-position: left center !important; } } @media (max-width: 600px) { .main-header .header-brand-logo-wrap { width: var(--zoas-header-logo-box-w-mobile); height: var(--zoas-header-logo-box-h-mobile); max-width: min(100%, var(--zoas-header-logo-box-w-mobile)); } .main-header .navbar-brand .zoas-logo--header, .main-header .navbar-brand .header-app-logo { width: 100% !important; height: 100% !important; min-width: 0 !important; max-height: none !important; object-position: left center !important; } } .main-header-grid__center { justify-self: center; max-width: min(100%, 560px); min-width: 0; } .main-header-grid__end { justify-self: end; min-width: 0; } /* Stack header below 991px for all layouts (not only JS "mobile" <=600px) */ @media (max-width: 991px) { .main-header-grid, .main-header-grid--mobile { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 10px; } .main-header-grid .main-header-grid__brand, .main-header-grid--mobile .main-header-grid__brand { grid-column: 1; grid-row: 1; } .main-header-grid .main-header-grid__end, .main-header-grid--mobile .main-header-grid__end { grid-column: 2; grid-row: 1; align-self: center; } .main-header-grid .main-header-grid__center, .main-header-grid--mobile .main-header-grid__center { grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 100%; padding-bottom: 8px; margin-bottom: 2px; } } /* Truncate long names in header user trigger */ @media (max-width: 991px) { .main-header .header-user-name { max-width: min(160px, 28vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; text-align: right; } .main-header .header-user-role { max-width: min(160px, 28vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } } @media (max-width: 480px) { .main-header .header-user-name { max-width: min(120px, 36vw); } .main-header .header-user-role { max-width: min(120px, 36vw); } } /* Deploy / center actions: slightly tighter spacing on narrow phones (no layout collapse) */ @media (max-width: 600px) { .main-header .main-header-grid__center.header-actions-list { gap: var(--spacing-sm); row-gap: var(--spacing-sm); } } /* Single morning/night toggle — compact (Bootstrap Icons sun/moon, shadcn-like density) */ .theme-mode-toggle-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--app-accent); background: rgba(255, 112, 67, 0.1); cursor: pointer; padding: 0; margin-right: var(--spacing-sm); flex-shrink: 0; box-sizing: border-box; transition: background-color 0.2s ease; } .theme-mode-toggle-btn[aria-pressed='true'] { background: rgba(255, 112, 67, 0.16); } .theme-mode-toggle-btn:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; } .theme-mode-toggle-btn .bi-moon { color: #7c8fd4; font-size: 14px; line-height: 1; } .theme-mode-toggle-btn .bi-sun { color: #e65100; font-size: 14px; line-height: 1; } /* Deploy (header center) — token-based; icon-only variant is default in Header */ .header-deploy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border: none; border-radius: var(--radius-md, 6px); font-size: var(--font-size-sm, 14px); font-weight: var(--font-weight-medium, 500); cursor: pointer; transition: background-color 0.2s ease, filter 0.15s ease; background-color: var(--header-deploy-bg, #28a745); color: var(--color-white); } .header-deploy-btn--icon-only { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border-radius: var(--radius-md, 6px); } .header-deploy-btn--icon-only .bi { font-size: 16px; line-height: 1; } .header-deploy-btn--icon-only:hover:not(:disabled) { filter: brightness(1.06); } .header-deploy-btn:disabled { cursor: not-allowed; background-color: var(--color-accent-yellow, #ffc107); color: var(--color-neutral-dark); } .header-deploy-btn__spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: zoas-spin 1s linear infinite; box-sizing: border-box; } .header-deploy-logs-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--color-neutral-light); border-radius: var(--radius-md, 6px); font-size: 13px; cursor: pointer; background: var(--color-neutral-very-light); color: var(--color-neutral-dark); } .header-deploy-logs-btn--icon-only { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; justify-content: center; background: var(--app-surface, var(--color-white)); border: 1px solid var(--app-border, var(--color-neutral-light)); color: var(--app-text, var(--color-neutral-dark)); } .header-deploy-logs-btn--icon-only .bi { font-size: 15px; line-height: 1; } .header-deploy-logs-btn--icon-only:hover { background: var(--color-neutral-very-light); } @keyframes zoas-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Phones: keep brand / theme+user on one row without overlap */ @media (max-width: 600px) { .main-header-grid.main-header-grid--mobile .main-header-grid__brand { min-width: 0; overflow: visible; } .main-header-grid.main-header-grid--mobile .navbar-brand { min-width: 0; flex: 1 1 auto; max-width: 100%; gap: 8px !important; } .main-header-grid.main-header-grid--mobile .mobile-menu-btn--in-header { margin-right: 2px; min-width: 40px; min-height: 40px; padding: 6px; } .main-header-grid.main-header-grid--mobile .header-brand-logo-wrap { max-width: min(100%, var(--zoas-header-logo-box-w-mobile)); min-width: 132px; flex-shrink: 0; margin-left: -6px; margin-top: 3px; } .main-header-grid.main-header-grid--mobile .navbar-brand .zoas-logo--header, .main-header-grid.main-header-grid--mobile .navbar-brand .header-app-logo { width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; max-height: none !important; object-fit: contain !important; object-position: left 56% !important; flex-shrink: 0 !important; box-sizing: border-box !important; } .main-header-grid.main-header-grid--mobile .main-header-grid__end { align-self: center; max-width: min(44%, 164px); min-width: 0; padding-left: 8px; } .main-header-grid.main-header-grid--mobile .main-header-grid__end .user-info { min-width: 0; padding: 1px 2px !important; gap: 2px !important; } .main-header-grid.main-header-grid--mobile .header-user-name { max-width: min(78px, 21vw); } .main-header-grid.main-header-grid--mobile .header-user-role { display: none !important; } .main-header-grid.main-header-grid--mobile .main-header-grid__center { justify-content: center; padding-bottom: var(--spacing-md); margin-bottom: var(--spacing-xs); } .main-header-grid.main-header-grid--mobile .theme-mode-toggle-btn { width: 28px; height: 28px; margin-left: 8px; margin-right: 4px; margin-top: 0; } .main-header .header-deploy-btn--icon-only, .main-header .header-deploy-logs-btn--icon-only { width: 36px; height: 36px; min-width: 36px; min-height: 36px; } } @media (max-width: 390px) { .main-header-grid.main-header-grid--mobile .header-brand-logo-wrap { margin-left: -8px; margin-top: 4px; } .main-header-grid.main-header-grid--mobile .navbar-brand .zoas-logo--header, .main-header-grid.main-header-grid--mobile .navbar-brand .header-app-logo { object-position: left 58% !important; } .main-header-grid.main-header-grid--mobile .header-user-name { max-width: 60px; } } /* Clone/Share modal: panel uses full width on small screens */ @media (max-width: 600px) { .clone-share-modal-panel { max-width: 100% !important; width: 100% !important; box-sizing: border-box; } } /* Document generation: rich text / editors respect narrow main column */ .document-generation-page .rte-editor-root, .document-generation-page .doc-gen-section-card { min-width: 0; max-width: 100%; box-sizing: border-box; } /* Document generation: interface spec / glossary tables — horizontal scroll on small screens */ .document-generation-page .doc-gen-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; box-sizing: border-box; } .document-generation-page .doc-gen-table-scroll > table { min-width: 520px; } /* Capability APIs toolbar: default block layout stacked the title, jump row, and actions vertically */ .capability-apis-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; width: 100%; box-sizing: border-box; margin-bottom: 18px; } /* Swagger shell: fills below toolbar; theme-aware (inline rgb(237) broke night mode) */ .capability-swagger-shell { background-color: rgb(237, 237, 237); border: 1px solid var(--color-neutral-light, #dee2e6); border-radius: var(--border-radius-md, 8px); overflow: hidden; position: relative; } html[data-theme-mode='night'] .capability-swagger-shell { background-color: var(--theme-surface-1, #1a1f2e) !important; border-color: var(--theme-border, #2d3748) !important; } /* Match iframe chrome to Swagger body so no light strip at bottom in dark mode */ .capability-swagger-iframe-wrap { background-color: rgb(237, 237, 237); box-sizing: border-box; /* Remove subpixel gap below iframe (inline-block baseline) */ line-height: 0; } .capability-swagger-iframe-wrap iframe { vertical-align: top; } html[data-theme-mode='night'] .capability-swagger-iframe-wrap { background-color: #14181f; } html[data-theme-mode='night'] .capability-iframe-loading-overlay { background-color: rgba(15, 20, 27, 0.88) !important; } html[data-theme-mode='night'] .capability-iframe-loading-overlay span { color: var(--theme-text-secondary, #cbd5e0) !important; } .capability-apis-title { margin: 0; flex: 0 0 auto; } /* Capability APIs: Jump to API — one horizontal row on desktop (label + select + Preview + Edit) */ .capability-jump-api-wrap { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px 12px; flex: 1 1 auto; min-width: 0; } .capability-apis-toolbar-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 1 auto; } .capability-jump-api-actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; flex-shrink: 0; } /* Jump row: label + dropdown (reference: dark bar, white text, bordered select) */ .capability-jump-api-label { font-size: 14px; font-weight: 600; color: var(--theme-text-primary, #1e293b); white-space: nowrap; } html[data-theme-mode='night'] .capability-jump-api-label { color: var(--theme-text-primary) !important; } .capability-jump-api-select { min-width: 220px; max-width: min(440px, 42vw); padding: 8px 12px; font-size: 14px; font-weight: 500; border-radius: 6px; border: 1px solid var(--theme-border, #cbd5e1); background: var(--theme-surface-0, #ffffff); color: var(--theme-text-primary, #1e293b); box-sizing: border-box; } html[data-theme-mode='night'] .capability-jump-api-select { background: var(--theme-surface-0, #151b26) !important; border-color: var(--theme-border, #334155) !important; color: var(--theme-text-primary) !important; } /* Preview (icon-only) + Edit — match reference: navy preview tile, blue edit pill */ .capability-jump-btn { border: none; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1.2; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease; flex-shrink: 0; box-sizing: border-box; } .capability-jump-btn:active { transform: translateY(1px); } .capability-jump-btn--preview { width: 40px; height: 40px; padding: 0; background: #1e293b; border: 1px solid #334155; color: #fff; } .capability-jump-btn--preview:hover { background: #334155; border-color: #475569; } .capability-jump-btn__icon { width: 18px; height: 18px; display: block; filter: brightness(0) invert(1); pointer-events: none; } .capability-jump-btn--edit { gap: 8px; padding: 8px 16px; min-height: 40px; background: #2563eb; color: #ffffff !important; border: 1px solid #1d4ed8; } .capability-jump-btn--edit:hover { background: #1d4ed8; border-color: #1e40af; } .capability-jump-btn--edit svg { flex-shrink: 0; } .capability-jump-btn--edit svg path { fill: #ffffff; } /* Capability APIs: Jump to API + preview/edit stay usable on narrow viewports */ @media (max-width: 600px) { .capability-apis-toolbar { flex-direction: column !important; align-items: stretch !important; } .capability-jump-api-wrap { flex-direction: column !important; flex-wrap: wrap !important; align-items: stretch !important; width: 100% !important; box-sizing: border-box; } .capability-jump-api-wrap .capability-jump-api-select { min-width: 0 !important; width: 100% !important; max-width: 100% !important; flex: none !important; } .capability-jump-api-actions { flex-wrap: wrap !important; gap: 8px !important; } .capability-apis-toolbar-actions { width: 100%; justify-content: flex-start !important; } } /* Company overview — dark mode (semantic classes from CompanyView.tsx) */ html[data-theme-mode='night'] .company-view-title, html[data-theme-mode='night'] .company-section-heading { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .company-summary-card, html[data-theme-mode='night'] .company-capability-card, html[data-theme-mode='night'] .company-placeholder-banner { background: var(--theme-surface-1) !important; border: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .company-placeholder-banner__text { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .company-metric-label { color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .company-metric-value, html[data-theme-mode='night'] .company-capability-card__title, html[data-theme-mode='night'] .company-project-card__title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .company-capability-card__desc { color: var(--theme-text-secondary) !important; } /* Capability / Project summary cards — light default (inline backgrounds removed in TSX) */ .capability-summary-card { background-color: #e3f2fd; border: 1px solid var(--theme-border, #e2e8f0); } .project-summary-card { background-color: #e3f2fd; border: 1px solid var(--theme-border, #e2e8f0); } html[data-theme-mode='night'] .project-summary-card { background: var(--theme-surface-1) !important; border: 1px solid var(--theme-border) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .project-summary-card h1, html[data-theme-mode='night'] .project-summary-card p, html[data-theme-mode='night'] .project-summary-card strong { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .project-summary-card .project-summary-card__muted { color: var(--theme-text-secondary) !important; } /* Capability overview — match Company semantic card pattern */ html[data-theme-mode='night'] .capability-summary-card { background: var(--theme-surface-1) !important; border: 1px solid var(--theme-border) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .capability-summary-card h1, html[data-theme-mode='night'] .capability-summary-card .capability-summary-card__title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .capability-summary-card .capability-metric-label { color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .capability-summary-card .capability-metric-value, html[data-theme-mode='night'] .capability-summary-card p { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .capability-summary-card .capability-summary-card__desc { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .company-project-card { background: var(--theme-surface-1) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .company-view-modal-panel { background: var(--theme-surface-0) !important; color: var(--theme-text-primary); border: 1px solid var(--theme-border); } html[data-theme-mode='night'] .company-view-modal-panel__title { color: var(--theme-text-primary); } html[data-theme-mode='night'] .company-view-modal-panel label { color: var(--theme-text-secondary); } html[data-theme-mode='night'] .company-view-modal-panel input, html[data-theme-mode='night'] .company-view-modal-panel textarea { background: var(--theme-surface-1); color: var(--theme-text-primary); border-color: var(--theme-border); } /* RUAP (admin users) — dark mode: action menu, role badges, filters (color-only) */ html[data-theme-mode='night'] .ruap-action-menu__dropdown { background: var(--theme-surface-0) !important; border-color: var(--theme-border) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } html[data-theme-mode='night'] .ruap-action-menu__item--view { color: #90caf9 !important; } html[data-theme-mode='night'] .ruap-action-menu__item--edit { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .ruap-action-menu__item--delete { color: #ff8a80 !important; border-top-color: var(--theme-border) !important; } html[data-theme-mode='night'] .ruap-action-menu__trigger { border-color: var(--theme-border) !important; color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .ruap-users-page .role-badge { background: rgba(255, 152, 0, 0.18) !important; color: #ffcc80 !important; border: 1px solid rgba(255, 183, 77, 0.45); } html[data-theme-mode='night'] .ruap-filter-cell { background: var(--theme-surface-1) !important; } html[data-theme-mode='night'] .ruap-filter-cell input, html[data-theme-mode='night'] .ruap-filter-cell select { background: var(--theme-surface-0) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } /* RUAP Add/Edit user modals — night (overrides inline + global span rule on white panels) */ html[data-theme-mode='night'] .ruap-user-modal, html[data-theme-mode='night'] .add-user-modal-panel, html[data-theme-mode='night'] .edit-user-modal-panel { background-color: var(--theme-surface-0) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .ruap-user-modal h3 { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .ruap-user-search-results { background-color: var(--theme-surface-1) !important; border-color: var(--theme-border) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important; } html[data-theme-mode='night'] .ruap-user-search-row { border-bottom-color: var(--theme-border) !important; } html[data-theme-mode='night'] .ruap-user-search-name { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .ruap-user-search-email { color: var(--theme-text-muted) !important; } /* Existing-user search field: force dark surface (inline #fff on input) */ html[data-theme-mode='night'] .ruap-user-modal input[type='text'], html[data-theme-mode='night'] .ruap-user-modal input[type='email'], html[data-theme-mode='night'] .ruap-user-modal input[type='search'] { background-color: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } /* Zinnia Employee helper — override inline #666 on dark panel */ html[data-theme-mode='night'] .ruap-user-modal .form-group > p { color: var(--theme-text-muted) !important; } /* RUAP Assign To multi-select: force option readability in night mode */ html[data-theme-mode='night'] .ruap-user-modal select[multiple] { background-color: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .ruap-user-modal select[multiple] option { background-color: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .ruap-user-modal select[multiple] option:checked { background: var(--theme-accent) !important; color: #ffffff !important; } html[data-theme-mode='night'] .ruap-user-modal select[multiple] option:disabled { background-color: var(--theme-surface-0) !important; color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .ruap-endpoint-picker { background-color: var(--theme-surface-1) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .ruap-endpoint-picker .ruap-endpoint-row[data-selected='true'] { background-color: rgba(255, 139, 99, 0.22) !important; } html[data-theme-mode='night'] .ruap-endpoint-picker .ruap-endpoint-row > div { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .ruap-endpoint-select-all { background-color: var(--theme-surface-2) !important; } html[data-theme-mode='night'] .ruap-endpoint-select-all-label { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .ruap-api-tabs { border-bottom-color: var(--theme-border) !important; } html[data-theme-mode='night'] .ruap-api-tab--inactive { background-color: var(--theme-surface-2) !important; color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .ruap-api-tab--inactive span { background-color: var(--theme-surface-1) !important; color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .ruap-api-tab--active.ruap-api-tab--accent-orange { background-color: #ff7043 !important; color: #ffffff !important; } html[data-theme-mode='night'] .ruap-api-tab--active.ruap-api-tab--accent-blue { background-color: #1976d2 !important; color: #ffffff !important; } html[data-theme-mode='night'] .ruap-api-tab--active.ruap-api-tab--accent-purple { background-color: #7b1fa2 !important; color: #ffffff !important; } html[data-theme-mode='night'] .ruap-api-tab--active span { background-color: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; } html[data-theme-mode='night'] .ruap-modal__btn-cancel { background-color: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .ruap-modal__btn-cancel:hover { background-color: var(--theme-surface-1) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .ruap-modal__btn-primary:not(:disabled) { background-color: #28a745 !important; color: #ffffff !important; } html[data-theme-mode='night'] .ruap-modal__btn-primary:disabled { opacity: 0.55 !important; } /* Document generation — read-only rich text / TOC preview */ html[data-theme-mode='night'] .rte-editor-area--readonly, html[data-theme-mode='night'] .rte-editor-area--readonly * { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .rte-editor-area--readonly { background-color: var(--theme-surface-1) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .document-generation-page .ql-editor, html[data-theme-mode='night'] .document-generation-page .ql-toolbar { background: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .document-generation-page .ql-editor.ql-blank::before { color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .document-generation-page .rte-editor-area:not(.rte-editor-area--readonly) { background-color: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .document-generation-page .rte-editor-toolbar, html[data-theme-mode='night'] .document-generation-page [class*='rte-toolbar'] { background: var(--theme-surface-2) !important; border-color: var(--theme-border) !important; } /* RichTextEditor: shell + toolbar rows (inline styles overridden with !important) */ html[data-theme-mode='night'] .document-generation-page .rte-editor-root { border-color: var(--theme-border) !important; background-color: var(--theme-surface-1) !important; box-shadow: none !important; } html[data-theme-mode='night'] .document-generation-page .rte-editor-root > div:not(.rte-editor-area) { background-color: var(--theme-surface-2) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .document-generation-page .rte-editor-root .rte-toolbar-btn { background-color: var(--theme-surface-0) !important; border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .document-generation-page .rte-editor-root .rte-toolbar-btn:hover:not(:disabled) { background-color: var(--theme-surface-1) !important; } html[data-theme-mode='night'] .document-generation-page .rte-editor-root .rte-toolbar-divider { background-color: var(--theme-border) !important; } html[data-theme-mode='night'] .document-generation-page .rte-editor-root .rte-toolbar-shape { background-color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .doc-gen-toc-panel, html[data-theme-mode='night'] .doc-gen-section-card { background: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .doc-gen-toc-panel h2, html[data-theme-mode='night'] .doc-gen-toc-panel h3, html[data-theme-mode='night'] .doc-gen-section-card .doc-gen-section-title { color: var(--theme-text-primary) !important; } /* Document Generation — save success modal (tokenized dark surface in night mode) */ html[data-theme-mode='night'] .doc-gen-save-success-modal { background-color: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__title { color: var(--theme-accent) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__subtitle { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__meta { background-color: var(--theme-surface-2) !important; border: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__meta-label { color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__meta-value { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__hint { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__close { background-color: var(--theme-surface-0) !important; color: var(--theme-text-secondary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__btn-secondary { background-color: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__btn-outline { background-color: transparent !important; color: var(--theme-accent) !important; border-color: var(--theme-accent) !important; } html[data-theme-mode='night'] .doc-gen-save-success-modal__btn-primary, html[data-theme-mode='night'] .doc-gen-save-success-modal__btn-danger, html[data-theme-mode='night'] .doc-gen-save-success-modal__btn-confirm { color: #ffffff !important; } /* Clone API modal — nested panels + labels + footer buttons */ html[data-theme-mode='night'] .clone-share-modal-panel { background: var(--theme-surface-0) !important; color: var(--theme-text-primary) !important; border: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .clone-share-modal-panel p, html[data-theme-mode='night'] .clone-share-modal-panel strong { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .clone-share-modal-panel label, html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__field-label { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__selected-box { background: var(--theme-surface-2) !important; border: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__selected-box strong { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__selected-chip { background-color: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__selected-chip strong { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__selected-chip span { color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__target-placeholder { background-color: var(--theme-surface-2) !important; color: var(--theme-text-muted) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__btn-primary:not(:disabled) { background-color: var(--theme-accent) !important; color: #ffffff !important; } html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__btn-primary:disabled { background: var(--theme-surface-2) !important; color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .clone-share-modal-panel .clone-share-modal__btn-cancel { background-color: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } /* Delete API modal — tabs and list chrome */ html[data-theme-mode='night'] .delete-api-modal-panel { background: var(--theme-surface-0) !important; color: var(--theme-text-primary) !important; border: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .delete-api-modal-panel h2 { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .delete-api-modal-panel .delete-api-filter-btn { background: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .delete-api-modal-panel .delete-api-filter-btn.is-active { background: var(--theme-surface-0) !important; color: var(--theme-accent) !important; } html[data-theme-mode='night'] .delete-api-modal-panel .delete-api-category-btn { color: var(--theme-text-secondary) !important; background: transparent !important; } html[data-theme-mode='night'] .delete-api-modal-panel .delete-api-category-btn.is-active { color: var(--theme-accent) !important; } html[data-theme-mode='night'] .delete-api-modal-panel .delete-api-row { border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .delete-api-modal-panel .delete-api-modal__btn-cancel { background-color: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border: 1px solid var(--theme-border) !important; } /* Global theme controls: morning / night / monitor */ :root { --theme-surface-0: #ffffff; --theme-surface-1: #f7f9fc; --theme-surface-2: #eef2f8; --theme-text-primary: #1b2330; --theme-text-secondary: #3d4a5f; --theme-text-muted: #6b788f; --theme-border: #d7dee9; --theme-accent: #ff7043; --theme-danger: #dc3545; --theme-success: #28a745; --theme-danger-soft: #fee2e2; --theme-success-soft: #e8f5e9; --theme-warning-soft: #fff3e0; } .theme-muted { color: var(--theme-text-muted); } html[data-theme-mode='night'] { --color-white: #1d1f24; --color-50-gray: #252830; --color-100-gray: #2a2e36; --color-200-gray: #3a404b; --color-300-gray: #596271; --color-400-gray: #778295; --color-500-gray: #9aa3b2; --color-600-gray: #bbc2cc; --color-700-gray: #d5dae2; --color-800-gray: #e4e7ec; --color-900-gray: #f2f5f8; --theme-surface-0: #171a20; --theme-surface-1: #1e232c; --theme-surface-2: #252b36; --theme-text-primary: #eef3fb; --theme-text-secondary: #c9d3e4; --theme-text-muted: #93a0b6; --theme-border: #364052; --theme-accent: #ff8b63; --theme-danger: #ff6b7a; --theme-success: #56d885; --theme-danger-soft: rgba(255, 107, 122, 0.18); --theme-success-soft: rgba(86, 216, 133, 0.16); --theme-warning-soft: rgba(255, 180, 90, 0.16); } .theme-toggle-group { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; padding: 3px; border: 1px solid var(--theme-border); border-radius: 999px; background: var(--theme-surface-1); position: relative; z-index: 2; } .theme-toggle-btn { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 999px; background: var(--theme-surface-0); color: var(--theme-text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .theme-toggle-btn i { font-size: 14px; line-height: 1; } .theme-toggle-btn:hover { border-color: var(--theme-border); color: var(--theme-text-primary); } /* Single morning/night toggle in header (replaces 3-button group) */ .theme-mode-toggle-btn:focus-visible { outline: 2px solid var(--app-accent, #ff7043); outline-offset: 2px; } .theme-toggle-btn.is-active { border-color: var(--theme-accent); color: var(--theme-accent); box-shadow: 0 0 0 2px rgba(255, 117, 0, 0.2); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 1px; } /* Shared modal controls migrated from inline colors */ .delete-api-filter-btn { background: var(--theme-surface-2); color: var(--theme-text-secondary); } .delete-api-filter-btn.is-active { background: var(--theme-accent); color: #fff; } .delete-api-category-btn { color: var(--theme-text-muted); } .delete-api-category-inhouse.is-active { color: var(--theme-success); background: var(--theme-success-soft); } .delete-api-category-vendor.is-active { color: var(--theme-accent); background: var(--theme-warning-soft); } .delete-api-row.is-selected { background: var(--theme-danger-soft) !important; } .delete-api-confirm-btn { background: var(--theme-danger); } html[data-theme-mode='night'] body, html[data-theme-mode='night'] .content-wrapper, html[data-theme-mode='night'] .rightContent, html[data-theme-mode='night'] .leftTopLayout .content-wrapper { background: var(--theme-surface-0) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .main-header, html[data-theme-mode='night'] .sidebar, html[data-theme-mode='night'] .leftNav { background: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .main-header .navbar-brand span, html[data-theme-mode='night'] .main-header .user-info span, html[data-theme-mode='night'] .main-header button, html[data-theme-mode='night'] .main-header svg { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .main-header .dropdown-user-info, html[data-theme-mode='night'] .dropdown-menu.dropdown-user-info, html[data-theme-mode='night'] .main-header .header-user-dropdown { background: var(--theme-surface-0) !important; border: 1px solid var(--theme-border) !important; color: var(--theme-text-primary) !important; } /* Header user trigger: avoid low-contrast secondary on name */ html[data-theme-mode='night'] .main-header .header-user-name { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .main-header .header-user-role { color: var(--theme-text-muted) !important; } .header-user-dropdown__link:hover { background-color: var(--theme-surface-2) !important; } /* Shared utility classes for dark-mode migration */ html[data-theme-mode='night'] .theme-panel, html[data-theme-mode='night'] .card, html[data-theme-mode='night'] .info-box, html[data-theme-mode='night'] .api-wizard-sidebar, html[data-theme-mode='night'] .api-wizard-main, html[data-theme-mode='night'] .api-wizard-step-container, html[data-theme-mode='night'] .api-wizard-step-content, html[data-theme-mode='night'] .api-wizard-footer, html[data-theme-mode='night'] .api-wizard-step-section, html[data-theme-mode='night'] .api-wizard-info-box, html[data-theme-mode='night'] .api-wizard-info-banner { background-color: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } /* API Builder: active step styling */ /* API Builder Step 3: schema cards generated by AI must stay readable in dark mode */ html[data-theme-mode='night'] .schema-card, html[data-app-theme='night'] .schema-card { background-color: var(--theme-surface-1) !important; border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .schema-card-title, html[data-app-theme='night'] .schema-card-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .schema-card-meta, html[data-app-theme='night'] .schema-card-meta { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .schema-card-action-btn, html[data-app-theme='night'] .schema-card-action-btn { background-color: var(--theme-surface-2) !important; border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .schema-card-export-list, html[data-app-theme='night'] .schema-card-export-list { background-color: var(--theme-surface-2) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .schema-card-export-item, html[data-app-theme='night'] .schema-card-export-item { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .schema-card-export-item:hover, html[data-app-theme='night'] .schema-card-export-item:hover { background-color: var(--theme-surface-1) !important; } /* API Builder Step 2 endpoint cards: readable in night mode */ html[data-theme-mode='night'] .endpoint-card, html[data-app-theme='night'] .endpoint-card { background-color: var(--theme-surface-1) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .endpoint-card-path, html[data-app-theme='night'] .endpoint-card-path { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .endpoint-card-summary, html[data-app-theme='night'] .endpoint-card-summary { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .schema-name { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .schema-type { color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .wizard-step.active { background-color: rgba(255, 139, 99, 0.14) !important; border-color: var(--theme-accent) !important; } html[data-theme-mode='night'] .wizard-step.active .wizard-step-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .wizard-step.active .wizard-step-description { color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] .api-wizard-step-section-title { color: var(--theme-text-primary) !important; border-bottom-color: var(--theme-border) !important; } html[data-theme-mode='night'] .api-wizard-container label, html[data-theme-mode='night'] .api-wizard-form-section label { color: var(--theme-text-secondary) !important; } /* API Wizard schema editor panel — readable labels on dark workspace (class matches legacy schema view) */ html[data-theme-mode='night'] .api-wizard-container .schema-editor-panel { background-color: var(--theme-surface-1) !important; border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .api-wizard-container .schema-editor-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .api-wizard-container .api-wizard-form-label { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .endpoint-editor-tabs { background-color: var(--theme-surface-2) !important; border-bottom-color: var(--theme-border) !important; } html[data-theme-mode='night'] .endpoint-editor-tab { color: var(--theme-text-secondary) !important; background-color: transparent !important; } html[data-theme-mode='night'] .endpoint-editor-tab:hover { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .endpoint-editor-tab.active { background-color: var(--theme-surface-0) !important; color: var(--theme-accent) !important; } /* API Builder: wizard sidebar Info / Tags / Servers / Schemas — night (fix peach active + white text) */ html[data-theme-mode='night'] .sidebar-section-item:hover { background-color: var(--theme-surface-2) !important; } html[data-theme-mode='night'] .sidebar-section-item.active { background-color: rgba(255, 139, 99, 0.16) !important; border-color: var(--theme-accent) !important; } html[data-theme-mode='night'] .sidebar-section-item-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .sidebar-section-item.active .sidebar-section-item-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .endpoint-editor-footer, html[data-app-theme='night'] .endpoint-editor-footer, html[data-app-theme='monitor'] .endpoint-editor-footer { background-color: var(--theme-surface-1) !important; border-top-color: var(--theme-border) !important; } /* Endpoint editor card: dark surface + readable labels (fixes white panel + light gray tokens in night) */ html[data-theme-mode='night'] .endpoint-editor-container, html[data-app-theme='night'] .endpoint-editor-container { background-color: var(--theme-surface-1) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .endpoint-editor-header, html[data-app-theme='night'] .endpoint-editor-header { background: var(--theme-surface-2) !important; border-bottom-color: var(--theme-border) !important; } html[data-theme-mode='night'] .endpoint-editor-header-title, html[data-app-theme='night'] .endpoint-editor-header-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .endpoint-editor-content, html[data-app-theme='night'] .endpoint-editor-content { background-color: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .endpoint-editor-tabs-wrapper::after, html[data-app-theme='night'] .endpoint-editor-tabs-wrapper::after { background: linear-gradient(to right, transparent, var(--theme-surface-1)) !important; } html[data-theme-mode='night'] .endpoint-editor-tab.active, html[data-app-theme='night'] .endpoint-editor-tab.active { background-color: var(--theme-surface-1) !important; } html[data-theme-mode='night'] .endpoint-editor-container label, html[data-app-theme='night'] .endpoint-editor-container label { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .endpoint-editor-container h2, html[data-theme-mode='night'] .endpoint-editor-container h3, html[data-theme-mode='night'] .endpoint-editor-container h4, html[data-app-theme='night'] .endpoint-editor-container h2, html[data-app-theme='night'] .endpoint-editor-container h3, html[data-app-theme='night'] .endpoint-editor-container h4 { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .endpoint-editor-container .request-body-control-label, html[data-app-theme='night'] .endpoint-editor-container .request-body-control-label { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .endpoint-editor-container .request-body-examples, html[data-app-theme='night'] .endpoint-editor-container .request-body-examples { border-color: var(--theme-border) !important; background-color: var(--theme-surface-1) !important; } html[data-theme-mode='night'] .endpoint-editor-container .request-body-examples-header, html[data-app-theme='night'] .endpoint-editor-container .request-body-examples-header { background-color: var(--theme-surface-2) !important; border-bottom-color: var(--theme-border) !important; } html[data-theme-mode='night'] .endpoint-editor-container .request-body-examples-title, html[data-app-theme='night'] .endpoint-editor-container .request-body-examples-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .endpoint-editor-container .request-body-example-tabs, html[data-app-theme='night'] .endpoint-editor-container .request-body-example-tabs { background-color: var(--theme-surface-1) !important; border-bottom-color: var(--theme-border) !important; } html[data-theme-mode='night'] .endpoint-editor-container .endpoint-editor-section-title, html[data-app-theme='night'] .endpoint-editor-container .endpoint-editor-section-title, html[data-app-theme='monitor'] .endpoint-editor-container .endpoint-editor-section-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .endpoint-editor-container .endpoint-editor-section-hint, html[data-app-theme='night'] .endpoint-editor-container .endpoint-editor-section-hint, html[data-app-theme='monitor'] .endpoint-editor-container .endpoint-editor-section-hint { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .endpoint-editor-container .endpoint-editor-callout--info, html[data-app-theme='night'] .endpoint-editor-container .endpoint-editor-callout--info, html[data-app-theme='monitor'] .endpoint-editor-container .endpoint-editor-callout--info { border-color: var(--theme-border) !important; background: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .endpoint-editor-container .endpoint-editor-callout-code, html[data-app-theme='night'] .endpoint-editor-container .endpoint-editor-callout-code, html[data-app-theme='monitor'] .endpoint-editor-container .endpoint-editor-callout-code { background: var(--theme-surface-0) !important; border-color: var(--theme-border) !important; color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .external-docs-editor__title, html[data-app-theme='night'] .external-docs-editor__title, html[data-app-theme='monitor'] .external-docs-editor__title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .external-docs-editor__label, html[data-app-theme='night'] .external-docs-editor__label, html[data-app-theme='monitor'] .external-docs-editor__label { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .endpoint-editor-footer__btn-cancel, html[data-app-theme='night'] .endpoint-editor-footer__btn-cancel, html[data-app-theme='monitor'] .endpoint-editor-footer__btn-cancel { background-color: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .endpoint-editor-footer__btn-save, html[data-app-theme='night'] .endpoint-editor-footer__btn-save, html[data-app-theme='monitor'] .endpoint-editor-footer__btn-save { color: #ffffff !important; } html[data-theme-mode='night'] .security-editor__scheme-row { background-color: var(--theme-surface-0) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .security-editor__empty { background-color: var(--theme-surface-2) !important; border-color: var(--theme-border) !important; color: var(--theme-text-muted) !important; } /* Advanced tab: inline scheme samples — override global .api-builder-page code (large padded blocks) */ .api-builder-page .security-editor code { display: inline !important; padding: 2px 8px !important; margin: 0 2px !important; font-size: var(--font-size-x-small) !important; line-height: 1.4 !important; background: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border: 1px solid var(--theme-border) !important; border-radius: 6px !important; overflow-x: visible !important; } .api-builder-page .security-editor strong { color: var(--theme-text-primary) !important; font-weight: 600 !important; } html[data-theme-mode='night'] .theme-heading, html[data-theme-mode='night'] h1, html[data-theme-mode='night'] h2, html[data-theme-mode='night'] h3, html[data-theme-mode='night'] h4, html[data-theme-mode='night'] .sidebar-section-title, html[data-theme-mode='night'] .api-wizard-step-title, html[data-theme-mode='night'] .api-wizard-step-section-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .theme-muted, html[data-theme-mode='night'] p, html[data-theme-mode='night'] label, html[data-theme-mode='night'] span, html[data-theme-mode='night'] .text-muted, html[data-theme-mode='night'] .wizard-step-description, html[data-theme-mode='night'] .sidebar-empty-text { color: var(--theme-text-secondary); } html[data-theme-mode='night'] .theme-count, html[data-theme-mode='night'] .sidebar-section-item-count, html[data-theme-mode='night'] .role-badge, html[data-theme-mode='night'] .badge { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] input, html[data-theme-mode='night'] select, html[data-theme-mode='night'] textarea, html[data-theme-mode='night'] .form-control, html[data-theme-mode='night'] .form-select, html[data-theme-mode='night'] .select2-selection { background-color: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] input::placeholder, html[data-theme-mode='night'] textarea::placeholder { color: var(--theme-text-muted) !important; } html[data-theme-mode='night'] table, html[data-theme-mode='night'] .table, html[data-theme-mode='night'] .table th, html[data-theme-mode='night'] .table td, html[data-theme-mode='night'] #users-table th, html[data-theme-mode='night'] #users-table td { background-color: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .table thead th, html[data-theme-mode='night'] #users-table thead th { background-color: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; } /* RUAP sticky Actions column — match table surfaces (responsive.css sets light defaults) */ html[data-theme-mode='night'] .ruap-users-page #users-table thead tr:first-child th:last-child, html[data-theme-mode='night'] .ruap-users-page #users-table thead .ruap-filter-row th:last-child { background-color: var(--theme-surface-2) !important; } html[data-theme-mode='night'] .ruap-users-page #users-table tbody td:last-child { background-color: var(--theme-surface-1) !important; } /* High-impact page roots */ html[data-theme-mode='night'] .document-generation-page, html[data-theme-mode='night'] .capability-view-page, html[data-theme-mode='night'] .project-view-page, html[data-theme-mode='night'] .ruap-users-page, html[data-theme-mode='night'] .api-wizard-container, html[data-theme-mode='night'] .api-builder-page { background: var(--theme-surface-0) !important; color: var(--theme-text-primary) !important; } /* API Builder page shell (Build Your API header + content) — night */ html[data-theme-mode='night'] .api-builder-header, html[data-theme-mode='night'] .api-builder-content, html[data-theme-mode='night'] .api-builder-tab-content { background: var(--theme-surface-0) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .api-builder-header { border-bottom: 1px solid var(--theme-border) !important; } html[data-theme-mode='night'] .api-builder-header-title { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .api-builder-header-subtitle { color: var(--theme-text-secondary) !important; } /* Monitor app theme: align API builder surfaces with dim workspace */ html[data-app-theme='monitor'] .api-builder-page, html[data-app-theme='monitor'] .api-builder-header, html[data-app-theme='monitor'] .api-builder-content, html[data-app-theme='monitor'] .api-builder-tab-content { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-app-theme='monitor'] .api-builder-header-title { color: var(--app-text) !important; } html[data-app-theme='monitor'] .api-builder-header-subtitle { color: var(--app-muted) !important; } html[data-theme-mode='night'] .document-generation-page > div, html[data-theme-mode='night'] .capability-view-page > div, html[data-theme-mode='night'] .project-view-page > div, html[data-theme-mode='night'] .ruap-users-page .card { background-color: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; } /* Modals + slide panels */ html[data-theme-mode='night'] .zoas-modal-overlay, html[data-theme-mode='night'] .zoas-slide-overlay { background-color: rgba(0, 0, 0, 0.65) !important; } html[data-theme-mode='night'] .zoas-modal-panel, html[data-theme-mode='night'] .zoas-slide-panel, html[data-theme-mode='night'] .summary-slide-panel, html[data-theme-mode='night'] .dropdown-menu, html[data-theme-mode='night'] .modal-content { background: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .summary-slide-panel * { color: var(--theme-text-secondary); border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .summary-slide-panel h2, html[data-theme-mode='night'] .summary-slide-panel h3, html[data-theme-mode='night'] .summary-slide-panel .metric-value, html[data-theme-mode='night'] .zoas-slide-panel h2, html[data-theme-mode='night'] .zoas-slide-panel h3, html[data-theme-mode='night'] .zoas-modal-panel h2, html[data-theme-mode='night'] .zoas-modal-panel h3 { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .summary-slide-panel button, html[data-theme-mode='night'] .zoas-slide-panel button, html[data-theme-mode='night'] .zoas-modal-panel button { border-color: var(--theme-border); } /* Modal secondary / cancel: readable label on dark surface */ html[data-theme-mode='night'] .zoas-modal-panel button.btn-secondary, html[data-theme-mode='night'] .zoas-modal-panel button[style*='background-color: #f5f5f5'], html[data-theme-mode='night'] .zoas-modal-panel button[style*='backgroundColor: #f5f5f5'], html[data-theme-mode='night'] .edit-user-modal-panel button.btn-secondary, html[data-theme-mode='night'] .add-user-modal-panel button.btn-secondary, html[data-theme-mode='night'] .edit-user-modal-panel button[style*='background: #'], html[data-theme-mode='night'] .add-user-modal-panel button[style*='background: #'] { background: var(--theme-surface-2) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .zoas-modal-panel .btn-outline-secondary, html[data-theme-mode='night'] .edit-user-modal-panel .btn-outline-secondary, html[data-theme-mode='night'] .add-user-modal-panel .btn-outline-secondary { color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; background: var(--theme-surface-2) !important; } html[data-theme-mode='night'] a { color: #8fc7ff; } /* RUAP: User Access slide panel (tokens; inline legacy colors overridden in night mode below) */ .user-view-slide-header { padding: 24px; border-bottom: 1px solid var(--theme-border); background: var(--theme-surface-0); position: sticky; top: 0; z-index: 10; } .user-view-slide-user-card { background: var(--theme-surface-2); border-radius: 8px; border: 1px solid var(--theme-border); } html[data-theme-mode='night'] .user-view-slide-panel, html[data-theme-mode='night'] .user-view-slide-panel .user-view-slide-header { background: var(--theme-surface-1) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border) !important; } /* RUAP User Access slide — morning / monitor: match app surfaces (not hardcoded white) */ html[data-app-theme='morning'] .user-view-slide-panel, html[data-app-theme='morning'] .user-view-slide-panel .user-view-slide-header { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-app-theme='monitor'] .user-view-slide-panel, html[data-app-theme='monitor'] .user-view-slide-panel .user-view-slide-header { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-app-theme='morning'] .user-view-slide-user-card, html[data-app-theme='monitor'] .user-view-slide-user-card { background: var(--app-bg) !important; border-color: var(--app-border) !important; } html[data-app-theme='morning'] .user-view-slide-panel .user-view-slide-identity-name, html[data-app-theme='morning'] .user-view-slide-panel .user-view-slide-identity-email, html[data-app-theme='monitor'] .user-view-slide-panel .user-view-slide-identity-name, html[data-app-theme='monitor'] .user-view-slide-panel .user-view-slide-identity-email { color: var(--app-text) !important; } html[data-theme-mode='night'] .user-view-slide-panel .user-view-slide-identity-name, html[data-theme-mode='night'] .user-view-slide-panel .user-view-slide-identity-email { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .user-view-slide-panel .user-view-slide-user-card, html[data-theme-mode='night'] .user-view-slide-panel [style*='background-color: #F5F5F5'], html[data-theme-mode='night'] .user-view-slide-panel [style*='backgroundColor: #F5F5F5'] { background: var(--theme-surface-2) !important; border-color: var(--theme-border) !important; } html[data-theme-mode='night'] .user-view-slide-panel h3, html[data-theme-mode='night'] .user-view-slide-panel .theme-heading { color: var(--theme-text-primary) !important; } html[data-theme-mode='night'] .user-view-slide-panel span[style*='color: #212121'], html[data-theme-mode='night'] .user-view-slide-panel span[style*='color: #424242'], html[data-theme-mode='night'] .user-view-slide-panel span[style*='color: #666'], html[data-theme-mode='night'] .user-view-slide-panel span[style*='color: #888'] { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .add-user-modal-panel label, html[data-theme-mode='night'] .add-user-modal-panel .form-label, html[data-theme-mode='night'] .edit-user-modal-panel label { color: var(--theme-text-primary) !important; } /* Hierarchy sidebar: expand/collapse chevron */ html[data-theme-mode='night'] .tree-toggle { color: var(--theme-text-secondary) !important; } html[data-theme-mode='night'] .tree-toggle:hover, html[data-theme-mode='night'] .tree-toggle:focus-visible { color: var(--theme-accent) !important; } html[data-theme-mode='night'] .delete-api-confirm-btn:disabled { opacity: 0.55; filter: grayscale(0.2); } html[data-theme-mode='night'] .delete-api-confirm-btn:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; } /* ============================================ * Admin Permissions Page — Night/Monitor dark-mode overrides * Keeps original inline colors for morning (light) theme; * overrides via !important for night and monitor themes. * ============================================ */ html[data-theme-mode='night'] .admin-permissions-page, html[data-app-theme='night'] .admin-permissions-page, html[data-app-theme='monitor'] .admin-permissions-page { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-theme-mode='night'] .admin-permissions-page h3, html[data-theme-mode='night'] .admin-permissions-page h4, html[data-app-theme='night'] .admin-permissions-page h3, html[data-app-theme='night'] .admin-permissions-page h4, html[data-app-theme='monitor'] .admin-permissions-page h3, html[data-app-theme='monitor'] .admin-permissions-page h4 { color: var(--app-text) !important; } html[data-theme-mode='night'] .admin-permissions-page label, html[data-app-theme='night'] .admin-permissions-page label, html[data-app-theme='monitor'] .admin-permissions-page label { color: var(--app-text) !important; } html[data-theme-mode='night'] .admin-permissions-page p, html[data-theme-mode='night'] .admin-permissions-page strong, html[data-app-theme='night'] .admin-permissions-page p, html[data-app-theme='night'] .admin-permissions-page strong, html[data-app-theme='monitor'] .admin-permissions-page p, html[data-app-theme='monitor'] .admin-permissions-page strong { color: var(--app-text) !important; } /* Info boxes — override light-blue (#E3F2FD) and blue border (#BBDEFB) */ html[data-theme-mode='night'] .admin-permissions-page .info-box, html[data-app-theme='night'] .admin-permissions-page .info-box, html[data-app-theme='monitor'] .admin-permissions-page .info-box { background: var(--app-surface) !important; border-color: var(--app-border) !important; } /* Card containers — override white bg and #BBDEFB border */ html[data-theme-mode='night'] .admin-permissions-page > div > div[style*='background-color'], html[data-theme-mode='night'] .admin-permissions-page div[style*='box-shadow'], html[data-app-theme='night'] .admin-permissions-page > div > div[style*='background-color'], html[data-app-theme='night'] .admin-permissions-page div[style*='box-shadow'], html[data-app-theme='monitor'] .admin-permissions-page > div > div[style*='background-color'], html[data-app-theme='monitor'] .admin-permissions-page div[style*='box-shadow'] { background: var(--app-surface) !important; border-color: var(--app-border) !important; } /* Role toggle cards — override #E8F5E9 (enabled) and white (disabled) */ html[data-theme-mode='night'] .admin-permissions-page div[style*='#E8F5E9'], html[data-app-theme='night'] .admin-permissions-page div[style*='#E8F5E9'] { background: rgba(76, 175, 80, 0.15) !important; } html[data-theme-mode='night'] .admin-permissions-page div[style*='#FFF3E0'], html[data-app-theme='night'] .admin-permissions-page div[style*='#FFF3E0'] { background: rgba(249, 168, 37, 0.15) !important; } html[data-app-theme='monitor'] .admin-permissions-page div[style*='#E8F5E9'] { background: rgba(76, 175, 80, 0.12) !important; } html[data-app-theme='monitor'] .admin-permissions-page div[style*='#FFF3E0'] { background: rgba(249, 168, 37, 0.12) !important; } /* Empty state — override #FAFAFA and #F5F5F5 */ html[data-theme-mode='night'] .admin-permissions-page div[style*='#FAFAFA'], html[data-theme-mode='night'] .admin-permissions-page div[style*='#F5F5F5'], html[data-app-theme='night'] .admin-permissions-page div[style*='#FAFAFA'], html[data-app-theme='night'] .admin-permissions-page div[style*='#F5F5F5'], html[data-app-theme='monitor'] .admin-permissions-page div[style*='#FAFAFA'], html[data-app-theme='monitor'] .admin-permissions-page div[style*='#F5F5F5'] { background: var(--app-bg) !important; } /* Form inputs, selects, textareas */ html[data-theme-mode='night'] .admin-permissions-page select, html[data-theme-mode='night'] .admin-permissions-page input, html[data-theme-mode='night'] .admin-permissions-page textarea, html[data-app-theme='night'] .admin-permissions-page select, html[data-app-theme='night'] .admin-permissions-page input, html[data-app-theme='night'] .admin-permissions-page textarea, html[data-app-theme='monitor'] .admin-permissions-page select, html[data-app-theme='monitor'] .admin-permissions-page input, html[data-app-theme='monitor'] .admin-permissions-page textarea { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } /* Cancel / secondary buttons */ html[data-theme-mode='night'] .admin-permissions-page button[style*='var(--color-white)'], html[data-app-theme='night'] .admin-permissions-page button[style*='var(--color-white)'], html[data-app-theme='monitor'] .admin-permissions-page button[style*='var(--color-white)'] { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } /* Links */ html[data-theme-mode='night'] .admin-permissions-page a, html[data-app-theme='night'] .admin-permissions-page a { color: #8fc7ff !important; } html[data-app-theme='monitor'] .admin-permissions-page a { color: var(--app-accent) !important; } /* Announcement type border colors — override pastel borders for dark bg */ html[data-theme-mode='night'] .admin-permissions-page div[style*='#BBDEFB'], html[data-app-theme='night'] .admin-permissions-page div[style*='#BBDEFB'], html[data-app-theme='monitor'] .admin-permissions-page div[style*='#BBDEFB'] { border-color: var(--app-border) !important; } html[data-theme-mode='night'] .admin-permissions-page div[style*='#C8E6C9'], html[data-app-theme='night'] .admin-permissions-page div[style*='#C8E6C9'], html[data-app-theme='monitor'] .admin-permissions-page div[style*='#C8E6C9'] { border-color: rgba(76, 175, 80, 0.4) !important; } html[data-theme-mode='night'] .admin-permissions-page div[style*='#FFCDD2'], html[data-app-theme='night'] .admin-permissions-page div[style*='#FFCDD2'], html[data-app-theme='monitor'] .admin-permissions-page div[style*='#FFCDD2'] { border-color: rgba(229, 57, 53, 0.4) !important; } html[data-theme-mode='night'] .admin-permissions-page div[style*='#FFF3E0'], html[data-app-theme='night'] .admin-permissions-page div[style*='#FFF3E0'], html[data-app-theme='monitor'] .admin-permissions-page div[style*='#FFF3E0'] { border-color: rgba(249, 168, 37, 0.4) !important; } @media (max-width: 768px) { .theme-toggle-group { margin-right: 2px; gap: 4px; } .theme-toggle-btn { width: 28px; height: 28px; } }