/* ============================================================ Site color themes data-theme is set synchronously in to avoid a flash. Bootstrap 5.3 reads the mirrored data-bs-theme attribute. ============================================================ */ :root { --theme-page: #ffffff; --theme-surface: #ffffff; --theme-surface-soft: #f6f7f9; --theme-surface-elevated: #ffffff; --theme-surface-hover: #f1f3f5; --theme-border: #dee2e6; --theme-border-soft: #e9ecef; --theme-text: #212529; --theme-text-secondary: #495057; --theme-text-muted: #6c757d; --theme-shadow: 0 8px 30px rgba(15, 23, 42, 0.08); --theme-overlay: rgba(255, 255, 255, 0.92); --theme-success-soft: #f0fdf4; --theme-danger-soft: #fdf0f0; --theme-warning-soft: #fff8e6; --theme-info-soft: #eef7ff; } :root[data-theme="dark"] { color-scheme: dark; --theme-page: #111318; --theme-surface: #191c22; --theme-surface-soft: #1e222a; --theme-surface-elevated: #242933; --theme-surface-hover: #292f3a; --theme-border: #353c48; --theme-border-soft: #2a303a; --theme-text: #f2f4f7; --theme-text-secondary: #c8ced8; --theme-text-muted: #9ca5b3; --theme-shadow: 0 12px 36px rgba(0, 0, 0, 0.32); --theme-overlay: rgba(25, 28, 34, 0.94); --theme-success-soft: #153326; --theme-danger-soft: #3a2024; --theme-warning-soft: #382e17; --theme-info-soft: #172d40; /* Existing project design tokens. */ --ui-gray-50: #1e222a; --ui-gray-100: #242933; --ui-gray-200: #303642; --ui-gray-300: #424a58; --ui-gray-400: #7d8796; --ui-gray-500: #9ca5b3; --ui-gray-600: #c1c7d0; --ui-gray-700: #d6dae1; --ui-gray-800: #e7e9ed; --ui-gray-900: #f5f6f8; --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28); --ui-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.3); --ui-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.34); --ui-shadow-xl: 0 24px 50px rgba(0, 0, 0, 0.4); --at-page-bg: #111318; --at-surface: #191c22; --at-surface-2: #1e222a; --at-surface-hover: #292f3a; --at-border: #353c48; --at-separator: rgba(235, 238, 244, 0.12); --at-text: #f2f4f7; --at-text-2: #c8ced8; --at-text-3: #9ca5b3; --at-link: #69a7ff; --at-accent-light: rgba(80, 155, 255, 0.16); --at-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --at-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.36); --sidebar-bg: #171a20; --sidebar-active: rgba(105, 167, 255, 0.14); --sidebar-active-text: #8bbcff; --bw-border: #353c48; --bw-muted: #9ca5b3; } html, body { background-color: var(--theme-page); color: var(--theme-text); } body, .site-header, .main-nav-wrap, .top-bar, main, footer, .card, .modal-content, .dropdown-menu, .form-control, .form-select, .table { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } html.theme-is-changing *, html.theme-is-changing *::before, html.theme-is-changing *::after { transition-duration: 0.2s !important; } ::selection { background: rgba(13, 110, 253, 0.3); } /* ============================================================ Theme toggle ============================================================ */ .theme-toggle { --theme-toggle-size: 40px; --theme-toggle-icon-size: 20px; width: var(--theme-toggle-size); height: var(--theme-toggle-size); min-width: var(--theme-toggle-size); min-height: var(--theme-toggle-size); flex: 0 0 var(--theme-toggle-size); position: relative; display: inline-grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #e2a400; cursor: pointer; box-shadow: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { border-color: rgba(226, 164, 0, 0.2); background: rgba(226, 164, 0, 0.1); transform: translateY(-1px); } .theme-toggle:active { transform: scale(0.9); } .theme-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--bs-primary) 30%, transparent); outline-offset: 2px; } .theme-toggle--compact { width: var(--theme-toggle-size); height: var(--theme-toggle-size); min-height: var(--theme-toggle-size); flex-basis: var(--theme-toggle-size); } .theme-toggle--mobile { --theme-toggle-size: 44px; --theme-toggle-icon-size: 22px; } .theme-toggle__icons { width: var(--theme-toggle-icon-size); height: var(--theme-toggle-icon-size); position: relative; display: block; } .theme-toggle__icons i { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--theme-toggle-icon-size); line-height: 1; transform-origin: center; transition: opacity 0.2s ease, transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1); } .theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); } .theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(0.45); } [data-theme="dark"] .theme-toggle { color: #b9c8ff; background: transparent; border-color: transparent; box-shadow: none; } [data-theme="dark"] .theme-toggle:hover { background: rgba(185, 200, 255, 0.12); border-color: rgba(185, 200, 255, 0.22); } [data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(0.45); } [data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); } /* ============================================================ Shared layout, Bootstrap and header ============================================================ */ .site-layout main > .container, .site-layout .admin-container, .site-layout .admin-main { background-color: var(--theme-surface) !important; border-color: var(--theme-border) !important; } [data-theme="dark"] .bg-white { background-color: var(--theme-surface) !important; } [data-theme="dark"] .bg-light { background-color: var(--theme-surface-soft) !important; } [data-theme="dark"] a.link-dark, [data-theme="dark"] :not(.bg-warning).text-dark { color: var(--theme-text) !important; } [data-theme="dark"] .site-header .top-bar, [data-theme="dark"] .site-header .main-nav-wrap, [data-theme="dark"] .site-header .navbar { background-color: var(--theme-surface) !important; border-color: var(--theme-border) !important; } [data-theme="dark"] .site-header .navbar-brand img { filter: invert(1) brightness(1.08); } [data-theme="dark"] .site-header .navbar-light .navbar-nav .nav-link, [data-theme="dark"] .site-header a, [data-theme="dark"] .site-header .user-chip { color: var(--theme-text-secondary); } [data-theme="dark"] .site-header .navbar-light .navbar-nav .nav-link:hover, [data-theme="dark"] .site-header .navbar-light .navbar-nav .nav-link.active, [data-theme="dark"] .site-header a:hover { color: var(--theme-text); } [data-theme="dark"] .home-anchors .anchor-link { color: var(--theme-text-muted) !important; } [data-theme="dark"] .home-anchors .anchor-link:hover { color: var(--theme-text) !important; } [data-theme="dark"] .home-anchors .anchor-sep { color: var(--theme-border) !important; } [data-theme="dark"] .burger-line { background-color: var(--theme-text); } [data-theme="dark"] .mobile-btn-icon:not(.mobile-btn-icon--keep-color) > img:not(.mobile-user-avatar) { filter: invert(1) brightness(1.15); } [data-theme="dark"] .mobile-btn-icon--keep-color > img { filter: none; } [data-theme="dark"] .user-chip:hover, [data-theme="dark"] .user-balance-chip { background: var(--theme-surface-hover); border-color: var(--theme-border); } [data-theme="dark"] .user-avatar-circle { border-color: var(--theme-border); } [data-theme="dark"] .dropdown-menu { background: var(--theme-surface-elevated); border-color: var(--theme-border) !important; box-shadow: var(--theme-shadow) !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--theme-surface-hover); } /* ============================================================ Footer ============================================================ */ [data-theme="dark"] .new_footer_area, [data-theme="dark"] .new_footer_top, [data-theme="dark"] .footer_bottom { background-color: var(--theme-page); color: var(--theme-text-secondary); } [data-theme="dark"] .footer_bottom { border-color: var(--theme-border); } [data-theme="dark"] .f-title { color: var(--theme-text); } [data-theme="dark"] .new_footer_top p, [data-theme="dark"] .f_list li a, [data-theme="dark"] .footer_bottom { color: var(--theme-text-muted); } [data-theme="dark"] .f_social_icon a { border-color: var(--theme-border); color: var(--theme-text-muted); } [data-theme="dark"] .partner-logo { filter: brightness(0.9) contrast(1.05); } [data-theme="dark"] .footer-brand-logo { filter: invert(1) brightness(1.08); } .footer_hero { transition: filter 0.3s ease; } [data-theme="dark"] .footer_hero { filter: invert(1) brightness(0.9); } /* ============================================================ Public landing page ============================================================ */ [data-theme="dark"] .info-circle, [data-theme="dark"] .about-section, [data-theme="dark"] .problem-card, [data-theme="dark"] .carousel-3d-item, [data-theme="dark"] .step-card, [data-theme="dark"] .contact-card, [data-theme="dark"] .prevention-section .highlight, [data-theme="dark"] .service-card .front, [data-theme="dark"] .service-card .back, [data-theme="dark"] .svc-table, [data-theme="dark"] .study-card, [data-theme="dark"] .carousel-inner.review, [data-theme="dark"] .review-body, [data-theme="dark"] .info-card, [data-theme="dark"] .analyzer-footer, [data-theme="dark"] .stepper-nav, [data-theme="dark"] .scroll-to-top, [data-theme="dark"] .wrapper, [data-theme="dark"] .header-lite { background: var(--theme-surface-soft) !important; border-color: var(--theme-border) !important; color: var(--theme-text); } [data-theme="dark"] .problem-card, [data-theme="dark"] .carousel-3d-item, [data-theme="dark"] .step-card, [data-theme="dark"] .service-card .front, [data-theme="dark"] .study-card, [data-theme="dark"] .carousel-inner.review, [data-theme="dark"] .review-body, [data-theme="dark"] .svc-table { background: var(--theme-surface-elevated) !important; box-shadow: var(--theme-shadow); } /* Иллюстрации методов имеют собственный белый фон: круг остаётся белым в обеих темах. */ .method-card, [data-theme="dark"] .method-card { background: #ffffff !important; border-color: #dfe3e8 !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1); } [data-theme="dark"] .method-card { border-color: #4a5362 !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34); } [data-theme="dark"] .problems-section-v5 .problems-content { background: linear-gradient( 90deg, rgba(15, 17, 22, 0.96) 0%, rgba(27, 30, 37, 0.9) 28%, rgba(42, 39, 36, 0.84) 64%, rgba(20, 22, 28, 0.72) 88%, rgba(15, 17, 22, 0.94) 100% ) !important; } [data-theme="dark"] .problems-section-v5 .problems-headline h2 { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .problems-section-v5 .problems-headline p { color: #e2e7ef !important; font-weight: 400; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); } .carousel-3d-item, [data-theme="dark"] .carousel-3d-item { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18); } [data-theme="dark"] .problems-section-v5 .carousel-3d-item img { background: #ffffff; border-radius: 12px; padding: 6px; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .problems-section-v5 .carousel-3d-item span { color: #20252e !important; } [data-theme="dark"] .problems-section::after { background: rgba(17, 19, 24, 0.82) !important; } /* Панель анализатора использует общую палитру сайта на каждом шаге. */ .analyzer-panel { background: var(--theme-surface-elevated) !important; border: 1px solid var(--theme-border-soft); color: var(--theme-text); box-shadow: var(--theme-shadow) !important; } .analyzer-panel .step-content { background-color: var(--theme-surface-elevated) !important; color: var(--theme-text); } .analyzer-panel .step-footer .text-muted { color: var(--theme-text-muted) !important; } [data-theme="dark"] .analyzer-panel .dialog-image { filter: brightness(0.9) saturate(0.92); } [data-theme="dark"] .analyzer-panel .step:not(.active):not(.completed) .step-number { background: var(--theme-surface-hover); color: var(--theme-text-muted); } [data-theme="dark"] .analyzer-panel .step-line, [data-theme="dark"] .analyzer-panel .result-actions { border-color: var(--theme-border); } [data-theme="dark"] .analyzer-panel .step-line { background: var(--theme-border); } [data-theme="dark"] .analyzer-panel .download-prompt { background: linear-gradient(135deg, var(--theme-surface-soft), var(--theme-surface-hover)); border-color: var(--theme-border); } [data-theme="dark"] .problems-list-block, [data-theme="dark"] .slot-headline, [data-theme="dark"] .slot-reel, [data-theme="dark"] .spinner { background: var(--theme-overlay) !important; border-color: var(--theme-border) !important; } [data-theme="dark"] .indications-card { background: var(--theme-success-soft) !important; border-color: #2f6a4c !important; } [data-theme="dark"] .contraindications-card { background: var(--theme-danger-soft) !important; border-color: #78434a !important; } [data-theme="dark"] .final-cta-section { background: #0a0c10 !important; border: 1px solid var(--theme-border); } [data-theme="dark"] .btn-cta-primary { background: #f2f4f7 !important; color: #15171c !important; } [data-theme="dark"] .svc-table thead tr, [data-theme="dark"] .svc-separator td, [data-theme="dark"] .svc-table tbody tr:hover { background: var(--theme-surface-hover) !important; } [data-theme="dark"] .svc-table th, [data-theme="dark"] .svc-table td, [data-theme="dark"] .review { border-color: var(--theme-border); } [data-theme="dark"] .service-body > .icon { background: var(--theme-surface-elevated); border-color: var(--theme-border); } [data-theme="dark"] .service-card:hover .list-group-item, [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--theme-surface-hover); } [data-theme="dark"] .info-circle .label, [data-theme="dark"] .hero-right p, [data-theme="dark"] .about-section p, [data-theme="dark"] .problems-headline p, [data-theme="dark"] .slot-headline p, [data-theme="dark"] .step-card ul li, [data-theme="dark"] .contact-card ul li, [data-theme="dark"] .prevention-section p, [data-theme="dark"] .contraindications-note, [data-theme="dark"] .service-info .duration, [data-theme="dark"] .svc-table th, [data-theme="dark"] .svc-time, [data-theme="dark"] .svc-desc-right, [data-theme="dark"] .study-descrption, [data-theme="dark"] .info-section p, [data-theme="dark"] .address-details, [data-theme="dark"] .subtitle, [data-theme="dark"] .spinner-text, [data-theme="dark"] .stepper-title p, [data-theme="dark"] .step-label, [data-theme="dark"] .download-prompt p { color: var(--theme-text-muted) !important; } [data-theme="dark"] .info-circle img { filter: invert(1) brightness(1.08); opacity: 0.95; } [data-theme="dark"] .hero-right h1, [data-theme="dark"] .bg-item, [data-theme="dark"] .problem-card span, [data-theme="dark"] .problems-list-block ul li, [data-theme="dark"] .method-item span, [data-theme="dark"] .carousel-3d-item span, [data-theme="dark"] .slot-headline h2, [data-theme="dark"] .slot-item span, [data-theme="dark"] .step-card h4, [data-theme="dark"] .contact-card h3, [data-theme="dark"] .indications-col li, [data-theme="dark"] .prevention-section h3, [data-theme="dark"] .prevention-section .highlight span, [data-theme="dark"] .contraindications-col li, [data-theme="dark"] .service-info .price, [data-theme="dark"] .svc-table td, [data-theme="dark"] .svc-price, [data-theme="dark"] .svc-desc-left span, [data-theme="dark"] .about-me-text, [data-theme="dark"] .review-user small, [data-theme="dark"] .review-text, [data-theme="dark"] .info-section h2, [data-theme="dark"] .benefits-list li, [data-theme="dark"] .info-card h3, [data-theme="dark"] .analyzer-title, [data-theme="dark"] .stepper-title h2, [data-theme="dark"] .step.active .step-label, [data-theme="dark"] .download-prompt strong, [data-theme="dark"] .scroll-to-top i { color: var(--theme-text) !important; } /* ============================================================ Auth, booking and questionnaire ============================================================ */ /* Семишаговая форма онлайн-записи. */ [data-theme="dark"] #modal-calendar .rk-content { background: var(--theme-surface-elevated); border-color: var(--theme-border); color: var(--theme-text); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); } [data-theme="dark"] #modal-calendar .rk-stepper, [data-theme="dark"] #modal-calendar .rk-footer { background: var(--theme-surface); border-color: var(--theme-border); color: var(--theme-text); } [data-theme="dark"] #modal-calendar .rk-body { background: var(--theme-surface-elevated); color: var(--theme-text); } [data-theme="dark"] #modal-calendar .rk-stepper .progress { background: var(--theme-surface-hover); } [data-theme="dark"] #modal-calendar .rk-cal-grid-wrap { background: var(--theme-surface-soft); border-color: var(--theme-border) !important; } [data-theme="dark"] #modal-calendar .rk-day { color: var(--theme-text-secondary); } [data-theme="dark"] #modal-calendar .rk-day.active-day { background: rgba(80, 155, 255, 0.16); color: #8bbcff; } [data-theme="dark"] #modal-calendar .rk-day.active-day:hover { background: rgba(80, 155, 255, 0.25); } [data-theme="dark"] #modal-calendar .rk-day.selected-day { background: #397fd1 !important; color: #ffffff !important; } [data-theme="dark"] #modal-calendar .rk-day.passive-day { color: #687180; } [data-theme="dark"] #modal-calendar .rk-service-item { background: var(--theme-surface-soft); border-color: var(--theme-border); color: var(--theme-text); } [data-theme="dark"] #modal-calendar .rk-service-item:hover { background: var(--theme-surface-hover); border-color: #548fd2; } [data-theme="dark"] #modal-calendar .rk-service-item.selected { background: var(--theme-info-soft); border-color: #548fd2; } [data-theme="dark"] #modal-calendar .rk-service-desc, [data-theme="dark"] #modal-calendar .text-muted, [data-theme="dark"] #modal-calendar #rk-step-label { color: var(--theme-text-muted) !important; } [data-theme="dark"] #modal-calendar .card, [data-theme="dark"] #modal-calendar .card-body { background: var(--theme-surface-soft); border-color: var(--theme-border); color: var(--theme-text); } [data-theme="dark"] #modal-calendar hr { border-color: var(--theme-border); opacity: 1; } [data-theme="dark"] #modal-calendar .form-control, [data-theme="dark"] #modal-calendar .form-select, [data-theme="dark"] #modal-calendar .input-group-text { background-color: var(--theme-surface-soft); border-color: var(--theme-border); color: var(--theme-text); } [data-theme="dark"] #modal-calendar .form-control:disabled, [data-theme="dark"] #modal-calendar .form-select:disabled { background-color: var(--theme-surface-hover); color: var(--theme-text-muted); opacity: 1; } [data-theme="dark"] #modal-calendar .form-control::placeholder { color: var(--theme-text-muted); opacity: 0.78; } [data-theme="dark"] #modal-calendar .form-control:focus, [data-theme="dark"] #modal-calendar .form-select:focus { background-color: var(--theme-surface-soft); border-color: #548fd2; color: var(--theme-text); box-shadow: 0 0 0 0.2rem rgba(84, 143, 210, 0.2); } [data-theme="dark"] #modal-calendar .btn-outline-secondary { background: transparent; border-color: var(--theme-border); color: var(--theme-text-secondary); } [data-theme="dark"] #modal-calendar .btn-outline-secondary:hover { background: var(--theme-surface-hover); border-color: #596474; color: var(--theme-text); } [data-theme="dark"] #modal-calendar .rk-time-btn.btn-outline-primary { background: var(--theme-surface-soft); border-color: #4778ad; color: #8bbcff; } [data-theme="dark"] #modal-calendar .rk-time-btn.btn-outline-primary:hover, [data-theme="dark"] #modal-calendar .rk-time-btn.btn-primary { background: #397fd1; border-color: #397fd1; color: #ffffff; } [data-theme="dark"] #modal-calendar .rk-promo-banner { background: var(--theme-surface-soft); } [data-theme="dark"] #modal-calendar .rk-promo-card { background: rgba(36, 41, 51, 0.96); border-color: #389e5c; color: var(--theme-text); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.42); } [data-theme="dark"] #modal-calendar .rk-promo-card .promo-code { color: var(--theme-text); } [data-theme="dark"] #modal-calendar .rk-promo-card .promo-timer-wrap { background: var(--theme-success-soft); border-color: #2f6a4c; } [data-theme="dark"] #modal-calendar .rk-promo-card .promo-timer, [data-theme="dark"] #modal-calendar .rk-promo-card .promo-timer-icon { color: #9ce4b8; } [data-theme="dark"] #modal-calendar .rk-promo-card.expired { border-color: #a9505b; } [data-theme="dark"] #modal-calendar .rk-promo-card.expired .promo-expired { color: #ffbdc4; } [data-theme="dark"] .auth-overlay { background: rgba(3, 5, 10, 0.68); } [data-theme="dark"] .auth-modal { background: rgba(25, 28, 34, 0.96); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .auth-input, [data-theme="dark"] .auth-input--code, [data-theme="dark"] .auth-input:focus-within { background: var(--theme-surface-elevated); } [data-theme="dark"] .auth-modal__header p, [data-theme="dark"] .auth-subtitle, [data-theme="dark"] .auth-prefix, [data-theme="dark"] .auth-consent, [data-theme="dark"] .auth-timer { color: var(--theme-text-muted); } [data-theme="dark"] .auth-title, [data-theme="dark"] .auth-input input, [data-theme="dark"] .auth-btn--ghost, [data-theme="dark"] .auth-alert { color: var(--theme-text); } [data-theme="dark"] .auth-btn--ghost, [data-theme="dark"] .auth-alert { background: var(--theme-surface-hover); } [data-theme="dark"] .auth-alert.success { background: var(--theme-success-soft); color: #9ce4b8; } [data-theme="dark"] .auth-alert.error { background: var(--theme-danger-soft); color: #ffb8c0; } [data-theme="dark"] .bw-monthbtn, [data-theme="dark"] .bw-calendar, [data-theme="dark"] .bw-day, [data-theme="dark"] .bw-day.is-active, [data-theme="dark"] .bw-timebtn, [data-theme="dark"] .bw-authed { background: var(--theme-surface-elevated); border-color: var(--theme-border); color: var(--theme-text); } [data-theme="dark"] .bw-cal-head, [data-theme="dark"] .bw-day.is-out, [data-theme="dark"] .bw-monthbtn:hover, [data-theme="dark"] .bw-timebtn:hover { background: var(--theme-surface-hover); } [data-theme="dark"] .bw-summary { background: var(--theme-info-soft); border-color: #315c7c; color: #b7dcf4; } [data-theme="dark"] .bw-error { background: var(--theme-danger-soft); border-color: #78434a; color: #ffbdc4; } [data-theme="dark"] .opros-header, [data-theme="dark"] .opros-footer, [data-theme="dark"] .opros-option { background: var(--theme-surface-elevated); border-color: var(--theme-border); } [data-theme="dark"] .opros-question, [data-theme="dark"] .opros-summary { background: var(--theme-surface-soft); border-color: var(--theme-border); } [data-theme="dark"] .opros-question.has-risk { background: var(--theme-warning-soft); border-color: #725b2e; } [data-theme="dark"] .opros-question.answered { background: var(--theme-success-soft); border-color: #2f6a4c; } [data-theme="dark"] .opros-question.answered.risk-triggered, [data-theme="dark"] .opros-option.selected.risk-option { background: var(--theme-danger-soft); border-color: #78434a; color: #ffbdc4; } [data-theme="dark"] .opros-category-title, [data-theme="dark"] .opros-question-text { color: var(--theme-text); } [data-theme="dark"] .opros-category-desc, [data-theme="dark"] .opros-progress-text { color: var(--theme-text-muted); } /* ============================================================ Custom UI components ============================================================ */ [data-theme="dark"] .ui-modal, [data-theme="dark"] .ui-toast, [data-theme="dark"] .ui-input, [data-theme="dark"] .ui-input-group, [data-theme="dark"] .ui-card, [data-theme="dark"] .ui-btn-secondary, [data-theme="dark"] .modal-content, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-body, [data-theme="dark"] .modal-footer { background: var(--theme-surface-elevated); border-color: var(--theme-border); color: var(--theme-text); } [data-theme="dark"] .ui-modal-title, [data-theme="dark"] .ui-toast-title, [data-theme="dark"] .modal-title, [data-theme="dark"] .ui-btn-secondary { color: var(--theme-text); } [data-theme="dark"] .ui-modal-message, [data-theme="dark"] .ui-toast-message, [data-theme="dark"] .ui-progress-text { color: var(--theme-text-muted); } [data-theme="dark"] .ui-btn-secondary:hover { background: var(--theme-surface-hover); color: var(--theme-text); } /* ============================================================ Admin shell and schedule ============================================================ */ [data-theme="dark"] .site-layout--admin, [data-theme="dark"] .site-layout--admin .admin-container, [data-theme="dark"] .site-layout--admin .admin-main, [data-theme="dark"] .site-layout--admin .admin-sidebar { background: var(--at-page-bg) !important; border-color: var(--at-border) !important; } [data-theme="dark"] .site-layout--admin .admin-main, [data-theme="dark"] .site-layout--admin .admin-sidebar { background: var(--at-surface) !important; } [data-theme="dark"] .site-layout--admin .nav-divider { background: var(--at-border); } [data-theme="dark"] .site-layout--admin .admin-sidebar .nav-link { color: var(--at-text-2); } [data-theme="dark"] .site-layout--admin .admin-sidebar .nav-link:hover { background: var(--at-surface-hover); color: var(--at-text); } [data-theme="dark"] .site-layout--admin .admin-sidebar .nav-link.active { color: var(--at-link); border-color: var(--at-border); } [data-theme="dark"] .admin-breadcrumb a, [data-theme="dark"] .admin-breadcrumb .current { color: var(--at-text-2) !important; } [data-theme="dark"] .admin-breadcrumb .separator { color: var(--at-text-3) !important; } [data-theme="dark"] .stat-card, [data-theme="dark"] .chart-container { background: var(--at-surface) !important; border-color: var(--at-border) !important; box-shadow: var(--at-shadow); } [data-theme="dark"] .chart-title, [data-theme="dark"] .site-layout--admin .admin-content [style*="color: #333"] { color: var(--at-text) !important; } [data-theme="dark"] .site-layout--admin .admin-content [style*="color: #555"], [data-theme="dark"] .site-layout--admin .admin-content [style*="color: #666"] { color: var(--at-text-2) !important; } [data-theme="dark"] .schedule-wrapper, [data-theme="dark"] .schedule-header, [data-theme="dark"] .time-cell, [data-theme="dark"] .move-confirm-popover, [data-theme="dark"] #slotTabList .nav-link.active, [data-theme="dark"] .file-list-item, [data-theme="dark"] #filesCard .accordion-button, [data-theme="dark"] #createSlotModal .modal-footer { background: var(--at-surface) !important; border-color: var(--at-border) !important; color: var(--at-text); } [data-theme="dark"] .schedule-header:not(.time-col):hover, [data-theme="dark"] .schedule-header.time-col .btn:hover, [data-theme="dark"] .user-search-item:hover, [data-theme="dark"] #weekLabel:hover, [data-theme="dark"] .week-picker-item:hover, [data-theme="dark"] .file-list-item .file-description-wrap:focus-within .file-description-input { background: var(--at-surface-hover) !important; } [data-theme="dark"] .schedule-header.today, [data-theme="dark"] .schedule-header.crosshair-col, [data-theme="dark"] .slot-drag-ghost { background: #17324a !important; } [data-theme="dark"] .schedule-grid .slot-cell { background-color: var(--at-surface); border-right-color: rgba(156, 165, 179, 0.1) !important; border-bottom-color: rgba(156, 165, 179, 0.1) !important; } [data-theme="dark"] .schedule-grid .slot-cell.hour-start { border-top-color: rgba(156, 165, 179, 0.16) !important; } [data-theme="dark"] .schedule-grid .time-cell { border-right-color: var(--theme-border-soft) !important; border-bottom-color: rgba(156, 165, 179, 0.12) !important; } [data-theme="dark"] .slot-cell.today { background: #292716 !important; } [data-theme="dark"] .slot-item.freely, [data-theme="dark"] .legend-color.freely, [data-theme="dark"] .file-list-item.file-new { background: #173b2a !important; border-color: #2f7b51 !important; color: #b9efca !important; } [data-theme="dark"] .slot-item.blocked, [data-theme="dark"] .slot-item.no_show, [data-theme="dark"] .legend-color.blocked, [data-theme="dark"] .slot-status-no_show, [data-theme="dark"] #appointmentStatusBtn.status-no_show { background: #452329 !important; border-color: #8c4650 !important; color: #ffc1c8 !important; } [data-theme="dark"] .slot-item.booked, [data-theme="dark"] .legend-color.booked { background: #19354d !important; border-color: #386f9d !important; color: #c0e0ff !important; } [data-theme="dark"] .slot-item.booked.selected-for-broadcast { background: #3b3218 !important; border-color: #88712d !important; color: #ffe4a1 !important; } [data-theme="dark"] #appointmentStatusBtn.status-scheduled, [data-theme="dark"] #appointmentStatusBtn.status-canceled, [data-theme="dark"] .slot-status-canceled { background: var(--at-surface-hover) !important; border-color: var(--at-border) !important; color: var(--at-text-2) !important; } [data-theme="dark"] #appointmentStatusBtn.status-completed, [data-theme="dark"] .slot-status-completed { background: #28351f !important; border-color: #526f3c !important; color: #caeba9 !important; } @media (prefers-reduced-motion: reduce) { body, .site-header, .main-nav-wrap, .top-bar, main, footer, .theme-toggle, .theme-toggle__icons i, .footer_hero { transition: none !important; } } @media print { :root[data-theme="dark"] { color-scheme: light; --theme-page: #ffffff; --theme-surface: #ffffff; --theme-text: #000000; --theme-text-secondary: #212529; --theme-text-muted: #495057; --theme-border: #dee2e6; } .theme-toggle { display: none !important; } }