/* ============================================================================= DENTALNET · ADSBG GLASS Същата витрина като adsbg.eu: слонова кост, нави мастило, ментов сапфир. Golos Text + Onest, стъклени чипове, не порцеланова кантора. Зарежда се ПОСЛЕДЕН, след site.css и inline стиловете на _Layout, и преначертава токените + всички споделени компоненти. Съдържание: 01 · Шрифтове 02 · Токени 03 · База и атмосфера 04 · Типография 05 · Навигация 06 · Футър 07 · Карти и панели 08 · Таблици 09 · Форми 10 · Бутони 11 · Bootstrap компоненти 12 · Утилити 13 · Специфични страници 14 · Движение 15 · Печат ========================================================================== */ /* ── 01 · Шрифтове ────────────────────────────────────────────────────────── */ /* Golos Text (дисплей) + Onest (UI) + IBM Plex Mono (числа) се зареждат от в _Layout.cshtml — тук само ги ползваме. */ /* ── 02 · Токени — adsbg.eu ──────────────────────────────────────────── */ :root { color-scheme: light; /* Нави мастило — ленти и хедъри */ --primary: #0e1830; --primary-dark: #0a1122; --primary-light: #16304f; --primary-rgb: 14, 24, 48; /* Ментов сапфир от логото ADSBG */ --brass: #1fbf92; --brass-light: #7de8c8; --brass-ink: #0e9d76; --brass-rgb: 31, 191, 146; --brand-navy: #0e1830; --brand-navy-mid: #16304f; --brand-teal: #0a1122; --secondary: #5a6478; --success: #1fbf92; --success-dark: #0e9d76; --success-rgb: 31, 191, 146; --warning: #c17a2a; --danger: #a84b4e; --danger-rgb: 168, 75, 78; --info: #2d5aa0; --info-rgb: 45, 90, 160; --light: #f4f6fb; --dark: #0e1830; --surface: #ffffff; --surface-muted: #f4f6fb; --surface-elevated: rgba(255, 255, 255, .86); --surface-sunken: #e7ebf4; --text: #101b30; --text-strong: #0a1122; --text-muted: #5a6478; --border: #d8dee9; --border-strong: #c5cedc; --gray-50: #f4f6fb; --gray-100: #e7ebf4; --gray-200: #d8dee9; --gray-300: #c5cedc; --gray-400: #8fa2b8; --gray-500: #5a6478; --gray-600: #5a6478; --gray-700: #3a4560; --gray-800: #16304f; --gray-900: #0a1122; --shadow-sm: 0 1px 2px rgba(16, 27, 48, .05); --shadow: 0 8px 24px rgba(16, 27, 48, .08), 0 2px 8px rgba(16, 27, 48, .04); --shadow-md: 0 12px 32px rgba(16, 27, 48, .10), 0 4px 12px rgba(16, 27, 48, .05); --shadow-lg: 0 24px 60px rgba(16, 27, 48, .14), 0 6px 18px rgba(16, 27, 48, .07); --shadow-xl: 0 32px 72px rgba(16, 27, 48, .16), 0 8px 24px rgba(16, 27, 48, .08); --glow: 0 0 0 1px rgba(var(--brass-rgb), .28); --panel: rgba(255, 255, 255, .72); --panel-line: rgba(16, 27, 48, .08); --radius: 12px; --radius-lg: 16px; --radius-xl: 24px; --font-body: "Onest", "Segoe UI", system-ui, sans-serif; --font-display: "Golos Text", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace; --bs-primary: #0e1830; --bs-primary-rgb: 14, 24, 48; --bs-success: #1fbf92; --bs-info: #2d5aa0; --bs-warning: #c17a2a; --bs-danger: #a84b4e; --bs-light: #f4f6fb; --bs-dark: #0e1830; --bs-body-bg: #f4f6fb; --bs-body-bg-rgb: 244, 246, 251; --bs-body-color: #101b30; --bs-body-color-rgb: 16, 27, 48; --bs-emphasis-color: #0a1122; --bs-emphasis-color-rgb: 10, 17, 34; --bs-secondary-color: rgba(16, 27, 48, .68); --bs-secondary-bg: #e7ebf4; --bs-tertiary-color: rgba(16, 27, 48, .5); --bs-tertiary-bg: #f4f6fb; --bs-heading-color: #0a1122; --bs-border-color: #d8dee9; --bs-border-color-translucent: rgba(16, 27, 48, .12); --bs-link-color: #0e9d76; --bs-link-color-rgb: 14, 157, 118; --bs-link-hover-color: #1fbf92; --bs-code-color: #2d5aa0; --bs-highlight-bg: rgba(31, 191, 146, .22); } /* ── 03 · База и атмосфера ────────────────────────────────────────────────── */ body { font-family: var(--font-body); background-color: var(--surface-muted); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Амбиентен слой — aurora като adsbg.eu: мента + сапфир върху слонова кост. */ .app-atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 48% at 10% -8%, rgba(31, 191, 146, .14) 0%, transparent 60%), radial-gradient(ellipse 62% 42% at 94% 0%, rgba(45, 90, 160, .10) 0%, transparent 60%), radial-gradient(ellipse 48% 28% at 48% 108%, rgba(125, 232, 200, .11) 0%, transparent 52%), linear-gradient(178deg, #f7f8fc 0%, #f4f6fb 46%, #eef1f7 100%); } .app-atmos::after { content: ""; position: absolute; inset: 0; opacity: .28; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); } .medical-dashboard, .dashboard-container { background: transparent !important; } ::selection { background: rgba(31, 191, 146, .28); color: var(--text-strong); } /* Тънки, дискретни скролбари */ * { scrollbar-width: thin; scrollbar-color: rgba(110, 106, 94, .35) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(110, 106, 94, .28); border: 3px solid transparent; border-radius: 999px; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(var(--brass-rgb), .6); background-clip: content-box; } :focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; } hr { border-color: var(--border); opacity: 1; } /* ── 04 · Типография ──────────────────────────────────────────────────────── */ h1, .h1, h2, .h2, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .page-title, .dashboard-title, .hero-title, .section-title { font-family: var(--font-display); font-weight: 800 !important; letter-spacing: -.01em; line-height: 1.14; color: var(--text-strong); } h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-body); font-weight: 600; color: var(--text-strong); letter-spacing: -.005em; } /* Цифрите живеят в моноширинен шрифт — статистики, суми, дати */ .stat-number, .card-value, .app-stat-value, .stat-value, .pc-stat-value, .price, .amount, .total, .counter, td.text-end, .table td .fw-bold, time, .badge { font-variant-numeric: tabular-nums; } .stat-number, .card-value, .app-stat-value, .stat-value, .counter { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.03em; color: var(--text-strong); } a { color: var(--primary); text-decoration-color: rgba(var(--brass-rgb), .5); text-underline-offset: 2px; } a:hover { color: var(--brass-ink); } small, .small, .text-secondary { color: var(--text-muted) !important; } label, .form-label { color: var(--text); font-weight: 600; font-size: .84rem; } /* Дискретни заглавия на секции — версални, разредени, като регистър */ .card-header h5, .card-header h6, .app-card-header, .section-label { letter-spacing: .07em; } /* ── 05 · Навигация ───────────────────────────────────────────────────────── */ .dental-navbar { /* Плътният цвят е нарочен: contrast guard-ът чете backgroundColor, а не градиента — без него белият текст върху зеленото минава за „бяло на бяло". */ background-color: var(--brand-navy) !important; background-image: linear-gradient(180deg, #16304f 0%, var(--brand-navy) 100%) !important; border-bottom: none; box-shadow: 0 1px 0 rgba(31, 191, 146, .35), 0 8px 24px rgba(14, 24, 48, .28); backdrop-filter: none; -webkit-backdrop-filter: none; position: sticky; top: 0; z-index: 1040; } .dental-navbar .navbar-brand { font-family: var(--font-display); font-weight: 800 !important; font-size: 1.5rem !important; letter-spacing: .01em; color: #f6f2e7 !important; } .dental-navbar .navbar-brand i { color: var(--brass-light) !important; filter: none; font-size: .95em; } .dental-navbar .navbar-toggler { border-color: rgba(246, 242, 231, .3); } @media (min-width: 992px) { .dental-navbar .nav-link { color: rgba(240, 236, 224, .82) !important; font-weight: 500 !important; font-size: .84rem !important; letter-spacing: .02em; position: relative; } .dental-navbar .nav-link:hover, .dental-navbar .nav-item.show > .nav-link { background: rgba(246, 242, 231, .07) !important; color: #fffdf6 !important; } /* Месингова черта — сдържан индикатор вместо светене */ .dental-navbar .nav-link::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: .12rem; height: 1.5px; border-radius: 0; background: var(--brass-light); opacity: 0; transition: left .25s cubic-bezier(.2, .8, .3, 1), right .25s cubic-bezier(.2, .8, .3, 1), opacity .2s ease; } .dental-navbar .nav-link:hover::after { left: .85rem; right: .85rem; opacity: 1; } .dental-navbar .dropdown-toggle::after { display: none; } .dropdown-menu { background: var(--surface) !important; border: 1px solid var(--border) !important; border-top: 2px solid var(--brass) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; backdrop-filter: none; padding: .35rem !important; } .dropdown-item { color: var(--text) !important; border-radius: var(--radius); font-size: .86rem; padding: .5rem .7rem !important; } .dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--brass-rgb), .12) !important; color: var(--primary-dark) !important; } .dropdown-item i { color: var(--brass-ink) !important; opacity: .9; } .dropdown-header { color: var(--text-muted) !important; letter-spacing: .14em !important; text-transform: uppercase; font-size: .68rem; } .dropdown-divider { border-color: var(--border) !important; } } /* Мобилно меню — хартиен панел, откъснат лист от кантората */ @media (max-width: 991.98px) { .dental-navbar .navbar-collapse { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-top: 2px solid var(--brass) !important; box-shadow: var(--shadow-lg) !important; backdrop-filter: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .dental-navbar .navbar-nav .nav-link { background: transparent !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; } .dental-navbar .navbar-nav .nav-link i { color: var(--brass-ink) !important; } .dental-navbar .navbar-nav .nav-link:hover, .dental-navbar .navbar-nav .nav-link:focus, .dental-navbar .navbar-nav .dropdown.show > .nav-link { background: rgba(var(--brass-rgb), .12) !important; color: var(--primary-dark) !important; border-color: rgba(var(--brass-rgb), .3) !important; } .dental-navbar .navbar-nav .nav-link:hover i, .dental-navbar .navbar-nav .dropdown.show > .nav-link i { color: var(--brass-ink) !important; } .dental-navbar .navbar-nav .dropdown-menu, .dental-navbar .navbar-nav .dropdown-menu.show { background: var(--gray-50) !important; border: 1px solid var(--border) !important; } .dental-navbar .navbar-nav .dropdown-item, .dental-navbar .navbar-nav button.dropdown-item { color: var(--text) !important; border-bottom: 1px solid var(--border) !important; } .dental-navbar .navbar-nav .dropdown-item i { color: var(--brass-ink) !important; } .dental-navbar .navbar-nav .dropdown-item:hover, .dental-navbar .navbar-nav .dropdown-item:focus, .dental-navbar .navbar-nav .dropdown-item:active { background: rgba(var(--brass-rgb), .12) !important; color: var(--primary-dark) !important; } .dental-navbar .navbar-nav .dropdown-header { color: var(--text-muted) !important; } .dental-navbar .navbar-nav .dropdown-divider { border-color: var(--border) !important; } .dental-navbar .navbar-collapse > .navbar-nav + .navbar-nav { border-top: 1px solid var(--border-strong) !important; } .dental-navbar .navbar-collapse > .navbar-nav + .navbar-nav > .nav-item > .nav-link, .dental-navbar .navbar-collapse > .navbar-nav.ms-auto .nav-item:last-child .nav-link { background: var(--primary) !important; color: #f6f2e7 !important; border-radius: var(--radius); } .dental-navbar .navbar-collapse > .navbar-nav + .navbar-nav > .nav-item > .nav-link i, .dental-navbar .navbar-collapse > .navbar-nav.ms-auto .nav-item:last-child .nav-link i { color: var(--brass-light) !important; } } .breadcrumb { background: transparent; font-size: .8rem; letter-spacing: .02em; } .breadcrumb-item + .breadcrumb-item::before { color: var(--brass); content: "·"; } .breadcrumb-item.active { color: var(--text-muted); } /* ── 06 · Футър ───────────────────────────────────────────────────────────── */ .dental-footer { background: transparent !important; border-top: 1px solid var(--border-strong); color: var(--text-muted) !important; font-size: .84rem; } .dental-footer a { color: var(--text) !important; } .dental-footer a:hover { color: var(--brass-ink) !important; } /* ── 07 · Карти и панели ──────────────────────────────────────────────────── */ .card, .app-card, .card.app-card, .content-card, .stat-card, .app-stat-card, .card-modern, .table-card, .quote-card, .form-section, .booking-card, .dashboard-header, .dashboard-preview, .login-card, .service-card-modern, .contact-item-modern, .transport-info-modern, .map-container-modern, .nav-modern, .form-modern, .table-modern, .feature-card, .appointment-item, .quick-action, .legend-item, .dental-chart-container { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg); color: var(--text); box-shadow: var(--shadow); backdrop-filter: none; -webkit-backdrop-filter: none; } .card-header, .app-card-header, .modal-header { background: var(--gray-50) !important; border-bottom: 1px solid var(--border) !important; color: var(--text-strong) !important; } .card-footer, .modal-footer { background: var(--gray-50) !important; border-top: 1px solid var(--border) !important; } .card-title, .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { color: var(--text-strong); } .card-text, .card-body { color: var(--text); } /* Интерактивните карти — месингов ръб при досег, без летене */ .app-card, .content-card, .stat-card, .app-stat-card, .card-modern, .quick-action, .feature-card, .service-card-modern, .appointment-item { transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease, border-color .25s ease; } .app-card:hover, .content-card:hover, .stat-card:hover, .app-stat-card:hover, .card-modern:hover, .quick-action:hover, .feature-card:hover, .service-card-modern:hover, .appointment-item:hover { transform: translateY(-2px); border-color: rgba(var(--brass-rgb), .45) !important; box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--brass-rgb), .18); } /* Цветните акцентни ръбове на статистиките */ .app-stat-card-border-primary, .border-left-primary { border-left: 3px solid var(--primary) !important; } .app-stat-card-border-success, .border-left-success { border-left: 3px solid var(--success) !important; } .app-stat-card-border-warning, .border-left-warning { border-left: 3px solid var(--brass) !important; } .app-stat-card-border-info, .border-left-info { border-left: 3px solid var(--info) !important; } .app-stat-icon, .action-icon, .card-icon, .stat-icon, .contact-icon-modern { background: rgba(var(--primary-rgb), .08) !important; color: var(--primary) !important; border: 1px solid rgba(var(--primary-rgb), .16); border-radius: var(--radius); } .app-stat-icon-success { background: rgba(var(--success-rgb), .1) !important; color: var(--success-dark) !important; border-color: rgba(var(--success-rgb), .2); } .app-stat-icon-warning { background: rgba(var(--brass-rgb), .12) !important; color: var(--brass-ink) !important; border-color: rgba(var(--brass-rgb), .24); } .app-stat-icon-info { background: rgba(var(--info-rgb), .1) !important; color: var(--info) !important; border-color: rgba(var(--info-rgb), .2); } .empty-state, .no-data { color: var(--text-muted); background: var(--gray-50); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); } /* ── 08 · Таблици ─────────────────────────────────────────────────────────── */ .table, .app-table, .table-modern { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-striped-bg: rgba(38, 32, 20, .022); --bs-table-striped-color: var(--text); --bs-table-hover-bg: rgba(var(--brass-rgb), .09); --bs-table-hover-color: var(--text-strong); --bs-table-active-bg: rgba(var(--brass-rgb), .14); color: var(--text); border-color: var(--border); } /* Главата на таблицата е глава на регистър: версална, разредена, с месингова черта отдолу */ .table > thead, .app-table > thead, .table-modern thead { background: var(--gray-50); } .table > thead th, .app-table > thead th, .table-modern thead th { color: var(--primary) !important; background: transparent !important; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1.5px solid var(--brass) !important; padding-top: .8rem; padding-bottom: .8rem; white-space: nowrap; } .table > tbody > tr { border-color: var(--border); } .table > tbody > tr > td { border-color: var(--border); } .table-bordered > :not(caption) > * > * { border-color: var(--border) !important; } .table-hover > tbody > tr { transition: background .18s ease; } .table-light, .table-light > th, .table-light > td { background: var(--gray-100) !important; color: var(--text) !important; } .table-responsive { border-radius: var(--radius-lg); } /* ── 09 · Форми ───────────────────────────────────────────────────────────── */ .form-control, .form-select, .input-group-text, textarea, select, .form-modern .form-control { background: #fffefb !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; border-radius: var(--radius); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .form-control::placeholder, textarea::placeholder { color: var(--gray-500) !important; opacity: 1; } .form-control:focus, .form-select:focus, textarea:focus, select:focus { background: #fffefb !important; border-color: var(--brass) !important; box-shadow: 0 0 0 3px rgba(var(--brass-rgb), .18) !important; color: var(--text-strong) !important; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background: var(--gray-100) !important; color: var(--text-muted) !important; } option, optgroup { background: #fffefb; color: var(--text); } .input-group-text { background: var(--gray-100) !important; color: var(--text-muted) !important; } .form-check-input { background-color: #fffefb; border-color: var(--border-strong); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-check-input:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(var(--brass-rgb), .18); } .form-switch .form-check-input:checked { background-color: var(--primary); } .form-text, .form-hint { color: var(--text-muted) !important; } .invalid-feedback, .text-danger, .field-validation-error { color: var(--danger) !important; } .valid-feedback { color: var(--success-dark) !important; } .was-validated .form-control:invalid, .form-control.is-invalid, .input-validation-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(163, 59, 50, .14) !important; } /* Календарната иконка — тъмна върху светло поле */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: none; opacity: .5; cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } input[type="file"]::file-selector-button { background: rgba(var(--brass-rgb), .14); border: 1px solid rgba(var(--brass-rgb), .3); color: var(--brass-ink); border-radius: var(--radius); padding: .35rem .75rem; margin-right: .75rem; cursor: pointer; } /* Datepicker (bootstrap-datepicker) */ .datepicker, .datepicker-dropdown { background: var(--surface) !important; border: 1px solid var(--border) !important; border-top: 2px solid var(--brass) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; color: var(--text) !important; } .datepicker table tr td, .datepicker table tr th { color: var(--text); border-radius: var(--radius); } .datepicker table tr td.day:hover { background: rgba(var(--brass-rgb), .16) !important; color: var(--primary-dark) !important; } .datepicker table tr td.active, .datepicker table tr td.active:hover { background: var(--primary) !important; color: #f6f2e7 !important; } .datepicker table tr td.old, .datepicker table tr td.new { color: var(--gray-400) !important; } /* ── 10 · Бутони — прозрачни канторски чипове ─────────────────────────────── */ .btn { border-radius: var(--radius); font-weight: 600; letter-spacing: .02em; transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary, .btn-save, .btn-hero { --bs-btn-bg: transparent; --bs-btn-border-color: rgba(var(--brass-rgb), .45); --bs-btn-color: var(--brass-ink); --bs-btn-hover-bg: rgba(var(--brass-rgb), .12); --bs-btn-hover-border-color: var(--brass); --bs-btn-hover-color: var(--brass-ink); --bs-btn-active-bg: rgba(var(--brass-rgb), .18); --bs-btn-active-color: var(--primary-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--border); --bs-btn-disabled-color: var(--gray-400); background-image: none; box-shadow: none; backdrop-filter: blur(8px); } .btn-primary:hover { box-shadow: none; } .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-bg: rgba(var(--primary-rgb), .08); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: var(--primary-dark); --bs-btn-active-bg: rgba(var(--primary-rgb), .14); --bs-btn-active-color: var(--primary-dark); } .btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-cancel { --bs-btn-bg: transparent; --bs-btn-border-color: var(--border-strong); --bs-btn-color: var(--text); --bs-btn-hover-bg: rgba(38, 32, 20, .06); --bs-btn-hover-border-color: var(--brass); --bs-btn-hover-color: var(--primary-dark); --bs-btn-active-bg: var(--gray-200); --bs-btn-active-color: var(--primary-dark); } .btn-dark { --bs-btn-bg: transparent; --bs-btn-border-color: var(--primary-dark); --bs-btn-color: var(--primary-dark); --bs-btn-hover-bg: rgba(var(--primary-rgb), .1); --bs-btn-hover-color: var(--primary); } .btn-success { --bs-btn-bg: transparent; --bs-btn-border-color: rgba(var(--success-rgb), .5); --bs-btn-color: var(--success-dark); --bs-btn-hover-bg: rgba(var(--success-rgb), .12); --bs-btn-hover-color: #24503a; } .btn-danger { --bs-btn-bg: transparent; --bs-btn-border-color: rgba(163, 59, 50, .45); --bs-btn-color: var(--danger); --bs-btn-hover-bg: rgba(163, 59, 50, .1); --bs-btn-hover-color: #7c2c25; } .btn-warning { --bs-btn-bg: transparent; --bs-btn-border-color: rgba(var(--brass-rgb), .5); --bs-btn-color: var(--brass-ink); --bs-btn-hover-bg: rgba(var(--brass-rgb), .14); --bs-btn-hover-color: #5f4a1d; } .btn-info { --bs-btn-bg: transparent; --bs-btn-border-color: rgba(var(--info-rgb), .45); --bs-btn-color: var(--info); --bs-btn-hover-bg: rgba(var(--info-rgb), .1); --bs-btn-hover-color: #23464f; } .btn-outline-success { --bs-btn-color: var(--success-dark); --bs-btn-border-color: rgba(var(--success-rgb), .5); --bs-btn-hover-bg: rgba(var(--success-rgb), .12); --bs-btn-hover-color: #24503a; --bs-btn-hover-border-color: var(--success); } .btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: rgba(163, 59, 50, .45); --bs-btn-hover-bg: rgba(163, 59, 50, .1); --bs-btn-hover-color: #7c2c25; --bs-btn-hover-border-color: var(--danger); } .btn-outline-warning { --bs-btn-color: var(--brass-ink); --bs-btn-border-color: rgba(var(--brass-rgb), .5); --bs-btn-hover-bg: rgba(var(--brass-rgb), .14); --bs-btn-hover-color: #5f4a1d; --bs-btn-hover-border-color: var(--brass); } .btn-outline-info { --bs-btn-color: var(--info); --bs-btn-border-color: rgba(var(--info-rgb), .45); --bs-btn-hover-bg: rgba(var(--info-rgb), .1); --bs-btn-hover-color: #23464f; --bs-btn-hover-border-color: var(--info); } .btn-outline-dark { --bs-btn-color: var(--text-strong); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-bg: rgba(38, 32, 20, .07); --bs-btn-hover-color: var(--primary-dark); } /* Локалните стилове често рисуват плътен фон — тук чиповете остават стъклени. */ .btn-primary, .btn-save, .btn-hero, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-secondary { background-color: transparent !important; background-image: none !important; } .btn-primary, .btn-save, .btn-hero { color: var(--primary) !important; border-color: rgba(var(--primary-rgb), .4) !important; } .btn-primary:hover, .btn-save:hover, .btn-hero:hover { background-color: rgba(var(--primary-rgb), .1) !important; color: var(--primary-dark) !important; } .btn-success { color: var(--success-dark) !important; border-color: rgba(var(--success-rgb), .5) !important; } .btn-success:hover { background-color: rgba(var(--success-rgb), .12) !important; } .btn-danger { color: var(--danger) !important; border-color: rgba(163, 59, 50, .45) !important; } .btn-danger:hover { background-color: rgba(163, 59, 50, .1) !important; } .btn-warning { color: var(--brass-ink) !important; border-color: rgba(var(--brass-rgb), .5) !important; } .btn-warning:hover { background-color: rgba(var(--brass-rgb), .14) !important; } .btn-info { color: var(--info) !important; border-color: rgba(var(--info-rgb), .45) !important; } .btn-info:hover { background-color: rgba(var(--info-rgb), .1) !important; } .btn-dark { color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } .btn-link { color: var(--primary); } .btn-close { filter: none; opacity: .55; } .btn-close:hover { opacity: 1; } .btn-float, .btn-touch { box-shadow: var(--shadow-lg); } /* ── 11 · Bootstrap компоненти ────────────────────────────────────────────── */ .modal-content, .offcanvas { background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-top: 3px solid var(--primary) !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl) !important; color: var(--text); } .modal-backdrop.show { background: #2b2417; opacity: .42; } .modal-title { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--text-strong); } .badge { font-weight: 600; letter-spacing: .04em; border-radius: 3px; padding: .35em .6em; } .badge.bg-primary { background: rgba(var(--primary-rgb), .1) !important; color: var(--primary) !important; box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .28); } .badge.bg-success { background: rgba(var(--success-rgb), .12) !important; color: #285440 !important; box-shadow: inset 0 0 0 1px rgba(var(--success-rgb), .3); } .badge.bg-danger { background: rgba(163, 59, 50, .1) !important; color: #8e3129 !important; box-shadow: inset 0 0 0 1px rgba(163, 59, 50, .3); } .badge.bg-warning { background: rgba(var(--brass-rgb), .14) !important; color: var(--brass-ink) !important; box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb), .34); } .badge.bg-info { background: rgba(var(--info-rgb), .1) !important; color: #26505d !important; box-shadow: inset 0 0 0 1px rgba(var(--info-rgb), .3); } .badge.bg-secondary { background: rgba(110, 106, 94, .12) !important; color: #504c43 !important; box-shadow: inset 0 0 0 1px rgba(110, 106, 94, .28); } .badge.bg-light { background: var(--gray-100) !important; color: var(--text) !important; } .badge.bg-dark { background: var(--primary-dark) !important; color: #f6f2e7 !important; } /* Наследени класове от Bootstrap 4 (.badge-info вместо .badge.bg-info). Bootstrap 5 не ги стилизира — оставаха без фон, т.е. бяло върху бяло. */ .badge-primary { background: rgba(var(--primary-rgb), .1) !important; color: var(--primary) !important; box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .28); } .badge-success { background: rgba(var(--success-rgb), .12) !important; color: #285440 !important; box-shadow: inset 0 0 0 1px rgba(var(--success-rgb), .3); } .badge-danger { background: rgba(163, 59, 50, .1) !important; color: #8e3129 !important; box-shadow: inset 0 0 0 1px rgba(163, 59, 50, .3); } .badge-warning { background: rgba(var(--brass-rgb), .14) !important; color: var(--brass-ink) !important; box-shadow: inset 0 0 0 1px rgba(var(--brass-rgb), .34); } .badge-info { background: rgba(var(--info-rgb), .1) !important; color: #26505d !important; box-shadow: inset 0 0 0 1px rgba(var(--info-rgb), .3); } .badge-secondary { background: rgba(110, 106, 94, .12) !important; color: #504c43 !important; box-shadow: inset 0 0 0 1px rgba(110, 106, 94, .28); } .badge-light { background: var(--gray-100) !important; color: var(--text) !important; } .badge-dark { background: var(--primary-dark) !important; color: #f6f2e7 !important; } /* Плътните контекстни фонове на Bootstrap са ярки (#0dcaf0, #0d6efd) и носят бял текст — върху тях контрастът пада под 2:1. Привеждаме ги към палитрата. */ .bg-primary { background-color: var(--primary) !important; color: #f2efe4 !important; } .bg-info { background-color: var(--info) !important; color: #f2f8fa !important; } .bg-success { background-color: var(--success-dark) !important; color: #f4faf6 !important; } .bg-warning { background-color: var(--brass) !important; color: #fffaf0 !important; } .bg-danger { background-color: var(--danger) !important; color: #fdf5f4 !important; } .bg-secondary { background-color: #5d5a51 !important; color: #f4f2ec !important; } .bg-primary :is(h1,h2,h3,h4,h5,h6,p,span,small,div,li), .bg-info :is(h1,h2,h3,h4,h5,h6,p,span,small,div,li), .bg-success :is(h1,h2,h3,h4,h5,h6,p,span,small,div,li), .bg-warning :is(h1,h2,h3,h4,h5,h6,p,span,small,div,li), .bg-danger :is(h1,h2,h3,h4,h5,h6,p,span,small,div,li), .bg-secondary :is(h1,h2,h3,h4,h5,h6,p,span,small,div,li) { color: inherit; } .alert { border-radius: var(--radius); border: 1px solid var(--border); border-left-width: 3px; background: var(--gray-50); color: var(--text); backdrop-filter: none; } .alert-primary, .alert-info { background: rgba(var(--info-rgb), .07) !important; border-color: rgba(var(--info-rgb), .3) !important; color: #23464f !important; } .alert-success { background: rgba(var(--success-rgb), .08) !important; border-color: rgba(var(--success-rgb), .32) !important; color: #24503a !important; } .alert-danger { background: rgba(163, 59, 50, .07) !important; border-color: rgba(163, 59, 50, .3) !important; color: #7c2c25 !important; } .alert-warning { background: rgba(var(--brass-rgb), .1) !important; border-color: rgba(var(--brass-rgb), .35) !important; color: #5f4a1d !important; } .alert-secondary, .alert-light, .alert-dark { background: var(--gray-50) !important; border-color: var(--border-strong) !important; color: var(--text) !important; } .alert .alert-link { color: inherit; text-decoration: underline; } .list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--text); --bs-list-group-border-color: var(--border); --bs-list-group-action-hover-bg: rgba(var(--brass-rgb), .09); --bs-list-group-action-hover-color: var(--text-strong); --bs-list-group-active-bg: rgba(var(--primary-rgb), .1); --bs-list-group-active-border-color: rgba(var(--primary-rgb), .25); --bs-list-group-active-color: var(--primary-dark); --bs-list-group-action-active-bg: rgba(var(--primary-rgb), .14); } .list-group-item { background: transparent; color: var(--text); border-color: var(--border); } .nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-hover-border-color: transparent transparent var(--brass); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: var(--primary-dark); --bs-nav-tabs-link-active-border-color: transparent transparent var(--brass); --bs-nav-link-color: var(--text-muted); --bs-nav-link-hover-color: var(--text-strong); border-bottom: 1px solid var(--border); } .nav-tabs .nav-link { border-radius: 0; border-bottom-width: 2px; font-weight: 600; font-size: .86rem; letter-spacing: .03em; } .nav-pills { --bs-nav-pills-link-active-bg: var(--primary); --bs-nav-pills-link-active-color: #f6f2e7; --bs-nav-link-color: var(--text-muted); --bs-nav-link-hover-color: var(--text-strong); --bs-nav-pills-border-radius: var(--radius); } .nav-pills .nav-link.active { box-shadow: none; } .pagination { --bs-pagination-bg: #fffefb; --bs-pagination-color: var(--text); --bs-pagination-border-color: var(--border-strong); --bs-pagination-hover-bg: rgba(var(--brass-rgb), .12); --bs-pagination-hover-color: var(--primary-dark); --bs-pagination-hover-border-color: rgba(var(--brass-rgb), .4); --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary-dark); --bs-pagination-active-color: #f6f2e7; --bs-pagination-disabled-bg: var(--gray-100); --bs-pagination-disabled-color: var(--gray-500); --bs-pagination-disabled-border-color: var(--border); --bs-pagination-border-radius: var(--radius); } .accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--text); --bs-accordion-border-color: var(--border); --bs-accordion-btn-color: var(--text-strong); --bs-accordion-btn-bg: var(--gray-50); --bs-accordion-active-bg: rgba(var(--brass-rgb), .1); --bs-accordion-active-color: var(--primary-dark); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(var(--brass-rgb), .18); --bs-accordion-border-radius: var(--radius-lg); } .accordion-button::after { filter: none; opacity: .6; } .progress { background: var(--gray-200); border-radius: 999px; } .progress-bar { background: linear-gradient(90deg, var(--primary), var(--primary-light)); } .toast { background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-left: 3px solid var(--brass) !important; color: var(--text) !important; border-radius: var(--radius); box-shadow: var(--shadow-lg); } .toast-header { background: var(--gray-50) !important; color: var(--text-strong) !important; border-bottom-color: var(--border) !important; } .tooltip-inner { background: var(--primary-dark); border: none; color: #f6f2e7; border-radius: var(--radius); font-size: .78rem; } .tooltip .tooltip-arrow::before { border-top-color: var(--primary-dark); } .popover { background: var(--surface); border: 1px solid var(--border-strong); border-top: 2px solid var(--brass); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .popover-header { background: var(--gray-50); color: var(--text-strong); border-bottom-color: var(--border); } .popover-body { color: var(--text); } .spinner-border, .spinner-grow { color: var(--primary); } /* Loading overlay — пергамент, не мляко и не катран */ #loading-overlay { background: rgba(242, 238, 228, .92) !important; } .loading-content { color: var(--primary) !important; } .loading-spinner { background: transparent !important; border-color: rgba(var(--primary-rgb), .16) !important; border-top-color: var(--brass) !important; } /* ── 12 · Утилити ─────────────────────────────────────────────────────────── */ .bg-white, .bg-body, .bg-body-tertiary, .bg-body-secondary { background-color: var(--surface) !important; color: var(--text) !important; } .bg-light { background-color: var(--gray-50) !important; color: var(--text) !important; } .bg-dark { background-color: var(--primary-dark) !important; color: #f6f2e7 !important; } .text-dark, .text-black, .text-body { color: var(--text) !important; } .text-muted { color: var(--text-muted) !important; } .text-white { color: #fffdf6 !important; } .text-primary { color: var(--primary) !important; } .text-success { color: #24503a !important; } .text-warning { color: var(--brass-ink) !important; } .text-info { color: var(--info) !important; } .text-secondary { color: var(--text-muted) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; } .border-light { border-color: var(--border) !important; } .border-dark { border-color: var(--border-strong) !important; } .bg-primary-subtle { background: rgba(var(--primary-rgb), .09) !important; color: var(--primary) !important; } .bg-success-subtle { background: rgba(var(--success-rgb), .1) !important; color: #24503a !important; } .bg-danger-subtle { background: rgba(163, 59, 50, .08) !important; color: #7c2c25 !important; } .bg-warning-subtle { background: rgba(var(--brass-rgb), .13) !important; color: var(--brass-ink) !important; } .bg-info-subtle { background: rgba(var(--info-rgb), .09) !important; color: #23464f !important; } .bg-secondary-subtle { background: rgba(110, 106, 94, .1) !important; color: #504c43 !important; } .bg-gradient-primary { background: linear-gradient(140deg, var(--primary), var(--primary-dark)) !important; color: #f6f2e7 !important; } .bg-gradient-success { background: linear-gradient(140deg, var(--success), var(--success-dark)) !important; color: #f4faf6 !important; } .bg-gradient-warning { background: linear-gradient(140deg, var(--brass-light), var(--brass-ink)) !important; color: #fffaf0 !important; } .bg-gradient-info { background: linear-gradient(140deg, #3a7182, var(--info)) !important; color: #f2f8fa !important; } .shadow, .shadow-sm, .shadow-lg { box-shadow: var(--shadow) !important; } /* Вградени ТЪМНИ фонове в отделни изгледи (hero ленти, CTA блокове, банери). Съдържанието им е писано със светъл текст, затова НЕ ги изсветляваме — това би дало бяло върху бяло. Пребоядисваме ги в мастиленото зелено на кантората: лентата остава тъмна, текстът остава четим. */ [style*="background"][style*="#0f172a"], [style*="background"][style*="#1e293b"], [style*="background"][style*="#111827"], [style*="background"][style*="#212529"], [style*="background"][style*="#0b1220"], [style*="background"][style*="#05080e"], [style*="background"][style*="#070b12"], [style*="background"][style*="#101827"], [style*="background"][style*="#0891b2"], [style*="background"][style*="#0ea5e9"], [style*="background"][style*="#2563eb"], [style*="background"][style*="#4f46e5"], [style*="background"][style*="#6366f1"], [style*="background"][style*="#7c3aed"] { /* Плътният цвят е задължителен: без него остава само градиент, а computed backgroundColor е прозрачен — и лентата минава за светла. */ background-color: var(--primary-dark) !important; background-image: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%) !important; color: #f2efe4 !important; border-color: rgba(255, 255, 255, .12) !important; } /* Същите тъмни ленти, но записани от JS в rgb() форма — hex селекторите отгоре не ги хващат, защото браузърът е пренаписал атрибута. */ [style*="background"][style*="rgb(15, 23, 42)"], [style*="background"][style*="rgb(30, 41, 59)"], [style*="background"][style*="rgb(17, 24, 39)"], [style*="background"][style*="rgb(8, 145, 178)"], [style*="background"][style*="rgb(14, 165, 233)"], [style*="background"][style*="rgb(37, 99, 235)"], [style*="background"][style*="rgb(124, 58, 237)"], #gdprBanner { background-color: var(--primary-dark) !important; background-image: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%) !important; color: #f2efe4 !important; border-color: rgba(255, 255, 255, .12) !important; } /* GDPR лентата — тъмно поле долу, месингов кант, месингови връзки */ #gdprBanner { border-top: 2px solid var(--brass) !important; } #gdprBanner :is(p, span, strong, small, div, li, h1, h2, h3, h4, h5, h6) { color: #f2efe4 !important; } #gdprBanner i { color: var(--brass-light) !important; } #gdprBanner a:not(.btn) { color: var(--brass-light) !important; text-decoration: underline; } #gdprBanner .btn-primary, #gdprBanner .btn-success, #gdprBanner .btn-light { background: var(--brass) !important; background-image: none !important; border-color: var(--brass-light) !important; color: #1a1305 !important; } #gdprBanner .btn-secondary, #gdprBanner .btn-outline-light, #gdprBanner .btn-outline-secondary { background: transparent !important; border-color: rgba(242, 239, 228, .45) !important; color: #f2efe4 !important; } #gdprBanner .btn-secondary:hover, #gdprBanner .btn-outline-light:hover, #gdprBanner .btn-outline-secondary:hover { background: rgba(242, 239, 228, .14) !important; color: #fffdf6 !important; } /* В тъмните ленти светлият текст е правилният — само подравняваме нюансите */ .ink-band, [style*="background"][style*="#0f172a"], [style*="background"][style*="#1e293b"], [style*="background"][style*="#0891b2"], [style*="background"][style*="#0ea5e9"], [style*="background"][style*="#2563eb"], [style*="background"][style*="#7c3aed"] { --text: #f2efe4; --text-strong: #fffdf6; --text-muted: rgba(242, 239, 228, .74); } /* Панели, дефинирани локално в отделните изгледи (собствени style блокове). */ .calendar-filters, .calendar-cell, .calendar-header, .file-card, .file-preview, .file-preview-container, .file-preview-item, .file-item, .file-upload-area, .existing-file-item, .uploaded-file-item, .va-stat-card, .va-config-card, .va-chat-wrapper, .va-transcript-box, .va-response-box, .action-bar, .status-card, .detail-card, .detail-header, .doctor-section, .day-card, .clean-container, .dash-welcome, .dash-stat, .dash-card, .dash-list-item, .register-card, .register-header, .register-footer, .success-card, .success-icon-wrapper, .access-denied-card, .access-denied-header, .profile-card, .profile-header, .profile-info-card, .selected-teeth-display, .intervention-details, .timeline-content, .total-section, .step-indicator, .wizard-card, .wizard-footer, .selection-card, .time-slot, .form-card, .patient-info, .patient-search-results, .patient-result, .search-result-item, .patient-result-item, .jaw-section, .patient-card-row, .mini-stat, .search-bar-container, .btn-icon-hover, .btn-icon, .pd-stat-card, .pd-tab-content, .pd-tabs-wrapper, .pd-chart-legend, .pd-file-card, .summary-card, .info-box, .panel-box { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .calendar-cell.disabled, .time-slot.disabled { background: var(--gray-100) !important; color: var(--gray-400) !important; } .selection-card:hover, .time-slot:hover, .dash-card:hover, .file-card:hover, .search-result-item:hover, .patient-result-item:hover, .dash-list-item:hover { background: rgba(var(--brass-rgb), .1) !important; border-color: rgba(var(--brass-rgb), .45) !important; color: var(--text-strong) !important; } .selection-card.selected, .time-slot.selected, .calendar-cell.selected { background: rgba(var(--primary-rgb), .1) !important; border-color: var(--primary) !important; color: var(--primary-dark) !important; } .step-indicator .step.active, .step-indicator .step-circle.active { background: var(--primary) !important; color: #f6f2e7 !important; } /* Шапка на картона — целадон с златен кант: порцеланово досие */ .pd-header, .profile-header, .detail-header, .dashboard-header { background-color: var(--primary-dark) !important; background-image: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 52%, var(--primary-dark) 100%) !important; border: 1px solid var(--primary-dark) !important; border-bottom: 2px solid var(--brass) !important; box-shadow: var(--shadow-md) !important; color: #f2efe4 !important; } .pd-header h1, .pd-header h2, .dashboard-header h1, .dashboard-header h2, .profile-header h1, .profile-header h2, .detail-header h1, .detail-header h2 { font-family: var(--font-display); font-weight: 600 !important; color: #fffdf6 !important; } .pd-header i, .dashboard-header i, .profile-header i, .detail-header i { color: var(--brass-light) !important; } /* Статистики в картона */ .pd-stat-value, .mini-stat-value, .dash-stat-value, .stat-card .stat-value { font-family: var(--font-mono) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; color: var(--text-strong) !important; } .pd-stat-label, .mini-stat-label, .dash-stat-label, .stat-card .stat-label, .contact-label { color: var(--text-muted) !important; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; } /* Табове в картона на пациента */ .pd-tabs-wrapper { border-bottom: none !important; } .pd-tabs { border-bottom: 1px solid var(--border) !important; } .pd-tab { background: transparent !important; color: var(--text-muted) !important; border-bottom-color: transparent !important; letter-spacing: .03em; } .pd-tab:hover { background: rgba(var(--brass-rgb), .08) !important; color: var(--text-strong) !important; } .pd-tab.active { background: transparent !important; color: var(--primary-dark) !important; border-bottom: 2px solid var(--brass) !important; font-weight: 700; } .pd-tab.active i, .pd-tab:hover i { color: inherit !important; } .pd-table thead th { background: var(--gray-50) !important; color: var(--primary) !important; border-bottom: 1.5px solid var(--brass) !important; text-transform: uppercase; letter-spacing: .12em; } .pd-table tbody tr:hover { background: rgba(var(--brass-rgb), .08) !important; } .pd-table td { border-color: var(--border) !important; color: var(--text) !important; } .pd-table-date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Списък с пациенти — редовете като картони в шкаф */ .patient-card-row:hover { border-color: rgba(var(--brass-rgb), .45) !important; box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--brass-rgb), .18) !important; } .patient-avatar { /* Плътният цвят под градиента пази contrast guard-а от фалшив извод — без него computed backgroundColor е прозрачен и кремавите инициали минават за „светло върху светло". */ background-color: var(--primary) !important; background-image: linear-gradient(140deg, var(--primary-light), var(--primary)) !important; color: #f6f2e7 !important; border: 1px solid var(--primary-dark); } .search-bar-container { background: #fffefb !important; border: 1px solid var(--border-strong) !important; backdrop-filter: none; } .btn-icon, .btn-icon-hover { color: var(--text-muted) !important; } .btn-icon:hover, .btn-icon-hover:hover { background: rgba(var(--brass-rgb), .14) !important; color: var(--brass-ink) !important; } /* Вградени светли текстове от тъмната епоха (#fff, #e2e8f0, #c4d1e1…) върху вече светли повърхности — връщаме ги към мастило. */ :is([style*="color"][style*="#fff"], [style*="color"][style*="#FFF"], [style*="color"][style*="white"], [style*="color"][style*="#f8fafc"], [style*="color"][style*="#e2e8f0"], [style*="color"][style*="#cbd5e1"], [style*="color"][style*="#c4d1e1"]):not(.payment-widget *):not(.pc-container *):not(.tooth):not(.v3d *):not(.dental-navbar *):not(.pd-header *):not(.dashboard-header *):not(.btn):not(.badge) { color: var(--text) !important; } :is([style*="color"][style*="#94a3b8"], [style*="color"][style*="#8798ae"], [style*="color"][style*="#999"]):not(.payment-widget *):not(.pc-container *):not(.v3d *):not(.dental-navbar *) { color: var(--text-muted) !important; } /* ── 13 · Специфични страници ─────────────────────────────────────────────── */ .login-page, .modern-landing-page { background-color: var(--surface-muted) !important; } /* Hero и CTA лентите са писани със светъл текст — остават тъмни полета, мастилено зелено с месингов кант. Това е „заглавната страница" на сайта. */ .landing-hero, .landing-hero-cta, .landing-hero-final { background-color: var(--primary-dark) !important; background-image: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 55%, var(--primary-dark) 100%) !important; color: #f2efe4 !important; border-bottom: 2px solid var(--brass); --text: #f2efe4; --text-strong: #fffdf6; --text-muted: rgba(242, 239, 228, .74); } .landing-hero :is(h1, h2, h3, h4, h5, h6, p, span, li, small, strong, div):not(.badge):not(.btn):not([class*="btn-"]), .landing-hero-cta :is(h1, h2, h3, h4, h5, h6, p, span, li, small, strong, div):not(.badge):not(.btn):not([class*="btn-"]), .landing-hero-final :is(h1, h2, h3, h4, h5, h6, p, span, li, small, strong, div):not(.badge):not(.btn):not([class*="btn-"]) { color: #f2efe4 !important; } .landing-hero h1, .landing-hero h2, .landing-hero-cta h1, .landing-hero-cta h2, .landing-hero-final h1, .landing-hero-final h2 { color: #fffdf6 !important; } .landing-hero i, .landing-hero-cta i, .landing-hero-final i { color: var(--brass-light) !important; } .landing-hero a:not(.btn), .landing-hero-cta a:not(.btn), .landing-hero-final a:not(.btn) { color: var(--brass-light) !important; } .landing-hero .badge, .landing-hero-badge { background: rgba(246, 242, 231, .1) !important; color: #f2efe4 !important; box-shadow: inset 0 0 0 1px rgba(192, 163, 96, .5) !important; } .hero-title, .landing-hero h1, .login-card h1, .login-card h2 { font-family: var(--font-display) !important; font-weight: 600 !important; } /* Основният призив в лентата — месинг върху мастило */ .landing-hero .btn-light, .landing-hero-cta .btn-light, .landing-hero-final .btn-light, .landing-hero-cta .btn-primary, .landing-hero-final .btn-primary { background: var(--brass) !important; background-image: none !important; color: #1a1305 !important; border-color: var(--brass-light) !important; } .landing-hero .btn-light:hover, .landing-hero-cta .btn-light:hover, .landing-hero-final .btn-light:hover, .landing-hero-cta .btn-primary:hover, .landing-hero-final .btn-primary:hover { background: var(--brass-light) !important; color: #1a1305 !important; } /* Вторичните — очертани в месинг, прозрачни. Всички outline варианти в тъмна лента се изравняват: цветните им мастила падат под 2:1 върху зеленото. */ .landing-hero [class*="btn-outline-"], .landing-hero-cta [class*="btn-outline-"], .landing-hero-final [class*="btn-outline-"], #gdprBanner [class*="btn-outline-"] { background: transparent !important; color: #f2efe4 !important; border-color: rgba(192, 163, 96, .65) !important; } .landing-hero [class*="btn-outline-"]:hover, .landing-hero-cta [class*="btn-outline-"]:hover, .landing-hero-final [class*="btn-outline-"]:hover, #gdprBanner [class*="btn-outline-"]:hover { background: rgba(192, 163, 96, .18) !important; color: #fffdf6 !important; border-color: var(--brass-light) !important; } /* Смисловите текстови цветове също се изсветляват върху мастилено поле */ .landing-hero :is(.text-primary, .text-info, .text-secondary, .text-dark, .text-body, .text-muted), .landing-hero-cta :is(.text-primary, .text-info, .text-secondary, .text-dark, .text-body, .text-muted), .landing-hero-final :is(.text-primary, .text-info, .text-secondary, .text-dark, .text-body, .text-muted), #gdprBanner :is(.text-primary, .text-info, .text-secondary, .text-dark, .text-body, .text-muted), .pd-header :is(.text-primary, .text-info, .text-secondary, .text-dark, .text-body, .text-muted), .dashboard-header :is(.text-primary, .text-info, .text-secondary, .text-dark, .text-body, .text-muted) { color: rgba(242, 239, 228, .82) !important; } .landing-hero :is(.text-success, .text-warning), .landing-hero-cta :is(.text-success, .text-warning), .landing-hero-final :is(.text-success, .text-warning), .pd-header :is(.text-success, .text-warning), .dashboard-header :is(.text-success, .text-warning) { color: var(--brass-light) !important; } .login-card { box-shadow: var(--shadow-xl) !important; } /* ── Страници с цял екран фон (регистрация, профил, отказан достъп) ───────── */ /* Локалните им стилове рисуват син градиент на цялата страница. Тук той става мастилено поле: тъмно зелено с месингова светлина, върху него хартията. */ .register-container, .access-denied-container, .profile-container, .success-container, .booking-header { background-color: var(--primary-dark) !important; background-image: radial-gradient(ellipse 60% 45% at 12% 0%, rgba(192, 163, 96, .16) 0%, transparent 62%), linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 58%, var(--primary-dark) 100%) !important; } /* Кръглите лога и печати — месинг вместо синьо */ .register-logo, .profile-logo, .access-denied-logo, .access-denied-icon, .success-icon-wrapper, .role-badge, .feature-icon, .appointment-badge, .more-badge { background-color: var(--brass) !important; background-image: linear-gradient(140deg, var(--brass-light), var(--brass-ink)) !important; color: #fffaf0 !important; border-color: var(--brass-ink) !important; } .register-logo i, .profile-logo i, .access-denied-logo i, .access-denied-icon i, .success-icon-wrapper i, .feature-icon i { color: #fffaf0 !important; } /* Декоративните ленти по горния ръб на картите — месинг вместо синьо */ .access-denied-card::before, .profile-card::before, .register-card::before, .success-card::before, .patient-card-row:hover::before { background: linear-gradient(90deg, var(--brass-ink), var(--brass-light)) !important; } .btn-register { background-color: var(--primary) !important; background-image: none !important; border: 1px solid var(--primary-dark) !important; color: #f6f2e7 !important; } .btn-register:hover { background-color: var(--primary-light) !important; color: #fffdf6 !important; } .calendar-cell.today .calendar-day { background-color: var(--brass) !important; background-image: none !important; color: #fffaf0 !important; } /* Локалните