:root { --sidebar-width: 280px; --sidebar-collapsed-width: 72px; /* Tokeny kolorów — wariant jasny (domyślny). */ --app-bg: transparent; --app-surface: #ffffff; --app-surface-2: #f8f9fa; --app-surface-hover: #f6f9fc; --app-surface-active: #e6f2ff; --app-translucent: rgba(255, 255, 255, 0.65); --app-translucent-soft: rgba(255, 255, 255, 0.22); --app-text: #212529; --app-text-muted: #506690; --app-text-muted-strong: #6c757d; --app-border: #e3e6ed; --app-border-soft: rgba(255, 255, 255, 0.25); --app-link: #1155cc; --app-navbar-bg: linear-gradient(90deg, #c8def3 0%, #f6f7f9 100%); --app-shadow-glass: 0 4px 32px 0 rgba(31, 38, 135, 0.10); --app-table-row-border: #f0f0f0; --app-sidebar-chevron: "%23506690"; /* kolor strzałek accordion (URL-encoded) */ } /* Wariant nocny (grafit). Aktywowany przez data-theme=dark na . */ :root[data-theme="dark"] { --app-bg: #1c1f26; --app-surface: #232730; --app-surface-2: #2a2f3a; --app-surface-hover: #2a2f3a; --app-surface-active: #2e3a55; --app-translucent: rgba(28, 31, 38, 0.72); --app-translucent-soft: rgba(28, 31, 38, 0.55); --app-text: #e6e8ed; --app-text-muted: #b6c0d0; --app-text-muted-strong: #c5cad3; --app-border: #3a3f4a; --app-border-soft: rgba(255, 255, 255, 0.08); --app-link: #7aa7ff; --app-navbar-bg: linear-gradient(90deg, #232a3a 0%, #1c1f26 100%); --app-shadow-glass: 0 4px 32px 0 rgba(0, 0, 0, 0.45); --app-table-row-border: #2f3340; --app-sidebar-chevron: "%23b6c0d0"; color-scheme: dark; } html, body { background-color: var(--app-bg); color: var(--app-text); } body { position: relative; font-family: 'Segoe UI', sans-serif; } /* Wymuś ukrycie wyboru imprintu dla cooperative publisher (publisher_x / publisher_x_user). */ body.is-coop-publisher #dashboardImprintRow { display: none !important; } .dashboard-imprint-dropdown-menu { min-width: 320px; max-height: 320px; overflow-y: auto; } .top-navbar { background: var(--app-navbar-bg); border-bottom: 1px solid var(--app-border); box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.05); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: 56px; /* zmniejszona wysokość top baru */ } .sidebar { position: fixed; top: 56px; /* Przesunięcie pod top bar (wysokość top baru, było 80px) */ left: 0; bottom: 0; width: var(--sidebar-width); background-color: var(--app-surface); border-right: 1px solid var(--app-border); box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.05); z-index: 999; overflow-x: hidden; transition: width 0.2s ease; } .sidebar-content { width: 100%; height: 100%; padding: 1rem; display: flex; flex-direction: column; } .sidebar-menu { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 80px); overflow-y: auto; overflow-x: hidden; } .sidebar-link { color: var(--app-text-muted); padding: 0.75rem 1rem; white-space: normal; word-wrap: break-word; text-decoration: none; display: block; width: 100%; text-align: left; border: none; background: transparent; transition: background-color 0.2s; } .sidebar-link:hover { background-color: var(--app-surface-hover); text-decoration: none; color: var(--app-text-muted); } .sidebar-link.active { background-color: transparent; color: var(--app-text-muted); } .sidebar-link.active:hover { background-color: var(--app-surface-active); color: var(--app-link); } /* Bootstrap Accordion overrides for sidebar */ .sidebar-menu .accordion-item { border: none; background: transparent; margin-bottom: 0.25rem; } .sidebar-menu .accordion-button { background-color: transparent; border: none; padding: 0.75rem 1rem; color: var(--app-text-muted); font-size: 0.95rem; font-weight: 500; box-shadow: none; text-align: left; display: flex; align-items: center; position: relative; padding-right: 2.5rem; } .sidebar-menu .accordion-button:focus { box-shadow: none; border: none; } .sidebar-menu .accordion-button:not(.collapsed) { background-color: transparent; color: var(--app-text-muted); box-shadow: none; } .sidebar-menu .accordion-button:hover { background-color: var(--app-surface-hover); } .sidebar-menu .accordion-button:not(.collapsed):hover { background-color: var(--app-surface-active); color: var(--app-link); } .sidebar-menu .accordion-button::after { display: inline-block; width: 0.8rem; height: 0.8rem; margin-left: auto; content: ""; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23506690'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 0.8rem; transition: transform 0.2s ease-in-out; transform: rotate(0deg); position: absolute; right: 1rem; top: 50%; transform-origin: center; } .sidebar-menu .accordion-button:not(.collapsed)::after { transform: rotate(180deg); } /* Strzałka w wariancie nocnym (jaśniejszy odcień, taki sam fill jak --app-text-muted). */ :root[data-theme="dark"] .sidebar-menu .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b6c0d0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* Przycisk przełącznika motywu w top-navbar. */ .theme-toggle-btn { background: transparent; border: 1px solid transparent; color: var(--app-text-muted-strong); padding: 0.25rem 0.5rem; border-radius: 6px; line-height: 1; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .theme-toggle-btn:hover { background: var(--app-surface-hover); color: var(--app-link); border-color: var(--app-border); } .theme-toggle-btn i { font-size: 1.15rem; } .sidebar-menu .accordion-collapse { border: none; } .sidebar-menu .accordion-body { padding: 0 1rem 0.5rem 1rem; border: none; } .sidebar-menu .accordion-body .sidebar-link { padding: 0.5rem 1rem 0.5rem 2rem; color: var(--app-text-muted); text-decoration: none; display: block; border-radius: 0.25rem; transition: background-color 0.2s; } .sidebar-menu .accordion-body .sidebar-link:hover { background-color: var(--app-surface-hover); color: var(--app-link); text-decoration: none; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding: 0 0.25rem; } .sidebar-title { font-size: 0.95rem; font-weight: 600; color: var(--app-text-muted); } .sidebar-pin-toggle { padding: 0.25rem 0.4rem; line-height: 1; border-radius: 6px; } .sidebar-pin-toggle i { font-size: 1.1rem; } /* Zagnieżdżone accordiony w Production PipeLine */ #nestedProductionAccordion .accordion-item { margin-bottom: 0.125rem; } #nestedProductionAccordion .accordion-button { padding: 0.5rem 1rem 0.5rem 2rem; font-size: 0.9rem; color: var(--app-text-muted-strong); } #nestedProductionAccordion .accordion-button::after { right: 1rem; } #nestedProductionAccordion .accordion-body { padding: 0 0.5rem 0.25rem 1rem; } #nestedProductionAccordion .accordion-body .sidebar-link { padding-left: 1.5rem; font-size: 0.85rem; color: var(--app-text-muted-strong); } #nestedProductionAccordion .accordion-body .sidebar-link:hover { color: var(--app-link); } .sidebar-footer { position: fixed; bottom: 0; left: 0; width: var(--sidebar-width); background-color: var(--app-surface); border-top: 1px solid var(--app-border); padding: 0.75rem 1rem; z-index: 998; transition: width 0.2s ease, padding 0.2s ease; } .footer-content { display: flex; justify-content: space-between; align-items: center; } .footer-info { font-size: 0.875rem; } .footer-links { display: flex; gap: 0.5rem; } .footer-link { color: var(--app-text-muted-strong); text-decoration: none; padding: 0.25rem; border-radius: 0.25rem; transition: color 0.2s, background-color 0.2s; } .footer-link:hover { color: var(--app-link); background-color: var(--app-surface-hover); text-decoration: none; } .sidebar { bottom: 60px; /* Miejsce na footer */ } .content { position: relative; /* kontekst dla iframe list (absolute + height %) */ margin-left: var(--sidebar-width); padding: 2rem; padding-top: 1.5rem; width: calc(100% - var(--sidebar-width)); min-height: calc(100vh - 56px); /* było 80px */ margin-top: 56px; /* było 80px */ display: flex; flex-direction: column; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--app-border-soft); border-radius: 0px; box-shadow: var(--app-shadow-glass); transition: margin-left 0.2s ease, width 0.2s ease; } .row { display: flex !important; flex-wrap: wrap !important; margin-left: -0.75rem; margin-right: -0.75rem; } .row > [class*="col-"] { display: flex !important; flex-direction: column !important; padding-left: 0.75rem; padding-right: 0.75rem; } .col-12 { flex: 0 0 100% !important; max-width: 100% !important; } .col-sm-6 { flex: 0 0 50% !important; max-width: 50% !important; } .col-md-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; } .col-lg-3 { flex: 0 0 25% !important; max-width: 25% !important; } @media (max-width: 575.98px) { .col-12 { flex: 0 0 100% !important; max-width: 100% !important; } } @media (min-width: 576px) and (max-width: 767.98px) { .col-sm-6 { flex: 0 0 50% !important; max-width: 50% !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .col-md-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; } } @media (min-width: 992px) { .col-lg-3 { flex: 0 0 25% !important; max-width: 25% !important; } } .card { border: none; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); margin-bottom: 1.5rem; position: relative; z-index: 1; } @media (max-width: 991px) { .sidebar { position: static; width: 100%; top: auto; } .content { margin-left: 0; padding-top: 4rem; } } .modal-content, .sidebar-footer { background: var(--app-translucent) !important; backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--app-border-soft); box-shadow: var(--app-shadow-glass); border-radius: 0 !important; } .sidebar { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--app-border); box-shadow: var(--app-shadow-glass); border-radius: 0 !important; } .sidebar.collapsed, body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); overflow: hidden; } body.sidebar-collapsed .sidebar:hover { width: var(--sidebar-width); } body.sidebar-collapsed .sidebar-content { padding: 0.75rem 0.5rem; align-items: center; } body.sidebar-collapsed .sidebar:hover .sidebar-content { padding: 1rem; align-items: stretch; } body.sidebar-collapsed .sidebar-menu { max-height: calc(100vh - 80px); } body.sidebar-collapsed .sidebar .accordion-button, body.sidebar-collapsed .sidebar .sidebar-link { font-size: 0 !important; padding: 0.65rem 0.5rem; justify-content: center; } body.sidebar-collapsed .sidebar .accordion-button i, body.sidebar-collapsed .sidebar .sidebar-link i { font-size: 1.2rem !important; margin-right: 0; } body.sidebar-collapsed .sidebar .accordion-button::after { display: none; } body.sidebar-collapsed .sidebar .accordion-collapse { display: none !important; } body.sidebar-collapsed .sidebar:hover .accordion-button, body.sidebar-collapsed .sidebar:hover .sidebar-link { font-size: 0.95rem !important; padding: 0.75rem 1rem; justify-content: flex-start; } body.sidebar-collapsed .sidebar:hover .accordion-button i, body.sidebar-collapsed .sidebar:hover .sidebar-link i { font-size: 1.2rem !important; margin-right: 0.5rem; } body.sidebar-collapsed .sidebar:hover .accordion-button::after { display: inline-block; } body.sidebar-collapsed .sidebar:hover .accordion-collapse.show { display: block !important; } body.sidebar-collapsed .sidebar:hover .sidebar-menu { overflow-y: auto; } body.sidebar-collapsed .sidebar:hover ~ .content { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); } body.sidebar-collapsed .sidebar:hover ~ .sidebar-footer { width: var(--sidebar-width); } body.sidebar-collapsed .content { margin-left: var(--sidebar-collapsed-width); width: calc(100% - var(--sidebar-collapsed-width)); } body.sidebar-collapsed .sidebar-footer { width: var(--sidebar-collapsed-width); padding: 0.5rem; } body.sidebar-collapsed .footer-content { justify-content: center; } body.sidebar-collapsed .footer-info { display: none; } body.sidebar-collapsed .footer-links { width: 100%; justify-content: center; } /* Collapsed: ukryj tytuł "Menu", wyśrodkuj pin-toggle */ body.sidebar-collapsed .sidebar-title { display: none; } body.sidebar-collapsed .sidebar-header { justify-content: center; padding: 0; margin-bottom: 0.5rem; } /* Hover: przywróć tytuł i wyrównanie */ body.sidebar-collapsed .sidebar:hover .sidebar-title { display: block; } body.sidebar-collapsed .sidebar:hover .sidebar-header { justify-content: space-between; padding: 0 0.25rem; } .sidebar-pin-toggle.is-unpinned i { transform: rotate(35deg); } @media (max-width: 991px) { body.sidebar-collapsed .sidebar, body.sidebar-collapsed .sidebar:hover { width: 100%; } body.sidebar-collapsed .content, body.sidebar-collapsed .sidebar:hover ~ .content { margin-left: 0; width: 100%; } body.sidebar-collapsed .sidebar-footer, body.sidebar-collapsed .sidebar:hover ~ .sidebar-footer { width: 100%; } .sidebar-pin-toggle { display: none; } } .hidden-by-login { display: none !important; } .env-label { font-size: 0.6rem; font-weight: 400; letter-spacing: 0.12em; margin-top: 2px; color: #4a90e2; /* produkcja */ transform: translate(35px, -15px); display: inline-block; } body.env-dev .env-label { color: #6b92ec; /* dev/test */ } body.env-test .env-label { color: #f39c12; /* test */ } .category-list { background: transparent !important; border-radius: 8px; padding: 1rem; font-size: 1em; box-shadow: 0 2px 8px #0001; margin-bottom: 1rem; flex: 1 1 50%; max-width: 49%; min-width: 180px; } .pie-chart-container { background: transparent !important; border-radius: 8px; padding: 1rem; box-shadow: 0 2px 8px #0001; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; flex: 1 1 50%; max-width: 49%; min-width: 180px; } .stats-row { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; margin-top: 0.5rem !important; } .stats-controls-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 0.2rem; margin-top: 0; } .stats-controls-row .form-label { margin-bottom: 0.25rem; } .stats-controls-row .form-select, .stats-controls-row .form-control { min-width: 120px; max-width: 180px; } .stats-controls-row #refreshStatsBtn { min-width: 120px; } .dashboard-koor-bar { width: 100%; height: 10px; background: transparent !important; border-radius: 4px 4px 0 0; margin-bottom: 1.5rem; box-shadow: none; opacity: 1; } .dashboard-publisher-header { font-size: 1.5rem; font-weight: 600; color: var(--bs-body-color, #212529); } /* Kafelki statystyk na dashboardzie — bez bg-light (w trybie ciemnym dawało jasne tło + jasny tekst Bootstrapa). */ .dashboard-stat-card { background-color: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); } .dashboard-stat-card .card-body { color: var(--app-text); } .dashboard-stat-card .text-muted { color: var(--app-text-muted) !important; } .dashboard-stat-card h6 { color: var(--app-text); } .dashboard-tile, .category-list, .pie-chart-container { background: var(--app-translucent-soft) !important; backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--app-border-soft); border-radius: 12px; box-shadow: var(--app-shadow-glass); } .row.mb-4.g-3 { margin-top: 0.2rem; background: var(--app-translucent-soft) !important; backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--app-border-soft); border-radius: 12px; box-shadow: var(--app-shadow-glass); padding: 1rem 0.5rem; margin-bottom: 1rem !important; } .category-bar-row { display: flex; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; } .category-bar-label { flex: 1 1 40%; font-size: 0.98em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .category-bar-wrap { flex: 2 1 50%; background: repeating-linear-gradient(90deg, #e3e6ed 0, #e3e6ed 2px, transparent 2px, transparent 20%); border-radius: 8px; height: 18px; position: relative; margin-left: 0.5em; min-width: 60px; max-width: 100%; display: flex; align-items: center; } .category-bar { height: 100%; border-radius: 8px; transition: width 0.3s; } .category-bar-value { flex: 0 0 auto; min-width: 2.5em; text-align: right; font-weight: 500; margin-left: 0.5em; } .category-bar-scale { display: flex; justify-content: space-between; font-size: 0.85em; color: #888; margin-top: 0.5em; padding-left: 7em; padding-right: 2.5em; } .category-table th:nth-child(2), .category-table td:nth-child(2) { width: 500px; min-width: 280px; max-width: 450px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .category-table th:last-child, .category-table td:last-child { width: 100%; } .category-table td { vertical-align: middle; } .category-table td:last-child { padding-left: 0.5em; padding-right: 0.5em; } .category-table td:last-child div { min-width: 10px; max-width: 100%; height: 16px; display: block; margin: 0; transition: width 0.3s; text-align: left; } .category-table td:nth-child(3), .category-table th:nth-child(3) { text-align: right; } .navbar-brand img { margin-top: 5px; } .table-header { margin-bottom: 0 !important; } .table-footer { margin-top: 0 !important; } /* --- Stopka tabeli (paginacja, info, length) --- */ /* Brak niestandardowych stylów – DataTables generuje footer standardowo */ /* --- Wspólne klasy iframe --- */ /* Iframe listy (pełnoekranowy w .content) */ .panel-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: calc(100vh - 120px); border: none; z-index: 10; } /* Iframe widoku szczegółowego (z cieniem, zaokrągleniami) */ .panel-iframe-view { position: absolute; top: 0; left: 0; width: 100%; height: calc(100vh - 100px); border: none; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; } /* === Globalne wylaczenie spinnerow w calym systemie === */ .spinner-border, .spinner-grow, #tableLoader, .dataTables_wrapper .dataTables_processing, div.dataTables_processing, .dt-container .dt-processing, div.dt-processing { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ===================================================================== Motyw nocny — nadpisania dla okien Master-Detail (MD) i modali edycji. Aktywne wyłącznie dla :root[data-theme="dark"]. W trybie jasnym pliki modułów (Catalog/Audiobooks/Czytelnicy/Orders/Tokens MD + modale ProductionTaskEdit / ProductionPipeLineNew / CatalogEdit) zachowują się tak jak dotąd — granatowa kolorystyka „Harmonogramu premier”. ===================================================================== */ /* Wspólne panele info w oknach MD */ :root[data-theme="dark"] .product-info-panel .card, :root[data-theme="dark"] .audiobook-info-panel .card, :root[data-theme="dark"] .czytelnik-info-panel .card, :root[data-theme="dark"] .order-info-panel .card, :root[data-theme="dark"] .token-info-panel .card { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] .product-info-panel .card-header, :root[data-theme="dark"] .audiobook-info-panel .card-header, :root[data-theme="dark"] .czytelnik-info-panel .card-header, :root[data-theme="dark"] .order-info-panel .card-header, :root[data-theme="dark"] .token-info-panel .card-header { background-color: var(--app-surface-2) !important; border-bottom-color: var(--app-border) !important; color: var(--app-text) !important; } :root[data-theme="dark"] .product-info-panel .card-body { background-color: var(--app-surface) !important; color: var(--app-text); } :root[data-theme="dark"] .product-info-panel strong, :root[data-theme="dark"] .audiobook-info-panel strong, :root[data-theme="dark"] .czytelnik-info-panel strong, :root[data-theme="dark"] .order-info-panel strong, :root[data-theme="dark"] .token-info-panel strong { color: var(--app-text); } :root[data-theme="dark"] .product-info-panel .form-label { color: var(--app-text-muted); } :root[data-theme="dark"] .product-info-panel .row:last-child, :root[data-theme="dark"] .audiobook-info-panel .row:last-child, :root[data-theme="dark"] .czytelnik-info-panel .row:last-child, :root[data-theme="dark"] .order-info-panel .row:last-child { border-top-color: var(--app-border) !important; } /* Nagłówki sekcji Master/Detail */ :root[data-theme="dark"] .ppl-md-section-header, :root[data-theme="dark"] .catalog-md-section-header { border-bottom-color: var(--app-border); } :root[data-theme="dark"] .ppl-md-section-header .text-muted, :root[data-theme="dark"] .catalog-md-section-header .text-muted { color: var(--app-text-muted) !important; } /* Nagłówki tabel MD */ :root[data-theme="dark"] #tableCatalogListMD th, :root[data-theme="dark"] #tableProductionPipeLineMD th, :root[data-theme="dark"] #tableAudioBooksMD th, :root[data-theme="dark"] #tableCzytelnicyBooksMD th, :root[data-theme="dark"] #tableOrderItemsMD th { background-color: var(--app-surface-2) !important; border-bottom-color: var(--app-border) !important; color: var(--app-text) !important; } :root[data-theme="dark"] #tableCatalogListMD tbody tr:hover > *, :root[data-theme="dark"] #tableProductionPipeLineMD tbody tr:hover > *, :root[data-theme="dark"] #tableAudioBooksMD tbody tr:hover > *, :root[data-theme="dark"] #tableCzytelnicyBooksMD tbody tr:hover > *, :root[data-theme="dark"] #tableOrderItemsMD tbody tr:hover > * { background-color: var(--app-surface-hover) !important; } /* Pasek przycisków sticky w MD + autocomplete + nagłówki/stopki tabel */ :root[data-theme="dark"] #table-buttons-row { background: var(--app-surface) !important; } /* Autocomplete (Kontrahent, faktury, autorzy) — tokeny zamiast stałych kolorów */ .autocomplete-dropdown { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 0.375rem; color: var(--app-text); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } .autocomplete-item { padding: 0.5rem 1rem; cursor: pointer; background: var(--app-surface); color: var(--app-text); border-bottom: 1px solid var(--app-table-row-border); } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover, .autocomplete-item.is-active { background-color: var(--app-surface-hover); color: var(--app-text); } :root[data-theme="dark"] .table-header, :root[data-theme="dark"] .table-footer { background-color: var(--app-surface-2) !important; border-color: var(--app-border) !important; color: var(--app-text); } /* === Modale: taskModal, productionPipeLineNewModal, catalogItemModal, authorItemModal === */ :root[data-theme="dark"] #taskModal .modal-content, :root[data-theme="dark"] #productionPipeLineNewModal .modal-content, :root[data-theme="dark"] #catalogItemModal .modal-content, :root[data-theme="dark"] #authorItemModal .modal-content { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] #taskModal .modal-header, :root[data-theme="dark"] #productionPipeLineNewModal .modal-header, :root[data-theme="dark"] #catalogItemModal .modal-header, :root[data-theme="dark"] #authorItemModal .modal-header { background: var(--app-surface-2); border-bottom-color: var(--app-border); } :root[data-theme="dark"] #taskModal .modal-title, :root[data-theme="dark"] #productionPipeLineNewModal .modal-title, :root[data-theme="dark"] #catalogItemModal .modal-title, :root[data-theme="dark"] #authorItemModal .modal-title { color: var(--app-text); } :root[data-theme="dark"] #taskModal .btn-close, :root[data-theme="dark"] #productionPipeLineNewModal .btn-close, :root[data-theme="dark"] #catalogItemModal .btn-close, :root[data-theme="dark"] #authorItemModal .btn-close { filter: invert(0.92); } :root[data-theme="dark"] #taskModal .modal-body, :root[data-theme="dark"] #productionPipeLineNewModal .modal-body, :root[data-theme="dark"] #catalogItemModal .modal-body, :root[data-theme="dark"] #authorItemModal .modal-body { background: var(--app-surface) !important; color: var(--app-text); } :root[data-theme="dark"] #taskModal .modal-footer, :root[data-theme="dark"] #productionPipeLineNewModal .modal-footer, :root[data-theme="dark"] #catalogItemModal .modal-footer, :root[data-theme="dark"] #authorItemModal .modal-footer { background: var(--app-surface-2); border-top-color: var(--app-border); } :root[data-theme="dark"] #taskModal .form-label, :root[data-theme="dark"] #productionPipeLineNewModal .form-label, :root[data-theme="dark"] #catalogItemModal .form-label, :root[data-theme="dark"] #catalogItemModal .form-check-label, :root[data-theme="dark"] #authorItemModal .form-label { color: var(--app-text-muted); } :root[data-theme="dark"] #taskModal .form-control, :root[data-theme="dark"] #taskModal .form-select, :root[data-theme="dark"] #productionPipeLineNewModal .form-control, :root[data-theme="dark"] #productionPipeLineNewModal .form-select, :root[data-theme="dark"] #catalogItemModal .form-control, :root[data-theme="dark"] #catalogItemModal .form-select, :root[data-theme="dark"] #authorItemModal .form-control, :root[data-theme="dark"] #authorItemModal .form-select { background-color: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] #authorItemModal .form-control:disabled, :root[data-theme="dark"] #authorItemModal .form-select:disabled { background-color: var(--app-surface); color: var(--app-text-muted); opacity: 1; } :root[data-theme="dark"] #taskModal .form-control:focus, :root[data-theme="dark"] #taskModal .form-select:focus, :root[data-theme="dark"] #productionPipeLineNewModal .form-control:focus, :root[data-theme="dark"] #productionPipeLineNewModal .form-select:focus, :root[data-theme="dark"] #catalogItemModal .form-control:focus, :root[data-theme="dark"] #catalogItemModal .form-select:focus, :root[data-theme="dark"] #authorItemModal .form-control:focus, :root[data-theme="dark"] #authorItemModal .form-select:focus { border-color: var(--app-link); box-shadow: 0 0 0 0.15rem rgba(122, 167, 255, 0.25); } :root[data-theme="dark"] #taskModal .input-group-text, :root[data-theme="dark"] #productionPipeLineNewModal .input-group-text, :root[data-theme="dark"] #catalogItemModal .input-group-text, :root[data-theme="dark"] #authorItemModal .input-group-text { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } :root[data-theme="dark"] #taskModal .input-group-text.bg-light, :root[data-theme="dark"] #productionPipeLineNewModal .input-group-text.bg-light, :root[data-theme="dark"] #catalogItemModal .input-group-text.bg-light, :root[data-theme="dark"] #authorItemModal .input-group-text.bg-light { background: var(--app-surface-2) !important; } :root[data-theme="dark"] #taskModal .form-text, :root[data-theme="dark"] #productionPipeLineNewModal .form-text, :root[data-theme="dark"] #catalogItemModal .form-text, :root[data-theme="dark"] #authorItemModal .form-text { color: var(--app-text-muted); } :root[data-theme="dark"] #authorItemModal .badge.bg-secondary { background-color: var(--app-link) !important; color: #0b1220 !important; } :root[data-theme="dark"] #authorItemModal hr { border-color: var(--app-border); opacity: 1; } :root[data-theme="dark"] #taskModal .nav-tabs .nav-link, :root[data-theme="dark"] #productionPipeLineNewModal .nav-tabs .nav-link, :root[data-theme="dark"] #catalogItemModal .nav-tabs .nav-link { color: var(--app-text-muted); } :root[data-theme="dark"] #taskModal .nav-tabs .nav-link:hover, :root[data-theme="dark"] #productionPipeLineNewModal .nav-tabs .nav-link:hover, :root[data-theme="dark"] #catalogItemModal .nav-tabs .nav-link:hover { background: var(--app-surface-hover); border-color: var(--app-border); } :root[data-theme="dark"] #taskModal .nav-tabs .nav-link.active, :root[data-theme="dark"] #productionPipeLineNewModal .nav-tabs .nav-link.active, :root[data-theme="dark"] #catalogItemModal .nav-tabs .nav-link.active { background: var(--app-surface-active); color: var(--app-text); border-color: var(--app-border); } :root[data-theme="dark"] #taskModal .tab-content, :root[data-theme="dark"] #productionPipeLineNewModal .tab-content, :root[data-theme="dark"] #catalogItemModal .tab-content { background: var(--app-surface) !important; border-color: var(--app-border) !important; } /* Wyróżnione panele wewnątrz modali */ :root[data-theme="dark"] #taskModal .task-product-context-panel, :root[data-theme="dark"] #taskModal #task-attachments { background: rgba(122, 167, 255, 0.12) !important; border-color: var(--app-border) !important; } :root[data-theme="dark"] #taskModal .task-product-context-panel .form-label, :root[data-theme="dark"] #taskModal #task-attachments .text-muted { color: var(--app-text-muted) !important; } :root[data-theme="dark"] #taskModal .task-product-context-panel .context-value { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text); } /* Outline-secondary w modalach (czytelność w dark) */ :root[data-theme="dark"] #taskModal .btn-outline-secondary, :root[data-theme="dark"] #productionPipeLineNewModal .btn-outline-secondary, :root[data-theme="dark"] #catalogItemModal .btn-outline-secondary, :root[data-theme="dark"] #authorItemModal .btn-outline-secondary { color: var(--app-text); border-color: var(--app-border); } :root[data-theme="dark"] #taskModal .btn-outline-secondary:hover, :root[data-theme="dark"] #productionPipeLineNewModal .btn-outline-secondary:hover, :root[data-theme="dark"] #catalogItemModal .btn-outline-secondary:hover, :root[data-theme="dark"] #authorItemModal .btn-outline-secondary:hover { background: var(--app-surface-hover); color: var(--app-text); border-color: var(--app-border); } /* Granatowe nagłówki tabel w fProductionPipeLineMD / fCatalogListMD */ :root[data-theme="dark"] #tableProductionPipeLineMD th, :root[data-theme="dark"] #tableCatalogListMD th { border-bottom-width: 1px !important; } /* Granatowe „bg-primary/bg-secondary” w nagłówkach sekcji MD — w dark stają się akcentami opartymi o token --app-link (jasny niebieski), żeby zachować kontrast tekstu. */ :root[data-theme="dark"] .ppl-md-section-header .badge.bg-primary, :root[data-theme="dark"] .ppl-md-section-header .badge.bg-secondary, :root[data-theme="dark"] .catalog-md-section-header .badge.bg-primary, :root[data-theme="dark"] .catalog-md-section-header .badge.bg-secondary { background-color: var(--app-link) !important; color: #0b1220 !important; } /* ===================================================================== Motyw nocny — Harmonogram premier (fPremieresSchedule.html). Pełnoprawna strona w iframe z własnym