/** * DBVault Theme System * ==================== * Supports light/dark mode with multiple color palettes. * * Usage: * * * * Palettes: * - "linear" (Idea B): Linear/GitHub inspired - cool blues, high contrast * - "aws" (Idea A): AWS Console inspired - warmer, softer contrast */ /* ========================================================================== Light Mode (Default) ========================================================================== */ :root, [data-bs-theme="light"] { /* Core backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f6f8fa; --bg-tertiary: #f0f2f5; --bg-elevated: #ffffff; /* Text colors */ --text-primary: #1f2328; --text-secondary: #57606a; --text-muted: #8b949e; --text-inverse: #ffffff; /* Borders */ --border-color: #d0d7de; --border-subtle: #e1e4e8; /* Form inputs */ --input-bg: #ffffff; --input-border: #d0d7de; --input-border-focus: var(--app-color); --input-placeholder: #8b949e; /* Tables */ --table-header-bg: #f6f8fa; --table-row-hover: #e8f0fe; --table-border: #d0d7de; --table-stripe-bg: #f0f3f6; /* Sidebar / Navigation */ --sidebar-bg: #f6f8fa; --sidebar-text: #1f2328; --sidebar-hover: #e1e4e8; --sidebar-active: var(--app-color-light); --archive-objects-bg: rgba(0, 0, 0, 0.03); /* Cards and panels */ --card-bg: #ffffff; --card-border: #d0d7de; --card-shadow: rgba(0, 0, 0, 0.1); /* Modals and dropdowns */ --modal-bg: #ffffff; --modal-border: #d0d7de; --modal-overlay: rgba(0, 0, 0, 0.5); --dropdown-bg: #ffffff; --dropdown-hover: #f6f8fa; /* Status colors (same in light/dark) */ --success: #2da44e; --success-bg: #dafbe1; --warning: #d4a72c; --warning-bg: #fff8c5; --danger: #cf222e; --danger-bg: #ffebe9; --info: #0969da; --info-bg: #ddf4ff; /* Scrollbar */ --scrollbar-track: #f0f2f5; --scrollbar-thumb: #c1c8cf; --scrollbar-thumb-hover: #8b949e; /* Links */ --link-color: #0969da; --link-hover: #0550ae; /* Bootstrap overrides for light mode */ --bs-body-bg: var(--bg-primary); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-color); } /* ========================================================================== Dark Mode - Linear/GitHub Palette (Idea B) Cool, high contrast, professional ========================================================================== */ [data-bs-theme="dark"], [data-bs-theme="dark"][data-palette="linear"] { /* ======================================================================= 1. SURFACE SEPARATION - Three-level background hierarchy Each level ~5-8% lighter for clear depth without "boxing" ======================================================================= */ --bg-primary: #0d1117; /* Level 1: App/page background (deepest) */ --bg-secondary: #161b22; /* Level 2: Panels, filters, cards */ --bg-tertiary: #1c2128; /* Level 3: Elevated surfaces */ --bg-elevated: #262c36; /* Hover states, active items */ /* ======================================================================= 2. TEXT HIERARCHY - Tight contrast ladder for readability ======================================================================= */ --text-primary: #e6edf3; /* Near-white (not pure white) - main content */ --text-secondary: #8b949e; /* Muted grey - less important columns */ --text-muted: #6e7681; /* Placeholder, empty states (still readable) */ --text-inverse: #0d1117; /* Borders - subtle dark mode dividers */ --border-color: #30363d; /* Main dividers */ --border-subtle: #21262d; /* Subtle separators */ /* Form inputs */ --input-bg: #0d1117; --input-border: #30363d; --input-border-focus: #58a6ff; --input-placeholder: #6e7681; /* ======================================================================= 3. TABLE COLORS - Surface, header, rows, zebra striping Table body sits as its own surface, 1 step lighter than panels ======================================================================= */ --table-body-bg: #0d1117; /* Table body background (same as app bg) */ --table-header-bg: #161b22; /* Header band - 1 step lighter than body */ --table-header-text: #e6edf3; /* Header text - bright for contrast */ --table-header-icon: #8b949e; /* Sort icons - mid contrast */ --table-border: #30363d; /* Table borders */ /* Row striping - subtle, noticeable when scanning */ --table-row-odd: #0d1117; /* Row A: base */ --table-row-even: #161b22; /* Row B: +1 subtle tint shift */ --table-stripe-bg: #161b22; /* Alias for legacy code */ /* ======================================================================= 4. HOVER + SELECTED - Brand blue as overlay tint (not solid) ======================================================================= */ --table-row-hover: rgba(56, 139, 253, 0.10); /* Very subtle blue overlay */ --table-row-selected: rgba(56, 139, 253, 0.18); /* ~1.5-2x stronger than hover */ --table-cell-focus: rgba(56, 139, 253, 0.14); /* Between hover and selected */ /* Sidebar / Navigation */ --sidebar-bg: #161b22; --sidebar-text: #e6edf3; --sidebar-hover: #21262d; --sidebar-active: #21262d; --archive-objects-bg: rgba(0, 0, 0, 0.25); /* Cards and panels */ --card-bg: #161b22; --card-border: #30363d; --card-shadow: rgba(0, 0, 0, 0.4); /* Modals and dropdowns */ --modal-bg: #161b22; --modal-border: #30363d; --modal-overlay: rgba(0, 0, 0, 0.7); --dropdown-bg: #161b22; --dropdown-hover: #21262d; /* ======================================================================= 6. STATUS / BADGES - Dark translucent fills, bright text/icons Semantic fills are dark + translucent; text/icons carry meaning ======================================================================= */ --success: #3fb950; /* Bright green text/icon */ --success-bg: rgba(46, 160, 67, 0.15); /* Muted green tint */ --success-muted: rgba(46, 160, 67, 0.25); --warning: #d29922; /* Amber text/icon */ --warning-bg: rgba(187, 128, 9, 0.15); /* Muted amber tint */ --warning-muted: rgba(187, 128, 9, 0.25); --danger: #f85149; /* Red text/icon */ --danger-bg: rgba(248, 81, 73, 0.15); /* Muted red tint */ --danger-muted: rgba(248, 81, 73, 0.25); --info: #58a6ff; /* Blue text/icon */ --info-bg: rgba(56, 139, 253, 0.15); /* Muted blue tint */ --info-muted: rgba(56, 139, 253, 0.25); --neutral-badge-bg: rgba(110, 118, 129, 0.15); /* Grey tint */ --neutral-badge-text: #8b949e; /* Grey text */ /* Scrollbar */ --scrollbar-track: #161b22; --scrollbar-thumb: #30363d; --scrollbar-thumb-hover: #484f58; /* Links - consistent blue, only on interactive elements */ --link-color: #58a6ff; --link-hover: #79c0ff; /* App color - primary blue for actions/active states Use consistently across: buttons, tabs, selection, focus rings */ --app-color: #4493f8; --app-color-light: rgba(56, 139, 253, 0.15); /* Selection backgrounds */ --app-color-hover: #58a6ff; --app-color-focus: rgba(56, 139, 253, 0.40); /* Focus ring tint */ /* Neutral button surface - visible step from background */ --btn-neutral-bg: #1a2028; --btn-neutral-border: #3a4450; --btn-neutral-hover: #222a33; /* Bootstrap dark mode overrides */ --bs-body-bg: var(--bg-primary); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-color); --bs-secondary-bg: var(--bg-secondary); --bs-tertiary-bg: var(--bg-tertiary); } /* ========================================================================== Dark Mode - AWS Palette (Idea A) Extracted from AWS Console screenshots via ChatGPT color analysis Primary: #101820 (52.3%), #182028 (37.2%) = 89.5% of all pixels ========================================================================== */ [data-bs-theme="dark"][data-palette="aws"] { /* ======================================================================= 1. SURFACE SEPARATION - Three-level background hierarchy ======================================================================= */ --bg-primary: #101820; /* Level 1: App/page background */ --bg-secondary: #182028; /* Level 2: Panels, filters */ --bg-tertiary: #202830; /* Level 3: Elevated surfaces */ --bg-elevated: #283038; /* Hover states */ /* ======================================================================= 2. TEXT HIERARCHY ======================================================================= */ --text-primary: #D8D8D8; /* Near-white - main content */ --text-secondary: #9098A0; /* Muted grey - less important */ --text-muted: #686870; /* Placeholder, empty states */ --text-inverse: #101820; /* Borders */ --border-color: #383840; --border-subtle: #202830; /* Form inputs */ --input-bg: #101820; --input-border: #383840; --input-border-focus: #3078A8; --input-placeholder: #686870; /* ======================================================================= 3. TABLE COLORS - Following the design system ======================================================================= */ --table-body-bg: #101820; /* Table body background */ --table-header-bg: #182028; /* Header band - 1 step lighter */ --table-header-text: #D8D8D8; /* Header text - bright */ --table-header-icon: #9098A0; /* Sort icons - mid contrast */ --table-border: #383840; /* Row striping */ --table-row-odd: #101820; /* Row A: base */ --table-row-even: #161e24; /* Row B: subtle shift */ --table-stripe-bg: #161e24; /* Alias for legacy code */ /* ======================================================================= 4. HOVER + SELECTED - Brand blue overlay ======================================================================= */ --table-row-hover: rgba(48, 120, 168, 0.12); --table-row-selected: rgba(48, 120, 168, 0.22); --table-cell-focus: rgba(48, 120, 168, 0.16); /* Sidebar / Navigation */ --sidebar-bg: #182028; --sidebar-text: #D8D8D8; --sidebar-hover: #283038; --sidebar-active: #001028; --archive-objects-bg: rgba(0, 0, 0, 0.25); /* Cards and panels */ --card-bg: #182028; --card-border: #383840; --card-shadow: rgba(0, 0, 0, 0.5); /* ======================================================================= 6. STATUS BADGES - AWS palette aligned ======================================================================= */ --success: #4ac05a; --success-bg: rgba(74, 192, 90, 0.15); --warning: #d29922; --warning-bg: rgba(210, 153, 34, 0.15); --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.15); --info: #3078A8; --info-bg: rgba(48, 120, 168, 0.15); --neutral-badge-bg: rgba(104, 104, 112, 0.15); --neutral-badge-text: #9098A0; /* Modals and dropdowns */ --modal-bg: #182028; --modal-border: #383840; --modal-overlay: rgba(0, 0, 0, 0.7); --dropdown-bg: #182028; --dropdown-hover: #283038; /* Status colors - from AWS Success: #40B8A8 (teal), #207028/#206828 (green dots) Warning: #F89800/#F89000 (orange CTA) Chart/category: #E07898 (pink) */ --success: #40B8A8; --success-bg: #10282820; --warning: #F89800; --warning-bg: #28201020; --danger: #d13212; --danger-bg: #281818; --info: #3078A8; --info-bg: #001028; /* Scrollbar */ --scrollbar-track: #182028; --scrollbar-thumb: #383840; --scrollbar-thumb-hover: #585860; /* Links - AWS blue family #286890, #3078A8, #2870A0, #2878B0, #3080B8 Bright: #4868E8 (rare interactive) */ --link-color: #3078A8; --link-hover: #4868E8; /* App color - AWS orange accent for CTAs #F89800 (100% in top header) */ --app-color: #F89800; --app-color-light: #F8980020; --app-color-hover: #F89000; } /* ========================================================================== Apply CSS Variables to Core Elements ========================================================================== */ /* Body and HTML */ html { color-scheme: light; } [data-bs-theme="dark"] { color-scheme: dark; } body { background-color: var(--bg-primary); color: var(--text-primary); } /* Links */ a { color: var(--link-color); } a:hover { color: var(--link-hover); } /* Form controls */ .form-control, .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } .form-control:focus, .form-select:focus { border-color: var(--input-border-focus); background-color: var(--input-bg); color: var(--text-primary); } .form-control::placeholder { color: var(--input-placeholder); } .form-control:disabled, .form-select:disabled { background-color: var(--bg-tertiary); color: var(--text-muted); } /* Browser autofill styling - override browser's default yellow/white backgrounds */ [data-bs-theme="dark"] input:-webkit-autofill, [data-bs-theme="dark"] input:-webkit-autofill:hover, [data-bs-theme="dark"] input:-webkit-autofill:focus, [data-bs-theme="dark"] input:-webkit-autofill:active, [data-bs-theme="dark"] textarea:-webkit-autofill, [data-bs-theme="dark"] select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important; -webkit-text-fill-color: var(--text-primary) !important; box-shadow: 0 0 0 1000px var(--input-bg) inset !important; transition: background-color 5000s ease-in-out 0s; caret-color: var(--text-primary); } /* Light mode autofill styling */ :root input:-webkit-autofill, :root input:-webkit-autofill:hover, :root input:-webkit-autofill:focus, :root input:-webkit-autofill:active, [data-bs-theme="light"] input:-webkit-autofill, [data-bs-theme="light"] input:-webkit-autofill:hover, [data-bs-theme="light"] input:-webkit-autofill:focus, [data-bs-theme="light"] input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important; -webkit-text-fill-color: var(--text-primary) !important; box-shadow: 0 0 0 1000px var(--input-bg) inset !important; transition: background-color 5000s ease-in-out 0s; caret-color: var(--text-primary); } /* Dark mode form controls - explicit override for Bootstrap defaults */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--input-bg) !important; color: var(--text-primary) !important; border-color: var(--input-border); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--input-bg) !important; color: var(--text-primary) !important; border-color: var(--input-border-focus); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--input-placeholder); } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled { background-color: var(--bg-tertiary) !important; color: var(--text-muted) !important; } /* Cards */ .card { background-color: var(--card-bg); border-color: var(--card-border); } .card-header { background-color: var(--bg-secondary); border-color: var(--card-border); } /* Bootstrap .bg-light override for dark mode */ [data-bs-theme="dark"] .bg-light { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } [data-bs-theme="dark"] .bg-light h6, [data-bs-theme="dark"] .bg-light h5, [data-bs-theme="dark"] .bg-light h4 { color: var(--text-primary) !important; } [data-bs-theme="dark"] .card-header.bg-light { background-color: var(--bg-secondary) !important; border-color: var(--card-border) !important; } /* Tables */ .table { --bs-table-bg: var(--bg-primary); --bs-table-border-color: var(--table-border); color: var(--text-primary); } .table thead th { background-color: var(--table-header-bg); color: var(--text-primary); border-color: var(--table-border); } .table tbody tr:hover { background-color: var(--table-row-hover); } .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-bg-type: var(--table-stripe-bg); } /* Modals */ .modal-content { background-color: var(--modal-bg); border-color: var(--modal-border); color: var(--text-primary); } .modal-header { border-color: var(--modal-border); } .modal-footer { border-color: var(--modal-border); } /* Modal buttons - secondary/cancel style for plain .btn in modals */ [data-bs-theme="dark"] .modal-footer .modal-cancel-btn, [data-bs-theme="dark"] .modal-footer .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning), [data-bs-theme="dark"] .modal-body .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning) { background-color: var(--btn-neutral-bg) !important; border: 1px solid var(--btn-neutral-border) !important; color: var(--text-secondary) !important; } [data-bs-theme="dark"] .modal-footer .modal-cancel-btn:hover, [data-bs-theme="dark"] .modal-footer .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning):hover, [data-bs-theme="dark"] .modal-body .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning):hover { background-color: var(--bg-elevated) !important; border-color: var(--app-color) !important; color: var(--text-primary) !important; } [data-bs-theme="dark"] .modal-footer .modal-cancel-btn:focus, [data-bs-theme="dark"] .modal-footer .modal-cancel-btn:focus-visible, [data-bs-theme="dark"] .modal-footer .modal-cancel-btn:active, [data-bs-theme="dark"] .modal-footer .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning):focus, [data-bs-theme="dark"] .modal-footer .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning):focus-visible, [data-bs-theme="dark"] .modal-footer .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning):active, [data-bs-theme="dark"] .modal-body .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning):focus, [data-bs-theme="dark"] .modal-body .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning):focus-visible, [data-bs-theme="dark"] .modal-body .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning):active { background-color: var(--btn-neutral-bg) !important; border-color: var(--btn-neutral-border) !important; color: var(--text-secondary) !important; box-shadow: none !important; } .modal-backdrop { background-color: var(--modal-overlay); } /* Dropdowns */ .dropdown-menu { background-color: var(--dropdown-bg); border-color: var(--border-color); } .dropdown-item { color: var(--text-primary); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--dropdown-hover); color: var(--text-primary); } .dropdown-divider { border-color: var(--border-subtle); opacity: 0.5; } /* Buttons - btn-outline variants */ .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-color); } .btn-outline-secondary:hover { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } /* ========================================================================== Neutral Buttons - Clear Surface Step from Background ========================================================================== */ /* Dark mode neutral buttons - clear contrast step from panel background */ [data-bs-theme="dark"] .btn-secondary, [data-bs-theme="dark"] .btn-light, [data-bs-theme="dark"] .btn-default, [data-bs-theme="dark"] .reset-btn { background-color: #1e2630 !important; /* Visible step from bg-secondary */ border: 1px solid #3a4450 !important; /* Clear visible border */ color: #e0e6ed !important; } [data-bs-theme="dark"] .btn-secondary:hover, [data-bs-theme="dark"] .btn-light:hover, [data-bs-theme="dark"] .btn-default:hover, [data-bs-theme="dark"] .reset-btn:hover, [data-bs-theme="dark"] .reset-btn:hover:not(:disabled) { background-color: #2a3440 !important; border-color: #4a5560 !important; color: #f0f3f6 !important; } /* Active/Focus states for neutral buttons */ [data-bs-theme="dark"] .btn-secondary:active, [data-bs-theme="dark"] .btn-secondary:focus, [data-bs-theme="dark"] .btn-secondary:focus-visible, [data-bs-theme="dark"] .btn-light:active, [data-bs-theme="dark"] .btn-light:focus, [data-bs-theme="dark"] .btn-light:focus-visible, [data-bs-theme="dark"] .btn-default:active, [data-bs-theme="dark"] .btn-default:focus, [data-bs-theme="dark"] .btn-default:focus-visible, [data-bs-theme="dark"] .reset-btn:active, [data-bs-theme="dark"] .reset-btn:focus, [data-bs-theme="dark"] .reset-btn:focus-visible { background-color: #2a3440 !important; border-color: #4a5560 !important; color: #f0f3f6 !important; box-shadow: none !important; outline: none !important; } /* Outline buttons - clear border contrast */ [data-bs-theme="dark"] .btn-outline-secondary, [data-bs-theme="dark"] .btn-outline-light { background-color: transparent; border: 1px solid #3a4450; color: #a0aab5; } [data-bs-theme="dark"] .btn-outline-secondary:hover, [data-bs-theme="dark"] .btn-outline-light:hover { background-color: #1e2630; border-color: #4a5560; color: #f0f3f6; } /* Download/Export buttons - light mode styling */ .download-csv, .btn.download-csv, .btn-download, .export-btn { background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); } .download-csv:hover, .btn.download-csv:hover, .btn-download:hover, .export-btn:hover { background-color: var(--bg-hover); border-color: var(--border-subtle); color: var(--text-primary); } /* Download/Export buttons - clearly visible secondary actions (not washed out) */ [data-bs-theme="dark"] .btn-download, [data-bs-theme="dark"] .download-csv, [data-bs-theme="dark"] .btn.download-csv, [data-bs-theme="dark"] .export-btn, [data-bs-theme="dark"] a.btn-light, [data-bs-theme="dark"] a.btn-secondary { background-color: #1e2630 !important; border: 1px solid #4a5560 !important; color: #c8d0d8 !important; /* High contrast for legibility */ } [data-bs-theme="dark"] .btn-download:hover, [data-bs-theme="dark"] .download-csv:hover, [data-bs-theme="dark"] .btn.download-csv:hover, [data-bs-theme="dark"] .export-btn:hover, [data-bs-theme="dark"] a.btn-light:hover, [data-bs-theme="dark"] a.btn-secondary:hover { background-color: #2a3848 !important; border-color: #5a6570 !important; color: #f0f3f6 !important; } /* Disabled buttons - muted dark surfaces, NOT white tiles */ [data-bs-theme="dark"] .btn:disabled, [data-bs-theme="dark"] .btn.disabled, [data-bs-theme="dark"] .btn[disabled] { background-color: #161b22 !important; /* Dark muted surface */ border-color: #252a32 !important; /* Subtle border */ color: #5a636e !important; /* Muted text */ opacity: 0.7; cursor: not-allowed; } /* Specific disabled button types - ensure they don't use white/light fills */ [data-bs-theme="dark"] .btn-light:disabled, [data-bs-theme="dark"] .btn-light.disabled, [data-bs-theme="dark"] .btn-secondary:disabled, [data-bs-theme="dark"] .btn-secondary.disabled, [data-bs-theme="dark"] .btn-outline-secondary:disabled, [data-bs-theme="dark"] .btn-outline-secondary.disabled { background-color: #161b22 !important; border-color: #252a32 !important; color: #5a636e !important; } /* Disabled primary button - muted blue, not bright */ [data-bs-theme="dark"] .btn-primary:disabled, [data-bs-theme="dark"] .btn-primary.disabled { background-color: #1a2a3a !important; /* Very muted blue-ish */ border-color: #252a32 !important; color: #5a636e !important; } /* Primary button - consistent app color */ [data-bs-theme="dark"] .btn-primary { background-color: var(--app-color); border-color: var(--app-color); color: white; } [data-bs-theme="dark"] .btn-primary:hover { background-color: var(--app-color-hover); border-color: var(--app-color-hover); } [data-bs-theme="dark"] .btn-primary:focus { box-shadow: 0 0 0 3px var(--app-color-focus); } /* ========================================================================== Status Badges - Semantic Colors for Status Values ========================================================================== */ /* Base status badge styling */ .status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; } /* Success statuses: Paid, Complete, Active, Approved */ .status-badge.status-success, .status-badge.status-paid, .status-badge.status-complete, .status-badge.status-active, .status-badge.status-approved { background-color: var(--success-bg); color: var(--success); border: 1px solid var(--success-muted); } /* Warning statuses: Open, Pending, In Progress */ .status-badge.status-warning, .status-badge.status-open, .status-badge.status-pending, .status-badge.status-in-progress { background-color: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-muted); } /* Danger statuses: Overdue, Failed, Rejected, Critical */ .status-badge.status-danger, .status-badge.status-overdue, .status-badge.status-failed, .status-badge.status-rejected, .status-badge.status-critical { background-color: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-muted); } /* Info/Neutral statuses: Draft, New, Info */ .status-badge.status-info, .status-badge.status-draft, .status-badge.status-new, .status-badge.status-neutral { background-color: var(--info-bg); color: var(--info); border: 1px solid var(--info-muted); } /* Muted/Inactive statuses: Closed, Cancelled, Inactive */ .status-badge.status-muted, .status-badge.status-closed, .status-badge.status-cancelled, .status-badge.status-inactive { background-color: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); } /* ========================================================================== Metadata/Data Source Chips - Reduced Saturation (Light & Dark) ========================================================================== */ /* Light mode - muted badges that don't pop too hard */ .record-category, .data-source-badge, .metadata-chip { background-color: #f0f3f6; color: #5a6672; border: 1px solid #d8dde3; } .badge.bg-info, .badge.badge-info { background-color: #e8f4fd !important; color: #1a5a8a !important; border: 1px solid #c5ddf0; } .badge.bg-success, .badge.badge-success { background-color: #e6f5ea !important; color: #1a6b3a !important; border: 1px solid #c5e5cf; } .badge.bg-warning, .badge.badge-warning { background-color: #fef5e6 !important; color: #8a5a1a !important; border: 1px solid #f0dfc5; } /* Record category/metadata chips - muted to fit dark theme */ [data-bs-theme="dark"] .record-category, [data-bs-theme="dark"] .data-source-badge, [data-bs-theme="dark"] .metadata-chip { background-color: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } /* Specific category colors - low saturation versions */ [data-bs-theme="dark"] .record-category.category-metadata, [data-bs-theme="dark"] .badge-metadata { background-color: #1a2a28; color: #6ab5a5; border-color: #2a3a38; } [data-bs-theme="dark"] .record-category.category-source, [data-bs-theme="dark"] .badge-source, [data-bs-theme="dark"] .badge-datasource { background-color: #2a2518; color: #c5a060; border-color: #3a3528; } /* Bootstrap badge overrides for dark mode */ [data-bs-theme="dark"] .badge.bg-success, [data-bs-theme="dark"] .badge.badge-success { background-color: var(--success-bg) !important; color: var(--success) !important; border: 1px solid var(--success-muted); } [data-bs-theme="dark"] .badge.bg-warning, [data-bs-theme="dark"] .badge.badge-warning { background-color: var(--warning-bg) !important; color: var(--warning) !important; border: 1px solid var(--warning-muted); } [data-bs-theme="dark"] .badge.bg-danger, [data-bs-theme="dark"] .badge.badge-danger { background-color: var(--danger-bg) !important; color: var(--danger) !important; border: 1px solid var(--danger-muted); } [data-bs-theme="dark"] .badge.bg-info, [data-bs-theme="dark"] .badge.badge-info { background-color: var(--info-bg) !important; color: var(--info) !important; border: 1px solid var(--info-muted); } [data-bs-theme="dark"] .badge.bg-secondary, [data-bs-theme="dark"] .badge.badge-secondary { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-color); } [data-bs-theme="dark"] .badge.bg-primary, [data-bs-theme="dark"] .badge.badge-primary { background-color: var(--app-color) !important; color: white !important; } /* ========================================================================== Icons - Consistent Palette ========================================================================== */ /* Default icon state - secondary grey */ [data-bs-theme="dark"] .filter-icon, [data-bs-theme="dark"] .column-icon, [data-bs-theme="dark"] .action-icon, [data-bs-theme="dark"] .toolbar-icon { color: var(--text-secondary); opacity: 0.85; transition: color 0.15s, opacity 0.15s; } /* Icon hover - brighter */ [data-bs-theme="dark"] .filter-icon:hover, [data-bs-theme="dark"] .column-icon:hover, [data-bs-theme="dark"] .action-icon:hover, [data-bs-theme="dark"] .toolbar-icon:hover { color: var(--text-primary); opacity: 1; } /* Active icon - primary blue */ [data-bs-theme="dark"] .filter-icon.active, [data-bs-theme="dark"] .column-icon.active, [data-bs-theme="dark"] .action-icon.active, [data-bs-theme="dark"] .toolbar-icon.active { color: var(--app-color); opacity: 1; } /* ========================================================================== Tab Bar - Dark Mode (Nav Tabs) - Force Override Bootstrap Defaults ========================================================================== */ /* Tab bar container - MUST BE DARK (not white strip) */ [data-bs-theme="dark"] .nav-tabs, [data-bs-theme="dark"] ul.nav-tabs, [data-bs-theme="dark"] .nav.nav-tabs { background-color: #161b22 !important; /* Explicit dark bg */ border-color: var(--border-color) !important; } /* Individual tab links - ensure text visible on dark bg */ [data-bs-theme="dark"] .nav-tabs .nav-link, [data-bs-theme="dark"] .nav-tabs > li > a, [data-bs-theme="dark"] .nav-tabs .nav-item .nav-link { color: #9aa0a8 !important; /* Clearly visible on dark bg */ border-color: transparent !important; background-color: transparent !important; } [data-bs-theme="dark"] .nav-tabs .nav-link:hover, [data-bs-theme="dark"] .nav-tabs > li > a:hover, [data-bs-theme="dark"] .nav-tabs .nav-item .nav-link:hover { color: #e0e6ed !important; background-color: #1e2630 !important; border-color: transparent !important; } /* Active tab - blue accent stands out */ [data-bs-theme="dark"] .nav-tabs .nav-link.active, [data-bs-theme="dark"] .nav-tabs > li.active > a, [data-bs-theme="dark"] .nav-tabs .nav-item .nav-link.active { color: var(--app-color) !important; background-color: #1e2630 !important; border-color: var(--border-color) var(--border-color) #1e2630 !important; font-weight: 500; position: relative; } /* Active tab blue underline indicator */ [data-bs-theme="dark"] .nav-tabs .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 12px; height: 2px; background-color: var(--app-color); border-radius: 2px 2px 0 0; } /* Tab content area */ [data-bs-theme="dark"] .tab-content { background-color: var(--bg-secondary); border: 1px solid var(--border-color) !important; border-top: none !important; /* Pills bar handles top edge */ } /* Pills bar top border - matches tab-content side borders */ [data-bs-theme="dark"] .data-table-pills { border-top: 1px solid var(--border-color); } /* ========================================================================== Code/Query Editor - Dark Mode ========================================================================== */ /* Code editor surface - distinct from panel background */ [data-bs-theme="dark"] pre, [data-bs-theme="dark"] code, [data-bs-theme="dark"] .code-block, [data-bs-theme="dark"] textarea.sqlquery-textarea, [data-bs-theme="dark"] .query-editor, [data-bs-theme="dark"] .code-editor { background-color: #0d1117; /* Slightly darker than panel */ border-color: var(--border-color); color: #e6edf3; /* High contrast base text */ } /* Inline code */ [data-bs-theme="dark"] code:not(pre code) { background-color: var(--bg-tertiary); color: #f0f3f6; } /* Query/SQL textarea specific styling */ [data-bs-theme="dark"] textarea.sqlquery-textarea.form-control { background-color: #0d1117; border: 1px solid var(--border-color); color: #e6edf3; font-size: 13px; line-height: 1.5; } [data-bs-theme="dark"] textarea.sqlquery-textarea.form-control:focus { border-color: var(--app-color); box-shadow: 0 0 0 2px var(--app-color-focus); } [data-bs-theme="dark"] textarea.sqlquery-textarea.form-control::placeholder { color: var(--text-muted); } /* ========================================================================== Nav Pills (Data Table Pills) - Dark Mode ========================================================================== */ /* Pills container - dark bar matching app theme */ [data-bs-theme="dark"] .nav-pills, [data-bs-theme="dark"] .nav.nav-pills, [data-bs-theme="dark"] ul.nav-pills, [data-bs-theme="dark"] .data-table-pills { background-color: #161b22 !important; border-color: var(--border-color) !important; } /* Individual pill links - high contrast */ [data-bs-theme="dark"] .nav-pills .nav-link, [data-bs-theme="dark"] .data-table-pills .nav-link, [data-bs-theme="dark"] .nav-pills .nav-item .nav-link { color: #9aa0a8 !important; /* Visible inactive text */ background-color: transparent !important; } [data-bs-theme="dark"] .nav-pills .nav-link:hover, [data-bs-theme="dark"] .data-table-pills .nav-link:hover { color: #e0e6ed !important; background-color: #1e2630 !important; } /* Active pill - matches sidebar active state */ [data-bs-theme="dark"] .nav-pills .nav-link.active, [data-bs-theme="dark"] .data-table-pills .nav-link.active { color: var(--app-color) !important; background-color: var(--sidebar-active) !important; font-weight: 500; } /* Filter panel container */ [data-bs-theme="dark"] .archive-dataTable-filters { background-color: var(--bg-secondary); border: none; /* Remove bright border */ } /* Panel wrappers in filter area - remove #ccc borders */ [data-bs-theme="dark"] .filter-collapse-wrapper, [data-bs-theme="dark"] .join-table-link-wrapper, [data-bs-theme="dark"] .saved-search-container, [data-bs-theme="dark"] .summary-search-container { background-color: var(--bg-secondary); border: none; /* Remove border - bg contrast is enough */ } /* SVG icons in pills - visible on dark bg */ [data-bs-theme="dark"] .nav-pills svg, [data-bs-theme="dark"] .data-table-pills svg, [data-bs-theme="dark"] .nav-pills svg path, [data-bs-theme="dark"] .data-table-pills svg path { fill: #9aa0a8; } /* Sigma/Summary icon uses stroke instead of fill */ [data-bs-theme="dark"] .data-table-pills .sigma-path { stroke: #9aa0a8; fill: none; } [data-bs-theme="dark"] .nav-pills .nav-link.active svg, [data-bs-theme="dark"] .data-table-pills .nav-link.active svg, [data-bs-theme="dark"] .nav-pills .nav-link.active svg path, [data-bs-theme="dark"] .data-table-pills .nav-link.active svg path { fill: var(--app-color); } /* Sigma/Summary icon active state */ [data-bs-theme="dark"] .data-table-pills .nav-link.active .sigma-path { stroke: var(--app-color); fill: none; } /* ========================================================================== DBVault/Archive Specific Dark Mode Styling ========================================================================== */ /* Archive button container - clear button group */ [data-bs-theme="dark"] .archive-btn-container { background-color: var(--bg-secondary); border: none; } /* Saved search buttons - secondary action styling */ [data-bs-theme="dark"] .saved-search-btn, [data-bs-theme="dark"] .btn.saved-search-btn { background-color: #1e2630 !important; border: 1px solid #3a4450 !important; color: #c0c8d0 !important; } [data-bs-theme="dark"] .saved-search-btn:hover, [data-bs-theme="dark"] .btn.saved-search-btn:hover { background-color: #2a3440 !important; border-color: #4a5560 !important; color: #f0f3f6 !important; } /* Archive header - clear title area */ [data-bs-theme="dark"] .archive-dt-header, [data-bs-theme="dark"] .dataTable-header { background-color: transparent; border-bottom: none; color: var(--text-primary); } [data-bs-theme="dark"] .archive-dt-title { color: var(--text-primary); } [data-bs-theme="dark"] .saved-search-title { color: var(--app-color); } /* ========================================================================== DARK MODE TABLES - Comprehensive styling ========================================================================== */ /* 1. Table container - sits as its own surface */ [data-bs-theme="dark"] .table-container { background-color: var(--table-body-bg, var(--bg-primary)); border: 1px solid var(--table-border) !important; } /* 2. Table header band - distinct contrast step */ [data-bs-theme="dark"] .record-table thead th, [data-bs-theme="dark"] .dataTable thead th, [data-bs-theme="dark"] #dataTable thead th { background-color: var(--table-header-bg) !important; color: var(--table-header-text, var(--text-primary)) !important; border-bottom: 1px solid var(--table-border); } [data-bs-theme="dark"] .record-table thead th span, [data-bs-theme="dark"] .dataTable thead th span, [data-bs-theme="dark"] #dataTable thead th span { color: var(--table-header-text, var(--text-primary)); } /* Sort icons - mid contrast */ [data-bs-theme="dark"] .record-table thead th .sort-icon, [data-bs-theme="dark"] .record-table thead th svg, [data-bs-theme="dark"] .dataTable thead th .sort-icon, [data-bs-theme="dark"] .dataTable thead th svg { fill: var(--table-header-icon, var(--text-secondary)); opacity: 0.7; } /* 3. Row striping (zebra) - subtle but scannable */ [data-bs-theme="dark"] .record-table tbody tr, [data-bs-theme="dark"] .dataTable tbody tr, [data-bs-theme="dark"] #dataTable tbody tr { background-color: var(--table-row-odd, var(--bg-primary)); } [data-bs-theme="dark"] .record-table tbody tr:nth-child(even), [data-bs-theme="dark"] table.record-table tbody tr:nth-child(even), [data-bs-theme="dark"] .dataTable tbody tr:nth-child(even), [data-bs-theme="dark"] #dataTable tbody tr:nth-child(even) { background-color: var(--table-row-even, var(--bg-secondary)) !important; } /* 4. Hover + selected rows - brand blue overlay (not solid fill) */ [data-bs-theme="dark"] .record-table tbody tr:hover, [data-bs-theme="dark"] .dataTable tbody tr:hover, [data-bs-theme="dark"] #dataTable tbody tr:hover { background-color: var(--table-row-hover) !important; } [data-bs-theme="dark"] .record-table tbody tr.selected, [data-bs-theme="dark"] .record-table tbody tr.row-selected, [data-bs-theme="dark"] .dataTable tbody tr.selected, [data-bs-theme="dark"] .dataTable tbody tr.row-selected, [data-bs-theme="dark"] #dataTable tbody tr.selected, [data-bs-theme="dark"] #dataTable tbody tr.row-selected { background-color: var(--table-row-selected) !important; } [data-bs-theme="dark"] .record-table tbody td:focus, [data-bs-theme="dark"] .record-table tbody td.cell-focus, [data-bs-theme="dark"] .dataTable tbody td:focus, [data-bs-theme="dark"] .dataTable tbody td.cell-focus { background-color: var(--table-cell-focus) !important; outline: 1px solid var(--app-color); } /* 5. Text hierarchy inside table */ [data-bs-theme="dark"] .record-table td, [data-bs-theme="dark"] .dataTable td, [data-bs-theme="dark"] #dataTable td { color: var(--text-primary); } /* Secondary text - less important columns */ [data-bs-theme="dark"] .record-table td.cell-secondary, [data-bs-theme="dark"] .record-table td .value-secondary, [data-bs-theme="dark"] .dataTable td.cell-secondary, [data-bs-theme="dark"] .dataTable td .value-secondary { color: var(--text-secondary); } /* Muted text - placeholder, empty states */ [data-bs-theme="dark"] .record-table td.cell-muted, [data-bs-theme="dark"] .record-table td .value-muted, [data-bs-theme="dark"] .record-table td .empty-value, [data-bs-theme="dark"] .dataTable td.cell-muted, [data-bs-theme="dark"] .dataTable td .value-muted, [data-bs-theme="dark"] .dataTable td .empty-value { color: var(--text-muted); } /* 6. Status badges - dark translucent fills, bright text/icons */ [data-bs-theme="dark"] .badge-success, [data-bs-theme="dark"] .status-success { background-color: var(--success-bg) !important; color: var(--success) !important; } [data-bs-theme="dark"] .badge-warning, [data-bs-theme="dark"] .status-warning { background-color: var(--warning-bg) !important; color: var(--warning) !important; } [data-bs-theme="dark"] .badge-danger, [data-bs-theme="dark"] .status-danger, [data-bs-theme="dark"] .badge-error, [data-bs-theme="dark"] .status-error { background-color: var(--danger-bg) !important; color: var(--danger) !important; } [data-bs-theme="dark"] .badge-info, [data-bs-theme="dark"] .status-info { background-color: var(--info-bg) !important; color: var(--info) !important; } [data-bs-theme="dark"] .badge-secondary, [data-bs-theme="dark"] .badge-neutral, [data-bs-theme="dark"] .status-neutral { background-color: var(--neutral-badge-bg) !important; color: var(--neutral-badge-text) !important; } /* Table links - consistent blue */ [data-bs-theme="dark"] .record-table td a, [data-bs-theme="dark"] .dataTable td a, [data-bs-theme="dark"] #dataTable td a { color: var(--link-color); } [data-bs-theme="dark"] .record-table td a:hover, [data-bs-theme="dark"] .dataTable td a:hover, [data-bs-theme="dark"] #dataTable td a:hover { color: var(--link-hover); } /* Submit/Search button - info variant for primary action */ [data-bs-theme="dark"] .archive-filter-submit-btn, [data-bs-theme="dark"] .btn-info { background-color: var(--app-color) !important; border-color: var(--app-color) !important; color: white !important; } [data-bs-theme="dark"] .archive-filter-submit-btn:hover, [data-bs-theme="dark"] .btn-info:hover { background-color: var(--app-color-hover) !important; border-color: var(--app-color-hover) !important; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ========================================================================== Theme Toggle Button Styles ========================================================================== */ .theme-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border-radius: 6px; transition: background-color 0.2s; } .theme-toggle:hover { background-color: var(--dropdown-hover); } .theme-toggle-icon { width: 16px; height: 16px; } /* Sun icon - visible in dark mode */ .theme-icon-light { display: none; } [data-bs-theme="dark"] .theme-icon-light { display: block; } [data-bs-theme="dark"] .theme-icon-dark { display: none; } /* Moon icon - visible in light mode */ .theme-icon-dark { display: block; } /* Theme toggle labels */ .theme-label-dark { display: inline; } .theme-label-light { display: none; } [data-bs-theme="dark"] .theme-label-dark { display: none; } [data-bs-theme="dark"] .theme-label-light { display: inline; } /* ========================================================================== Palette Switcher (Developer/Admin Feature) ========================================================================== */ .palette-switcher { display: flex; gap: 8px; padding: 8px; } .palette-option { padding: 4px 12px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; font-size: 12px; } .palette-option:hover { background: var(--bg-tertiary); } .palette-option.active { border-color: var(--app-color); background: var(--app-color-light); } /* Hide palette switcher in production - only shown when ?palette=debug */ .palette-switcher { display: none; } body.palette-debug .palette-switcher { display: flex; } /* ========================================================================== Select2 Dark Mode Styling ========================================================================== */ [data-bs-theme="dark"] .select2-container--default .select2-selection--single, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--input-placeholder); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-secondary) transparent transparent transparent; } [data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--text-secondary) transparent; } /* Select2 dropdown menu - the actual dropdown list */ [data-bs-theme="dark"] .select2-dropdown { background-color: var(--dropdown-bg); border-color: var(--border-color); } [data-bs-theme="dark"] .select2-container--default .select2-results__option { color: var(--text-primary); background-color: var(--dropdown-bg); } [data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--dropdown-hover); color: var(--text-primary); } [data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--bg-tertiary); color: var(--text-primary); } /* Select2 search field inside dropdown */ [data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } [data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--input-border-focus); outline: none; } /* Select2 clear button */ [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--text-secondary); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--text-primary); } /* Select2 multiple selection tags */ [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--text-secondary); } [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--danger); } /* Select2 focus states */ [data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single, [data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple, [data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single, [data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--input-border-focus); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-border-focus) 25%, transparent); } /* Select2 disabled state */ [data-bs-theme="dark"] .select2-container--default .select2-selection--single.select2-readOnly, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple.select2-readOnly, [data-bs-theme="dark"] .select2-readOnly { background-color: var(--bg-tertiary) !important; pointer-events: none; } /* ========================================================================== Label Contrast Improvements (Dark Mode) ========================================================================== */ [data-bs-theme="dark"] .label-text { color: var(--text-secondary); font-weight: 500; } [data-bs-theme="dark"] .filter-dropdown-lookup-label { color: var(--text-secondary); } /* ========================================================================== Filter Controls - Dark Mode Overrides ========================================================================== */ /* Form checkbox container - dark mode */ [data-bs-theme="dark"] .form-checkbox-container label { background-color: var(--bg-tertiary); border-color: var(--border-color); } /* ========================================================================== Focus Ring Consistency ========================================================================== */ /* Standardized focus ring for all inputs */ [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: var(--input-border-focus); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-border-focus) 25%, transparent); } [data-bs-theme="dark"] .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-border-focus) 25%, transparent); } /* ========================================================================== Input Height & Sizing Consistency ========================================================================== */ /* Consistent control height across filters */ .filter-dropdown-lookup, .saveSearch-select, .dataTable-checkbox-label { min-height: 38px; box-sizing: border-box; } /* Dropdown lookup container alignment */ .filter-dropdown-lookup-container { display: flex; flex-direction: column; } .filter-dropdown-lookup-container .select2-container { margin-top: 0; } /* ========================================================================== Table Content Contrast & Readability (Dark Mode) ========================================================================== */ /* Table text hierarchy: Primary = key fields (Entity, Total, Record Name) Secondary = column values, less important data Muted = aux info, disabled */ /* Default table cell text - primary contrast */ [data-bs-theme="dark"] .record-table td { color: var(--text-primary); } /* Key fields - emphasized */ [data-bs-theme="dark"] .record-table td.cell-primary, [data-bs-theme="dark"] .record-table td .value-primary { color: var(--text-primary); font-weight: 500; } /* Secondary data - slightly muted but readable */ [data-bs-theme="dark"] .record-table td.cell-secondary, [data-bs-theme="dark"] .record-table td .value-secondary { color: var(--text-secondary); } /* Links in tables - blue only for interactive elements */ [data-bs-theme="dark"] .record-table td a.record-link, [data-bs-theme="dark"] .record-table td .tableCell-link a { color: var(--link-color); text-decoration: none; font-weight: 500; } [data-bs-theme="dark"] .record-table td a.record-link:hover, [data-bs-theme="dark"] .record-table td .tableCell-link a:hover { color: var(--link-hover); text-decoration: underline; } /* Non-link text in tables - shouldn't look clickable */ [data-bs-theme="dark"] .record-table td a:not(.btn):not(.record-link):not([href]) { color: var(--text-primary); pointer-events: none; } /* Text muted in tables */ [data-bs-theme="dark"] .record-table .text-muted { color: var(--text-muted) !important; } /* ========================================================================== Filter Bar Styling ========================================================================== */ /* Filter container alignment and spacing */ .filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 12px 0; margin-bottom: 12px; } .filters > div { display: flex; flex-direction: column; } /* Reset button styling - clear meaning */ .reset-btn-container { align-self: flex-end; } /* ========================================================================== Action Button Styling in Tables ========================================================================== */ /* Status icons - subdued by default */ .record-table .status-icon { opacity: 0.7; transition: opacity 0.15s; } .record-table .status-icon:hover { opacity: 1; } /* Action buttons - consistent styling */ .record-table .btn-sm { padding: 0.25rem 0.5rem; /* font-size: 0.75rem; */ border-radius: 4px; } /* Secondary action style - ghost button */ .btn-action-secondary { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 0.25rem 0.5rem; /* font-size: 0.75rem; */ border-radius: 4px; transition: all 0.15s; } .btn-action-secondary:hover { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } /* Delete button - less prominent */ .btn-action-danger { background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 0.25rem 0.5rem; /* font-size: 0.75rem; */ border-radius: 4px; transition: all 0.15s; } .btn-action-danger:hover { background-color: var(--danger-bg); color: var(--danger); border-color: var(--danger); } /* ========================================================================== Legend Styling ========================================================================== */ .table-legend { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-secondary); padding: 8px 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: 8px; } .table-legend span { display: flex; align-items: center; gap: 4px; } [data-bs-theme="dark"] .table-legend { color: var(--text-secondary); } /* ========================================================================== Form Fieldsets - Dark Mode ========================================================================== */ [data-bs-theme="dark"] fieldset { border-color: var(--border-color); } [data-bs-theme="dark"] legend { color: #8b949e; } [data-bs-theme="dark"] legend.collapsible-legend { background-color: #21262d; border-color: var(--border-color); } [data-bs-theme="dark"] legend.collapsible-legend:hover { background-color: #30363d; } [data-bs-theme="dark"] .fieldset-help-icon { color: #8b949e; background-color: #21262d; border-color: var(--border-color); } [data-bs-theme="dark"] .fieldset-help-icon:hover { color: #fff; background-color: #6c757d; border-color: #6c757d; } [data-bs-theme="dark"] .data-indicator { background-color: #484f58; } [data-bs-theme="dark"] .data-indicator.has-data { background-color: #3fb950; } /* ========================================================================== User/Tenant Dropdown Overlay Fixes ========================================================================== */ /* Constrain dropdown width and position */ .right-dropdown .dropdown-menu { width: 320px !important; max-width: 320px !important; max-height: calc(100vh - var(--navbar-height)); overflow-y: auto; right: 0; left: auto !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } [data-bs-theme="dark"] .right-dropdown .dropdown-menu { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); border-color: var(--border-color); background-color: var(--dropdown-bg); } /* User profile icon - invert for dark mode visibility */ [data-bs-theme="dark"] .user-icon { filter: invert(1); } /* Guide menu button - light text color for dark mode */ [data-bs-theme="dark"] .guide-btn { color: #e6edf3; } [data-bs-theme="dark"] .guide-btn:hover { background-color: rgba(255, 255, 255, 0.1); } /* Search field styling consistency */ #dropdown-menu-input { height: 38px; border-radius: 6px; border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); font-size: 14px; } #dropdown-menu-input::placeholder { color: var(--text-muted); } #dropdown-menu-input:focus { border-color: var(--input-border-focus); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-border-focus) 25%, transparent); } /* Section labels for dropdown */ .dropdown-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 12px 12px 6px 12px; margin: 0; } /* Account section items (Profile, Inbox, Theme, Logout) */ .dropdown-menu li.menu-action-item { border-bottom: none; } .dropdown-menu li.menu-action-item a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--text-primary); transition: background-color 0.15s; } .dropdown-menu li.menu-action-item a:hover { background-color: var(--dropdown-hover); } /* Theme toggle as a switch */ .theme-toggle-container { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; cursor: pointer; transition: background-color 0.15s; } .theme-toggle-container:hover { background-color: var(--dropdown-hover); } .theme-toggle-label { display: flex; align-items: center; gap: 8px; color: var(--text-primary); } /* Toggle switch styling */ .theme-switch { position: relative; width: 40px; height: 22px; background-color: var(--bg-tertiary); border-radius: 11px; transition: background-color 0.2s; border: 1px solid var(--border-color); } .theme-switch::after { content: ''; position: absolute; width: 16px; height: 16px; background-color: var(--text-secondary); border-radius: 50%; top: 2px; left: 2px; transition: transform 0.2s, background-color 0.2s; } [data-bs-theme="dark"] .theme-switch { background-color: var(--app-color); } [data-bs-theme="dark"] .theme-switch::after { transform: translateX(18px); background-color: white; } /* Sidebar icons toggle switch - uses .active class instead of theme */ .sidebar-icons-switch.active { background-color: var(--app-color); } .sidebar-icons-switch.active::after { transform: translateX(18px); background-color: white; } /* Tenant list readability */ .tenant-name { padding: 10px 12px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: background-color 0.15s; border-bottom: 1px solid var(--border-subtle); } .tenant-name:hover { background-color: var(--dropdown-hover); } /* Access list items - better readability and selection state */ .access-list-item { padding: 10px 12px 10px 20px; display: flex; align-items: center; color: var(--text-primary); transition: background-color 0.15s; cursor: pointer; border-left: 3px solid transparent; } .access-list-item:hover { background-color: var(--dropdown-hover); } /* Selected state for access list */ .access-list-item.rdm-highlight { background-color: var(--app-color-light); border-left-color: var(--app-color); } [data-bs-theme="dark"] .access-list-item.rdm-highlight { background-color: var(--app-color-light); } /* Lighter dividers in dropdown */ .dropdown-menu li { border-bottom: 1px solid var(--border-subtle); } .dropdown-menu li:last-child { border-bottom: none; } /* Section divider - thicker but subtle */ .dropdown-menu li.menu-action-last { border-bottom: 1px solid var(--border-color); margin-bottom: 0; padding-bottom: 4px; } /* ========================================================================== Saved Search Container - Dark Mode ========================================================================== */ /* Saved search area - matches filter panel styling */ [data-bs-theme="dark"] .saved-search-container, [data-bs-theme="dark"] .summary-search-container { background-color: var(--bg-secondary); border-color: var(--border-color); } /* Saved search wrapper */ [data-bs-theme="dark"] .saved-search-wrapper { /* Colors only - no layout changes */ } /* Saved search buttons - consistent with other buttons */ [data-bs-theme="dark"] .saved-search-btn { background-color: var(--btn-neutral-bg); border-color: var(--btn-neutral-border); color: var(--text-primary); } [data-bs-theme="dark"] .saved-search-btn:hover { background-color: var(--btn-neutral-hover); } /* ========================================================================== Page Layout & Padding Consistency ========================================================================== */ /* Consistent page gutters */ .contents { padding: 0 0; } /* Content pages that don't use dataTable-container need padding */ .contents > div:not(.dataTable-container):not(.pagination-container) { padding: 8px 16px; } /* Table container as coherent panel */ .dataTable-container { background-color: var(--bg-primary); border-radius: 8px; padding: 8px 16px; } [data-bs-theme="dark"] .dataTable-container { border: 1px solid var(--border-color); } .table-container { border-radius: 6px; border: 1px solid var(--border-color); /* overflow handled in custom.css to enable scrolling */ } /* Pagination container alignment */ .pagination-container { padding: 12px 0; display: flex; justify-content: space-between; align-items: center; } /* ========================================================================== Filter Bar Enhancements ========================================================================== */ /* Filter bar container - panels are lighter than app bg */ .filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 12px 16px; margin-bottom: 8px; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; /* Tighter radius */ } /* Dark mode filter panel - subtle background for visual separation */ [data-bs-theme="dark"] .filters { background-color: var(--bg-tertiary); border: 1px solid var(--border-color); } /* Filter labels - secondary text for labels */ .filters .label-text, .filter-dropdown-lookup-label { color: var(--text-secondary) !important; font-weight: 600; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 6px; } /* All filter controls - uniform height and styling */ .filters .form-control, .filters .form-select, .filters .select2-container .select2-selection--single, .filter-dropdown-lookup, .saveSearch-select, .dataTable-checkbox-label, .reset-btn { height: 38px !important; min-height: 38px; border-radius: 6px; } /* Filter input containers - consistent sizing */ .filters > div { min-width: 160px; } /* Reset button - clearly part of filter group */ .reset-btn-container { margin-left: auto; } /* ========================================================================== Table Readability Enhancements ========================================================================== */ /* Table body text - increased size and contrast */ .record-table td { font-size: clamp(1.5rem, 1.3rem + 0.2vw, 1.45rem); color: var(--text-primary); padding: 10px 12px; } /* Table container - panels lighter than app bg */ [data-bs-theme="dark"] .dataTable-container { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-bs-theme="dark"] .table-container { background-color: var(--bg-secondary); } /* Zebra striping - uses palette variables */ table.record-table tbody tr:nth-child(odd), table.dataTable tbody tr:nth-child(odd) { background-color: var(--table-row-odd, var(--bg-primary)); } table.record-table tbody tr:nth-child(even), table.dataTable tbody tr:nth-child(even) { background-color: var(--table-row-even, var(--bg-secondary)); } [data-bs-theme="dark"] table.record-table tbody tr:nth-child(odd), [data-bs-theme="dark"] table.dataTable tbody tr:nth-child(odd), [data-bs-theme="dark"] #dataTable tbody tr:nth-child(odd) { background-color: var(--table-row-odd); } [data-bs-theme="dark"] table.record-table tbody tr:nth-child(even), [data-bs-theme="dark"] table.dataTable tbody tr:nth-child(even), [data-bs-theme="dark"] #dataTable tbody tr:nth-child(even) { background-color: var(--table-row-even); } /* ========================================================================== Table Row Hover/Active - Theme-Aware Accent Bar Uses primary blue tint instead of yellow highlight Uses box-shadow for accent bar (position:relative on breaks table layout) ========================================================================== */ /* Light mode hover - subtle blue tint + left accent bar via box-shadow */ table.record-table tbody tr, table.dataTable tbody tr { transition: background-color 0.15s ease, box-shadow 0.15s ease; } table.record-table tbody tr:hover, table.dataTable tbody tr:hover { background-color: rgba(9, 105, 218, 0.06) !important; /* Light blue tint */ box-shadow: inset 3px 0 0 0 var(--app-color, #0969da); /* Blue accent bar */ } /* Active/selected row state (if applicable) */ table.record-table tbody tr.active, table.record-table tbody tr.selected, table.dataTable tbody tr.active, table.dataTable tbody tr.selected { background-color: rgba(9, 105, 218, 0.10) !important; box-shadow: inset 3px 0 0 0 var(--app-color, #0969da); } /* Dark mode hover - subtle blue tint + left accent bar */ [data-bs-theme="dark"] table.record-table tbody tr:hover, [data-bs-theme="dark"] table.dataTable tbody tr:hover, [data-bs-theme="dark"] #dataTable tbody tr:hover { background-color: var(--table-row-hover) !important; box-shadow: inset 3px 0 0 0 var(--app-color, #4493f8); } [data-bs-theme="dark"] table.record-table tbody tr.active, [data-bs-theme="dark"] table.record-table tbody tr.selected, [data-bs-theme="dark"] table.dataTable tbody tr.active, [data-bs-theme="dark"] table.dataTable tbody tr.selected, [data-bs-theme="dark"] #dataTable tbody tr.active, [data-bs-theme="dark"] #dataTable tbody tr.selected { background-color: var(--table-row-selected) !important; box-shadow: inset 3px 0 0 0 var(--app-color, #4493f8); } [data-bs-theme="dark"] .record-table td { color: var(--text-primary); } /* ========================================================================== Link Styling in Tables - Reduce "Blue Noise" ========================================================================== */ /* Subtle links - inherit color, underline on hover only */ .record-table td a.link-subtle, .record-table td a:not(.btn):not(.tableCell-link a) { color: var(--text-primary); text-decoration: none; transition: color 0.15s; } .record-table td a.link-subtle:hover, .record-table td a:not(.btn):not(.tableCell-link a):hover { color: var(--link-color); text-decoration: underline; } /* Primary link (record name) - keep blue but subtle */ .tableCell-link a { color: var(--link-color); text-decoration: none; font-weight: 500; } .tableCell-link a:hover { color: var(--link-hover); text-decoration: underline; } /* ========================================================================== Column Alignment & Formatting ========================================================================== */ /* Numeric columns - right aligned with tabular figures */ .record-table td.numeric, .record-table td.text-right, .record-table th.numeric, .record-table th.text-right, .cell-align-right { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Boolean columns - compact indicators */ .bool-indicator { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; font-size: 12px; } .bool-indicator.yes { background-color: var(--success-bg); color: var(--success); } .bool-indicator.no { background-color: var(--bg-tertiary); color: var(--text-muted); } /* Yes/No text - better contrast */ .record-table td .text-yes { color: var(--success); font-weight: 500; } .record-table td .text-no { color: var(--text-muted); } /* ========================================================================== Table Header Enhancement ========================================================================== */ /* Stronger header distinction - clear step from body rows */ .record-table thead th { background-color: var(--table-header-bg); color: var(--text-secondary); font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; padding: 12px; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 10; } [data-bs-theme="dark"] .record-table thead th, [data-bs-theme="dark"] .dataTable thead th, [data-bs-theme="dark"] #dataTable thead th { background-color: var(--table-header-bg); /* Use palette variable */ color: var(--table-header-text); /* Use palette variable */ border-bottom: 2px solid var(--border-color); } /* Header row - clear separation with subtle shadow */ .record-table thead tr, .dataTable thead tr { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } [data-bs-theme="dark"] .record-table thead tr, [data-bs-theme="dark"] .dataTable thead tr, [data-bs-theme="dark"] #dataTable thead tr { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } /* ========================================================================== Pagination Footer Integration ========================================================================== */ /* Pagination as part of table */ .pagination-container { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 6px 6px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; } .record-info { color: var(--text-secondary); font-size: 13px; font-weight: 500; } [data-bs-theme="dark"] .record-info { color: var(--text-secondary); } /* Page info styling */ .pagination-btn-container { display: flex; align-items: center; gap: 8px; } .prev-btn, .next-btn { background-color: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; transition: all 0.15s; } .prev-btn:hover:not([disabled]), .next-btn:hover:not([disabled]) { background-color: var(--bg-tertiary); border-color: var(--border-color); } .prev-btn[disabled], .next-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* Invert caret icons in dark mode (img tags don't inherit currentColor) */ [data-bs-theme="dark"] .prev-btn img, [data-bs-theme="dark"] .next-btn img { filter: invert(1); } /* On hover in dark mode, background is light so un-invert the icon */ [data-bs-theme="dark"] .prev-btn:hover:not([disabled]) img, [data-bs-theme="dark"] .next-btn:hover:not([disabled]) img { filter: invert(0); } /* Page dropdown button - cohesive with pagination controls */ .page-dropdown-btn { background-color: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; height: 38px; min-width: 80px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; transition: all 0.15s; } .page-dropdown-btn:hover { background-color: var(--bg-tertiary); border-color: var(--border-color); } [data-bs-theme="dark"] .page-dropdown-btn { background-color: var(--bg-primary); border-color: var(--border-color); color: var(--text-primary); } [data-bs-theme="dark"] .page-dropdown-btn:hover, [data-bs-theme="dark"] .page-dropdown-btn:focus { background-color: var(--bg-tertiary); border-color: var(--border-color); color: #1c2128; /* Dark text on light hover background */ } /* Page dropdown menu */ .page-menu { background-color: var(--dropdown-bg); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } [data-bs-theme="dark"] .page-menu { background-color: var(--dropdown-bg); border-color: var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } /* Page menu items */ .pageMenu-item { color: var(--text-primary); cursor: pointer; transition: background-color 0.15s; } .pageMenu-item:hover { background-color: rgba(9, 105, 218, 0.08); } [data-bs-theme="dark"] .pageMenu-item { color: var(--text-primary); } [data-bs-theme="dark"] .pageMenu-item:hover { background-color: rgba(68, 147, 248, 0.12); } /* Item pagination container (sublists) - cohesive layout */ .item-pagination-container { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 6px 6px; } [data-bs-theme="dark"] .item-pagination-container { background-color: var(--bg-secondary); border-color: var(--border-color); } /* ========================================================================== Sidebar Selection State Enhancement ========================================================================== */ /* Current page - strong selection indicator */ .current-page { background-color: var(--app-color-light) !important; border-left: 4px solid var(--app-color) !important; position: relative; } .current-page a { color: var(--text-primary) !important; padding-left: 16px !important; } [data-bs-theme="dark"] .current-page { background-color: var(--app-color-light) !important; } [data-bs-theme="dark"] .current-page a { color: var(--text-primary) !important; } /* Sidebar link hover - clear but not as strong as selected */ .sidebar-link a:hover, .sidebar-list li a:hover { background-color: var(--sidebar-hover); border-left-color: var(--app-color); } /* ========================================================================== Page Title & Header Spacing ========================================================================== */ /* DataTable header - title and button area */ .dataTable-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; margin-bottom: 0; } /* Common header styling */ .common-header { margin: 0; } .common-header h2, .common-header .page-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0; } /* ========================================================================== Filter/Actions Area - Subtle Panel Styling (Dark Mode) ========================================================================== */ /* Filter area panel - visible background for separation */ [data-bs-theme="dark"] .filters { background-color: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; margin-bottom: 8px; } /* Tab content panels - remove loud borders */ [data-bs-theme="dark"] .tab-content, [data-bs-theme="dark"] .tab-pane, [data-bs-theme="dark"] .details-tab-content { border-color: var(--border-subtle) !important; } /* Archive filter panel - subtle styling */ [data-bs-theme="dark"] .archive-dataTable-filters { background-color: var(--bg-secondary); border: none; } /* Pills tab content container */ [data-bs-theme="dark"] #pills-tabContent, [data-bs-theme="dark"] .pills-tabContent { border: 1px solid var(--border-color) !important; border-top: none !important; background-color: var(--bg-secondary); } /* Filter area connects to table - subtle divider only */ [data-bs-theme="dark"] .dataTable-container > .filters + .table-container, [data-bs-theme="dark"] .dataTable-container > .filters + .nav-tabs + .tab-content .table-container { border-top: none; } /* Remove divider line - rely on spacing/background instead */ [data-bs-theme="dark"] .filters::after { display: none; } /* Actions row (buttons like View, Edit, Save) */ [data-bs-theme="dark"] .dataTable-header .btn-group, [data-bs-theme="dark"] .dataTable-header .action-buttons { display: flex; gap: 8px; } /* Vertical rhythm: Title → Filters → Table */ .dataTable-container > .dataTable-header { margin-bottom: 16px; } .dataTable-container > .filters { margin-bottom: 16px; } .dataTable-container > .table-container { margin-bottom: 0; } /* Table container connects to pagination */ .dataTable-container .table-container { border-radius: 6px 6px 0 0; border-bottom: none; } /* ========================================================================== Date Range Picker - Dark Mode Styling ========================================================================== */ /* Main container - match app dark theme */ [data-bs-theme="dark"] .daterangepicker { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* Arrow/caret colors */ [data-bs-theme="dark"] .daterangepicker:before { border-bottom-color: var(--border-color); } [data-bs-theme="dark"] .daterangepicker:after { border-bottom-color: var(--bg-secondary); } [data-bs-theme="dark"] .daterangepicker.drop-up:before { border-top-color: var(--border-color); border-bottom-color: transparent; } [data-bs-theme="dark"] .daterangepicker.drop-up:after { border-top-color: var(--bg-secondary); border-bottom-color: transparent; } /* Calendar table - slightly lighter surface for contrast */ [data-bs-theme="dark"] .daterangepicker .calendar-table { background-color: var(--bg-tertiary); border-color: var(--border-color); } /* Month title - primary text, high contrast */ [data-bs-theme="dark"] .daterangepicker th.month { color: var(--text-primary); font-weight: 600; } /* Navigation arrows */ [data-bs-theme="dark"] .daterangepicker .calendar-table .next span, [data-bs-theme="dark"] .daterangepicker .calendar-table .prev span { border-color: var(--text-secondary); } [data-bs-theme="dark"] .daterangepicker .calendar-table th.next:hover span, [data-bs-theme="dark"] .daterangepicker .calendar-table th.prev:hover span { border-color: var(--text-primary); } /* Weekday labels - secondary text, medium contrast */ [data-bs-theme="dark"] .daterangepicker .calendar-table th { color: var(--text-secondary); } /* Day numbers - primary text for available dates */ [data-bs-theme="dark"] .daterangepicker .calendar-table td { color: var(--text-primary); } /* Available day hover */ [data-bs-theme="dark"] .daterangepicker td.available:hover, [data-bs-theme="dark"] .daterangepicker th.available:hover { background-color: var(--bg-elevated); color: var(--text-primary); } /* Off-month dates - muted but readable */ [data-bs-theme="dark"] .daterangepicker td.off, [data-bs-theme="dark"] .daterangepicker td.off.in-range, [data-bs-theme="dark"] .daterangepicker td.off.start-date, [data-bs-theme="dark"] .daterangepicker td.off.end-date { background-color: transparent; color: var(--text-muted); } /* In-range days - primary blue tint */ [data-bs-theme="dark"] .daterangepicker td.in-range { background-color: color-mix(in srgb, var(--app-color) 20%, transparent); color: var(--text-primary); } /* Start/End dates - solid primary blue */ [data-bs-theme="dark"] .daterangepicker td.active, [data-bs-theme="dark"] .daterangepicker td.active:hover { background-color: var(--app-color); color: white; } /* Today marker - subtle outline */ [data-bs-theme="dark"] .daterangepicker td.today { position: relative; } [data-bs-theme="dark"] .daterangepicker td.today::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: var(--app-color); } [data-bs-theme="dark"] .daterangepicker td.today.active::after { background-color: white; } /* Disabled dates */ [data-bs-theme="dark"] .daterangepicker td.disabled, [data-bs-theme="dark"] .daterangepicker option.disabled { color: var(--text-muted); opacity: 0.5; } /* Week numbers */ [data-bs-theme="dark"] .daterangepicker td.week, [data-bs-theme="dark"] .daterangepicker th.week { color: var(--text-muted); } /* Ranges list (presets sidebar) */ [data-bs-theme="dark"] .daterangepicker .ranges { background-color: var(--bg-secondary); } [data-bs-theme="dark"] .daterangepicker .ranges li { color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); } [data-bs-theme="dark"] .daterangepicker .ranges li:last-child { border-bottom: none; } [data-bs-theme="dark"] .daterangepicker .ranges li:hover { background-color: var(--bg-tertiary); color: var(--text-primary); } [data-bs-theme="dark"] .daterangepicker .ranges li.active { background-color: var(--app-color); color: white; } /* Dividers - subtle dark mode borders */ [data-bs-theme="dark"] .daterangepicker .drp-buttons { border-top-color: var(--border-color); background-color: var(--bg-secondary); } [data-bs-theme="dark"] .daterangepicker.show-ranges.ltr .drp-calendar.left, [data-bs-theme="dark"] .daterangepicker.show-ranges.rtl .drp-calendar.right, [data-bs-theme="dark"] .daterangepicker.show-ranges.single.ltr .drp-calendar.left, [data-bs-theme="dark"] .daterangepicker.show-ranges.single.rtl .drp-calendar.left { border-left-color: var(--border-color); border-right-color: var(--border-color); } /* Selected range text */ [data-bs-theme="dark"] .daterangepicker .drp-selected { color: var(--text-secondary); } /* Buttons */ [data-bs-theme="dark"] .daterangepicker .drp-buttons .btn { /* Colors only - layout handled elsewhere */ } /* Apply button - primary */ [data-bs-theme="dark"] .daterangepicker .drp-buttons .btn.applyBtn { background-color: var(--app-color); border-color: var(--app-color); color: white; } [data-bs-theme="dark"] .daterangepicker .drp-buttons .btn.applyBtn:hover { background-color: var(--app-color-hover); border-color: var(--app-color-hover); } /* Cancel/Clear button - secondary/ghost */ [data-bs-theme="dark"] .daterangepicker .drp-buttons .btn.cancelBtn { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); } [data-bs-theme="dark"] .daterangepicker .drp-buttons .btn.cancelBtn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); } /* Month/Year select dropdowns */ [data-bs-theme="dark"] .daterangepicker select.monthselect, [data-bs-theme="dark"] .daterangepicker select.yearselect { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); border-radius: 4px; padding: 4px; } [data-bs-theme="dark"] .daterangepicker select.monthselect:focus, [data-bs-theme="dark"] .daterangepicker select.yearselect:focus { border-color: var(--input-border-focus); outline: none; } /* Time select dropdowns */ [data-bs-theme="dark"] .daterangepicker select.hourselect, [data-bs-theme="dark"] .daterangepicker select.minuteselect, [data-bs-theme="dark"] .daterangepicker select.secondselect, [data-bs-theme="dark"] .daterangepicker select.ampmselect { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } [data-bs-theme="dark"] .daterangepicker .calendar-time { color: var(--text-primary); } [data-bs-theme="dark"] .daterangepicker .calendar-time select.disabled { color: var(--text-muted); opacity: 0.5; } /* ========================================================================== File Cabinet - Dark Mode Styling ========================================================================== */ /* 1) Row backgrounds - dark zebra striping (no pure white) */ [data-bs-theme="dark"] .fc-table-container tbody tr { background-color: var(--bg-secondary); border-bottom-color: var(--border-subtle); transition: background-color 0.15s ease, box-shadow 0.15s ease; } [data-bs-theme="dark"] .fc-table-container tbody tr:nth-child(even) { background-color: var(--table-stripe-bg); } /* 7) Row hover - subtle blue tint + left accent bar via box-shadow */ [data-bs-theme="dark"] .fc-table-container tbody tr:hover { background-color: rgba(68, 147, 248, 0.08) !important; box-shadow: inset 3px 0 0 0 var(--app-color); } /* Selected row state */ [data-bs-theme="dark"] .fc-table-container tbody tr.selected { background-color: rgba(68, 147, 248, 0.12) !important; box-shadow: inset 3px 0 0 0 var(--app-color); } /* 2) Column headers - dark surface with readable light text */ [data-bs-theme="dark"] .fc-table-container th, [data-bs-theme="dark"] .fc-table-header { background-color: #1a2028 !important; color: #a0aab5 !important; border-bottom: 1px solid var(--border-color); } [data-bs-theme="dark"] .fc-table-container th:hover { color: var(--text-primary) !important; } /* 3) Toolbar controls - dark surfaces (no white pills) */ [data-bs-theme="dark"] .fc-pg-container { background-color: var(--bg-secondary); border-color: var(--border-subtle); } [data-bs-theme="dark"] label[for="fc-checkbox"] { background-color: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-subtle); } [data-bs-theme="dark"] label[for="fc-checkbox"]:hover { background-color: var(--bg-elevated); color: var(--text-primary); } [data-bs-theme="dark"] .fc-refresh-btn { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); } [data-bs-theme="dark"] .fc-refresh-btn:hover { background-color: var(--bg-elevated); border-color: var(--app-color); } [data-bs-theme="dark"] .fc-refresh-btn svg { fill: var(--app-color); } /* SST refresh button - invert icon for dark mode visibility */ [data-bs-theme="dark"] .sst-refresh-btn img { filter: invert(1); } [data-bs-theme="dark"] .sst-refresh-btn:hover img { filter: invert(0); } /* 4) Input styling - consistent dark theme */ [data-bs-theme="dark"] .fc-search-input { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } [data-bs-theme="dark"] .fc-search-input::placeholder { color: var(--input-placeholder); } [data-bs-theme="dark"] .fc-search-input:focus { border-color: var(--app-color); box-shadow: 0 0 0 2px var(--app-color-focus); outline: none; } /* 5) Buttons - one primary, others secondary */ [data-bs-theme="dark"] .fc-search-btn, [data-bs-theme="dark"] .fa-reset-btn { background-color: var(--btn-neutral-bg) !important; border: 1px solid var(--btn-neutral-border) !important; color: var(--text-secondary) !important; } [data-bs-theme="dark"] .fc-search-btn:hover, [data-bs-theme="dark"] .fa-reset-btn:hover { background-color: var(--btn-neutral-hover) !important; border-color: var(--btn-neutral-border) !important; color: var(--text-primary) !important; } /* Keep Create Folder as primary, make Upload buttons secondary */ [data-bs-theme="dark"] .folder-create-btn { background-color: var(--app-color) !important; border-color: var(--app-color) !important; color: white !important; } [data-bs-theme="dark"] .folder-create-btn:hover { background-color: var(--app-color-hover) !important; border-color: var(--app-color-hover) !important; } /* Upload buttons - secondary (outline style with blue tint) */ [data-bs-theme="dark"] .fc-upload-btn, [data-bs-theme="dark"] .folder-upload-btn { background-color: transparent !important; border: 1px solid var(--app-color) !important; color: var(--app-color) !important; } [data-bs-theme="dark"] .fc-upload-btn svg, [data-bs-theme="dark"] .folder-upload-btn svg { fill: var(--app-color) !important; } [data-bs-theme="dark"] .fc-upload-btn:hover, [data-bs-theme="dark"] .folder-upload-btn:hover { background-color: rgba(68, 147, 248, 0.12) !important; border-color: var(--app-color-hover) !important; color: var(--app-color-hover) !important; } /* 6) File/folder name links - consistent link color */ [data-bs-theme="dark"] .file-list-name-link { color: var(--link-color); text-decoration: none; transition: color 0.15s ease; } [data-bs-theme="dark"] .file-list-name-link:hover { color: var(--link-hover); text-decoration: underline; } /* 8) Trash icon / action icons */ [data-bs-theme="dark"] .fc-delete-cell { color: var(--text-muted); } [data-bs-theme="dark"] .fc-delete-btn { fill: #6a737d; cursor: pointer; transition: fill 0.15s ease; } [data-bs-theme="dark"] .fc-delete-btn:hover { fill: #f87171; /* Restrained red tint */ } /* Table cells text color */ [data-bs-theme="dark"] .fc-table-container td { color: var(--text-primary); border-bottom-color: var(--border-subtle); } /* Breadcrumb styling */ [data-bs-theme="dark"] .fc-breadcrumb { background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-subtle); } [data-bs-theme="dark"] .breadcrumb-item a { color: var(--link-color); } [data-bs-theme="dark"] .breadcrumb-item.active a { color: var(--text-muted); } [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* Total count / meta text */ [data-bs-theme="dark"] .fc-total-count, [data-bs-theme="dark"] .fc-total-count strong { color: var(--text-primary); } [data-bs-theme="dark"] .fc-total-meta { color: var(--text-secondary); } /* Upload location box */ [data-bs-theme="dark"] .upload-location div { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } /* Modal table in file cabinet */ [data-bs-theme="dark"] .fc-modal-table-container { background-color: var(--bg-secondary); } [data-bs-theme="dark"] .fc-modal-table { background-color: var(--bg-secondary); } [data-bs-theme="dark"] .fc-modal-table th { background-color: var(--bg-tertiary); color: var(--text-secondary); } [data-bs-theme="dark"] .fc-modal-table td { color: var(--text-primary); border-color: var(--border-subtle); } /* Feedback banner - dark mode */ [data-bs-theme="dark"] .feedback-container { background-color: var(--bg-secondary); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } /* ========================================================================== Archive Index Page Styling ========================================================================== */ /* Container scrolls vertically when content is long */ .archive-index-container { padding: 8px 16px; height: calc(100vh - var(--navbar-height)); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; } /* Dark mode archive index */ [data-bs-theme="dark"] .archive-index-box-container { border-color: var(--border-color); } [data-bs-theme="dark"] .archive-index-box { border-color: var(--border-color); background-color: var(--bg-secondary); } [data-bs-theme="dark"] .archive-index-box-title { background-color: var(--bg-tertiary); color: var(--text-primary); border-bottom-color: var(--border-color); } [data-bs-theme="dark"] .archive-index-tableName { color: var(--text-primary); } [data-bs-theme="dark"] .archive-index-box-ul li a:hover .archive-index-tableName, [data-bs-theme="dark"] .sub-table-ul li a:hover .archive-index-tableName { color: var(--text-primary); text-decoration: underline; } [data-bs-theme="dark"] .archive-index-rows { color: var(--text-secondary); } [data-bs-theme="dark"] .sub-table-ul li a { color: var(--text-primary); } [data-bs-theme="dark"] .collapse-plus-btn { color: var(--text-secondary); } /* DevOps Dashboard Stats Table */ [data-bs-theme="dark"] .ds-table { background-color: var(--bg-secondary); } [data-bs-theme="dark"] .ds-table-header { color: var(--text-secondary); } [data-bs-theme="dark"] .ds-table-data { color: var(--text-primary); } [data-bs-theme="dark"] .ds-table-data:hover { background-color: rgba(68, 147, 248, 0.12); } /* DevOps Dashboard Chart Panels */ [data-bs-theme="dark"] .graph-panel { background-color: var(--bg-secondary); border-color: var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); } [data-bs-theme="dark"] .ds-title { color: var(--text-primary); } /* Loading spinner overlay - dark mode */ [data-bs-theme="dark"] .loading-container { background-color: rgba(13, 17, 23, 0.85); } [data-bs-theme="dark"] .spinner { border-color: rgba(255, 255, 255, 0.1); border-top-color: var(--app-color); } /* Current user row highlight */ .current-user-row { background-color: rgba(9, 105, 218, 0.12) !important; } [data-bs-theme="dark"] .current-user-row { background-color: rgba(68, 147, 248, 0.18) !important; } /* Mobile slide-out menu - dark mode */ [data-bs-theme="dark"] .guide-menu-content { background-color: var(--sidebar-bg); } [data-bs-theme="dark"] .guide-menu-header { background-color: var(--sidebar-bg); } [data-bs-theme="dark"] .guide-menu-body { background-color: var(--sidebar-bg); } /* Mobile slide-out menu close button - dark mode */ [data-bs-theme="dark"] .close-menu-btn { color: #e6edf3; } [data-bs-theme="dark"] .close-menu-btn:hover { background-color: rgba(255, 255, 255, 0.1); } /* ===== Logo Light/Dark Mode Switching ===== */ /* Light mode: show light logo, hide dark logo */ img.logo.logo-light { display: inline-block !important; } img.logo.logo-dark { display: none !important; } /* Dark mode: show dark logo, hide light logo */ [data-bs-theme="dark"] img.logo.logo-light { display: none !important; } [data-bs-theme="dark"] img.logo.logo-dark { display: inline-block !important; } /* Mobile/Tablet: hide full logos, show icon (logo2) instead */ @media screen and (max-width: 1300px) { img.logo.logo-light, img.logo.logo-dark, [data-bs-theme="dark"] img.logo.logo-light, [data-bs-theme="dark"] img.logo.logo-dark { display: none !important; } }