/* Status Page Admin – Atlassian Statuspage-style; default theme = light everywhere */ /* Theme variables: default = light; switch via data-theme on */ :root, html:not([data-theme]) { --bg: #f1f5f9; --surface: #ffffff; --surface-elevated: #f8fafc; --border: #e2e8f0; --border-subtle: rgba(0, 0, 0, 0.06); --text: #0f172a; --muted: #64748b; --accent: #2563eb; --accent-rgb: 37, 99, 235; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-radius: 16px; --card-radius-sm: 12px; --appbar-height: 56px; --drawer-width: 240px; --drawer-collapsed-width: 68px; --section-gap: 24px; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); --admin-accent-glow: 0 8px 32px rgba(var(--accent-rgb), 0.18); --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } html[data-theme="light"] { --bg: #f1f5f9; --surface: #ffffff; --surface-elevated: #f8fafc; --border: #e2e8f0; --text: #0f172a; --muted: #64748b; --accent: #2563eb; --accent-rgb: 37, 99, 235; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } html[data-theme="dark"] { --bg: #0f172a; --surface: #1e293b; --surface-elevated: #334155; --border: #475569; --text: #f1f5f9; --muted: #94a3b8; --accent: #38bdf8; --accent-rgb: 56,189,248; --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --card-elevation: 0 4px 20px rgba(0,0,0,0.35); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.45); } html[data-theme="high-contrast"] { --bg: #000; --surface: #1a1a1a; --surface-elevated: #262626; --border: #fff; --text: #fff; --muted: #ccc; --accent: #00b4ff; --accent-rgb: 0,180,255; --success: #00ff88; --warning: #ffcc00; --danger: #ff4444; } /* Nord — dark + light variants */ html[data-theme="nord"], html[data-theme="dark-nord"] { --bg: #2e3440; --surface: #3b4252; --surface-elevated: #434c5e; --border: #4c566a; --text: #eceff4; --muted: #d8dee9; --accent: #88c0d0; --accent-rgb: 136,192,208; --success: #a3be8c; --warning: #ebcb8b; --danger: #bf616a; } html[data-theme="light-nord"] { --bg: #f5f7fa; --surface: #ffffff; --surface-elevated: #eceff4; --border: #d8dee9; --text: #2e3440; --muted: #5e6a7a; --accent: #5e81ac; --accent-rgb: 94,129,172; --success: #16a34a; --warning: #ca8a04; --danger: #bf616a; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Sand — light + dark variants */ html[data-theme="sand"], html[data-theme="light-sand"] { --bg: #faf8f5; --surface: #ffffff; --surface-elevated: #f5f0e8; --border: #e7dfd2; --text: #3d3830; --muted: #7a7268; --accent: #c4713b; --accent-rgb: 196,113,59; --success: #4d7c59; --warning: #b8860b; --danger: #b91c1c; } html[data-theme="dark-sand"] { --bg: #1c1917; --surface: #292524; --surface-elevated: #44403c; --border: #57534e; --text: #fafaf9; --muted: #d6d3d1; --accent: #d97706; --accent-rgb: 217,119,6; --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --card-elevation: 0 4px 20px rgba(0,0,0,0.35); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.45); } /* Ocean */ html[data-theme="ocean"], html[data-theme="dark-ocean"] { --bg: #0a1628; --surface: #0f2744; --surface-elevated: #143055; --border: #1e4976; --text: #e0f2fe; --muted: #7dd3fc; --accent: #38bdf8; --accent-rgb: 56,189,248; --success: #2dd4bf; --warning: #fbbf24; --danger: #f87171; } html[data-theme="light-ocean"] { --bg: #f0f9ff; --surface: #ffffff; --surface-elevated: #e0f2fe; --border: #bae6fd; --text: #0c4a6e; --muted: #0369a1; --accent: #0284c7; --accent-rgb: 2,132,199; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Forest */ html[data-theme="forest"], html[data-theme="dark-forest"] { --bg: #0d1f0d; --surface: #142814; --surface-elevated: #1a331a; --border: #2d4a2d; --text: #dcfce7; --muted: #86efac; --accent: #4ade80; --accent-rgb: 74,222,128; --success: #22c55e; --warning: #eab308; --danger: #ef4444; } html[data-theme="light-forest"] { --bg: #f0fdf4; --surface: #ffffff; --surface-elevated: #dcfce7; --border: #bbf7d0; --text: #14532d; --muted: #166534; --accent: #16a34a; --accent-rgb: 22,163,74; --success: #15803d; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Sunset */ html[data-theme="sunset"], html[data-theme="dark-sunset"] { --bg: #1c0a0a; --surface: #2d1515; --surface-elevated: #3d1f1f; --border: #5c2a2a; --text: #fef2f2; --muted: #fca5a5; --accent: #fb923c; --accent-rgb: 251,146,60; --success: #4ade80; --warning: #facc15; --danger: #f87171; } html[data-theme="light-sunset"] { --bg: #fff7ed; --surface: #ffffff; --surface-elevated: #ffedd5; --border: #fed7aa; --text: #7c2d12; --muted: #c2410c; --accent: #ea580c; --accent-rgb: 234,88,12; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Slate */ html[data-theme="slate"], html[data-theme="dark-slate"] { --bg: #1e293b; --surface: #334155; --surface-elevated: #475569; --border: #64748b; --text: #f1f5f9; --muted: #94a3b8; --accent: #818cf8; --accent-rgb: 129,140,248; --success: #34d399; --warning: #fbbf24; --danger: #f87171; } html[data-theme="light-slate"] { --bg: #f8fafc; --surface: #ffffff; --surface-elevated: #f1f5f9; --border: #e2e8f0; --text: #0f172a; --muted: #64748b; --accent: #6366f1; --accent-rgb: 99,102,241; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Midnight */ html[data-theme="midnight"], html[data-theme="dark-midnight"] { --bg: #020617; --surface: #0f172a; --surface-elevated: #1e293b; --border: #334155; --text: #e2e8f0; --muted: #64748b; --accent: #a78bfa; --accent-rgb: 167,139,250; --success: #34d399; --warning: #facc15; --danger: #f87171; } html[data-theme="light-midnight"] { --bg: #f5f3ff; --surface: #ffffff; --surface-elevated: #ede9fe; --border: #ddd6fe; --text: #3730a3; --muted: #6d28d9; --accent: #7c3aed; --accent-rgb: 124,58,237; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Lime */ html[data-theme="lime"], html[data-theme="dark-lime"] { --bg: #0f1419; --surface: #1a2332; --surface-elevated: #243044; --border: #3d4f5f; --text: #ecfdf5; --muted: #a7f3d0; --accent: #84cc16; --accent-rgb: 132,204,22; --success: #65a30d; --warning: #eab308; --danger: #ef4444; } html[data-theme="light-lime"] { --bg: #f7fee7; --surface: #ffffff; --surface-elevated: #ecfccb; --border: #d9f99d; --text: #3f6212; --muted: #4d7c0f; --accent: #65a30d; --accent-rgb: 101,163,13; --success: #15803d; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Rose */ html[data-theme="rose"], html[data-theme="dark-rose"] { --bg: #1c1917; --surface: #292524; --surface-elevated: #44403c; --border: #57534e; --text: #fef7ed; --muted: #fdba74; --accent: #fb7185; --accent-rgb: 251,113,133; --success: #4ade80; --warning: #fbbf24; --danger: #f87171; } html[data-theme="light-rose"] { --bg: #fff1f2; --surface: #ffffff; --surface-elevated: #ffe4e6; --border: #fecdd3; --text: #881337; --muted: #be123c; --accent: #e11d48; --accent-rgb: 225,29,72; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Grape */ html[data-theme="grape"], html[data-theme="dark-grape"] { --bg: #1a0a2e; --surface: #2d1b4e; --surface-elevated: #3b2763; --border: #5b21b6; --text: #f3e8ff; --muted: #d8b4fe; --accent: #a855f7; --accent-rgb: 168,85,247; --success: #4ade80; --warning: #fbbf24; --danger: #fb7185; --card-elevation: 0 4px 20px rgba(0,0,0,0.4); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.5); } html[data-theme="light-grape"] { --bg: #faf5ff; --surface: #ffffff; --surface-elevated: #f3e8ff; --border: #e9d5ff; --text: #581c87; --muted: #7e22ce; --accent: #9333ea; --accent-rgb: 147,51,234; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Ember */ html[data-theme="ember"], html[data-theme="dark-ember"] { --bg: #1c0f0a; --surface: #292018; --surface-elevated: #3f2e22; --border: #7c2d12; --text: #fff7ed; --muted: #fdba74; --accent: #f97316; --accent-rgb: 249,115,22; --success: #4ade80; --warning: #facc15; --danger: #ef4444; --card-elevation: 0 4px 20px rgba(0,0,0,0.38); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.48); } html[data-theme="light-ember"] { --bg: #fff7ed; --surface: #ffffff; --surface-elevated: #ffedd5; --border: #fed7aa; --text: #431407; --muted: #9a3412; --accent: #ea580c; --accent-rgb: 234,88,12; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } /* Steel */ html[data-theme="steel"], html[data-theme="dark-steel"] { --bg: #18181b; --surface: #27272a; --surface-elevated: #3f3f46; --border: #52525b; --text: #fafafa; --muted: #a1a1aa; --accent: #94a3b8; --accent-rgb: 148,163,184; --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --card-elevation: 0 4px 20px rgba(0,0,0,0.35); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.45); } html[data-theme="light-steel"] { --bg: #f4f4f5; --surface: #ffffff; --surface-elevated: #e4e4e7; --border: #d4d4d8; --text: #18181b; --muted: #71717a; --accent: #52525b; --accent-rgb: 82,82,91; --success: #16a34a; --warning: #ca8a04; --danger: #dc2626; --card-elevation: 0 4px 20px rgba(0,0,0,0.08); --card-elevation-hover: 0 12px 32px rgba(0,0,0,0.12); } @media (prefers-reduced-motion: reduce) { .admin-layout, .admin-layout * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .admin-layout { font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .admin-layout .admin-page-title { font-family: var(--font-display); } /* Page headers – clearer hierarchy */ .admin-page-header { padding: 1rem 1.25rem; background: linear-gradient( 145deg, var(--surface) 0%, color-mix(in srgb, var(--surface-elevated) 92%, rgba(var(--accent-rgb), 0.06)) 100% ); border: 1px solid color-mix(in srgb, var(--border) 92%, rgba(var(--accent-rgb), 0.12)); border-radius: var(--card-radius); box-shadow: var(--card-elevation), var(--admin-accent-glow); } .admin-page-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin: 0 0 0.5rem; border-left: 4px solid var(--accent); padding-left: 0.75rem; } .admin-page-lead { font-size: 0.95rem; line-height: 1.5; max-width: 52rem; } .admin-page-lead code { background: var(--surface-elevated); padding: 0.15rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); color: var(--accent); font-weight: 600; } /* Card-style grid: avoid overflow:hidden — it breaks header/filter/data column sync in Chromium */ .admin-data-grid, .admin-tenants-grid { border-radius: var(--card-radius-sm) !important; overflow-x: auto; overflow-y: visible; box-shadow: var(--card-elevation) !important; border: 1px solid var(--border) !important; width: 100%; max-width: 100%; min-width: 0; } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: 400; font-style: normal; font-size: 1rem; line-height: 1; letter-spacing: normal; display: inline-flex; align-items: center; justify-content: center; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; } .admin-layout .enterprise-appbar .material-symbols-outlined { font-size: 1.125rem !important; } .admin-layout .appbar-menu-btn .material-symbols-outlined { font-size: 1.25rem !important; color: rgb(var(--accent-rgb)); } .admin-layout .drawer-collapse-btn .material-symbols-outlined { font-size: 1rem !important; } .admin-layout .drawer-nav .nav-link-icon.material-symbols-outlined { font-size: 1rem !important; } .admin-layout .user-menu-dropdown .material-symbols-outlined { font-size: 0.9rem !important; } /* Focus rings — accent, keyboard users (WCAG-friendly) */ .admin-layout .appbar-menu-btn:focus-visible, .admin-layout .appbar-link:focus-visible, .admin-layout .drawer-nav .nav-link:focus-visible, .admin-layout .drawer-collapse-btn:focus-visible, .admin-layout .user-menu-btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.75); outline-offset: 2px; } .admin-layout .btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.85); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2); } .admin-theme-swatch { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--border); padding: 0; cursor: pointer; background: var(--swatch, #ccc); flex-shrink: 0; } .admin-theme-swatch--active { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 1px var(--surface); } .admin-layout .user-menu-dropdown .admin-theme-swatch--default { background: linear-gradient(135deg, #f1f5f9 50%, #1e293b 50%); } .admin-layout .user-menu-dropdown .admin-appearance-pill { font-size: 0.6875rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; line-height: 1.2; } .admin-layout .user-menu-dropdown .admin-appearance-pill:hover:not(:disabled) { background: var(--border); } .admin-layout .user-menu-dropdown .admin-appearance-pill:disabled { opacity: 0.45; cursor: not-allowed; } .admin-layout .user-menu-dropdown .admin-appearance-pill--active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35); color: var(--accent); } /* DevExpress grid icons – scope tightly; forcing ALL svg to 14px breaks column/header/filter alignment */ .admin-layout .dxbl-grid .dxbl-checkbox .dxbl-checkbox-box { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; } .admin-layout .dxbl-grid .dxbl-checkbox svg, .admin-layout .dxbl-grid .dxbl-checkbox .dxbl-icon, .admin-layout .dxbl-grid .dxbl-edit-cell-button svg, .admin-layout .dxbl-grid .dxbl-command-edit-cell svg { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; flex-shrink: 0; } .admin-layout .dxbl-grid .dxbl-edit-cell-button svg, .admin-layout .dxbl-grid .dxbl-command-edit-cell svg { color: var(--accent) !important; fill: var(--accent) !important; } .admin-layout .dxbl-grid .dxbl-data-cell .dxbl-checkbox svg, .admin-layout .dxbl-grid .dxbl-data-cell .dxbl-checkbox .dxbl-icon { color: var(--muted) !important; fill: var(--muted) !important; } /* Boolean/check column – green checkmark */ .admin-layout .dxbl-grid .dxbl-data-cell .dxbl-checkbox-checked svg, .admin-layout .dxbl-grid .dxbl-data-cell .dxbl-checkbox-checked .dxbl-icon { color: var(--success) !important; fill: var(--success) !important; } .admin-layout .dxbl-grid .dxbl-headers-area, .admin-layout .dxbl-grid .dxbl-header-cell { color: var(--text) !important; } /* Full-width layout: scroll viewer + tables fill container so colgroups stay aligned */ .admin-layout .dxbl-grid.admin-data-grid .dxbl-scroll-viewer, .admin-layout .dxbl-grid.admin-tenants-grid .dxbl-scroll-viewer { width: 100%; max-width: 100%; } .admin-layout .dxbl-grid.admin-data-grid .dxbl-grid-table, .admin-layout .dxbl-grid.admin-tenants-grid .dxbl-grid-table { width: 100%; } /* Filter row editors respect column width */ .admin-layout .dxbl-grid .dxbl-grid-filter-row td { vertical-align: middle; } .admin-layout .dxbl-grid .dxbl-grid-filter-row input, .admin-layout .dxbl-grid .dxbl-grid-filter-row select { max-width: 100%; min-width: 0; box-sizing: border-box; } /* Pager / status strip */ .admin-layout .dxbl-grid .dxbl-pager, .admin-layout .dxbl-grid .dxbl-grid-pager { border-top: 1px solid var(--border); padding: 0.5rem 0.75rem; background: var(--surface-elevated); color: var(--muted); font-size: 0.8125rem; } /* Toolbar / header / filter icons — cap size when theme CSS order fails or SVGs lack intrinsic bounds */ .admin-layout .dxbl-grid svg { max-width: 1.125rem !important; max-height: 1.125rem !important; width: 1.125rem !important; height: 1.125rem !important; flex-shrink: 0; vertical-align: middle; box-sizing: content-box; } .admin-layout .dxbl-grid .dxbl-checkbox svg, .admin-layout .dxbl-grid .dxbl-checkbox .dxbl-icon { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; } /* Keep screen-reader-only grid summary hidden (must not inherit visible layout) */ .admin-layout .dxbl-grid .dxbl-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* App bar – theme-aware (PatchManager style) */ .admin-layout .enterprise-appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; min-height: var(--appbar-height); padding: 0 16px; overflow: visible; background: color-mix(in srgb, var(--surface) 82%, transparent) !important; backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 8px 32px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(var(--accent-rgb), 0.05); color: var(--text); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px; } /* Accent hairline under app bar — reads as “product chrome” without adding height */ .admin-layout .enterprise-appbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; background: linear-gradient( 90deg, transparent 0%, rgba(var(--accent-rgb), 0.45) 18%, rgba(var(--accent-rgb), 0.85) 50%, rgba(var(--accent-rgb), 0.4) 82%, transparent 100% ); opacity: 0.9; } @media (max-width: 720px) { .admin-layout .enterprise-appbar { padding-bottom: 8px; } .admin-layout .admin-global-search { order: 5; flex: 1 1 100%; max-width: none; } } .admin-layout .appbar-brand-block { display: flex; flex-direction: column; line-height: 1.25; padding: 4px 0; } .admin-layout .appbar-brand-primary { font-family: var(--font-display); color: var(--text) !important; font-weight: 800 !important; font-size: 1.02rem !important; letter-spacing: -0.03em; background: linear-gradient( 135deg, var(--text) 0%, color-mix(in srgb, var(--text) 88%, var(--accent)) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* High-contrast / themes where gradient text is illegible */ html[data-theme="high-contrast"] .admin-layout .appbar-brand-primary { background: none; -webkit-text-fill-color: var(--text); color: var(--text) !important; } .admin-layout .appbar-brand-secondary { color: var(--muted) !important; font-size: 0.8125rem !important; } .admin-layout .appbar-menu-btn { width: 40px; height: 40px; border: none; background: transparent; color: var(--text); border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .admin-layout .appbar-menu-btn:hover { background: var(--border); } .admin-layout .appbar-spacer { flex: 1; } .admin-layout .appbar-link { color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 10px; font-weight: 500; font-size: 0.875rem; transition: background 0.2s ease, color 0.2s ease; } .admin-layout .appbar-link:hover { background: var(--border); color: var(--text); } .admin-layout .user-menu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 12px; border: none; background: transparent; color: var(--text); font: inherit; cursor: pointer; text-decoration: none; transition: background 0.2s ease; } .admin-layout .user-menu-btn:hover { background: var(--border); } .admin-layout .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.3); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; } .admin-layout .user-menu-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 220px; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); z-index: 1100; overflow: hidden; } .admin-layout .user-menu-dropdown .theme-item, .admin-layout .user-menu-dropdown .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: none; color: var(--text); font: inherit; font-size: 0.875rem; cursor: pointer; text-align: left; transition: background 0.2s ease; } .admin-layout .user-menu-dropdown .theme-item:hover, .admin-layout .user-menu-dropdown .menu-item:hover { background: var(--border); } .admin-layout .user-menu-dropdown .menu-item.signout { color: var(--danger); } .admin-layout .user-menu-dropdown .theme-section-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 8px 14px 4px; } .admin-layout .user-menu-dropdown-header { padding: 12px 14px; } .admin-layout .user-menu-wrap { position: relative; } /* Compact profile menu — fits on one viewport without scrolling */ .admin-layout .user-menu-dropdown--compact { min-width: 268px; max-width: min(100vw - 16px, 320px); } .admin-layout .user-menu-dropdown--compact .user-menu-dropdown-header { padding: 8px 12px; } .admin-layout .user-menu-dropdown-divider { height: 1px; background: var(--border); margin: 0; } .admin-layout .user-menu-dropdown-divider--spaced { margin: 4px 0; } .admin-layout .user-menu-dropdown--compact .theme-section-label { padding: 4px 12px 2px; font-size: 0.625rem; } .admin-layout .user-menu-dropdown--compact .user-menu-hint { font-size: 0.6875rem !important; line-height: 1.25; } .admin-layout .user-menu-dropdown--compact .user-menu-form-check { min-height: 0; padding-top: 0; } .admin-layout .user-menu-dropdown--compact .user-menu-form-check .form-check-input { margin-top: 0.2rem; } .admin-layout .user-menu-dropdown--compact .theme-item, .admin-layout .user-menu-dropdown--compact .menu-item { padding: 5px 10px; font-size: 0.75rem; gap: 6px; min-height: 0; } .admin-layout .user-menu-dropdown--compact .menu-item-icon { font-size: 1rem !important; flex-shrink: 0; } .admin-layout .user-menu-dropdown--compact .admin-theme-swatch { width: 18px; height: 18px; border-radius: 6px; border-width: 1px; } .admin-layout .admin-theme-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } .admin-layout .admin-theme-menu-grid .theme-item { min-width: 0; } /* Drawer – theme-aware */ .admin-layout .enterprise-drawer { position: fixed; top: var(--appbar-height); left: 0; bottom: 0; width: var(--drawer-width); z-index: 1020; background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.04) 0%, transparent 38%), var(--surface) !important; border-right: 1px solid var(--border); box-shadow: 4px 0 28px rgba(15, 23, 42, 0.08), inset -1px 0 0 rgba(var(--accent-rgb), 0.06); transition: width 0.2s ease, transform 0.2s ease; overflow: hidden; } .admin-layout .enterprise-drawer.collapsed { width: var(--drawer-collapsed-width); } .admin-layout .enterprise-drawer.collapsed .nav-section-label, .admin-layout .enterprise-drawer.collapsed .nav-link-text { display: none !important; } .admin-layout .enterprise-drawer.collapsed .drawer-nav .nav-link { justify-content: center; padding-left: 0; } .admin-layout .drawer-content-inner { display: flex; flex-direction: column; height: 100%; padding: 8px 0; } .admin-layout .drawer-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 8px; } .admin-layout .drawer-nav-section { margin-bottom: 4px; } .admin-layout .nav-section-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 10px 12px 4px 14px; line-height: 1.2; border-left: 3px solid rgba(var(--accent-rgb), 0.35); margin-left: 8px; } .admin-layout .drawer-nav .nav-link { display: flex; align-items: center; min-height: 40px; padding: 0 12px; margin: 2px 4px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: 0.875rem; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; box-sizing: border-box; } .admin-layout .drawer-nav .nav-link:hover { background: var(--border); color: var(--text); transform: translateX(2px); } .admin-layout .drawer-nav .nav-link.active { background: linear-gradient( 90deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.1) 100% ); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.28), inset 3px 0 0 rgba(var(--accent-rgb), 0.85); } .admin-layout .drawer-nav .nav-link .nav-link-icon { width: 24px; min-width: 24px; margin-right: 10px; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; opacity: 1; } /* Semantic icon hues — sidebar, workspace hub, integration cards, sub-pages */ .admin-layout .drawer-nav .nav-link-icon--home, .admin-icon--home { color: #0ea5e9; } .admin-layout .drawer-nav .nav-link-icon--explore, .admin-icon--explore { color: #8b5cf6; } .admin-layout .drawer-nav .nav-link-icon--dashboard, .admin-icon--dashboard { color: #6366f1; } .admin-layout .drawer-nav .nav-link-icon--domain, .admin-icon--domain { color: #3b82f6; } .admin-layout .drawer-nav .nav-link-icon--sync, .admin-icon--sync { color: #06b6d4; } .admin-layout .drawer-nav .nav-link-icon--modules, .admin-icon--modules { color: #d97706; } .admin-layout .drawer-nav .nav-link-icon--layers, .admin-icon--layers { color: #0d9488; } .admin-layout .drawer-nav .nav-link-icon--incidents, .admin-icon--incidents { color: #e11d48; } .admin-layout .drawer-nav .nav-link-icon--maintenance, .admin-icon--maintenance { color: #ea580c; } .admin-layout .drawer-nav .nav-link-icon--subscribers, .admin-icon--subscribers { color: #db2777; } .admin-layout .drawer-nav .nav-link-icon--webhooks, .admin-icon--webhooks { color: #65a30d; } .admin-layout .drawer-nav .nav-link-icon--apikeys, .admin-icon--apikeys { color: #ca8a04; } .admin-layout .drawer-nav .nav-link-icon--audit, .admin-icon--audit { color: #059669; } .admin-layout .drawer-nav .nav-link-icon--jobs, .admin-icon--jobs { color: #9333ea; } .admin-layout .drawer-nav .nav-link-icon--enterprise, .admin-icon--enterprise { color: #7c3aed; } /* Workspace hub section headings */ .admin-icon--section-config { color: #6366f1; } .admin-icon--section-operations { color: #e11d48; } .admin-icon--section-engagement { color: #ea580c; } .admin-icon--section-security { color: #475569; } .admin-icon--section-directory { color: #0d9488; } .admin-icon--section-enterprise { color: #7c3aed; } /* Integrations grid */ .admin-icon--datadog { color: #632ca7; } .admin-icon--jira { color: #2684ff; } .admin-icon--opsgenie { color: #00a9e0; } .admin-icon--customapi { color: #d97706; } /* Component / Datadog UI */ .admin-icon--monitor { color: #7c3aed; } .admin-icon--slo { color: #0d9488; } .admin-icon--edit { color: #6366f1; } .admin-icon--delete { color: #dc2626; } .admin-layout .btn-outline-primary .material-symbols-outlined.admin-icon--edit { color: #6366f1 !important; } .admin-layout .btn-outline-danger .material-symbols-outlined.admin-icon--delete { color: #dc2626 !important; } /* Workspace header meta */ .admin-icon--dns { color: #6366f1; } .admin-icon--web { color: #10b981; } .admin-icon--public { color: #0891b2; } /* Hub toolbar (outline buttons override Bootstrap primary blue on icons) */ .workspace-hub-actions .btn-outline-primary .material-symbols-outlined.admin-icon--unlock { color: #8b5cf6 !important; } .workspace-hub-actions .btn-outline-primary .material-symbols-outlined.admin-icon--palette { color: #db2777 !important; } .workspace-hub-actions .btn-outline-secondary .material-symbols-outlined.admin-icon--swap { color: #0891b2 !important; } .admin-layout .drawer-nav .nav-link.active .nav-link-icon[class*="nav-link-icon--"] { filter: saturate(1.15) brightness(0.95); } .admin-layout .drawer-collapse-row { padding: 8px; border-top: 1px solid var(--border); flex-shrink: 0; display: flex; justify-content: flex-end; } .admin-layout .enterprise-drawer.collapsed .drawer-collapse-row { justify-content: center; } .admin-layout .drawer-collapse-btn { width: 36px; height: 36px; border: none; border-radius: 10px; background: linear-gradient( 145deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, color-mix(in srgb, var(--accent) 55%, #1e293b) 100% ); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, filter 0.2s ease; box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.35); } .admin-layout .drawer-collapse-btn:hover { filter: brightness(1.08); transform: scale(1.05); } /* Main content – theme-aware */ .admin-layout .enterprise-main { margin-left: var(--drawer-width); margin-top: var(--appbar-height); min-height: calc(100vh - var(--appbar-height)); background: var(--bg) !important; position: relative; padding: calc(var(--section-gap) + 16px) 24px 32px; } .admin-layout .enterprise-main::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 100% 55% at 50% -12%, rgba(var(--accent-rgb), 0.11) 0%, transparent 52%), radial-gradient(ellipse 65% 45% at 100% 15%, rgba(var(--accent-rgb), 0.06) 0%, transparent 48%), radial-gradient(ellipse 50% 40% at 0% 60%, rgba(var(--accent-rgb), 0.04) 0%, transparent 45%); } .admin-layout .enterprise-main .main-container { position: relative; z-index: 1; } .admin-layout .enterprise-drawer.collapsed ~ .enterprise-main { margin-left: var(--drawer-collapsed-width); } .admin-layout .enterprise-drawer.hidden { width: 0 !important; min-width: 0 !important; overflow: hidden; border-right-width: 0; transform: translateX(-100%); } .admin-layout .enterprise-drawer.hidden ~ .enterprise-main { margin-left: 0; } .admin-layout .main-container { max-width: min(1680px, 94vw); margin: 0 auto; width: 100%; } .admin-layout .page-flow > * + * { margin-top: var(--section-gap); } /* Cards – theme-aware */ .admin-layout .mud-paper, .admin-layout .card, .admin-layout .dxbl-grid { border-radius: var(--card-radius) !important; box-shadow: var(--card-elevation) !important; border: 1px solid var(--border) !important; background: var(--surface-elevated) !important; color: var(--text) !important; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .admin-layout .mud-paper:hover, .admin-layout .card:hover { box-shadow: var(--card-elevation-hover) !important; border-color: rgba(var(--accent-rgb), 0.25) !important; } /* Buttons – accent */ .admin-layout .btn-primary { background: var(--accent) !important; border: none !important; color: #fff !important; font-weight: 600 !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .admin-layout .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); } .admin-layout .btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.45), 0 4px 14px rgba(var(--accent-rgb), 0.35) !important; } .admin-layout h1, .admin-layout h2, .admin-layout .page-title { color: var(--text) !important; font-weight: 600 !important; letter-spacing: -0.01em; } .admin-layout .content, .admin-layout article.content { color: var(--text); padding: 0; } /* DevExpress grid – subtle Gentrack tint + width */ .admin-layout .dxbl-grid { background: var(--surface) !important; width: 100%; max-width: 100%; min-width: 0; } /* Error boundary */ .admin-layout .blazor-error-boundary { background: #1e293b; color: #f87171; padding: 1rem 1.5rem; border-radius: var(--card-radius-sm); border: 1px solid rgba(248, 113, 113, 0.3); } #blazor-error-ui { background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 8px 16px; border-radius: 8px; } /* QuickGrid admin tables – avoid stretched empty rows; Datadog-style SLO browse */ .admin-layout .admin-quick-grid-wrap { background: var(--surface); } .admin-layout .admin-qg-table { --tbl-border: var(--border); border-collapse: separate; border-spacing: 0; } .admin-layout .admin-qg-table thead th { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted) !important; border-bottom: 1px solid var(--tbl-border) !important; background: var(--surface-elevated) !important; } .admin-layout .admin-qg-table tbody tr { border-bottom: 1px solid var(--border-subtle); } .admin-layout .admin-qg-table tbody tr:last-child { border-bottom: none; } .admin-layout .admin-qg-table td, .admin-layout .admin-qg-table th { padding: 0.65rem 0.75rem !important; vertical-align: middle !important; } .admin-layout .slo-cell code { font-size: 0.75rem; } .slo-summary-cards .slo-card { border: 1px solid var(--border); min-height: 4.5rem; display: flex; flex-direction: column; justify-content: center; } .slo-card--breach { background: linear-gradient(180deg, #fef2f2 0%, #fff 100%); color: #991b1b; } .slo-card--warn { background: linear-gradient(180deg, #fffbeb 0%, #fff 100%); color: #92400e; } .slo-card--ok { background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%); color: #166534; } .slo-card--nodata { background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); color: #64748b; } .slo-card--total { background: linear-gradient(180deg, #eff6ff 0%, #fff 100%); color: #1e40af; } .slo-browse-table thead th { position: sticky; top: 0; z-index: 1; } .slo-eb-track { height: 6px; background: rgba(0, 0, 0, 0.08); min-width: 48px; max-width: 100px; } .slo-eb-fill { height: 100%; min-width: 2px; transition: width 0.2s ease; } /* Workspace home — single-page hub */ .workspace-hub-actions .btn .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .workspace-hub-section-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; color: var(--muted); margin: 0 0 0.85rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); } .workspace-hub-section-icon { font-size: 1.35rem !important; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .workspace-hub-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 6px; background: var(--surface-elevated); border: 1px solid var(--border); color: var(--muted); } .workspace-hub-card { display: flex; flex-direction: row; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.1rem !important; border-radius: var(--card-radius-sm) !important; background: var(--surface) !important; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .workspace-hub-card:hover { box-shadow: var(--card-elevation-hover) !important; border-color: rgba(var(--accent-rgb), 0.45) !important; transform: translateY(-2px); } .workspace-hub-card--muted .workspace-hub-card-icon { opacity: 0.85; } .workspace-hub-card-icon { flex-shrink: 0; font-size: 2.25rem !important; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .workspace-hub-card-text { min-width: 0; } .workspace-hub-card-title { font-weight: 700; font-size: 1.05rem; color: var(--text); margin-bottom: 0.25rem; } .workspace-hub-card-desc { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); margin: 0; } /* Page nav: breadcrumbs + quick links (all admin Blazor pages) */ .admin-page-nav-strip { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem 1.25rem; padding: 0.35rem 0 1rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--border); } .admin-page-nav-strip .admin-breadcrumb { flex: 1 1 12rem; min-width: 0; } .admin-breadcrumb .breadcrumb-ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.25rem; list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--muted); } .admin-breadcrumb .breadcrumb-li { display: inline-flex; align-items: center; } .admin-breadcrumb .breadcrumb-li a { color: #0d9488; font-weight: 600; text-decoration: none; } .admin-breadcrumb .breadcrumb-li a:hover { text-decoration: underline; color: #0f766e; } .admin-breadcrumb .breadcrumb-li a:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; border-radius: 2px; } .admin-breadcrumb .breadcrumb-li span[aria-current="page"] { color: var(--text); font-weight: 600; } .admin-breadcrumb .breadcrumb-sep { display: inline-flex; align-items: center; list-style: none; margin: 0; padding: 0; } .admin-breadcrumb .breadcrumb-sep-icon { font-size: 1rem !important; color: #c084fc; opacity: 0.95; } .admin-nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: flex-end; flex-shrink: 0; } .admin-nav-link { font-size: 0.875rem; color: #0d9488; text-decoration: none; font-weight: 600; } .admin-nav-link:hover { text-decoration: underline; color: #0f766e; } .admin-nav-link:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; border-radius: 2px; } .admin-page-nav-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem 1rem; } .admin-nav-density .btn { font-size: 0.75rem; padding: 0.25rem 0.55rem; } /* App bar search */ .admin-global-search { position: relative; display: flex; align-items: center; min-width: 0; max-width: min(22rem, 42vw); flex: 1 1 10rem; } .admin-global-search-icon { position: absolute; left: 10px; color: var(--muted); font-size: 1.125rem !important; pointer-events: none; } .admin-global-search-input { width: 100%; padding: 8px 12px 8px 38px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-elevated) 92%, transparent); color: var(--text); font-size: 0.8125rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out); } .admin-global-search-input:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.45); outline-offset: 1px; border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12); } .admin-global-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: min(60vh, 22rem); overflow-y: auto; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--card-elevation-hover), 0 0 0 1px rgba(0, 0, 0, 0.04); z-index: 1200; } .admin-global-search-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 8px 12px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border-subtle); font-size: 0.8125rem; } .admin-global-search-hit:last-child { border-bottom: none; } .admin-global-search-hit:hover, .admin-global-search-hit:focus-visible { background: var(--surface-elevated); outline: none; } .admin-global-search-cat { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .admin-global-search-title { font-weight: 600; } .admin-global-search-sub { font-size: 0.75rem; color: var(--muted); } .admin-global-search-empty { padding: 10px 12px; font-size: 0.8125rem; color: var(--muted); } /* Keyboard focus rings (app bar & drawer) */ .admin-layout .appbar-link:focus-visible, .admin-layout .appbar-menu-btn:focus-visible, .admin-layout .drawer-collapse-btn:focus-visible, .admin-layout .drawer-nav .nav-link:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.85); outline-offset: 2px; border-radius: 8px; } .admin-layout .user-menu-btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.85); outline-offset: 2px; } .admin-layout .user-menu-dropdown .theme-item:focus-visible, .admin-layout .user-menu-dropdown .menu-item:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.6); outline-offset: -2px; } /* Compact tables (toggle from nav strip) */ html[data-admin-table-density="compact"] .admin-table-density-target .table > :not(caption) > * > *, html[data-admin-table-density="compact"] .admin-table-density-target .table thead th { padding-top: 0.35rem; padding-bottom: 0.35rem; font-size: 0.8125rem; } html[data-admin-table-density="compact"] .admin-table-density-target .admin-quick-grid-wrap .table { font-size: 0.8125rem; } /* Role-aware list density defaults */ html[data-admin-role-mode="viewer"] .workspace-hub-card { box-shadow: none !important; } html[data-admin-role-mode="viewer"] .workspace-hub-card-desc { color: var(--muted); } html[data-admin-role-mode="operator"] .admin-quick-grid-wrap .btn-outline-primary, html[data-admin-role-mode="operator"] .admin-quick-grid-wrap .btn-outline-danger { font-weight: 600; } .admin-page-loading { min-height: 8rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; } .admin-page-loading::before { content: ""; width: 2rem; height: 2rem; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: admin-spin 0.7s linear infinite; } @keyframes admin-spin { to { transform: rotate(360deg); } } /* Empty / error pages (404, Error) */ .app-empty-state { max-width: 28rem; margin: 2rem auto 3rem; padding: 2rem 1.25rem; text-align: center; } .app-empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: 50%; background: var(--surface-elevated, rgba(0, 0, 0, 0.04)); color: var(--muted); } .app-empty-state-icon .material-symbols-outlined { font-size: 2.25rem !important; } .app-empty-state-icon--notfound { background: linear-gradient(145deg, rgba(139, 92, 246, 0.22), rgba(14, 165, 233, 0.18)); color: #7c3aed; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.2); } .app-empty-state-icon--error { background: linear-gradient(145deg, rgba(239, 68, 68, 0.22), rgba(251, 146, 60, 0.2)); color: #dc2626; box-shadow: 0 4px 14px rgba(220, 38, 38, 0.18); } .app-empty-state--error .app-empty-state-title { color: var(--text); } .app-empty-state-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--text); letter-spacing: -0.02em; } .app-empty-state-text { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); margin: 0 0 1.25rem; } .app-empty-state-meta { font-size: 0.8125rem; margin: 0 0 1.25rem; } .app-empty-state-code { display: inline-block; margin-left: 0.35rem; padding: 0.15rem 0.45rem; font-size: 0.75rem; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); color: var(--text); word-break: break-all; } .app-empty-state-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; justify-content: center; align-items: center; } .app-empty-state-dev { max-width: 36rem; margin-left: auto; margin-right: auto; text-align: left; padding: 0.75rem 1rem; border-radius: 8px; border: 1px dashed var(--border); background: var(--surface); } /* Narrow screens: admin data tables scroll horizontally instead of squashing columns */ @media (max-width: 767.98px) { .admin-layout .admin-quick-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-layout .admin-quick-grid-wrap .table { min-width: 640px; font-size: 0.875rem; } .admin-layout .enterprise-main { padding-left: 0.75rem; padding-right: 0.75rem; } } /* --- Admin UI polish: workspace, tables, forms, toasts, touch --- */ .admin-layout .appbar-workspace { background: var(--surface-elevated, var(--surface)); border-color: var(--border) !important; max-width: min(280px, 42vw); } .admin-layout .admin-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-layout .admin-qg-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-elevated, #f8fafc) !important; box-shadow: inset 0 -1px 0 var(--border, #e2e8f0); } .admin-layout .admin-incidents-grid th:nth-child(1), .admin-layout .admin-incidents-grid td:nth-child(1) { min-width: 10rem; } .admin-layout .admin-incidents-grid th:nth-child(8), .admin-layout .admin-incidents-grid td:nth-child(8) { min-width: 7rem; width: 1%; } .admin-layout .admin-maintenance-grid th:nth-child(1), .admin-layout .admin-maintenance-grid td:nth-child(1) { min-width: 10rem; } .admin-layout .admin-maintenance-grid th:last-child, .admin-layout .admin-maintenance-grid td:last-child { min-width: 6.5rem; width: 1%; } .admin-layout .admin-template-chip { min-height: 44px; display: inline-flex; align-items: center; } .admin-layout .admin-touch-target { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } .admin-layout .btn-sm.admin-touch-target { min-height: 44px; padding-top: 0.35rem; padding-bottom: 0.35rem; } .admin-layout .admin-row-actions { position: relative; display: inline-block; vertical-align: middle; } .admin-layout .admin-row-actions > summary { list-style: none; cursor: pointer; } .admin-layout .admin-row-actions > summary::-webkit-details-marker { display: none; } .admin-layout .admin-row-actions-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; min-width: 10rem; padding: 0.35rem 0; background: var(--surface, #fff); border: 1px solid var(--border, #dee2e6); border-radius: 0.375rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); z-index: 20; } .admin-layout .admin-row-actions-menu .dropdown-item { display: block; padding: 0.45rem 0.85rem; font-size: 0.875rem; color: var(--text, #212529); text-decoration: none; } .admin-layout .admin-row-actions-menu .dropdown-item:hover { background: var(--surface-elevated, #f8f9fa); } .admin-layout .admin-skeleton-panel { background: var(--surface, #fff); } .admin-layout .admin-skeleton-line { height: 0.65rem; border-radius: 4px; background: linear-gradient(90deg, var(--border-subtle, #e9ecef) 25%, var(--border, #dee2e6) 50%, var(--border-subtle, #e9ecef) 75%); background-size: 200% 100%; animation: admin-skeleton-shimmer 1.2s ease-in-out infinite; } .admin-layout .admin-skeleton-line--short { width: 40%; } .admin-layout .admin-skeleton-table { height: 180px; border-radius: 6px; background: linear-gradient(90deg, var(--border-subtle, #e9ecef) 25%, var(--border, #dee2e6) 50%, var(--border-subtle, #e9ecef) 75%); background-size: 200% 100%; animation: admin-skeleton-shimmer 1.2s ease-in-out infinite; } @keyframes admin-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .admin-layout .admin-empty-state-icon { font-size: 2.5rem; opacity: 0.45; display: block; margin-left: auto; margin-right: auto; } .admin-layout .admin-form-sticky-footer { position: sticky; bottom: 0; z-index: 1010; } .admin-layout .admin-entity-form { padding-bottom: 0.5rem; } .admin-layout .admin-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 1050; } .admin-layout .admin-status-pill { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; } .admin-layout .admin-toast-host .admin-toast-item { pointer-events: auto; min-width: 220px; max-width: min(420px, 92vw); } /* Redis admin diagnostics */ .admin-redis-dump { font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; font-size: 0.8125rem; line-height: 1.45; max-height: min(28rem, 55vh); overflow: auto; margin: 0; padding: 0.75rem 1rem; background: var(--surface-elevated, rgba(0, 0, 0, 0.03)); border: 1px solid var(--border); border-radius: 8px; white-space: pre-wrap; word-break: break-word; } .admin-redis-info-section summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; } .admin-redis-info-section[open] summary { margin-bottom: 0.5rem; } /* ========== GUI refresh: forms, buttons, surfaces (cohesive admin chrome) ========== */ .admin-layout { --gui-input-radius: 12px; --gui-btn-radius: 12px; } .admin-layout .btn { border-radius: var(--gui-btn-radius); font-weight: 600; letter-spacing: -0.012em; transition: background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), transform 0.18s var(--ease-out); } .admin-layout .btn-sm { border-radius: 10px; } .admin-layout .btn-lg { border-radius: 14px; } .admin-layout .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: color-mix(in srgb, var(--accent) 82%, #0f172a); --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 90%, #fff); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: color-mix(in srgb, var(--accent) 78%, #0f172a); --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 70%, #0f172a); --bs-btn-disabled-bg: color-mix(in srgb, var(--accent) 45%, var(--surface)); --bs-btn-disabled-border-color: var(--border); box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.28); } .admin-layout .btn-primary:hover { box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.38); transform: translateY(-1px); } .admin-layout .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); --bs-btn-hover-bg: rgba(var(--accent-rgb), 0.12); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--accent); --bs-btn-active-bg: rgba(var(--accent-rgb), 0.2); --bs-btn-active-border-color: var(--accent); } .admin-layout .btn-outline-secondary { --bs-btn-border-color: var(--border); --bs-btn-color: var(--muted); --bs-btn-hover-bg: var(--surface-elevated); --bs-btn-hover-color: var(--text); } .admin-layout .btn-secondary { --bs-btn-bg: var(--surface-elevated); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text); --bs-btn-hover-bg: color-mix(in srgb, var(--surface-elevated) 85%, var(--border)); } @media (prefers-reduced-motion: reduce) { .admin-layout .btn-primary:hover { transform: none; } } .admin-layout .form-control, .admin-layout .form-select { border-radius: var(--gui-input-radius); border-color: var(--border); background-color: var(--surface); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .admin-layout .form-control::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); } .admin-layout .form-control:focus, .admin-layout .form-select:focus { border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); } .admin-layout .input-group-text { border-radius: var(--gui-input-radius); border-color: var(--border); background: var(--surface-elevated); color: var(--muted); } .admin-layout .card { border-radius: var(--card-radius-sm); border-color: var(--border); background: var(--surface); box-shadow: var(--card-elevation); } .admin-layout .card-header { background: color-mix(in srgb, var(--surface-elevated) 88%, transparent); border-bottom-color: var(--border); font-weight: 600; font-size: 0.95rem; } .admin-layout .card-footer { background: color-mix(in srgb, var(--surface-elevated) 70%, transparent); border-top-color: var(--border); } .admin-layout .alert { border-radius: var(--card-radius-sm); border-width: 1px; } .admin-layout .modal-content { border-radius: var(--card-radius); border-color: var(--border); background: var(--surface); box-shadow: var(--card-elevation-hover); } .admin-layout .modal-header { border-bottom-color: var(--border); } .admin-layout .modal-footer { border-top-color: var(--border); } .admin-layout .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); } .admin-layout .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: color-mix(in srgb, var(--surface-elevated) 35%, transparent); } .admin-layout .badge { font-weight: 600; letter-spacing: 0.02em; padding: 0.35em 0.55em; border-radius: 8px; } .admin-layout .list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); } .admin-layout .list-group-item-action:hover { background: var(--surface-elevated); } .admin-layout .nav-tabs .nav-link { border-radius: 10px 10px 0 0; color: var(--muted); font-weight: 500; } .admin-layout .nav-tabs .nav-link.active { color: var(--text); font-weight: 600; border-color: var(--border) var(--border) var(--surface); } .admin-layout .form-label, .admin-layout .col-form-label { font-weight: 600; font-size: 0.875rem; color: var(--text); } .admin-layout .form-text { color: var(--muted); } .admin-layout .page-flow > .content { padding-top: 0.35rem; } /* Integration hub (/admin/integrations) */ .integration-hub-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .integration-hub-title { font-family: var(--font-display); font-weight: 700; margin-bottom: 0.35rem; } .integration-hub-lead { max-width: 42rem; font-size: 0.95rem; } .integration-hub-progress { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5rem; padding: 0.65rem 1rem; border-radius: var(--card-radius-sm); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-elevation); } .integration-hub-progress-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--accent); } .integration-tenant-select { max-width: 420px; } .integration-tile-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.65rem; } .integration-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: var(--card-radius-sm); background: var(--surface); cursor: pointer; text-align: left; transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); position: relative; } .integration-tile:hover { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: var(--card-elevation); } .integration-tile--active { border-color: rgba(var(--accent-rgb), 0.65); box-shadow: var(--admin-accent-glow); } .integration-tile--connected { border-left: 3px solid var(--success); } .integration-tile-icon { font-size: 1.35rem; } .integration-tile-label { font-size: 0.82rem; font-weight: 600; color: var(--text); } .integration-tile-dot { position: absolute; top: 0.55rem; right: 0.55rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--border); } .integration-tile-dot--ok { background: var(--success); } .integration-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; } .integration-health-card { border: 1px solid var(--border); border-radius: var(--card-radius-sm); background: var(--surface); box-shadow: var(--card-elevation); padding: 0.75rem 0.85rem; text-align: left; transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), border-color 0.15s var(--ease-out); } .integration-health-card:hover { transform: translateY(-1px); box-shadow: var(--card-elevation-lg); } .integration-health-card--active { border-color: rgba(var(--accent-rgb), 0.55); box-shadow: var(--admin-accent-glow); } .integration-health-card-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; } .integration-health-icon { font-size: 1.2rem; } .integration-health-label { font-weight: 700; font-size: 0.85rem; } .integration-health-state { font-size: 0.92rem; font-weight: 700; } .integration-health-meta { font-size: 0.75rem; color: var(--muted); } .integration-health-card--ok { border-left: 4px solid var(--success); } .integration-health-card--error { border-left: 4px solid var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface) 94%); } .integration-health-card--pending { border-left: 4px solid var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--surface) 92%); } .integration-journey { border: 1px solid var(--border); border-radius: var(--card-radius-sm); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface) 92%) 0%, var(--surface) 90%); } .integration-journey-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.65rem; } .integration-progress-track { width: 100%; height: 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface) 86%); overflow: hidden; margin-bottom: 0.75rem; } .integration-progress-fill { height: 100%; background: linear-gradient(90deg, var(--success) 0%, var(--accent) 100%); border-radius: 999px; transition: width 0.25s var(--ease-out); } .integration-journey-steps { margin-left: 1.1rem; font-size: 0.83rem; color: var(--muted); } .integration-journey-steps li { margin-bottom: 0.2rem; } .integration-quick-toolbar { border: 1px solid var(--border); border-radius: var(--card-radius-sm); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, var(--surface) 90%) 0%, var(--surface-elevated) 100%); } .integration-copy-select { width: auto; min-width: 11rem; max-width: 16rem; } .integration-tab-nav .nav-link { font-size: 0.875rem; font-weight: 600; border-radius: 999px; padding: 0.35rem 0.9rem; } .integration-panels { display: flex; flex-direction: column; gap: 1.25rem; } .integration-panel { border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--card-elevation); scroll-margin-top: 5rem; } .integration-panel--datadog { border-top: 3px solid #6f42c1; } .integration-panel--jira { border-top: 3px solid #0c66e4; } .integration-panel--opsgenie { border-top: 3px solid #ff7f32; } .integration-panel--slack { border-top: 3px solid #2eb67d; } .integration-panel--confluence { border-top: 3px solid #2684ff; } .integration-panel--custom { border-top: 3px solid #6c757d; } .integration-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .integration-panel-title { display: flex; align-items: flex-start; gap: 0.65rem; } .integration-panel-icon { font-size: 1.6rem; margin-top: 0.1rem; } .integration-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .integration-setup-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; padding: 0.55rem 0.65rem; margin-bottom: 0.85rem; border-radius: 8px; background: var(--surface-elevated); border: 1px dashed var(--border); } .integration-setup-links-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-right: 0.25rem; } .integration-setup-link { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.82rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--accent); text-decoration: none; } .integration-setup-link:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); } .integration-ext-icon { font-size: 0.85rem !important; opacity: 0.75; } .integration-quick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin-bottom: 0.75rem; } .integration-panel-footer { margin-top: 0.5rem; } .integration-mode-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* -------------------------------------------------------------------------- */ /* System-wide unified admin surfaces */ /* -------------------------------------------------------------------------- */ .admin-layout .content.unified-content-shell .page-transition { display: flex; flex-direction: column; gap: 1rem; } .admin-layout .content.unified-content-shell .page-transition > h1:first-of-type { margin: 0 0 0.2rem; padding: 0.85rem 1rem 0.35rem; border-radius: var(--card-radius-sm); border: 1px solid color-mix(in srgb, var(--border) 92%, rgba(var(--accent-rgb), 0.15)); background: linear-gradient(145deg, var(--surface) 0%, color-mix(in srgb, var(--surface-elevated) 94%, rgba(var(--accent-rgb), 0.08)) 100%); box-shadow: var(--card-elevation); font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; position: relative; } .admin-layout .content.unified-content-shell .page-transition > h1:first-of-type::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--success) 30%)); } .admin-layout .content.unified-content-shell .page-transition > h1:first-of-type + p { margin: -0.35rem 0 0.35rem; padding: 0 0.9rem 0.75rem; color: var(--muted); font-size: 0.9rem; max-width: 60rem; } .admin-layout .content.unified-content-shell .page-transition .card, .admin-layout .content.unified-content-shell .page-transition .admin-quick-grid-wrap, .admin-layout .content.unified-content-shell .page-transition .admin-table-scroll > div, .admin-layout .content.unified-content-shell .page-transition .border.rounded, .admin-layout .content.unified-content-shell .page-transition .admin-empty-state { border-radius: var(--card-radius-sm) !important; border-color: var(--border) !important; background: linear-gradient(165deg, color-mix(in srgb, var(--surface) 96%, rgba(var(--accent-rgb), 0.05)) 0%, var(--surface) 100%); box-shadow: var(--card-elevation); } .admin-layout .content.unified-content-shell .page-transition .table { --bs-table-bg: transparent; margin-bottom: 0; } .admin-layout .content.unified-content-shell .page-transition .table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom-width: 1px; } .admin-layout .content.unified-content-shell .page-transition .table tbody td { border-color: color-mix(in srgb, var(--border) 92%, transparent); } .admin-layout .content.unified-content-shell .page-transition .form-control, .admin-layout .content.unified-content-shell .page-transition .form-select, .admin-layout .content.unified-content-shell .page-transition .form-check-input { border-color: color-mix(in srgb, var(--border) 90%, rgba(var(--accent-rgb), 0.08)); border-radius: 10px; } .admin-layout .content.unified-content-shell .page-transition .form-control:focus, .admin-layout .content.unified-content-shell .page-transition .form-select:focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.16); } .admin-layout .content.unified-content-shell .page-transition .btn-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 90%, #1e40af) 0%, var(--accent) 100%); border-color: transparent; box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.28); } .admin-layout .content.unified-content-shell .page-transition .btn-primary:hover { filter: brightness(1.03); box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.34); } .admin-layout .content.unified-content-shell .page-transition .btn-outline-secondary, .admin-layout .content.unified-content-shell .page-transition .btn-outline-primary { border-radius: 10px; } .admin-layout .content.unified-content-shell .page-transition .badge { border-radius: 999px; } .admin-layout .content.unified-content-shell .page-transition .alert { border-radius: 10px; border-width: 1px; } .admin-layout .content.unified-content-shell .page-transition .admin-action-row { padding: 0.35rem 0.1rem 0.55rem; border-bottom: 1px dashed color-mix(in srgb, var(--border) 88%, rgba(var(--accent-rgb), 0.15)); margin-bottom: 0.95rem !important; } .admin-layout .content.unified-content-shell .page-transition .admin-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; margin-bottom: 0.95rem; } .admin-layout .content.unified-content-shell .page-transition .admin-kpi-card { border: 1px solid color-mix(in srgb, var(--border) 90%, rgba(var(--accent-rgb), 0.15)); border-radius: 12px; padding: 0.7rem 0.85rem; background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 94%, rgba(var(--accent-rgb), 0.06)) 0%, var(--surface) 100%); } .admin-layout .content.unified-content-shell .page-transition .admin-kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; } .admin-layout .content.unified-content-shell .page-transition .admin-kpi-value { font-size: 1.25rem; line-height: 1.25; font-weight: 800; color: var(--text); } .admin-layout .content.unified-content-shell .page-transition .admin-kpi-note { font-size: 0.76rem; color: var(--muted); } .admin-layout .content.unified-content-shell .page-transition .admin-tone-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.72rem; font-weight: 700; line-height: 1.2; } .admin-layout .content.unified-content-shell .page-transition .admin-tone-chip--ok { background: rgba(22, 163, 74, 0.16); color: #166534; border-color: rgba(22, 163, 74, 0.28); } .admin-layout .content.unified-content-shell .page-transition .admin-tone-chip--warn { background: rgba(202, 138, 4, 0.2); color: #854d0e; border-color: rgba(202, 138, 4, 0.32); } .admin-layout .content.unified-content-shell .page-transition .admin-tone-chip--danger { background: rgba(220, 38, 38, 0.16); color: #991b1b; border-color: rgba(220, 38, 38, 0.3); } .admin-layout .content.unified-content-shell .page-transition .admin-tone-chip--accent { background: rgba(var(--accent-rgb), 0.15); color: color-mix(in srgb, var(--accent) 75%, #1e3a8a); border-color: rgba(var(--accent-rgb), 0.3); } .admin-layout .content.unified-content-shell .page-transition .workspace-health-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; } .integration-save-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid var(--border); } .integration-save-bar--sticky { position: sticky; bottom: 0; z-index: 15; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid color-mix(in srgb, var(--border) 85%, rgba(var(--accent-rgb), 0.18)); padding-top: 0.85rem; padding-bottom: 0.85rem; } .integration-empty-icon { font-size: 3rem; opacity: 0.35; } .integration-org-defaults { border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-elevation); } .integration-org-grid { display: flex; flex-direction: column; gap: 1rem; } .integration-org-fieldset { border: 1px solid var(--border); border-radius: var(--card-radius-sm); padding: 0.75rem 1rem 1rem; margin: 0; } .integration-org-fieldset legend { float: none; width: auto; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0 0.35rem; margin-bottom: 0.35rem; }