@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } h1:focus { outline: none; } a, .btn-link { color: #0071c1; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .form-switch { padding: 0; padding-left: 1em; } .form-switch > .form-check-input { scale: 1.3; margin-top: 2px; } label.form-check-label { width: 100%; } /*.form-switch .form-check-input:checked { margin-left: -3px; margin-right: 13px; } .form-check .form-check-input { margin-left: 0em; margin-top: 1px; }*/ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .form-switch .form-check-input { margin-left: 0; margin-right: 1em; } /* ============================================ COMPONENT STYLES ============================================ */ /* -------------------------------------------- Modal backdrop The custom Modal.razor (and the hand-rolled SiteSettingsEditor modal) get moved to by moveModalToBody() in _Host.cshtml. The dim color lives here instead of being hard-coded in that JS. A backdrop should dim the page in both light and dark themes, so it stays dark — matching Bootstrap's own black backdrop via its --bs-backdrop-* variables (fallbacks for safety). -------------------------------------------- */ .modal-backdrop { background-color: var(--bs-backdrop-bg, #000); } .modal-backdrop.show { opacity: var(--bs-backdrop-opacity, 0.5); } /* -------------------------------------------- SimulatedClientIcon -------------------------------------------- */ .simulated-client-icon { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 2px solid #dee2e6; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; transition: border-color 0.2s ease; } .simulated-client-icon:hover { border-color: #007bff; } .client-icon-image { width: 100%; height: 100%; object-fit: cover; } .client-icon-placeholder { color: #6c757d; font-size: 40px; } .client-details-modal { padding: 1rem; } .client-modal-image { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid #dee2e6; } .client-modal-placeholder { width: 120px; height: 120px; border-radius: 50%; border: 3px solid #dee2e6; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; color: #6c757d; font-size: 48px; margin: 0 auto; } .temperature-indicator { background-color: #e9ecef; padding: 0.5rem; border-radius: 0.25rem; margin-top: 0.5rem; } .info-section { margin-bottom: 1.5rem; padding: 1rem; background-color: #f8f9fa; border-radius: 0.5rem; } .section-title { color: #495057; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #dee2e6; font-weight: 600; } .info-item { margin-bottom: 0.75rem; padding: 0.5rem; background-color: white; border-radius: 0.25rem; border-left: 3px solid #007bff; } .info-item strong { color: #495057; display: inline-block; min-width: 140px; } .info-item span { color: #6c757d; } .diagnosis-text { display: block; margin-top: 0.25rem; font-style: italic; } .diagnosis-section .btn-link { color: #007bff; font-size: 0.8rem; } .diagnosis-section .btn-link:hover { color: #0056b3; } .background-content .btn-link { color: #856404; font-size: 0.8rem; } .background-content .btn-link:hover { color: #533f03; } .background-section { margin-top: 1.5rem; padding: 1rem; background-color: #fff3cd; border-radius: 0.5rem; border: 1px solid #ffeaa7; } .background-content { line-height: 1.6; color: #495057; padding: 0.5rem; background-color: white; border-radius: 0.25rem; white-space: pre-wrap; } /* -------------------------------------------- Index (Dashboard) -------------------------------------------- */ .home-banner { background-color: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); } .home-banner h4 { color: var(--bs-body-color); } .card.border-warning { border-color: var(--bs-warning) !important; } .card.border-success { border-color: var(--bs-success) !important; } .card.border-info { border-color: var(--bs-info) !important; } .card.border-primary { border-color: var(--bs-primary) !important; } .bg-warning.bg-opacity-10 { background-color: rgba(var(--bs-warning-rgb), 0.1) !important; } .bg-success.bg-opacity-10 { background-color: rgba(var(--bs-success-rgb), 0.1) !important; } .bg-info.bg-opacity-10 { background-color: rgba(var(--bs-info-rgb), 0.1) !important; } .bg-primary.bg-opacity-10 { background-color: rgba(var(--bs-primary-rgb), 0.1) !important; } .mini-chart { background: var(--bs-tertiary-bg); border-radius: 0.375rem; border: 1px solid var(--bs-border-color); } .mini-chart text { font-size: 12px; fill: var(--bs-secondary-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .mini-chart .chart-grid { stroke: var(--bs-border-color); } .mini-chart .chart-axis { stroke: var(--bs-secondary-color); } .alert { border-radius: 0.5rem; } .card { border-radius: 0.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .card:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); transition: box-shadow 0.2s ease-in-out; } /* -------------------------------------------- ClientCard -------------------------------------------- */ .client-summary { min-height: 60px; } .client-card .card-body { display: flex; flex-direction: column; } .client-card .background-section { flex-grow: 1; display: flex; flex-direction: column; } .client-card .client-bio { white-space: pre-wrap; line-height: 1.4; margin-bottom: 0.5rem; } .card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .card.border-warning { border-width: 2px; border-color: #ffc107 !important; } .card.border-warning:hover { box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3); } .card-text { font-size: 0.9rem; line-height: 1.4; } .diagnosis-section { text-align: left; } .background-section .btn-link { color: #007bff; font-size: 0.8rem; } .background-section .btn-link:hover { color: #0056b3; } /* -------------------------------------------- SessionSummary -------------------------------------------- */ .session-summary-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .chat-transcript { background-color: var(--bs-tertiary-bg); border-radius: 8px; padding: 15px; } .message { margin-bottom: 15px; padding: 10px; border-radius: 8px; border-left: 4px solid; } .therapist-message { background-color: rgba(var(--bs-primary-rgb), 0.1); border-left-color: var(--bs-primary); } .client-message { background-color: rgba(var(--bs-purple-rgb, 156, 39, 176), 0.1); border-left-color: var(--bs-purple, #9c27b0); } .message-header { display: flex; justify-content: space-between; margin-bottom: 5px; } .message-content { line-height: 1.5; white-space: pre-wrap; word-break: break-word; } /* Transcript Player — interactive audio-synced transcript */ .transcript-msg { transition: background-color 0.2s ease, border-left-color 0.2s ease, transform 0.1s ease; } .transcript-msg:hover { opacity: 0.85; transform: translateX(2px); } .transcript-msg.transcript-active { border-left-color: var(--bs-warning) !important; box-shadow: 0 2px 8px rgba(var(--bs-warning-rgb), 0.25); } .transcript-msg.transcript-active.therapist-message { background-color: rgba(var(--bs-primary-rgb), 0.2); } .transcript-msg.transcript-active.client-message { background-color: rgba(var(--bs-purple-rgb, 156, 39, 176), 0.2); } /* ---------- Docked session playback bar ---------- */ /* Push page content above the docked bar so nothing is hidden under it. The bar is ~76px tall (incl. padding); 120px gives the page some breathing room. */ .session-summary-container:has(~ .session-player-dock) { padding-bottom: 120px; } /* Fallback for browsers without :has() — slightly extra bottom space on this page. */ @supports not (selector(:has(*))) { .session-summary-container { padding-bottom: 120px; } } .session-player-dock { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); width: min(680px, calc(100% - 2rem)); z-index: 1030; display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.9rem 0.5rem 0.5rem; background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 999px; box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.18), 0 0 22px 4px rgba(var(--bs-primary-rgb), 0.22), 0 8px 28px rgba(var(--bs-body-color-rgb), 0.18); backdrop-filter: blur(10px); animation: session-player-glow 3.6s ease-in-out infinite; } @keyframes session-player-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.18), 0 0 22px 4px rgba(var(--bs-primary-rgb), 0.22), 0 8px 28px rgba(var(--bs-body-color-rgb), 0.18); } 50% { box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.28), 0 0 32px 6px rgba(var(--bs-primary-rgb), 0.32), 0 10px 32px rgba(var(--bs-body-color-rgb), 0.22); } } .session-player-dock audio { display: none; } /* ---- Play/Pause toggle button ---- */ .session-play-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; color: var(--bs-light, var(--bs-body-bg)); font-size: 1rem; background-color: var(--bs-success); box-shadow: 0 2px 10px rgba(var(--bs-success-rgb), 0.45); transition: background-color 320ms ease, box-shadow 320ms ease, color 320ms ease, transform 180ms ease; } .session-play-btn:hover { transform: scale(1.06); } .session-play-btn:active { transform: scale(0.94); } .session-play-btn:focus-visible { outline: 3px solid rgba(var(--bs-body-color-rgb), 0.35); outline-offset: 3px; } /* Playing state — yellow with pause icon */ .session-play-btn.is-playing { background-color: var(--bs-warning); color: var(--bs-dark, var(--bs-body-color)); box-shadow: 0 2px 10px rgba(var(--bs-warning-rgb), 0.55); } /* Subtle pulse while paused, drawing attention to the play action */ .session-play-btn:not(.is-playing)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.5); animation: session-play-pulse 2.2s ease-out infinite; pointer-events: none; } @keyframes session-play-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.45); } 70% { box-shadow: 0 0 0 12px rgba(var(--bs-success-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0); } } /* Single FA icon with a quick "pop" swap between play and pause */ .session-play-btn-icon { line-height: 1; transition: transform 120ms cubic-bezier(.5,1.6,.4,.95); } /* Nudge the play triangle right for optical centering — but only when showing play */ .session-play-btn-icon.fa-play { transform: translateX(1px); } .session-play-btn-icon.is-swapping { transform: scale(0); } /* ---- Progress / scrubber ---- */ .session-player-progress { flex: 1 1 auto; min-width: 0; } .session-player-scrub { position: relative; height: 8px; border-radius: 999px; background-color: var(--bs-tertiary-bg); cursor: pointer; transition: height 150ms ease; } .session-player-scrub:hover, .session-player-scrub.is-scrubbing { height: 12px; } .session-player-scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--bs-primary), var(--bs-info)); transition: width 80ms linear; } .session-player-scrub-thumb { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background-color: #fff; border: 2px solid var(--bs-primary); transform: translate(-50%, -50%) scale(0.85); box-shadow: 0 2px 6px rgba(var(--bs-body-color-rgb), 0.25); transition: transform 150ms ease, left 80ms linear; pointer-events: none; } .session-player-scrub:hover .session-player-scrub-thumb, .session-player-scrub.is-scrubbing .session-player-scrub-thumb { transform: translate(-50%, -50%) scale(1); } /* ---- Time readout ---- */ .session-player-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--bs-body-color); min-width: 90px; text-align: right; } .session-player-time-sep { color: var(--bs-secondary-color); margin: 0 0.25rem; } @media (max-width: 576px) { .session-player-dock { gap: 0.65rem; padding: 0.4rem 0.7rem 0.4rem 0.4rem; bottom: 0.75rem; } .session-play-btn { width: 38px; height: 38px; font-size: 0.9rem; } .session-player-time { font-size: 0.78rem; min-width: 64px; } } .ai-feedback-box { background-color: var(--bs-tertiary-bg); border-left: 4px solid var(--bs-info); color: var(--bs-body-color); padding: 1rem 1.25rem; border-radius: 0.375rem; line-height: 1.55; font-size: 0.95rem; white-space: pre-wrap; word-break: break-word; } .evaluation-scores .score-item { margin-bottom: 15px; } .evaluation-scores label { font-weight: 600; margin-bottom: 5px; display: block; } .progress { height: 25px; } .progress-bar { display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; } .grading-progress { padding: 20px; } .grading-spinner { position: relative; } .progress-steps { display: flex; flex-direction: column; gap: 15px; } .step { display: flex; align-items: center; padding: 10px; border-radius: 8px; transition: all 0.3s ease; } .step.pending { background-color: #f8f9fa; color: #6c757d; } .step.active { background-color: #e3f2fd; color: #1976d2; border-left: 4px solid #2196f3; } .step-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 12px; } .step.pending .step-icon { color: #adb5bd; } .step.active .step-icon { color: #2196f3; } .step-label { font-weight: 500; flex: 1; } .step.pending .step-label { color: #6c757d; } .step.active .step-label { color: #1976d2; } /* Pulse animation for active step */ .step.active { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(33, 150, 243, 0); } 100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); } } /* Loading shimmer effect */ .grading-progress::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent ); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* -------------------------------------------- Progress -------------------------------------------- */ .progress-container { padding: 1rem; } .overall-score-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; } .overall-score-card .card-body h3 { color: white; font-size: 3rem; font-weight: bold; } .trend-card { border: 2px solid #e9ecef; } .metric-chart-card { height: 100%; } .chart-container { width: 100%; overflow-x: auto; } .line-chart { background: var(--bs-tertiary-bg); border-radius: 0.375rem; min-width: 400px; } .line-chart .chart-grid { stroke: var(--bs-border-color); } .line-chart .chart-gridline { stroke: var(--bs-border-color); } .line-chart .chart-line { stroke: var(--bs-primary); } .line-chart .chart-point { fill: var(--bs-primary); stroke: var(--bs-body-bg); } .line-chart .chart-axis { stroke: var(--bs-secondary-color); } .line-chart text { fill: var(--bs-secondary-color); font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .chart-label { font-size: 12px; fill: #6c757d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .point-label { font-size: 10px; fill: #495057; font-weight: bold; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .table th { border-top: none; font-weight: 600; color: #495057; } .badge { font-size: 0.8rem; } .border-warning { border-width: 2px !important; } .table-warning-subtle { background-color: rgba(255, 193, 7, 0.05); } .table-warning-subtle:hover { background-color: rgba(255, 193, 7, 0.1); } /* -------------------------------------------- PreviousChats -------------------------------------------- */ .client-icon-small { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid #dee2e6; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; flex-shrink: 0; } .client-icon-image-small { width: 100%; height: 100%; object-fit: cover; } .client-icon-placeholder-small { color: #6c757d; font-size: 16px; } .client-icon-tiny { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 1px solid #dee2e6; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; flex-shrink: 0; } .client-icon-image-tiny { width: 100%; height: 100%; object-fit: cover; } .client-icon-placeholder-tiny { color: #6c757d; font-size: 12px; } .d-flex.gap-2 > * { margin-right: 0.5rem; } .d-flex.gap-2 > *:last-child { margin-right: 0; } /* -------------------------------------------- PreviousChats / Session History -------------------------------------------- */ /* Fix the client-name column width so every row's badges and timestamp line up at the same x-position regardless of how long the client name is. Long names truncate with an ellipsis; the full name lives in the title attr. */ .session-history-client-name { display: inline-block; width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } @media (max-width: 575.98px) { .session-history-client-name { width: 140px; } } /* "Rec" pill next to Voice badge — signals an audio recording is available. Color comes from the Bootstrap bg-danger utility class on the element. */ .session-recording-badge { font-weight: 600; letter-spacing: 0.02em; } /* -------------------------------------------- SiteSettingsEditor -------------------------------------------- */ .settings-category-section { background-color: #f8f9fa; border-radius: 0.5rem; padding: 1.5rem; border: 1px solid #dee2e6; } .category-header { border-bottom: 2px solid #e9ecef; padding-bottom: 0.5rem; margin-bottom: 1rem; } .category-header h5 { margin-bottom: 0; font-weight: 600; } .setting-name { font-weight: 500; color: #495057; } .setting-value { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Courier New', monospace; font-size: 0.9rem; color: #6c757d; background-color: #f8f9fa; padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 1px solid #e9ecef; } .setting-value-mobile { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; font-family: 'Courier New', monospace; } .col-name { width: 30%; min-width: 150px; } .col-value { width: 40%; min-width: 200px; } .col-category { width: 15%; min-width: 100px; } .col-actions { width: 15%; min-width: 100px; } /* Responsive behavior for SiteSettingsEditor */ @media (max-width: 991.98px) { .col-category { display: none !important; } } @media (max-width: 767.98px) { .col-value { display: none !important; } .col-name { width: 60%; } .col-actions { width: 40%; } } .table-hover tbody tr:hover { background-color: rgba(0, 123, 255, 0.05); } .btn-group .btn { border-radius: 0.375rem; margin-right: 0.25rem; } .btn-group .btn:last-child { margin-right: 0; } .auto-expand-textarea { overflow: hidden; } /* -------------------------------------------- Teacher Dashboard -------------------------------------------- */ .opacity-50 { opacity: 0.5; } .class-stats-card { padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #007bff; } .class-header h6 { font-weight: 600; color: #333; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 10px; } .stat-item { display: flex; align-items: center; gap: 10px; } .stat-item i { font-size: 1.5rem; } .stat-item strong { font-size: 1.2rem; display: block; } .stat-item small { font-size: 0.75rem; } /* -------------------------------------------- StudentAssignments -------------------------------------------- */ .assignment-details { background-color: #f8f9fa; padding: 12px; border-radius: 5px; font-size: 0.9rem; } .progress-section { padding-top: 10px; border-top: 1px solid #e9ecef; } /* -------------------------------------------- Teacher Assignments -------------------------------------------- */ .assignment-info { background-color: #f8f9fa; padding: 15px; border-radius: 5px; } .card.border-secondary { opacity: 0.8; } .completion-stats { font-size: 0.9rem; } /* -------------------------------------------- Teacher ClassManagement -------------------------------------------- */ .class-info { background-color: #f8f9fa; padding: 15px; border-radius: 5px; margin-top: 10px; } /* ============================================ DARK MODE STYLES ============================================ */ /* SimulatedClientIcon */ [data-bs-theme="dark"] .simulated-client-icon { border-color: #495057; background-color: #2b3035; } [data-bs-theme="dark"] .simulated-client-icon:hover { border-color: #0d6efd; } [data-bs-theme="dark"] .client-icon-placeholder { color: #adb5bd; } [data-bs-theme="dark"] .client-modal-image { border-color: #495057; } [data-bs-theme="dark"] .client-modal-placeholder { border-color: #495057; background-color: #2b3035; color: #adb5bd; } [data-bs-theme="dark"] .temperature-indicator { background-color: #343a40; } [data-bs-theme="dark"] .info-section { background-color: #212529; } [data-bs-theme="dark"] .section-title { color: #dee2e6; border-bottom-color: #495057; } [data-bs-theme="dark"] .info-item { background-color: #2b3035; border-left-color: #0d6efd; } [data-bs-theme="dark"] .info-item strong { color: #dee2e6; } [data-bs-theme="dark"] .info-item span { color: #adb5bd; } [data-bs-theme="dark"] .diagnosis-section .btn-link { color: #6ea8fe; } [data-bs-theme="dark"] .diagnosis-section .btn-link:hover { color: #9ec5fe; } [data-bs-theme="dark"] .background-section { background-color: #332701; border-color: #664d03; } [data-bs-theme="dark"] .background-content { color: #dee2e6; background-color: #2b3035; } [data-bs-theme="dark"] .background-content .btn-link { color: #ffda6a; } [data-bs-theme="dark"] .background-content .btn-link:hover { color: #ffe69c; } /* Index page mini-chart */ [data-bs-theme="dark"] .mini-chart { background: #212529; border-color: #495057; } [data-bs-theme="dark"] .mini-chart text { fill: #adb5bd; } [data-bs-theme="dark"] .mini-chart .chart-grid { stroke: #495057; } [data-bs-theme="dark"] .mini-chart .chart-axis { stroke: #adb5bd; } /* ClientCard */ [data-bs-theme="dark"] .diagnosis-section .btn-link, [data-bs-theme="dark"] .background-section .btn-link { color: #6ea8fe; } [data-bs-theme="dark"] .diagnosis-section .btn-link:hover, [data-bs-theme="dark"] .background-section .btn-link:hover { color: #9ec5fe; } /* SessionSummary — dark mode handled by CSS variables above */ [data-bs-theme="dark"] .step.pending { background-color: #212529; color: #adb5bd; } [data-bs-theme="dark"] .step.active { background-color: #1a3a5c; color: #6ea8fe; border-left-color: #6ea8fe; } [data-bs-theme="dark"] .step.pending .step-icon { color: #6c757d; } [data-bs-theme="dark"] .step.active .step-icon { color: #6ea8fe; } [data-bs-theme="dark"] .step.pending .step-label { color: #adb5bd; } [data-bs-theme="dark"] .step.active .step-label { color: #6ea8fe; } /* Progress page line-chart */ [data-bs-theme="dark"] .line-chart { background: #212529; } [data-bs-theme="dark"] .line-chart .chart-grid { stroke: #495057; } [data-bs-theme="dark"] .line-chart .chart-gridline { stroke: #495057; } [data-bs-theme="dark"] .line-chart .chart-point { stroke: #212529; } [data-bs-theme="dark"] .line-chart .chart-axis { stroke: #adb5bd; } [data-bs-theme="dark"] .line-chart text { fill: #adb5bd; } [data-bs-theme="dark"] .trend-card { border-color: #495057; } [data-bs-theme="dark"] .table th { color: #dee2e6; } /* PreviousChats */ [data-bs-theme="dark"] .client-icon-small, [data-bs-theme="dark"] .client-icon-tiny { border-color: #495057; background-color: #2b3035; } [data-bs-theme="dark"] .client-icon-placeholder-small, [data-bs-theme="dark"] .client-icon-placeholder-tiny { color: #adb5bd; } /* SiteSettingsEditor */ [data-bs-theme="dark"] .settings-category-section { background-color: #212529; border-color: #495057; } [data-bs-theme="dark"] .settings-category-section .table-light { --bs-table-bg: #2b3035; --bs-table-color: #dee2e6; --bs-table-border-color: #495057; } [data-bs-theme="dark"] .settings-category-section .table { --bs-table-bg: transparent; --bs-table-color: #dee2e6; --bs-table-border-color: #495057; } [data-bs-theme="dark"] .category-header { border-bottom-color: #495057; } [data-bs-theme="dark"] .setting-name { color: #dee2e6; } [data-bs-theme="dark"] .setting-value { color: #adb5bd; background-color: #2b3035; border-color: #495057; } [data-bs-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(13, 110, 253, 0.1); } /* Teacher Dashboard */ [data-bs-theme="dark"] .class-stats-card { background: #212529; border-left-color: #0d6efd; } [data-bs-theme="dark"] .class-header h6 { color: #dee2e6; } /* StudentAssignments & Teacher Assignments */ [data-bs-theme="dark"] .assignment-details, [data-bs-theme="dark"] .assignment-info { background-color: #212529; } [data-bs-theme="dark"] .progress-section { border-top-color: #495057; } /* Teacher ClassManagement */ [data-bs-theme="dark"] .class-info { background-color: #212529; } /*label.form-check-label { white-space: nowrap; word-break: keep-all; } */ /* -------------------------------------------- Alert Toasts (growl-style) -------------------------------------------- */ .alert-toast { min-width: 300px; max-width: 400px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border-radius: 0.5rem; border: none; animation: slideInRight 0.3s ease-out; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .alert-toast-info .toast-header { border-bottom-color: rgba(13, 202, 240, 0.2); } .alert-toast-success .toast-header { border-bottom-color: rgba(25, 135, 84, 0.2); } .alert-toast-warning .toast-header { border-bottom-color: rgba(255, 193, 7, 0.2); } .alert-toast-error .toast-header { border-bottom-color: rgba(220, 53, 69, 0.2); } .alert-toast .toast-body { font-size: 0.9rem; color: #6c757d; } /* Desktop notification opt-in */ .notification-toggle { font-size: 0.75rem; cursor: pointer; padding: 2px 6px; border-radius: 3px; } .notification-toggle:hover { background-color: rgba(0, 0, 0, 0.05); } /* Dark mode alert toasts */ [data-bs-theme="dark"] .alert-toast { background-color: #2b3035; color: #dee2e6; } [data-bs-theme="dark"] .alert-toast .toast-header { background-color: #343a40; color: #dee2e6; } [data-bs-theme="dark"] .alert-toast .toast-body { color: #adb5bd; } [data-bs-theme="dark"] .notification-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } /* -------------------------------------------- Message Center -------------------------------------------- */ .message-row { transition: background-color 0.15s ease; } .message-row:hover { background-color: rgba(0, 0, 0, 0.03); } .message-unread { background-color: rgba(75, 73, 172, 0.04); border-left: 3px solid #4B49AC; } .message-body { padding: 0.75rem; background-color: #f8f9fa; border-radius: 0.375rem; font-size: 0.9rem; line-height: 1.6; } .min-width-0 { min-width: 0; } /* Dark mode message center */ [data-bs-theme="dark"] .message-row:hover { background-color: rgba(255, 255, 255, 0.03); } [data-bs-theme="dark"] .message-unread { background-color: rgba(75, 73, 172, 0.1); } [data-bs-theme="dark"] .message-body { background-color: #212529; } /* ========================================================================== Bootstrap utility/control dark-mode fixes ----------------------------------------- Bootstrap 5.3 ships `.bg-body*` utilities that are theme-aware, but the legacy `.bg-light` / `.bg-dark` / `.text-dark` / `.text-light` utilities remain static and become illegible when the theme flips. Remap them to theme-aware variables. Prefer `.bg-body-tertiary` in new markup. ========================================================================== */ .bg-light { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color); } .bg-dark { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color); } [data-bs-theme="dark"] .text-dark { color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .text-light { color: var(--bs-body-color) !important; } /* Form controls inside modals: the default --bs-border-color can blend into the modal surface. Use the form-specific border variable which has stronger contrast, and bump it in dark mode. */ .form-select, .form-control { border-color: var(--bs-border-color-translucent); } [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .form-control { border-color: rgba(var(--bs-body-color-rgb), 0.25); } [data-bs-theme="dark"] .modal .form-select, [data-bs-theme="dark"] .modal .form-control { border-color: rgba(var(--bs-body-color-rgb), 0.35); } /* Dropdown menus: Bootstrap's translucent border disappears in dark mode, making popovers blend into the page. Force a visible border. */ [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .client-selector-menu { border-color: rgba(var(--bs-body-color-rgb), 0.3); box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-bg-rgb), 0.6); } /* Native