:root {
--primary: #990000;
--success: #228b22;
--background: oklch(1 0 0);
--card: oklch(1 0 0);
--sidebar: oklch(0.98 0 0);
--secondary: oklch(0.95 0 0);
--muted: oklch(0.92 0 0);
--border: oklch(0.92 0 0);
--foreground: oklch(0.145 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: #990000;
--destructive: oklch(0.577 0.245 27.325);
--ring: #990000;
--radius: 0.625rem;
/* ── Responsive content widths ──────────────────────────────────────
Table/data-heavy pages: 90% of viewport, never wider than 1200px.
All other content pages: 75% of viewport, never wider than 1200px.
Both have a hard floor of 800px so nothing collapses on small screens. */
--content-width-table: clamp(800px, 90vw, 1200px);
--content-width-standard: clamp(800px, 75vw, 1200px);
}
/* ── Dark mode variable overrides ────────────────────────────────────────────
Applied when App.js toggles document.body.classList.add('dark').
All components use these vars, so the cascade handles theming automatically. */
html.dark body,
body.dark {
--background: rgb(48, 48, 48); /* right-hand content area */
--card: rgb(20, 20, 20); /* header + card / panel surfaces */
--sidebar: rgb(20, 20, 20); /* sidebar rail */
--secondary: rgb(38, 38, 38); /* hovered surfaces */
--muted: rgb(55, 55, 55); /* subtle fills */
--border: rgb(70, 70, 70); /* borders */
--foreground: #ffffff; /* primary text */
--sidebar-foreground: #ffffff; /* sidebar text */
--muted-foreground: #adadad; /* placeholder / muted text */
--primary: rgb(153 0 0 / 50%); /* primary brand colour — dark tint */
}
/* ── Dark mode: hardcoded-colour overrides ────────────────────────────────────
Selectors that bypass CSS vars with literal colours need explicit dark rules. */
html.dark body .logo-text,
body.dark .logo-text {
color: #ffffff;
}
html.dark body h1,
html.dark body h2,
html.dark body h3,
html.dark body h4,
html.dark body h5,
html.dark body h6,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
color: #ffffff !important;
}
html.dark body a,
body.dark a {
color: #ffffff;
}
html.dark body a:hover,
body.dark a:hover {
color: #d6d6d6;
}
/* Header + footer backgrounds */
html.dark body .header,
body.dark .header,
html.dark body .app-footer,
body.dark .app-footer {
background-color: rgb(48, 48, 48) !important;
border-color: rgb(70, 70, 70);
}
/* All buttons — black bg, red text */
html.dark body button,
body.dark button {
/* background-color: #000000 !important; */
/* color: rgb(153, 0, 0) !important; */
/* border-color: rgb(70, 70, 70) !important; */
}
html.dark body button:hover:not(:disabled),
body.dark button:hover:not(:disabled) {
background-color: rgb(20, 20, 20) !important;
color: rgb(153, 0, 0) !important;
}
/* Named action buttons — preserve their brand colours in dark mode */
html.dark body button.btn-danger,
body.dark button.btn-danger {
background-color: rgb(153, 0, 0) !important;
color: #ffffff !important;
border-color: rgb(153, 0, 0) !important;
}
html.dark body button.btn-danger:hover:not(:disabled),
body.dark button.btn-danger:hover:not(:disabled) {
background-color: rgb(120, 0, 0) !important;
color: #ffffff !important;
border-color: rgb(120, 0, 0) !important;
}
html.dark body button.btn-success,
body.dark button.btn-success {
background-color: #16a34a !important;
color: #ffffff !important;
border-color: #16a34a !important;
}
html.dark body button.btn-success:hover:not(:disabled),
body.dark button.btn-success:hover:not(:disabled) {
background-color: #15803d !important;
color: #ffffff !important;
border-color: #15803d !important;
}
html.dark body button.btn-secondary,
body.dark button.btn-secondary {
background-color: var(--muted) !important;
color: var(--foreground) !important;
border-color: var(--border) !important;
}
html.dark body button.btn-secondary:hover:not(:disabled),
body.dark button.btn-secondary:hover:not(:disabled) {
background-color: var(--primary) !important;
color: #ffffff !important;
border-color: var(--primary) !important;
}
/* Action icons (Font Awesome tags) — white */
html.dark body i.fas,
html.dark body i.far,
html.dark body i.fab,
html.dark body i.fal,
html.dark body i.fad,
body.dark i.fas,
body.dark i.far,
body.dark i.fab,
body.dark i.fal,
body.dark i.fad {
color: #ffffff;
}
/* Version label in sidebar */
html.dark body .sidebar-version,
body.dark .sidebar-version {
color: #ffffff;
}
/* Grey badges → transparent with sidebar-foreground text in dark mode */
body.dark .badge-secondary,
html.dark body .badge-secondary,
body.dark .status.secondary,
html.dark body .status.secondary,
body.dark .idp-badge.local,
html.dark body .idp-badge.local,
body.dark .priority-badge.low,
html.dark body .priority-badge.low {
background: transparent !important;
color: var(--sidebar-foreground) !important;
border-color: var(--border) !important;
}
/* ── SubmitRequest dark mode overrides ─────────────────────────────────────
Inline styles in SubmitRequest.js use hardcoded light-mode colours.
These overrides neutralise them in dark mode via !important.
Light-mode colours are preserved (no dark selector = untouched).
─────────────────────────────────────────────────────────────────────── */
/* All text colours */
body.dark .submit-request-container,
html.dark body .submit-request-container {
color: var(--foreground) !important;
}
/* Inputs, textareas, selects — dark background + text + default border */
body.dark .submit-request-container input,
body.dark .submit-request-container textarea,
body.dark .submit-request-container select,
html.dark body .submit-request-container input,
html.dark body .submit-request-container textarea,
html.dark body .submit-request-container select {
background: var(--secondary) !important;
color: var(--foreground) !important;
/* border-color: var(--border) !important; */
}
/* Required field — filled: green border (class-based, higher specificity) */
body.dark .submit-request-container input.field-valid,
body.dark .submit-request-container textarea.field-valid,
body.dark .submit-request-container select.field-valid,
html.dark body .submit-request-container input.field-valid,
html.dark body .submit-request-container textarea.field-valid,
html.dark body .submit-request-container select.field-valid {
border-color: rgb(34, 197, 94) !important;
}
/* Required field — empty: red border */
body.dark .submit-request-container input.field-invalid,
body.dark .submit-request-container textarea.field-invalid,
body.dark .submit-request-container select.field-invalid,
html.dark body .submit-request-container input.field-invalid,
html.dark body .submit-request-container textarea.field-invalid,
html.dark body .submit-request-container select.field-invalid {
border-color: rgb(239, 68, 68) !important;
}
/* Inline-styled validation borders — green (valid) and red (invalid/empty required)
These cover inputs that use style={{ borderColor: '#22c55e' }} or '#ef4444'/'#dc2626'
directly (e.g. Street Address, City, Postal Code in payee address components).
Must come after the base rule to win the !important cascade. */
body.dark .submit-request-container input[style*="22c55e"],
body.dark .submit-request-container textarea[style*="22c55e"],
html.dark body .submit-request-container input[style*="22c55e"],
html.dark body .submit-request-container textarea[style*="22c55e"] {
border-color: rgb(34, 197, 94) !important;
}
body.dark .submit-request-container input[style*="ef4444"],
body.dark .submit-request-container textarea[style*="ef4444"],
body.dark .submit-request-container input[style*="dc2626"],
body.dark .submit-request-container textarea[style*="dc2626"],
html.dark body .submit-request-container input[style*="ef4444"],
html.dark body .submit-request-container textarea[style*="ef4444"],
html.dark body .submit-request-container input[style*="dc2626"],
html.dark body .submit-request-container textarea[style*="dc2626"] {
border-color: rgb(239, 68, 68) !important;
}
/* Same fix for the Browse Payee modal form and any other modal that uses inline validation borders */
body.dark input[style*="22c55e"],
html.dark body input[style*="22c55e"] {
border-color: rgb(34, 197, 94) !important;
}
body.dark input[style*="ef4444"],
body.dark input[style*="dc2626"],
html.dark body input[style*="ef4444"],
html.dark body input[style*="dc2626"] {
border-color: rgb(239, 68, 68) !important;
}
/* Form field labels — use foreground colour (not hardcoded dark grey) */
body.dark .submit-request-container label,
body.dark .submit-request-container .form-label,
html.dark body .submit-request-container label,
html.dark body .submit-request-container .form-label {
color: var(--foreground) !important;
}
/* All div/span with inline background colours — normalise to card/secondary */
/* Light-grey card backgrounds (#f9fafb, #f3f4f6, rgb(249..)) */
body.dark .submit-request-container [style*="background: #f9fafb"],
body.dark .submit-request-container [style*="background: #f3f4f6"],
body.dark .submit-request-container [style*="background: rgb(249,250,251)"],
body.dark .submit-request-container [style*="background:#f9fafb"],
body.dark .submit-request-container [style*="background:#f3f4f6"],
html.dark body .submit-request-container [style*="background: #f9fafb"],
html.dark body .submit-request-container [style*="background: #f3f4f6"],
html.dark body .submit-request-container [style*="background: rgb(249,250,251)"],
html.dark body .submit-request-container [style*="background:#f9fafb"],
html.dark body .submit-request-container [style*="background:#f3f4f6"] {
background: var(--secondary) !important;
border-color: var(--border) !important;
}
/* Blue-tinted cards (#eff6ff, #dbeafe, #bfdbfe) */
body.dark .submit-request-container [style*="background: #eff6ff"],
body.dark .submit-request-container [style*="background: #dbeafe"],
body.dark .submit-request-container [style*="backgroundColor: #eff6ff"],
html.dark body .submit-request-container [style*="background: #eff6ff"],
html.dark body .submit-request-container [style*="background: #dbeafe"],
html.dark body .submit-request-container [style*="backgroundColor: #eff6ff"] {
background: var(--secondary) !important;
border-color: var(--border) !important;
}
/* Green-tinted cards (#f0fdf4, #dcfce7, #f0faf4) */
body.dark .submit-request-container [style*="background: #f0fdf4"],
body.dark .submit-request-container [style*="background: #dcfce7"],
body.dark .submit-request-container [style*="background: #f0faf4"],
body.dark .submit-request-container [style*="backgroundColor: #f0fdf4"],
html.dark body .submit-request-container [style*="background: #f0fdf4"],
html.dark body .submit-request-container [style*="background: #dcfce7"],
html.dark body .submit-request-container [style*="background: #f0faf4"],
html.dark body .submit-request-container [style*="backgroundColor: #f0fdf4"] {
background: var(--secondary) !important;
border-color: var(--border) !important;
}
/* Purple-tinted cards (#faf5ff, #ede9fe) */
body.dark .submit-request-container [style*="background: #faf5ff"],
body.dark .submit-request-container [style*="background: #ede9fe"],
html.dark body .submit-request-container [style*="background: #faf5ff"],
html.dark body .submit-request-container [style*="background: #ede9fe"] {
background: var(--secondary) !important;
border-color: var(--border) !important;
}
/* Yellow/amber tinted cards (#fef3c7, #fef9c3) */
body.dark .submit-request-container [style*="background: #fef3c7"],
body.dark .submit-request-container [style*="background: #fef9c3"],
html.dark body .submit-request-container [style*="background: #fef3c7"],
html.dark body .submit-request-container [style*="background: #fef9c3"] {
background: var(--secondary) !important;
border-color: var(--border) !important;
}
/* White card backgrounds (#ffffff, #fff, #fafafa) */
body.dark .submit-request-container [style*="background: #ffffff"],
body.dark .submit-request-container [style*="background: #fff"],
body.dark .submit-request-container [style*="background: #fafafa"],
body.dark .submit-request-container [style*="backgroundColor: #ffffff"],
body.dark .submit-request-container [style*="backgroundColor: #fff"],
html.dark body .submit-request-container [style*="background: #ffffff"],
html.dark body .submit-request-container [style*="background: #fff"],
html.dark body .submit-request-container [style*="background: #fafafa"],
html.dark body .submit-request-container [style*="backgroundColor: #ffffff"],
html.dark body .submit-request-container [style*="backgroundColor: #fff"] {
background: var(--card) !important;
border-color: var(--border) !important;
}
/* Hardcoded border colours */
body.dark .submit-request-container [style*="border: 1px solid #d1d5db"],
body.dark .submit-request-container [style*="border: 1px solid #e5e7eb"],
body.dark .submit-request-container [style*="borderBottom: 1px solid #e5e7eb"],
body.dark .submit-request-container [style*="borderTop: 1px solid #e5e7eb"],
html.dark body .submit-request-container [style*="border: 1px solid #d1d5db"],
html.dark body .submit-request-container [style*="border: 1px solid #e5e7eb"],
html.dark body .submit-request-container [style*="borderBottom: 1px solid #e5e7eb"],
html.dark body .submit-request-container [style*="borderTop: 1px solid #e5e7eb"] {
border-color: var(--border) !important;
}
/* Hardcoded dark text colours (#374151, #111827, #4b5563, #1f1235) */
body.dark .submit-request-container [style*="color: #374151"],
body.dark .submit-request-container [style*="color: #111827"],
body.dark .submit-request-container [style*="color: #4b5563"],
body.dark .submit-request-container [style*="color: #1f1235"],
html.dark body .submit-request-container [style*="color: #374151"],
html.dark body .submit-request-container [style*="color: #111827"],
html.dark body .submit-request-container [style*="color: #4b5563"],
html.dark body .submit-request-container [style*="color: #1f1235"] {
color: var(--foreground) !important;
}
/* Muted text (#6b7280, #9ca3af) */
body.dark .submit-request-container [style*="color: #6b7280"],
body.dark .submit-request-container [style*="color: #9ca3af"],
html.dark body .submit-request-container [style*="color: #6b7280"],
html.dark body .submit-request-container [style*="color: #9ca3af"] {
color: var(--muted-foreground) !important;
}
/* Blue text (rgb(0, 120, 212), #2563eb) → foreground in dark
Exception: .sr-chain-badge--delegated keeps its blue colour */
body.dark .submit-request-container [style*="color: rgb(0, 120, 212)"]:not(.sr-chain-badge--delegated),
body.dark .submit-request-container [style*="color: #2563eb"]:not(.sr-chain-badge--delegated),
html.dark body .submit-request-container [style*="color: rgb(0, 120, 212)"]:not(.sr-chain-badge--delegated),
html.dark body .submit-request-container [style*="color: #2563eb"]:not(.sr-chain-badge--delegated) {
color: var(--foreground) !important;
}
/* DELEGATED badge — preserve blue + lighten background in dark mode */
body.dark .sr-chain-badge--delegated,
html.dark body .sr-chain-badge--delegated {
color: rgb(0, 120, 212) !important;
background: rgba(0, 120, 212, 0.15) !important;
}
/* Purple text (#7c3aed, #5b21b6, #4c1d95) → foreground in dark */
body.dark .submit-request-container [style*="color: #7c3aed"],
body.dark .submit-request-container [style*="color: #5b21b6"],
body.dark .submit-request-container [style*="color: #4c1d95"],
body.dark .submit-request-container [style*="color: #6366f1"],
html.dark body .submit-request-container [style*="color: #7c3aed"],
html.dark body .submit-request-container [style*="color: #5b21b6"],
html.dark body .submit-request-container [style*="color: #4c1d95"],
html.dark body .submit-request-container [style*="color: #6366f1"] {
color: var(--foreground) !important;
}
/* Currency prefix block ($ sign) */
body.dark .submit-request-container [style*="background: #f3f4f6"],
html.dark body .submit-request-container [style*="background: #f3f4f6"] {
background: var(--muted) !important;
border-color: var(--border) !important;
color: var(--foreground) !important;
}
/* Step progress bar — inactive step number bubble (#e2e8f0) */
body.dark .submit-request-container [style*="background: #e2e8f0"],
html.dark body .submit-request-container [style*="background: #e2e8f0"] {
background: var(--muted) !important;
}
/* Step progress separator chevron (#d1d5db) */
body.dark .submit-request-container [style*="color: #d1d5db"],
html.dark body .submit-request-container [style*="color: #d1d5db"] {
color: var(--border) !important;
}
/* Ensure all buttons within submit-request have a border */
body.dark .submit-request-container button,
html.dark body .submit-request-container button {
border: 1px solid var(--border) !important;
}
/* "Submit Another" / "View My Submissions" links on success screen */
.submit-another-link {
color: #111827;
}
body.dark .submit-another-link,
html.dark body .submit-another-link {
color: #fff !important;
}
/* Picker panels (.sr-picker-panel) → transparent background + border */
body.dark .sr-picker-panel,
html.dark body .sr-picker-panel {
background: transparent !important;
border-color: var(--border) !important;
color: var(--foreground) !important;
}
/* Picker panel text — amber/brown headings and descriptions */
body.dark .sr-picker-panel *,
html.dark body .sr-picker-panel * {
color: var(--foreground) !important;
}
/* Chain cards — all variants → transparent background */
body.dark .sr-chain-card,
html.dark body .sr-chain-card {
background: transparent !important;
border-color: var(--border) !important;
color: var(--foreground) !important;
}
/* Payee typeahead dropdown — light mode base */
.payee-suggestions-dropdown {
background: #ffffff;
}
.payee-suggestion-item:hover {
background: #f8fafc;
}
/* Payee typeahead dropdown — dark mode */
html.dark body .payee-suggestions-dropdown,
body.dark .payee-suggestions-dropdown {
background: var(--card) !important;
border-color: var(--border) !important;
}
html.dark body .payee-suggestion-item,
body.dark .payee-suggestion-item {
color: var(--foreground) !important;
border-bottom-color: var(--border) !important;
}
html.dark body .payee-suggestion-item:hover,
body.dark .payee-suggestion-item:hover {
background: var(--secondary) !important;
}
/* Payee container validation states */
.payee-container--valid {
border-color: var(--success, #16a34a) !important;
}
.payee-container--invalid {
border-color: var(--destructive) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--destructive) 20%, transparent);
}
/* Payee field label — inherit foreground so it stays readable in both modes */
.payee-container label {
color: var(--foreground);
}
/* Wizard stepper — pending step: dark bg + muted text (prevent white-on-white) */
html.dark body .wizard-step-num--pending,
body.dark .wizard-step-num--pending {
background: var(--muted) !important;
color: var(--muted-foreground, #9ca3af) !important;
}
html.dark body .wizard-step-label--pending,
body.dark .wizard-step-label--pending {
color: var(--muted-foreground, #9ca3af) !important;
}
html.dark body .wizard-step-sep,
body.dark .wizard-step-sep {
color: var(--border) !important;
}
/* Save-payee scope modal — purple-tinted "My Contacts" button (#f5f3ff bg, #ddd6fe border) */
body.dark .submit-request-container [style*="background: #f5f3ff"],
html.dark body .submit-request-container [style*="background: #f5f3ff"] {
background: var(--secondary) !important;
border-color: var(--border) !important;
}
/* ── End SubmitRequest dark mode overrides ──────────────────────────────── */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--background);
color: var(--foreground);
line-height: 1.5;
}
/* Stable root wrapper — always present so React 18 never swaps the root element.
Auth spinner / login are shown inside this via display:none toggles. */
.app-root {
width: 100%;
height: 100%;
}
.app {
display: flex;
height: 100vh;
}
.sidebar {
background-color: var(--sidebar);
color: var(--sidebar-foreground);
transition: width 300ms ease;
position: relative;
z-index: 1000;
border-right: 1px solid var(--border);
flex-shrink: 0;
}
.sidebar.collapsed {
width: 64px;
min-width: 64px;
}
.sidebar.expanded {
width: 256px;
min-width: 256px;
}
.sidebar-header {
padding: 16px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
height: 55px;
}
.toggle-btn {
background: none;
border: none;
color: var(--sidebar-foreground);
font-size: 16px;
cursor: pointer;
padding: 8px;
border-radius: calc(var(--radius) - 2px);
transition: background-color 0.2s;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-btn:hover {
background-color: var(--muted);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
white-space: nowrap;
color: var(--primary);
min-width: 0;
}
.logo-img {
width: 36px;
height: 36px;
border-radius: 2px;
object-fit: cover;
flex-shrink: 0;
}
.logo-text {
font-size: 18px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
text-align: center;
flex: 1;
}
.nav-menu {
list-style: none;
padding: 8px;
}
.nav-item {
margin: 0;
}
.nav-link {
display: flex;
align-items: center;
padding: 8px 16px;
color: var(--sidebar-foreground);
text-decoration: none;
transition: background-color 0.2s;
cursor: pointer;
border-radius: calc(var(--radius) - 2px);
font-size: 14px;
margin: 2px 0;
line-height: 1.4;
}
.nav-link:hover {
background-color: var(--muted);
}
.nav-link.active {
background-color: var(--primary);
color: white !important;
font-weight: 600;
}
.nav-link.has-active-child {
background-color: var(--muted);
color: var(--primary) !important;
font-weight: 600;
}
.nav-link.has-active-child .nav-icon svg {
color: var(--primary) !important;
stroke: var(--primary) !important;
}
body.dark .nav-link.has-active-child,
html.dark body .nav-link.has-active-child {
color: #ffffff !important;
}
body.dark .nav-link.has-active-child .nav-icon svg,
html.dark body .nav-link.has-active-child .nav-icon svg {
color: #ffffff !important;
stroke: #ffffff !important;
}
.nav-icon {
margin-right: 12px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nav-icon svg {
display: block;
}
.nav-text {
overflow: hidden;
white-space: nowrap;
font-weight: 500;
line-height: 1.4;
display: flex;
align-items: center;
}
.sidebar.collapsed .nav-text {
display: none;
}
.sidebar.collapsed .nav-link {
padding: 8px;
justify-content: center;
}
.sidebar.collapsed .nav-icon {
margin-right: 0;
}
/* Submenu styles */
.submenu {
list-style: none;
padding: 0;
margin: 0;
margin-left: 16px;
animation: slideDown 0.2s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.submenu-item {
margin: 0;
}
.submenu-link {
padding: 6px 12px 6px 32px;
font-size: 13px;
opacity: 0.9;
color: var(--sidebar-foreground);
}
.submenu-link:hover {
opacity: 1;
background-color: var(--muted);
color: var(--sidebar-foreground);
}
.submenu-link.active {
background-color: var(--primary);
color: white !important;
font-weight: 600;
opacity: 1;
}
.submenu-link.active * {
color: white !important;
}
.submenu-link.active .nav-badge {
color: #000 !important;
}
.submenu-arrow {
margin-left: auto;
font-size: 12px;
transition: transform 0.2s ease;
}
.nav-link {
position: relative;
}
.nav-icon svg {
width: 20px;
height: 20px;
transition: all 0.2s ease;
}
/* SVG Icon color changes */
.nav-link:not(.active) .nav-icon svg {
color: var(--muted-foreground);
stroke: var(--muted-foreground);
}
.nav-link.active .nav-icon svg {
color: white;
stroke: white;
}
.nav-link:hover:not(.active) .nav-icon svg {
color: var(--primary);
stroke: var(--primary);
}
/* Version number at bottom of sidebar */
.sidebar-version {
position: absolute;
bottom: 0;
left: 0;
padding: 2px 8px;
font-size: 12px;
color: var(--muted-foreground);
font-weight: 500;
background: var(--sidebar);
width: 100%;
text-align: left;
}
.sidebar.collapsed .sidebar-version {
display: none;
}
/* Nav locked — disable pointer events on all nav links but keep visual style */
.sidebar.nav-locked .nav-link,
.sidebar.nav-locked .submenu-link {
pointer-events: none;
opacity: 0.45;
cursor: not-allowed;
}
/* Keep the currently active item fully visible so user knows where they are */
.sidebar.nav-locked .nav-link.active,
.sidebar.nav-locked .submenu-link.active {
opacity: 1;
}
/* nav-locked indicator is now rendered as a real React element (nav-locked-banner) */
.nav-locked-banner {
display: block;
font-size: 10px;
color: #990000;
background: rgba(153,0,0,0.06);
border-bottom: 1px solid rgba(153,0,0,0.15);
padding: 6px 14px;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: default;
user-select: none;
}
.sidebar.collapsed .nav-locked-banner {
padding: 6px;
text-align: center;
font-size: 12px;
}
/* Make sidebar scrollable with version at bottom */
.sidebar {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.sidebar nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 44px;
}
.sidebar nav::-webkit-scrollbar {
width: 6px;
}
.sidebar nav::-webkit-scrollbar-track {
background: transparent;
}
.sidebar nav::-webkit-scrollbar-thumb {
background: var(--muted-foreground);
border-radius: 3px;
}
.sidebar nav::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.header {
background-color: var(--card);
padding: 0 clamp(16px, 2vw, 32px);
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
height: 55px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.header h1 {
font-size: clamp(15px, 1.2vw, 20px);
font-weight: 600;
color: var(--foreground);
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.user-avatar {
width: 48px;
height: 48px;
background-color: var(--primary);
border: 2px solid rgba(153,0,0,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 14px;
}
.user-info span {
font-size: 14px;
font-weight: 600;
color: var(--foreground);
}
.logout-btn {
background-color: var(--primary);
color: white;
border: none;
padding: 8px 16px;
border-radius: var(--radius);
cursor: pointer;
transition: background-color 0.2s;
font-size: 14px;
font-weight: 500;
}
.logout-btn:hover {
background-color: color-mix(in srgb, var(--primary) 90%, black);
}
.content {
flex: 1;
padding: clamp(16px, 2vw, 40px);
overflow-y: auto;
background-color: var(--background);
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: white;
padding: 20px;
}
/* Sign-in page always stays light mode — unconditionally forced light */
.login-page {
color-scheme: light !important;
background: #ffffff !important;
color: #111827 !important;
}
/* Also override when body.dark is active */
body.dark .login-page,
html.dark body .login-page {
background: #ffffff !important;
color-scheme: light !important;
}
body.dark .login-page *,
html.dark body .login-page * {
color: revert !important;
background: revert !important;
border-color: revert !important;
}
/* Override the global body.dark h1-h6 rule for the login page */
body.dark .login-page h1,
body.dark .login-page h2,
body.dark .login-page h3,
body.dark .login-page h4,
body.dark .login-page h5,
body.dark .login-page h6,
html.dark body .login-page h1,
html.dark body .login-page h2,
html.dark body .login-page h3,
html.dark body .login-page h4,
html.dark body .login-page h5,
html.dark body .login-page h6 {
color: #111827 !important;
}
.login-form {
background: white;
padding: 48px 40px;
border-radius: 16px;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
width: 100%;
max-width: 420px;
text-align: center;
border: 1px solid oklch(0.95 0 0);
position: relative;
}
.login-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary) 0%, oklch(from var(--primary) calc(l + 0.1) c calc(h + 30)) 100%);
border-radius: 16px 16px 0 0;
}
.login-title {
margin-bottom: 32px;
color: var(--foreground);
font-size: 28px;
font-weight: 700;
line-height: 1.2;
}
.login-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: var(--primary);
margin: 16px auto 0;
border-radius: 2px;
}
.login-input {
width: 100%;
padding: 12px 16px;
margin-bottom: 12px;
border-radius: 6px;
border: 1px solid #d0d7de;
font-size: 14px;
box-sizing: border-box;
}
.oauth-btn {
background-color: var(--primary);
color: white;
border: none;
padding: 16px 24px;
border-radius: 12px;
font-size: 16px;
cursor: pointer;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.2s ease;
font-weight: 600;
margin-bottom: 12px;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
position: relative;
overflow: hidden;
}
.oauth-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.6s;
}
.oauth-btn:hover::before {
left: 100%;
}
.oauth-btn:hover {
background-color: color-mix(in srgb, var(--primary) 85%, black);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgb(0 0 0 / 0.2);
}
.oauth-btn:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}
.oauth-btn.admin {
background-color: var(--success);
margin-top: 8px;
}
.oauth-btn.admin:hover {
background-color: color-mix(in srgb, var(--success) 85%, black);
}
.form-container {
background: var(--card);
padding: 24px;
border-radius: calc(var(--radius) + 4px);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
max-width: 600px;
margin: 0 auto;
border: 1px solid var(--border);
}
.form-title {
margin-bottom: 20px;
color: var(--primary);
text-align: center;
font-weight: 600;
font-size: 18px;
}
.form-group {
margin-bottom: 16px;
}
.form-label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--foreground);
font-size: 14px;
}
.form-input, .form-input select {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 2px);
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
background-color: var(--background);
color: var(--foreground);
}
.form-input:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent);
}
.form-btn {
background-color: var(--primary);
color: white;
border: none;
padding: 10px 24px;
border-radius: var(--radius);
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
font-weight: 500;
}
.form-btn:hover {
background-color: color-mix(in srgb, var(--primary) 90%, black);
}
.form-btn:disabled {
background-color: var(--muted);
color: var(--muted-foreground);
cursor: not-allowed;
}
.dashboard {
background: var(--card);
padding: 24px;
border-radius: calc(var(--radius) + 4px);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
border: 1px solid var(--border);
}
.welcome-message {
text-align: center;
margin-bottom: 24px;
color: var(--primary);
}
.welcome-message h2 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: var(--primary);
color: white;
padding: 16px;
border-radius: calc(var(--radius) + 4px);
text-align: center;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.stat-number {
font-size: 24px;
font-weight: 600;
margin-bottom: 4px;
}
.stat-label {
font-size: 14px;
opacity: 0.9;
font-weight: 500;
}
.contact-list {
background: var(--card);
border-radius: calc(var(--radius) + 4px);
overflow: hidden;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
border: 1px solid var(--border);
}
.contact-item {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.contact-item:last-child {
border-bottom: none;
}
.contact-info h4 {
margin-bottom: 4px;
color: var(--foreground);
font-size: 16px;
font-weight: 600;
}
.contact-info p {
color: var(--muted-foreground);
font-size: 14px;
}
.contact-actions {
display: flex;
gap: 8px;
}
.btn-edit {
background-color: transparent;
color: #1976d2;
border: none;
padding: 6px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: color 0.2s;
}
.btn-delete {
background-color: transparent;
color: #111827;
border: none;
padding: 6px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: color 0.2s;
}
.btn-edit:hover {
color: #1251a3;
}
.btn-delete:hover {
color: #374151;
}
/* Azure Dashboard Styles */
.azure-section {
background: var(--card);
border-radius: calc(var(--radius) + 4px);
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
border: 1px solid var(--border);
}
.azure-section h3 {
margin: 0 0 12px 0;
color: var(--primary);
border-bottom: 2px solid var(--primary);
padding-bottom: 6px;
font-weight: 600;
font-size: 16px;
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.btn-refresh {
background: var(--primary);
color: white;
border: none;
padding: 6px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background-color 0.2s;
}
.btn-refresh:hover {
background: color-mix(in srgb, var(--primary) 90%, black);
}
/* Health Status Grid */
.health-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.health-card {
padding: 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--card);
}
.health-card.healthy {
background: color-mix(in srgb, var(--success) 5%, var(--card));
border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.health-card.unhealthy {
background: color-mix(in srgb, var(--destructive) 5%, var(--card));
border-color: color-mix(in srgb, var(--destructive) 30%, var(--border));
}
.health-card h4 {
margin: 0 0 6px 0;
color: var(--primary);
font-size: 14px;
font-weight: 600;
}
.status-indicator {
display: flex;
align-items: center;
gap: 4px;
font-weight: 600;
margin-bottom: 6px;
font-size: 12px;
}
.status-indicator.healthy {
color: var(--success);
}
.status-indicator.unhealthy {
color: var(--destructive);
}
.health-details small {
color: var(--muted-foreground);
font-size: 11px;
}
/* Statistics Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.stats-card {
padding: 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--muted);
}
.stats-card h4 {
margin: 0 0 8px 0;
color: var(--foreground);
font-size: 14px;
font-weight: 600;
}
.stats-content div {
margin: 4px 0;
color: var(--muted-foreground);
font-size: 13px;
}
/* File Upload Section */
.upload-section {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 400px;
}
.file-input {
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 2px);
background: var(--background);
color: var(--foreground);
font-size: 14px;
}
.upload-status {
padding: 6px 10px;
border-radius: calc(var(--radius) - 2px);
background: var(--muted);
border: 1px solid var(--border);
font-size: 13px;
color: var(--muted-foreground);
}
/* Functions Section */
.functions-section {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.btn-secondary {
background: var(--muted);
color: var(--primary);
border: 1px solid var(--primary);
padding: 8px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
}
.btn-ghost {
background: var(--background);
color: var(--foreground);
border: 1px solid var(--border);
padding: 8px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 13px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
}
.btn-ghost:hover {
background: var(--muted);
border-color: var(--primary);
color: var(--primary);
}
.btn-ghost:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-secondary:hover {
background: var(--primary);
color: white;
}
.btn-danger {
background: rgb(153, 0, 0);
color: white;
border: none;
padding: 8px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: background-color 0.2s;
}
.btn-danger:hover:not(:disabled) {
background: rgb(120, 0, 0);
}
.btn-success {
background: #16a34a;
color: white;
border: none;
padding: 8px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: background-color 0.2s;
}
.btn-success:hover:not(:disabled) {
background: #15803d;
}
.btn-warning {
background: var(--destructive);
color: white;
border: none;
padding: 8px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: background-color 0.2s;
}
.btn-warning:hover {
background: color-mix(in srgb, var(--destructive) 90%, black);
}
/* Telemetry Section */
.telemetry-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.telemetry-item {
padding: 8px;
background: var(--muted);
border-radius: calc(var(--radius) - 2px);
text-align: center;
font-size: 13px;
color: var(--muted-foreground);
border: 1px solid var(--border);
}
.recent-events {
margin: 12px 0;
}
.recent-events h4 {
margin: 0 0 8px 0;
color: var(--foreground);
font-size: 14px;
font-weight: 600;
}
.events-list {
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 2px);
padding: 8px;
background: var(--muted);
}
.event-item {
padding: 6px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
.event-item:last-child {
border-bottom: none;
}
.event-time {
color: var(--muted-foreground);
font-size: 11px;
font-weight: 500;
}
.event-details {
color: var(--muted-foreground);
font-size: 11px;
font-style: italic;
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
}
.feature-card {
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: linear-gradient(135deg, var(--card) 0%, var(--muted) 100%);
}
.feature-card h4 {
margin: 0 0 6px 0;
color: var(--foreground);
font-size: 14px;
font-weight: 600;
}
.feature-card p {
margin: 0;
color: var(--muted-foreground);
font-size: 13px;
line-height: 1.4;
}
/* Loading State */
.loading {
text-align: center;
padding: 32px;
color: var(--muted-foreground);
font-size: 14px;
}
@media (max-width: 768px) {
.content {
padding: 20px;
}
.stats-grid,
.health-grid,
.features-grid {
grid-template-columns: 1fr;
}
.functions-section {
flex-direction: column;
}
.dashboard-header {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.telemetry-summary {
grid-template-columns: repeat(2, 1fr);
}
}
/* Azure Configuration Styles */
.azure-config {
max-width: var(--content-width-standard);
min-width: 800px;
margin: 0 auto;
}
.config-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.config-header h3 {
margin: 0;
color: var(--primary);
border-bottom: 2px solid var(--primary);
padding-bottom: 6px;
flex: 1;
font-size: 16px;
font-weight: 600;
}
.config-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
.test-result {
margin: 8px 0;
padding: 6px 10px;
border-radius: calc(var(--radius) - 2px);
font-size: 13px;
background: var(--muted);
border: 1px solid var(--border);
color: var(--muted-foreground);
}
.test-result.success {
background: color-mix(in srgb, var(--success) 10%, var(--background));
border-color: var(--success);
color: var(--success);
}
.test-result.error {
background: color-mix(in srgb, var(--destructive) 10%, var(--background));
border-color: var(--destructive);
color: var(--destructive);
}
.upload-status.success {
background: color-mix(in srgb, var(--success) 10%, var(--background));
border-color: var(--success);
color: var(--success);
}
.upload-status.error {
background: color-mix(in srgb, var(--destructive) 10%, var(--background));
border-color: var(--destructive);
color: var(--destructive);
}
.form-group label {
display: flex;
align-items: center;
gap: 6px;
}
.form-group input[type="checkbox"] {
width: auto;
margin: 0;
accent-color: var(--primary);
}
@media (max-width: 768px) {
.config-grid {
grid-template-columns: 1fr;
}
.config-header {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.azure-config {
padding: 10px;
}
}
/* Home Page Styles */
.home-container {
max-width: var(--content-width-standard);
min-width: 800px;
margin: 0 auto;
}
.welcome-section {
text-align: center;
margin-bottom: 32px;
padding: 24px;
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
}
.welcome-section h2 {
color: var(--primary);
margin-bottom: 12px;
font-size: 24px;
}
.dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.stat-card {
background: var(--card);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
display: flex;
align-items: center;
gap: 16px;
}
.stat-icon {
width: 48px;
height: 48px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.stat-content h3 {
margin: 0;
font-size: 24px;
color: var(--primary);
font-weight: 600;
}
.stat-content p {
margin: 4px 0 0 0;
color: var(--muted-foreground);
font-size: 14px;
}
.quick-actions {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 32px;
}
.quick-actions h3 {
margin-bottom: 16px;
color: var(--primary);
}
.action-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.action-btn {
padding: 12px 20px;
border: none;
border-radius: var(--radius);
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.action-btn.primary {
background: var(--primary);
color: white;
}
.action-btn.primary:hover {
background: color-mix(in srgb, var(--primary) 90%, black);
}
.action-btn.secondary {
background: var(--muted);
color: var(--foreground);
border: 1px solid var(--border);
}
.action-btn.secondary:hover {
background: var(--border);
}
.recent-activity {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.recent-activity h3 {
margin-bottom: 16px;
color: var(--primary);
}
.activity-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.activity-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: var(--muted);
border-radius: calc(var(--radius) - 2px);
}
.activity-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
flex-shrink: 0;
}
.activity-icon.approved {
background: var(--success);
}
.activity-icon.pending {
background: #f59e0b;
}
.activity-icon.submitted {
background: #3b82f6;
}
.activity-content h4 {
margin: 0 0 4px 0;
color: var(--foreground);
font-size: 14px;
}
.activity-content p {
margin: 0 0 4px 0;
color: var(--muted-foreground);
font-size: 13px;
}
.activity-content small {
color: var(--muted-foreground);
font-size: 11px;
}
/* Getting Started Styles */
.getting-started-container {
max-width: var(--content-width-standard);
min-width: 800px;
margin: 0 auto;
}
.page-header {
text-align: center;
margin-bottom: 32px;
padding: 24px;
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
}
.page-header h2 {
color: var(--primary);
margin-bottom: 8px;
font-size: 24px;
}
.getting-started-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.step-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
display: flex;
gap: 20px;
}
.step-number {
width: 40px;
height: 40px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 18px;
flex-shrink: 0;
}
.step-content h3 {
margin-bottom: 12px;
color: var(--foreground);
}
.step-content ul {
margin: 12px 0 16px 0;
padding-left: 20px;
}
.step-content li {
margin-bottom: 4px;
color: var(--muted-foreground);
}
.guide-btn {
background: var(--primary);
color: white;
border: none;
padding: 8px 16px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
.guide-btn:hover {
background: color-mix(in srgb, var(--primary) 90%, black);
}
.help-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-top: 24px;
}
.help-section h3 {
margin-bottom: 16px;
color: var(--primary);
text-align: center;
}
.help-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.help-card {
text-align: center;
padding: 20px;
background: var(--muted);
border-radius: calc(var(--radius) - 2px);
}
.help-card i {
font-size: 32px;
color: var(--primary);
margin-bottom: 12px;
}
.help-card h4 {
margin-bottom: 8px;
color: var(--foreground);
}
.help-card p {
color: var(--muted-foreground);
font-size: 14px;
margin-bottom: 12px;
}
.help-btn {
background: var(--muted);
color: var(--primary);
border: 1px solid var(--primary);
padding: 6px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
}
.help-btn:hover {
background: var(--primary);
color: white;
}
.tips-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-top: 24px;
}
.tips-section h3 {
margin-bottom: 16px;
color: var(--primary);
}
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
.tip-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: var(--muted);
border-radius: calc(var(--radius) - 2px);
}
.tip-item i {
color: var(--primary);
margin-top: 2px;
}
.tip-item p {
margin: 0;
font-size: 14px;
color: var(--foreground);
}
/* Submit Request Styles */
.submit-request-container {
max-width: 1000px;
min-width: 800px;
margin: 0 auto;
width: 100%;
}
.submit-request-container .page-header,
.submit-request-container .submit-request-content {
max-width: 1000px;
width: 100%;
box-sizing: border-box;
}
.progress-steps {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 16px;
}
.progress-steps .step {
padding: 8px 16px;
background: var(--muted);
border-radius: var(--radius);
font-size: 14px;
color: var(--muted-foreground);
}
.progress-steps .step.active {
background: var(--primary);
color: white;
}
.submit-request-content {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-top: 24px;
}
.expense-type-selection h3 {
margin-bottom: 8px;
color: var(--primary);
}
.expense-types-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
.expense-type-card {
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.2s;
background: var(--card);
min-height: 0;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.expense-type-card:hover {
border-color: #16a34a;
background: transparent;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.expense-icon {
width: 28px;
height: 28px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
flex-shrink: 0;
}
.expense-type-card h4 {
margin: 0;
font-size: 13px;
color: var(--foreground);
white-space: nowrap;
}
.expense-form .form-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.btn-back {
background: var(--muted);
color: var(--foreground);
border: 1px solid var(--border);
padding: 8px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.btn-back:hover {
background: var(--border);
}
.form-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 24px;
}
/* Fields that need extra room span 2 columns */
.form-group--wide {
grid-column: span 2;
}
.required {
color: var(--destructive);
margin-left: 4px;
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.btn-primary {
background: var(--primary);
color: white;
border: none;
padding: 10px 20px;
border-radius: var(--radius);
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
.btn-primary:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: auto; /* allow cursor to show but click is blocked by browser */
}
.btn-primary:hover {
background: color-mix(in srgb, var(--primary) 90%, black);
}
.btn-danger {
background: rgb(153, 0, 0);
color: white;
border: none;
padding: 10px 20px;
border-radius: var(--radius);
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
.btn-danger:hover:not(:disabled) {
background: rgb(120, 0, 0);
}
.btn-success {
background: #16a34a;
color: white;
border: none;
padding: 10px 20px;
border-radius: var(--radius);
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
.btn-success:hover:not(:disabled) {
background: #15803d;
}
/* Document Upload Styles */
.document-upload .upload-header {
margin-bottom: 24px;
}
.upload-dropzone {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 40px;
text-align: center;
background: var(--muted);
margin-bottom: 24px;
}
.upload-dropzone i {
font-size: 48px;
color: var(--muted-foreground);
margin-bottom: 12px;
}
.upload-dropzone p {
color: var(--muted-foreground);
margin-bottom: 16px;
}
.upload-btn {
background: var(--primary);
color: white;
padding: 10px 20px;
border-radius: var(--radius);
cursor: pointer;
font-weight: 500;
border: none;
}
.uploaded-files {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
}
.uploaded-files h4 {
margin-bottom: 12px;
color: var(--foreground);
}
.file-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: var(--muted);
border-radius: calc(var(--radius) - 2px);
margin-bottom: 8px;
}
.file-item i {
color: rgb(10, 10, 10);
}
/* ── Document upload — dark mode overrides ─────────────────────────────────── */
body.dark .uploaded-files,
html.dark body .uploaded-files {
background: transparent !important;
border: 1px solid rgb(70, 70, 70) !important;
}
/* Documents inner card */
body.dark .docs-card,
html.dark body .docs-card {
background: transparent !important;
border-color: rgb(70, 70, 70) !important;
}
body.dark .docs-card-title,
html.dark body .docs-card-title {
color: #ffffff !important;
}
/* File rows */
body.dark .file-item,
html.dark body .file-item {
background: transparent !important;
border: 1px solid rgb(93, 93, 93) !important;
color: #ffffff !important;
}
body.dark .file-item i,
html.dark body .file-item i {
color: #ffffff !important;
}
body.dark .file-item span,
html.dark body .file-item span {
color: #ffffff !important;
}
/* Merged-file lock warning paragraph */
body.dark .merge-lock-warning,
html.dark body .merge-lock-warning {
background: transparent !important;
border-color: rgb(93, 93, 93) !important;
color: #ffffff !important;
}
body.dark .merge-lock-warning i,
html.dark body .merge-lock-warning i {
color: #ffffff !important;
}
/* ── Required Documents panel — dark mode ─────────────────────────────────── */
body.dark .req-docs-header,
html.dark body .req-docs-header {
background: transparent !important;
border-bottom-color: rgb(70, 70, 70) !important;
}
/* Header icon + text: keep blue colour — no override needed */
body.dark .req-docs-body,
html.dark body .req-docs-body {
color: #ffffff !important;
}
/* ── "Accepted formats" disclaimer div — dark mode ─────────────────────────── */
body.dark .upload-disclaimer,
html.dark body .upload-disclaimer {
background: transparent !important;
border-color: rgb(93, 93, 93) !important;
color: #ffffff !important;
}
body.dark .upload-disclaimer span,
html.dark body .upload-disclaimer span {
color: #ffffff !important;
}
body.dark .upload-disclaimer i,
html.dark body .upload-disclaimer i {
color: #ffffff !important;
}
/* ── Merge-status badge spans — transparent bg in dark mode ─────────────────── */
body.dark .merge-badge,
html.dark body .merge-badge {
background: transparent !important;
color: #ffffff !important;
border-color: rgb(93, 93, 93) !important;
}
body.dark .merge-badge i,
html.dark body .merge-badge i {
color: #ffffff !important;
}
/* Merge PDF button — keep green when enabled in dark mode */
body.dark button[style*="198754"],
html.dark body button[style*="198754"] {
background: #198754 !important;
color: #ffffff !important;
}
body.dark button[style*="198754"]:hover:not(:disabled),
html.dark body button[style*="198754"]:hover:not(:disabled) {
background: #157347 !important;
}
/* Blue (primary) buttons — keep #0d6efd in dark mode */
body.dark button[style*="0d6efd"]:not(:disabled),
html.dark body button[style*="0d6efd"]:not(:disabled),
body.dark button.btn-primary:not(:disabled),
html.dark body button.btn-primary:not(:disabled) {
background: #0d6efd !important;
background-color: #0d6efd !important;
color: #ffffff !important;
border-color: #0d6efd !important;
}
body.dark button[style*="0d6efd"]:hover:not(:disabled),
html.dark body button[style*="0d6efd"]:hover:not(:disabled),
body.dark button.btn-primary:hover:not(:disabled),
html.dark body button.btn-primary:hover:not(:disabled) {
background: #0b5ed7 !important;
background-color: #0b5ed7 !important;
color: #ffffff !important;
border-color: #0b5ed7 !important;
}
/* Disabled primary buttons — dim them so they look inactive */
body.dark button.btn-primary:disabled,
html.dark body button.btn-primary:disabled {
background: #4b5563 !important;
background-color: #4b5563 !important;
color: #9ca3af !important;
border-color: #4b5563 !important;
cursor: not-allowed !important;
opacity: 0.6 !important;
}
.file-size {
color: var(--muted-foreground);
font-size: 12px;
}
.remove-file {
background: rgb(153 0 0 / 30%);
color: white;
border: none;
padding: 4px 6px;
border-radius: 50%;
cursor: pointer;
font-size: 10px;
margin-left: auto;
}
.upload-actions {
display: flex;
justify-content: space-between;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
/* Confirmation Styles */
.request-confirmation {
text-align: center;
width: 100%;
max-width: 100%;
margin: 0;
}
.confirmation-icon {
font-size: 64px;
color: var(--success);
margin-bottom: 20px;
}
.request-confirmation h3 {
color: var(--success);
margin-bottom: 20px;
font-size: 24px;
}
.request-details {
background: var(--muted);
padding: 20px;
border-radius: var(--radius);
margin-bottom: 24px;
}
.request-code {
font-size: 20px;
font-weight: 600;
color: var(--primary);
background: var(--card);
padding: 12px;
border-radius: calc(var(--radius) - 2px);
margin: 12px 0;
border: 2px solid var(--primary);
}
.next-steps {
text-align: left;
background: var(--card);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
}
.next-steps h4 {
color: var(--primary);
margin-bottom: 12px;
}
.next-steps ol {
padding-left: 20px;
}
.next-steps li {
margin-bottom: 8px;
color: var(--foreground);
}
.confirmation-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.dashboard-stats {
grid-template-columns: 1fr;
}
.action-buttons {
flex-direction: column;
}
.step-section {
flex-direction: column;
}
.help-cards {
grid-template-columns: 1fr;
}
.tips-grid {
grid-template-columns: 1fr;
}
.expense-types-grid {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: repeat(2, 1fr);
}
.upload-actions,
.confirmation-actions {
flex-direction: column;
}
.expense-form .form-header {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
}
/* Profile Styles */
.profile-container {
max-width: var(--content-width-standard);
min-width: 800px;
margin: 0 auto;
}
.profile-header {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.profile-info {
display: flex;
align-items: center;
gap: 16px;
}
.profile-avatar {
width: 64px;
height: 64px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: 600;
}
.profile-info h2 {
margin: 0 0 4px 0;
color: var(--foreground);
}
.profile-info p {
margin: 0;
color: var(--muted-foreground);
font-size: 14px;
}
.user-role {
font-weight: 500;
color: var(--primary) !important;
}
.profile-actions {
display: flex;
gap: 12px;
}
.profile-tabs {
display: flex;
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
overflow: hidden;
}
.tab-button {
flex: 1;
padding: 12px 20px;
background: transparent;
border: none;
border-right: 1px solid var(--border);
cursor: pointer;
transition: background-color 0.2s;
font-weight: 500;
}
.tab-button:last-child {
border-right: none;
}
.tab-button:hover {
background: var(--muted);
}
.tab-button.active {
background: var(--primary);
color: white;
}
.profile-content {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.profile-section h3 {
color: var(--primary);
margin-bottom: 20px;
font-size: 18px;
}
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.profile-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-field label {
font-weight: 500;
color: var(--foreground);
font-size: 14px;
}
.profile-value {
color: var(--muted-foreground);
font-size: 14px;
}
.notification-options {
display: flex;
flex-direction: column;
gap: 16px;
}
.notification-item {
padding: 16px;
background: var(--muted);
border-radius: calc(var(--radius) - 2px);
}
.notification-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
cursor: pointer;
}
.notification-item p {
margin: 8px 0 0 24px;
color: var(--muted-foreground);
font-size: 13px;
}
.approval-limits {
display: flex;
flex-direction: column;
gap: 12px;
}
.limit-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: var(--muted);
border-radius: calc(var(--radius) - 2px);
}
.limit-amount {
font-weight: 600;
color: var(--primary);
}
.limit-note {
margin-top: 16px;
padding: 12px;
background: var(--secondary);
border-radius: calc(var(--radius) - 2px);
color: var(--muted-foreground);
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
/* Submissions Styles */
.submissions-container {
max-width: var(--content-width-table);
min-width: 800px;
margin: 0 auto;
}
.submissions-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
background: var(--card);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-group label {
font-weight: 500;
color: var(--foreground);
font-size: 14px;
}
.submissions-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.summary-card {
background: var(--card);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
text-align: center;
}
.summary-card h4 {
margin: 0 0 8px 0;
color: var(--muted-foreground);
font-size: 14px;
font-weight: 500;
}
.summary-number {
font-size: 24px;
font-weight: 600;
color: var(--muted-foreground);
}
.summary-number.success {
color: var(--success);
}
.summary-number.warning {
color: #f59e0b;
}
.summary-number.danger {
color: var(--destructive);
}
.submissions-table {
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
overflow-x: auto; /* horizontal scroll when columns are cut off */
}
.submissions-table table {
width: 100%;
min-width: 700px; /* never collapse below readable column widths */
border-collapse: collapse;
}
.submissions-table th {
background: var(--muted);
padding: 12px;
text-align: left;
font-weight: 600;
color: var(--foreground);
font-size: 14px;
border-bottom: 1px solid var(--border);
}
.submissions-table td {
padding: 12px;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.submissions-table tr:last-child td {
border-bottom: none;
}
.submissions-table tr:hover {
background: rgba(0,0,0,0.04);
}
.status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
text-transform: capitalize;
}
.status.success {
background: color-mix(in srgb, var(--success) 20%, transparent);
color: var(--success);
}
.status.warning {
background: color-mix(in srgb, #f59e0b 20%, transparent);
color: #f59e0b;
}
.status.danger {
background: color-mix(in srgb, var(--destructive) 20%, transparent);
color: var(--destructive);
}
.status.info {
background: color-mix(in srgb, #3b82f6 20%, transparent);
color: #3b82f6;
}
.status.in-progress {
background: color-mix(in srgb, #ea580c 20%, transparent);
color: #c2410c;
}
.status.secondary {
background: color-mix(in srgb, var(--muted-foreground) 15%, transparent);
color: var(--muted-foreground);
}
.btn-view {
background: var(--primary);
color: white;
border: none;
padding: 6px 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
gap: 4px;
transition: background-color 0.2s;
}
.btn-view:hover {
background: color-mix(in srgb, var(--primary) 90%, black);
}
.no-submissions {
padding: 40px;
text-align: center;
color: var(--muted-foreground);
}
.no-submissions i {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
/* Modal Styles */
.submission-details-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
width: 100%;
max-width: 800px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
}
.modal-header h3 {
margin: 0;
color: var(--primary);
}
.modal-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--muted-foreground);
padding: 4px;
}
.modal-close:hover {
color: var(--foreground);
}
.modal-body {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.detail-section {
margin-bottom: 24px;
}
.detail-section h4 {
color: var(--primary);
margin-bottom: 12px;
font-size: 16px;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.detail-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-item.full-width {
grid-column: 1 / -1;
}
.detail-item label {
font-weight: 500;
color: var(--muted-foreground);
font-size: 12px;
text-transform: uppercase;
}
.detail-item span {
color: var(--foreground);
}
/* Placeholder Styles */
.page-placeholder {
text-align: center;
max-width: 600px;
margin: 0 auto;
padding: 40px 20px;
}
.page-placeholder h2 {
color: var(--primary);
margin-bottom: 12px;
}
.page-placeholder p {
color: var(--muted-foreground);
margin-bottom: 32px;
}
.coming-soon {
background: var(--card);
padding: 40px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.coming-soon i {
font-size: 64px;
color: var(--muted-foreground);
margin-bottom: 16px;
opacity: 0.5;
}
.coming-soon p {
color: var(--muted-foreground);
font-size: 18px;
margin: 0;
}
/* PostgreSQL Database Styles */
.postgresql-database {
max-width: var(--content-width-table);
min-width: 800px;
margin: 0 auto;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.page-header h2 {
color: var(--primary);
margin: 0;
font-size: 24px;
display: flex;
align-items: center;
gap: 8px;
}
.page-header p {
margin: 4px 0 0 0;
color: var(--muted-foreground);
font-size: 14px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: var(--radius);
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
font-size: 14px;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.btn-primary:hover:not(:disabled) {
background: color-mix(in srgb, var(--primary) 90%, black);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.loading-spinner {
text-align: center;
padding: 60px 20px;
color: var(--muted-foreground);
}
.loading-spinner i {
font-size: 32px;
margin-bottom: 16px;
color: var(--primary);
}
.loading-spinner p {
font-size: 16px;
margin: 0;
}
.alert {
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.alert-danger {
background: color-mix(in srgb, var(--destructive) 10%, var(--card));
border: 1px solid color-mix(in srgb, var(--destructive) 30%, var(--border));
color: var(--destructive);
}
/* Database Health Card */
.db-health-card {
background: var(--card);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
}
.db-health-card h3 {
color: var(--primary);
margin: 0 0 16px 0;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.health-info {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.health-status {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: var(--radius);
font-weight: 500;
}
.health-status.healthy {
background: color-mix(in srgb, var(--success) 10%, var(--card));
color: var(--success);
border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
}
.health-status.error {
background: color-mix(in srgb, var(--destructive) 10%, var(--card));
color: var(--destructive);
border: 1px solid color-mix(in srgb, var(--destructive) 30%, var(--border));
}
.health-details {
flex: 1;
}
.health-details p {
margin: 4px 0;
font-size: 13px;
color: var(--muted-foreground);
}
.health-details strong {
color: var(--foreground);
}
/* Database Tabs */
.db-tabs {
display: flex;
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
overflow: hidden;
}
.tab-btn {
flex: 1;
padding: 12px 16px;
background: transparent;
border: none;
border-right: 1px solid var(--border);
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
color: var(--foreground);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
}
.tab-btn:last-child {
border-right: none;
}
.tab-btn:hover {
background: var(--muted);
}
.tab-btn.active {
background: var(--primary);
color: white;
}
.tab-btn i {
font-size: 14px;
}
/* Tab Content */
.tab-content {
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
padding: 24px;
}
/* Overview Tab Styles */
.overview-tab .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.overview-tab .stat-card {
background: var(--muted);
padding: 20px;
border-radius: var(--radius);
display: flex;
align-items: center;
gap: 16px;
border: 1px solid var(--border);
}
.overview-tab .stat-icon {
width: 48px;
height: 48px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
flex-shrink: 0;
}
.overview-tab .stat-info h3 {
margin: 0;
font-size: 24px;
color: var(--primary);
font-weight: 600;
}
.overview-tab .stat-info p {
margin: 4px 0 0 0;
color: var(--muted-foreground);
font-size: 14px;
}
.recent-activity {
margin-top: 24px;
}
.recent-activity h3 {
color: var(--primary);
margin: 0 0 16px 0;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.activity-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.activity-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--muted);
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--border);
}
.activity-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
flex-shrink: 0;
background: var(--primary);
}
.activity-content {
flex: 1;
}
.activity-content h4 {
margin: 0 0 4px 0;
color: var(--foreground);
font-size: 14px;
}
.activity-content p {
margin: 0 0 4px 0;
font-size: 13px;
}
.activity-content small {
color: var(--muted-foreground);
font-size: 11px;
}
/* Data Table Styles */
.data-table {
overflow-x: auto;
margin-top: 16px;
}
/* Truncated table cell — pairs with window.truncCell() in api.js.
Apply className="cell-truncate" on a | and set title={fullValue}.
The cell will clip at max-width and show "…"; hovering shows the tooltip. */
.cell-truncate {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.data-table table {
width: 100%;
min-width: 700px; /* triggers horizontal scroll on .data-table wrapper */
border-collapse: collapse;
font-size: 14px;
}
.data-table th {
background: var(--muted);
padding: 2px 12px;
text-align: left;
font-weight: 600;
font-size: 12px;
color: var(--muted-foreground);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.data-table td {
padding: 2px 12px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover {
background: rgba(0,0,0,0.04);
}
.data-table .no-data {
text-align: center;
color: var(--muted-foreground);
font-style: italic;
padding: 40px 12px;
}
.data-table .no-data i {
margin-right: 8px;
color: var(--primary);
}
/* User/Contact Cell Styles */
.user-cell, .contact-cell, .submission-cell {
display: flex;
align-items: center;
gap: 8px;
}
.user-avatar {
width: 32px;
height: 32px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 12px;
flex-shrink: 0;
}
.submission-cell {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.submission-cell strong {
color: var(--foreground);
font-size: 14px;
}
.submission-cell small {
color: var(--muted-foreground);
font-size: 12px;
line-height: 1.3;
}
/* Badge Styles */
.badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
text-transform: capitalize;
white-space: nowrap;
}
.badge-primary {
background: color-mix(in srgb, var(--primary) 20%, transparent);
color: var(--primary);
}
.badge-secondary {
background: color-mix(in srgb, var(--muted-foreground) 20%, transparent);
color: var(--muted-foreground);
}
.badge-success {
background: color-mix(in srgb, var(--success) 20%, transparent);
color: var(--success);
}
.badge-warning {
background: color-mix(in srgb, #f59e0b 20%, transparent);
color: #f59e0b;
}
.badge-danger {
background: color-mix(in srgb, var(--destructive) 20%, transparent);
color: var(--destructive);
}
.badge-info {
background: color-mix(in srgb, #3b82f6 20%, transparent);
color: #3b82f6;
}
/* Tab Headers */
.users-tab h3, .contacts-tab h3, .submissions-tab h3 {
color: var(--primary);
margin: 0 0 16px 0;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
/* Responsive Design */
@media (max-width: 1200px) {
.data-table {
font-size: 13px;
}
.data-table th,
.data-table td {
padding: 8px;
}
}
@media (max-width: 768px) {
.page-header {
flex-direction: column;
text-align: center;
}
.health-info {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.db-tabs {
flex-direction: column;
}
.tab-btn {
border-right: none;
border-bottom: 1px solid var(--border);
}
.tab-btn:last-child {
border-bottom: none;
}
.overview-tab .stats-grid {
grid-template-columns: 1fr;
}
.overview-tab .stat-card {
justify-content: center;
text-align: center;
}
.data-table {
font-size: 12px;
}
.submission-cell {
max-width: 200px;
}
.submission-cell small {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (max-width: 480px) {
.tab-content {
padding: 16px;
}
.data-table th,
.data-table td {
padding: 6px;
font-size: 11px;
}
.user-avatar {
width: 24px;
height: 24px;
font-size: 10px;
}
.badge {
font-size: 10px;
padding: 2px 6px;
}
}
/* Azure Service Pages Styles */
.azure-service-page {
max-width: var(--content-width-standard);
min-width: 800px;
margin: 0 auto;
}
.service-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
gap: 20px;
flex-wrap: wrap;
}
.service-header h2 {
color: var(--primary);
margin: 0 0 8px 0;
font-size: 24px;
font-weight: 600;
}
.service-description {
color: var(--muted-foreground);
font-size: 14px;
line-height: 1.5;
margin: 0;
max-width: 600px;
}
.header-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.service-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.config-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.config-section h3 {
color: var(--primary);
margin: 0 0 20px 0;
font-size: 18px;
font-weight: 600;
border-bottom: 2px solid var(--primary);
padding-bottom: 8px;
}
.form-help {
display: block;
font-size: 12px;
color: var(--muted-foreground);
margin-top: 4px;
line-height: 1.3;
}
.status-message {
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 20px;
font-size: 14px;
font-weight: 500;
}
.status-message.success {
background: color-mix(in srgb, var(--success) 10%, var(--background));
border: 1px solid var(--success);
color: var(--success);
}
.status-message.error {
background: color-mix(in srgb, var(--destructive) 10%, var(--background));
border: 1px solid var(--destructive);
color: var(--destructive);
}
.btn-info {
background: #3b82f6;
color: white;
border: none;
padding: 8px 16px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background-color 0.2s;
}
.btn-info:hover {
background: #2563eb;
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
}
.btn-danger {
background: rgb(153, 0, 0);
color: white;
border: none;
padding: 8px 16px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background-color 0.2s;
}
.btn-danger:hover {
background: rgb(120, 0, 0);
}
/* Secrets Section */
.secrets-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.secrets-section h3 {
color: var(--primary);
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
}
.secrets-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.secret-item {
background: var(--muted);
padding: 16px;
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--border);
}
.secret-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.secret-name {
font-weight: 600;
color: var(--foreground);
}
.secret-version {
font-size: 12px;
color: var(--muted-foreground);
background: var(--background);
padding: 2px 6px;
border-radius: 4px;
}
.secret-meta {
display: flex;
gap: 16px;
}
.secret-meta small {
color: var(--muted-foreground);
font-size: 11px;
}
/* Metrics Section */
.metrics-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.metrics-section h3 {
color: var(--primary);
margin: 0 0 20px 0;
font-size: 18px;
font-weight: 600;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.metric-card {
background: var(--muted);
padding: 20px;
border-radius: calc(var(--radius) - 2px);
text-align: center;
border: 1px solid var(--border);
}
.metric-card h4 {
margin: 0 0 8px 0;
color: var(--foreground);
font-size: 14px;
font-weight: 500;
}
.metric-value {
font-size: 24px;
font-weight: 600;
color: var(--primary);
margin-bottom: 4px;
}
.metric-card small {
color: var(--muted-foreground);
font-size: 11px;
}
/* Upload Section */
.upload-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.upload-section h3 {
color: var(--primary);
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
}
.upload-controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.file-input {
flex: 1;
min-width: 200px;
}
/* Containers Section */
.containers-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.containers-section h3 {
color: var(--primary);
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
}
.containers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.container-card {
background: var(--muted);
padding: 16px;
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--border);
}
.container-card h4 {
margin: 0 0 8px 0;
color: var(--foreground);
font-size: 16px;
font-weight: 600;
}
.container-card p {
margin: 4px 0;
color: var(--muted-foreground);
font-size: 13px;
}
/* User Assigned Identities */
.user-identities-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.section-header h3 {
color: var(--primary);
margin: 0;
font-size: 18px;
font-weight: 600;
}
.identity-card {
background: var(--muted);
padding: 20px;
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--border);
margin-bottom: 16px;
}
.identity-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.identity-header h4 {
margin: 0;
color: var(--foreground);
font-size: 16px;
font-weight: 600;
}
.identity-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
/* Resources Section */
.resources-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.resources-section h3 {
color: var(--primary);
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
}
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
}
.resource-checkbox {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
background: var(--muted);
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--border);
cursor: pointer;
transition: background-color 0.2s;
}
.resource-checkbox:hover {
background: var(--border);
}
.resource-checkbox input[type="checkbox"] {
margin-right: 8px;
}
.resource-checkbox span {
font-weight: 500;
color: var(--foreground);
font-size: 14px;
}
.resource-checkbox small {
color: var(--muted-foreground);
font-size: 12px;
margin-left: 24px;
}
/* Identity Info Section */
.identity-info-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.identity-info-section h3 {
color: var(--primary);
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
}
.info-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.info-card {
background: var(--muted);
padding: 16px;
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--border);
text-align: center;
}
.info-card h4 {
margin: 0 0 8px 0;
color: var(--foreground);
font-size: 16px;
font-weight: 600;
}
.info-card p {
margin: 4px 0;
color: var(--muted-foreground);
font-size: 14px;
}
/* Info Section */
.info-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 24px;
}
.info-box {
background: var(--card);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.info-box h4 {
color: var(--primary);
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.info-box ul {
margin: 0;
padding-left: 20px;
color: var(--muted-foreground);
font-size: 14px;
line-height: 1.5;
}
.info-box ol {
margin: 0;
padding-left: 20px;
color: var(--muted-foreground);
font-size: 14px;
line-height: 1.5;
}
.info-box li {
margin-bottom: 4px;
}
.info-box.security-benefits {
background: linear-gradient(135deg,
color-mix(in srgb, var(--success) 5%, var(--card)) 0%,
var(--card) 100%);
border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.identity-types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-top: 12px;
}
.identity-type {
background: var(--muted);
padding: 12px;
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--border);
}
.identity-type h5 {
margin: 0 0 8px 0;
color: var(--primary);
font-size: 14px;
font-weight: 600;
}
.identity-type p {
margin: 0;
color: var(--muted-foreground);
font-size: 13px;
line-height: 1.4;
}
/* Responsive Design for Azure Service Pages */
@media (max-width: 1024px) {
.service-header {
flex-direction: column;
align-items: stretch;
}
.header-actions {
justify-content: flex-start;
}
.info-section {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.config-grid {
grid-template-columns: 1fr;
}
.metrics-grid,
.containers-grid,
.resources-grid {
grid-template-columns: 1fr;
}
.upload-controls {
flex-direction: column;
align-items: stretch;
}
.file-input {
min-width: auto;
}
.identity-fields {
grid-template-columns: 1fr;
}
.header-actions {
flex-direction: column;
align-items: stretch;
}
.resource-checkbox small {
margin-left: 0;
margin-top: 4px;
}
.identity-types {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.service-header {
padding: 16px;
}
.config-section,
.secrets-section,
.metrics-section,
.upload-section,
.containers-section,
.user-identities-section,
.resources-section,
.identity-info-section {
padding: 16px;
}
.section-header {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
}
/* Database Configuration Styles */
.config-tab {
padding: 0;
}
.config-section {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
}
.config-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.config-header h4 {
color: var(--primary);
margin: 0;
font-size: 18px;
font-weight: 600;
}
.config-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.config-status {
padding: 8px 12px;
border-radius: var(--radius);
margin-bottom: 16px;
font-size: 14px;
font-weight: 500;
}
.config-status.success {
background: color-mix(in srgb, var(--success) 10%, var(--background));
border: 1px solid var(--success);
color: var(--success);
}
.config-status.error {
background: color-mix(in srgb, var(--destructive) 10%, var(--background));
border: 1px solid var(--destructive);
color: var(--destructive);
}
.config-status.warning {
background: color-mix(in srgb, #f59e0b 10%, var(--background));
border: 1px solid #f59e0b;
color: #f59e0b;
}
.test-result {
padding: 8px 12px;
border-radius: var(--radius);
margin-bottom: 16px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.test-result.success {
background: color-mix(in srgb, var(--success) 10%, var(--background));
border: 1px solid var(--success);
color: var(--success);
}
.test-result.error {
background: color-mix(in srgb, var(--destructive) 10%, var(--background));
border: 1px solid var(--destructive);
color: var(--destructive);
}
.config-form {
margin: 20px 0;
}
.form-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-hint {
display: block;
font-size: 12px;
color: var(--muted-foreground);
margin-top: 4px;
line-height: 1.3;
}
.connection-string {
min-height: 80px;
resize: vertical;
font-family: 'Courier New', monospace;
font-size: 13px;
}
.config-info {
background: var(--muted);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-top: 24px;
}
.config-info h5 {
color: var(--primary);
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.config-info ul {
margin: 0;
padding-left: 20px;
color: var(--muted-foreground);
font-size: 14px;
line-height: 1.6;
}
.config-info li {
margin-bottom: 6px;
}
/* SQL Server Database Styles */
.sqlserver-database {
max-width: var(--content-width-table);
min-width: 800px;
margin: 0 auto;
}
/* SQL Server Features Grid */
.sqlserver-features {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
}
.sqlserver-features h3 {
color: var(--primary);
margin: 0 0 20px 0;
font-size: 18px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.feature-card {
background: var(--muted);
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
display: flex;
gap: 16px;
align-items: flex-start;
}
.feature-icon {
width: 40px;
height: 40px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
flex-shrink: 0;
}
.feature-content h4 {
margin: 0 0 6px 0;
color: var(--foreground);
font-size: 16px;
font-weight: 600;
}
.feature-content p {
margin: 0;
color: var(--muted-foreground);
font-size: 14px;
line-height: 1.4;
}
/* Responsive adjustments for configuration */
@media (max-width: 768px) {
.config-header {
flex-direction: column;
align-items: stretch;
}
.config-actions {
justify-content: stretch;
}
.config-actions button {
flex: 1;
}
.form-grid {
grid-template-columns: repeat(2, 1fr);
}
.features-grid {
grid-template-columns: 1fr;
}
.feature-card {
flex-direction: column;
text-align: center;
align-items: center;
}
}
@media (max-width: 480px) {
.config-section {
padding: 16px;
}
.config-actions {
flex-direction: column;
gap: 8px;
}
}
/* Enhanced Admin Dashboard Styles */
.admin-dashboard {
max-width: var(--content-width-table);
min-width: 800px;
margin: 0 auto;
}
.admin-dashboard.changelog-page {
max-width: 1000px;
min-width: 1000px;
}
.admin-dashboard.changelog-page .admin-header {
max-width: 1000px;
min-width: 1000px;
}
.admin-header {
background: var(--card);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
text-align: center;
max-width: var(--content-width-table);
min-width: 1000px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.admin-header h2 {
color: var(--primary);
margin: 0 0 8px 0;
font-size: 28px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.admin-header p {
color: var(--muted-foreground);
margin: 0;
font-size: 16px;
}
.admin-tabs {
display: flex;
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
margin-bottom: 24px;
overflow: hidden;
}
.admin-tabs .tab {
flex: 1;
padding: 16px 20px;
background: transparent;
border: none;
border-right: 1px solid var(--border);
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
color: var(--foreground);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 15px;
min-height: 56px;
}
.admin-tabs .tab:last-child {
border-right: none;
}
.admin-tabs .tab:hover {
background: var(--muted);
}
.admin-tabs .tab.active {
background: var(--primary);
color: white;
}
.admin-content {
max-width: var(--content-width-table);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.admin-loading {
text-align: center;
padding: 60px 20px;
color: var(--muted-foreground);
}
.admin-loading i {
font-size: 40px;
margin-bottom: 16px;
color: var(--primary);
animation: spin 1s linear infinite;
}
@keyframes indeterminate-slide {
0% { transform: translateX(-150%); }
100% { transform: translateX(350%); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.admin-loading p {
font-size: 16px;
margin: 0;
}
.error-message {
background: color-mix(in srgb, var(--destructive) 10%, var(--background));
border: 1px solid var(--destructive);
color: var(--destructive);
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.error-message button {
background: none;
border: none;
color: var(--destructive);
cursor: pointer;
font-size: 18px;
margin-left: auto;
padding: 0 4px;
}
/* Admin Overview Styles */
.admin-overview .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
.admin-overview .stat-card {
background: var(--muted);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
display: flex;
align-items: center;
gap: 16px;
transition: transform 0.2s;
}
.admin-overview .stat-card:hover {
transform: translateY(-2px);
}
.admin-overview .stat-icon {
width: 56px;
height: 56px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
flex-shrink: 0;
}
.admin-overview .stat-number {
font-size: 32px;
font-weight: 600;
color: var(--primary);
margin: 0;
}
.admin-overview .stat-label {
color: var(--muted-foreground);
font-size: 14px;
margin: 4px 0 0 0;
font-weight: 500;
}
/* SQL Server Configuration Styles */
.sql-server-config {
background: var(--muted);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
margin-top: 24px;
}
.sql-server-config h3 {
color: var(--primary);
margin: 0 0 20px 0;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 2px solid var(--primary);
padding-bottom: 8px;
}
.config-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.config-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: var(--card);
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 2px);
gap: 12px;
}
.config-item label {
font-weight: 500;
color: var(--foreground);
font-size: 14px;
flex-shrink: 0;
}
.config-item span {
color: var(--muted-foreground);
font-size: 14px;
word-break: break-all;
text-align: right;
}
.status.healthy {
background: color-mix(in srgb, var(--success) 20%, transparent);
color: var(--success);
padding: 4px 8px;
border-radius: 12px;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
}
.status.error {
background: color-mix(in srgb, var(--destructive) 20%, transparent);
color: var(--destructive);
padding: 4px 8px;
border-radius: 12px;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
}
/* User and Contact Management Styles */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.section-header h3 {
color: var(--primary);
margin: 0;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.table-container {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow-x: auto;
background: var(--card);
}
.data-table {
width: 100%;
min-width: 700px; /* triggers horizontal scroll on .table-container wrapper */
border-collapse: collapse;
font-size: 14px;
}
.data-table th {
background: var(--muted);
padding: 2px 12px;
text-align: left;
font-weight: 600;
font-size: 12px;
color: var(--muted-foreground);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.data-table td {
padding: 2px 12px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
color: var(--foreground);
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover {
background: rgba(0,0,0,0.04);
}
.role-badge {
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
text-transform: capitalize;
white-space: nowrap;
}
.role-badge.administrator {
background: #fffbeb;
color: #92400e;
border: 1px solid #fcd34d;
font-weight: 600;
}
.role-badge.system-admin {
background: color-mix(in srgb, var(--destructive) 20%, transparent);
color: var(--destructive);
}
.role-badge.it-admin,
.role-badge.ap-admin {
background: color-mix(in srgb, #ea580c 20%, transparent);
color: #c2410c;
}
.role-badge.manager {
background: color-mix(in srgb, #00a4ef 20%, transparent);
color: #00a4ef;
}
.role-badge.user {
background: transparent;
color: var(--muted-foreground);
}
.idp-badge {
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.idp-badge.local {
background-color: color-mix(in srgb, var(--muted-foreground) 20%, transparent);
color: var(--muted-foreground);
}
.idp-badge.microsoft {
background-color: color-mix(in srgb, #00a4ef 20%, transparent);
color: #00a4ef;
}
.idp-badge.kaizenauto {
background-color: color-mix(in srgb, #16a34a 20%, transparent);
color: #15803d;
font-weight: 600;
}
.btn-sm {
padding: 6px 10px;
font-size: 12px;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
transition: background-color 0.2s;
border: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0 2px;
}
.btn-sm.btn-view {
background: transparent;
color: #6b7280;
border: none;
}
.btn-sm.btn-view:hover {
color: #374151;
background: transparent;
}
.btn-sm.btn-edit {
background: transparent;
color: #1976d2;
border: none;
}
.btn-sm.btn-edit:hover {
color: #1251a3;
background: transparent;
}
.btn-sm.btn-delete {
background: transparent;
color: #111827;
border: none;
}
.btn-sm.btn-delete:hover {
color: #374151;
background: transparent;
}
/* Modal Styles for Admin Forms */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-content {
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
background: var(--muted);
}
.modal-header h3 {
margin: 0;
color: var(--primary);
font-size: 18px;
font-weight: 600;
}
.modal-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--muted-foreground);
padding: 4px;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.modal-close:hover {
background: var(--border);
color: var(--foreground);
}
.modal-content form {
padding: 24px;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
/* Responsive Design for Admin Dashboard */
@media (max-width: 1024px) {
.admin-dashboard {
margin: 0 16px;
}
.config-grid {
grid-template-columns: 1fr;
}
.admin-overview .stats-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (max-width: 768px) {
.admin-tabs {
flex-direction: column;
}
.admin-tabs .tab {
border-right: none;
border-bottom: 1px solid var(--border);
}
.admin-tabs .tab:last-child {
border-bottom: none;
}
.section-header {
flex-direction: column;
align-items: stretch;
}
.data-table {
font-size: 13px;
}
.data-table th,
.data-table td {
padding: 8px;
}
.config-item {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.config-item span {
text-align: left;
}
}
@media (max-width: 480px) {
.admin-content {
padding: 16px;
}
.admin-header {
padding: 16px;
}
.admin-header h2 {
font-size: 24px;
flex-direction: column;
gap: 8px;
}
.sql-server-config {
padding: 16px;
}
.modal-content {
margin: 10px;
}
.modal-content form {
padding: 16px;
}
.data-table th,
.data-table td {
padding: 6px;
font-size: 12px;
}
.btn-sm {
padding: 4px 6px;
font-size: 11px;
}
}
/* Status and Priority Badges for Submissions */
.status-badge, .priority-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge.pending {
background-color: #ffeaa7;
color: #e17055;
}
.status-badge.in-progress {
background-color: #74b9ff;
color: #0984e3;
}
.status-badge.completed {
background-color: #00b894;
color: #ffffff;
}
.status-badge.cancelled {
background-color: #fd79a8;
color: #e84393;
}
.priority-badge.low {
background-color: #ddd;
color: #666;
}
.priority-badge.medium {
background-color: #ffeaa7;
color: #e17055;
}
.priority-badge.high {
background-color: #fd79a8;
color: #e84393;
}
.priority-badge.urgent {
background-color: #e17055;
color: #ffffff;
}
/* ── Status & priority badge dark mode overrides ───────────────────────── */
body.dark .status-badge,
html.dark body .status-badge,
body.dark .priority-badge,
html.dark body .priority-badge {
background-color: transparent !important;
border: 1px solid var(--border) !important;
color: var(--sidebar-foreground) !important;
}
/* .status.* variants (color-mix based) — replace background with card-safe tint */
body.dark .status.success,
html.dark body .status.success,
body.dark .status.warning,
html.dark body .status.warning,
body.dark .status.danger,
html.dark body .status.danger,
body.dark .status.info,
html.dark body .status.info,
body.dark .status.in-progress,
html.dark body .status.in-progress {
background: transparent !important;
border: 1px solid var(--border) !important;
color: var(--sidebar-foreground) !important;
}
/* Table styles for descriptions */
.description-cell {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-info {
position: relative;
cursor: pointer;
}
.profile-dropdown {
position: absolute;
top: 100%;
right: 0;
background-color: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
padding: 8px;
width: 220px;
z-index: 1001;
margin-top: 8px;
}
.profile-dropdown-header {
padding: 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
}
.profile-dropdown-header h4 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.profile-dropdown-header p {
margin: 0;
font-size: 12px;
color: var(--muted-foreground);
}
.profile-dropdown-item {
padding: 8px;
font-size: 14px;
}
.profile-dropdown-item strong {
font-weight: 600;
margin-right: 8px;
}
/* App Footer Styles */
.app-footer {
display: flex;
align-items: center;
justify-content: flex-start;
height: 25px;
min-height: 25px;
max-height: 25px;
padding: 0 12px;
background-color: var(--sidebar);
color: var(--foreground);
font-size: 11px;
border-top: 1px solid rgb(209, 213, 219);
gap: 16px;
overflow: hidden;
flex-shrink: 0;
}
.app-footer.status-connected {
border-top: 1px solid rgb(209, 213, 219);
}
.footer-section {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex-shrink: 1;
}
.footer-icon {
font-size: 12px;
flex-shrink: 0;
}
.footer-text {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
}
.footer-text strong {
font-weight: 600;
opacity: 0.8;
font-size: 10px;
}
.footer-text span {
font-weight: 500;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.footer-section.details {
flex-grow: 1;
opacity: 0.9;
min-width: 0;
}
.footer-section.details .footer-text {
width: 100%;
}
.footer-section.details span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Responsive Footer */
@media (max-width: 1200px) {
.app-footer {
font-size: 10px;
gap: 8px;
padding: 5px 10px;
}
.footer-section {
gap: 4px;
}
.footer-text strong {
font-size: 9px;
}
.footer-text span {
font-size: 10px;
}
.footer-icon {
font-size: 11px;
}
}
@media (max-width: 768px) {
.app-footer {
gap: 6px;
padding: 4px 8px;
font-size: 9px;
}
.footer-section {
gap: 3px;
}
.footer-text {
line-height: 1.1;
}
.footer-text strong {
font-size: 8px;
}
.footer-text span {
font-size: 9px;
}
.footer-icon {
font-size: 10px;
}
/* Hide details section on very small screens */
.footer-section.details {
display: none;
}
}
@media (max-width: 480px) {
.app-footer {
padding: 3px 6px;
gap: 4px;
}
.footer-section {
gap: 2px;
}
.footer-text {
flex-direction: row;
align-items: center;
gap: 3px;
}
.footer-text strong::after {
content: ':';
}
.footer-text strong,
.footer-text span {
font-size: 8px;
line-height: 1;
}
.footer-icon {
font-size: 9px;
}
}
/* ===== Admin Panel - Collapsible Sections ===== */
.admin-collapsible-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: transparent;
border: none;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
transition: background 0.2s ease;
font-weight: 500;
font-size: 14px;
color: var(--foreground);
text-align: left;
margin-bottom: 2px;
}
.admin-collapsible-header:hover {
background: var(--muted);
}
.admin-collapsible-header.expanded {
background: var(--muted);
color: var(--primary);
}
.admin-collapsible-title {
display: flex;
align-items: center;
gap: 8px;
}
.admin-collapsible-icon {
font-size: 16px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.admin-collapsible-chevron {
font-size: 10px;
color: var(--muted-foreground);
transition: transform 0.2s ease;
}
.admin-collapsible-body {
padding: 4px 8px 16px 8px;
animation: slideDown 0.2s ease;
}
.admin-collapsible-desc {
font-size: 13px;
color: var(--muted-foreground);
margin-bottom: 12px;
padding-left: 4px;
}
/* ===== Admin Panel - Section Cards ===== */
.admin-section-header {
margin-bottom: 24px;
}
.admin-section-header h3 {
font-size: 20px;
font-weight: 600;
color: var(--foreground);
margin-bottom: 6px;
}
.admin-section-header p {
font-size: 14px;
color: var(--muted-foreground);
}
.admin-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.admin-nav-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: white;
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.admin-nav-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: var(--primary);
transform: translateY(-1px);
}
.admin-nav-card-icon {
font-size: 28px;
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--secondary);
border-radius: 10px;
}
.admin-nav-card-body {
flex: 1;
min-width: 0;
}
.admin-nav-card-body h4 {
font-size: 15px;
font-weight: 600;
color: var(--foreground);
margin-bottom: 4px;
}
.admin-nav-card-body p {
font-size: 13px;
color: var(--muted-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-nav-card-arrow {
font-size: 22px;
color: var(--muted-foreground);
flex-shrink: 0;
line-height: 1;
}
/* ── Laptop / 15-inch screen (1280 px – 1439 px) ───────────────────────
Targets HD and FHD 15" laptops (1280×800, 1366×768, 1920×1080 @125 %).
Containers use ~95 % / 80 % of the viewport but are capped so content
never feels too wide or too narrow on a compact screen. */
@media (min-width: 1280px) and (max-width: 1439px) {
body {
font-size: 14px;
}
.content {
padding: clamp(16px, 1.8vw, 28px);
}
}
/* ── Large-screen progressive scaling ──────────────────────────────────
On wide/ultra-wide monitors, bump the base font size slightly so text
doesn't look tiny, and give the content area a bit more breathing room.
Content width variables are fixed at root level — these breakpoints
only refine typography and padding at larger viewports. */
@media (min-width: 1440px) {
body {
font-size: 15px;
}
.content {
padding: clamp(24px, 2.2vw, 48px);
}
}
@media (min-width: 1920px) {
body {
font-size: 16px;
}
.content {
padding: clamp(32px, 2.5vw, 56px);
}
.header {
height: 55px;
padding: 0 clamp(24px, 2.5vw, 48px);
}
}
/* ── Detail slide-over panel — dark mode ──────────────────────────────────
Broad overrides so every hardcoded light colour in the slide-out is
replaced with the dark design-token equivalents. */
/* Base panel text */
body.dark .detail-panel,
html.dark body .detail-panel {
color: var(--foreground) !important;
}
/* ── Status badge — black font on tinted bg, both table and slide-out ──────── */
body.dark span[style*="9999px"],
html.dark body span[style*="9999px"] {
/* color: #000000 !important; */
}
/* ── Cancelled-by banner (#fee2e2) — transparent in dark mode ─────────────── */
body.dark .detail-panel div[style*="#fee2e2"],
body.dark .detail-panel div[style*="rgb(254, 226, 226)"],
body.dark .detail-panel div[style*="rgb(254,226,226)"],
html.dark body .detail-panel div[style*="#fee2e2"],
html.dark body .detail-panel div[style*="rgb(254, 226, 226)"],
html.dark body .detail-panel div[style*="rgb(254,226,226)"] {
background: transparent !important;
border-color: rgb(93, 93, 93) !important;
}
/* ── Collapsible header buttons ─────────────────────────────────────────── */
body.dark .detail-panel button,
html.dark body .detail-panel button {
background: var(--secondary) !important;
border-color: rgb(93, 93, 93) !important;
color: #ffffff !important;
}
/* ── Slide-out action buttons using --color-* CSS variables ─────────────────
The blanket button rule above sets background/color via !important.
These higher-specificity rules restore the --color-* variable values. */
body.dark .detail-panel button[style*="--color-cancel"],
html.dark body .detail-panel button[style*="--color-cancel"] {
background: var(--color-cancel-bg) !important;
border-color: var(--color-cancel-border) !important;
color: var(--color-cancel-text) !important;
}
body.dark .detail-panel button[style*="--color-resend"],
html.dark body .detail-panel button[style*="--color-resend"] {
background: var(--color-resend-bg) !important;
border-color: var(--color-resend-border) !important;
color: var(--color-resend-text) !important;
}
body.dark .detail-panel button[style*="--color-restart"],
html.dark body .detail-panel button[style*="--color-restart"] {
background: var(--color-restart-bg) !important;
border-color: var(--color-restart-border) !important;
color: var(--color-restart-text) !important;
}
body.dark .detail-panel button[style*="--color-delete"],
html.dark body .detail-panel button[style*="--color-delete"] {
background: var(--color-delete-bg) !important;
border-color: var(--color-delete-border) !important;
color: var(--color-delete-text) !important;
}
body.dark .detail-panel button[style*="--color-pdf"],
html.dark body .detail-panel button[style*="--color-pdf"] {
background: var(--color-pdf-bg) !important;
border-color: var(--color-pdf-border) !important;
color: var(--color-pdf-text) !important;
}
/* ── Action panel Approve / Reject buttons — keep their colours in dark mode */
body.dark .detail-panel button.action-approve-btn,
html.dark body .detail-panel button.action-approve-btn {
background: #16a34a !important;
border-color: #16a34a !important;
color: #ffffff !important;
}
body.dark .detail-panel button.action-reject-btn,
html.dark body .detail-panel button.action-reject-btn {
background: rgb(153, 0, 0) !important;
border-color: rgb(153, 0, 0) !important;
color: #ffffff !important;
}
body.dark .detail-panel button.action-approve-btn:hover:not(:disabled),
html.dark body .detail-panel button.action-approve-btn:hover:not(:disabled) {
background: #15803d !important;
}
body.dark .detail-panel button.action-reject-btn:hover:not(:disabled),
html.dark body .detail-panel button.action-reject-btn:hover:not(:disabled) {
background: rgb(120, 0, 0) !important;
}
/* All text/icon children of header buttons */
body.dark .detail-panel button *,
html.dark body .detail-panel button * {
color: #ffffff !important;
}
/* ── Action buttons hover (Cancel, Resend, View PDF etc.) ────────────────── */
body.dark .detail-panel button:hover:not(:disabled),
html.dark body .detail-panel button:hover:not(:disabled) {
background: rgb(65, 65, 65) !important;
color: #ffffff !important;
}
/* ── Expanded body areas ─────────────────────────────────────────────────── */
/* White (#ffffff) expanded bodies */
body.dark .detail-panel div[style*="#ffffff"],
html.dark body .detail-panel div[style*="#ffffff"] {
background: var(--card) !important;
}
/* Light grey (#f9fafb) backgrounds */
body.dark .detail-panel div[style*="#f9fafb"],
body.dark .detail-panel button[style*="#f9fafb"],
html.dark body .detail-panel div[style*="#f9fafb"],
html.dark body .detail-panel button[style*="#f9fafb"] {
background: var(--secondary) !important;
}
/* Wrapper containers with #e5e7eb border */
body.dark .detail-panel div[style*="#e5e7eb"],
html.dark body .detail-panel div[style*="#e5e7eb"] {
border-color: rgb(93, 93, 93) !important;
}
/* ── Field text colours ──────────────────────────────────────────────────── */
body.dark .detail-panel *[style*="color: #374151"],
body.dark .detail-panel *[style*="color:#374151"],
html.dark body .detail-panel *[style*="color: #374151"],
html.dark body .detail-panel *[style*="color:#374151"] {
color: var(--foreground) !important;
}
body.dark .detail-panel *[style*="color: #111827"],
body.dark .detail-panel *[style*="color:#111827"],
html.dark body .detail-panel *[style*="color: #111827"],
html.dark body .detail-panel *[style*="color:#111827"] {
color: var(--foreground) !important;
}
body.dark .detail-panel *[style*="color: #6b7280"],
body.dark .detail-panel *[style*="color:#6b7280"],
html.dark body .detail-panel *[style*="color: #6b7280"],
html.dark body .detail-panel *[style*="color:#6b7280"] {
color: var(--muted-foreground) !important;
}
body.dark .detail-panel *[style*="color: #9ca3af"],
body.dark .detail-panel *[style*="color:#9ca3af"],
html.dark body .detail-panel *[style*="color: #9ca3af"],
html.dark body .detail-panel *[style*="color:#9ca3af"] {
color: var(--muted-foreground) !important;
}
/* ── Row / section dividers ─────────────────────────────────────────────── */
body.dark .detail-panel *[style*="#f3f4f6"],
html.dark body .detail-panel *[style*="#f3f4f6"] {
border-color: rgb(93, 93, 93) !important;
}
body.dark .detail-panel hr,
html.dark body .detail-panel hr {
border-top-color: rgb(93, 93, 93) !important;
}
/* ── Approval chain coloured stage rows ─────────────────────────────────── */
body.dark .detail-panel div[style*="#eff6ff"],
body.dark .detail-panel div[style*="#f0fdf4"],
body.dark .detail-panel div[style*="#fef2f2"],
body.dark .detail-panel div[style*="#fff7ed"],
body.dark .detail-panel div[style*="#fee2e2"],
html.dark body .detail-panel div[style*="#eff6ff"],
html.dark body .detail-panel div[style*="#f0fdf4"],
html.dark body .detail-panel div[style*="#fef2f2"],
html.dark body .detail-panel div[style*="#fff7ed"],
html.dark body .detail-panel div[style*="#fee2e2"] {
background: var(--secondary) !important;
border-color: rgb(93, 93, 93) !important;
}
/* ── Badges / pills (status, resend, fix & restart etc.) ────────────────── */
/* Blue-tinted badges (#eff6ff bg, #bfdbfe border, rgb(0, 120, 212) text) */
body.dark .detail-panel *[style*="#eff6ff"],
body.dark .detail-panel *[style*="#bfdbfe"],
html.dark body .detail-panel *[style*="#eff6ff"],
html.dark body .detail-panel *[style*="#bfdbfe"] {
background: var(--secondary) !important;
border-color: rgb(93, 93, 93) !important;
color: var(--foreground) !important;
}
/* Red-tinted badges (#fef2f2 bg, #fca5a5 border) */
body.dark .detail-panel *[style*="#fef2f2"],
body.dark .detail-panel *[style*="#fca5a5"],
html.dark body .detail-panel *[style*="#fef2f2"],
html.dark body .detail-panel *[style*="#fca5a5"] {
background: var(--secondary) !important;
border-color: rgb(93, 93, 93) !important;
color: var(--foreground) !important;
}
/* Purple-tinted badges (#f5f3ff bg, #a78bfa border) */
body.dark .detail-panel *[style*="#f5f3ff"],
body.dark .detail-panel *[style*="#a78bfa"],
html.dark body .detail-panel *[style*="#f5f3ff"],
html.dark body .detail-panel *[style*="#a78bfa"] {
background: var(--secondary) !important;
border-color: rgb(93, 93, 93) !important;
color: var(--foreground) !important;
}
/* Green-tinted badges (#f0fdf4 bg, #15803d text) */
body.dark .detail-panel *[style*="#15803d"],
html.dark body .detail-panel *[style*="#15803d"] {
color: var(--sidebar-foreground) !important;
background: var(--secondary) !important;
border-color: rgb(93, 93, 93) !important;
}
/* Purple group badge (#ede9fe bg, #5b21b6 / #7c3aed text) — transparent in dark */
body.dark .detail-panel *[style*="#ede9fe"],
html.dark body .detail-panel *[style*="#ede9fe"] {
background: transparent !important;
border: 1px solid rgb(93, 93, 93) !important;
color: #ffffff !important;
}
/* ── Comment bubble ──────────────────────────────────────────────────────── */
body.dark .detail-panel *[style*="rgba(0,0,0,0.04)"],
html.dark body .detail-panel *[style*="rgba(0,0,0,0.04)"] {
background: var(--muted) !important;
color: var(--foreground) !important;
}
/* ── Form detail group headers ────────────────────────────────────────────
Light mode: keep the inline rgb(153,0,0) red — no override needed.
Dark mode: override to white so headers read against the dark panel. */
body.dark .detail-panel .detail-group-header,
html.dark body .detail-panel .detail-group-header {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}
/* ── KPI filter cards — dark mode ─────────────────────────────────────────
The kpi-cards grid uses inline styles (bg/border/color from JS data arrays).
In dark mode we override those with neutral card colours using !important. */
body.dark .kpi-cards > div,
html.dark body .kpi-cards > div {
background: var(--secondary) !important;
border: 1px solid rgb(93, 93, 93) !important;
}
/* Slim border for all modes */
.kpi-cards > div {
border-width: 1px !important;
border-style: solid !important;
}
body.dark .kpi-cards > div span,
body.dark .kpi-cards > div div,
body.dark .kpi-cards > div i,
html.dark body .kpi-cards > div span,
html.dark body .kpi-cards > div div,
html.dark body .kpi-cards > div i {
color: var(--sidebar-foreground) !important;
}
/* ── Toolbar / paging buttons that use var(--muted) background ───────────────
Refresh, Clear Filters, rows-per-page, page navigation buttons */
body.dark button[style*="var(--muted)"],
html.dark body button[style*="var(--muted)"] {
background: rgb(48, 48, 48) !important;
color: #ffffff !important;
border-color: rgb(93, 93, 93) !important;
}
body.dark button[style*="var(--muted)"]:hover:not(:disabled),
html.dark body button[style*="var(--muted)"]:hover:not(:disabled) {
background: rgb(65, 65, 65) !important;
color: #ffffff !important;
}
/* ── Transparent / "background: none" buttons — keep transparent in dark ─────
e.g. SectionHeader buttons in User Guide, icon-only buttons */
body.dark button[style*="background: none"],
body.dark button[style*="background:none"],
html.dark body button[style*="background: none"],
html.dark body button[style*="background:none"] {
background: transparent !important;
border-color: transparent !important;
}
/* ── FAQ Important Notes box — transparent in dark mode ─────────────────────
Uses rgba(234,179,8,0.08) amber tint background */
body.dark div[style*="rgba(234,179,8"],
html.dark body div[style*="rgba(234,179,8"] {
background: transparent !important;
}
/* ── User Guide StepCard — step title text stays crimson in dark mode ────────
The StepCard uses color:'#990000' (hex) on a dark --card background,
which has sufficient contrast; no override needed.
The span[letter-spacing] rule is intentionally removed — the STEP N label
also uses #990000 hex and is legible on the dark card surface. */
/* ── User Guide "ADMIN ONLY" badge — white text & border in dark mode ────────
Badge span uses color: rgb(153,0,0) + background: rgba(153,0,0,0.08) */
body.dark span[style*="rgba(153,0,0,0.08)"],
html.dark body span[style*="rgba(153,0,0,0.08)"] {
color: rgb(255, 255, 255) !important;
border-color: rgb(255, 255, 255) !important;
}
/* ── Request ID badge — light mode base (table cells) ──────────────────────── */
span.rid-badge {
background: rgb(153, 0, 0);
color: #ffffff;
border-radius: 4px;
padding: 2px 6px;
display: inline-block;
font-family: monospace;
font-weight: 700;
}
/* ── Request ID badge — dark mode (table cells) ────────────────────────────── */
body.dark span.rid-badge,
html.dark body span.rid-badge {
background: rgb(153, 0, 0) !important;
color: #ffffff !important;
border: 1px solid rgb(200, 30, 30) !important;
}
/* ── Request ID badge — light mode base (slide-out detail panels) ───────────── */
.detail-rid {
background: rgb(153, 0, 0);
color: #ffffff;
border-radius: 4px;
padding: 2px 8px;
display: inline-block;
font-family: monospace;
font-weight: 700;
}
/* ── Request ID badge — dark mode (slide-out detail panels) ─────────────────── */
body.dark .detail-rid,
html.dark body .detail-rid {
background: rgb(153 0 0 / 50%) !important;
color: #ffffff !important;
}
/* ── Request ID anatomy badge (App.js WelcomeHome panel) ────────────────────── */
span.rid-anatomy-badge {
font-family: monospace;
font-weight: 800;
color: #ffffff;
border-radius: 4px;
display: inline-block;
background: rgb(153, 0, 0);
}
body.dark span.rid-anatomy-badge,
html.dark body span.rid-anatomy-badge {
background: rgb(153 0 0 / 50%);
}
/* ── Stage badges (My Stages / Pending Stages) — dark mode ──────────────────── */
/* NOTE: approval-chain stage row badges use inline bg/color from JS; do NOT override here */
/* ── Loading text — dark mode ─────────────────────────────────────────────── */
/* .admin-loading p (PageSpinner, UpperManagementTeam, TaskManager, MyProfile) */
body.dark .admin-loading p,
html.dark body .admin-loading p {
color: #ffffff !important;
}
/* Inline loading divs in Report components and AccessGroupManager (#6b7280) */
body.dark div[style*="color: rgb(107, 114, 128)"],
html.dark body div[style*="color: rgb(107, 114, 128)"],
body.dark div[style*="color: #6b7280"],
html.dark body div[style*="color: #6b7280"] {
color: #ffffff !important;
}
/* Inline loading divs with #9ca3af (AccessGroupManager detail pane) */
body.dark div[style*="color: #9ca3af"],
html.dark body div[style*="color: #9ca3af"] {
color: #ffffff !important;
}
/* App.js content-area loading div (#f8f9fa bg) */
body.dark div[style*="background: rgb(248, 249, 250)"],
html.dark body div[style*="background: rgb(248, 249, 250)"],
body.dark div[style*="background: #f8f9fa"],
html.dark body div[style*="background: #f8f9fa"] {
background: var(--secondary) !important;
color: #ffffff !important;
border-color: var(--border) !important;
}
/* KPI card selected ring — let the coloured 2px JS box-shadow show through */
/* No override needed; the inline boxShadow: '0 0 0 2px ' + kpi.color is sufficient */
/* Unselected cards: no ring (box-shadow: none from JS) */
/* ── Data table — thead / tfoot dark mode ────────────────────────────────
Tables use var(--muted) which is already a CSS variable, but tfoot and
some thead rows have hardcoded light backgrounds via inline styles. */
body.dark table thead tr,
html.dark body table thead tr {
background: var(--secondary) !important;
}
body.dark table thead th,
html.dark body table thead th {
background: var(--secondary) !important;
color: var(--muted-foreground) !important;
border-color: var(--border) !important;
}
body.dark table tfoot tr,
html.dark body table tfoot tr {
background: var(--secondary) !important;
border-color: var(--border) !important;
}
body.dark table tfoot td,
html.dark body table tfoot td {
background: var(--secondary) !important;
color: var(--foreground) !important;
border-color: var(--border) !important;
}
/* ── Form Details — field labels & values both white ─────────────────────*/
body.dark .detail-form-body div[style*="color: #6b7280"],
html.dark body .detail-form-body div[style*="color: #6b7280"] {
color: #ffffff !important;
}
/* ── Approval chain stage rows — match KPI card tinted backgrounds ───────
Keep the status colours (green/blue/red) but use dark-tinted versions */
body.dark .detail-stage-row[style*="#f0fdf4"],
html.dark body .detail-stage-row[style*="#f0fdf4"] {
background: rgba(5, 150, 105, 0.15) !important;
border-color: rgb(93, 93, 93) !important;
}
body.dark .detail-stage-row[style*="#eff6ff"],
html.dark body .detail-stage-row[style*="#eff6ff"] {
background: rgba(29, 78, 216, 0.15) !important;
border-color: rgb(93, 93, 93) !important;
}
body.dark .detail-stage-row[style*="#fef2f2"],
html.dark body .detail-stage-row[style*="#fef2f2"] {
background: rgba(220, 38, 38, 0.15) !important;
border-color: rgb(93, 93, 93) !important;
}
/* Pending (var(--muted)) — keep as-is; already CSS var */
/* ── Task Group Members popup — full dark mode ───────────────────────────*/
body.dark .group-popup-modal,
html.dark body .group-popup-modal {
background: var(--card) !important;
color: var(--foreground) !important;
}
/* Header strip (#faf5ff) */
body.dark .group-popup-modal div[style*="#faf5ff"],
html.dark body .group-popup-modal div[style*="#faf5ff"] {
background: var(--secondary) !important;
border-bottom-color: rgb(93, 93, 93) !important;
}
/* Icon background (#ede9fe) */
body.dark .group-popup-modal div[style*="#ede9fe"],
html.dark body .group-popup-modal div[style*="#ede9fe"] {
background: rgba(124, 58, 237, 0.2) !important;
}
/* "TASK GROUP" label (#7c3aed) — keep purple */
/* Group name (#1f1235) */
body.dark .group-popup-modal div[style*="color: #1f1235"],
html.dark body .group-popup-modal div[style*="color: #1f1235"] {
color: var(--foreground) !important;
}
/* Close × button (#9ca3af) */
body.dark .group-popup-modal button[style*="#9ca3af"],
html.dark body .group-popup-modal button[style*="#9ca3af"] {
color: var(--muted-foreground) !important;
}
/* Subtitle text (#6b7280) */
body.dark .group-popup-modal p[style*="#6b7280"],
html.dark body .group-popup-modal p[style*="#6b7280"] {
color: var(--muted-foreground) !important;
}
/* Member cards — active (#f9fafb) and inactive (#fff5f5) */
body.dark .group-popup-modal div[style*="#f9fafb"],
html.dark body .group-popup-modal div[style*="#f9fafb"] {
background: var(--secondary) !important;
border-color: rgb(93, 93, 93) !important;
}
body.dark .group-popup-modal div[style*="#fff5f5"],
html.dark body .group-popup-modal div[style*="#fff5f5"] {
background: rgba(220, 38, 38, 0.1) !important;
border-color: rgba(220, 38, 38, 0.3) !important;
}
/* Avatar background (active #ede9fe / inactive #fee2e2) */
body.dark .group-popup-modal div[style*="background: #ede9fe"],
html.dark body .group-popup-modal div[style*="background: #ede9fe"] {
background: rgba(124, 58, 237, 0.25) !important;
color: #c4b5fd !important;
}
body.dark .group-popup-modal div[style*="background: #fee2e2"],
html.dark body .group-popup-modal div[style*="background: #fee2e2"] {
background: rgba(220, 38, 38, 0.2) !important;
color: #fca5a5 !important;
}
/* Status dot border — change #fff to card bg */
body.dark .group-popup-modal span[style*="border: 1.5px solid #fff"],
html.dark body .group-popup-modal span[style*="border: 1.5px solid #fff"] {
border-color: var(--card) !important;
}
/* Member name (#111827 active / #dc2626 inactive) */
body.dark .group-popup-modal div[style*="color: #111827"],
html.dark body .group-popup-modal div[style*="color: #111827"] {
color: var(--foreground) !important;
}
/* Member email (#6b7280) */
body.dark .group-popup-modal div[style*="color: #6b7280"]:not([style*="textTransform"]),
html.dark body .group-popup-modal div[style*="color: #6b7280"]:not([style*="textTransform"]) {
color: var(--muted-foreground) !important;
}
/* Footer border + Close button */
body.dark .group-popup-modal div[style*="borderTop: '1px solid #e5e7eb'"],
body.dark .group-popup-modal div[style*="border-top: 1px solid #e5e7eb"],
html.dark body .group-popup-modal div[style*="border-top: 1px solid #e5e7eb"] {
border-top-color: rgb(93, 93, 93) !important;
background: var(--card) !important;
}
/* ── Form Details expanded body ──────────────────────────────────────────
rgb(48,48,48) background, red group headers, white/muted field text */
body.dark .detail-form-body,
html.dark body .detail-form-body {
background: rgb(48, 48, 48) !important;
}
/* Group header labels — keep red */
body.dark .detail-form-body div[style*="color: rgb(153,0,0)"],
body.dark .detail-form-body div[style*="color:rgb(153,0,0)"],
html.dark body .detail-form-body div[style*="color: rgb(153,0,0)"],
html.dark body .detail-form-body div[style*="color:rgb(153,0,0)"] {
color: rgb(200, 40, 40) !important;
border-bottom-color: rgba(255,255,255,0.1) !important;
}
/* Field label column (#6b7280) */
body.dark .detail-form-body div[style*="color: #6b7280"],
html.dark body .detail-form-body div[style*="color: #6b7280"] {
color: #adadad !important;
}
/* Field value column (#111827) */
body.dark .detail-form-body div[style*="color: #111827"],
html.dark body .detail-form-body div[style*="color: #111827"] {
color: #ffffff !important;
}
/* Row dividers */
body.dark .detail-form-body div[style*="#f3f4f6"],
html.dark body .detail-form-body div[style*="#f3f4f6"] {
border-bottom-color: rgba(255,255,255,0.08) !important;
}
/* HR inside field rows */
body.dark .detail-form-body hr,
html.dark body .detail-form-body hr {
border-top-color: rgb(93, 93, 93) !important;
border-color: rgb(93, 93, 93) !important;
}
/* Italic "no details" placeholder */
body.dark .detail-form-body p,
html.dark body .detail-form-body p {
color: #adadad !important;
}
/* ── Attachments expanded body ───────────────────────────────────────────
rgb(48,48,48) background, white fonts, keep coloured icons */
body.dark .detail-attachments-body,
html.dark body .detail-attachments-body {
background: rgb(48, 48, 48) !important;
}
/* Every file card */
body.dark .detail-file-card,
html.dark body .detail-file-card {
background: rgb(48, 48, 48) !important;
border-color: rgb(93, 93, 93) !important;
}
/* File type icons (fa-file-pdf, fa-file-word, etc.) — muted grey */
body.dark .detail-file-card i,
html.dark body .detail-file-card i {
color: rgb(171, 171, 171) !important;
}
/* Filename text — white (overrides inline color var / #92400e) */
body.dark .detail-file-card > span,
html.dark body .detail-file-card > span {
color: #ffffff !important;
}
/* "Included in merge" / "Not merged" labels — keep green/red colours */
/* File size (#6b7280) */
body.dark .detail-file-card span[style*="color: #6b7280"],
html.dark body .detail-file-card span[style*="color: #6b7280"] {
color: #adadad !important;
}
/* Preview button (#374151) */
body.dark .detail-file-card button,
html.dark body .detail-file-card button {
color: #ffffff !important;
background: none !important;
}
/* Merged card (#fffbeb) special highlight — subtle amber tint in dark */
body.dark .detail-file-card[style*="#fffbeb"],
html.dark body .detail-file-card[style*="#fffbeb"] {
background: rgba(245, 158, 11, 0.12) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
/* ── Approval chain stage rows ───────────────────────────────────────────
All coloured rows → dark card; keep coloured icons + status dots */
body.dark .detail-stage-row,
html.dark body .detail-stage-row {
background: rgb(48, 48, 48) !important;
border-color: rgb(93, 93, 93) !important;
}
/* Stage label text */
body.dark .detail-stage-row div[style*="color: var(--foreground)"],
html.dark body .detail-stage-row div[style*="color: var(--foreground)"] {
color: #ffffff !important;
}
/* Assignee name and status suffix */
body.dark .detail-stage-row div[style*="color: var(--muted-foreground)"],
html.dark body .detail-stage-row div[style*="color: var(--muted-foreground)"] {
color: #adadad !important;
}
/* Inactive user text (#c0392b) — keep red */
/* "Actioned by" delegation text (purple) — keep */
/* Comment bubble */
body.dark .detail-stage-row div[style*="rgba(0,0,0,0.04)"],
html.dark body .detail-stage-row div[style*="rgba(0,0,0,0.04)"] {
background: rgba(255,255,255,0.06) !important;
color: #adadad !important;
}
/* Group badge (#ede9fe / purple) — transparent with uniform border */
body.dark .detail-stage-row span[style*="#ede9fe"],
body.dark .detail-stage-row span[style*="rgb(237, 233, 254)"],
body.dark .detail-stage-row span[style*="rgb(237,233,254)"],
html.dark body .detail-stage-row span[style*="#ede9fe"],
html.dark body .detail-stage-row span[style*="rgb(237, 233, 254)"],
html.dark body .detail-stage-row span[style*="rgb(237,233,254)"] {
background: transparent !important;
border: 1px solid rgb(93, 93, 93) !important;
color: #ffffff !important;
}
/* Stages body container — no background override in dark mode */
body.dark .detail-stages-body,
html.dark body .detail-stages-body {
background: transparent !important;
}
/* ── Collapsible section wrapper borders ─────────────────────────────────── */
body.dark .detail-panel div[style*="#e5e7eb"],
html.dark body .detail-panel div[style*="#e5e7eb"] {
border-color: rgb(93, 93, 93) !important;
}
/* ── HR dividers and group-name separators inside Form Details ───────────── */
body.dark .detail-form-body hr,
html.dark body .detail-form-body hr {
border-top-color: rgb(93, 93, 93) !important;
border-color: rgb(93, 93, 93) !important;
}
body.dark .detail-form-body div[style*="#f3f4f6"],
html.dark body .detail-form-body div[style*="#f3f4f6"] {
border-bottom-color: rgb(93, 93, 93) !important;
border-color: rgb(93, 93, 93) !important;
}
/* ── File type icons in attachment cards ─────────────────────────────────── */
body.dark .detail-file-card i[style*="color: #000"],
html.dark body .detail-file-card i[style*="color: #000"] {
color: #ffffff !important;
}
/* ── Form Details field labels (#6b7280) → light grey ───────────────────── */
body.dark .detail-form-body div[style*="color: #6b7280"],
html.dark body .detail-form-body div[style*="color: #6b7280"] {
color: #adadad !important;
}
/* ── Form Details field values (#111827) → white ────────────────────────── */
body.dark .detail-form-body div[style*="color: #111827"],
html.dark body .detail-form-body div[style*="color: #111827"] {
color: #ffffff !important;
}
/* ── Form Details group name title (red, keeps) + divider under it ───────── */
body.dark .detail-form-body div[style*="borderBottom: '1px solid #f3f4f6'"],
body.dark .detail-form-body div[style*="border-bottom: 1px solid #f3f4f6"],
html.dark body .detail-form-body div[style*="borderBottom: '1px solid #f3f4f6'"],
html.dark body .detail-form-body div[style*="border-bottom: 1px solid #f3f4f6"] {
border-bottom-color: rgb(93, 93, 93) !important;
}
/* ── Row dividers between field pairs ────────────────────────────────────── */
body.dark .detail-form-body div[style*="border-bottom"][style*="#f3f4f6"],
html.dark body .detail-form-body div[style*="border-bottom"][style*="#f3f4f6"] {
border-bottom-color: rgb(93, 93, 93) !important;
}
/* ── Task group badge (purple pill) ─────────────────────────────────────── */
body.dark .detail-stage-row span[style*="#ede9fe"],
body.dark .detail-stage-row span[style*="rgb(237, 233, 254)"],
body.dark .detail-stage-row span[style*="rgb(237,233,254)"],
html.dark body .detail-stage-row span[style*="#ede9fe"],
html.dark body .detail-stage-row span[style*="rgb(237, 233, 254)"],
html.dark body .detail-stage-row span[style*="rgb(237,233,254)"] {
background: transparent !important;
border: 1px solid rgb(93, 93, 93) !important;
color: #ffffff !important;
}
/* ── Group popup modal — full dark mode ──────────────────────────────────── */
/* Modal card background */
body.dark .group-popup-modal,
html.dark body .group-popup-modal {
background: rgb(30, 30, 30) !important;
}
/* Header strip (purple tint #faf5ff) */
body.dark .group-popup-modal div[style*="#faf5ff"],
html.dark body .group-popup-modal div[style*="#faf5ff"] {
background: rgb(40, 30, 60) !important;
border-bottom-color: rgb(93, 93, 93) !important;
}
/* Icon bg (#ede9fe) in header */
body.dark .group-popup-modal div[style*="#ede9fe"],
html.dark body .group-popup-modal div[style*="#ede9fe"] {
background: rgba(109, 40, 217, 0.3) !important;
}
/* Group name text (#1f1235) */
body.dark .group-popup-modal div[style*="#1f1235"],
html.dark body .group-popup-modal div[style*="#1f1235"] {
color: #ffffff !important;
}
/* Description text (#6b7280) */
body.dark .group-popup-modal p[style*="#6b7280"],
html.dark body .group-popup-modal p[style*="#6b7280"] {
color: #adadad !important;
}
/* Footer border-top */
body.dark .group-popup-modal div[style*="border-top: 1px solid #e5e7eb"],
html.dark body .group-popup-modal div[style*="border-top: 1px solid #e5e7eb"] {
border-top-color: rgb(93, 93, 93) !important;
}
/* Active member card (#f9fafb) */
body.dark .group-popup-modal div[style*="#f9fafb"],
html.dark body .group-popup-modal div[style*="#f9fafb"] {
background: rgb(48, 48, 48) !important;
border-color: rgb(93, 93, 93) !important;
}
/* Inactive member card (#fff5f5) */
body.dark .group-popup-modal div[style*="#fff5f5"],
html.dark body .group-popup-modal div[style*="#fff5f5"] {
background: rgba(220, 38, 38, 0.1) !important;
border-color: rgba(220, 38, 38, 0.35) !important;
}
/* Active avatar bg (#ede9fe) inside member card */
body.dark .group-popup-modal div[style*="background: #ede9fe"],
html.dark body .group-popup-modal div[style*="background: #ede9fe"] {
background: rgba(109, 40, 217, 0.35) !important;
}
/* Active member name (#111827) */
body.dark .group-popup-modal div[style*="color: #111827"],
html.dark body .group-popup-modal div[style*="color: #111827"] {
color: #ffffff !important;
}
/* Active member email/subtitle (#6b7280) */
body.dark .group-popup-modal div[style*="color: #6b7280"],
html.dark body .group-popup-modal div[style*="color: #6b7280"] {
color: #adadad !important;
}
/* Status dot border against dark card bg */
body.dark .group-popup-modal span[style*="border: 1.5px solid #fff"],
html.dark body .group-popup-modal span[style*="border: 1.5px solid #fff"] {
border-color: rgb(48, 48, 48) !important;
}
/* ── MyTasks action buttons — override .detail-panel button blanket rule ─────
.detail-panel button forces background: var(--secondary) !important which
wipes out the green / dark-red inline styles. Use higher-specificity rules
with !important to restore the intended colours in dark mode. */
body.dark .detail-panel button.action-approve-btn,
html.dark body .detail-panel button.action-approve-btn {
background: #16a34a !important;
border-color: #16a34a !important;
color: #ffffff !important;
}
body.dark .detail-panel button.action-reject-btn,
html.dark body .detail-panel button.action-reject-btn {
background: rgb(153, 0, 0) !important;
border-color: rgb(153, 0, 0) !important;
color: #ffffff !important;
}
/* ── My Profile page — dark mode ─────────────────────────────────────────────
Targets .profile-container, .profile-header, .profile-content, .profile-section.
.profile-field-label → white text (column titles)
.profile-field-value → #888 muted text (profile values)
Section/card backgrounds use CSS vars automatically; inline hardcoded
colours need explicit overrides here. */
/* Overall container background */
body.dark .profile-container,
html.dark body .profile-container {
background: var(--background) !important;
color: var(--foreground) !important;
}
/* Profile header card */
body.dark .profile-header,
html.dark body .profile-header {
background: var(--card) !important;
border-color: var(--border) !important;
}
/* Profile content + sections */
body.dark .profile-content,
html.dark body .profile-content,
body.dark .profile-section,
html.dark body .profile-section {
background: var(--card) !important;
border-color: var(--border) !important;
}
/* Name heading (#000) */
body.dark .profile-header h2,
html.dark body .profile-header h2 {
color: #ffffff !important;
}
/* ── field() helper — .profile-field-label → white, .profile-field-value → #888 */
body.dark .profile-field-label,
html.dark body .profile-field-label {
color: #ffffff !important;
}
body.dark .profile-field-value,
html.dark body .profile-field-value {
color: #888888 !important;
}
/* System ID table text */
body.dark .profile-header table,
html.dark body .profile-header table {
color: #888888 !important;
}
/* Header bottom border */
body.dark .profile-header div[style*="borderBottom"],
html.dark body .profile-header div[style*="borderBottom"],
body.dark .profile-header div[style*="border-bottom"],
html.dark body .profile-header div[style*="border-bottom"] {
border-bottom-color: var(--border) !important;
}
/* Last synced timestamp muted text */
body.dark .profile-header span[style*="999"],
html.dark body .profile-header span[style*="999"] {
color: #888888 !important;
}
/* Chain card title text (var(--text-primary, #222)) */
body.dark .profile-content span[style*="text-primary"],
html.dark body .profile-content span[style*="text-primary"],
body.dark .submit-request-container span[style*="text-primary"],
html.dark body .submit-request-container span[style*="text-primary"] {
color: var(--foreground) !important;
}
/* Muted text in chain (var(--text-muted, #888) and var(--text-muted, #bbb)) */
body.dark .profile-content div[style*="text-muted"],
html.dark body .profile-content div[style*="text-muted"],
body.dark .profile-content span[style*="text-muted"],
html.dark body .profile-content span[style*="text-muted"],
body.dark .submit-request-container div[style*="text-muted"],
html.dark body .submit-request-container div[style*="text-muted"],
body.dark .submit-request-container span[style*="text-muted"],
html.dark body .submit-request-container span[style*="text-muted"] {
color: var(--muted-foreground) !important;
}
/* Approval section description text (#666) */
body.dark .profile-content p[style*="#666"],
html.dark body .profile-content p[style*="#666"] {
color: var(--muted-foreground) !important;
}
/* Checklist + verbose detail — white/light backgrounds */
body.dark .profile-content div[style*="background: #fff"],
body.dark .profile-content div[style*="background: #fafafa"],
body.dark .profile-content div[style*="background: #f8fafc"],
body.dark .profile-content div[style*="background: #f9fafb"],
html.dark body .profile-content div[style*="background: #fff"],
html.dark body .profile-content div[style*="background: #fafafa"],
html.dark body .profile-content div[style*="background: #f8fafc"],
html.dark body .profile-content div[style*="background: #f9fafb"] {
background: var(--secondary) !important;
border-color: var(--border) !important;
}
/* Checklist header button bg (#f8fafc) */
body.dark .profile-content button[style*="#f8fafc"],
html.dark body .profile-content button[style*="#f8fafc"] {
background: var(--secondary) !important;
border-bottom-color: var(--border) !important;
}
/* Verbose detail row text */
body.dark .profile-content span[style*="#374151"],
html.dark body .profile-content span[style*="#374151"],
body.dark .profile-content span[style*="#111827"],
html.dark body .profile-content span[style*="#111827"] {
color: var(--foreground) !important;
}
/* Approver name (#111827) */
body.dark .profile-content div[style*="color: #111827"],
html.dark body .profile-content div[style*="color: #111827"] {
color: var(--foreground) !important;
}
/* Approver email (#6b7280) */
body.dark .profile-content div[style*="color: #6b7280"],
html.dark body .profile-content div[style*="color: #6b7280"] {
color: var(--muted-foreground) !important;
}
/* Verbose step row outer border (#e2e8f0) */
body.dark .profile-content div[style*="#e2e8f0"],
html.dark body .profile-content div[style*="#e2e8f0"] {
border-color: var(--border) !important;
}
/* Verbose step row bg — green pass (#f0fdf4) */
body.dark .profile-content div[style*="background: #f0fdf4"],
html.dark body .profile-content div[style*="background: #f0fdf4"] {
background: rgba(22, 163, 74, 0.08) !important;
border-color: rgba(22, 163, 74, 0.3) !important;
}
/* Verbose step row bg — red fail (#fef2f2) */
body.dark .profile-content div[style*="background: #fef2f2"],
html.dark body .profile-content div[style*="background: #fef2f2"] {
background: rgba(220, 38, 38, 0.08) !important;
border-color: rgba(220, 38, 38, 0.3) !important;
}
/* ── Group badge in chain cards — color by theme ───────────────────────────── */
.profile-group-badge {
color: #5b21b6;
border: 1px solid #ddd6fe;
}
.profile-group-badge i {
color: #5b21b6;
}
body.dark .profile-group-badge,
html.dark body .profile-group-badge {
color: var(--foreground) !important;
border-color: var(--border) !important;
background: transparent !important;
}
body.dark .profile-group-badge i,
html.dark body .profile-group-badge i {
color: var(--foreground) !important;
}
/* ── Preferences section ──────────────────────────────────────────────────── */
body.dark .profile-section div[style*="background: #f9fafb"],
html.dark body .profile-section div[style*="background: #f9fafb"] {
background: var(--secondary) !important;
border-color: var(--border) !important;
}
/* ── MyTaskDelegation — banner & info blurb dark mode ────────────────────── */
body.dark .delegation-banner-success,
html.dark body .delegation-banner-success {
background: transparent !important;
border-color: #a8d5b5 !important;
}
body.dark .delegation-banner-error,
html.dark body .delegation-banner-error {
background: transparent !important;
border-color: #f5c6cb !important;
}
body.dark .delegation-info-blurb,
html.dark body .delegation-info-blurb {
background: transparent !important;
border-color: var(--border) !important;
}
/* ── Notifications — preference cards dark mode ──────────────────────────── */
body.dark .notif-pref-card,
html.dark body .notif-pref-card {
background: transparent !important;
border-color: var(--border) !important;
}
body.dark .notif-pref-card--off,
html.dark body .notif-pref-card--off {
border-color: rgba(220, 38, 38, 0.4) !important;
}
/* ── Submission status badge — transparent background in dark mode ──────── */
body.dark .submission-status-badge,
html.dark body .submission-status-badge {
background: transparent !important;
}
/* ── KPI cards — use CSS vars for bg/border in dark mode, white text ───── */
body.dark .task-kpi-card,
html.dark body .task-kpi-card {
background: var(--card) !important;
border-color: var(--border) !important;
}
body.dark .task-kpi-card span,
body.dark .task-kpi-card div,
body.dark .task-kpi-card i,
html.dark body .task-kpi-card span,
html.dark body .task-kpi-card div,
html.dark body .task-kpi-card i {
color: #ffffff !important;
}
/* ── Task stage badge & run badge — transparent background + border in dark mode ─── */
body.dark .stage-badge,
html.dark body .stage-badge,
body.dark .task-run-badge,
html.dark body .task-run-badge {
background: transparent !important;
border-color: transparent !important;
}
/* ── Access type badge (Edit Access / View Only) — transparent in dark mode */
body.dark .access-type-badge,
html.dark body .access-type-badge {
background: transparent !important;
}
/* ── Role badges (profile page + profile dropdown) — transparent in dark mode */
body.dark .profile-role-badge-admin,
html.dark body .profile-role-badge-admin,
body.dark .profile-role-badge,
html.dark body .profile-role-badge {
background: transparent !important;
}
/* Search input on Team Profiles */
body.dark .team-search-input,
html.dark body .team-search-input {
background: var(--secondary) !important;
border-color: var(--border) !important;
color: var(--foreground) !important;
}
body.dark .team-search-input::placeholder,
html.dark body .team-search-input::placeholder {
color: var(--muted-foreground) !important;
}
/* ── Team Profiles page — dark mode ──────────────────────────────────────────
Reuses .profile-container / .profile-content / .profile-section rules above.
Additional overrides for Team Profiles-specific elements. */
/* Approval chain card backgrounds — transparent */
body.dark .team-chain-card,
html.dark body .team-chain-card {
background: transparent !important;
border-color: var(--border) !important;
}
/* Sync Profile button */
body.dark .team-sync-btn,
html.dark body .team-sync-btn {
background: var(--secondary) !important;
border-color: var(--border) !important;
color: var(--foreground) !important;
}
/* Visibility toggle button (Show/Hide from Team Submissions) */
body.dark .team-visibility-btn,
html.dark body .team-visibility-btn {
background: var(--secondary) !important;
border-color: var(--border) !important;
color: var(--foreground) !important;
}
/* Active / Disabled filter buttons */
body.dark .team-filter-btn,
html.dark body .team-filter-btn {
background: var(--secondary) !important;
border-color: var(--border) !important;
color: var(--foreground) !important;
}
body.dark .team-filter-btn--active,
html.dark body .team-filter-btn--active {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #ffffff !important;
}
/* Visibility panel background — transparent */
body.dark .team-profile-visibility-panel,
html.dark body .team-profile-visibility-panel {
background: transparent !important;
border-color: var(--border) !important;
}
/* Disabled + Hidden badges — transparent */
body.dark .team-profile-disabled-badge,
html.dark body .team-profile-disabled-badge,
body.dark .team-profile-hidden-badge,
html.dark body .team-profile-hidden-badge {
background: transparent !important;
border-color: var(--border) !important;
}
/* Role badge on selected member header */
body.dark .profile-content span[style*="#fffbeb"],
body.dark .profile-content span[style*="#f3f4f6"],
html.dark body .profile-content span[style*="#fffbeb"],
html.dark body .profile-content span[style*="#f3f4f6"] {
background: transparent !important;
border-color: var(--border) !important;
color: var(--foreground) !important;
}
/* ── Team Profiles — disabled/hidden chain notice — transparent in dark mode */
body.dark .team-chain-disabled-notice,
html.dark body .team-chain-disabled-notice {
background: transparent !important;
border-color: var(--border) !important;
color: var(--muted-foreground) !important;
}
/* ── Welcome hero title — white text in dark mode (no background) */
body.dark .welcome-hero-title,
html.dark body .welcome-hero-title {
color: #ffffff !important;
}
/* ── Welcome action buttons — match btn-success style in all modes ───────── */
.welcome-action-btn {
background: #16a34a !important;
color: #ffffff !important;
border-color: #16a34a !important;
transition: background 0.15s, border-color 0.15s;
}
.welcome-action-btn:hover {
background: #15803d !important;
border-color: #15803d !important;
}
body.dark .welcome-action-btn,
html.dark body .welcome-action-btn {
background: #16a34a !important;
color: #ffffff !important;
border-color: #16a34a !important;
}
body.dark .welcome-action-btn:hover,
html.dark body .welcome-action-btn:hover,
html.dark body button.welcome-action-btn:hover:not(:disabled),
body.dark button.welcome-action-btn:hover:not(:disabled) {
background: #15803d !important;
background-color: #15803d !important;
border-color: #15803d !important;
color: #ffffff !important;
}
/* ── Auth loading spinner — respects dark/light mode ─────────────────────── */
.auth-spinner-title {
color: rgb(153, 0, 0);
}
body.dark .auth-spinner-title,
html.dark body .auth-spinner-title {
color: #ffffff !important;
}
.auth-loading-spinner {
background: #f8fafc;
color: #1e293b;
}
body.dark .auth-loading-spinner,
html.dark body .auth-loading-spinner {
background: rgb(48, 48, 48) !important;
}
.auth-spinner-ring {
border: 5px solid #e2e8f0;
border-top-color: #990000;
}
body.dark .auth-spinner-ring,
html.dark body .auth-spinner-ring {
border-color: var(--border) !important;
border-top-color: #990000 !important;
}
.auth-spinner-step {
color: #1e293b;
}
body.dark .auth-spinner-step,
html.dark body .auth-spinner-step {
color: var(--foreground) !important;
}
.auth-spinner-sub {
color: #64748b;
}
body.dark .auth-spinner-sub,
html.dark body .auth-spinner-sub {
color: var(--muted-foreground) !important;
}
.auth-spinner-dot {
background: #cbd5e1;
}
.auth-spinner-dot--active {
background: #990000;
}
body.dark .auth-spinner-dot,
html.dark body .auth-spinner-dot {
background: var(--border) !important;
}
body.dark .auth-spinner-dot--active,
html.dark body .auth-spinner-dot--active {
background: #990000 !important;
}
/* ── Admin panel loading overlay ─────────────────────────────────────────── */
.admin-panel-loading {
background: #f8fafc;
}
body.dark .admin-panel-loading,
html.dark body .admin-panel-loading {
background: rgb(48, 48, 48) !important;
}
.admin-panel-loading-ring {
border: 5px solid #e2e8f0;
border-top-color: #990000;
}
body.dark .admin-panel-loading-ring,
html.dark body .admin-panel-loading-ring {
border-color: var(--border) !important;
border-top-color: #990000 !important;
}
.admin-panel-loading-title {
color: #1e293b;
}
body.dark .admin-panel-loading-title,
html.dark body .admin-panel-loading-title {
color: var(--foreground) !important;
}
.admin-panel-loading-sub {
color: #475569;
}
body.dark .admin-panel-loading-sub,
html.dark body .admin-panel-loading-sub {
color: var(--muted-foreground) !important;
}
.admin-panel-loading-hint {
color: #94a3b8;
}
body.dark .admin-panel-loading-hint,
html.dark body .admin-panel-loading-hint {
color: var(--muted-foreground) !important;
}
/* ── Task Group Members Popup — dark mode ─────────────────────────────────
Overrides all hardcoded light-mode colours in the group-popup-modal.
Header bg: transparent. Icon circles: transparent. User cards: transparent.
All text: white. Close ×: transparent. Footer Close: refresh-button style. */
/* Modal card background */
body.dark .group-popup-modal,
html.dark body .group-popup-modal {
background: var(--card) !important;
}
/* All text/icons inside the popup */
body.dark .group-popup-modal p,
body.dark .group-popup-modal span,
body.dark .group-popup-modal div,
body.dark .group-popup-modal i,
html.dark body .group-popup-modal p,
html.dark body .group-popup-modal span,
html.dark body .group-popup-modal div,
html.dark body .group-popup-modal i {
color: #ffffff !important;
border-color: var(--border) !important;
}
/* Header area — rgb(250,245,255) / #faf5ff purple tint → transparent */
body.dark .group-popup-modal [style*="#faf5ff"],
body.dark .group-popup-modal [style*="rgb(250, 245, 255)"],
body.dark .group-popup-modal [style*="rgb(250,245,255)"],
html.dark body .group-popup-modal [style*="#faf5ff"],
html.dark body .group-popup-modal [style*="rgb(250, 245, 255)"],
html.dark body .group-popup-modal [style*="rgb(250,245,255)"] {
background: transparent !important;
border-color: var(--border) !important;
}
/* Header icon wrapper (36px, .gpm-header-icon) → #374151 background */
body.dark .gpm-header-icon,
html.dark body .gpm-header-icon {
background: #374151 !important;
border-color: var(--border) !important;
}
body.dark .gpm-header-icon i,
html.dark body .gpm-header-icon i {
color: #ffffff !important;
}
/* User avatar circles (32px, .gpm-avatar) → #374151 background */
body.dark .gpm-avatar,
html.dark body .gpm-avatar {
background: #374151 !important;
color: #ffffff !important;
border-color: var(--border) !important;
}
/* User member cards — transparent (still use attribute selectors as fallback) */
body.dark .group-popup-modal [style*="#f9fafb"],
body.dark .group-popup-modal [style*="rgb(249, 250, 251)"],
body.dark .group-popup-modal [style*="rgb(249,250,251)"],
body.dark .group-popup-modal [style*="#fff5f5"],
body.dark .group-popup-modal [style*="rgb(255, 245, 245)"],
body.dark .group-popup-modal [style*="rgb(255,245,245)"],
html.dark body .group-popup-modal [style*="#f9fafb"],
html.dark body .group-popup-modal [style*="rgb(249, 250, 251)"],
html.dark body .group-popup-modal [style*="rgb(249,250,251)"],
html.dark body .group-popup-modal [style*="#fff5f5"],
html.dark body .group-popup-modal [style*="rgb(255, 245, 245)"],
html.dark body .group-popup-modal [style*="rgb(255,245,245)"] {
background: transparent !important;
border-color: var(--border) !important;
}
/* Footer border line */
body.dark .group-popup-modal [style*="borderTop"],
html.dark body .group-popup-modal [style*="borderTop"] {
border-color: var(--border) !important;
}
/* × close icon button — keep transparent, white icon */
body.dark .group-popup-modal button[style*="background: none"],
body.dark .group-popup-modal button[style*="background:none"],
html.dark body .group-popup-modal button[style*="background: none"],
html.dark body .group-popup-modal button[style*="background:none"] {
background: transparent !important;
border-color: transparent !important;
color: #ffffff !important;
}
/* Footer "Close" button (#7c3aed purple) → match dark-mode refresh button:
var(--muted) background, var(--foreground) text, 1px solid var(--border) */
body.dark .group-popup-modal button[style*="#7c3aed"],
html.dark body .group-popup-modal button[style*="#7c3aed"] {
background: var(--muted) !important;
color: var(--foreground) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
}
body.dark .group-popup-modal button[style*="#7c3aed"]:hover:not(:disabled),
html.dark body .group-popup-modal button[style*="#7c3aed"]:hover:not(:disabled) {
background: var(--secondary) !important;
color: var(--foreground) !important;
}
/* ── Detail panel action button CSS custom properties ─────────────────────
Light mode: tinted badge-style colours (same as MySubmissions baseline).
Dark mode: neutral secondary surface + white text so they stay readable. */
:root {
--color-cancel-border: #fca5a5;
--color-cancel-bg: #fef2f2;
--color-cancel-text: #dc2626;
--color-resend-border: #a78bfa;
--color-resend-bg: #f5f3ff;
--color-resend-text: #7c3aed;
--color-restart-border: #16a34a;
--color-restart-bg: #f0fdf4;
--color-restart-text: #16a34a;
--color-delete-border: #374151;
--color-delete-bg: #111827;
--color-delete-text: #ffffff;
--color-pdf-border: #15803d;
--color-pdf-bg: #f0fdf4;
--color-pdf-text: #15803d;
}
body.dark,
html.dark body {
--color-cancel-border: rgb(93, 93, 93);
--color-cancel-bg: var(--secondary);
--color-cancel-text: #ff7b7b;
--color-resend-border: rgb(93, 93, 93);
--color-resend-bg: var(--secondary);
--color-resend-text: #c4b5fd;
--color-restart-border: rgb(93, 93, 93);
--color-restart-bg: var(--secondary);
--color-restart-text: #86efac;
--color-delete-border: rgb(93, 93, 93);
--color-delete-bg: var(--secondary);
--color-delete-text: #ffffff;
--color-pdf-border: rgb(93, 93, 93);
--color-pdf-bg: var(--secondary);
--color-pdf-text: #86efac;
}
/* ── Login page hard reset — must come last to win the cascade ─────────────
The login page is always light mode. We enumerate explicit values for every
element rather than using revert (unreliable against !important in some
browsers). All selectors are body.dark scoped so they only apply in dark */
body.dark .login-page,
html.dark body .login-page {
background: #ffffff !important;
color: #111827 !important;
color-scheme: light;
}
/* Base reset — explicit light values for all descendants */
body.dark .login-page *,
html.dark body .login-page * {
color: #111827 !important;
background: transparent !important;
border-color: #d0d7de !important;
}
/* login-form card — white background */
body.dark .login-page .login-form,
html.dark body .login-page .login-form {
background: #ffffff !important;
border-color: #e5e7eb !important;
}
/* Title paragraph (Cheque Request Management System) */
body.dark .login-page .login-form > p,
html.dark body .login-page .login-form > p {
color: rgb(153, 0, 0) !important;
}
/* Headings */
body.dark .login-page h1, body.dark .login-page h2,
body.dark .login-page h3, body.dark .login-page h4,
body.dark .login-page h5, body.dark .login-page h6,
html.dark body .login-page h1, html.dark body .login-page h2,
html.dark body .login-page h3, html.dark body .login-page h4,
html.dark body .login-page h5, html.dark body .login-page h6 {
color: #111827 !important;
}
/* Microsoft login button — all descendants must also be white */
body.dark .login-page button.oauth-btn.microsoft,
body.dark .login-page button.oauth-btn.microsoft *,
html.dark body .login-page button.oauth-btn.microsoft,
html.dark body .login-page button.oauth-btn.microsoft * {
background: rgb(153, 0, 0) !important;
color: #ffffff !important;
border-color: transparent !important;
fill: currentColor;
}
body.dark .login-page button.oauth-btn.microsoft svg,
body.dark .login-page button.oauth-btn.microsoft svg *,
html.dark body .login-page button.oauth-btn.microsoft svg,
html.dark body .login-page button.oauth-btn.microsoft svg * {
background: transparent !important;
color: #ffffff !important;
}
/* Local submit button */
body.dark .login-page button.oauth-btn:not(.microsoft),
html.dark body .login-page button.oauth-btn:not(.microsoft) {
background: #f6f8fa !important;
color: #24292f !important;
border-color: #d0d7de !important;
}
/* Divider lines (the thin hr-style divs) */
body.dark .login-page [style*="height: '1px'"],
body.dark .login-page [style*="height:1px"],
body.dark .login-page [style*="background: '#e1e5e9'"],
body.dark .login-page [style*="background: #e1e5e9"],
html.dark body .login-page [style*="height: '1px'"],
html.dark body .login-page [style*="height:1px"],
html.dark body .login-page [style*="background: '#e1e5e9'"],
html.dark body .login-page [style*="background: #e1e5e9"] {
background: #e1e5e9 !important;
}
/* Info box at bottom (.login-info-box) */
body.dark .login-page .login-info-box,
html.dark body .login-page .login-info-box {
background: #f6f8fa !important;
color: #24292f !important;
border-color: #e1e5e9 !important;
}
body.dark .login-page .login-info-box p,
html.dark body .login-page .login-info-box p {
color: #656d76 !important;
}
/* Error box */
body.dark .login-page [style*="#f8d7da"],
html.dark body .login-page [style*="#f8d7da"] {
background: #f8d7da !important;
color: #721c24 !important;
border-color: #f5c6cb !important;
}
/* Loading spinner box */
body.dark .login-page [style*="#f8f9fa"],
html.dark body .login-page [style*="#f8f9fa"] {
background: #f8f9fa !important;
color: #374151 !important;
border-color: #e9ecef !important;
}
/* login-input fields */
body.dark .login-page .login-input,
html.dark body .login-page .login-input {
background: #ffffff !important;
color: #111827 !important;
border-color: #d0d7de !important;
}
/* Misc text — toggle button, small spans */
body.dark .login-page button[style*="background: none"],
body.dark .login-page button[style*="background:none"],
html.dark body .login-page button[style*="background: none"],
html.dark body .login-page button[style*="background:none"] {
background: transparent !important;
color: #6f7681 !important;
border-color: transparent !important;
}
/* ── Overdue badge (header) ────────────────────────────────────────────────── */
button.overdue-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgb(153, 0, 0);
color: #ffffff;
border: none;
border-radius: 4px;
padding: 2px 8px;
font-family: monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
cursor: pointer;
line-height: 1.6;
transition: background 0.15s;
}
button.overdue-badge:hover {
background: rgb(120, 0, 0);
}
.overdue-badge-count {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.22);
border-radius: 9999px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
font-weight: 800;
line-height: 1;
}
/* dark mode — badge keeps same red, slightly brighter border */
body.dark button.overdue-badge,
html.dark body button.overdue-badge {
background: rgb(153, 0, 0) !important;
color: #ffffff !important;
border: 1px solid rgb(200, 30, 30) !important;
}
body.dark button.overdue-badge:hover,
html.dark body button.overdue-badge:hover {
background: rgb(120, 0, 0) !important;
color: #ffffff !important;
}
/* Ensure all child elements (icon, text, count pill) stay white on hover */
body.dark button.overdue-badge:hover *,
html.dark body button.overdue-badge:hover * {
color: #ffffff !important;
}
/* ── TEST MODE badge button — pinned amber style, immune to dark-mode overrides */
button.btn-test-mode {
background: #fef3c7 !important;
color: #92400e !important;
border: 1.5px solid #d97706 !important;
}
button.btn-test-mode:hover:not(:disabled) {
background: #fde68a !important;
color: #92400e !important;
border: 1.5px solid #d97706 !important;
}
button.btn-test-mode i {
color: #92400e !important;
}
html.dark body button.btn-test-mode,
body.dark button.btn-test-mode {
background: #fef3c7 !important;
color: #92400e !important;
border: 1.5px solid #d97706 !important;
}
html.dark body button.btn-test-mode:hover:not(:disabled),
body.dark button.btn-test-mode:hover:not(:disabled) {
background: #fde68a !important;
color: #92400e !important;
border: 1.5px solid #d97706 !important;
}
html.dark body button.btn-test-mode i,
body.dark button.btn-test-mode i {
color: #92400e !important;
}
/* ── Notification pref row — transparent background when OFF in dark mode ──── */
html.dark body .notif-pref-row--off,
body.dark .notif-pref-row--off {
background: transparent !important;
}
/* ── Overdue popup panel ────────────────────────────────────────────────────── */
.overdue-popup {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 1200;
min-width: 260px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
overflow: hidden;
}
.overdue-popup-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgb(153, 0, 0);
color: #ffffff;
font-size: 13px;
font-weight: 700;
}
.overdue-popup-header i { font-size: 13px; }
.overdue-popup-header span { flex: 1; }
.overdue-popup-close {
background: none;
border: none;
color: rgba(255,255,255,0.75);
cursor: pointer;
padding: 2px 4px;
font-size: 13px;
line-height: 1;
transition: color 0.15s;
}
.overdue-popup-close:hover { color: #ffffff; }
.overdue-popup-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.overdue-popup-section {
display: flex;
flex-direction: column;
gap: 6px;
}
.overdue-popup-section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
}
.overdue-popup-view-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
border: 1px solid #d1d5db;
background: #f9fafb;
color: #374151;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.overdue-popup-view-btn:hover {
background: rgb(153, 0, 0);
border-color: rgb(153, 0, 0);
color: #ffffff;
}
.overdue-popup-divider {
height: 1px;
background: #e5e7eb;
margin: 0 -14px;
}
.overdue-popup-tiers {
display: flex;
flex-direction: column;
gap: 4px;
}
.overdue-popup-tier {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
}
.overdue-popup-tier-count {
font-weight: 800;
font-size: 13px;
min-width: 20px;
text-align: right;
}
.overdue-popup-tier-label {
font-weight: 500;
}
/* tier colour variants — light mode */
.overdue-popup-tier--blue { background: #eff6ff; color: rgb(0, 120, 212); border: 1px solid #bfdbfe; }
.overdue-popup-tier--orange { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.overdue-popup-tier--rose { background: #fff1f2; color: #9f1239; border: 1px solid #fda4af; }
.overdue-popup-tier--red { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
/* ── Overdue popup — dark mode ──────────────────────────────────────────────── */
body.dark .overdue-popup,
html.dark body .overdue-popup {
background: var(--card) !important;
border-color: rgb(93, 93, 93) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
body.dark .overdue-popup-header,
html.dark body .overdue-popup-header {
background: rgb(153, 0, 0) !important;
color: #ffffff !important;
}
body.dark .overdue-popup-section-title,
html.dark body .overdue-popup-section-title {
color: var(--muted-foreground) !important;
}
body.dark .overdue-popup-view-btn,
html.dark body .overdue-popup-view-btn {
background: rgba(255,255,255,0.06) !important;
border-color: rgb(93,93,93) !important;
color: var(--muted-foreground) !important;
}
body.dark .overdue-popup-view-btn:hover,
html.dark body .overdue-popup-view-btn:hover {
background: rgb(153, 0, 0) !important;
border-color: rgb(153, 0, 0) !important;
color: #ffffff !important;
}
/* ── Overdue cell badge — dark mode (strip light bg/border) ─────────────── */
body.dark .overdue-cell-badge,
html.dark body .overdue-cell-badge {
background: transparent !important;
border: none !important;
}
/* ── Excluded-tasks info banner — dark mode ─────────────────────────────── */
body.dark .excluded-tasks-banner,
html.dark body .excluded-tasks-banner {
background: transparent !important;
border: none !important;
color: var(--muted-foreground) !important;
}
/* ── Completed stage pill — dark mode (strip light green bg/border) ─────── */
body.dark .completed-stage-pill,
html.dark body .completed-stage-pill {
background: transparent !important;
border: none !important;
color: #4ade80 !important;
}
body.dark .completed-stage-pill i,
html.dark body .completed-stage-pill i {
color: #4ade80 !important;
}
/* ── Purple "acted by" delegation note — white in dark mode ─────────────── */
body.dark .detail-panel *[style*="rgb(91, 33, 182)"],
html.dark body .detail-panel *[style*="rgb(91, 33, 182)"] {
color: #ffffff !important;
}
body.dark .overdue-popup-divider,
html.dark body .overdue-popup-divider {
background: rgb(93, 93, 93) !important;
}
/* tier variants — dark mode */
body.dark .overdue-popup-tier--blue,
html.dark body .overdue-popup-tier--blue {
background: rgba(0, 120, 212, 0.15) !important;
color: #60a5fa !important;
border-color: rgba(0, 120, 212, 0.35) !important;
}
body.dark .overdue-popup-tier--orange,
html.dark body .overdue-popup-tier--orange {
background: rgba(154, 52, 18, 0.18) !important;
color: #fb923c !important;
border-color: rgba(154, 52, 18, 0.4) !important;
}
body.dark .overdue-popup-tier--rose,
html.dark body .overdue-popup-tier--rose {
background: rgba(159, 18, 57, 0.18) !important;
color: #fb7185 !important;
border-color: rgba(159, 18, 57, 0.4) !important;
}
body.dark .overdue-popup-tier--red,
html.dark body .overdue-popup-tier--red {
background: rgba(153, 27, 27, 0.2) !important;
color: #f87171 !important;
border-color: rgba(153, 27, 27, 0.45) !important;
}
/* ── Profile dropdown buttons — dark mode overrides ─────────────────────────
The global rule body.dark button { background-color: #000 !important; color: rgb(153,0,0) !important }
kills all inline styles on |