/* * AVstackr Theme System * Built on Bootstrap 5.3+ native theming * * How it works: * 1. Set data-bs-theme="dark|light" on - Bootstrap handles components * 2. Set data-theme="preset-name" on - Applies color preset * 3. CSS variables cascade down automatically */ /* ============================================ BASE THEME VARIABLES (Dark Default) ============================================ */ :root { /* Brand Colors */ --app-brand-primary: #0d6efd; --app-brand-secondary: #6c757d; /* Semantic Colors */ --app-success: #198754; --app-warning: #ffc107; --app-danger: #dc3545; --app-info: #0dcaf0; /* Surface Colors (for custom components) */ --app-surface-primary: var(--bs-body-bg); --app-surface-secondary: var(--bs-secondary-bg); --app-surface-tertiary: var(--bs-tertiary-bg); /* Text Colors */ --app-text-primary: var(--bs-body-color); --app-text-secondary: var(--bs-secondary-color); --app-text-muted: var(--bs-tertiary-color); /* Border Colors */ --app-border-color: var(--bs-border-color); --app-border-subtle: var(--bs-border-color-translucent); /* Input Colors (for high-contrast inputs) */ --app-input-bg: var(--bs-body-bg); --app-input-border: var(--bs-border-color); --app-input-text: var(--bs-body-color); --app-input-placeholder: var(--bs-secondary-color); /* Focus States */ --app-focus-ring: rgba(13, 110, 253, 0.25); --app-focus-border: #0d6efd; /* Shadows */ --app-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --app-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --app-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); /* Transitions */ --app-transition-fast: 0.15s ease-in-out; --app-transition-normal: 0.3s ease-in-out; } /* ============================================ DARK MODE ENHANCEMENTS ============================================ */ [data-bs-theme="dark"] { /* Enhance Bootstrap's dark mode with app-specific overrides */ --app-surface-primary: #0d1117; --app-surface-secondary: #161b22; --app-surface-tertiary: #21262d; /* High contrast inputs for dark tables */ --app-input-bg: #2d3748; --app-input-border: #4b5563; --app-input-text: #f3f4f6; --app-input-placeholder: #9ca3af; /* Shadows are more prominent in dark mode */ --app-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); --app-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); --app-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5); } /* ============================================ LIGHT MODE ENHANCEMENTS ============================================ */ [data-bs-theme="light"] { --app-surface-primary: #ffffff; --app-surface-secondary: #f8f9fa; --app-surface-tertiary: #e9ecef; --app-input-bg: #ffffff; --app-input-border: #ced4da; --app-input-text: #212529; --app-input-placeholder: #6c757d; } /* ============================================ COMPONENT OVERRIDES (Minimal) ============================================ */ /* Body base styles */ body { background-color: var(--app-surface-primary); color: var(--app-text-primary); transition: background-color var(--app-transition-normal), color var(--app-transition-normal); } /* High-contrast form inputs for data tables */ .table .form-control, .form-control.high-contrast { background-color: var(--app-input-bg); border-color: var(--app-input-border); color: var(--app-input-text); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .table .form-control::placeholder, .form-control.high-contrast::placeholder { color: var(--app-input-placeholder); } .table .form-control:focus, .form-control.high-contrast:focus { background-color: var(--app-input-bg); border-color: var(--app-focus-border); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 0.2rem var(--app-focus-ring); } /* Card surfaces */ .card { background-color: var(--app-surface-secondary); border-color: var(--app-border-subtle); } /* Dropdown menus */ .dropdown-menu { background-color: var(--app-surface-secondary); border-color: var(--app-border-color); box-shadow: var(--app-shadow); color: var(--app-text-primary); } .dropdown-menu .dropdown-header { color: var(--app-text-secondary); } .dropdown-menu h6, .dropdown-menu .fw-bold, .dropdown-menu .col-8 { color: var(--app-text-primary); } .dropdown-item { color: var(--app-text-primary); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--app-surface-tertiary); color: var(--app-text-primary); } /* Modal dialogs */ .modal-content { background-color: var(--app-surface-secondary); border-color: var(--app-border-subtle); } /* Modal close button - invert to white in dark mode for visibility */ [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Table text color in dark mode - ensure proper contrast */ [data-bs-theme="dark"] .table { --bs-table-color: var(--bs-body-color); --bs-table-hover-color: var(--bs-body-color); } [data-bs-theme="dark"] .table td, [data-bs-theme="dark"] .table th { color: var(--bs-body-color); } /* Navigation */ .nav-link { color: var(--app-text-secondary); transition: color var(--app-transition-fast); } .nav-link:hover, .nav-link:focus { color: var(--app-text-primary); } .nav-link.active { color: var(--app-brand-primary); } /* ============================================ FINANCIAL SUMMARY STYLES Modern UI/UX for room and project summaries ============================================ */ /* Spacing scale for consistent rhythm */ :root { --summary-row-py: 0.375rem; --summary-section-gap: 0.5rem; --summary-divider-margin: 0.375rem; } /* Tabular numbers for currency alignment */ .currency-value, .financial-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Glassmorphism utility for summary cards */ .glass-surface { background: rgba(var(--bs-body-bg-rgb, 13, 17, 23), 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(var(--bs-border-color-rgb, 48, 54, 61), 0.3); } [data-bs-theme="light"] .glass-surface { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.1); } /* Collapsible section chevron animation */ .chevron-animated { transition: transform 0.2s ease-out; } .chevron-animated.collapsed { transform: rotate(-180deg); } /* Financial summary row base styles */ .summary-row { display: flex; justify-content: space-between; align-items: center; padding: var(--summary-row-py) 0.75rem; transition: background-color 0.15s ease; } .summary-row:hover { background-color: rgba(var(--bs-primary-rgb), 0.05); } /* Summary total rows with accent borders */ .summary-total { border-left: 4px solid transparent; border-radius: 0.375rem; padding: 0.5rem 0.75rem; margin: var(--summary-section-gap) 0; } .summary-total.success { border-left-color: var(--bs-success); background: linear-gradient(90deg, rgba(var(--bs-success-rgb), 0.1) 0%, transparent 100%); } .summary-total.primary { border-left-color: var(--bs-primary); background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.1) 0%, transparent 100%); } .summary-total.danger { border-left-color: var(--bs-danger); background: linear-gradient(90deg, rgba(var(--bs-danger-rgb), 0.1) 0%, transparent 100%); } .summary-total.info { border-left-color: var(--bs-info); background: linear-gradient(90deg, rgba(var(--bs-info-rgb), 0.1) 0%, transparent 100%); } /* Badge hierarchy - Primary (totals) vs Secondary (line items) */ .badge-total { font-weight: 700; padding: 0.35em 0.65em; border-radius: 0.5rem; font-variant-numeric: tabular-nums; } .badge-line-item { font-weight: 500; background-color: transparent !important; padding: 0; font-variant-numeric: tabular-nums; } /* Financial card header with subtle hover */ .financial-card-header { cursor: pointer; transition: filter 0.15s ease; } .financial-card-header:hover { filter: brightness(1.1); } /* Project summary column styling */ .project-summary-column { padding: 0.75rem; } .project-summary-column .column-header { text-align: center; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bs-border-color); } .project-summary-column .section-label { font-size: 0.75rem; font-weight: 600; color: var(--bs-secondary-color); margin-bottom: 0.25rem; margin-top: 0.5rem; } /* Gradient divider between columns */ .gradient-divider { width: 1px; background: linear-gradient(180deg, transparent 0%, var(--bs-border-color) 20%, var(--bs-border-color) 80%, transparent 100%); } /* ============================================ COMPACT/DENSE UI STYLING Software platform look with condensed feel ============================================ */ /* Project Details page - compact text sizing */ .project-details-page { font-size: 0.8rem; } /* Typography normalization - reduce visual noise */ .project-details-page h1, .project-details-page h2, .project-details-page h3, .project-details-page h4, .project-details-page h5, .project-details-page h6 { font-weight: 500; margin-bottom: 0; } .project-details-page h1 { font-size: 1.25rem; } .project-details-page h2 { font-size: 1.1rem; } .project-details-page h3 { font-size: 1rem; } .project-details-page h4 { font-size: 0.9rem; } .project-details-page h5 { font-size: 0.85rem; } .project-details-page h6 { font-size: 0.8rem; } /* Reduce bold overuse - normalize to medium weight */ .project-details-page .fw-bold, .project-details-page strong, .project-details-page b { font-weight: 500; } /* Only total values get semibold - slightly larger for emphasis */ .project-details-page .total-value { font-weight: 600; font-size: 0.9rem; } /* Labels should be subtle, not bold */ .project-details-page .form-label, .project-details-page label { font-weight: 400; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: var(--bs-secondary-color); } /* Compact card headers */ .project-details-page .card-header { padding: 0.5rem 0.75rem; } .project-details-page .card-header h4, .project-details-page .card-header h5, .project-details-page .card-header h6 { font-size: 0.85rem; font-weight: 500; margin-bottom: 0; } /* Compact card bodies */ .project-details-page .card-body { padding: 0.5rem 0.75rem; } /* Summary rows - consistent weight */ .project-details-page .summary-row { padding: 0.25rem 0.5rem; font-size: 0.8rem; font-weight: 400; } .project-details-page .summary-row span { font-weight: 400; } .project-details-page .summary-total { padding: 0.375rem 0.5rem; font-size: 0.8rem; } .project-details-page .summary-total span:last-child { font-weight: 500; } /* Compact project summary columns */ .project-details-page .project-summary-column { padding: 0.5rem; font-size: 0.8rem; } .project-details-page .project-summary-column .column-header h6 { font-size: 0.8rem; font-weight: 500; } .project-details-page .project-summary-column .section-label { font-size: 0.7rem; font-weight: 400; margin-top: 0.375rem; margin-bottom: 0.125rem; } /* Compact badges - less prominent */ .project-details-page .badge { font-size: 0.75rem; font-weight: 500; padding: 0.2em 0.5em; } /* Compact tables */ .project-details-page .table { font-size: 0.8rem; } .project-details-page .table th { font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; } .project-details-page .table th, .project-details-page .table td { padding: 0.25rem 0.4rem; } .project-details-page .table td { font-weight: 400; } /* Compact form controls */ .project-details-page .form-control, .project-details-page .form-select { font-size: 0.8rem; padding: 0.25rem 0.5rem; } /* Compact buttons */ .project-details-page .btn { font-size: 0.8rem; font-weight: 400; padding: 0.25rem 0.5rem; } .project-details-page .btn-sm { font-size: 0.75rem; padding: 0.2rem 0.4rem; } /* Compact dropdown menus */ .project-details-page .dropdown-item { font-size: 0.8rem; font-weight: 400; padding: 0.35rem 0.75rem; } /* Compact room tabs */ .project-details-page .nav-tabs .nav-link { font-size: 0.8rem; font-weight: 400; padding: 0.35rem 0.75rem; } .project-details-page .nav-tabs .nav-link.active { font-weight: 500; } /* Compact alerts and info boxes */ .project-details-page .alert { font-size: 0.8rem; padding: 0.5rem 0.75rem; } /* Financial card headers - clean, not heavy */ .project-details-page .financial-card-header h4 { font-size: 0.85rem !important; font-weight: 500 !important; } .project-details-page .financial-card-header small { font-size: 0.7rem !important; font-weight: 400 !important; } /* Currency values - consistent sizing */ .project-details-page .currency-value, .project-details-page .financial-value { font-weight: 400; } /* Page header simplification */ .project-details-page > .d-flex > div h1 { font-size: 1.1rem; font-weight: 500; } .project-details-page .breadcrumb { font-size: 0.75rem; } /* ============================================ EQUIPMENT ASSISTANT STEPPER Modern SaaS-style step indicator ============================================ */ .equipment-stepper { padding: 0 1rem; } .stepper-track { display: flex; align-items: flex-start; justify-content: space-between; position: relative; } .stepper-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; flex: 0 0 auto; min-width: 70px; } .step-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; transition: all 0.2s ease; /* Default (pending) state */ background-color: var(--bs-tertiary-bg); border: 2px solid var(--bs-border-color); color: var(--bs-secondary-color); } .stepper-step.active .step-circle { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.2); } .stepper-step.completed .step-circle { background-color: var(--bs-success); border-color: transparent; color: #fff; } .step-label { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--bs-secondary-color); text-align: center; transition: color 0.2s ease; } .stepper-step.active .step-label { color: var(--bs-body-color); font-weight: 600; } .stepper-step.completed .step-label { color: var(--bs-success); } /* Optional step indicator */ .stepper-step-optional .step-circle { border-style: dashed; } .step-optional-badge { font-size: 0.625rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.125rem; } /* Connector lines */ .stepper-connector { flex: 1; height: 2px; background-color: var(--bs-border-color); margin: 17px 0.5rem 0; transition: background-color 0.3s ease; } .stepper-connector.completed { background-color: var(--bs-success); } /* Processing animation */ .stepper-step.active .step-circle.processing { animation: pulse-ring 1.5s ease-out infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(236, 72, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); } } /* Light mode adjustment */ [data-bs-theme="light"] .stepper-step.active .step-circle { box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.15); } /* ============================================ EQUIPMENT ADVISOR STEP STYLES Dependency and accessory recommendations ============================================ */ .advisor-step { animation: advisorFadeIn 0.3s ease; } @keyframes advisorFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .advisor-section { border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--bs-border-color); } .advisor-section-header { padding: 0.625rem 0.875rem; font-weight: 500; font-size: 0.875rem; display: flex; align-items: center; } .advisor-section-header.dependency { background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%); color: var(--bs-danger); border-bottom: 1px solid rgba(220, 53, 69, 0.2); } .advisor-section-header.accessory { background: linear-gradient(135deg, rgba(108, 117, 125, 0.1) 0%, rgba(108, 117, 125, 0.05) 100%); color: var(--bs-secondary-color); border-bottom: 1px solid var(--bs-border-color); } .advisor-section-body { padding: 0.75rem; background-color: var(--bs-body-bg); } .advisor-item { padding: 0.5rem 0.75rem; border-radius: 0.375rem; margin-bottom: 0.375rem; transition: background-color 0.15s ease; } .advisor-item:last-child { margin-bottom: 0; } .advisor-item:hover { background-color: var(--bs-tertiary-bg); } .advisor-item.dependency { border-left: 3px solid var(--bs-danger); background-color: rgba(220, 53, 69, 0.03); } .advisor-item.accessory { border-left: 3px solid var(--bs-secondary); } /* Checkbox styling enhancements */ .advisor-item .form-check-input:checked { background-color: var(--bs-success); border-color: var(--bs-success); } .advisor-item.dependency .form-check-input:checked { background-color: var(--bs-danger); border-color: var(--bs-danger); } /* Checkbox animation */ .advisor-item .form-check-input { transition: transform 0.1s ease, box-shadow 0.2s ease; } .advisor-item .form-check-input:active { transform: scale(0.9); } /* Light mode adjustments */ [data-bs-theme="light"] .advisor-section-header.dependency { background: linear-gradient(135deg, rgba(220, 53, 69, 0.08) 0%, rgba(220, 53, 69, 0.03) 100%); } [data-bs-theme="light"] .advisor-item.dependency { background-color: rgba(220, 53, 69, 0.02); } /* Success overlay for completion */ .advisor-success-overlay { position: absolute; inset: 0; background: var(--bs-body-bg); display: flex; align-items: center; justify-content: center; animation: advisorFadeIn 0.2s ease; } @keyframes successPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .advisor-success-overlay i { animation: successPop 0.5s ease; } /* ============================================ SUMMERNOTE EDITOR DARK MODE ============================================ */ [data-bs-theme="dark"] .note-editor.note-frame { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .note-toolbar { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .note-toolbar .note-btn { background-color: transparent; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .note-toolbar .note-btn:hover { background-color: var(--bs-tertiary-bg); } [data-bs-theme="dark"] .note-editing-area { background-color: var(--bs-body-bg); } [data-bs-theme="dark"] .note-editable { background-color: var(--bs-body-bg); color: var(--bs-body-color); } [data-bs-theme="dark"] .note-statusbar { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .note-dropdown-menu { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .note-dropdown-item { color: var(--bs-body-color); } [data-bs-theme="dark"] .note-dropdown-item:hover { background-color: var(--bs-tertiary-bg); }