/* ========================================================= MOTYW CIEMNY - SZCZEGOLY KLIENTA Plik: theme-client-detail.css Strona ma wlasny, rozbudowany zestaw stylow w (karta danych, tabela, zakladki, paski akcji), dlatego jej ciemny wariant piszemy recznie zamiast korzystac z automatycznych nadpisan w theme-pages.css. Paleta pochodzi z theme.css. ========================================================= */ /* ========================= NAGLOWEK STRONY ========================= */ html[data-bs-theme="dark"] .page-title { color: var(--app-ink); } /* ========================= KARTA Z DANYMI ========================= */ html[data-bs-theme="dark"] .client-box { background: var(--app-surface); border-color: var(--app-border); } html[data-bs-theme="dark"] .client-box-header { background: var(--app-surface-2); border-bottom-color: var(--app-border); } html[data-bs-theme="dark"] .client-box-header h4, html[data-bs-theme="dark"] .detail-panel-title { color: var(--app-ink); } /* ========================= PRZYCISKI AKCJI Kolorowe (niebieski, bursztynowy, czerwony) zostaja bez zmian - niosa znaczenie. Zmieniamy tylko warianty "ghost" na jasnym tle. ========================= */ html[data-bs-theme="dark"] .client-action-btn { background: rgba(91, 155, 234, .14); border-color: rgba(91, 155, 234, .38); color: #7fb4f2; } html[data-bs-theme="dark"] .client-action-btn:hover { background: var(--app-accent); border-color: var(--app-accent); color: #0b1220; } html[data-bs-theme="dark"] .client-action-btn-primary { background: var(--app-accent); border-color: var(--app-accent); color: #0b1220; } html[data-bs-theme="dark"] .client-action-btn-primary:hover { background: #7fb4f2; border-color: #7fb4f2; color: #0b1220; } html[data-bs-theme="dark"] .client-submit-btn, html[data-bs-theme="dark"] .client-save-btn, html[data-bs-theme="dark"] .detail-payments-save, html[data-bs-theme="dark"] .detail-toolbar-btn-primary, html[data-bs-theme="dark"] .employee-add-btn { background: var(--app-accent) !important; border-color: var(--app-accent) !important; color: #0b1220 !important; } html[data-bs-theme="dark"] .client-submit-btn:hover, html[data-bs-theme="dark"] .client-save-btn:hover, html[data-bs-theme="dark"] .detail-payments-save:hover, html[data-bs-theme="dark"] .detail-toolbar-btn-primary:hover, html[data-bs-theme="dark"] .employee-add-btn:hover { background: #7fb4f2 !important; border-color: #7fb4f2 !important; color: #0b1220 !important; } html[data-bs-theme="dark"] .client-lookup-btn { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-muted); } html[data-bs-theme="dark"] .client-lookup-btn:hover { background: rgba(91, 155, 234, .14); border-color: var(--app-accent); color: #7fb4f2; } /* ========================= TABELA KLIENTOW ========================= */ html[data-bs-theme="dark"] .client-table-wrap { border-color: var(--app-border); } html[data-bs-theme="dark"] .client-table { color: var(--app-muted); } html[data-bs-theme="dark"] .client-table thead th { background: var(--app-surface-2); color: var(--app-muted); border-bottom-color: var(--app-border); } html[data-bs-theme="dark"] .client-table tbody td { border-bottom-color: var(--app-border); } html[data-bs-theme="dark"] .client-table tbody tr:nth-child(odd) { background: var(--app-surface-2); } html[data-bs-theme="dark"] .client-table tbody tr:hover { background: var(--app-surface-3); } html[data-bs-theme="dark"] .client-symbol { color: var(--app-ink); } html[data-bs-theme="dark"] .client-summary, html[data-bs-theme="dark"] .client-empty td { color: var(--app-muted); } /* statusy zachowuja swoj odcien, tylko ciemniejszy */ html[data-bs-theme="dark"] .client-status-active { background: rgba(92, 184, 92, .18); color: #6fcf85; } html[data-bs-theme="dark"] .client-status-inactive { background: rgba(148, 164, 187, .16); color: var(--app-muted); } /* ========================= WIERSZE "DANE KLIENTA" ========================= */ html[data-bs-theme="dark"] .detail-row { border-bottom-color: var(--app-border); } html[data-bs-theme="dark"] .detail-label, html[data-bs-theme="dark"] .detail-sync-time, html[data-bs-theme="dark"] .detail-payments-field label { color: var(--app-muted); } html[data-bs-theme="dark"] .detail-value { color: var(--app-ink); } html[data-bs-theme="dark"] .detail-value.is-empty { color: #6f7f96; } html[data-bs-theme="dark"] .detail-payments { background: var(--app-surface-2); border-color: var(--app-border); } html[data-bs-theme="dark"] .detail-payments-status { color: #6fcf85; } /* wylaczony przelacznik - jasne tlo zamieniamy na ciemne */ html[data-bs-theme="dark"] .detail-toggle.is-off { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-muted); } /* ========================= ZAKLADKI SEKCJI ========================= */ html[data-bs-theme="dark"] .detail-tab { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-muted); } html[data-bs-theme="dark"] .detail-tab:hover { background: var(--app-surface-3); border-color: rgba(91, 155, 234, .4); color: var(--app-ink); } html[data-bs-theme="dark"] .detail-tab.is-active, html[data-bs-theme="dark"] .detail-tab.is-active:hover { background: var(--app-accent); border-color: var(--app-accent); color: #0b1220; } html[data-bs-theme="dark"] .detail-empty { border-color: var(--app-border); color: var(--app-muted); } /* ========================= OKNA MODALNE ========================= */ html[data-bs-theme="dark"] .client-modal-columns .form-label { color: var(--app-muted); } html[data-bs-theme="dark"] .client-required { background: rgba(91, 155, 234, .10); border-color: rgba(91, 155, 234, .35); } html[data-bs-theme="dark"] .client-modal-error { color: #f28b93; } /* ========================= UKLAD NR 2 (client-detail-2.html) ========================= */ html[data-bs-theme="dark"] .client-hero { background: var(--app-surface); border-color: var(--app-border); } html[data-bs-theme="dark"] .client-hero-avatar { background: rgba(52, 115, 186, .18); color: #7fb4f2; } html[data-bs-theme="dark"] .detail-split-nav { border-right-color: var(--app-border); border-bottom-color: var(--app-border); } html[data-bs-theme="dark"] .client-status-toggle:hover { filter: brightness(1.15); } html[data-bs-theme="dark"] .client-status-toggle:focus-visible { outline-color: var(--app-accent); } /* dodatkowe przyciski paska akcji - kolory zostaja, zmienia sie tylko notatka */ html[data-bs-theme="dark"] .notes-item { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-ink); } html[data-bs-theme="dark"] .notes-item time { color: var(--app-muted); }