/* ===========================================================
App Overlay — глобальные P0-фиксы по аудиту v2 (защищённые экраны)
Действует на /my/* (кроме /my/auth/* — там работает auth-overlay)
Без переопределения брендового зелёного цвета кнопок.
=========================================================== */
/* --- P0: focus-visible на ВСЕХ интерактивных элементах ЛК --- */
.app-ov input:focus-visible,
.app-ov select:focus-visible,
.app-ov textarea:focus-visible {
outline: 3px solid #00bf3f !important;
outline-offset: 1px !important;
border-color: #00bf3f !important;
}
.app-ov button:focus-visible,
.app-ov a:focus-visible,
.app-ov [role="button"]:focus-visible,
.app-ov [tabindex]:focus-visible {
outline: 3px solid #00bf3f !important;
outline-offset: 2px !important;
}
/* Edit-btn и toggle-pw — внутри inputs, нужен компактный focus */
.app-ov .edit-btn:focus-visible,
.app-ov .toggle-pw:focus-visible,
.app-ov .input-action:focus-visible {
outline: 2px solid #00bf3f !important;
outline-offset: 1px !important;
}
/* --- P0: 404 страница — интегрируем в стиль ЛК --- */
/* Сам контейнер NotFoundView рендерится внутри .main-content (если sidebar остался)
или standalone (если упал на root layout). В обоих случаях применяем брендовый стиль. */
.app-ov .not-found {
min-height: 70vh !important;
padding: 60px 24px !important;
background: transparent !important;
}
.app-ov .not-found h1 {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 96px !important;
font-weight: 700 !important;
color: #00bf3f !important;
margin-bottom: 16px !important;
letter-spacing: -2px !important;
line-height: 1 !important;
}
.app-ov .not-found p {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 18px !important;
color: #6f737a !important;
margin-bottom: 32px !important;
max-width: 480px !important;
line-height: 1.5 !important;
}
.app-ov .not-found .btn-primary {
background: linear-gradient(135deg, #00BF3F, #06AC3E) !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
padding: 14px 32px !important;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
transition: opacity 0.2s !important;
}
.app-ov .not-found .btn-primary:hover {
opacity: 0.9 !important;
background: linear-gradient(135deg, #00BF3F, #06AC3E) !important;
}
/* Helper-блок "Возможно, вы искали", вставляется JS-overlay */
.app-ov .ov-404-helper {
margin-top: 32px;
padding: 20px;
background: #fff;
border: 1px solid #E8EAEE;
border-radius: 16px;
max-width: 480px;
text-align: left;
}
.app-ov .ov-404-helper-title {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-weight: 600;
color: #6f737a;
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.app-ov .ov-404-helper ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.app-ov .ov-404-helper a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
color: #030813;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background 0.15s;
}
.app-ov .ov-404-helper a:hover {
background: #f4f6f9;
color: #00bf3f;
}
.app-ov .ov-404-helper a::before {
content: "→";
color: #00bf3f;
font-weight: 700;
}
/* ============================================================
P1 — добавки
============================================================ */
/* --- P1: активный пункт sidebar с левой полоской 3px --- */
.app-ov .sidebar .nav-item.router-link-active,
.app-ov .sidebar .nav-item.active {
position: relative !important;
background: #f0fdf4 !important;
}
.app-ov .sidebar .nav-item.router-link-active::before,
.app-ov .sidebar .nav-item.active::before {
content: "";
position: absolute;
left: -8px;
top: 12px;
bottom: 12px;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, #00BF3F, #06AC3E);
}
.app-ov .sidebar.collapsed .nav-item.router-link-active::before,
.app-ov .sidebar.collapsed .nav-item.active::before {
left: -4px;
}
.app-ov .sidebar .nav-item.router-link-active .nav-label,
.app-ov .sidebar .nav-item.active .nav-label {
color: #030813 !important;
font-weight: 700 !important;
}
/* --- P1: Dashboard cards clickable affordance --- */
.app-ov .dashboard-view .widget[data-ov-clickable="1"] {
cursor: pointer;
}
.app-ov .dashboard-view .widget[data-ov-clickable="1"]:hover {
box-shadow: 0 12px 36px rgba(0, 191, 63, 0.12) !important;
transform: translateY(-2px);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.app-ov .dashboard-view .widget[data-ov-clickable="1"]:focus-visible {
outline: 3px solid #00bf3f !important;
outline-offset: 2px;
}
/* --- P1: ChangePassword strength meter + match hint --- */
.app-ov .change-password-page .ov-pwd-meter {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
}
.app-ov .change-password-page .ov-pwd-meter-bars {
display: flex;
gap: 4px;
height: 4px;
}
.app-ov .change-password-page .ov-pwd-meter-bar {
flex: 1;
background: #e5e7eb;
border-radius: 2px;
transition: background 0.18s ease;
}
.app-ov .change-password-page .ov-pwd-meter[data-score="1"] .ov-pwd-meter-bar:nth-child(-n+1),
.app-ov .change-password-page .ov-pwd-meter[data-score="2"] .ov-pwd-meter-bar:nth-child(-n+2),
.app-ov .change-password-page .ov-pwd-meter[data-score="3"] .ov-pwd-meter-bar:nth-child(-n+3),
.app-ov .change-password-page .ov-pwd-meter[data-score="4"] .ov-pwd-meter-bar:nth-child(-n+4) {
background: var(--ov-pwd-color, #00bf3f);
}
.app-ov .change-password-page .ov-pwd-meter-label {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
color: #6f737a;
display: flex;
justify-content: space-between;
}
.app-ov .change-password-page .ov-pwd-meter-label strong {
color: var(--ov-pwd-color, #030813);
}
.app-ov .change-password-page .ov-match-hint {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
margin-top: 6px;
}
.app-ov .change-password-page .ov-match-hint[data-state="ok"] { color: #00bf3f; }
.app-ov .change-password-page .ov-match-hint[data-state="no"] { color: #db2b04; }
/* ============================================================
P1 — Top bar (user widget + dropdown)
============================================================ */
.app-ov .main-content > .ov-topbar {
position: sticky;
top: 0;
left: 0;
right: 0;
height: 64px;
background: #ffffff;
border-bottom: 1px solid #E8EAEE;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 32px;
z-index: 50;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
.app-ov .ov-topbar-user {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 6px 14px 6px 6px;
border-radius: 999px;
background: #f9fbfc;
border: 1px solid #E8EAEE;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
/* Если имени нет — пилюля сжимается под аватар + chevron */
.app-ov .ov-topbar-user:not(:has(.ov-topbar-name)) {
padding: 6px 10px 6px 6px;
gap: 8px;
}
.app-ov .ov-topbar-user:hover {
background: #ffffff;
border-color: #d0d3d8;
}
.app-ov .ov-topbar-user[aria-expanded="true"] {
background: #ffffff;
border-color: #00bf3f;
}
.app-ov .ov-topbar-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #00BF3F, #06AC3E);
color: #ffffff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
flex-shrink: 0;
overflow: hidden;
}
.app-ov .ov-topbar-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.app-ov .ov-topbar-name {
font-size: 14px;
font-weight: 600;
color: #030813;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-ov .ov-topbar-chevron {
width: 16px;
height: 16px;
color: #6f737a;
transition: transform 0.2s;
flex-shrink: 0;
}
.app-ov .ov-topbar-user[aria-expanded="true"] .ov-topbar-chevron {
transform: rotate(180deg);
}
.app-ov .ov-topbar-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
background: #ffffff;
border: 1px solid #E8EAEE;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(3, 8, 19, 0.12), 0 2px 6px rgba(3, 8, 19, 0.04);
padding: 8px;
display: none;
z-index: 100;
}
.app-ov .ov-topbar-user[aria-expanded="true"] .ov-topbar-menu {
display: block;
}
.app-ov .ov-topbar-menu-header {
padding: 10px 12px 12px;
border-bottom: 1px solid #f1f3f5;
margin-bottom: 6px;
}
.app-ov .ov-topbar-menu-name {
font-size: 14px;
font-weight: 700;
color: #030813;
margin: 0;
}
.app-ov .ov-topbar-menu-email {
font-size: 12px;
color: #6f737a;
margin: 2px 0 0;
word-break: break-all;
}
.app-ov .ov-topbar-menu-role {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
border-radius: 999px;
background: #f0fdf4;
color: #06ac3e;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.app-ov .ov-topbar-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-weight: 500;
color: #030813;
text-decoration: none;
background: transparent;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background 0.12s;
}
.app-ov .ov-topbar-menu-item:hover {
background: #f4f6f9;
}
.app-ov .ov-topbar-menu-item.danger {
color: #d81a1a;
}
.app-ov .ov-topbar-menu-item.danger:hover {
background: #fef2f2;
}
.app-ov .ov-topbar-menu-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.app-ov .ov-topbar-menu-divider {
height: 1px;
background: #f1f3f5;
margin: 6px -8px;
}
@media (max-width: 768px) {
/* На мобильных уже есть .mobile-header — наш не нужен */
.app-ov .main-content > .ov-topbar {
display: none !important;
}
}
/* ============================================================
P2 — quality-of-life
============================================================ */
/* --- P2: max-width content на больших экранах --- */
.app-ov .main-content > .profile-view,
.app-ov .main-content > .dashboard-view,
.app-ov .main-content > .faq-view,
.app-ov .main-content > .contracts-view,
.app-ov .main-content > .messages-view,
.app-ov .main-content > .favorites-view,
.app-ov .main-content > .payments-view,
.app-ov .main-content > .appointment-page,
.app-ov .main-content > .documents-view,
.app-ov .main-content > .not-found {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
/* --- P2: универсальные breadcrumbs --- */
.app-ov .ov-breadcrumbs {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 0 8px;
margin: 0 0 8px;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #6f737a;
font-weight: 500;
}
.app-ov .ov-breadcrumbs a {
color: #6f737a;
text-decoration: none;
transition: color 0.15s;
}
.app-ov .ov-breadcrumbs a:hover {
color: #00bf3f;
text-decoration: underline;
text-underline-offset: 3px;
}
.app-ov .ov-breadcrumbs-sep {
color: #c4c8cf;
}
.app-ov .ov-breadcrumbs-current {
color: #030813;
font-weight: 600;
}
[data-theme="dark"] .app-ov .ov-breadcrumbs-current {
color: #f1f5f9 !important;
}
[data-theme="dark"] .app-ov .ov-breadcrumbs a {
color: #94a3b8 !important;
}
[data-theme="dark"] .app-ov .ov-breadcrumbs a:hover {
color: #00BF3F !important;
}
[data-theme="dark"] .app-ov .ov-breadcrumbs-sep {
color: #475569 !important;
}
/* --- P2: sidebar badge на пунктах меню --- */
.app-ov .sidebar .nav-item .ov-nav-badge {
margin-left: auto;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: #00bf3f;
color: #ffffff;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-ov .sidebar.collapsed .nav-item .ov-nav-badge {
position: absolute;
top: 4px;
right: 4px;
margin: 0;
min-width: 18px;
height: 18px;
padding: 0 4px;
font-size: 10px;
}
/* --- P2: Profile аватар-инициалы вместо иконки картинки --- */
.app-ov .profile-view .avatar-placeholder .ov-avatar-initials {
width: 96px;
height: 96px;
border-radius: 50%;
background: linear-gradient(135deg, #00BF3F, #06AC3E);
color: #ffffff;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 36px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 1px;
margin-bottom: 8px;
}
/* --- P2: welcome banner на Dashboard --- */
.app-ov .dashboard-view .ov-welcome {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px 28px;
margin: 0 0 24px;
background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%, #f0fdf4 100%);
border: 1px solid #d1fae5;
border-radius: 16px; /* UX M5: единый радиус карточек 16px (был 20px) */
position: relative;
overflow: hidden;
}
.app-ov .dashboard-view .ov-welcome::after {
content: "👋";
position: absolute;
top: 14px;
right: 64px;
font-size: 32px;
opacity: 0.6;
pointer-events: none;
}
.app-ov .dashboard-view .ov-welcome-icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, #00BF3F, #06AC3E);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex-shrink: 0;
}
.app-ov .dashboard-view .ov-welcome-body {
flex: 1;
min-width: 0;
}
.app-ov .dashboard-view .ov-welcome-title {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 20px;
font-weight: 700;
color: #030813;
margin: 0 0 6px;
}
.app-ov .dashboard-view .ov-welcome-text {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
color: #4a5058;
line-height: 1.55;
margin: 0;
}
.app-ov .dashboard-view .ov-welcome-close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.85);
border: 1px solid #d1fae5;
color: #4a5058;
cursor: pointer;
font-size: 22px;
line-height: 1;
padding: 0;
border-radius: 50%;
z-index: 3;
transition: background 0.15s, color 0.15s, transform 0.15s;
}
.app-ov .dashboard-view .ov-welcome-close:hover {
background: #ffffff;
color: #00bf3f;
border-color: #00bf3f;
transform: scale(1.05);
}
/* --- P2: inline validation error для Profile --- */
.app-ov .profile-view .ov-inline-error {
margin-top: 6px;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #db2b04;
display: flex;
align-items: center;
gap: 6px;
}
.app-ov .profile-view .ov-inline-error::before {
content: "⚠";
}
/* --- P2: FAQ — иконки категорий --- */
.app-ov .faq-view .faq-category .ov-cat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: #f0fdf4;
color: #00bf3f;
margin-right: 12px;
flex-shrink: 0;
}
.app-ov .faq-view .faq-category .ov-cat-icon svg {
width: 18px;
height: 18px;
}
.app-ov .faq-view .faq-category .category-header {
align-items: center;
}
.app-ov .faq-view .faq-category .category-header > .ov-cat-titlewrap {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
/* ============================================================
P2 — mini-stats + P3 dedupe
============================================================ */
/* --- P2: mini-stats на Dashboard --- */
.app-ov .dashboard-view .ov-ministats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 0 0 24px;
}
@media (max-width: 1024px) {
.app-ov .dashboard-view .ov-ministats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.app-ov .dashboard-view .ov-ministats {
grid-template-columns: 1fr;
}
}
.app-ov .dashboard-view .ov-stat {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: #ffffff;
border-radius: 16px;
text-decoration: none;
color: inherit;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.2s, transform 0.15s;
cursor: pointer;
}
.app-ov .dashboard-view .ov-stat:hover {
box-shadow: 0 8px 24px rgba(0, 191, 63, 0.10);
transform: translateY(-2px);
}
.app-ov .dashboard-view .ov-stat-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-ov .dashboard-view .ov-stat-icon.color-green {
background: #f0fdf4; color: #00bf3f;
}
.app-ov .dashboard-view .ov-stat-icon.color-blue {
background: #eff6ff; color: #2563eb;
}
.app-ov .dashboard-view .ov-stat-icon.color-amber {
background: #fffbeb; color: #d97706;
}
.app-ov .dashboard-view .ov-stat-icon.color-purple {
background: #f5f3ff; color: #7c3aed;
}
.app-ov .dashboard-view .ov-stat-icon svg {
width: 22px; height: 22px;
}
.app-ov .dashboard-view .ov-stat-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.app-ov .dashboard-view .ov-stat-value {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 22px;
font-weight: 700;
color: #030813;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.app-ov .dashboard-view .ov-stat-value.muted {
color: #a3a5aa;
}
.app-ov .dashboard-view .ov-stat-label {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 500;
color: #6f737a;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-ov .dashboard-view .ov-stat-skeleton {
width: 32px;
height: 22px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
background-size: 800px 100%;
border-radius: 4px;
animation: ov-shimmer 1.5s ease-in-out infinite;
}
@keyframes ov-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
/* --- P3: скрытие дублирующейся "Выйти из аккаунта" в Profile --- */
.app-ov .profile-view .logout-btn {
display: none !important;
}
/* --- P2: Sessions list секция в Profile --- */
.app-ov .profile-view .ov-sessions {
margin-top: 32px;
background: #fff;
border-radius: 16px;
padding: 24px;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
.app-ov .profile-view .ov-sessions-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
gap: 16px;
flex-wrap: wrap;
}
.app-ov .profile-view .ov-sessions-title {
font-size: 18px;
font-weight: 700;
color: #030813;
margin: 0;
}
/* Отчёт #4: сворачивание секции «Активные сессии» */
.app-ov .profile-view .ov-sessions-toggle {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
color: inherit;
text-align: left;
flex: 1 1 auto;
}
.app-ov .profile-view .ov-sessions-count { color: #9ca3af; font-weight: 600; }
.app-ov .profile-view .ov-sessions-chevron { display: inline-flex; color: #6f737a; transition: transform .2s; }
.app-ov .profile-view .ov-sessions:not(.ov-sessions--collapsed) .ov-sessions-chevron { transform: rotate(180deg); }
.app-ov .profile-view .ov-sessions--collapsed .ov-sessions-body { display: none; }
.app-ov .profile-view .ov-sessions--collapsed .ov-sessions-revokeall { display: none; }
[data-theme="dark"] .app-ov .profile-view .ov-sessions-count { color: #64748b; }
[data-theme="dark"] .app-ov .profile-view .ov-sessions-chevron { color: #94a3b8; }
.app-ov .profile-view .ov-sessions-desc {
font-size: 13px;
color: #6f737a;
margin: 0 0 16px;
line-height: 1.5;
}
.app-ov .profile-view .ov-sessions-revokeall {
background: transparent;
border: 1px solid #fecaca;
color: #b91c1c;
border-radius: 10px;
padding: 8px 14px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.app-ov .profile-view .ov-sessions-revokeall:hover {
background: #fef2f2;
}
.app-ov .profile-view .ov-sessions-list {
display: flex;
flex-direction: column;
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
.app-ov .profile-view .ov-session {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: #f9fbfc;
border: 1px solid #E8EAEE;
border-radius: 12px;
}
.app-ov .profile-view .ov-session.is-current {
background: #f0fdf4;
border-color: #bbf7d0;
}
.app-ov .profile-view .ov-session-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #fff;
border: 1px solid #E8EAEE;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #6f737a;
}
.app-ov .profile-view .ov-session.is-current .ov-session-icon {
color: #00bf3f;
border-color: #bbf7d0;
}
.app-ov .profile-view .ov-session-icon svg {
width: 20px;
height: 20px;
}
.app-ov .profile-view .ov-session-body {
flex: 1;
min-width: 0;
}
.app-ov .profile-view .ov-session-line1 {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #030813;
}
.app-ov .profile-view .ov-session-tag {
font-size: 10px;
padding: 2px 8px;
border-radius: 999px;
background: #00bf3f;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
}
.app-ov .profile-view .ov-session-line2 {
font-size: 12px;
color: #6f737a;
margin-top: 2px;
}
.app-ov .profile-view .ov-session-revoke {
background: transparent;
border: none;
color: #6f737a;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
}
.app-ov .profile-view .ov-session-revoke:hover {
background: #fef2f2;
color: #b91c1c;
}
.app-ov .profile-view .ov-sessions-empty {
padding: 24px;
text-align: center;
color: #6f737a;
font-size: 14px;
}
.app-ov .profile-view .ov-sessions-loading {
display: flex;
flex-direction: column;
gap: 12px;
}
.app-ov .profile-view .ov-sessions-loading .ov-session {
pointer-events: none;
opacity: 0.6;
}
/* --- P3: Push notifications section in Profile --- */
.app-ov .profile-view .ov-push {
margin-top: 24px;
background: #fff;
border-radius: 16px;
padding: 24px;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
.app-ov .profile-view .ov-push-row {
display: flex;
align-items: flex-start;
gap: 16px;
}
.app-ov .profile-view .ov-push-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: #f0fdf4;
color: #00bf3f;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.app-ov .profile-view .ov-push-icon svg { width: 22px; height: 22px; }
.app-ov .profile-view .ov-push-body {
flex: 1; min-width: 0;
}
.app-ov .profile-view .ov-push-title {
font-size: 18px; /* Отчёт #3: было 16 — выравниваем под .section-title (18px) */
font-weight: 700; color: #030813; margin: 0 0 4px;
}
.app-ov .profile-view .ov-push-desc {
font-size: 13px; color: #6f737a; margin: 0 0 12px; line-height: 1.5;
}
.app-ov .profile-view .ov-push-action {
height: 40px;
padding: 0 18px;
background: linear-gradient(135deg, #00BF3F, #06AC3E);
color: #fff;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s;
}
.app-ov .profile-view .ov-push-action:hover { opacity: 0.9; }
.app-ov .profile-view .ov-push-action.is-on {
background: transparent;
color: #b91c1c;
border: 1px solid #fecaca;
}
.app-ov .profile-view .ov-push-action.is-on:hover { background: #fef2f2; }
.app-ov .profile-view .ov-push-action:disabled { opacity: 0.5; cursor: not-allowed; }
.app-ov .profile-view .ov-push-status {
font-size: 12px;
color: #6f737a;
margin-top: 8px;
}
.app-ov .profile-view .ov-push-status[data-ok="1"] { color: #00bf3f; }
.app-ov .profile-view .ov-push-status[data-err="1"] { color: #b91c1c; }
/* ============================================================
P2 — Custom date-picker (overlay для input[type="date"])
============================================================ */
.app-ov .ov-datepicker-wrap {
position: relative;
}
.app-ov .ov-datepicker-input {
width: 100%;
height: 48px;
padding: 0 44px 0 14px;
border: 1px solid #DDDDDD;
border-radius: 10px;
background: #fff;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 15px;
color: #030813;
cursor: pointer;
text-align: left;
position: relative;
transition: border-color 0.15s, box-shadow 0.15s;
}
.app-ov .ov-datepicker-input:hover,
.app-ov .ov-datepicker-input:focus-visible {
border-color: #00bf3f;
}
.app-ov .ov-datepicker-input.is-empty {
color: #a3a5aa;
}
.app-ov .ov-datepicker-icon {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: #6f737a;
pointer-events: none;
}
/* Popup */
.app-ov .ov-datepicker-popup {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 200;
width: 320px;
background: #fff;
border: 1px solid #E8EAEE;
border-radius: 14px;
box-shadow: 0 16px 40px rgba(3, 8, 19, 0.14), 0 4px 12px rgba(3, 8, 19, 0.06);
padding: 14px;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
user-select: none;
}
.app-ov .ov-datepicker-popup[hidden] { display: none; }
.app-ov .ov-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
gap: 8px;
}
.app-ov .ov-datepicker-nav {
width: 32px;
height: 32px;
border-radius: 8px;
background: #f4f6f9;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #030813;
}
.app-ov .ov-datepicker-nav:hover { background: #e8eaee; }
.app-ov .ov-datepicker-title {
font-size: 15px;
font-weight: 700;
color: #030813;
text-transform: capitalize;
flex: 1;
text-align: center;
cursor: pointer;
}
.app-ov .ov-datepicker-title:hover { color: #00bf3f; }
.app-ov .ov-datepicker-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.app-ov .ov-datepicker-dow {
text-align: center;
font-size: 11px;
font-weight: 600;
color: #a3a5aa;
text-transform: uppercase;
padding: 4px 0;
}
.app-ov .ov-datepicker-cell {
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
color: #030813;
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.app-ov .ov-datepicker-cell:hover:not(:disabled) {
background: #f0fdf4;
}
.app-ov .ov-datepicker-cell.is-other-month { color: #d0d3d8; }
.app-ov .ov-datepicker-cell.is-today {
font-weight: 700;
color: #00bf3f;
outline: 1px dashed #00bf3f;
outline-offset: -2px;
}
.app-ov .ov-datepicker-cell.is-selected {
background: linear-gradient(135deg, #00BF3F, #06AC3E) !important;
color: #fff !important;
font-weight: 700;
outline: none;
}
.app-ov .ov-datepicker-cell:disabled {
color: #e5e7eb;
cursor: not-allowed;
background: transparent;
}
.app-ov .ov-datepicker-footer {
display: flex;
justify-content: space-between;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f1f3f5;
}
.app-ov .ov-datepicker-today,
.app-ov .ov-datepicker-clear {
background: transparent;
border: none;
color: #00bf3f;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.app-ov .ov-datepicker-today:hover,
.app-ov .ov-datepicker-clear:hover { background: #f0fdf4; }
.app-ov .ov-datepicker-clear { color: #6f737a; }
.app-ov .ov-datepicker-clear:hover { color: #db2b04; background: #fef2f2; }
/* Year picker mode */
.app-ov .ov-datepicker-years {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
max-height: 252px;
overflow-y: auto;
}
.app-ov .ov-datepicker-year {
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: #030813;
cursor: pointer;
}
.app-ov .ov-datepicker-year:hover { background: #f0fdf4; color: #00bf3f; }
.app-ov .ov-datepicker-year.is-current {
background: #00bf3f; color: #fff;
}
/* ============================================================
P3 — Dark mode (применяется через [data-theme="dark"] на )
Vue scoped CSS имеет высокую specificity → используем !important.
============================================================ */
/* Toggle в топбаре */
.app-ov .ov-theme-toggle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #E8EAEE;
background: #f9fbfc;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #6f737a;
transition: background 0.15s, color 0.15s, border-color 0.15s;
margin-right: 12px;
flex-shrink: 0;
}
.app-ov .ov-theme-toggle:hover {
background: #fff;
border-color: #d0d3d8;
color: #030813;
}
.app-ov .ov-theme-toggle svg {
width: 18px;
height: 18px;
}
.app-ov .ov-theme-toggle .ov-icon-moon { display: block; }
.app-ov .ov-theme-toggle .ov-icon-sun { display: none; }
[data-theme="dark"] .app-ov .ov-theme-toggle {
background: #1e293b;
border-color: #334155;
color: #fbbf24;
}
[data-theme="dark"] .app-ov .ov-theme-toggle:hover {
background: #334155;
color: #fde68a;
}
[data-theme="dark"] .app-ov .ov-theme-toggle .ov-icon-moon { display: none; }
[data-theme="dark"] .app-ov .ov-theme-toggle .ov-icon-sun { display: block; }
/* Base surfaces */
[data-theme="dark"] body {
background: #0b1220 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .my-layout .main-content {
background: #0b1220 !important;
}
[data-theme="dark"] .sidebar {
background: linear-gradient(180deg, #0f172a, #0b1220) !important;
border-right: 1px solid #1e293b;
}
[data-theme="dark"] .main-content > .ov-topbar {
background: #0f172a !important;
border-bottom-color: #1e293b !important;
}
/* Cards & surfaces */
[data-theme="dark"] .widget,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .filters-card,
[data-theme="dark"] .faq-category,
[data-theme="dark"] .security-card,
[data-theme="dark"] .ov-stat,
[data-theme="dark"] .ov-sessions,
[data-theme="dark"] .ov-push,
[data-theme="dark"] .ov-404-helper,
[data-theme="dark"] .ov-topbar-menu,
[data-theme="dark"] .ov-cmdk-modal,
[data-theme="dark"] .ov-datepicker-popup {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
/* Text */
[data-theme="dark"] .page-title,
[data-theme="dark"] .widget-title,
[data-theme="dark"] .auth-title,
[data-theme="dark"] .nav-item .nav-label,
[data-theme="dark"] .nav-item.router-link-active .nav-label,
[data-theme="dark"] .nav-item.active .nav-label,
[data-theme="dark"] .ov-topbar-name,
[data-theme="dark"] .ov-topbar-menu-name,
[data-theme="dark"] .ov-stat-value,
[data-theme="dark"] .ov-welcome-title,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .field-label,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .ov-session-line1,
[data-theme="dark"] .ov-sessions-title,
[data-theme="dark"] .ov-push-title,
[data-theme="dark"] .ov-cmdk-item-label,
[data-theme="dark"] .ov-datepicker-title,
[data-theme="dark"] .ov-datepicker-cell {
color: #f1f5f9 !important;
}
[data-theme="dark"] .auth-subtitle,
[data-theme="dark"] .widget-link,
[data-theme="dark"] .empty-state p,
[data-theme="dark"] .order-plot,
[data-theme="dark"] .amount-date,
[data-theme="dark"] .nav-item .nav-label,
[data-theme="dark"] .ov-stat-label,
[data-theme="dark"] .ov-session-line2,
[data-theme="dark"] .ov-sessions-desc,
[data-theme="dark"] .ov-push-desc,
[data-theme="dark"] .ov-welcome-text,
[data-theme="dark"] .ov-breadcrumbs,
[data-theme="dark"] .ov-cmdk-item-desc,
[data-theme="dark"] .ov-field-hint,
[data-theme="dark"] .ov-datepicker-dow {
color: #94a3b8 !important;
}
/* Sidebar nav items (default white background → dark) */
[data-theme="dark"] .sidebar .nav-item {
background: transparent !important;
}
[data-theme="dark"] .sidebar .nav-item:hover {
background: #1e293b !important;
}
[data-theme="dark"] .sidebar .nav-item.router-link-active,
[data-theme="dark"] .sidebar .nav-item.active {
background: rgba(0, 191, 63, 0.10) !important;
}
[data-theme="dark"] .sidebar .nav-item .nav-label {
color: #94a3b8 !important;
}
[data-theme="dark"] .sidebar .nav-item:hover .nav-label,
[data-theme="dark"] .sidebar .nav-item.router-link-active .nav-label,
[data-theme="dark"] .sidebar .nav-item.active .nav-label {
color: #f1f5f9 !important;
}
/* Иконки в sidebar — поярче для контраста на dark */
[data-theme="dark"] .sidebar .nav-item .nav-icon {
color: #cbd5e1 !important;
}
[data-theme="dark"] .sidebar .nav-item:hover .nav-icon,
[data-theme="dark"] .sidebar .nav-item.router-link-active .nav-icon,
[data-theme="dark"] .sidebar .nav-item.active .nav-icon {
color: #ffffff !important;
}
/* SVG icons внутри nav-item — фильтр для приведения к светлому */
[data-theme="dark"] .sidebar .nav-item .icon {
filter: brightness(0) invert(1) opacity(0.65) !important;
}
[data-theme="dark"] .sidebar .nav-item:hover .icon,
[data-theme="dark"] .sidebar .nav-item.router-link-active .icon,
[data-theme="dark"] .sidebar .nav-item.active .icon {
filter: brightness(0) invert(1) !important;
}
/* Footer-кнопки (Оплата ЖКУ / Запись / Выход) — иконки тоже поярче */
[data-theme="dark"] .sidebar .footer-btn .btn-icon,
[data-theme="dark"] .sidebar .footer-btn svg {
opacity: 0.9;
}
[data-theme="dark"] .sidebar .footer-btn.btn-outline svg,
[data-theme="dark"] .sidebar .footer-btn.btn-outline .btn-icon {
color: #00BF3F !important;
opacity: 1;
}
[data-theme="dark"] .sidebar .footer-btn.btn-logout svg,
[data-theme="dark"] .sidebar .footer-btn.btn-logout .btn-icon {
color: #94a3b8 !important;
opacity: 1;
}
/* Sidebar bottom footer buttons */
[data-theme="dark"] .sidebar .footer-btn.btn-outline {
background: #1e293b !important;
color: #00BF3F !important;
border: 1px solid #16a34a40 !important;
}
[data-theme="dark"] .sidebar .footer-btn.btn-outline:hover {
background: #334155 !important;
}
[data-theme="dark"] .sidebar .footer-btn.btn-logout {
color: #94a3b8 !important;
}
[data-theme="dark"] .sidebar .footer-btn.btn-logout:hover {
background: #3a1212 !important;
color: #f87171 !important;
}
/* Sidebar admin section label */
[data-theme="dark"] .sidebar .divider-label {
color: #64748b !important;
}
/* Sidebar collapse toggle */
[data-theme="dark"] .sidebar-toggle {
background: #1e293b !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
[data-theme="dark"] .sidebar-toggle:hover {
background: #334155 !important;
color: #f1f5f9 !important;
}
/* Logo: smaller filter so green stays visible but bg blends */
[data-theme="dark"] .sidebar .logo img.logo-svg {
filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 191, 63, 0.2));
}
/* Inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .search-input,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .input-field,
[data-theme="dark"] .ov-datepicker-input {
background: #0f172a !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: #64748b !important;
}
/* Borders & dividers */
[data-theme="dark"] .ov-topbar-menu-divider,
[data-theme="dark"] .auth-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .ov-sessions-header,
[data-theme="dark"] .ov-cmdk-input-wrap,
[data-theme="dark"] .ov-cmdk-footer,
[data-theme="dark"] .ov-datepicker-footer {
border-color: #334155 !important;
}
/* Topbar avatar pill */
[data-theme="dark"] .ov-topbar-user {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme="dark"] .ov-topbar-user:hover {
background: #1e293b !important;
}
[data-theme="dark"] .ov-topbar-menu-item {
color: #e2e8f0 !important;
}
[data-theme="dark"] .ov-topbar-menu-item:hover {
background: #334155 !important;
}
/* Active item: bright green left pill стоит оставить — это акцент */
[data-theme="dark"] .app-ov .sidebar .nav-item.router-link-active::before,
[data-theme="dark"] .app-ov .sidebar .nav-item.active::before {
background: linear-gradient(180deg, #00BF3F, #00bf3f) !important;
box-shadow: 0 0 8px rgba(0, 191, 63, 0.5);
}
/* Mini-stats icon backgrounds */
[data-theme="dark"] .ov-stat-icon {
background: #0f172a !important;
}
/* Welcome banner */
[data-theme="dark"] .dashboard-view .ov-welcome {
background: linear-gradient(135deg, #0f3324, #1e293b 60%, #0f3324) !important;
border-color: #16a34a40 !important;
}
/* Sessions / chips */
[data-theme="dark"] .ov-session {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme="dark"] .ov-session.is-current {
background: #0f3324 !important;
border-color: #16a34a !important;
}
[data-theme="dark"] .ov-session-icon {
background: #1e293b !important;
border-color: #334155 !important;
}
/* 404 styling */
[data-theme="dark"] .not-found h1 {
color: #00BF3F !important;
}
[data-theme="dark"] .not-found p {
color: #94a3b8 !important;
}
/* Cmd+K */
[data-theme="dark"] .ov-cmdk-input { color: #e2e8f0 !important; }
[data-theme="dark"] .ov-cmdk-kbd {
background: #0f172a !important;
color: #94a3b8 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .ov-cmdk-item:hover,
[data-theme="dark"] .ov-cmdk-item.active {
background: #0f3324 !important;
color: #f1f5f9 !important;
}
[data-theme="dark"] .ov-cmdk-item-icon {
background: #1e293b !important;
}
/* Datepicker */
[data-theme="dark"] .ov-datepicker-nav {
background: #0f172a !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .ov-datepicker-nav:hover { background: #334155 !important; }
[data-theme="dark"] .ov-datepicker-cell:hover:not(:disabled) {
background: #0f3324 !important;
}
[data-theme="dark"] .ov-datepicker-cell.is-other-month { color: #475569 !important; }
[data-theme="dark"] .ov-datepicker-cell:disabled { color: #1e293b !important; }
[data-theme="dark"] .ov-datepicker-year { color: #e2e8f0 !important; }
[data-theme="dark"] .ov-datepicker-year:hover { background: #0f3324 !important; }
/* Hover states for table-like rows */
[data-theme="dark"] .order-card:hover,
[data-theme="dark"] .message-item:hover {
background-color: #0f172a !important;
}
[data-theme="dark"] .order-card,
[data-theme="dark"] .message-item {
border-bottom-color: #334155 !important;
}
/* Empty states */
[data-theme="dark"] .empty-state {
color: #64748b !important;
}
/* Office overlay (Appointment) */
[data-theme="dark"] .office-overlay-card,
[data-theme="dark"] .office-overlay-room-card {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .office-overlay-card.active,
[data-theme="dark"] .office-overlay-room-card.active {
border-color: #00BF3F !important;
background: #0f3324 !important;
}
/* Skeletons darker */
[data-theme="dark"] .skeleton,
[data-theme="dark"] .ov-stat-skeleton,
[data-theme="dark"] .ov-skeleton-line,
[data-theme="dark"] .ov-skeleton-circle,
[data-theme="dark"] .ov-skeleton-square {
background: linear-gradient(90deg, #1e293b 25%, #334155, #1e293b 75%) !important;
background-size: 800px 100% !important;
}
/* --- Дополнительный dark-набор (после первой проверки) --- */
/* Generic фоны white → dark surface */
[data-theme="dark"] .users-view,
[data-theme="dark"] .users-table,
[data-theme="dark"] .users-card,
[data-theme="dark"] .contracts-view .formular-card,
[data-theme="dark"] .contracts-view .contract-cta,
[data-theme="dark"] .contracts-view .empty-state,
[data-theme="dark"] .contracts-view .empty-plate,
[data-theme="dark"] .contracts-view > div[class*="card"],
[data-theme="dark"] .contracts-view > div[class*="plate"],
[data-theme="dark"] .favorites-view .empty-state,
[data-theme="dark"] .favorites-view > div[class*="card"],
[data-theme="dark"] .faq-item,
[data-theme="dark"] .no-results,
[data-theme="dark"] .documents-view .empty-state,
[data-theme="dark"] .documents-view > div[class*="card"],
[data-theme="dark"] .payments-view > div[class*="card"],
[data-theme="dark"] .messages-view,
[data-theme="dark"] .chats-panel,
[data-theme="dark"] .chat-content,
[data-theme="dark"] .chat-window,
[data-theme="dark"] .chat-header-bar,
[data-theme="dark"] .message-input-bar,
[data-theme="dark"] .message-bubble:not(.outgoing .message-bubble):not(.message-bubble--system-event),
[data-theme="dark"] .message-file-card,
[data-theme="dark"] .message-pdf-card,
[data-theme="dark"] .messages-empty,
[data-theme="dark"] .empty-chat-state,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .ask-modal__card,
[data-theme="dark"] .appointment-modal,
[data-theme="dark"] .staff-confirm-dialog {
background: #1e293b !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
/* Table headers/rows hover в админ-таблицах */
[data-theme="dark"] .users-view table,
[data-theme="dark"] .users-view tbody tr,
[data-theme="dark"] .users-view thead th,
[data-theme="dark"] .users-view td {
background: transparent !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .users-view tbody tr:hover {
background: #0f172a !important;
}
[data-theme="dark"] .users-view thead th {
color: #94a3b8 !important;
}
/* FAQ — белые карточки вопросов внутри открытой категории */
[data-theme="dark"] .faq-category.category-open {
background: #0f172a !important;
}
[data-theme="dark"] .faq-item {
background: #1e293b !important;
}
[data-theme="dark"] .item-question {
color: #f1f5f9 !important;
}
[data-theme="dark"] .item-answer p {
color: #94a3b8 !important;
}
/* Favorites empty state — только корневая карточка получает border */
[data-theme="dark"] .favorites-view > .empty-state,
[data-theme="dark"] .favorites-view > .favorites-empty,
[data-theme="dark"] .favorites-view > [class*="empty"]:not([class*="__"]) {
background: #1e293b !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
/* Тексты — только цвет, явно убираем border */
[data-theme="dark"] .favorites-view [class*="empty"] [class*="title"] {
color: #f1f5f9 !important;
background: transparent !important;
border: none !important;
}
[data-theme="dark"] .favorites-view [class*="empty"] [class*="subtitle"],
[data-theme="dark"] .favorites-view [class*="empty"] [class*="text"] {
color: #94a3b8 !important;
background: transparent !important;
border: none !important;
}
/* BEM-вложенные элементы (empty-state__title и т.п.) — никаких рамок и фона */
[data-theme="dark"] .favorites-view [class*="empty-state__"],
[data-theme="dark"] .favorites-view [class*="empty__"],
[data-theme="dark"] .favorites-view .empty-state > * {
background: transparent !important;
border: none !important;
}
/* FAQ chevron toggle-btn (круг справа) — белый в dark, делаем тёмным */
[data-theme="dark"] .faq-view .toggle-btn {
background: #0f172a !important;
}
[data-theme="dark"] .faq-view .toggle-btn:hover {
background: #334155 !important;
}
[data-theme="dark"] .faq-view .toggle-btn svg {
color: #cbd5e1 !important;
}
[data-theme="dark"] .faq-view .toggle-btn-small {
background: transparent !important;
}
[data-theme="dark"] .faq-view .toggle-btn-small svg {
color: #cbd5e1 !important;
}
/* Contracts — формуляр и плашка */
[data-theme="dark"] .contracts-view .formular-card,
[data-theme="dark"] .contracts-view [class*="card"],
[data-theme="dark"] .contracts-view [class*="plate"],
[data-theme="dark"] .contracts-view [class*="empty"] {
background: #1e293b !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .contracts-view h1,
[data-theme="dark"] .contracts-view h2,
[data-theme="dark"] .contracts-view h3 {
color: #f1f5f9 !important;
}
/* Chat / Messages — детально */
[data-theme="dark"] .chat-name,
[data-theme="dark"] .message-name,
[data-theme="dark"] .chat-contact-name,
[data-theme="dark"] .chat-header-kicker__service {
color: #f1f5f9 !important;
}
[data-theme="dark"] .chat-preview,
[data-theme="dark"] .chat-time,
[data-theme="dark"] .message-time,
[data-theme="dark"] .message-preview {
color: #94a3b8 !important;
}
/* Chat-item default state — был white фон от Vue */
[data-theme="dark"] .main-content .chat-item {
background: transparent !important;
border: none !important;
color: #e2e8f0 !important;
box-shadow: none !important;
}
/* Вложенные элементы chat-item — без рамок и фонов */
[data-theme="dark"] .main-content .chat-item > *,
[data-theme="dark"] .main-content .chat-item > * > *,
[data-theme="dark"] .main-content .chat-item .message-content,
[data-theme="dark"] .main-content .chat-item [class*="-content"],
[data-theme="dark"] .main-content .chat-item [class*="-header"],
[data-theme="dark"] .main-content .chat-item [class*="-wrapper"] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
[data-theme="dark"] .main-content .chat-item:hover,
[data-theme="dark"] .main-content .chat-item.active {
background: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .main-content .chat-item .chat-name {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .chat-item .chat-preview {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .chat-item .chat-time {
color: #64748b !important;
}
/* Статус-плашка под именем "В работе" */
[data-theme="dark"] .main-content .chat-item .chat-status,
[data-theme="dark"] .main-content .chat-item [class*="-status"] {
color: #00BF3F !important;
}
[data-theme="dark"] .main-content .chat-item .chat-status-link,
[data-theme="dark"] .main-content .chat-item [class*="status-link"] {
color: #00BF3F !important;
}
/* Входящий message-bubble (не outgoing) */
[data-theme="dark"] .messages-list .message:not(.outgoing) .message-bubble {
background: #0f172a !important;
color: #e2e8f0 !important;
border: 1px solid #334155;
}
[data-theme="dark"] .messages-list .message.outgoing .message-bubble {
/* фирменный зелёный остаётся */
}
[data-theme="dark"] .message-text {
color: inherit !important;
}
[data-theme="dark"] .messages-list {
background: transparent !important;
}
[data-theme="dark"] .message-divider__label {
background: #1e293b !important;
color: #94a3b8 !important;
}
[data-theme="dark"] .message-input-bar textarea,
[data-theme="dark"] .message-input-bar input {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .quick-reply-btn {
background: linear-gradient(135deg, #00BF3F, #06AC3E) !important;
color: #fff !important;
}
/* Кнопки secondary в Vue (.btn-secondary, серый фон) */
[data-theme="dark"] button[class*="btn-secondary"],
[data-theme="dark"] .btn-cancel-profile,
[data-theme="dark"] .ask-btn {
background: #334155 !important;
color: #e2e8f0 !important;
border-color: #475569 !important;
}
[data-theme="dark"] button[class*="btn-secondary"]:hover,
[data-theme="dark"] .ask-btn:hover {
background: #475569 !important;
}
/* Search input в чате */
[data-theme="dark"] .chats-search,
[data-theme="dark"] .chats-search .search-input {
background: transparent !important;
}
[data-theme="dark"] .chats-search {
border-bottom-color: #334155 !important;
}
/* (Удалён слишком широкий [class*="-card"] — задевал title/subtitle, давал «полосы») */
/* Тексты внутри */
[data-theme="dark"] .main-content [class*="-title"]:not(.ov-stat-label):not(.ov-cmdk-item-label),
[data-theme="dark"] .main-content h1,
[data-theme="dark"] .main-content h2,
[data-theme="dark"] .main-content h3,
[data-theme="dark"] .main-content h4 {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content [class*="-subtitle"],
[data-theme="dark"] .main-content [class*="-desc"]:not(.ov-push-desc):not(.ov-sessions-desc),
[data-theme="dark"] .main-content [class*="-hint"] {
color: #94a3b8 !important;
}
/* Иконки в кружках (зелёные на светлом фоне → ярче на тёмном) */
[data-theme="dark"] .main-content [class*="empty"] [class*="icon"][class*="circle"],
[data-theme="dark"] .main-content [class*="empty"] [class*="icon"][class*="ring"],
[data-theme="dark"] .main-content [class*="empty"] [class*="hero"] {
background: rgba(0, 191, 63, 0.15) !important;
}
/* ============================================================
Dark mode — точечные high-specificity фиксы (после v3 проверки)
============================================================ */
/* FAQ — белые карточки вопросов в открытой категории */
[data-theme="dark"] .main-content .faq-view .faq-content .faq-category .category-content .faq-item,
[data-theme="dark"] .main-content .faq-view .faq-item {
background: #1e293b !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .main-content .faq-view .faq-item .item-question {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .faq-view .faq-item .item-answer p {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .faq-view .toggle-btn-small svg,
[data-theme="dark"] .main-content .faq-view .toggle-btn svg {
color: #e2e8f0 !important;
}
/* Chat: окно сообщений (правая панель) — фон БЫЛ светлый */
[data-theme="dark"] .main-content .messages-view,
[data-theme="dark"] .main-content .messages-container,
[data-theme="dark"] .main-content .chat-window,
[data-theme="dark"] .main-content .chat-content {
background: #0f172a !important;
}
[data-theme="dark"] .main-content .messages-list {
background: transparent !important;
}
/* Header диалога */
[data-theme="dark"] .main-content .chat-header-bar {
background: #1e293b !important;
border-bottom-color: #334155 !important;
}
/* Composer */
[data-theme="dark"] .main-content .message-input-bar {
background: #1e293b !important;
border-top: 1px solid #334155;
}
/* Список диалогов (левая панель) — отделяется от окна */
[data-theme="dark"] .main-content .chats-panel {
background: #0b1220 !important;
border-right-color: #1e293b !important;
}
/* Таблицы (Users / Bookings админ) — карточка-обёртка + видимые строки */
[data-theme="dark"] .main-content .users-view,
[data-theme="dark"] .main-content .bookings-view,
[data-theme="dark"] .main-content .users-table-card,
[data-theme="dark"] .main-content .bookings-table-card {
background: transparent !important;
}
[data-theme="dark"] .main-content .users-view table,
[data-theme="dark"] .main-content .bookings-view table,
[data-theme="dark"] .main-content [class*="users-"] table,
[data-theme="dark"] .main-content [class*="bookings-"] table {
background: #1e293b !important;
border-radius: 12px;
overflow: hidden;
}
[data-theme="dark"] .main-content .users-view tbody tr,
[data-theme="dark"] .main-content .bookings-view tbody tr {
background: transparent !important;
border-bottom: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .users-view tbody tr td,
[data-theme="dark"] .main-content .bookings-view tbody tr td,
[data-theme="dark"] .main-content .users-view thead th,
[data-theme="dark"] .main-content .bookings-view thead th {
color: #e2e8f0 !important;
background: transparent !important;
}
[data-theme="dark"] .main-content .users-view thead,
[data-theme="dark"] .main-content .bookings-view thead {
background: #0f172a !important;
}
[data-theme="dark"] .main-content .users-view thead th,
[data-theme="dark"] .main-content .bookings-view thead th {
color: #94a3b8 !important;
}
/* Поиск-строка над таблицей */
[data-theme="dark"] .main-content .users-view input[type="text"],
[data-theme="dark"] .main-content .users-view input[type="search"],
[data-theme="dark"] .main-content .users-view select,
[data-theme="dark"] .main-content .bookings-view input,
[data-theme="dark"] .main-content .bookings-view select {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
/* Favorites — empty-state не должна иметь полос внутри. Все вложенные
white-bg элементы (если есть) — прозрачные. */
[data-theme="dark"] .main-content .favorites-view .empty-state > *,
[data-theme="dark"] .main-content .favorites-view [class*="favorites-empty"] > *,
[data-theme="dark"] .main-content .favorites-view [class*="-empty__"] {
background: transparent !important;
}
/* Заголовок страницы Records "Записи в офис" — нечитаемый из-за прозрачных строк */
[data-theme="dark"] .main-content table tbody tr {
background: transparent !important;
}
[data-theme="dark"] .main-content table tbody tr:hover {
background: rgba(255, 255, 255, 0.03) !important;
}
/* Бейджи статусов — в админ-таблицах "Новая"/"Активен" остаются цветными,
но фон бейджа подгоняем под dark */
[data-theme="dark"] .main-content .status-badge,
[data-theme="dark"] .main-content [class*="badge-"] {
background-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .main-content .badge-completed { background: #475569 !important; }
[data-theme="dark"] .main-content .badge-new,
[data-theme="dark"] .main-content .badge-working {
background: rgba(33, 150, 243, 0.15) !important;
color: #60a5fa !important;
}
[data-theme="dark"] .main-content .badge-cancelled {
background: rgba(229, 57, 53, 0.15) !important;
color: #f87171 !important;
}
/* ============================================================
Dark mode — Appointment (Запись в офис)
============================================================ */
/* Time slots — белые пилюли (только сами button, не их вложенные span'ы) */
[data-theme="dark"] .main-content .appointment-page .slots-grid button,
[data-theme="dark"] .main-content .appointment-page button.office-overlay-slot,
[data-theme="dark"] .main-content .appointment-page button.slot-button {
background: #1e293b !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
/* Внутренние span'ы в slots — никаких рамок */
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot-time,
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot span,
[data-theme="dark"] .main-content .appointment-page .slots-grid button span {
border: none !important;
background: transparent !important;
color: #e2e8f0 !important;
-webkit-text-fill-color: #e2e8f0 !important;
}
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot.selected .office-overlay-slot-time,
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot--active .office-overlay-slot-time,
[data-theme="dark"] .main-content .appointment-page .slots-grid button.selected span,
[data-theme="dark"] .main-content .appointment-page .slots-grid button.active span {
color: #fff !important;
}
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot:disabled .office-overlay-slot-time,
[data-theme="dark"] .main-content .appointment-page .slots-grid button:disabled span {
color: #475569 !important;
}
[data-theme="dark"] .main-content .appointment-page .slots-grid button:hover:not(:disabled),
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot:hover:not(:disabled) {
background: #334155 !important;
border-color: #00BF3F !important;
}
[data-theme="dark"] .main-content .appointment-page .slots-grid button.selected,
[data-theme="dark"] .main-content .appointment-page .slots-grid button.active,
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot.selected,
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot--active {
background: linear-gradient(135deg, #00BF3F, #06AC3E) !important;
border-color: #00BF3F !important;
color: #fff !important;
}
[data-theme="dark"] .main-content .appointment-page .slots-grid button:disabled {
background: #0b1220 !important;
color: #475569 !important;
border-color: #1e293b !important;
}
/* "Контакт по умолчанию" inline card */
[data-theme="dark"] .main-content .appointment-page .flow-step-contacts > div,
[data-theme="dark"] .main-content .appointment-page .contact-card,
[data-theme="dark"] .main-content .appointment-page [class*="contact"][class*="card"],
[data-theme="dark"] .main-content .appointment-page [class*="default-contact"],
[data-theme="dark"] .main-content .appointment-page .flow-step-contacts > article {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
/* Лейблы и значения в контактах */
[data-theme="dark"] .main-content .appointment-page label,
[data-theme="dark"] .main-content .appointment-page [class*="-label"] {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .appointment-page [class*="-value"],
[data-theme="dark"] .main-content .appointment-page [class*="contact"] strong,
[data-theme="dark"] .main-content .appointment-page [class*="contact"] b {
color: #f1f5f9 !important;
}
/* Чекбоксы / radio в Appointment */
[data-theme="dark"] .main-content .appointment-page input[type="checkbox"],
[data-theme="dark"] .main-content .appointment-page input[type="radio"] {
accent-color: #00BF3F;
}
/* Step hint / описания */
[data-theme="dark"] .main-content .appointment-page .step-hint,
[data-theme="dark"] .main-content .appointment-page .office-overlay-hint,
[data-theme="dark"] .main-content .appointment-page .flow-step > header > div > p {
color: #94a3b8 !important;
}
/* Headers (Выберите офис, Выберите дату...) */
[data-theme="dark"] .main-content .appointment-page .office-overlay-h2,
[data-theme="dark"] .main-content .appointment-page h2,
[data-theme="dark"] .main-content .appointment-page h3 {
color: #f1f5f9 !important;
}
/* Submit button "Записаться в офис" — фирменный зелёный + чуть ярче для dark */
[data-theme="dark"] .main-content .appointment-page .office-overlay-submit,
[data-theme="dark"] .main-content .appointment-page button[type="submit"] {
box-shadow: 0 0 16px rgba(0, 191, 63, 0.3);
}
/* "Указать другой контакт" чекбокс-лейбл */
[data-theme="dark"] .main-content .appointment-page label[for*="contact"],
[data-theme="dark"] .main-content .appointment-page label:has(input[type="checkbox"]) {
color: #e2e8f0 !important;
}
/* Inputs в композере второго контакта */
[data-theme="dark"] .main-content .appointment-page input[type="text"],
[data-theme="dark"] .main-content .appointment-page input[type="email"],
[data-theme="dark"] .main-content .appointment-page input[type="tel"],
[data-theme="dark"] .main-content .appointment-page textarea {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .main-content .appointment-page input::placeholder,
[data-theme="dark"] .main-content .appointment-page textarea::placeholder {
color: #64748b !important;
}
/* Главная карточка Appointment — booking-flow-card (та что СВЕРХУ) */
[data-theme="dark"] .main-content .appointment-page .booking-flow-card,
[data-theme="dark"] .main-content .appointment-page > .card,
[data-theme="dark"] .main-content .appointment-page > div > div[class*="card"]:not(.office-overlay-card):not(.office-overlay-room-card),
[data-theme="dark"] .main-content .appointment-page article,
[data-theme="dark"] .main-content .appointment-page section,
[data-theme="dark"] .main-content .appointment-page aside {
background: #1e293b !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
/* Тексты header'а Appointment: заголовок, описание, адрес */
[data-theme="dark"] .main-content .appointment-page h1 {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .appointment-page p {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .appointment-page strong,
[data-theme="dark"] .main-content .appointment-page b {
color: #e2e8f0 !important;
}
/* "АДРЕС", "ТЕЛЕФОН ОФИСА", "РЕЖИМ РАБОТЫ" — UPPERCASE eyebrow */
[data-theme="dark"] .main-content .appointment-page [class*="eyebrow"],
[data-theme="dark"] .main-content .appointment-page [class*="kicker"],
[data-theme="dark"] .main-content .appointment-page header > span,
[data-theme="dark"] .main-content .appointment-page header > div > span {
color: #64748b !important;
}
/* Sidebar "Текущий выбор", "Ближайшая запись", "Как это работает" */
[data-theme="dark"] .main-content .appointment-page .sidebar-card,
[data-theme="dark"] .main-content .appointment-page .hero-side-card,
[data-theme="dark"] .main-content .appointment-page .hero-card,
[data-theme="dark"] .main-content .appointment-page [class*="hero-side"],
[data-theme="dark"] .main-content .appointment-page [class*="sidebar"][class*="card"],
[data-theme="dark"] .main-content .appointment-page [class*="summary"],
[data-theme="dark"] .main-content .appointment-page [class*="selection"],
[data-theme="dark"] .main-content .appointment-page [class*="howto"],
[data-theme="dark"] .main-content .appointment-page [class*="how-to"],
[data-theme="dark"] .main-content .appointment-page [class*="nearest"],
[data-theme="dark"] .main-content .appointment-page > div > aside,
[data-theme="dark"] .main-content .appointment-page > div > div > aside {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
/* Внутренние тексты sidebar-карточек */
[data-theme="dark"] .main-content .appointment-page aside h3,
[data-theme="dark"] .main-content .appointment-page aside h4,
[data-theme="dark"] .main-content .appointment-page aside strong {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .appointment-page aside p,
[data-theme="dark"] .main-content .appointment-page aside li,
[data-theme="dark"] .main-content .appointment-page aside small {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .appointment-page aside ul {
color: #94a3b8 !important;
}
/* Step-header band не должен светиться (фикс для предыдущей правки) */
[data-theme="dark"] .main-content .appointment-page .step-header,
[data-theme="dark"] .main-content .appointment-page .flow-step > header {
background: transparent !important;
}
/* Дата встречи — поле input + лейбл */
[data-theme="dark"] .main-content .appointment-page .ov-datepicker-input {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
/* Time slot текст ярче для читаемости */
[data-theme="dark"] .main-content .appointment-page .slots-grid button,
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot {
color: #f1f5f9 !important;
font-weight: 600;
background: #0f172a !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .appointment-page .slots-grid button:hover:not(:disabled),
[data-theme="dark"] .main-content .appointment-page .office-overlay-slot:hover:not(:disabled) {
background: #1e293b !important;
border-color: #00BF3F !important;
}
/* Datepicker label текст — ярче */
[data-theme="dark"] .main-content .ov-dp-label,
[data-theme="dark"] .main-content .ov-datepicker-input {
color: #f1f5f9 !important;
}
/* Outgoing message bubble — фирменный зелёный градиент */
[data-theme="dark"] .main-content .messages-list .outgoing .message-bubble,
[data-theme="dark"] .main-content .messages-list .message.outgoing .message-bubble {
background: linear-gradient(135deg, #06AC3E, #0a8a37) !important;
color: #ffffff !important;
border: none !important;
}
[data-theme="dark"] .main-content .messages-list .outgoing .message-bubble .message-text,
[data-theme="dark"] .main-content .messages-list .outgoing .message-bubble .message-time,
[data-theme="dark"] .main-content .messages-list .outgoing .message-bubble [class*="status"] {
color: rgba(255, 255, 255, 0.95) !important;
}
/* FAQ category icons — светлый зелёный фон надо адаптировать под dark */
[data-theme="dark"] .faq-view .ov-cat-icon {
background: rgba(0, 191, 63, 0.15) !important;
color: #00BF3F !important;
}
/* Chat: system event / urgent action bubbles (белые карточки внутри dialog) */
[data-theme="dark"] .main-content .message-bubble--system-event,
[data-theme="dark"] .main-content .message[class*="system"] .message-bubble,
[data-theme="dark"] .main-content .messages-list [class*="action-card"],
[data-theme="dark"] .main-content .messages-list [class*="event-card"],
[data-theme="dark"] .main-content .messages-list .message-bubble--info {
background: #1e293b !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event strong,
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event h4,
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event h3,
[data-theme="dark"] .main-content .messages-list [class*="event-title"] {
color: #f1f5f9 !important;
}
/* Внутри system event bubble — никаких рамок и подложек у вложенных */
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event h1,
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event h2,
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event h3,
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event h4,
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event p,
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event strong,
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event [class*="title"],
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event [class*="desc"],
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event [class*="text"] {
background: transparent !important;
border: none !important;
}
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event p,
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event [class*="desc"] {
color: #cbd5e1 !important;
}
/* lead-* inner sections in system event bubbles — НИКАКИХ рамок/фонов */
[data-theme="dark"] .main-content .messages-list [class*="lead-"],
[data-theme="dark"] .main-content [class*="lead-actions"],
[data-theme="dark"] .main-content [class*="lead-agreement"],
[data-theme="dark"] .main-content [class*="lead-footnote"],
[data-theme="dark"] .main-content [class*="lead-inline"],
[data-theme="dark"] .main-content [class*="lead-note"] {
background: transparent !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
}
[data-theme="dark"] .main-content [class*="lead-note"] {
color: #cbd5e1 !important;
}
[data-theme="dark"] .main-content [class*="lead-footnote"] {
color: #94a3b8 !important;
}
/* Универсально: все элементы внутри system-event bubble без рамок/фонов */
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event > * {
background: transparent !important;
}
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event > * > * {
background: transparent !important;
border: none !important;
}
/* Кроме кнопок — у них своя стилизация */
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event button {
background: #0f172a !important;
border: 1px solid #334155 !important;
color: #e2e8f0 !important;
}
/* Badge сверху bubble (chip с типом события) */
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event [class*="badge"],
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event [class*="chip"],
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event [class*="-tag"]:not(.ov-session-tag) {
background: rgba(33, 150, 243, 0.18) !important;
color: #60a5fa !important;
border: 1px solid rgba(33, 150, 243, 0.3) !important;
display: inline-flex;
}
/* Action chip кнопки внутри bubble (Мои документы / Мои договоры / etc) */
[data-theme="dark"] .main-content .messages-list .message-bubble--system-event button,
[data-theme="dark"] .main-content .messages-list [class*="bubble"] button,
[data-theme="dark"] .main-content .messages-list .message-bubble button {
background: #0f172a !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .messages-list .message-bubble button:hover {
background: #334155 !important;
border-color: #00BF3F !important;
}
/* Chip-badge "Нужно уточнить детали" / "Договор готов" в шапке bubble */
[data-theme="dark"] .main-content .messages-list [class*="bubble-badge"],
[data-theme="dark"] .main-content .messages-list [class*="event-badge"],
[data-theme="dark"] .main-content .messages-list .message-bubble [class*="-tag"]:not(.ov-session-tag) {
background: rgba(33, 150, 243, 0.18) !important;
color: #60a5fa !important;
border-color: rgba(33, 150, 243, 0.3) !important;
}
/* Quick-replies белая полоса под чатом */
[data-theme="dark"] .main-content .quick-replies,
[data-theme="dark"] .main-content [class*="quick-replies"],
[data-theme="dark"] .main-content [class*="suggestions"]:not(.ov-cmdk *),
[data-theme="dark"] .main-content .messages-view [class*="actions-bar"],
[data-theme="dark"] .main-content .messages-view [class*="reply-bar"] {
background: #0f172a !important;
border-top: 1px solid #334155 !important;
}
/* Office cards внутренние тексты — hardcoded dark в office-overlay.css */
[data-theme="dark"] .main-content .appointment-page .office-overlay-name {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .appointment-page .office-overlay-address {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .appointment-page .office-overlay-phone {
color: #e2e8f0 !important;
}
[data-theme="dark"] .main-content .appointment-page .office-overlay-room-name {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .appointment-page .office-overlay-room-cap,
[data-theme="dark"] .main-content .appointment-page [class*="office-overlay-room"][class*="cap"] {
color: #94a3b8 !important;
}
/* Push/Setting icon containers в Profile — светлый фон → тёмный в dark */
[data-theme="dark"] .main-content .profile-view .ov-push-icon {
background: rgba(0, 191, 63, 0.15) !important;
color: #00BF3F !important;
}
/* Office переговорки (rooms) cards — НЕ-active state должен быть dark */
[data-theme="dark"] .main-content .appointment-page .office-overlay-room-card,
[data-theme="dark"] .main-content .appointment-page .office-overlay-card {
background: #1e293b !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .appointment-page .office-overlay-room-card.active,
[data-theme="dark"] .main-content .appointment-page .office-overlay-card.active {
background: #0f3324 !important;
border-color: #00BF3F !important;
box-shadow: 0 0 0 1px #00BF3F;
}
/* "Текущий выбор" sidebar — DL/dt/dd выглядят как input-fields из-за моих overrides */
[data-theme="dark"] .main-content .appointment-page aside .summary-row,
[data-theme="dark"] .main-content .appointment-page aside [class*="summary-item"],
[data-theme="dark"] .main-content .appointment-page aside dt,
[data-theme="dark"] .main-content .appointment-page aside dd,
[data-theme="dark"] .main-content .appointment-page aside [class*="selection-row"] {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
[data-theme="dark"] .main-content .appointment-page aside dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b !important;
margin-top: 12px;
margin-bottom: 4px;
}
[data-theme="dark"] .main-content .appointment-page aside dd {
color: #e2e8f0 !important;
font-weight: 600;
}
/* Чекбокс "Указать другой контакт" — лейбл */
[data-theme="dark"] .main-content .appointment-page label {
color: #cbd5e1 !important;
}
/* Срочные действия (виджет на Dashboard) — text-кнопки справа */
[data-theme="dark"] .main-content .widget-actions .action-btn,
[data-theme="dark"] .main-content .action-item .action-btn,
[data-theme="dark"] .main-content .action-row button {
color: #cbd5e1 !important;
}
[data-theme="dark"] .main-content .widget-actions .action-btn:hover,
[data-theme="dark"] .main-content .action-item .action-btn:hover {
color: #00BF3F !important;
}
[data-theme="dark"] .main-content .action-deadline,
[data-theme="dark"] .main-content .action-item p {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .action-item .action-title {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .widget-actions .action-item {
border-bottom-color: #334155 !important;
}
/* Favorites empty-state CTA «Перейти к участкам ↗» — только ВНУТРИ empty-state,
не задевая .favorite-card (который тоже ). */
.main-content .favorites-view .empty-state a[href*="uchastk"]:not(.favorite-card),
[data-theme="dark"] .main-content .favorites-view .empty-state a[href*="uchastk"]:not(.favorite-card),
.main-content .favorites-view [class*="favorites-empty"] a[href*="uchastk"]:not(.favorite-card) {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 14px 28px !important;
background: linear-gradient(135deg, #00BF3F, #06AC3E) !important;
color: #ffffff !important;
border-radius: 12px !important;
text-decoration: none !important;
font-weight: 600 !important;
transition: opacity 0.2s;
}
.main-content .favorites-view .empty-state a[href*="uchastk"]:not(.favorite-card):hover {
opacity: 0.92;
}
/* Payments — главные карточки */
[data-theme="dark"] .main-content .payments-view .card,
[data-theme="dark"] .main-content .payments-view .form-card,
[data-theme="dark"] .main-content .payments-view .history-card,
[data-theme="dark"] .main-content .payments-view .payment-history-card,
[data-theme="dark"] .main-content .payments-view [class*="payment-request"] {
background: #1e293b !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .payments-view h1,
[data-theme="dark"] .main-content .payments-view h2,
[data-theme="dark"] .main-content .payments-view h3 {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .payments-view p,
[data-theme="dark"] .main-content .payments-view label {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .payments-view strong,
[data-theme="dark"] .main-content .payments-view b {
color: #e2e8f0 !important;
}
/* Ghost кнопка "Открыть сообщения" в Payments */
[data-theme="dark"] .main-content .payments-view .ghost-btn,
[data-theme="dark"] .main-content .payments-view [class*="ghost-btn"] {
background: #0f172a !important;
color: #cbd5e1 !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .payments-view .ghost-btn:hover {
background: #334155 !important;
}
/* Inner поля "Текущий договор / Сумма к оплате" — если они отдельные карточки */
[data-theme="dark"] .main-content .payments-view [class*="field"] {
background: #0f172a !important;
border: 1px solid #334155 !important;
}
/* Admin tables: bookings + users (real Vue классы) */
[data-theme="dark"] .main-content .admin-office-bookings,
[data-theme="dark"] .main-content .admin-users {
color: #e2e8f0 !important;
}
[data-theme="dark"] .main-content .admin-office-bookings .table-wrapper,
[data-theme="dark"] .main-content .admin-users .table-wrapper,
[data-theme="dark"] .main-content .bookings-table,
[data-theme="dark"] .main-content .users-table {
background: #1e293b !important;
border: 1px solid #334155 !important;
border-radius: 12px;
overflow: hidden;
}
/* Header bar (thead) */
[data-theme="dark"] .main-content .bookings-table thead,
[data-theme="dark"] .main-content .users-table thead,
[data-theme="dark"] .main-content .bookings-table thead tr,
[data-theme="dark"] .main-content .users-table thead tr {
background: #0f172a !important;
}
[data-theme="dark"] .main-content .bookings-table thead th,
[data-theme="dark"] .main-content .users-table thead th {
color: #94a3b8 !important;
background: transparent !important;
}
/* Rows */
[data-theme="dark"] .main-content .booking-row,
[data-theme="dark"] .main-content .user-row,
[data-theme="dark"] .main-content .bookings-table tbody tr,
[data-theme="dark"] .main-content .users-table tbody tr {
background: transparent !important;
border-bottom: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .booking-row:hover,
[data-theme="dark"] .main-content .user-row:hover {
background: rgba(255, 255, 255, 0.03) !important;
}
[data-theme="dark"] .main-content .booking-row td,
[data-theme="dark"] .main-content .user-row td {
color: #e2e8f0 !important;
background: transparent !important;
}
[data-theme="dark"] .main-content .empty-cell {
color: #64748b !important;
}
/* Filters: search + select */
[data-theme="dark"] .main-content .admin-office-bookings .search-box input,
[data-theme="dark"] .main-content .admin-users .search-box input,
[data-theme="dark"] .main-content .filter-select,
[data-theme="dark"] .main-content .status-select {
background: #0f172a !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .search-icon {
color: #64748b !important;
}
/* Status / role badges */
[data-theme="dark"] .main-content .status-new {
background: rgba(33, 150, 243, 0.18) !important;
color: #60a5fa !important;
}
[data-theme="dark"] .main-content .status-confirmed {
background: rgba(0, 191, 63, 0.18) !important;
color: #00BF3F !important;
}
[data-theme="dark"] .main-content .status-completed {
background: rgba(100, 116, 139, 0.25) !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .main-content .status-cancelled {
background: rgba(229, 57, 53, 0.18) !important;
color: #f87171 !important;
}
[data-theme="dark"] .main-content .role-admin {
background: rgba(245, 158, 11, 0.18) !important;
color: #fbbf24 !important;
}
[data-theme="dark"] .main-content .role-manager {
background: rgba(124, 58, 237, 0.18) !important;
color: #a78bfa !important;
}
[data-theme="dark"] .main-content .role-client,
[data-theme="dark"] .main-content .role-communications-admin {
background: rgba(33, 150, 243, 0.18) !important;
color: #60a5fa !important;
}
[data-theme="dark"] .main-content .active {
background: rgba(0, 191, 63, 0.18) !important;
color: #00BF3F !important;
}
[data-theme="dark"] .main-content .inactive {
background: rgba(100, 116, 139, 0.25) !important;
color: #94a3b8 !important;
}
/* Pagination */
[data-theme="dark"] .main-content .page-btn {
background: #0f172a !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content .page-btn:hover:not(:disabled) {
background: #334155 !important;
}
[data-theme="dark"] .main-content .page-info {
color: #94a3b8 !important;
}
/* Skeleton loaders */
[data-theme="dark"] .main-content .skeleton-text,
[data-theme="dark"] .main-content .skeleton-badge,
[data-theme="dark"] .main-content .skeleton-row {
background: linear-gradient(90deg, #1e293b 25%, #334155, #1e293b 75%) !important;
background-size: 800px 100% !important;
}
/* Records table (admin bookings) — комплексный фикс */
[data-theme="dark"] .main-content [class*="bookings"] .card,
[data-theme="dark"] .main-content [class*="booking-list"] .card,
[data-theme="dark"] .main-content [class*="admin"] .card,
[data-theme="dark"] .main-content [class*="bookings-view"],
[data-theme="dark"] .main-content [class*="bookings-view"] .card,
[data-theme="dark"] .main-content [class*="bookings-view"] section,
[data-theme="dark"] .main-content [class*="bookings-view"] [class*="table-wrap"],
[data-theme="dark"] .main-content [class*="bookings-view"] table {
background: #1e293b !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .main-content [class*="bookings-view"] tbody tr,
[data-theme="dark"] .main-content [class*="bookings"] tbody tr {
background: transparent !important;
border-bottom: 1px solid #334155 !important;
}
[data-theme="dark"] .main-content [class*="bookings-view"] tbody tr:hover {
background: rgba(255, 255, 255, 0.03) !important;
}
[data-theme="dark"] .main-content [class*="bookings-view"] td,
[data-theme="dark"] .main-content [class*="bookings-view"] th {
color: #e2e8f0 !important;
background: transparent !important;
}
[data-theme="dark"] .main-content [class*="bookings-view"] thead,
[data-theme="dark"] .main-content [class*="bookings-view"] thead tr {
background: #0f172a !important;
}
[data-theme="dark"] .main-content [class*="bookings-view"] thead th {
color: #94a3b8 !important;
background: #0f172a !important;
}
[data-theme="dark"] .main-content [class*="bookings-view"] input,
[data-theme="dark"] .main-content [class*="bookings-view"] select {
background: #0f172a !important;
color: #e2e8f0 !important;
border: 1px solid #334155 !important;
}
/* Generic админ-таблицы — все view-классы с table */
[data-theme="dark"] .main-content > div > section table,
[data-theme="dark"] .main-content > div > .card table,
[data-theme="dark"] .main-content > section table {
background: #1e293b !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .main-content > div > section,
[data-theme="dark"] .main-content > div > .card {
background: #1e293b !important;
border: 1px solid #334155 !important;
}
/* Profile поля — labels и Security-секция в dark */
[data-theme="dark"] .main-content .profile-view .field-label,
[data-theme="dark"] .main-content .profile-view label {
color: #cbd5e1 !important;
}
[data-theme="dark"] .main-content .profile-view .section-title {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .profile-view .security-label {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .profile-view .security-desc {
color: #cbd5e1 !important;
}
[data-theme="dark"] .main-content .profile-view .security-note {
color: #94a3b8 !important;
}
/* Generic для любых subtitle/title в profile-view */
[data-theme="dark"] .main-content .profile-view [class*="-title"]:not(.page-title) {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .profile-view [class*="-label"] {
color: #cbd5e1 !important;
}
[data-theme="dark"] .main-content .profile-view [class*="-desc"]:not(.ov-push-desc):not(.ov-sessions-desc) {
color: #cbd5e1 !important;
}
[data-theme="dark"] .main-content .profile-view [class*="-note"] {
color: #94a3b8 !important;
}
/* Edit-btn (карандаш справа от input) — фон и иконка */
[data-theme="dark"] .main-content .profile-view .edit-btn {
background: #0f172a !important;
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .profile-view .edit-btn:hover {
background: #334155 !important;
color: #f1f5f9 !important;
}
/* Profile avatar-placeholder в dark theme */
[data-theme="dark"] .main-content .profile-view .avatar-placeholder,
[data-theme="dark"] .main-content .profile-view .avatar-preview {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme="dark"] .main-content .profile-view .avatar-hint {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .profile-view .avatar-icon {
color: #475569 !important;
}
/* Если Vue уже добавил инициалы — поверх ничего своего НЕ показываем */
[data-theme="dark"] .main-content .profile-view .avatar-placeholder .avatar-initials {
background: linear-gradient(135deg, #00BF3F, #06AC3E) !important;
color: #ffffff !important;
}
/* Скрыть наш дубль если Vue уже добавил свой кружок */
.main-content .profile-view .avatar-placeholder:has(.avatar-initials) .ov-avatar-initials {
display: none !important;
}
/* "Мои записи" блок внизу /my/appointment */
[data-theme="dark"] .main-content .appointment-page [class*="my-bookings"],
[data-theme="dark"] .main-content .appointment-page [class*="user-bookings"],
[data-theme="dark"] .main-content .appointment-page > div > div:last-child {
color: #e2e8f0 !important;
}
[data-theme="dark"] .main-content .appointment-page [class*="my-bookings"] h2,
[data-theme="dark"] .main-content .appointment-page [class*="user-bookings"] h2 {
color: #f1f5f9 !important;
}
/* "Отменить запись" — белая pill кнопка в "Мои записи" */
[data-theme="dark"] .main-content .appointment-page button[class*="cancel"],
[data-theme="dark"] .main-content .appointment-page .btn-cancel,
[data-theme="dark"] .main-content button.cancel-booking,
[data-theme="dark"] .main-content button[class*="otmenit"] {
background: #1e293b !important;
color: #f87171 !important;
border: 1px solid #fecaca40 !important;
}
[data-theme="dark"] .main-content .appointment-page button[class*="cancel"]:hover {
background: #3a1212 !important;
}
/* "Новая запись" status pill — Vue использует светло-синий бейдж */
[data-theme="dark"] .main-content .appointment-page [class*="status"][class*="new"],
[data-theme="dark"] .main-content .appointment-page .status-new,
[data-theme="dark"] .main-content .appointment-page [class*="badge"][class*="new"] {
background: rgba(33, 150, 243, 0.18) !important;
color: #60a5fa !important;
border: 1px solid rgba(33, 150, 243, 0.3) !important;
}
/* "БЦ Парк Мира" / дата в записи — текст ярче для читаемости */
[data-theme="dark"] .main-content .appointment-page time,
[data-theme="dark"] .main-content .appointment-page [class*="-date"],
[data-theme="dark"] .main-content .appointment-page [class*="-place"],
[data-theme="dark"] .main-content .appointment-page [class*="-office"] {
color: #cbd5e1 !important;
}
/* Dashboard / Appointment widget — карточки записей */
[data-theme="dark"] .main-content .appointment-row {
border-bottom-color: #334155 !important;
}
[data-theme="dark"] .main-content .appointment-date {
color: #f1f5f9 !important;
}
[data-theme="dark"] .main-content .meta-item {
color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .text-btn {
color: #e2e8f0 !important;
}
[data-theme="dark"] .main-content .text-btn:hover {
color: #00BF3F !important;
}
/* ============================================================
TZ #4 — Customizable Quick Actions on Dashboard
============================================================ */
.app-ov .dashboard-view .ov-quick-actions {
margin: 0 0 24px;
padding: 20px 24px;
background: #ffffff;
border-radius: 16px;
border: 1px solid #E8EAEE;
}
[data-theme="dark"] .dashboard-view .ov-quick-actions {
background: #1e293b !important;
border-color: #334155 !important;
}
.app-ov .dashboard-view .ov-qa-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.app-ov .dashboard-view .ov-qa-title {
margin: 0;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 20px; /* Отчёт #3: было 18 — выравниваем под .widget-title (20px) */
font-weight: 700;
color: #030813;
}
[data-theme="dark"] .dashboard-view .ov-qa-title {
color: #f1f5f9 !important;
}
.app-ov .dashboard-view .ov-qa-config {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #f4f6f9;
border: 1px solid #E8EAEE;
border-radius: 8px;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 600;
color: #6f737a;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.app-ov .dashboard-view .ov-qa-config:hover {
background: #ffffff;
color: #00bf3f;
border-color: #00bf3f;
}
[data-theme="dark"] .dashboard-view .ov-qa-config {
background: #0f172a !important;
color: #94a3b8 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .dashboard-view .ov-qa-config:hover {
color: #00BF3F !important;
border-color: #00BF3F !important;
}
.app-ov .dashboard-view .ov-qa-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.app-ov .dashboard-view .ov-qa-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #f9fbfc;
border: 1px solid #E8EAEE;
border-radius: 12px;
text-decoration: none;
color: #030813;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.app-ov .dashboard-view .ov-qa-btn:hover {
transform: translateY(-2px);
border-color: #00bf3f;
box-shadow: 0 6px 16px rgba(0, 191, 63, 0.12);
}
[data-theme="dark"] .dashboard-view .ov-qa-btn {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .dashboard-view .ov-qa-btn:hover {
background: #1e293b !important;
border-color: #00BF3F !important;
box-shadow: 0 6px 16px rgba(0, 191, 63, 0.18) !important;
}
.app-ov .dashboard-view .ov-qa-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(0, 191, 63, 0.12);
color: #00bf3f;
flex-shrink: 0;
}
.app-ov .dashboard-view .ov-qa-icon svg {
width: 18px;
height: 18px;
}
[data-theme="dark"] .dashboard-view .ov-qa-icon {
background: rgba(0, 191, 63, 0.18) !important;
color: #00BF3F !important;
}
.app-ov .dashboard-view .ov-qa-label {
flex: 1;
min-width: 0;
}
/* Quick Actions Modal */
.app-ov .ov-qa-modal-backdrop {
position: fixed; inset: 0;
background: rgba(3, 8, 19, 0.55);
display: flex; align-items: center; justify-content: center;
z-index: 9999;
padding: 16px;
animation: ov-cmdk-fade 0.15s ease-out;
}
.app-ov .ov-qa-modal {
width: 100%; max-width: 560px;
max-height: 85vh;
display: flex; flex-direction: column;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
overflow: hidden;
}
[data-theme="dark"] .ov-qa-modal {
background: #1e293b !important;
}
.app-ov .ov-qa-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid #f1f3f5;
}
[data-theme="dark"] .ov-qa-modal-header {
border-bottom-color: #334155 !important;
}
.app-ov .ov-qa-modal-title {
margin: 0;
font-size: 17px;
font-weight: 700;
color: #030813;
}
[data-theme="dark"] .ov-qa-modal-title {
color: #f1f5f9 !important;
}
.app-ov .ov-qa-modal-close {
background: transparent;
border: none;
font-size: 28px;
line-height: 1;
color: #6f737a;
cursor: pointer;
padding: 4px 10px;
border-radius: 8px;
}
.app-ov .ov-qa-modal-close:hover {
background: #f4f6f9;
}
[data-theme="dark"] .ov-qa-modal-close {
color: #94a3b8 !important;
}
[data-theme="dark"] .ov-qa-modal-close:hover {
background: #334155 !important;
}
.app-ov .ov-qa-modal-hint {
margin: 14px 22px 0;
font-size: 13px;
color: #6f737a;
}
[data-theme="dark"] .ov-qa-modal-hint {
color: #94a3b8 !important;
}
.app-ov .ov-qa-modal-list {
flex: 1;
overflow-y: auto;
padding: 14px 22px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.app-ov .ov-qa-modal-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #f9fbfc;
border: 1px solid #E8EAEE;
border-radius: 10px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.app-ov .ov-qa-modal-item:hover {
background: #ffffff;
}
.app-ov .ov-qa-modal-item.is-checked {
background: #f0fdf4;
border-color: #00BF3F;
}
[data-theme="dark"] .ov-qa-modal-item {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme="dark"] .ov-qa-modal-item:hover {
background: #1e293b !important;
}
[data-theme="dark"] .ov-qa-modal-item.is-checked {
background: rgba(0, 191, 63, 0.12) !important;
border-color: #00BF3F !important;
}
.app-ov .ov-qa-modal-item input[type="checkbox"] {
accent-color: #00BF3F;
width: 16px; height: 16px;
}
.app-ov .ov-qa-modal-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 8px;
background: rgba(0, 191, 63, 0.10);
color: #00bf3f;
}
.app-ov .ov-qa-modal-icon svg {
width: 14px; height: 14px;
}
[data-theme="dark"] .ov-qa-modal-icon {
background: rgba(0, 191, 63, 0.18) !important;
color: #00BF3F !important;
}
.app-ov .ov-qa-modal-label {
font-size: 13px;
font-weight: 500;
color: #030813;
flex: 1;
}
[data-theme="dark"] .ov-qa-modal-label {
color: #e2e8f0 !important;
}
.app-ov .ov-qa-modal-footer {
display: flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-top: 1px solid #f1f3f5;
}
[data-theme="dark"] .ov-qa-modal-footer {
border-top-color: #334155 !important;
}
.app-ov .ov-qa-modal-count {
flex: 1;
font-size: 12px;
color: #6f737a;
font-weight: 500;
}
[data-theme="dark"] .ov-qa-modal-count {
color: #94a3b8 !important;
}
.app-ov .ov-qa-modal-cancel,
.app-ov .ov-qa-modal-save {
padding: 8px 18px;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
border: none;
transition: opacity 0.15s, background 0.15s;
}
.app-ov .ov-qa-modal-cancel {
background: #f4f6f9;
color: #030813;
}
.app-ov .ov-qa-modal-cancel:hover {
background: #e8eaee;
}
[data-theme="dark"] .ov-qa-modal-cancel {
background: #334155 !important;
color: #e2e8f0 !important;
}
.app-ov .ov-qa-modal-save {
background: linear-gradient(135deg, #00BF3F, #06AC3E);
color: #ffffff;
}
.app-ov .ov-qa-modal-save:hover:not(:disabled) {
opacity: 0.92;
}
.app-ov .ov-qa-modal-save:disabled {
opacity: 0.5; cursor: not-allowed;
}
/* ============================================================
TZ #9 — Favorites Map
============================================================ */
.app-ov .favorites-view .ov-fav-map-wrap {
margin-top: 8px;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
border: 1px solid #E8EAEE;
}
[data-theme="dark"] .favorites-view .ov-fav-map-wrap {
background: #1e293b !important;
border-color: #334155 !important;
}
.app-ov .favorites-view .ov-fav-map-frame {
width: 100%;
height: 520px;
background: #f1f5f9;
overflow: hidden;
}
.app-ov .favorites-view .ov-fav-map-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.app-ov .favorites-view .ov-fav-map-hint {
padding: 12px 18px;
margin: 0;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
color: #6f737a;
background: #f9fbfc;
border-top: 1px solid #E8EAEE;
}
[data-theme="dark"] .favorites-view .ov-fav-map-hint {
background: #0f172a !important;
color: #94a3b8 !important;
border-top-color: #334155 !important;
}
.app-ov .favorites-view .ov-fav-map-empty {
padding: 60px 20px;
text-align: center;
color: #6f737a;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
}
[data-theme="dark"] .favorites-view .ov-fav-map-empty {
color: #94a3b8 !important;
}
/* YMaps v3 host — занимает весь frame */
.app-ov .favorites-view .ov-fav-map-host {
width: 100%;
height: 100%;
position: relative;
background: #f1f5f9;
}
[data-theme="dark"] .favorites-view .ov-fav-map-host {
background: #0f172a !important;
}
/* Custom DOM-маркер: SVG-капля + центральная точка */
.app-ov .ov-fav-marker {
cursor: pointer;
transform: translate(-50%, -100%);
transition: transform 0.15s ease;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.app-ov .ov-fav-marker:hover { transform: translate(-50%, -100%) scale(1.12); }
.app-ov .ov-fav-marker.is-active { transform: translate(-50%, -100%) scale(1.2); z-index: 10; }
.app-ov .ov-fav-marker.is-village svg { fill: #2563eb; }
.app-ov .ov-fav-marker.is-plot svg { fill: #16a34a; }
/* Балун над маркером — позиционируется absolute внутри map host */
.app-ov .ov-fav-map-popup {
position: absolute;
transform: translate(-50%, -100%);
width: 280px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
border: 1px solid #e5e7eb;
z-index: 50;
overflow: hidden;
animation: ov-fav-popup-in 0.15s ease-out;
}
@keyframes ov-fav-popup-in {
from { opacity: 0; transform: translate(-50%, -90%); }
to { opacity: 1; transform: translate(-50%, -100%); }
}
[data-theme="dark"] .ov-fav-map-popup {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
.app-ov .ov-fav-map-popup-close {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
border: none;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
font-size: 18px;
line-height: 1;
cursor: pointer;
color: #475569;
z-index: 1;
transition: background 0.15s ease, color 0.15s ease;
}
.app-ov .ov-fav-map-popup-close:hover { background: #f1f5f9; color: #0f172a; }
[data-theme="dark"] .ov-fav-map-popup-close {
background: rgba(15, 23, 42, 0.9) !important;
color: #94a3b8 !important;
}
[data-theme="dark"] .ov-fav-map-popup-close:hover {
background: #334155 !important;
color: #f1f5f9 !important;
}
.app-ov .ov-fav-map-popup-img {
width: 100%;
height: 140px;
background: #f1f5f9;
overflow: hidden;
}
.app-ov .ov-fav-map-popup-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.app-ov .ov-fav-map-popup-body {
padding: 12px 14px 14px;
}
.app-ov .ov-fav-map-popup-type {
display: inline-block;
padding: 2px 8px;
margin-bottom: 6px;
background: #ecfdf5;
color: #16a34a;
font-size: 11px;
font-weight: 600;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
[data-theme="dark"] .ov-fav-map-popup-type {
background: rgba(34, 197, 94, 0.15) !important;
color: #4ade80 !important;
}
.app-ov .ov-fav-map-popup-title {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
font-size: 16px;
color: #0f172a;
margin-bottom: 4px;
}
[data-theme="dark"] .ov-fav-map-popup-title {
color: #f1f5f9 !important;
}
.app-ov .ov-fav-map-popup-meta {
font-size: 13px;
color: #6f737a;
margin-bottom: 10px;
}
[data-theme="dark"] .ov-fav-map-popup-meta {
color: #94a3b8 !important;
}
.app-ov .ov-fav-map-popup-link {
display: inline-block;
color: #16a34a;
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: color 0.15s ease;
}
.app-ov .ov-fav-map-popup-link:hover { color: #15803d; }
[data-theme="dark"] .ov-fav-map-popup-link {
color: #4ade80 !important;
}
[data-theme="dark"] .ov-fav-map-popup-link:hover {
color: #86efac !important;
}
/* Список под картой — кликабельные карточки на ссылки объектов */
.app-ov .favorites-view .ov-fav-map-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
padding: 16px;
background: #f8fafc;
border-top: 1px solid #e5e7eb;
}
[data-theme="dark"] .favorites-view .ov-fav-map-list {
background: #0f172a !important;
border-top-color: #334155 !important;
}
.app-ov .favorites-view .ov-fav-map-list-item {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.app-ov .favorites-view .ov-fav-map-list-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
border-color: #16a34a;
}
[data-theme="dark"] .favorites-view .ov-fav-map-list-item {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .favorites-view .ov-fav-map-list-item:hover {
border-color: #22c55e !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}
.app-ov .favorites-view .ov-fav-map-list-link {
display: flex;
gap: 12px;
padding: 10px;
text-decoration: none;
color: inherit;
}
.app-ov .favorites-view .ov-fav-map-list-isolate {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0 10px 10px 10px;
padding: 8px 10px;
background: #ecfdf5;
color: #16a34a;
border: 1px solid #bbf7d0;
border-radius: 8px;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.app-ov .favorites-view .ov-fav-map-list-isolate:hover {
background: #16a34a;
color: #ffffff;
border-color: #16a34a;
}
[data-theme="dark"] .favorites-view .ov-fav-map-list-isolate {
background: rgba(34, 197, 94, 0.12) !important;
color: #4ade80 !important;
border-color: rgba(34, 197, 94, 0.3) !important;
}
[data-theme="dark"] .favorites-view .ov-fav-map-list-isolate:hover {
background: #16a34a !important;
color: #ffffff !important;
}
.app-ov .favorites-view .ov-fav-map-reset {
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #ffffff;
color: #0f172a;
border: 1px solid #e5e7eb;
border-radius: 999px;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
justify-self: start;
transition: background 0.15s ease, border-color 0.15s ease;
}
.app-ov .favorites-view .ov-fav-map-reset:hover {
background: #f8fafc;
border-color: #16a34a;
color: #16a34a;
}
[data-theme="dark"] .favorites-view .ov-fav-map-reset {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .favorites-view .ov-fav-map-reset:hover {
background: #0f172a !important;
border-color: #4ade80 !important;
color: #4ade80 !important;
}
.app-ov .favorites-view .ov-fav-map-list-img {
flex: 0 0 80px;
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
}
.app-ov .favorites-view .ov-fav-map-list-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.app-ov .favorites-view .ov-fav-map-list-noimg {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}
[data-theme="dark"] .favorites-view .ov-fav-map-list-img {
background: #334155 !important;
}
.app-ov .favorites-view .ov-fav-map-list-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.app-ov .favorites-view .ov-fav-map-list-top {
display: flex;
align-items: center;
gap: 6px;
}
.app-ov .favorites-view .ov-fav-map-list-type {
display: inline-block;
padding: 2px 8px;
background: #ecfdf5;
color: #16a34a;
font-size: 11px;
font-weight: 600;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
[data-theme="dark"] .favorites-view .ov-fav-map-list-type {
background: rgba(34, 197, 94, 0.15) !important;
color: #4ade80 !important;
}
.app-ov .favorites-view .ov-fav-map-list-pin {
font-size: 13px;
opacity: 0.7;
}
.app-ov .favorites-view .ov-fav-map-list-title {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
font-size: 15px;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="dark"] .favorites-view .ov-fav-map-list-title {
color: #f1f5f9 !important;
}
.app-ov .favorites-view .ov-fav-map-list-meta {
font-size: 13px;
color: #6f737a;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
[data-theme="dark"] .favorites-view .ov-fav-map-list-meta {
color: #94a3b8 !important;
}
/* --- P3: Appointment step transitions --- */
.app-ov .appointment-page .flow-step {
animation: ov-step-fade-in 0.35s ease-out;
}
@keyframes ov-step-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.app-ov .appointment-page .flow-step { animation: none; }
}
/* Когда офис меняется — слоты времени мягко обновляются */
.app-ov .appointment-page .slots-grid {
transition: opacity 0.2s ease;
}
.app-ov .appointment-page .office-overlay-loading {
opacity: 0.4;
pointer-events: none;
}
/* ============================================================
P3 — Cmd+K + dedupe + empty-state skeletons
============================================================ */
/* --- P3: Cmd+K global search --- */
.app-ov .ov-cmdk-backdrop {
position: fixed;
inset: 0;
background: rgba(3, 8, 19, 0.55);
z-index: 9999;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 80px 16px 16px;
animation: ov-cmdk-fade 0.15s ease-out;
}
@keyframes ov-cmdk-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.app-ov .ov-cmdk-modal {
width: 100%;
max-width: 560px;
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
display: flex;
flex-direction: column;
max-height: 70vh;
}
.app-ov .ov-cmdk-input-wrap {
display: flex;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #f1f3f5;
gap: 12px;
}
.app-ov .ov-cmdk-input-wrap svg {
width: 20px; height: 20px;
color: #6f737a; flex-shrink: 0;
}
.app-ov .ov-cmdk-input {
flex: 1;
border: none;
background: transparent;
font-family: inherit;
font-size: 16px;
font-weight: 500;
color: #030813;
outline: none;
}
.app-ov .ov-cmdk-input::placeholder { color: #a3a5aa; }
.app-ov .ov-cmdk-kbd {
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 11px;
background: #f4f6f9;
color: #6f737a;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid #E8EAEE;
font-weight: 600;
}
.app-ov .ov-cmdk-list {
flex: 1;
overflow-y: auto;
padding: 8px;
margin: 0;
list-style: none;
}
.app-ov .ov-cmdk-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
color: #030813;
cursor: pointer;
}
.app-ov .ov-cmdk-item.active,
.app-ov .ov-cmdk-item:hover {
background: #f0fdf4;
color: #030813;
}
.app-ov .ov-cmdk-item-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: #f4f6f9;
display: flex; align-items: center; justify-content: center;
color: #00bf3f; flex-shrink: 0;
}
.app-ov .ov-cmdk-item.active .ov-cmdk-item-icon {
background: #00bf3f; color: #fff;
}
.app-ov .ov-cmdk-item-icon svg {
width: 16px; height: 16px;
}
.app-ov .ov-cmdk-item-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
}
.app-ov .ov-cmdk-item-label {
font-size: 14px; font-weight: 600;
}
.app-ov .ov-cmdk-item-desc {
font-size: 12px; color: #6f737a;
}
.app-ov .ov-cmdk-empty {
padding: 32px 16px;
text-align: center;
font-size: 14px;
color: #6f737a;
}
.app-ov .ov-cmdk-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-top: 1px solid #f1f3f5;
font-size: 11px;
color: #6f737a;
}
.app-ov .ov-cmdk-footer-hints {
display: flex; gap: 14px;
}
.app-ov .ov-cmdk-footer-hints span {
display: inline-flex; align-items: center; gap: 6px;
}
/* --- P3: empty-state preview skeletons --- */
.app-ov .ov-skeleton-list {
display: flex;
flex-direction: column;
gap: 12px;
padding: 8px 24px 16px;
opacity: 0.55;
pointer-events: none;
user-select: none;
}
.app-ov .ov-skeleton-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px dashed rgba(163, 165, 170, 0.25);
}
.app-ov .ov-skeleton-row:last-child {
border-bottom: none;
}
.app-ov .ov-skeleton-circle {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
background-size: 800px 100%;
animation: ov-shimmer 1.5s ease-in-out infinite;
flex-shrink: 0;
}
.app-ov .ov-skeleton-square {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
background-size: 800px 100%;
animation: ov-shimmer 1.5s ease-in-out infinite;
flex-shrink: 0;
}
.app-ov .ov-skeleton-lines {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 6px;
}
.app-ov .ov-skeleton-line {
height: 12px; border-radius: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0, #f0f0f0 75%);
background-size: 800px 100%;
animation: ov-shimmer 1.5s ease-in-out infinite;
}
.app-ov .ov-skeleton-line.short { width: 60%; }
.app-ov .ov-skeleton-line.med { width: 80%; }
.app-ov .ov-skeleton-preview-label {
padding: 4px 24px 0;
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 600;
color: #a3a5aa;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* --- P0: secondary buttons affordance --- */
/* Бутафорские "Открыть форму заявки" / "Открыть сообщения" — добавляем outline */
.app-ov .btn-secondary:not([class*="primary"]):not([class*="filled"]):not(.modal-body .btn-secondary):not(.modal-footer .btn-secondary) {
border: 1px solid #00bf3f !important;
color: #00bf3f !important;
background: #ffffff !important;
}
.app-ov .btn-secondary:not([class*="primary"]):not([class*="filled"]):not(.modal-body .btn-secondary):not(.modal-footer .btn-secondary):hover {
background: #f0fdf4 !important;
}
/* Fix: клик по имени/аватару должен открывать dropdown как клик по chevron.
pointer-events: none на детях гарантирует, что все клики достигают .ov-topbar-user. */
.app-ov .ov-topbar-user > .ov-topbar-avatar,
.app-ov .ov-topbar-user > .ov-topbar-name,
.app-ov .ov-topbar-user > .ov-topbar-chevron {
pointer-events: none;
}
.app-ov .ov-topbar-user > .ov-topbar-menu {
pointer-events: auto;
}
/* ============================================================
Fix: messages-view (chat) на мобиле + dark mode.
Vue ЛК имеет hardcoded background:#fff в .chat-content и связанных
элементах — на dark-теме они выглядят как белые пятна.
На мобиле справа от списка диалогов пустая правая панель занимает место.
============================================================ */
[data-theme="dark"] .app-ov .messages-view .chat-content,
[data-theme="dark"] .app-ov .messages-view .chat-header,
[data-theme="dark"] .app-ov .messages-view .chat-header-bar,
[data-theme="dark"] .app-ov .messages-view .chat-info,
[data-theme="dark"] .app-ov .messages-view .chats-empty,
[data-theme="dark"] .app-ov .messages-view .chat-skeleton-content,
[data-theme="dark"] .app-ov .messages-view .chat-skeleton-header {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .app-ov .messages-view .chat-content::before,
[data-theme="dark"] .app-ov .messages-view .chat-content::after {
background: transparent !important;
}
/* Mobile ≤768px: список диалогов на всю ширину.
(Скрытием правой панели управляет блок ниже через .chat-window +
body.ov-chat-open — НЕ через .chat-content, который есть только в строках
списка и содержит имя/превью/время.) */
@media (max-width: 768px) {
.app-ov .messages-view .chats-panel {
width: 100% !important;
max-width: none !important;
}
}
/* ============================================================
DARK MODE — safety overrides для body/main/mobile-header.
Vue ЛК hardcoded background:#fff в нескольких местах:
- body/html
- .mobile-header (видна только на мобиле)
- .main-content, .my-layout, .app
Без overrides на мобиле dark-mode имеет белые пятна вокруг карточек.
============================================================ */
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] #app,
[data-theme="dark"] .app-ov .my-layout,
[data-theme="dark"] .app-ov .main-content,
[data-theme="dark"] .app-ov .appointment-page,
[data-theme="dark"] .app-ov .contracts-view,
[data-theme="dark"] .app-ov .documents-view,
[data-theme="dark"] .app-ov .payments-view,
[data-theme="dark"] .app-ov .profile-view,
[data-theme="dark"] .app-ov .faq-view,
[data-theme="dark"] .app-ov .orders-view,
[data-theme="dark"] .app-ov .messages-view,
[data-theme="dark"] .app-ov .favorites-view,
[data-theme="dark"] .app-ov .change-password-page,
[data-theme="dark"] .app-ov .ov-pvlk-pv-shell,
[data-theme="dark"] .app-ov .not-found {
background-color: #0f172a !important;
color: #e2e8f0;
}
/* Mobile header (бургер + чат + сердечко) — Vue hardcoded white */
[data-theme="dark"] .mobile-header {
background-color: #1e293b !important;
border-bottom-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .mobile-header svg {
stroke: #e2e8f0 !important;
}
[data-theme="dark"] .mobile-header .header-icon-btn {
background-color: rgba(255,255,255,0.04) !important;
border-color: #334155 !important;
}
/* Theme toggle button на mobile-header (наш inject через app-overlay.js).
Стиль для кнопки .ov-mobile-theme-toggle. */
.app-ov .ov-mobile-theme-toggle {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.04);
border: 1px solid #e3e7eb;
border-radius: 50%;
cursor: pointer;
color: #4a5058;
margin-right: 8px;
flex-shrink: 0;
transition: background 0.15s, color 0.15s, transform 0.15s;
}
.app-ov .ov-mobile-theme-toggle:hover { background: rgba(0,0,0,0.08); }
.app-ov .ov-mobile-theme-toggle:active { transform: scale(0.95); }
[data-theme="dark"] .app-ov .ov-mobile-theme-toggle {
background: rgba(255,255,255,0.06) !important;
border-color: #334155 !important;
color: #fbbf24 !important;
}
/* ============================================================
DARK MODE — Dashboard и Mobile-header (расширенный фикс).
Vue использует Scoped styles + linear-gradient → нужно перебивать
через background (shorthand) + !important.
============================================================ */
/* Mobile-header: Vue ставит linear-gradient(#fff, #f4f6f9). Перебиваем через shorthand. */
[data-theme="dark"] .mobile-header {
background: linear-gradient(135deg, #1e293b, #0f172a) !important;
border-bottom: 1px solid #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .mobile-header * { color: #e2e8f0 !important; }
[data-theme="dark"] .mobile-header .icon { stroke: #e2e8f0 !important; }
/* Dashboard — все тексты в карточках */
[data-theme="dark"] .app-ov .dashboard-view .widget,
[data-theme="dark"] .app-ov .dashboard-view .widget-messages,
[data-theme="dark"] .app-ov .dashboard-view .widget-orders,
[data-theme="dark"] .app-ov .dashboard-view .widget-documents,
[data-theme="dark"] .app-ov .dashboard-view .widget-appointments,
[data-theme="dark"] .app-ov .dashboard-view .widget-actions {
background: #1e293b !important;
border: 1px solid #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .app-ov .dashboard-view .widget-title,
[data-theme="dark"] .app-ov .dashboard-view .widget-title-row,
[data-theme="dark"] .app-ov .dashboard-view .page-title {
color: #f1f5f9 !important;
}
/* Contract rows: name, amount, date */
[data-theme="dark"] .app-ov .dashboard-view .document-item,
[data-theme="dark"] .app-ov .dashboard-view .order-card,
[data-theme="dark"] .app-ov .dashboard-view .appointment-card,
[data-theme="dark"] .app-ov .dashboard-view .message-item,
[data-theme="dark"] .app-ov .dashboard-view .action-item {
background: transparent !important;
border-bottom-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .app-ov .dashboard-view .doc-name,
[data-theme="dark"] .app-ov .dashboard-view .order-project,
[data-theme="dark"] .app-ov .dashboard-view .order-plot,
[data-theme="dark"] .app-ov .dashboard-view .action-title,
[data-theme="dark"] .app-ov .dashboard-view .message-name,
[data-theme="dark"] .app-ov .dashboard-view .amount-value,
[data-theme="dark"] .app-ov .dashboard-view .contract-amount {
color: #f1f5f9 !important;
}
[data-theme="dark"] .app-ov .dashboard-view .doc-meta-row,
[data-theme="dark"] .app-ov .dashboard-view .doc-chip,
[data-theme="dark"] .app-ov .dashboard-view .action-deadline,
[data-theme="dark"] .app-ov .dashboard-view .message-preview,
[data-theme="dark"] .app-ov .dashboard-view .message-time,
[data-theme="dark"] .app-ov .dashboard-view .amount-date,
[data-theme="dark"] .app-ov .dashboard-view .appointment-meta,
[data-theme="dark"] .app-ov .dashboard-view .appointment-date {
color: #94a3b8 !important;
}
/* Icon-wrappers (документы, контракты — белый кружок с иконкой) */
[data-theme="dark"] .app-ov .dashboard-view .contract-icon-wrap,
[data-theme="dark"] .app-ov .dashboard-view .doc-icon,
[data-theme="dark"] .app-ov .dashboard-view .order-image-placeholder {
background: rgba(255,255,255,0.06) !important;
border-color: #334155 !important;
}
[data-theme="dark"] .app-ov .dashboard-view .avatar {
background: #334155 !important;
color: #e2e8f0 !important;
}
/* Empty state */
[data-theme="dark"] .app-ov .dashboard-view .empty-state {
color: #94a3b8 !important;
}
/* Page-title (общий) */
[data-theme="dark"] .app-ov .page-title {
color: #f1f5f9 !important;
}
/* ============================================================
Mobile sidebar — CTA-кнопки «Запись в офис» + «Запись на просмотр».
На мобиле обе зелёные кнопки иногда обрезались viewport'ом (юзер видел
только верхнюю). Делаем их side-by-side в один ряд, по половине ширины.
============================================================ */
@media (max-width: 1024px) {
.app-ov .sidebar-footer {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
}
.app-ov .sidebar-footer .footer-btn {
flex: 1 1 calc(50% - 4px) !important;
min-width: 0 !important;
padding: 12px 8px !important;
font-size: 12.5px !important;
text-align: center !important;
justify-content: center !important;
}
.app-ov .sidebar-footer .footer-btn .btn-label,
.app-ov .sidebar-footer .footer-btn span {
text-align: center;
white-space: normal;
line-height: 1.2;
}
/* sidebar сам должен скроллиться чтобы все пункты + footer влезали */
.app-ov .sidebar-inner {
overflow-y: auto !important;
padding-bottom: 16px !important;
}
}
/* ============================================================
Mobile messages — список на всю ширину + тёмный фон строк списка.
(Видимостью окна диалога управляет блок .chat-window ниже.)
============================================================ */
@media (max-width: 768px) {
.app-ov .messages-view .chats-panel {
width: 100% !important;
max-width: none !important;
flex: 1 1 100% !important;
}
/* Тёмный фон строк списка (.chat-content — текст строки) в dark-теме */
[data-theme="dark"] .app-ov .messages-view .chat-content {
background: #0f172a !important;
}
}
/* ============================================================
Sidebar nav badges — выравнивание по правому краю.
Vue Render: …N
По умолчанию бейдж прижат к тексту. Чтобы он ушёл к правому краю —
делаем nav-item flex и бейджу margin-left: auto.
============================================================ */
.app-ov .sidebar .nav-item {
display: flex !important;
align-items: center !important;
width: 100%;
}
.app-ov .sidebar .nav-item .nav-label {
flex: 1 1 auto !important;
min-width: 0;
}
.app-ov .sidebar .nav-item .nav-count-badge,
.app-ov .sidebar .nav-item .nav-badge,
.app-ov .sidebar .nav-item .ov-nav-badge,
.app-ov .sidebar .nav-item [class*="count-badge"] {
margin-left: auto !important;
flex-shrink: 0;
}
/* ============================================================
Mobile messages — single-pane: список ИЛИ открытый диалог.
ВАЖНО: .chat-content живёт ТОЛЬКО внутри .chat-item — это текст строки
списка (имя/превью/время). Панель диалога — это .chat-window.
Поэтому прячем/показываем .chat-window (не .chat-content, иначе пропадёт
текст в списке диалогов). Переключение по body.ov-chat-open (JS на тап).
============================================================ */
@media (max-width: 768px) {
/* Классы app-ov и ov-chat-open оба на , поэтому селектор —
.app-ov.ov-chat-open / .app-ov:not(.ov-chat-open) (без потомка). */
/* Диалог не открыт — список на всю ширину, окно чата скрыто */
.app-ov:not(.ov-chat-open) .messages-view .chat-window {
display: none !important;
}
.app-ov:not(.ov-chat-open) .messages-view .chats-panel {
width: 100% !important;
max-width: none !important;
flex: 1 1 100% !important;
}
/* Диалог открыт — список скрыт, окно чата на весь экран */
.app-ov.ov-chat-open .messages-view .chats-panel {
display: none !important;
}
.app-ov.ov-chat-open .messages-view .chat-window {
display: flex !important;
width: 100% !important;
flex: 1 1 100% !important;
}
}
/* Map popup — viewport-safe sizing on mobile (clamp also done in JS) */
@media (max-width: 480px) {
.app-ov .ov-fav-map-popup {
width: min(280px, calc(100vw - 24px));
max-width: calc(100vw - 24px);
}
}
/* ============================================================
Mobile audit fixes (2026-05-28)
============================================================ */
@media (max-width: 768px) {
/* Dashboard «Запись в офис» виджет: строка дата+статус+действия не
помещалась в ширину → «Отменить» обрезалась. Разрешаем перенос. */
.app-ov .appointment-header-row {
flex-wrap: wrap !important;
row-gap: 8px;
}
.app-ov .appointment-actions {
flex-wrap: wrap !important;
}
/* Welcome-баннер: декоративный 👋 (::after, position:absolute) на узком
экране налезал на заголовок «Привет, …!». Прячем на мобиле. */
.app-ov .dashboard-view .ov-welcome::after {
display: none !important;
}
}
/* ============================================================
Отчёт #2 — выравнивание логотипа сайдбара по топбару (десктоп).
Логотип в .sidebar-inner был смещён вниз padding-top:60px и стоял
ниже строки темы/профиля (.ov-topbar, h:64). Поднимаем логотип в
полосу 64px и центрируем — лого на одном уровне с темой/профилем.
Только десктоп (≥769px): на мобиле сайдбар off-canvas + mobile-header.
============================================================ */
@media (min-width: 769px) {
.app-ov .sidebar-inner { padding-top: 0 !important; }
.app-ov .sidebar .sidebar-header {
min-height: 64px;
display: flex;
align-items: center;
}
}
/* ============================================================
UX-аудит A5 — видимые фокус-кольца для клавиатурной навигации.
============================================================ */
.app-ov a:focus-visible,
.app-ov button:focus-visible,
.app-ov input:focus-visible,
.app-ov select:focus-visible,
.app-ov textarea:focus-visible,
.app-ov [tabindex]:focus-visible,
.app-ov .nav-item:focus-visible,
.app-ov .header-icon-btn:focus-visible {
outline: 2px solid #00bf3f !important;
outline-offset: 2px;
border-radius: 6px;
}
/* ============================================================
UX-аудит A1 — тач-таргеты ≥44px на мобиле (иконки шапки и т.п.).
============================================================ */
@media (max-width: 768px) {
.app-ov .header-icon-btn,
.app-ov .ov-mobile-theme-toggle,
.app-ov .mobile-header button {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ============================================================
Отчёт #9 — overlay-категория FAQ «Работа с личным кабинетом».
============================================================ */
.app-ov .faq-view .ov-faq-extra .ov-faq-extra-header { cursor: pointer; }
.app-ov .faq-view .ov-faq-extra .toggle-btn { transition: transform .2s; }
.app-ov .faq-view .ov-faq-extra.ov-faq-open .toggle-btn { transform: rotate(180deg); }
/* Контейнер под-вопросов: повторяем нативный .category-content (flex-колонка,
gap между карточками), показываем только при раскрытой категории. */
.app-ov .faq-view .ov-faq-extra .ov-faq-extra-body { display: none; }
.app-ov .faq-view .ov-faq-extra.ov-faq-open .ov-faq-extra-body {
display: flex; flex-direction: column; gap: 12px; padding: 0 20px 20px;
}
/* Под-вопросы используют нативные классы .faq-item / .item-header /
.item-question / .toggle-btn-small — вид карточки приходит из scoped-CSS
(data-v штампуется на потомков категории). Здесь — только раскрытие/ответ. */
.app-ov .faq-view .ov-faq-q .item-header { cursor: pointer; }
.app-ov .faq-view .ov-faq-q .toggle-btn-small { transition: transform .2s; flex-shrink: 0; }
.app-ov .faq-view .ov-faq-q.ov-faq-q-open .toggle-btn-small { transform: rotate(180deg); }
.app-ov .faq-view .ov-faq-q-body { display: none; padding: 0 20px 18px; }
.app-ov .faq-view .ov-faq-q.ov-faq-q-open .ov-faq-q-body { display: block; }
.app-ov .faq-view .ov-faq-q-body p { margin: 0; font-size: 14px; line-height: 1.6; color: #4a5058; }
[data-theme="dark"] .app-ov .faq-view .ov-faq-q-body p { color: #94a3b8; }
/* ------------------------------------------------------------------ */
/* Тёмная тема: нативные тексты, не адаптированные под dark. */
/* Договоры (.plot-card, scoped data-v-5fbd1985): сумма/название/строки */
/* таблицы шли цветом rgb(3,8,19) ≈ чёрным на тёмном фоне → нечитаемо. */
[data-theme="dark"] .main-content .plot-card .plot-village,
[data-theme="dark"] .main-content .plot-card .value.num,
[data-theme="dark"] .main-content .plot-card .td.title,
[data-theme="dark"] .main-content .plot-card .td.date,
[data-theme="dark"] .main-content .plot-card .td.amount.num { color: #e2e8f0; }
/* Чат (.chat-layout, scoped data-v-544eaf98): контейнер оставался белым в */
/* dark → под списком сообщений на мобиле торчало белое поле. */
[data-theme="dark"] .main-content .chat-layout { background: transparent; }
/* ============================================================
Отчёт #13 — панель «Управление диалогом» (.chat-staff-sheet,
открывается «Действия» в админ-чате) верхним краем уходила под
топбар (h64) — заголовок/подзаголовок обрезались. Опускаем контент.
============================================================ */
.app-ov .chat-staff-sheet { padding-top: 76px !important; }
/* ============================================================
Страница смены пароля (overlay) — /my/change-password.
Рендерится app-overlay.js в .main-content (Vue-роут 404-ит).
============================================================ */
.app-ov .ov-cp-page {
display: flex;
justify-content: center;
padding: 8px 0 40px;
}
.app-ov .ov-cp-card {
width: 100%;
max-width: 460px;
background: #ffffff;
border: 1px solid #e3e7eb;
border-radius: 20px;
padding: 28px;
}
.app-ov .ov-cp-head { margin-bottom: 20px; }
.app-ov .ov-cp-back {
display: inline-block;
font-size: 13px;
color: #00bf3f;
text-decoration: none;
margin-bottom: 12px;
}
.app-ov .ov-cp-back:hover { text-decoration: underline; }
.app-ov .ov-cp-title {
font-family: 'TT Wellingtons', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 24px;
font-weight: 700;
color: #030813;
margin: 0 0 6px;
}
.app-ov .ov-cp-sub {
font-size: 14px;
color: #4a5058;
line-height: 1.5;
margin: 0;
}
.app-ov .ov-cp-form .field { margin-bottom: 18px; }
.app-ov .ov-cp-form .field > label {
display: block;
font-size: 13px;
font-weight: 600;
color: #4a5058;
margin-bottom: 6px;
}
.app-ov .ov-cp-form .field > input {
width: 100%;
box-sizing: border-box;
height: 46px;
padding: 0 14px;
font-size: 15px;
font-family: inherit;
color: #030813;
background: #f9fbfc;
border: 1px solid #e3e7eb;
border-radius: 12px;
outline: none;
transition: border-color .15s, background .15s;
}
.app-ov .ov-cp-form .field > input:focus {
border-color: #00bf3f;
background: #ffffff;
}
.app-ov .ov-cp-status {
font-size: 14px;
line-height: 1.45;
margin: 4px 0 14px;
min-height: 1px;
}
.app-ov .ov-cp-status[data-state="ok"] { color: #06ac3e; }
.app-ov .ov-cp-status[data-state="err"] { color: #db2b04; }
.app-ov .ov-cp-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.app-ov .ov-cp-cancel {
font-size: 15px;
color: #4a5058;
text-decoration: none;
padding: 12px 16px;
border-radius: 12px;
}
.app-ov .ov-cp-cancel:hover { background: rgba(0,0,0,0.04); }
.app-ov .ov-cp-submit {
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #00BF3F, #06AC3E);
border: none;
border-radius: 12px;
padding: 12px 28px;
cursor: pointer;
transition: opacity .15s, transform .15s;
}
.app-ov .ov-cp-submit:hover { opacity: .92; }
.app-ov .ov-cp-submit:active { transform: scale(.98); }
.app-ov .ov-cp-submit:disabled { opacity: .6; cursor: default; }
/* Dark theme */
[data-theme="dark"] .app-ov .ov-cp-card {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme="dark"] .app-ov .ov-cp-title { color: #e2e8f0; }
[data-theme="dark"] .app-ov .ov-cp-sub,
[data-theme="dark"] .app-ov .ov-cp-form .field > label { color: #94a3b8; }
[data-theme="dark"] .app-ov .ov-cp-form .field > input {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .app-ov .ov-cp-form .field > input:focus { border-color: #00BF3F !important; }
[data-theme="dark"] .app-ov .ov-cp-cancel { color: #94a3b8; }
[data-theme="dark"] .app-ov .ov-cp-cancel:hover { background: rgba(255,255,255,0.06); }
/* ------------------------------------------------------------------ */
/* Дашборд-виджет «Заявки в офис»: в узкой колонке кнопки */
/* Перенести / Отменить / Связаться не влезали в один ряд с датой и */
/* статусом (.appointment-header-row = flex nowrap) и «Связаться» */
/* обрезалось. Разрешаем перенос строки — кнопки уходят на след. строку.*/
.app-ov .appointment-header-row { flex-wrap: wrap; row-gap: 8px; }
.app-ov .appointment-actions { flex-wrap: wrap; gap: 6px 14px; }
/* ------------------------------------------------------------------ */
/* Тёмная тема — страница «Оплата ЖКУ» (.payments-view, data-v-3e9806bc).*/
/* У вью НЕ было dark-переопределений → карточки/поля/чекбокс оставались */
/* светлыми с тёмным текстом («белые поля, чёрный шрифт»). */
[data-theme="dark"] .main-content .intro-pill,
[data-theme="dark"] .main-content .current-payment-card,
[data-theme="dark"] .main-content .compact-disclosure,
[data-theme="dark"] .main-content .checkbox-row,
[data-theme="dark"] .main-content .payment-request-card,
[data-theme="dark"] .main-content .notice-card,
[data-theme="dark"] .main-content .history-item {
background: #1e293b; border-color: #334155; color: #e2e8f0;
}
[data-theme="dark"] .main-content .summary-chip,
[data-theme="dark"] .main-content .field-input,
[data-theme="dark"] .main-content .detail-tile,
[data-theme="dark"] .main-content .note-box,
[data-theme="dark"] .main-content .history-meta-chip,
[data-theme="dark"] .main-content .history-counter,
[data-theme="dark"] .main-content .ghost-btn {
background: #0f172a; border-color: #334155; color: #e2e8f0;
}
[data-theme="dark"] .main-content .field-input::placeholder { color: #64748b; }
[data-theme="dark"] .main-content .note-box { color: #cbd5e1; }
/* ------------------------------------------------------------------ */
/* Сайдбар на невысоких экранах (ноутбук 14", мобильная шторка): нижняя */
/* кнопка «Выход» уезжала под вьюпорт. Прокручиваем ВЕСЬ сайдбар целиком */
/* (не nav внутри — иначе админ-секция «Записи в офис/на просмотр» */
/* уходила во внутренний скролл nav и пропадала). Футер не сжимается. */
.app-ov .sidebar-inner { min-height: 0; overflow-y: auto; }
.app-ov .sidebar-inner .sidebar-footer { flex-shrink: 0; }
/* ------------------------------------------------------------------ */
/* Оплата ЖКУ — баннер предоплаты «оплачено вперёд до …» + подсказка */
/* про минимум (данные из PaymentsService, нативный Vue их не выводит). */
.app-ov .ov-pay-banner { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.app-ov .ov-pay-banner-row {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4;
}
.app-ov .ov-pay-banner-ok { background: #ecfdf3; color: #067647; border: 1px solid #a6f4c5; }
.app-ov .ov-pay-banner-ic {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: #16b34a; color: #fff; font-size: 13px; font-weight: 700;
}
.app-ov .ov-pay-banner-hint { font-size: 13px; line-height: 1.5; color: #64748b; padding: 0 2px; }
.app-ov .ov-pay-banner-hint b { color: #334155; }
[data-theme="dark"] .app-ov .ov-pay-banner-ok { background: rgba(22,179,74,0.12); color: #4ade80; border-color: rgba(22,179,74,0.35); }
[data-theme="dark"] .app-ov .ov-pay-banner-hint { color: #94a3b8; }
[data-theme="dark"] .app-ov .ov-pay-banner-hint b { color: #cbd5e1; }
/* Оплата ЖКУ — живое подтверждение списываемой суммы (реагирует на ручной ввод). */
.app-ov .ov-pay-tobill {
margin: -4px 0 10px; padding: 10px 14px; border-radius: 12px;
background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d;
font-size: 14px; line-height: 1.4;
}
.app-ov .ov-pay-tobill b { color: #166534; font-weight: 700; }
[data-theme="dark"] .app-ov .ov-pay-tobill { background: rgba(22,179,74,0.10); border-color: rgba(22,179,74,0.32); color: #4ade80; }
[data-theme="dark"] .app-ov .ov-pay-tobill b { color: #86efac; }
/* ------------------------------------------------------------------ */
/* Тёмная тема — запись в офис (myOfficeBookingView, data-v-5cec6f2a). */
/* Пустые состояния «Ближайшая запись»/история (.inline-empty-state, */
/* .history-empty-state) оставались светлыми (#f8f9fa) на тёмном блоке — */
/* белая карточка с лишними скруглёнными углами. */
[data-theme="dark"] .main-content .inline-empty-state,
[data-theme="dark"] .main-content .history-empty-state {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
}
[data-theme="dark"] .main-content .suggestions-box {
background: rgba(237, 164, 47, 0.10);
border-color: rgba(237, 164, 47, 0.30);
}
/* ------------------------------------------------------------------ */
/* Тёмная тема — добор пропущенных мест. */
/* #2 Поле даты (input[type=date].date-input): на iOS Safari нативный */
/* контрол игнорит CSS color → текст даты тёмный. color-scheme + fill. */
[data-theme="dark"] .main-content .date-input,
[data-theme="dark"] .main-content input[type="date"] {
color-scheme: dark;
-webkit-text-fill-color: #e2e8f0;
}
/* #3 Топ-карточки договоров (.summary-value.num): «Участков/Договоров/ */
/* Общая сумма» шли цветом rgb(3,8,19) на тёмном. «Оплачено» (.paid) — */
/* зелёное, не трогаем. */
[data-theme="dark"] .main-content .summary-value.num:not(.paid) { color: #e2e8f0; }
/* ------------------------------------------------------------------ */
/* Мобильный сайдбар: нижние кнопки (Запись в офис / Выход) уходили за */
/* нижний бар браузера (iOS Safari). 100dvh = видимая высота (без бара),*/
/* + safe-area снизу под home-indicator. */
.app-ov .sidebar { height: 100dvh; }
.app-ov .sidebar-inner .sidebar-footer { margin-bottom: calc(35px + env(safe-area-inset-bottom)); }
/* ------------------------------------------------------------------ */
/* Dark mode: добитые чёрные шрифты (rgb(3,8,19)) — зашитый светлый */
/* --color-text без dark-варианта в scoped-компонентах. */
/* Запись в офис: лейблы полей ( без класса внутри .field), */
/* "Мои записи" (.history-primary) и кнопка "Отменить запись". */
[data-theme="dark"] .main-content .appointment-page .field > span,
[data-theme="dark"] .main-content .appointment-page .field > label,
[data-theme="dark"] .main-content .appointment-page .history-primary {
color: #e2e8f0 !important;
-webkit-text-fill-color: #e2e8f0 !important;
}
[data-theme="dark"] .main-content .appointment-page .history-secondary,
[data-theme="dark"] .main-content .appointment-page .history-main > *:not(.history-primary) {
color: #94a3b8 !important;
-webkit-text-fill-color: #94a3b8 !important;
}
[data-theme="dark"] .main-content .appointment-page .cancel-btn {
background: rgba(248, 113, 113, 0.08) !important;
color: #fca5a5 !important;
-webkit-text-fill-color: #fca5a5 !important;
border-color: rgba(248, 113, 113, 0.5) !important;
}
[data-theme="dark"] .main-content .appointment-page .cancel-btn:hover {
background: rgba(248, 113, 113, 0.18) !important;
}
/* Оплата ЖКУ: название договора в "Детали договора" и текст чекбокса */
/* "Подтверждаю оплату". (-webkit-text-fill-color нужен — WebKit/iOS */
/* перекрывает color при отрисовке текста.) */
[data-theme="dark"] .main-content .payments-view .compact-disclosure__title,
[data-theme="dark"] .main-content .payments-view .checkbox-row__text {
color: #e2e8f0 !important;
-webkit-text-fill-color: #e2e8f0 !important;
}
/* Бейдж непрочитанных в списке диалогов: зелёный кружок на зелёном логотип-
аватаре плохо виден → кольцо цвета фона делает счётчик читаемым + жирнее. */
.chats-panel .avatar-badge {
border: 2px solid #fff;
font-weight: 700;
z-index: 2;
}
[data-theme="dark"] .chats-panel .avatar-badge {
border-color: #0f172a;
}