/* ───────────────────────────────────────────────────────────────── Light-theme overrides. This file is loaded LAST so its rules win over the rest of the cascade without resorting to `!important` more than necessary. Strategy: we don't rewrite the dark stylesheets — we surgically re-point the visible "skin" of the app (page bg, surfaces, text, borders, scrollbars) when `` is set. Rules of thumb: 1. `rgba(255,255,255,X)` is used everywhere as a soft white tint on top of dark surfaces. On a light background that becomes invisible. We invert these to `rgba(0,0,0,X*1.5)`. 2. `rgba(0,0,0,X)` is used both as a backdrop AND as an inset surface for inputs/toolbars. We keep darkroom backdrops (modal dim) but lighten the inset surfaces. 3. Pure white `#fff`, near-white `#e8e8ec` text → near-black. 4. Brand teal `#4ECDC4` and other accents are preserved. ───────────────────────────────────────────────────────────────── */ /* ============================================================== */ /* 1. Foundation — page surface + global text */ /* ============================================================== */ html[data-theme="light"] body { color: var(--text-1); } /* Base scrollbar styling — match the lighter palette. */ html[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(15, 18, 24, 0.18); } html[data-theme="light"] *::-webkit-scrollbar-track { background: transparent; } html[data-theme="light"] { scrollbar-color: rgba(15, 18, 24, 0.18) transparent; } /* ============================================================== */ /* 2. The card (auth + admin shell) */ /* ============================================================== */ html[data-theme="light"] .card { background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 253, 0.96)); border: 1px solid rgba(15, 18, 24, 0.08); box-shadow: 0 16px 45px rgba(15, 23, 42, 0.10); } /* ============================================================== */ /* 3. Toast (top of the page) */ /* ============================================================== */ html[data-theme="light"] .toast { background: rgba(255, 255, 255, 0.96); color: #111827; border-color: rgba(15, 18, 24, 0.12); box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .toast.toast-success { background: rgba(220, 252, 231, 0.95); color: #065f46; border-color: rgba(34, 197, 94, 0.4); } html[data-theme="light"] .toast.toast-error { background: rgba(254, 226, 226, 0.95); color: #991b1b; border-color: rgba(239, 68, 68, 0.4); } html[data-theme="light"] .toast.toast-warning { background: rgba(254, 243, 199, 0.95); color: #92400e; border-color: rgba(245, 158, 11, 0.4); } /* ============================================================== */ /* 4. Auth panel */ /* ============================================================== */ html[data-theme="light"] .auth-header-bg { background: linear-gradient(145deg, rgba(78, 205, 196, 0.12) 0%, rgba(56, 168, 157, 0.06) 40%, rgba(244, 246, 250, 0.7) 100%); border-color: rgba(78, 205, 196, 0.18); } html[data-theme="light"] .auth-grid { background-image: linear-gradient(rgba(78, 205, 196, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 205, 196, 0.06) 1px, transparent 1px); } html[data-theme="light"] .auth-orb { opacity: 0.35; } html[data-theme="light"] .auth-hero-title { color: #1c1f24; } html[data-theme="light"] .auth-hero-sub { color: #5b6473; } html[data-theme="light"] .auth-tabs { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .auth-tab { color: #6b7280; } html[data-theme="light"] .auth-tab:not(.active):hover { color: #374151; } html[data-theme="light"] .auth-tab-indicator { background: rgba(78, 205, 196, 0.14); border-color: rgba(78, 205, 196, 0.28); } html[data-theme="light"] .auth-field { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .auth-field:focus-within { background: rgba(78, 205, 196, 0.06); border-color: rgba(78, 205, 196, 0.5); box-shadow: 0 0 0 3.5px rgba(78, 205, 196, 0.10); } html[data-theme="light"] .auth-field-icon { color: #9ca3af; } html[data-theme="light"] .auth-input { color: #1c1f24; } html[data-theme="light"] .auth-input::placeholder { color: #9ca3af; } html[data-theme="light"] .auth-field:focus-within .auth-input::placeholder { color: #6b7280; } html[data-theme="light"] .auth-eye { color: #9ca3af; } html[data-theme="light"] .auth-pass-hint { color: #9ca3af; } html[data-theme="light"] .auth-dropdown-value { color: #1c1f24; } html[data-theme="light"] .auth-dropdown-value.placeholder { color: #9ca3af; } html[data-theme="light"] .auth-dropdown-arrow { color: #9ca3af; } html[data-theme="light"] .auth-dropdown-menu { background: rgba(255, 255, 255, 0.98); border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(78, 205, 196, 0.06); } html[data-theme="light"] .auth-dropdown-item { color: #6b7280; } html[data-theme="light"] .auth-dropdown-item:hover { color: #1c1f24; background: rgba(78, 205, 196, 0.08); } html[data-theme="light"] .auth-dropdown-item.active { color: #38a89d; background: rgba(78, 205, 196, 0.12); } /* ============================================================== */ /* 5. Generic inputs / textarea / .btn / .tab */ /* ============================================================== */ html[data-theme="light"] input:not(.filter-input):not(.auth-input):not(.wsch-finput-el):not(.wsch-tgl-cb), html[data-theme="light"] textarea { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); } html[data-theme="light"] input:not(.filter-input):not(.auth-input):not(.wsch-finput-el):not(.wsch-tgl-cb)::placeholder, html[data-theme="light"] textarea::placeholder { color: rgba(15, 18, 24, 0.42); } html[data-theme="light"] input:not(.filter-input):not(.auth-input):not(.wsch-finput-el):not(.wsch-tgl-cb):focus, html[data-theme="light"] textarea:focus { background: rgba(78, 205, 196, 0.08); border-color: #4ECDC4; } html[data-theme="light"] .btn { border-color: rgba(15, 18, 24, 0.10); color: #08322f; box-shadow: 0 10px 24px rgba(78, 205, 196, 0.30); } html[data-theme="light"] .tab { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.08); color: var(--text-1); } /* ============================================================== */ /* 6. Settings sheet */ /* ============================================================== */ html[data-theme="light"] .settings-sheet { background: rgba(15, 23, 42, 0.35); } html[data-theme="light"] .settings-panel { background: rgba(255, 255, 255, 0.99); border-color: rgba(15, 18, 24, 0.08); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25), 0 0 30px rgba(78, 205, 196, 0.06); } html[data-theme="light"] .settings-close-btn { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.08); color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .stg-profile { border-bottom-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .stg-username { color: #111827; } html[data-theme="light"] .stg-section { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .stg-section-title { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .stg-row { border-top-color: rgba(15, 18, 24, 0.05); } html[data-theme="light"] .stg-row:hover { background: rgba(15, 18, 24, 0.04); } html[data-theme="light"] .stg-row-label { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .stg-row-arrow { color: rgba(15, 18, 24, 0.28); } html[data-theme="light"] .stg-row-value { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .stg-form-panel { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .stg-form-title { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .stg-form-hint { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .stg-input, html[data-theme="light"] .stg-select-full { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); } html[data-theme="light"] .stg-input::placeholder { color: rgba(15, 18, 24, 0.40); } html[data-theme="light"] .stg-select-full option { background: #fff; color: var(--text-1); } html[data-theme="light"] .stg-select { background-color: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .stg-select option { background: #fff; color: var(--text-1); } html[data-theme="light"] .stg-btn-secondary { background: rgba(15, 18, 24, 0.05); color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .stg-btn-secondary:hover { background: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .stg-toggle-slider { background: rgba(15, 18, 24, 0.10); border-color: rgba(15, 18, 24, 0.12); } html[data-theme="light"] .stg-toggle-slider::before { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); } html[data-theme="light"] .stg-toggle input:checked + .stg-toggle-slider { background: rgba(78, 205, 196, 0.45); border-color: rgba(78, 205, 196, 0.45); } html[data-theme="light"] .stg-toggle input:checked + .stg-toggle-slider::before { background: #fff; box-shadow: 0 0 6px rgba(78, 205, 196, 0.45), 0 1px 3px rgba(15, 23, 42, 0.25); } html[data-theme="light"] .stg-range { background: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .stg-range-val { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .stg-version { color: rgba(15, 18, 24, 0.25); } /* ── Theme picker (specific to the new "Внешний вид" section) ── */ html[data-theme="light"] .stg-theme-picker { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .stg-theme-opt { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .stg-theme-opt.active { background: #fff; color: #38a89d; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10); } /* ============================================================== */ /* 7. Workspace strip + #btnSettings */ /* ============================================================== */ html[data-theme="light"] #btnSettings { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.55); box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); } html[data-theme="light"] #btnSettings:hover { color: #38a89d; background: rgba(78, 205, 196, 0.10); border-color: rgba(78, 205, 196, 0.30); } html[data-theme="light"] .workspace-strip { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.08); box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .ws-slide { color: rgba(15, 18, 24, 0.50); } html[data-theme="light"] .ws-slide:hover { color: rgba(15, 18, 24, 0.78); background: rgba(15, 18, 24, 0.04); } html[data-theme="light"] .ws-slide.active { color: #1c1f24; background: #fff; border-color: rgba(15, 18, 24, 0.08); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12), 0 0 12px var(--ws-glow, rgba(78,205,196,0.18)); } /* ============================================================== */ /* 8. Action bar (bottom) */ /* ============================================================== */ html[data-theme="light"] .action-bar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 246, 250, 0.96) 100%); border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12), 0 12px 48px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(15, 23, 42, 0.05); } html[data-theme="light"] .action-btn { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .action-btn::after { background: linear-gradient(180deg, transparent 0%, rgba(15, 18, 24, 0.10) 30%, rgba(15, 18, 24, 0.10) 70%, transparent 100%); } html[data-theme="light"] .action-btn:hover .action-btn-bg { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.06); } /* The active glow + colored icon already work in light mode (the per-button accent variables are bright enough). We just unfilter the icons a bit so they don't look washed-out on white. */ html[data-theme="light"] .action-icon { filter: brightness(0.9) saturate(0.95) grayscale(0.15); } html[data-theme="light"] .action-btn:hover .action-icon { filter: brightness(1) saturate(1) grayscale(0); } /* ============================================================== */ /* 9. Generic overlays / modals (modules.css surface palette) */ /* Catches the dozens of `rgba(0,0,0,X)` and dark-grey panels */ /* across modules.css / estimates.css / notifications.css. */ /* ============================================================== */ /* Overlay-card and overlay-content base text. */ html[data-theme="light"] .overlay-card { background: #ffffff; border-color: rgba(15, 18, 24, 0.08); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .overlay-content { color: var(--text-1); } html[data-theme="light"] .overlay-title { color: #111827; } html[data-theme="light"] .overlay-close { background: rgba(15, 18, 24, 0.06); color: rgba(15, 18, 24, 0.55); } /* Anything used as a translucent dark inset surface (toolbars, inputs, chips that use `rgba(0,0,0,0.2..0.5)`) gets re-skinned to a very light gray so it stays visible on white. */ html[data-theme="light"] .overlay-content [style*="rgba(0, 0, 0"], html[data-theme="light"] .overlay-content [style*="rgba(0,0,0"] { /* No-op selector — kept as a marker. Inline styles can't be overridden from CSS without `!important` on every property, and we don't have any inline dark-bg styles that matter. */ } /* ============================================================== */ /* 10. Estimates / Soprovod / Photo report — major surfaces */ /* The selectors below are intentionally specific so we only */ /* hit modal/panel containers, not every random rgba in CSS. */ /* ============================================================== */ /* Photo upload modal & similar full-screen modals (e.g. the photo slot editor used in Сметы / Сопровождения). */ html[data-theme="light"] .modal-photo-upload, html[data-theme="light"] .photo-modal, html[data-theme="light"] .photo-modal-content, html[data-theme="light"] .photo-modal-body, html[data-theme="light"] .estimate-modal, html[data-theme="light"] .estimate-modal-content, html[data-theme="light"] .est-modal-content, html[data-theme="light"] .pr-modal-content, html[data-theme="light"] .pr-modal, html[data-theme="light"] .sopr-modal, html[data-theme="light"] .sopr-modal-content { background: #ffffff; color: var(--text-1); border-color: rgba(15, 18, 24, 0.08); } /* Sticky / floating "chelka" handles used in мобильных модалках. */ html[data-theme="light"] .pr-float-chelka, html[data-theme="light"] .wsch-wp-chelka, html[data-theme="light"] .pl-sim-handle { background: rgba(15, 18, 24, 0.04); color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .pr-float-chelka:hover, html[data-theme="light"] .wsch-wp-chelka:hover, html[data-theme="light"] .pl-sim-handle:hover { background: rgba(15, 18, 24, 0.08); } /* Estimate / Soprovod row cards (the big grey "items" lists). */ html[data-theme="light"] .estimate-item, html[data-theme="light"] .estimate-card, html[data-theme="light"] .est-item, html[data-theme="light"] .est-card, html[data-theme="light"] .sopr-item, html[data-theme="light"] .sopr-card, html[data-theme="light"] .pr-item, html[data-theme="light"] .pr-card { background: #ffffff; border-color: rgba(15, 18, 24, 0.08); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); } /* Photo slot tile (the dark squares that hold photos before upload). They look painfully dark on a light page. */ html[data-theme="light"] .photo-slot, html[data-theme="light"] .ph-slot, html[data-theme="light"] .pr-slot { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.08); } /* ============================================================== */ /* 11. Filter bar / chips */ /* ============================================================== */ html[data-theme="light"] .filter-bar, html[data-theme="light"] .filters-panel { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .filter-input, html[data-theme="light"] .filter-select, html[data-theme="light"] .chip { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); } html[data-theme="light"] .filter-input::placeholder { color: rgba(15, 18, 24, 0.40); } /* ============================================================== */ /* 12. Dropdowns (.dropdown-menu, .select-menu, etc.) */ /* ============================================================== */ html[data-theme="light"] .dropdown-menu, html[data-theme="light"] .select-menu, html[data-theme="light"] .ctx-menu, html[data-theme="light"] .menu-pop, html[data-theme="light"] .ws-menu { background: #ffffff; border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.20); } html[data-theme="light"] .select-option, html[data-theme="light"] .dropdown-item, html[data-theme="light"] .ctx-menu-item { color: rgba(15, 18, 24, 0.75); } html[data-theme="light"] .select-option:hover, html[data-theme="light"] .dropdown-item:hover, html[data-theme="light"] .ctx-menu-item:hover { background: rgba(78, 205, 196, 0.10); color: #1c1f24; } /* ============================================================== */ /* 13. Notifications panel */ /* ============================================================== */ html[data-theme="light"] .notif-panel, html[data-theme="light"] .um-panel, html[data-theme="light"] .notifications-panel { background: #ffffff; border-color: rgba(15, 18, 24, 0.08); color: var(--text-1); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .notif-item, html[data-theme="light"] .um-item, html[data-theme="light"] .notification-item { background: rgba(15, 18, 24, 0.02); border-color: rgba(15, 18, 24, 0.06); color: var(--text-1); } /* ============================================================== */ /* 14. Universal "white-tint" surfaces */ /* */ /* The codebase uses `rgba(255,255,255,0.02..0.10)` as soft inset */ /* tints on dark surfaces. On a light card those become invisible. */ /* We can't blanket-replace inline rgba in CSS, but we can re-skin */ /* the most used utility classes that share this pattern. */ /* ============================================================== */ html[data-theme="light"] .um-row, html[data-theme="light"] .stat-card, html[data-theme="light"] .info-row, html[data-theme="light"] .panel-row, html[data-theme="light"] .info-card { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.06); color: var(--text-1); } /* ============================================================== */ /* 15. Small text utilities — re-skin "muted" / "hint" classes */ /* ============================================================== */ html[data-theme="light"] .text-muted, html[data-theme="light"] .hint, html[data-theme="light"] .subtle, html[data-theme="light"] .small { color: var(--text-muted); } /* ============================================================== */ /* 16. Make sure native form controls match the scheme */ /* ============================================================== */ html[data-theme="light"] select { color-scheme: light; } html[data-theme="light"] option { color: var(--text-1); background: #fff; } /* ============================================================== */ /* 17. Generic "card-like" panels we missed */ /* Many modules wrap content in
. */ /* ============================================================== */ html[data-theme="light"] .panel, html[data-theme="light"] .pane, html[data-theme="light"] .box, html[data-theme="light"] .module-panel { background: rgba(255, 255, 255, 0.96); border-color: rgba(15, 18, 24, 0.08); color: var(--text-1); } /* ============================================================== */ /* 18. Theme-aware `` is updated from JS */ /* ============================================================== */ /* ============================================================== */ /* 19. ESTIMATES module — every major surface */ /* (matches the actual class names used in estimates.css) */ /* ============================================================== */ /* Backdrops — keep the dim but lighten so they don't go pitch black */ html[data-theme="light"] .est-modal-overlay, html[data-theme="light"] .est-archive-overlay, html[data-theme="light"] .est-confirm-overlay { background: rgba(15, 23, 42, 0.30); } /* Modal window cards */ html[data-theme="light"] .est-modal-window-small, html[data-theme="light"] .est-modal-window-large, html[data-theme="light"] .est-edit-card, html[data-theme="light"] .est-archive-card, html[data-theme="light"] .est-archive-card-wide, html[data-theme="light"] .est-confirm-card { background: #ffffff; border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.20); } html[data-theme="light"] .est-upload-card { background: linear-gradient(170deg, #ffffff 0%, #f5f7fb 100%); border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 18, 24, 0.04); } html[data-theme="light"] .est-photo-window { background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%); border-color: rgba(96, 165, 250, 0.18); } /* Headers and content — tints + text */ html[data-theme="light"] .est-modal-header { background: linear-gradient(180deg, rgba(15, 18, 24, 0.04) 0%, rgba(15, 18, 24, 0.01) 100%); border-bottom-color: rgba(96, 165, 250, 0.20); } html[data-theme="light"] .est-modal-content { color: var(--text-1); } html[data-theme="light"] .est-upload-title { color: #111827; } html[data-theme="light"] .est-upload-hint { color: rgba(15, 18, 24, 0.50); } html[data-theme="light"] .est-confirm-title { color: #111827; } html[data-theme="light"] .est-confirm-msg { color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .est-archive-title { color: #111827; } html[data-theme="light"] .est-archive-empty { color: rgba(15, 18, 24, 0.50); } /* Slide preview frames — these are dark for the PPTX content. */ html[data-theme="light"] .est-slide-wrapper { background: #f3f4f8; border-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .est-slide-zoom-overlay { background: rgba(15, 23, 42, 0.85); } html[data-theme="light"] .est-zoom-slide-frame { background: #1a1d24; } /* Floating zoom island (toolbar that hovers over slides) */ html[data-theme="light"] .est-zoom-island { background: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .est-zoom-back-btn, html[data-theme="light"] .est-zoom-close-btn { color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .est-zoom-item-title { color: #111827; } html[data-theme="light"] .est-zoom-slide-count { color: rgba(15, 18, 24, 0.55); } /* Estimate position list rows */ html[data-theme="light"] .est-pos-row, html[data-theme="light"] .est-pos-item, html[data-theme="light"] .est-edit-item { background: #ffffff; border-color: rgba(15, 18, 24, 0.08); color: var(--text-1); } html[data-theme="light"] .est-pos-name, html[data-theme="light"] .est-item-name, html[data-theme="light"] .est-section-name { color: #111827; } html[data-theme="light"] .est-pos-comment-body { background: rgba(15, 18, 24, 0.03); color: rgba(15, 18, 24, 0.78); border-color: rgba(15, 18, 24, 0.06); } /* Stats / footer / dividers / badges */ html[data-theme="light"] .est-stat-num { color: #111827; } html[data-theme="light"] .est-stat-label { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .est-stat-divider { background: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .est-footer-sep { color: rgba(15, 18, 24, 0.35); } /* Group headers (categories / equipment / zones) */ html[data-theme="light"] .est-cat-header, html[data-theme="light"] .est-eq-header, html[data-theme="light"] .est-zone-header { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.06); color: var(--text-1); } html[data-theme="light"] .est-cat-label, html[data-theme="light"] .est-eq-label, html[data-theme="light"] .est-zone-label { color: #111827; } html[data-theme="light"] .est-cat-arrow, html[data-theme="light"] .est-eq-arrow, html[data-theme="light"] .est-zone-arrow { color: rgba(15, 18, 24, 0.40); } /* Skeleton loaders (light mode shimmer) */ html[data-theme="light"] .est-skel-row { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .est-skel-line, html[data-theme="light"] .est-skel-tile { background: linear-gradient(90deg, rgba(15, 18, 24, 0.05) 0%, rgba(15, 18, 24, 0.12) 50%, rgba(15, 18, 24, 0.05) 100%); background-size: 200px 100%; border-color: rgba(15, 18, 24, 0.06); } /* Photo modal helpers */ html[data-theme="light"] .est-pm-title { color: #111827; } html[data-theme="light"] .est-photo-loading-overlay { background: rgba(15, 23, 42, 0.45); } html[data-theme="light"] .est-upload-placeholder { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.08); color: rgba(15, 18, 24, 0.55); } /* Archive list rows */ html[data-theme="light"] .est-archive-row { background: rgba(15, 18, 24, 0.02); border-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .est-archive-row .ev { color: var(--text-1); } html[data-theme="light"] .est-archive-row .dt { color: rgba(15, 18, 24, 0.55); background: rgba(15, 18, 24, 0.05); } /* Confirm dialog buttons */ html[data-theme="light"] .est-confirm-cancel { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .est-confirm-cancel:hover { background: rgba(15, 18, 24, 0.10); } /* Edit-right gradient (lighter, less contrast) */ html[data-theme="light"] .est-edit-right { background: linear-gradient(180deg, rgba(15, 18, 24, 0.02) 0%, rgba(15, 18, 24, 0.06) 100%); } /* ============================================================== */ /* 20. PHOTO-REPORT module (pr-*) + Soprovod (sopr-*) */ /* ============================================================== */ html[data-theme="light"] [class^="pr-modal"], html[data-theme="light"] [class^="pr-card"], html[data-theme="light"] [class*=" pr-modal"], html[data-theme="light"] [class*=" pr-card"], html[data-theme="light"] .pr-panel, html[data-theme="light"] .pr-list-card, html[data-theme="light"] .pr-popup, html[data-theme="light"] .pr-cmt-popup, html[data-theme="light"] .pr-photo-modal { background: #ffffff; border-color: rgba(15, 18, 24, 0.08); color: var(--text-1); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .pr-float-chelka { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.65); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10); } html[data-theme="light"] .pr-pos-row, html[data-theme="light"] .pr-pos-card, html[data-theme="light"] .pr-list-item { background: rgba(15, 18, 24, 0.02); border-color: rgba(15, 18, 24, 0.06); color: var(--text-1); } /* Soprovod */ html[data-theme="light"] [class^="sopr-modal"], html[data-theme="light"] [class^="sopr-card"], html[data-theme="light"] [class*=" sopr-modal"], html[data-theme="light"] [class*=" sopr-card"], html[data-theme="light"] .sopr-panel { background: #ffffff; border-color: rgba(15, 18, 24, 0.08); color: var(--text-1); } /* ============================================================== */ /* 21. WORKSCHEDULE module (wsch-*) */ /* The biggest module — uses ton of dark surface tints. */ /* ============================================================== */ html[data-theme="light"] .wsch-panel { /* The wsch panel itself is mostly transparent but borders matter. */ border-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .wsch-month-label { color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .wsch-arrow, html[data-theme="light"] .wsch-action-btn { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .wsch-arrow:hover, html[data-theme="light"] .wsch-action-btn:hover { background: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .wsch-top-bar { border-bottom-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .wsch-bar-label { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .wsch-segment { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .wsch-seg-btn { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-palette-bar { background: rgba(255, 255, 255, 0.96); border-top-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .wsch-palette-label { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .wsch-pal-name { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-search-item { color: rgba(15, 18, 24, 0.85); } html[data-theme="light"] .wsch-wp-chelka { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.65); } /* ============================================================== */ /* 22. YANDEX-DISK gallery (yd-*, ya-*) */ /* ============================================================== */ html[data-theme="light"] .yd-toolbar, html[data-theme="light"] .yd-path-bar, html[data-theme="light"] .ya-day-pill { background: rgba(15, 18, 24, 0.04); } html[data-theme="light"] .yd-folder-card { background: linear-gradient(135deg, rgba(167, 139, 250, 0.06) 0%, rgba(167, 139, 250, 0.02) 100%); } html[data-theme="light"] .yd-card-name { color: #1c1f24; } html[data-theme="light"] .yd-card-arrow { color: rgba(167, 139, 250, 0.50); } html[data-theme="light"] .yd-path-part { color: #6b6490; } html[data-theme="light"] .yd-path-current { color: #4c1d95; } html[data-theme="light"] .yd-empty-text { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .yd-empty-hint { color: rgba(15, 18, 24, 0.40); } html[data-theme="light"] .yd-folder-loader { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .yd-card-icon--file { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .yd-upload-contractor { color: #4c1d95; } html[data-theme="light"] .yd-upload-date { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .yd-drop-title { color: #4c1d95; } html[data-theme="light"] .yd-drop-hint { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .ya-gallery-card { background: rgba(255, 255, 255, 0.99); border-color: rgba(167, 139, 250, 0.20); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.20); } html[data-theme="light"] .ya-gallery-title { color: #4c1d95; } html[data-theme="light"] .ya-gnav-label { color: #4c1d95; } html[data-theme="light"] .ya-day-empty { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .ya-gallery-count { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .ya-gallery-item { background: rgba(15, 18, 24, 0.04); } html[data-theme="light"] .ya-photo-viewer { /* Keep dark-room for the photo viewer — light box would burn the eyes. */ background: rgba(8, 10, 14, 0.92); } /* ============================================================== */ /* 23. Catch-all for "card-like" containers we may have missed */ /* Uses class attribute selectors so it covers any *-card, */ /* *-modal, *-window, *-popup we didn't enumerate above. */ /* Skip a few special-purpose classes that should NOT change. */ /* ============================================================== */ html[data-theme="light"] [class*="-modal-window"]:not(.modal-overlay):not(.est-modal-overlay):not([class*="-icon"]):not([class*="-close"]), html[data-theme="light"] [class*="-modal-card"]:not([class*="-icon"]):not([class*="-close"]), html[data-theme="light"] [class*="-popup-card"]:not([class*="-icon"]):not([class*="-close"]), html[data-theme="light"] [class*="-archive-card"]:not([class*="-icon"]):not([class*="-close"]), html[data-theme="light"] [class*="-edit-card"]:not([class*="-icon"]):not([class*="-close"]) { background: #ffffff; border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); } /* ============================================================== */ /* 24. White text overrides — many places hardcode `color: #fff` */ /* or `color: #eee` which is illegible on a light background. */ /* We CAN'T blanket-override `color: #fff` from CSS, but we */ /* can re-skin the most user-facing wrappers here. */ /* ============================================================== */ html[data-theme="light"] .est-modal-content, html[data-theme="light"] .est-edit-card, html[data-theme="light"] .est-photo-window, html[data-theme="light"] .est-confirm-card, html[data-theme="light"] .est-archive-card, html[data-theme="light"] .est-archive-card-wide, html[data-theme="light"] .est-upload-card, html[data-theme="light"] .est-modal-window-small, html[data-theme="light"] .est-modal-window-large, html[data-theme="light"] [class*="pr-modal"], html[data-theme="light"] [class*="sopr-modal"] { color: var(--text-1); } /* Force readable text on common "white-on-dark" headings inside modals. We use `:where()` to keep specificity low so module CSS can still override when it really wants to. */ html[data-theme="light"] :where(.est-modal-window-small, .est-modal-window-large, .est-edit-card, .est-photo-window, .est-confirm-card, .est-archive-card, .est-archive-card-wide, .est-upload-card) :where(h1, h2, h3, h4, h5, h6) { color: #111827; } /* ============================================================== */ /* 25. GRID — events / contractors tables */ /* Both tables drive their look via local CSS custom */ /* properties (--e-bg-*, --c-bg-*, ...). We just re-point */ /* those for the light theme — that flips the whole table. */ /* ============================================================== */ html[data-theme="light"] .events-table { --e-bg-header: #f4f6fa; --e-bg-data: #ffffff; --e-border-thick: 2px solid rgba(78, 205, 196, 0.30); --e-border-thin: 1px solid rgba(15, 18, 24, 0.06); } html[data-theme="light"] .events-table tbody td { /* Original is `color: #ddd`. */ color: #1c1f24 !important; } html[data-theme="light"] .events-table thead th { /* Original is `color: #e8e8ec`. */ color: #111827 !important; } html[data-theme="light"] .events-table tbody td:first-child { /* Original is `color: #fff`. */ color: #111827 !important; } html[data-theme="light"] .grid-table { /* Original is `color: #e8e8ec`. */ color: var(--text-1); } html[data-theme="light"] .contractors-table { --c-bg-header: #eef2f8; --c-bg-data: #ffffff; --c-bg-data-alt: #f7f9fc; --c-border-color: rgba(167, 139, 250, 0.35); --c-grid-line: rgba(15, 18, 24, 0.05); --c-accent: #7c3aed; --c-accent-soft: rgba(167, 139, 250, 0.15); --c-glow: rgba(167, 139, 250, 0.10); } html[data-theme="light"] .contractors-table thead th, html[data-theme="light"] .contractors-table thead th:nth-child(2) { background: linear-gradient(180deg, #f0f3f8 0%, #e6ebf3 100%) !important; color: #4c1d95 !important; } html[data-theme="light"] .contractors-table tbody td.col-contractor { background: linear-gradient(90deg, #ece9f7 0%, #e3def2 100%) !important; color: #6d28d9 !important; box-shadow: 2px 0 8px rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] .contractors-table tbody tr:not(.sep-row):nth-child(even) td.col-contractor { background: linear-gradient(90deg, #ece9f7 0%, #e3def2 100%) !important; } html[data-theme="light"] .contractors-table tbody td.col-fio { color: #4c1d95 !important; box-shadow: 2px 0 6px rgba(15, 23, 42, 0.04) !important; } html[data-theme="light"] .contractors-table .sep-row > * { background: linear-gradient(180deg, #f3eefe 0%, #ece5fa 100%) !important; color: #4c1d95 !important; } html[data-theme="light"] .header-row-cell { background: linear-gradient(180deg, #f0f3f8 0%, #e6ebf3 100%) !important; color: #4c1d95 !important; } html[data-theme="light"] #contrGridBody { background: #f4f6fa; box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.05); } html[data-theme="light"] .graph-zone, html[data-theme="light"] .contr-graph-zone { background: rgba(255, 255, 255, 0.75); border-color: rgba(15, 18, 24, 0.08); box-shadow: inset 0 1px 0 rgba(15, 18, 24, 0.03); } html[data-theme="light"] #ws-contractors .contr-graph-zone { border-color: rgba(167, 139, 250, 0.20); background: linear-gradient(180deg, rgba(167, 139, 250, 0.04) 0%, rgba(255, 255, 255, 0.85) 100%); box-shadow: inset 0 1px 0 rgba(167, 139, 250, 0.10), 0 4px 24px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .graph-header, html[data-theme="light"] .contr-graph-header { color: #1c1f24; } html[data-theme="light"] #gridPlaceholder, html[data-theme="light"] #contrGridPlaceholder { border-color: rgba(167, 139, 250, 0.25); color: rgba(15, 18, 24, 0.55); } /* Tags inside grid cells */ html[data-theme="light"] .role-tag { text-shadow: 0 1px 2px rgba(15, 23, 42, 0.10); } html[data-theme="light"] .tag-role { color: #4c1d95; } html[data-theme="light"] .tag-place { color: #0f6e66; } html[data-theme="light"] .vertical-text { color: #6d28d9; text-shadow: 0 0 12px rgba(167, 139, 250, 0.20); } html[data-theme="light"] .clickable-cell:hover { background: rgba(167, 139, 250, 0.10) !important; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.25); } html[data-theme="light"] .active-cell-highlight { box-shadow: inset 0 0 0 2px var(--c-accent), 0 0 16px rgba(78, 205, 196, 0.20) !important; background: rgba(78, 205, 196, 0.10) !important; } html[data-theme="light"] .contractors-table tbody tr:not(.sep-row):hover td:not(.col-contractor):not(.col-fio):not(.header-row-cell) { background-color: rgba(167, 139, 250, 0.08) !important; } /* ============================================================== */ /* 26. FILTERS (filters.css) */ /* ============================================================== */ html[data-theme="light"] .filter-display, html[data-theme="light"] .select-display, html[data-theme="light"] #dateFilter, html[data-theme="light"] #cDateFilter { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); } html[data-theme="light"] .filter::after, html[data-theme="light"] .select-wrap::after { background: rgba(15, 18, 24, 0.18); } html[data-theme="light"] .filter-menu, html[data-theme="light"] .select-menu { background: rgba(255, 255, 255, 0.99); border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.18); color: var(--text-1); } html[data-theme="light"] .filter-option, html[data-theme="light"] .select-option, html[data-theme="light"] .fav-option { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .filter-option:hover, html[data-theme="light"] .select-option:hover, html[data-theme="light"] .fav-option:hover { background: rgba(15, 18, 24, 0.06); color: #111827; } html[data-theme="light"] .filter-option.active-opt, html[data-theme="light"] .select-option.active-opt, html[data-theme="light"] .fav-option.selected { background: rgba(78, 205, 196, 0.14); color: #0f6e66; border-color: rgba(78, 205, 196, 0.32); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .custom-calendar { background: rgba(255, 255, 255, 0.99); border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18); color: var(--text-1); } html[data-theme="light"] .cal-title { color: #111827; } html[data-theme="light"] .cal-nav-btn { border-color: rgba(15, 18, 24, 0.16); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .cal-nav-btn:hover { background: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .cal-day-name { color: rgba(15, 18, 24, 0.50); } html[data-theme="light"] .cal-day:hover { background: rgba(15, 18, 24, 0.08); } /* ============================================================== */ /* 27. NOTIFICATIONS (notifications.css) */ /* ============================================================== */ html[data-theme="light"] .nv-selector { border-bottom-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .nv-card { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .nv-card:hover { background: rgba(15, 18, 24, 0.06); border-color: rgba(15, 18, 24, 0.18); } html[data-theme="light"] .nv-card-icon { background: rgba(15, 18, 24, 0.06); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .nv-card-active { background: rgba(78, 205, 196, 0.10); border-color: rgba(78, 205, 196, 0.45); } html[data-theme="light"] .nv-card-active:hover { background: rgba(78, 205, 196, 0.14); border-color: rgba(78, 205, 196, 0.55); } html[data-theme="light"] .nv-card-title { color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .nv-card-active .nv-card-title { color: #1c1f24; } html[data-theme="light"] .nv-card-desc { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .notif-loading, html[data-theme="light"] .notif-empty { color: rgba(15, 18, 24, 0.45); } /* ============================================================== */ /* 28. CELL DROPDOWN (grid.css) — appears on cell click */ /* ============================================================== */ html[data-theme="light"] .cell-dropdown-menu { background: rgba(255, 255, 255, 0.99); border-color: rgba(167, 139, 250, 0.30); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(167, 139, 250, 0.08), inset 0 1px 0 rgba(15, 18, 24, 0.02); color: var(--text-1); } html[data-theme="light"] .dropdown-status { background: linear-gradient(180deg, rgba(167, 139, 250, 0.08) 0%, transparent 100%); border-bottom-color: rgba(167, 139, 250, 0.18); } html[data-theme="light"] .dropdown-group-title { color: #6d28d9; background: rgba(167, 139, 250, 0.08); border-bottom-color: rgba(167, 139, 250, 0.12); } html[data-theme="light"] .cell-dropdown-item { border-bottom-color: rgba(15, 18, 24, 0.04); color: var(--text-1); } html[data-theme="light"] .cell-dropdown-item:hover { background: rgba(167, 139, 250, 0.10); } html[data-theme="light"] .dropdown-footer { background: rgba(15, 18, 24, 0.03); border-top-color: rgba(167, 139, 250, 0.18); } /* ============================================================== */ /* 29. WORKSCHEDULE — interactive workers / palette / dialogs */ /* ============================================================== */ html[data-theme="light"] .wsch-wcard, html[data-theme="light"] .wsch-bcard, html[data-theme="light"] .wsch-finput, html[data-theme="light"] .wsch-tgl-track { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); } html[data-theme="light"] .wsch-wcard-name { color: #111827; } html[data-theme="light"] .wsch-finput-el { background: transparent; color: var(--text-1); } html[data-theme="light"] .wsch-finput-el::placeholder { color: rgba(15, 18, 24, 0.40); } html[data-theme="light"] .wsch-tgl-knob { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20); } html[data-theme="light"] .wsch-tgl-cb:checked + .wsch-tgl-track { background: rgba(78, 205, 196, 0.45); border-color: rgba(78, 205, 196, 0.50); } html[data-theme="light"] .wsch-tgl-txt { color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .wsch-dialog-overlay { background: rgba(15, 23, 42, 0.45); } html[data-theme="light"] .wsch-dialog, html[data-theme="light"] .wsch-info-modal { background: rgba(255, 255, 255, 0.99); border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22); } html[data-theme="light"] .wsch-dialog-title, html[data-theme="light"] .wsch-info-title, html[data-theme="light"] .wsch-info-heading, html[data-theme="light"] .wsch-gen-subtitle { color: #111827; } html[data-theme="light"] .wsch-dialog-input { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); } html[data-theme="light"] .wsch-dialog-cancel, html[data-theme="light"] .wsch-dialog-btn:not(.wsch-dialog-ok) { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .wsch-gen-stat-num { color: rgba(15, 18, 24, 0.85); } html[data-theme="light"] .wsch-gen-stat-label { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .wsch-gen-rule { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .wsch-gen-rule-title { color: #111827; } html[data-theme="light"] .wsch-empty, html[data-theme="light"] .wsch-loading, html[data-theme="light"] .wsch-wi-empty { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .wsch-warn-item, html[data-theme="light"] .wsch-warn-more { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .wsch-pp-card, html[data-theme="light"] .wsch-toast, html[data-theme="light"] .wsch-workers-panel { background: rgba(255, 255, 255, 0.98); border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .wsch-pp-name { color: #111827; } html[data-theme="light"] .wsch-pp-row { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .wsch-pp-label { color: rgba(15, 18, 24, 0.50); } html[data-theme="light"] .wsch-pp-val { color: #111827; } html[data-theme="light"] .wsch-status-empty { background: rgba(15, 18, 24, 0.05); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-edit-toolbar { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .wsch-et-btn { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .wsch-et-btn:hover { background: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .wsch-et-done { color: rgba(15, 18, 24, 0.55); background: rgba(15, 18, 24, 0.04); } html[data-theme="light"] .wsch-wp-chelka-title { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .wsch-help-qbtn { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-info-close { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.65); } /* ============================================================== */ /* 30. PHOTO-REPORT (pr-*) — comprehensive coverage */ /* ============================================================== */ html[data-theme="light"] .pr-back { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .pr-title { color: #111827; } html[data-theme="light"] .pr-card { background: #ffffff; border-color: rgba(15, 18, 24, 0.08); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); color: var(--text-1); } html[data-theme="light"] .pr-card-date { color: rgba(15, 18, 24, 0.50); } html[data-theme="light"] .pr-card-event { color: #111827; } html[data-theme="light"] .pr-pos-name { color: #111827; } html[data-theme="light"] .pr-pos-arrow { color: rgba(15, 18, 24, 0.40); } html[data-theme="light"] .pr-action-btn, html[data-theme="light"] .pr-btn-camera, html[data-theme="light"] .pr-btn-upload { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .pr-photo-card { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .pr-photo-img-wrap { background: rgba(15, 18, 24, 0.04); } html[data-theme="light"] .pr-photo-comment { background: rgba(15, 18, 24, 0.03); color: rgba(15, 18, 24, 0.78); border-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .pr-empty-photos { color: rgba(15, 18, 24, 0.45); } /* ============================================================== */ /* 31. YANDEX-DISK gallery extras — surfaces and labels */ /* ============================================================== */ html[data-theme="light"] .ya-day-pill { border-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .ya-day-empty, html[data-theme="light"] .ya-gallery-count { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .yd-tabs { /* Tab strip */ } html[data-theme="light"] .yd-tab--fav:hover { color: #b8861a; } html[data-theme="light"] .yd-tab--staff:hover { color: #2563eb; } html[data-theme="light"] .yd-tab--delivery:hover { color: #047857; } /* ============================================================== */ /* 32. WORKSPACE menus / pavilion menus / generic ID menus */ /* ============================================================== */ html[data-theme="light"] #pavMenu, html[data-theme="light"] #placeMenu, html[data-theme="light"] #cPavMenu, html[data-theme="light"] #cPlaceMenu, html[data-theme="light"] #cContrMenu, html[data-theme="light"] #contrMenu, html[data-theme="light"] #favMenu { background: rgba(255, 255, 255, 0.99); border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18); color: var(--text-1); } /* ============================================================== */ /* 33. EVERYTHING ELSE: text utility classes */ /* Re-skin the most common dark-mode text colors so they */ /* stay legible on a white surface. We can't override */ /* `color: #fff` directly — instead we override the wrappers. */ /* ============================================================== */ /* Generic "white on dark" labels used across modules. */ html[data-theme="light"] :where(.um-username, .um-card-title, .um-row-title, .pr-title, .wsch-pp-name, .wsch-info-title, .wsch-dialog-title, .yd-card-name, .yd-upload-contractor, .ya-gallery-title, .stg-username, .est-section-name) { color: #111827; } /* Smaller secondary labels — replace `color: #aaa/#888/#666` with readable mid-greys. */ html[data-theme="light"] :where([class$="-hint"], [class$="-sub"], [class$="-desc"], [class$="-label"]:not(.action-label):not(.stg-row-label):not(.wsch-tgl-txt), [class$="-meta"], [class$="-empty"]) { color: rgba(15, 18, 24, 0.55); } /* ============================================================== */ /* 34. UM (user manager) panel surfaces */ /* ============================================================== */ html[data-theme="light"] [class^="um-"]:where(:not([class*="-icon"]):not([class*="-close"]):not([class*="-btn-primary"]):not([class*="-success"]):not([class*="-danger"]):not([class*="-warn"])):where(:not(button)), html[data-theme="light"] .um-panel, html[data-theme="light"] .um-row, html[data-theme="light"] .um-card, html[data-theme="light"] .um-modal { /* Most um-* surfaces look like rows/cards/panels — give them a light surface only when they were carrying a translucent dark/white tint. Specific `color: #fff` cases inside um-* headlines are handled by the catch-all in section 33. */ } html[data-theme="light"] .um-panel, html[data-theme="light"] .um-card, html[data-theme="light"] .um-modal, html[data-theme="light"] .um-row { background: rgba(15, 18, 24, 0.02); border-color: rgba(15, 18, 24, 0.06); color: var(--text-1); } html[data-theme="light"] .um-row:hover { background: rgba(15, 18, 24, 0.05); } /* ============================================================== */ /* 35. PLANNING (pl-*) — shared modal/list surfaces */ /* ============================================================== */ html[data-theme="light"] .pl-modal, html[data-theme="light"] .pl-card, html[data-theme="light"] .pl-panel, html[data-theme="light"] .pl-popup { background: #ffffff; border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .pl-row, html[data-theme="light"] .pl-item { background: rgba(15, 18, 24, 0.02); border-color: rgba(15, 18, 24, 0.06); color: var(--text-1); } html[data-theme="light"] .pl-sim-handle { background: rgba(15, 18, 24, 0.04); color: rgba(15, 18, 24, 0.65); } /* ============================================================== */ /* 36. SOPROVOD (sopr-*) — list/detail/zone editor */ /* ============================================================== */ html[data-theme="light"] .sopr-panel, html[data-theme="light"] .sopr-card, html[data-theme="light"] .sopr-list-card, html[data-theme="light"] .sopr-modal, html[data-theme="light"] .sopr-modal-content, html[data-theme="light"] .sopr-zones-modal, html[data-theme="light"] .sopr-edit-card { background: #ffffff; border-color: rgba(15, 18, 24, 0.10); color: var(--text-1); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .sopr-row, html[data-theme="light"] .sopr-item { background: rgba(15, 18, 24, 0.02); border-color: rgba(15, 18, 24, 0.06); color: var(--text-1); } /* ============================================================== */ /* 37. CARD-IN-OVERLAY backdrops that we missed */ /* Catches `.xxx-overlay` patterns used across modules to dim */ /* the page behind a modal. We light them up to a soft glass. */ /* ============================================================== */ html[data-theme="light"] :where(.modal-overlay, .pr-modal-overlay, .sopr-modal-overlay, .pl-modal-overlay, .um-modal-overlay, .wsch-modal-overlay, .ya-gallery-overlay, .ya-photo-overlay) { background: rgba(15, 23, 42, 0.40); } /* ============================================================== */ /* 38. ASSORTED ICON / CHIP / PILL surface fixes */ /* ============================================================== */ /* `:where()` keeps specificity at zero so the original CSS still wins for explicit colored chips (success/danger/warn/etc.). We only re-skin the *neutral* white-tint chips. */ html[data-theme="light"] :where(.chip:not([class*="-success"]):not([class*="-danger"]):not([class*="-warn"]):not([class*="-info"])) { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.78); } /* ============================================================== */ /* 39. SELECT NATIVE WIDGET (just in case) */ /* ============================================================== */ html[data-theme="light"] select:not(.stg-select):not(.stg-select-full) { background: rgba(15, 18, 24, 0.04); color: var(--text-1); border: 1px solid rgba(15, 18, 24, 0.10); } /* ============================================================== */ /* 40. FALLBACK: explicit color overrides for the most common */ /* dark-theme text colors when they appear inside a known */ /* light-mode surface. We target the ANCESTOR being a light */ /* surface so we don't accidentally re-color text on dark */ /* overlays (e.g. the photo viewer, slide preview). */ /* ============================================================== */ html[data-theme="light"] :where(.card, .overlay-card, .est-modal-window-small, .est-modal-window-large, .est-edit-card, .est-photo-window, .est-confirm-card, .est-archive-card, .est-archive-card-wide, .est-upload-card, .pr-card, .pr-modal, .sopr-modal, .sopr-card, .pl-modal, .pl-card, .um-card, .um-modal, .wsch-dialog, .wsch-info-modal, .wsch-pp-card, .ya-gallery-card, .settings-panel, .filter-menu, .select-menu, .cell-dropdown-menu, .custom-calendar, .auth-dropdown-menu, #contrMenu, #pavMenu, #placeMenu, #cPavMenu, #cPlaceMenu, #cContrMenu, #favMenu) :where(.title, .heading, .name, [class$="-title"], [class$="-name"], [class$="-heading"]) { color: #111827; } /* ============================================================== */ /* 41. ESTIMATES — toolbar buttons + small chips */ /* These are THE buttons that vanish on white in Сметы. */ /* ============================================================== */ /* Generic action button used across the slide editor / zoom view */ html[data-theme="light"] .est-btn-action { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .est-btn-action:hover { background: rgba(15, 18, 24, 0.08); } /* Close-zoom button */ html[data-theme="light"] .btn-close-zoom { border-color: rgba(15, 18, 24, 0.14); color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .btn-close-zoom:hover { background: rgba(15, 18, 24, 0.06); color: #111827; } /* The colored variants (add/del/dup) keep their tints — those already pop on a light surface. Just make sure their default background fills aren't transparent on hover (they already get coloured fills via the original CSS). */ /* Delete-zone-photo dropdown buttons */ html[data-theme="light"] .est-del-zone-btn { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .est-del-zone-btn:hover:not(:disabled) { /* Original is red on hover, keep that — just lighten the bg. */ color: #b91c1c; } html[data-theme="light"] .est-del-zone-hint { color: rgba(15, 18, 24, 0.45); } /* Photo modal zone tabs */ html[data-theme="light"] .est-pm-zone-tab { background: rgba(15, 18, 24, 0.04); border: 1px solid rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.65); } /* Confirm dialog */ html[data-theme="light"] .est-confirm-card { background: linear-gradient(165deg, #ffffff 0%, #f4f6fa 100%); border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.20), 0 0 0 1px rgba(15, 18, 24, 0.04) inset; } html[data-theme="light"] .est-confirm-title { color: #111827; } html[data-theme="light"] .est-confirm-msg { color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .est-confirm-cancel { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .est-confirm-cancel:hover { background: rgba(15, 18, 24, 0.10); } /* Numeric input box for arrows / numbers */ html[data-theme="light"] .est-num-input { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: var(--text-1); } /* Position / item card body comments */ html[data-theme="light"] .est-pos-cmt-bar { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.06); } /* Section title above lists */ html[data-theme="light"] .est-section-title { color: rgba(15, 18, 24, 0.65); } /* Header legend (right side of header in edit mode) */ html[data-theme="light"] .est-header-legend { color: rgba(15, 18, 24, 0.55); } /* "Add presentation" big plus button on the empty list */ html[data-theme="light"] .est-add-presentation-btn, html[data-theme="light"] .est-add-btn { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .est-add-presentation-btn:hover, html[data-theme="light"] .est-add-btn:hover { background: rgba(78, 205, 196, 0.10); border-color: rgba(78, 205, 196, 0.40); color: #0f6e66; } /* Photo controls bar (arrows, undo, etc. in the photo editor) */ html[data-theme="light"] .est-photo-controls { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .est-btn-icon { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .est-btn-icon:hover { background: rgba(15, 18, 24, 0.08); } /* Small navigation arrows on photo preview */ html[data-theme="light"] .est-nav-btn { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.78); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); } html[data-theme="light"] .est-nav-btn:hover { background: rgba(255, 255, 255, 0.95); } /* Edit-toolbar / done button area */ html[data-theme="light"] .est-pm-done { background: linear-gradient(135deg, #4ECDC4, #45B7AA); color: #08322f; border: 1px solid rgba(15, 18, 24, 0.06); } /* ============================================================== */ /* 42. WORKSPACE strip — small text/labels */ /* ============================================================== */ /* Settings: ensure nv-card-active text is dark on white. */ html[data-theme="light"] .nv-card-active .nv-card-icon { background: rgba(78, 205, 196, 0.18); color: #0f6e66; } /* ============================================================== */ /* 43. ARROW KEYS / NUMBER BOXES inside photo editor */ /* ============================================================== */ html[data-theme="light"] .btn-arrow-num, html[data-theme="light"] .btn-num-box { /* Keep the yellow numbox visible — original uses #ffeb3b fill on a separate , no override needed. We just make sure the wrapper box-shadow renders on a light bg. */ filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.15)); } /* ============================================================== */ /* 44. SCROLLBAR uniformity */ /* Default Webkit scrollbars look better with a hint of dark */ /* in light mode. */ /* ============================================================== */ html[data-theme="light"] .est-modal-content::-webkit-scrollbar-thumb, html[data-theme="light"] .overlay-content::-webkit-scrollbar-thumb, html[data-theme="light"] .settings-panel::-webkit-scrollbar-thumb, html[data-theme="light"] .yd-panel::-webkit-scrollbar-thumb, html[data-theme="light"] .ya-gallery-grid::-webkit-scrollbar-thumb { background: rgba(15, 18, 24, 0.20); } /* ============================================================== */ /* 45. PAGE LIST WRAPPERS — schedule / events / contractors */ /* The outer scroll wrappers also use rgba(255,255,255,X) */ /* borders and need to be lit. */ /* ============================================================== */ html[data-theme="light"] [class$="-list"]:not(.stg-sections):not(.notif-list) { /* Generic ".xxx-list" wrappers usually have no bg — safe noop. */ } /* ============================================================== */ /* 46. ESTIMATES LIST: top-level list rows that the user opens */ /* (these are the cards visible in the main "Сметы" view) */ /* ============================================================== */ html[data-theme="light"] .est-items-list, html[data-theme="light"] .est-category-group, html[data-theme="light"] .est-eq-group, html[data-theme="light"] .est-zone-group { background: transparent; } html[data-theme="light"] .est-stats-bar { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 18, 24, 0.08); border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } /* ============================================================== */ /* 47. WAVE-3: window controls, visible card outlines, progress */ /* tracks, section headers, action icons, plashka-bot zones */ /* ============================================================== */ /* -- 47.1 Window-control (dock) buttons in overlay headers ------ */ /* Top-left tri-button switcher (вид окна: лево/центр/право). */ html[data-theme="light"] .dock-controls { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } html[data-theme="light"] .dock-btn { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .dock-btn + .dock-btn { border-left-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .dock-btn:hover:not(.active) { background: rgba(96, 165, 250, 0.10); color: #2563eb; } html[data-theme="light"] .dock-btn.active { background: linear-gradient(135deg, rgba(96, 165, 250, 0.20), rgba(96, 165, 250, 0.08)); color: #2563eb; box-shadow: inset 0 1px 0 rgba(96, 165, 250, 0.25); } /* -- 47.2 Estimate / Soprovod cards: clearer outlines ----------- */ /* The cards already have a colored 3px LEFT border (zone color) plus a soft 1px right/top/bottom border. On white the soft ones disappear, so the cards melt into the page. Strengthen them. */ html[data-theme="light"] .est-card { background: #ffffff; border: 1px solid rgba(15, 18, 24, 0.12); /* Keep the colored left border that comes from the inline rule in JS (--zone-color) by NOT setting border-left here. */ box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .est-card:hover { background: #f8fafc; border-color: rgba(15, 18, 24, 0.18); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .est-card.est-card-clickable:hover { background: rgba(96, 165, 250, 0.06); border-color: rgba(96, 165, 250, 0.45); box-shadow: 0 2px 12px rgba(96, 165, 250, 0.18); } html[data-theme="light"] .est-card.est-card-clickable:active { background: rgba(96, 165, 250, 0.12); } /* The list wrapper around cards (.est-list) has a top-less border that is invisible on white. Show subtle dividers between groups. */ html[data-theme="light"] .est-list { background: rgba(15, 18, 24, 0.015); border-color: rgba(15, 18, 24, 0.08); } /* Date pill / divider / event label inside .est-card-header */ html[data-theme="light"] .est-date { background: rgba(15, 18, 24, 0.05); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .est-divider { color: rgba(15, 18, 24, 0.18); } html[data-theme="light"] .est-event { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .est-card-camera-hint { color: rgba(15, 18, 24, 0.40); } /* -- 47.3 Progress bars (per-card + section header) ------------- */ /* Track was rgba(255,255,255,0.08) → invisible on white. Use a */ /* dark translucent fill so the unfilled portion is clearly seen. */ html[data-theme="light"] .est-sop-bar, html[data-theme="light"] .est-sop-hdr-bar { background: rgba(15, 18, 24, 0.10); box-shadow: inset 0 0 0 1px rgba(15, 18, 24, 0.04); } html[data-theme="light"] .header-edits .est-sop-hdr-bar { background: rgba(8, 145, 178, 0.14); box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.12); } html[data-theme="light"] .header-edits .est-sop-hdr-fill { background: linear-gradient(90deg, #0e7490, #0891b2); } html[data-theme="light"] .header-edits .est-sop-hdr-text { color: #0e7490; } /* Inline percent / header text: dark slate for legibility. */ html[data-theme="light"] .est-sop-inline-pct { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .est-sop-hdr-text { color: rgba(15, 18, 24, 0.60); } /* Generic .progress / .pr-progress / [class*="progress-bar"] tracks across the app (estimates, photo report, schedule). */ html[data-theme="light"] :where(.progress, .progress-bar, .pr-progress, .est-progress, [class*="progress-track"]) { background-color: rgba(15, 18, 24, 0.10); } /* -- 47.4 Section headers (Текущие / Сопровод / Готовые) -------- */ /* Yellow on yellow / cyan on cyan are unreadable on white. Pick darker text so the badge/title stand out, keep the soft tint to preserve the color identity. */ html[data-theme="light"] .header-current { background: linear-gradient(135deg, rgba(253, 224, 71, 0.32), rgba(250, 204, 21, 0.18)); border-color: rgba(202, 138, 4, 0.40); } html[data-theme="light"] .header-current .est-header-title { color: #92400e; } html[data-theme="light"] .header-current .est-header-arrow { color: #b45309; } html[data-theme="light"] .header-current .est-header-badge { background: rgba(245, 158, 11, 0.20); color: #92400e; border-color: rgba(180, 83, 9, 0.40); } html[data-theme="light"] .header-edits { background: linear-gradient(135deg, rgba(34, 211, 238, 0.20), rgba(6, 182, 212, 0.10)); border-color: rgba(8, 145, 178, 0.45); } html[data-theme="light"] .header-edits .est-header-title { color: #155e75; } html[data-theme="light"] .header-edits .est-header-arrow { color: #0e7490; } html[data-theme="light"] .header-edits .est-header-badge { background: rgba(8, 145, 178, 0.15); color: #155e75; border-color: rgba(8, 145, 178, 0.40); } html[data-theme="light"] .header-ready { background: linear-gradient(135deg, rgba(52, 211, 153, 0.20), rgba(16, 185, 129, 0.10)); border-color: rgba(5, 150, 105, 0.40); } html[data-theme="light"] .header-ready .est-header-title { color: #065f46; } html[data-theme="light"] .header-ready .est-header-arrow { color: #047857; } html[data-theme="light"] .header-ready .est-header-badge { background: rgba(5, 150, 105, 0.15); color: #065f46; border-color: rgba(5, 150, 105, 0.40); } /* Soprovod inner pavilion / zone group title (cyan strip) */ html[data-theme="light"] .est-sop-group-title { background: rgba(34, 211, 238, 0.10); border-color: rgba(8, 145, 178, 0.35); } html[data-theme="light"] .est-sop-group-title:hover { background: rgba(34, 211, 238, 0.16); } html[data-theme="light"] .est-sop-pav-name { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .est-sop-pav-count { background: rgba(8, 145, 178, 0.14); color: #155e75; border-color: rgba(8, 145, 178, 0.40); } html[data-theme="light"] .est-sop-arrow { color: #0e7490; opacity: 0.85; } /* Ready tree top/year/month titles */ html[data-theme="light"] .est-ready-top-title { background: rgba(52, 211, 153, 0.12); border-color: rgba(5, 150, 105, 0.30); } html[data-theme="light"] .est-ready-top-title:hover { background: rgba(52, 211, 153, 0.18); } html[data-theme="light"] .est-ready-year-title { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .est-ready-year-title .est-sop-pav-name { color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .est-ready-year-title .est-sop-arrow { color: rgba(15, 18, 24, 0.40); } html[data-theme="light"] .est-ready-month-title { background: rgba(15, 18, 24, 0.025); border-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .est-ready-month-title .est-sop-pav-name { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .est-ready-month-title .est-sop-arrow { color: rgba(15, 18, 24, 0.35); } html[data-theme="light"] .est-ready-month-title .est-sop-pav-count { background: rgba(5, 150, 105, 0.12); color: #047857; border-color: rgba(5, 150, 105, 0.30); } html[data-theme="light"] .est-ready-title { border-color: rgba(15, 18, 24, 0.12); background: linear-gradient(180deg, rgba(15, 18, 24, 0.04), #ffffff); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .est-year-title { background: rgba(15, 18, 24, 0.04); border-bottom-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.62); } /* -- 47.5 File row & link chips inside cards -------------------- */ html[data-theme="light"] .est-file-link { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.72); } html[data-theme="light"] .est-file-link:hover { background: rgba(15, 18, 24, 0.08); border-color: rgba(15, 18, 24, 0.18); color: #111827; } /* -- 47.6 Action icons inside cards (camera/edit/delete/etc) ---- */ /* The original tints are super translucent (e.g. rgba(_,0.08)) which on white become ghosts. Bump opacity / saturate. */ html[data-theme="light"] .est-act-btn { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .btn-camera { background: rgba(251, 191, 36, 0.18); color: #b45309; border-color: rgba(180, 83, 9, 0.35); } html[data-theme="light"] .btn-camera:hover { background: rgba(251, 191, 36, 0.30); color: #92400e; border-color: rgba(180, 83, 9, 0.55); } html[data-theme="light"] .btn-edit { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; border-color: rgba(37, 99, 235, 0.35); } html[data-theme="light"] .btn-edit:hover { background: rgba(59, 130, 246, 0.24); color: #1e40af; border-color: rgba(37, 99, 235, 0.55); } html[data-theme="light"] .btn-delete { background: rgba(239, 68, 68, 0.14); color: #b91c1c; border-color: rgba(185, 28, 28, 0.35); } html[data-theme="light"] .btn-delete:hover { background: rgba(239, 68, 68, 0.26); color: #991b1b; border-color: rgba(185, 28, 28, 0.55); } html[data-theme="light"] .btn-approve { background: rgba(34, 197, 94, 0.16); color: #166534; border-color: rgba(21, 128, 61, 0.35); } html[data-theme="light"] .btn-approve:hover { background: rgba(34, 197, 94, 0.26); color: #14532d; border-color: rgba(21, 128, 61, 0.55); } html[data-theme="light"] .btn-hide { background: rgba(100, 116, 139, 0.16); color: #334155; border-color: rgba(71, 85, 105, 0.35); } html[data-theme="light"] .btn-hide:hover { background: rgba(100, 116, 139, 0.28); color: #1e293b; border-color: rgba(71, 85, 105, 0.55); } /* Days-badge (deadlines) inside the card header */ html[data-theme="light"] .est-days-ok { background: rgba(34, 197, 94, 0.18); color: #15803d; } html[data-theme="light"] .est-days-warning { background: rgba(234, 179, 8, 0.22); color: #a16207; } html[data-theme="light"] .est-days-overdue { background: rgba(239, 68, 68, 0.20); color: #b91c1c; } /* -- 47.7 Plashka Bot (a5) zone separators + upload tile -------- */ /* Segmented "Сверху / Снизу" strip and dashed upload button. */ html[data-theme="light"] .a5-seg-v2 { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.14); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); } html[data-theme="light"] .a5-seg-option { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .a5-seg-option + .a5-seg-option { border-left-color: rgba(15, 18, 24, 0.14); } html[data-theme="light"] .a5-seg-option:has(input:checked) { background: linear-gradient(135deg, rgba(78, 205, 196, 0.30), rgba(69, 183, 209, 0.22)); color: #0e7d75; text-shadow: none; } html[data-theme="light"] .a5-upload-v2 { background: linear-gradient(135deg, rgba(167, 119, 227, 0.16), rgba(138, 100, 206, 0.10)); border-color: rgba(124, 58, 237, 0.45); color: #6d28d9; } html[data-theme="light"] .a5-upload-v2:hover { background: linear-gradient(135deg, rgba(167, 119, 227, 0.26), rgba(138, 100, 206, 0.18)); border-color: rgba(124, 58, 237, 0.65); color: #5b21b6; } html[data-theme="light"] .a5-upload-v2.drop-highlight { background: linear-gradient(135deg, rgba(78, 205, 196, 0.25), rgba(96, 165, 250, 0.18)); border-color: rgba(13, 148, 136, 0.65); color: #0e7d75; } /* a5 form fields & info card sections (the white-sheet lookalikes) */ html[data-theme="light"] .a5-field { background: rgba(15, 18, 24, 0.03); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .a5-field:focus-within { background: #ffffff; border-color: rgba(78, 205, 196, 0.55); box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15); } html[data-theme="light"] .a5-field-body label { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .a5-field-body input, html[data-theme="light"] .a5-field-body textarea { background: transparent; color: #111827; } html[data-theme="light"] .a5-field-body input::placeholder, html[data-theme="light"] .a5-field-body textarea::placeholder { color: rgba(15, 18, 24, 0.35); } html[data-theme="light"] .a5-field-icon { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .a5-info-section { background: rgba(15, 18, 24, 0.025); border-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .a5-info-heading { color: #111827; } html[data-theme="light"] .a5-info-section p { color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .a5-action-btn { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .a5-action-btn[data-color="mint"] { color: #0e7d75; border-color: rgba(13, 148, 136, 0.30); } html[data-theme="light"] .a5-action-btn[data-color="mint"]:hover { background: rgba(78, 205, 196, 0.16); border-color: rgba(13, 148, 136, 0.55); } html[data-theme="light"] .a5-action-btn[data-color="violet"] { color: #6d28d9; border-color: rgba(124, 58, 237, 0.30); } html[data-theme="light"] .a5-action-btn[data-color="violet"]:hover { background: rgba(167, 119, 227, 0.16); border-color: rgba(124, 58, 237, 0.55); } html[data-theme="light"] .a5-action-btn[data-color="gold"] { color: #b45309; border-color: rgba(180, 83, 9, 0.30); } html[data-theme="light"] .a5-action-btn[data-color="gold"]:hover { background: rgba(255, 217, 61, 0.16); border-color: rgba(180, 83, 9, 0.55); } /* Favorites pill row inside a5 ("★ + …") */ html[data-theme="light"] .a5-fav-selector { background: rgba(255, 217, 61, 0.10); border-color: rgba(180, 83, 9, 0.30); } html[data-theme="light"] .a5-fav-selector:hover { background: rgba(255, 217, 61, 0.18); border-color: rgba(180, 83, 9, 0.45); } html[data-theme="light"] .a5-fav-selector.open { background: rgba(255, 217, 61, 0.20); border-color: rgba(180, 83, 9, 0.55); } html[data-theme="light"] .a5-fav-selector-label { color: #b45309; } html[data-theme="light"] .a5-fav-selector-name { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .a5-fav-selector-arrow { color: rgba(15, 18, 24, 0.40); } html[data-theme="light"] .a5-fav-action-btn { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.72); } html[data-theme="light"] .a5-fav-add-btn { background: rgba(255, 217, 61, 0.10); border-color: rgba(180, 83, 9, 0.30); color: #b45309; } html[data-theme="light"] .a5-fav-add-btn:hover { background: rgba(255, 217, 61, 0.20); border-color: rgba(180, 83, 9, 0.50); } html[data-theme="light"] .a5-fav-clear-btn { color: #b91c1c; } html[data-theme="light"] .a5-fav-clear-btn:hover { background: rgba(239, 68, 68, 0.10); border-color: rgba(185, 28, 28, 0.40); } html[data-theme="light"] .a5-shuffle-btn { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.72); } html[data-theme="light"] .a5-shuffle-btn:hover { background: rgba(15, 18, 24, 0.08); border-color: rgba(15, 18, 24, 0.18); color: #111827; } html[data-theme="light"] .a5-shuffle-btn.active { background: rgba(78, 205, 196, 0.18); border-color: rgba(13, 148, 136, 0.45); color: #0e7d75; } html[data-theme="light"] .a5-range-hint { color: rgba(15, 18, 24, 0.50); } /* Queue wrap (uploaded photos preview block in a5) */ html[data-theme="light"] .a5-queue-wrap { background: rgba(15, 18, 24, 0.025); border-color: rgba(15, 18, 24, 0.08); } /* -- 47.8 Generic zone separators across modules (border-left) -- */ /* Many modules build segmented "tabs" by chaining buttons with a left border between them; on white those vanish. Catch the most common patterns by attribute selector + sibling combinator. */ html[data-theme="light"] :where( .a5-seg-option, .est-pm-zone-tab, .pr-zone-tab, .wsch-tab, .um-tab, .seg-option, .tab-option ) + :where( .a5-seg-option, .est-pm-zone-tab, .pr-zone-tab, .wsch-tab, .um-tab, .seg-option, .tab-option ) { border-left-color: rgba(15, 18, 24, 0.14); } /* Generic zone-/segmented- group containers (transparent rgba bg) */ html[data-theme="light"] :where( .seg-group, .tab-group, .est-pm-zone-tabs, .pr-zone-tabs, .wsch-tabs, .um-tabs ) { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); } /* -- 47.9 Numeric / camera-hint / archive-btn small fixups ----- */ html[data-theme="light"] .est-archive-btn, html[data-theme="light"] .est-audit-btn { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.72); } html[data-theme="light"] .est-archive-btn:hover, html[data-theme="light"] .est-audit-btn:hover { background: rgba(15, 18, 24, 0.08); border-color: rgba(15, 18, 24, 0.20); color: #111827; } /* Empty-state messages ("Нет текущих смет" etc.) */ html[data-theme="light"] .est-empty, html[data-theme="light"] .est-empty-text { color: rgba(15, 18, 24, 0.45); } /* -- 47.10 Last-resort: hairlines that are still rgba-white ---- */ /* Anything left with `border: 1px solid rgba(255,255,255,X)` and inside a known light-surface gets a subtle dark border so the "плашка" zones become visually separated. */ html[data-theme="light"] :where(.overlay-card, .est-modal-window-small, .est-modal-window-large, .est-edit-card, .pr-card, .pr-modal, .sopr-card, .sopr-modal, .pl-card, .pl-modal, .wsch-dialog, .wsch-pp-card, .ya-gallery-card, .um-card, .um-modal, .est-confirm-card) :where([style*="rgba(255,255,255"]) { /* Only neutralise inline-style white borders sparingly: this is a safety net for runtime-created elements. */ } /* ============================================================== */ /* 48. WAVE-4: presentation-editor zoom controls, a5 typed text, */ /* full work-schedule grid (\u0433\u0440\u0430\u0444\u0438\u043a \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0439). */ /* ============================================================== */ /* -- 48.1 Presentation editor: layout-toggle + dock buttons ----- */ /* The "увеличение окна" trio in the edit-modal header (left/center/ right). Mirrors .dock-controls/.dock-btn but uses .est- prefix. */ html[data-theme="light"] .est-layout-toggle { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } html[data-theme="light"] .est-layout-btn { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .est-layout-btn + .est-layout-btn { border-left-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .est-layout-btn:hover:not(.active) { background: rgba(96, 165, 250, 0.10); color: #2563eb; } html[data-theme="light"] .est-layout-btn.active { background: linear-gradient(135deg, rgba(96, 165, 250, 0.20), rgba(96, 165, 250, 0.08)); color: #2563eb; box-shadow: inset 0 1px 0 rgba(96, 165, 250, 0.25); } /* Slide-zoom view (dblclick on a slide) — header strip stays dark on purpose because the slide preview itself is dark; just give the back/close buttons stronger contrast. */ html[data-theme="light"] .est-zoom-back-btn { background: rgba(96, 165, 250, 0.14); border-color: rgba(37, 99, 235, 0.40); color: #1d4ed8; } html[data-theme="light"] .est-zoom-back-btn:hover { background: rgba(96, 165, 250, 0.24); border-color: rgba(37, 99, 235, 0.55); color: #1e40af; } html[data-theme="light"] .est-zoom-close-btn { background: rgba(239, 68, 68, 0.14); border-color: rgba(185, 28, 28, 0.40); color: #b91c1c; } html[data-theme="light"] .est-zoom-close-btn:hover { background: rgba(239, 68, 68, 0.24); border-color: rgba(185, 28, 28, 0.55); color: #991b1b; } /* iPhone-island-style zoom controls (in-slide overlay). */ /* The pill stays dark by design (sits on top of the slide image) so we keep that and only ensure the icons are crisp. */ /* -- 48.2 Plashka Bot: typed address text legibility ------------ */ /* Address textarea hard-codes color: #fff which is invisible on the white-page light theme. Force readable text + placeholder. */ html[data-theme="light"] .a5-field-address .a5-field-input-full { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: #111827; } html[data-theme="light"] .a5-field-address .a5-field-input-full::placeholder { color: rgba(15, 18, 24, 0.35); } html[data-theme="light"] .a5-field-address .a5-field-input-full:focus { background: #ffffff; border-color: var(--fc, #4FC3F7); box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.18); } /* The little colored field-label dot ("● ДАТА", "● ВРЕМЯ", "● АДРЕС") uses var(--fc) colors which work fine on light. No override. */ /* Make sure error highlight on a5 fields still pops on white. */ html[data-theme="light"] .a5-field-error input, html[data-theme="light"] .a5-field-error textarea { border-color: rgba(185, 28, 28, 0.65) !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18), 0 0 12px rgba(239, 68, 68, 0.12) !important; } /* ============================================================== */ /* 49. WORK-SCHEDULE grid (\u0433\u0440\u0430\u0444\u0438\u043a \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0439) — full */ /* light-mode coverage. Targets the matrix table, palette, */ /* editor, dialogs, worker cards, inputs, badges. */ /* IMPORTANT: dark-theme rules use #131316 hardcoded; we */ /* replace those with light surfaces here. */ /* ============================================================== */ /* -- 49.1 Top arrow buttons / month label / action buttons ----- */ html[data-theme="light"] .wsch-arrow { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-arrow:hover { background: rgba(15, 18, 24, 0.08); color: #111827; } html[data-theme="light"] .wsch-action-btn { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .wsch-action-btn:hover { background: rgba(15, 18, 24, 0.08); color: #111827; } html[data-theme="light"] #wschEditBtn, html[data-theme="light"] .wsch-generate-btn { border-color: rgba(180, 83, 9, 0.40); color: #b45309; } html[data-theme="light"] #wschEditBtn:hover, html[data-theme="light"] .wsch-generate-btn:hover { background: rgba(251, 191, 36, 0.16); color: #92400e; } html[data-theme="light"] .wsch-clear-btn { border-color: rgba(185, 28, 28, 0.40); color: #b91c1c; } html[data-theme="light"] .wsch-clear-btn:hover { background: rgba(239, 68, 68, 0.14); color: #991b1b; } /* -- 49.2 Filter segments + search bar -------------------------- */ html[data-theme="light"] .wsch-segment { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.12); } html[data-theme="light"] .wsch-seg-btn { color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .wsch-seg-btn:hover { color: #111827; } html[data-theme="light"] .wsch-seg-btn.active { background: rgba(251, 191, 36, 0.22); color: #92400e; } html[data-theme="light"] .wsch-search-wrap .wsch-search-input { background: #ffffff; border-color: rgba(15, 18, 24, 0.18); color: #111827; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .wsch-search-wrap .wsch-search-input::placeholder { color: rgba(15, 18, 24, 0.40); } html[data-theme="light"] .wsch-search-wrap .wsch-search-input:focus { border-color: rgba(251, 191, 36, 0.55); background: #fffbf2; } html[data-theme="light"] .wsch-search-wrap .wsch-search-results { background: #ffffff; border-color: rgba(15, 18, 24, 0.12); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } html[data-theme="light"] .wsch-search-item { border-bottom-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .wsch-search-item:hover { background: rgba(251, 191, 36, 0.16); color: #92400e; } html[data-theme="light"] .wsch-search-empty, html[data-theme="light"] .wsch-loading.wsch-no-link { color: rgba(15, 18, 24, 0.45); } /* -- 49.3 Matrix table (the actual grid) ------------------------ */ html[data-theme="light"] .wsch-matrix-wrap { background: rgba(15, 18, 24, 0.02); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .wsch-matrix th, html[data-theme="light"] .wsch-matrix td { border-bottom-color: rgba(15, 18, 24, 0.06); border-right-color: rgba(15, 18, 24, 0.05); } /* Sticky left column + thead — replace #131316 with a light tint. */ html[data-theme="light"] .wsch-matrix-name-col, html[data-theme="light"] .wsch-matrix thead th, html[data-theme="light"] .wsch-matrix thead th:first-child { background: #f8fafc !important; color: rgba(15, 18, 24, 0.78) !important; border-right-color: rgba(15, 18, 24, 0.12) !important; border-bottom-color: rgba(15, 18, 24, 0.12) !important; box-shadow: 3px 0 8px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .wsch-matrix thead th { box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .wsch-matrix thead th.weekend { color: #b91c1c !important; } html[data-theme="light"] .wsch-matrix thead th.today { color: #b45309 !important; background: #fef3c7 !important; } /* Pavilion divider rows */ html[data-theme="light"] .wsch-matrix-pav-divider td, html[data-theme="light"] .wsch-matrix-divider-name { background: #f1f5f9 !important; border-bottom-color: rgba(15, 18, 24, 0.10) !important; } html[data-theme="light"] .wsch-matrix-pav-label { color: rgba(15, 18, 24, 0.78); } /* Empty / unfilled cells */ html[data-theme="light"] .wsch-matrix-cell { background: rgba(15, 18, 24, 0.015); } html[data-theme="light"] .wsch-matrix-cell.editable:hover { background: rgba(15, 18, 24, 0.07); } html[data-theme="light"] .wsch-matrix-cell.unavail { background: rgba(239, 68, 68, 0.08); } html[data-theme="light"] .wsch-matrix-cell.unavail::before { background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(239, 68, 68, 0.12) 3px, rgba(239, 68, 68, 0.12) 5px); } html[data-theme="light"] .wsch-matrix-cell.vacation { background: rgba(34, 197, 94, 0.10); } html[data-theme="light"] .wsch-matrix-cell.soft-unavail { background: rgba(168, 85, 247, 0.08); } html[data-theme="light"] .wsch-matrix-cell.soft-unavail::before { background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(168, 85, 247, 0.10) 3px, rgba(168, 85, 247, 0.10) 5px); } html[data-theme="light"] .wsch-matrix-cell.today { background: rgba(251, 191, 36, 0.10); border-color: rgba(180, 83, 9, 0.35) !important; } /* My-row highlight */ html[data-theme="light"] .wsch-matrix-my-row .wsch-matrix-name-col { background: #ecfdf5 !important; box-shadow: inset -3px 0 0 rgba(5, 150, 105, 0.55), 3px 0 8px rgba(15, 23, 42, 0.08) !important; } /* Reporter-pavilion fill: white-on-white in dark, replace with grey */ html[data-theme="light"] .wsch-matrix-cell.on.wsch-matrix-pav-reporter::after { background: rgba(71, 85, 105, 0.55); box-shadow: 0 0 4px rgba(71, 85, 105, 0.25); } html[data-theme="light"] .wsch-matrix-cell.editable.on.wsch-matrix-pav-reporter:hover::after { background: rgba(71, 85, 105, 0.78); } html[data-theme="light"] .wsch-matrix-shift-count { color: rgba(15, 18, 24, 0.55); } /* -- 49.4 Avatars / role badge / legend dots -------------------- */ html[data-theme="light"] .wsch-av-3 { background-color: rgba(239, 68, 68, 0.20); color: #991b1b; border-color: rgba(185, 28, 28, 0.65); } html[data-theme="light"] .wsch-av-7 { background-color: rgba(59, 130, 246, 0.20); color: #1e40af; border-color: rgba(37, 99, 235, 0.65); } html[data-theme="light"] .wsch-av-office { background-color: rgba(234, 179, 8, 0.22); color: #92400e; border-color: rgba(180, 83, 9, 0.65); } html[data-theme="light"] .wsch-av-reporter { background-color: rgba(71, 85, 105, 0.18) !important; color: #1e293b !important; border-color: rgba(71, 85, 105, 0.55) !important; } html[data-theme="light"] .wsch-role-badge { color: #6d28d9; } html[data-theme="light"] .wsch-legend-item { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-dot-reporter { background: #94a3b8; border-color: rgba(71, 85, 105, 0.55); } html[data-theme="light"] .wsch-dot-off { background: rgba(15, 18, 24, 0.20); } /* -- 49.5 Worker cards (right panel "Сотрудники") --------------- */ html[data-theme="light"] .wsch-wcard { background: linear-gradient(135deg, rgba(15, 18, 24, 0.025), rgba(15, 18, 24, 0.01)); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .wsch-wcard:hover { background: linear-gradient(135deg, rgba(15, 18, 24, 0.05), rgba(15, 18, 24, 0.025)); border-color: rgba(15, 18, 24, 0.16); } html[data-theme="light"] .wsch-wcard.assign-mode { border-color: rgba(5, 150, 105, 0.45); background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.04)); } html[data-theme="light"] .wsch-wcard-r1 { border-bottom-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .wsch-wcard-av { border-color: rgba(15, 18, 24, 0.18); } html[data-theme="light"] .wsch-wcard-av-letter { background: linear-gradient(135deg, rgba(15, 18, 24, 0.08), rgba(15, 18, 24, 0.03)); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-wcard-name { color: rgba(15, 18, 24, 0.82); } html[data-theme="light"] .wsch-wcard-name:hover { color: #111827; } html[data-theme="light"] .wsch-grp-icon { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-pav-pill, html[data-theme="light"] .wsch-sched-pill { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-sched-pill:hover { color: #111827; border-color: rgba(15, 18, 24, 0.18); } html[data-theme="light"] .wsch-sched-pill.active { background: rgba(139, 92, 246, 0.16); color: #6d28d9; border-color: rgba(124, 58, 237, 0.45); } html[data-theme="light"] .wsch-wcard-body { border-top-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .wsch-bcard { background: rgba(15, 18, 24, 0.025); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .wsch-bcard-head { background: rgba(15, 18, 24, 0.04); border-bottom-color: rgba(15, 18, 24, 0.06); color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .wsch-bcard-dash { color: rgba(15, 18, 24, 0.30); } /* -- 49.6 Worker-group titles (sticky pavilion headers) --------- */ /* They use --pav-bg from JS which is a translucent dark color; override with subtle grey + colored border so they pop. */ html[data-theme="light"] .wsch-wgroup-title { background: #f1f5f9; border-color: rgba(15, 18, 24, 0.08); } /* -- 49.7 Editor (Add-form, inputs, selects) -------------------- */ html[data-theme="light"] .wsch-editor { background: rgba(15, 18, 24, 0.02); border-color: rgba(180, 83, 9, 0.30); } html[data-theme="light"] .wsch-editor-header { border-bottom-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .wsch-editor-title { color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .wsch-editor-close { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-editor-close:hover { background: rgba(239, 68, 68, 0.14); border-color: rgba(185, 28, 28, 0.40); color: #b91c1c; } html[data-theme="light"] .wsch-input, html[data-theme="light"] .wsch-select, html[data-theme="light"] .wsch-target-input, html[data-theme="light"] .wsch-vacation-input { background: #ffffff; border-color: rgba(15, 18, 24, 0.14); color: #111827; } html[data-theme="light"] .wsch-input::placeholder { color: rgba(15, 18, 24, 0.35); } html[data-theme="light"] .wsch-input:focus, html[data-theme="light"] .wsch-target-input:focus, html[data-theme="light"] .wsch-vacation-input:focus { border-color: rgba(180, 83, 9, 0.50); } html[data-theme="light"] .wsch-add-btn { background: rgba(251, 191, 36, 0.18); border-color: rgba(180, 83, 9, 0.40); color: #b45309; } html[data-theme="light"] .wsch-add-btn:hover { background: rgba(251, 191, 36, 0.30); color: #92400e; } html[data-theme="light"] .wsch-target-row, html[data-theme="light"] .wsch-vacation-label { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-vacation-sep { color: rgba(15, 18, 24, 0.35); } /* -- 49.8 Toggles inside worker cards --------------------------- */ /* Already partially covered (track/knob/txt). Add hover/state. */ html[data-theme="light"] .wsch-finput { background: #ffffff; border-color: rgba(15, 18, 24, 0.12); } html[data-theme="light"] .wsch-finput:focus-within { border-color: rgba(15, 18, 24, 0.30); } html[data-theme="light"] .wsch-finput-el { color: #111827; } html[data-theme="light"] .wsch-finput-el::placeholder { color: rgba(15, 18, 24, 0.30); } html[data-theme="light"] .wsch-tgl-track { background: rgba(15, 18, 24, 0.10); border-color: rgba(15, 18, 24, 0.18); } html[data-theme="light"] .wsch-tgl-knob { background: #94a3b8; } html[data-theme="light"] .wsch-tgl.on .wsch-tgl-track { background: rgba(78, 205, 196, 0.40); border-color: rgba(13, 148, 136, 0.55); } html[data-theme="light"] .wsch-tgl.on .wsch-tgl-knob { background: #0d9488; } html[data-theme="light"] .wsch-tgl-txt { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-tgl.on .wsch-tgl-txt { color: #0e7d75; } /* -- 49.9 Generate dialog --------------------------------------- */ html[data-theme="light"] .wsch-gen-icon { background: linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(251, 191, 36, 0.08)); border-color: rgba(180, 83, 9, 0.35); } html[data-theme="light"] .wsch-gen-label, html[data-theme="light"] .wsch-gen-workers-title { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-gen-adj { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .wsch-gen-adj:hover { background: rgba(15, 18, 24, 0.08); color: #111827; border-color: rgba(15, 18, 24, 0.20); } html[data-theme="light"] .wsch-gen-input { background: rgba(251, 191, 36, 0.10); border-color: rgba(180, 83, 9, 0.45); color: #b45309; } html[data-theme="light"] .wsch-gen-input:focus { border-color: rgba(180, 83, 9, 0.65); box-shadow: 0 0 12px rgba(251, 191, 36, 0.18); } html[data-theme="light"] .wsch-gen-input-hint { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .wsch-gen-preview { background: rgba(15, 18, 24, 0.025); border-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .wsch-gen-preview-loading, html[data-theme="light"] .wsch-gen-preview-err { color: rgba(15, 18, 24, 0.45); } html[data-theme="light"] .wsch-gen-stat { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .wsch-gen-worker-row { background: rgba(15, 18, 24, 0.025); } html[data-theme="light"] .wsch-gen-worker-name { color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .wsch-gen-worker-name.pav3 { color: #b91c1c; } html[data-theme="light"] .wsch-gen-worker-name.pav7 { color: #1e40af; } html[data-theme="light"] .wsch-gen-worker-name.office { color: #b45309; } html[data-theme="light"] .wsch-gen-flag { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-gen-no-flags { color: rgba(15, 18, 24, 0.30); } html[data-theme="light"] .wsch-gen-rule-group { background: rgba(15, 18, 24, 0.025); border-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .wsch-gen-warn { background: rgba(251, 191, 36, 0.08); border-color: rgba(180, 83, 9, 0.30); color: #b45309; } /* -- 49.10 Availability modal ----------------------------------- */ html[data-theme="light"] .wsch-avail-modal { background: #ffffff; border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 18, 24, 0.06); } html[data-theme="light"] .wsch-avail-title { color: #111827; } html[data-theme="light"] .wsch-avail-subtitle { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-avail-nav-btn { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .wsch-avail-nav-btn:hover:not(:disabled) { background: rgba(15, 18, 24, 0.08); color: #111827; } html[data-theme="light"] .wsch-avail-month-label { color: #111827; } html[data-theme="light"] .wsch-avail-leg-item { color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .wav-cal-dow { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wav-cal-dow.wav-weekend { color: #b91c1c; } html[data-theme="light"] .wav-cal-day { background: rgba(15, 18, 24, 0.04); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .wav-cal-day:not(.wav-cal-empty):hover { background: rgba(15, 18, 24, 0.10); color: #111827; } html[data-theme="light"] .wav-cal-day.wav-weekend { color: #b91c1c; } html[data-theme="light"] .wav-cal-day.wav-selected-unavail { background: rgba(239, 68, 68, 0.20); color: #991b1b; border-color: rgba(185, 28, 28, 0.55); } html[data-theme="light"] .wav-cal-day.wav-selected-soft { background: rgba(168, 85, 247, 0.18); color: #6b21a8; border-color: rgba(124, 58, 237, 0.55); } html[data-theme="light"] .wsch-avail-comment-label { color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .wsch-avail-comment { background: #ffffff; border-color: rgba(15, 18, 24, 0.14); color: #111827; } html[data-theme="light"] .wsch-avail-comment::placeholder { color: rgba(15, 18, 24, 0.35); } html[data-theme="light"] .wsch-avail-comment:focus { border-color: rgba(99, 102, 241, 0.55); background: #f8fafc; } html[data-theme="light"] .wsch-avail-saved-hint { color: #047857; } html[data-theme="light"] .wsch-avail-cancel { background: rgba(15, 18, 24, 0.04); color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .wsch-avail-cancel:hover { background: rgba(15, 18, 24, 0.10); color: #111827; } html[data-theme="light"] .wsch-avail-save { background: rgba(99, 102, 241, 0.16); color: #4338ca; border-color: rgba(79, 70, 229, 0.45); } html[data-theme="light"] .wsch-avail-save:hover { background: rgba(99, 102, 241, 0.28); color: #312e81; } /* -- 49.11 User-request panel + apply --------------------------- */ html[data-theme="light"] .wsch-ureq-badge { background: rgba(99, 102, 241, 0.16); border-color: rgba(79, 70, 229, 0.40); } html[data-theme="light"] .wsch-ureq-badge.active { background: rgba(99, 102, 241, 0.24); border-color: rgba(79, 70, 229, 0.55); } html[data-theme="light"] .wsch-ureq-panel { background: rgba(99, 102, 241, 0.08); border-color: rgba(79, 70, 229, 0.25); } html[data-theme="light"] .wsch-ureq-title { color: #4338ca; } html[data-theme="light"] .wsch-ureq-label { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-ureq-val { color: rgba(15, 18, 24, 0.85); } html[data-theme="light"] .wsch-ureq-apply { background: rgba(34, 197, 94, 0.18); border-color: rgba(21, 128, 61, 0.45); color: #166534; } html[data-theme="light"] .wsch-ureq-apply:hover { background: rgba(34, 197, 94, 0.28); color: #14532d; } /* -- 49.12 Avail button (top-right "Моя доступность") ----------- */ html[data-theme="light"] .wsch-avail-btn { background: rgba(99, 102, 241, 0.18); border-color: rgba(79, 70, 229, 0.45); color: #4338ca; } html[data-theme="light"] .wsch-avail-btn:hover { background: rgba(99, 102, 241, 0.28); border-color: rgba(79, 70, 229, 0.60); } /* -- 49.13 Status badges (published/draft/empty) ---------------- */ html[data-theme="light"] .wsch-status-published { background: rgba(34, 197, 94, 0.16); color: #166534; border-color: rgba(21, 128, 61, 0.35); } html[data-theme="light"] .wsch-status-draft { background: rgba(251, 191, 36, 0.20); color: #92400e; border-color: rgba(180, 83, 9, 0.35); } /* -- 49.14 Warnings + empty states ------------------------------ */ html[data-theme="light"] .wsch-warnings { background: rgba(239, 68, 68, 0.06); border-color: rgba(185, 28, 28, 0.20); } html[data-theme="light"] .wsch-warn-item { color: #b91c1c; } html[data-theme="light"] .wsch-warn-more { color: rgba(15, 18, 24, 0.45); } /* -- 49.15 Resize handle on the right edge ---------------------- */ html[data-theme="light"] .wsch-resize-handle { background: linear-gradient(180deg, rgba(251, 191, 36, 0.10) 0%, rgba(251, 191, 36, 0.20) 50%, rgba(251, 191, 36, 0.10) 100%); border-left-color: rgba(180, 83, 9, 0.30); } html[data-theme="light"] .wsch-resize-handle:hover { background: linear-gradient(180deg, rgba(251, 191, 36, 0.16) 0%, rgba(251, 191, 36, 0.32) 50%, rgba(251, 191, 36, 0.16) 100%); border-left-color: rgba(180, 83, 9, 0.50); } html[data-theme="light"] .wsch-resize-grip span { background: rgba(180, 83, 9, 0.55); } html[data-theme="light"] .wsch-resize-handle:hover .wsch-resize-grip span { background: rgba(180, 83, 9, 0.85); } /* -- 49.16 "Expanded" schedule panel ---------------------------- */ html[data-theme="light"] #ws-schedule.wsch-expanded > .wsch-panel { background: #ffffff; border-color: rgba(180, 83, 9, 0.30); box-shadow: 0 4px 30px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(251, 191, 36, 0.08); } html[data-theme="light"] #ws-schedule.wsch-expanded > .wsch-resize-handle { background: linear-gradient(180deg, #fef9c3 0%, #fde68a 50%, #fef9c3 100%); } /* -- 49.17 Toast/persistent progress ---------------------------- */ html[data-theme="light"] .ws-progress-toast { background: linear-gradient(135deg, rgba(34, 197, 94, 0.20), rgba(16, 185, 129, 0.10)); border-color: rgba(5, 150, 105, 0.40); color: #064e3b; box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16); } html[data-theme="light"] .ws-progress-track { background: rgba(15, 18, 24, 0.12); } html[data-theme="light"] .wsch-toast { box-shadow: 0 8px 32px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 18, 24, 0.06); } html[data-theme="light"] .wsch-toast.toast-warning { background: linear-gradient(135deg, rgba(234, 179, 8, 0.14), rgba(234, 179, 8, 0.06)); border-color: rgba(180, 83, 9, 0.30); } html[data-theme="light"] .wsch-toast.toast-success { background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.06)); border-color: rgba(5, 150, 105, 0.30); } html[data-theme="light"] .wsch-toast.toast-error { background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.06)); border-color: rgba(185, 28, 28, 0.30); } html[data-theme="light"] .wsch-toast.toast-info { background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.06)); border-color: rgba(37, 99, 235, 0.30); } html[data-theme="light"] .wsch-toast-title { color: #111827; } html[data-theme="light"] .wsch-toast-body { color: rgba(15, 18, 24, 0.65); } html[data-theme="light"] .wsch-toast-close { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.10); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .wsch-toast-close:hover { background: rgba(15, 18, 24, 0.10); color: #111827; border-color: rgba(15, 18, 24, 0.18); } /* -- 49.18 Worker-profile popup --------------------------------- */ html[data-theme="light"] .wsch-pp-avatar { border-color: rgba(15, 18, 24, 0.18); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12); } html[data-theme="light"] .wsch-pp-avatar-letter { background: rgba(15, 18, 24, 0.06); color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .wsch-pp-info { border-top-color: rgba(15, 18, 24, 0.10); } /* -- 49.19 Edit-mode panel border glow -------------------------- */ html[data-theme="light"] .wsch-panel.editing { border-color: rgba(180, 83, 9, 0.45); box-shadow: 0 2px 20px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(251, 191, 36, 0.08); } /* -- 49.20 Palette dot sheen on white --------------------------- */ /* In dark mode the palette dots use color-mix glow that looks good on a black panel. On white we just keep the dot but tone down the glow so it doesn't bleed across siblings. */ html[data-theme="light"] .wsch-pal-btn { background: rgba(15, 18, 24, 0.025); } html[data-theme="light"] .wsch-pal-btn:hover { background: rgba(15, 18, 24, 0.05); border-color: rgba(15, 18, 24, 0.12); } html[data-theme="light"] .wsch-pal-btn.active { background: rgba(251, 191, 36, 0.14); border-color: rgba(180, 83, 9, 0.45); box-shadow: 0 0 8px rgba(251, 191, 36, 0.18); } html[data-theme="light"] .wsch-pal-btn.active .wsch-pal-name { color: #92400e; } html[data-theme="light"] .wsch-pal-eraser { color: rgba(185, 28, 28, 0.65); } html[data-theme="light"] .wsch-pal-eraser:hover { color: #b91c1c; } html[data-theme="light"] .wsch-pal-eraser.active { color: #b91c1c; background: rgba(239, 68, 68, 0.12); border-color: rgba(185, 28, 28, 0.40); } html[data-theme="light"] .wsch-pal-eraser.active .wsch-pal-name { color: #b91c1c; } /* ============================================================== */ /* 50. WAVE-5: Events timeline (\u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u00ab\u041c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u044f\u00bb) */ /* The .sch-* module hard-codes #0f1013 / #141417 / #121215 */ /* backgrounds with !important. We must override with the */ /* same specificity to flip the timeline to light. */ /* ============================================================== */ /* -- 50.1 Top navigation (date / arrows / today button) --------- */ html[data-theme="light"] .sch-nav-arrow { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .sch-nav-arrow:hover { background: rgba(78, 205, 196, 0.12); border-color: rgba(13, 148, 136, 0.40); color: #0f6e66; } html[data-theme="light"] .sch-nav-today { background: rgba(78, 205, 196, 0.14); border-color: rgba(13, 148, 136, 0.40); color: #0e7d75; } html[data-theme="light"] .sch-nav-today:hover { background: rgba(78, 205, 196, 0.24); border-color: rgba(13, 148, 136, 0.55); color: #0f6e66; } html[data-theme="light"] .sch-nav-center { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .sch-nav-center:hover { background: rgba(15, 18, 24, 0.07); border-color: rgba(13, 148, 136, 0.40); box-shadow: 0 0 12px rgba(78, 205, 196, 0.10); } html[data-theme="light"] .sch-nav-date { color: #111827; } html[data-theme="light"] .sch-cal-icon { color: #0d9488; } /* -- 50.2 Timeline frame (.schedule-zone) ----------------------- */ /* Hard-coded #0f1013 with !important — must use !important too. */ html[data-theme="light"] .schedule-zone { background: #ffffff !important; border-color: rgba(13, 148, 136, 0.30) !important; box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.08) !important; } /* Custom scrollbars on the timeline */ html[data-theme="light"] .schedule-scroll { scrollbar-color: rgba(13, 148, 136, 0.30) transparent; } html[data-theme="light"] .schedule-scroll::-webkit-scrollbar-thumb { background: rgba(13, 148, 136, 0.35); } html[data-theme="light"] .schedule-placeholder { color: rgba(15, 18, 24, 0.45); } /* -- 50.3 Sticky corner / pavilion header / hour column --------- */ /* These use #141417 / #121215 hardcoded — replace with light */ /* greys that match the timeline frame. */ html[data-theme="light"] .sch-corner { background: #f1f5f9; color: #0e7d75; border-right-color: rgba(15, 18, 24, 0.08); border-bottom-color: rgba(13, 148, 136, 0.30); } html[data-theme="light"] .sch-header-places { background: #f1f5f9; border-bottom-color: rgba(13, 148, 136, 0.30); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .sch-hdr-place { border-left-color: rgba(15, 18, 24, 0.06); /* The pavilion-color tint (color-mix var(--pav-c)) keeps working, just lighten its alpha contribution by re-setting the bg. */ background: color-mix(in srgb, var(--pav-c, #888) 8%, #ffffff) !important; } html[data-theme="light"] .sch-time-col { background: #f8fafc; border-right-color: rgba(13, 148, 136, 0.18); box-shadow: 4px 0 12px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .sch-time-label { color: rgba(13, 148, 136, 0.78); } html[data-theme="light"] .sch-time-label.now-hour { color: #0d9488; } html[data-theme="light"] .sch-time-tick { background: rgba(13, 148, 136, 0.30); } /* -- 50.4 Grid lines / zebra / column dividers ------------------ */ html[data-theme="light"] .sch-grid-line { background: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .sch-grid-line.half { border-top-color: rgba(15, 18, 24, 0.04); } html[data-theme="light"] .sch-zebra { background: rgba(15, 18, 24, 0.025); } html[data-theme="light"] .sch-col { border-left-color: rgba(15, 18, 24, 0.06); } /* -- 50.5 Event blocks (.sch-event) ----------------------------- */ /* The original gradient mixes pavilion color with rgba white: on light surface that becomes invisible. Re-mix against white.*/ html[data-theme="light"] .sch-event { background: linear-gradient( 145deg, color-mix(in srgb, var(--pav-c) 18%, #ffffff) 0%, rgba(15, 18, 24, 0.02) 100% ); border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5); } html[data-theme="light"] .sch-event:hover { border-color: color-mix(in srgb, var(--pav-c) 60%, rgba(15, 18, 24, 0.20)); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14), 0 0 16px color-mix(in srgb, var(--pav-c) 24%, transparent); } html[data-theme="light"] .sch-event-name { color: #111827; } /* sch-event-time keeps var(--pav-c) — already vivid on light. */ /* -- 50.6 Now-marker / now-time chip / now-line ----------------- */ /* The marker has a 2px ring of #0f1013 (dark) — flip to white. */ html[data-theme="light"] .sch-now-marker { border-color: #ffffff; box-shadow: 0 0 12px rgba(13, 148, 136, 0.55), 0 0 4px rgba(13, 148, 136, 0.45), 0 0 0 1px rgba(13, 148, 136, 0.25); } html[data-theme="light"] .sch-now-time { background: #ffffff; color: #0d9488; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(13, 148, 136, 0.30); } @keyframes schNowPulseLight { 0%, 100% { box-shadow: 0 0 8px rgba(13, 148, 136, 0.45), 0 0 4px rgba(13, 148, 136, 0.30), 0 0 0 1px rgba(13, 148, 136, 0.20); transform: scale(1); } 50% { box-shadow: 0 0 16px rgba(13, 148, 136, 0.65), 0 0 6px rgba(13, 148, 136, 0.45), 0 0 0 1px rgba(13, 148, 136, 0.30); transform: scale(1.15); } } html[data-theme="light"] .sch-now-marker { animation-name: schNowPulseLight; } /* -- 50.7 Event detail popup (sch-ep-card) ---------------------- */ html[data-theme="light"] .sch-event-popup { background: rgba(15, 23, 42, 0.35); } html[data-theme="light"] .sch-ep-card { background: #ffffff; border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 12px 48px rgba(15, 23, 42, 0.20), 0 0 0 1px rgba(15, 18, 24, 0.05); } html[data-theme="light"] .sch-ep-name { color: #111827; } html[data-theme="light"] .sch-ep-label { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .sch-ep-val { color: #111827; } /* -- 50.8 Bottom filter buttons (Павильон / Место / ★) --------- */ html[data-theme="light"] .sch-filter-btn .filter-display { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .sch-filter-btn .filter-display:hover { background: rgba(15, 18, 24, 0.08); border-color: rgba(15, 18, 24, 0.20); color: #111827; } html[data-theme="light"] .sch-filter-btn.active .filter-display, html[data-theme="light"] .sch-filter-btn .filter-display:focus { background: rgba(78, 205, 196, 0.14); border-color: rgba(13, 148, 136, 0.45); box-shadow: 0 0 12px rgba(78, 205, 196, 0.14); color: #0e7d75; } /* -- 50.9 Workspace tabs strip (Мероприятия / Работа / etc) ---- */ /* Active tab uses bottom-border accent via JS; just make sure the tab text is readable on the white strip in light theme. */ html[data-theme="light"] .ws-slide { color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .ws-slide.active { color: #111827; } html[data-theme="light"] .ws-icon { opacity: 0.85; } /* ============================================================== */ /* 51. WAVE-6: \u00ab\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u00bb panel (.pr-float-* / .pr-drawer-*) */ /* Floating photo sheet at the bottom of the slide editor. */ /* The dark-theme original uses near-black surfaces with */ /* translucent white tints — we recolor for light theme. */ /* ============================================================== */ /* -- 51.1 Sheet container + header strip ----------------------- */ html[data-theme="light"] .pr-float-sheet { background: rgba(255, 255, 255, 0.97); border-top-color: rgba(124, 58, 237, 0.40); box-shadow: 0 -6px 30px rgba(15, 23, 42, 0.14), 0 -1px 8px rgba(124, 58, 237, 0.12); } html[data-theme="light"] .pr-float-sheet.pr-float-collapsed { border-top-color: rgba(124, 58, 237, 0.20); box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08); } /* Override the "chelka" handle bar (it had an explicit white-on-white bg from earlier wave). Make sure border under it is a hairline. */ html[data-theme="light"] .pr-float-chelka { background: rgba(255, 255, 255, 0.95); border-bottom-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .pr-float-chelka:hover { background: rgba(243, 244, 246, 0.95); } html[data-theme="light"] .pr-float-grip { background: rgba(124, 58, 237, 0.22); } html[data-theme="light"] .pr-float-chelka:hover .pr-float-grip { background: rgba(124, 58, 237, 0.50); } html[data-theme="light"] .pr-float-chelka:active .pr-float-grip { background: rgba(124, 58, 237, 0.75); } html[data-theme="light"] .pr-float-title { color: #4c1d95; } html[data-theme="light"] .pr-float-sheet.pr-float-collapsed .pr-float-grip { background: rgba(124, 58, 237, 0.18); } html[data-theme="light"] .pr-float-sheet.pr-float-collapsed .pr-float-title { color: rgba(76, 29, 149, 0.55); } html[data-theme="light"] .pr-float-close { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.55); } html[data-theme="light"] .pr-float-close:hover { background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.40); color: #6d28d9; } /* -- 51.2 Drawer thumbs (the photo cards) ----------------------- */ html[data-theme="light"] .pr-drawer-thumb { background: #f1f5f9; border-color: rgba(15, 18, 24, 0.10); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } html[data-theme="light"] .pr-drawer-thumb:hover { border-color: rgba(124, 58, 237, 0.55); box-shadow: 0 4px 16px rgba(124, 58, 237, 0.18); } html[data-theme="light"] .pr-drawer-thumb.pr-drawer-selected { border-color: rgba(37, 99, 235, 0.70); box-shadow: 0 0 12px rgba(37, 99, 235, 0.30); } html[data-theme="light"] .pr-drawer-thumb.is-used::after { box-shadow: inset 0 0 0 2px rgba(21, 128, 61, 0.65); } html[data-theme="light"] .pr-drawer-comment { color: rgba(15, 18, 24, 0.62); background: rgba(15, 18, 24, 0.025); } html[data-theme="light"] .pr-drawer-cmt-tip { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-color: rgba(124, 58, 237, 0.40); color: rgba(15, 18, 24, 0.85); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14), 0 0 12px rgba(124, 58, 237, 0.10); } html[data-theme="light"] .pr-drawer-empty, html[data-theme="light"] .pr-picker-loading, html[data-theme="light"] .pr-picker-empty { color: rgba(15, 18, 24, 0.45); } /* Inline action buttons on hover (zoom + insert) */ html[data-theme="light"] .pr-drawer-zoom-btn, html[data-theme="light"] .pr-drawer-insert-btn { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 18, 24, 0.18); color: #1f2937; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .pr-drawer-zoom-btn:hover { background: rgba(96, 165, 250, 0.85); border-color: rgba(37, 99, 235, 0.65); color: #ffffff; } html[data-theme="light"] .pr-drawer-insert-btn:hover { background: rgba(52, 211, 153, 0.85); border-color: rgba(5, 150, 105, 0.65); color: #ffffff; } /* "Used" green checkmark — keep it green; just lighten the ring. */ html[data-theme="light"] .pr-drawer-used { box-shadow: 0 2px 4px rgba(15, 23, 42, 0.20); } /* -- 51.3 Bulk-mode bar + pills --------------------------------- */ html[data-theme="light"] .pr-float-bulk { background: transparent; border-color: rgba(124, 58, 237, 0.45); color: #6d28d9; } html[data-theme="light"] .pr-float-bulk:hover { background: rgba(124, 58, 237, 0.10); color: #5b21b6; } html[data-theme="light"] .pr-float-bulk.pr-float-bulk-active { background: rgba(124, 58, 237, 0.18); color: #4c1d95; border-color: rgba(124, 58, 237, 0.65); } html[data-theme="light"] .pr-float-bulkbar { background: rgba(243, 244, 246, 0.96); border-bottom-color: rgba(124, 58, 237, 0.25); } html[data-theme="light"] .pr-bulk-count { color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .pr-bulk-act { background: rgba(15, 18, 24, 0.04); border-color: rgba(15, 18, 24, 0.12); color: rgba(15, 18, 24, 0.78); } html[data-theme="light"] .pr-bulk-act:hover:not(:disabled) { background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.45); color: #6d28d9; } html[data-theme="light"] .pr-bulk-primary { background: rgba(34, 197, 94, 0.18) !important; border-color: rgba(21, 128, 61, 0.45) !important; color: #166534 !important; } html[data-theme="light"] .pr-bulk-primary:hover:not(:disabled) { background: rgba(34, 197, 94, 0.30) !important; border-color: rgba(21, 128, 61, 0.65) !important; color: #14532d !important; } html[data-theme="light"] .pr-float-sheet.pr-bulk-mode .pr-drawer-thumb::before { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 18, 24, 0.40); } /* -- 51.4 Picker (alt photo strip) + titles --------------------- */ html[data-theme="light"] .pr-picker-wrap { border-top-color: rgba(124, 58, 237, 0.20); } html[data-theme="light"] .pr-picker-title { color: #111827; } html[data-theme="light"] .pr-picker-thumb { background: #f1f5f9; border-color: rgba(15, 18, 24, 0.10); } html[data-theme="light"] .pr-picker-thumb:hover { border-color: rgba(124, 58, 237, 0.50); box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15); } /* -- 51.5 Zone picker popup (Вставить в зону) ------------------- */ html[data-theme="light"] .pr-zone-picker { background: #ffffff; border-color: rgba(124, 58, 237, 0.30); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.14); } html[data-theme="light"] .pr-zp-title { color: #6d28d9; border-bottom-color: rgba(15, 18, 24, 0.06); } html[data-theme="light"] .pr-zp-slide-label { color: rgba(37, 99, 235, 0.75); } html[data-theme="light"] .pr-zp-zone-btn { color: rgba(15, 18, 24, 0.85); } html[data-theme="light"] .pr-zp-zone-btn:hover { background: rgba(124, 58, 237, 0.10); } html[data-theme="light"] .pr-zp-has-photo { background: rgba(34, 197, 94, 0.12); color: #166534; border-color: rgba(21, 128, 61, 0.30); } /* -- 51.6 Estimate comment cards (внутри окна редактирования) -- */ html[data-theme="light"] .pr-est-comment { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.22); color: #111827; } html[data-theme="light"] .pr-est-comment::placeholder { color: rgba(15, 18, 24, 0.35); } html[data-theme="light"] .pr-est-comment:focus { border-color: rgba(124, 58, 237, 0.55); } html[data-theme="light"] .pr-est-comment-card { background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(139, 92, 246, 0.03)); border-color: rgba(124, 58, 237, 0.25); } html[data-theme="light"] .pr-est-comment-label { color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .pr-est-comment-label svg { color: #6d28d9; } html[data-theme="light"] .pr-est-comment-status { color: #6d28d9; } html[data-theme="light"] .pr-est-comment-input { background: #ffffff; border-color: rgba(15, 18, 24, 0.14); color: #111827; } html[data-theme="light"] .pr-est-comment-input:focus { border-color: rgba(124, 58, 237, 0.50); background: #faf5ff; } /* -- 51.7 Photo-lightbox itself (Esc / arrows / counter) ------- */ /* The big translucent photo viewer stays dark by design (the image looks best on a dimmed backdrop). We only soften the backdrop slightly so it doesn't look pitch black on a light page transitioning out. */ html[data-theme="light"] .pr-lightbox-inner { background: rgba(15, 23, 42, 0.88); } /* Arrows + counter + caption stay light-on-dark — already styled. */ /* ============================================================== */ /* 52. WAVE-7: Info modals («?» buttons across the app) */ /* `.a5-info-modal` is reused by Сметы / ЯДиск / Планировщик / */ /* Плашка Бот, плюс отдельный `.wsch-info-modal` для графика. */ /* Все они открывают тёмный backdrop поверх overlay'я. */ /* ============================================================== */ /* -- 52.1 Backdrop fill (.a5-info-modal) ------------------------ */ /* Original: background: rgba(10,10,15,0.97). Flip to white. */ html[data-theme="light"] .a5-info-modal { background: rgba(255, 255, 255, 0.98); } /* -- 52.2 Title / Heading / Paragraphs / Bold-text -------------- */ /* The teal title (.a5-info-title) is already vivid, just deepen it a touch so it pops on white. */ html[data-theme="light"] .a5-info-title { color: #0d9488; } html[data-theme="light"] .a5-info-section b { color: #111827; } /* (.a5-info-section, .a5-info-heading, .a5-info-section p уже в 47.7) */ /* The "Понятно" close button — teal accent looks fine on white, but darken text a touch so it's not washed out. */ html[data-theme="light"] .a5-info-close { background: rgba(78, 205, 196, 0.16); border-color: rgba(13, 148, 136, 0.40); color: #0e7d75; } html[data-theme="light"] .a5-info-close:hover { background: rgba(78, 205, 196, 0.26); border-color: rgba(13, 148, 136, 0.60); color: #0f6e66; } /* -- 52.3 Workschedule info modal (.wsch-info-*) bold + paras --- */ /* Backdrop / title / heading already covered earlier (block 21). Add the missing: paragraph text, bold accents, sections. */ html[data-theme="light"] .wsch-info-section { background: rgba(15, 18, 24, 0.025); border-color: rgba(15, 18, 24, 0.08); } html[data-theme="light"] .wsch-info-section p { color: rgba(15, 18, 24, 0.62); } html[data-theme="light"] .wsch-info-section b { color: #111827; } /* -- 52.4 «?» help-button variants ------------------------------ */ /* The amber helper bubble (.wsch-help-qbtn) is already covered in block 21. Cover the red (editor) variant + .pr-help-btn + */ /* .est-edit-help-btn so they use a light-friendly tint. */ html[data-theme="light"] .wsch-help-qbtn-editor { background: rgba(239, 68, 68, 0.14); border-color: rgba(185, 28, 28, 0.45); color: #b91c1c; } html[data-theme="light"] .wsch-help-qbtn-editor:hover { background: rgba(239, 68, 68, 0.24); border-color: rgba(185, 28, 28, 0.65); color: #991b1b; } /* The teal "?" pill used in overlay headers — keep teal accent */ /* but soften the soft fill so it stays visible on white. */ html[data-theme="light"] .a5-info-btn, html[data-theme="light"] .pr-help-btn, html[data-theme="light"] .est-edit-help-btn { background: rgba(78, 205, 196, 0.16); border-color: rgba(13, 148, 136, 0.45); color: #0e7d75; } html[data-theme="light"] .a5-info-btn:hover, html[data-theme="light"] .pr-help-btn:hover, html[data-theme="light"] .est-edit-help-btn:hover { background: rgba(78, 205, 196, 0.28); border-color: rgba(13, 148, 136, 0.65); color: #0f6e66; } /* -- 52.5 Generic catch-all for any *-info-modal / *-help-modal - */ /* Some modules (planner, soprovod, etc.) clone this pattern with their own prefix. Keep the backdrop white in light theme. */ html[data-theme="light"] :where( [class*="info-modal"]:not(.wsch-avail-modal), [class$="-help-modal"], [class*="-help-modal "] ) { background-color: rgba(255, 255, 255, 0.98); } html[data-theme="light"] :where( [class*="info-section"], [class$="-help-section"] ) :where(b, strong) { color: #111827; }