:root { --form-default-size: 20px; --filter-box-height: 300px; --font-xs: 80%; --font-sm: 90%; --font-normal: inter-regular, 'Segoe UI', ubuntu-regular, sans-serif; --sidebar-width: 24rem; --sidebar-mini-width: 6.4rem; --sidebar-flyout-width: 22rem; --sidebar-bg-soft: rgba(255, 255, 255, 0.05); --sidebar-bg-soft-strong: rgba(255, 255, 255, 0.09); --sidebar-font-size: 1em; --sidebar-suboption-font-size: 0.95em; --sidebar-icon-size: 1.15em; --sidebar-icon-width: 1.5em; --sidebar-row-radius: 0.5em; --sidebar-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1); --topbar-height: 50px; --scrollbar-width: 8px; /* ===== KOLORY — tokeny semantyczne (Faza 0 dark-mode refactor) ===== Wartości = obecny light. Każda reguła ma docelowo czytać TYLKO var(--color-*). Dark mode = przepisanie tych tokenów w html[data-theme="dark"] (patrz niżej). Mapa/uzasadnienie: claude-docs/css-refactor-plan.md */ /* Powierzchnie / tło */ --color-bg-app: #e0e0e0; --color-bg-app-darker: #bfbfbf; --color-surface: #ffffff; --color-surface-muted: #f6f7f8; --color-surface-alt: #f1f1f1; --color-surface-highlight: #e6e6ff; /* Tekst */ --color-text-primary: #000000; --color-text-secondary: #4b4c51; --color-text-muted: #888888; --color-text-inverse: #ffffff; /* Obramowania */ --color-border: #dddddd; --color-border-strong: #aaaaaa; --color-border-input: #e1e2e5; /* Akcent (marka) */ --color-accent: #6162F1; --color-accent-hover: #3B3DAB; --color-accent-strong: #8889FD; --color-accent-deep: #494BCF; --color-accent-soft-bg: #eff0ff; --color-accent-soft: rgba(97, 98, 241, 0.18); /* Nakładki / cienie */ --color-overlay-dark: rgba(0, 0, 0, 0.05); --color-row-hover: rgba(0, 0, 0, 0.04); --color-shadow: rgba(0, 0, 0, 0.3); /* Sidebar / topbar chrome */ --color-sidebar-bg: #0C0A1B; --color-sidebar-bg-elevated: #14122a; --color-sidebar-text: #d9dbe5; --color-sidebar-text-muted: #8a8f9e; /* Status: sukces */ --color-success: #258F00; --color-success-bg: #258F00; --color-success-hover: #1B6700; --color-success-soft-bg: #e4fcdf; --color-success-text: #047B52; /* Status: błąd */ --color-danger: #ED0B0B; --color-danger-hover: #7D0404; --color-danger-alt: #dc3545; --color-danger-soft-bg: #feeeee; --color-danger-text: #B91E15; /* Status: ostrzeżenie */ --color-warning: #FAA619; --color-warning-hover: #C88514; --color-warning-soft-bg: #faf1e0; --color-warning-text: #B54708; /* Status: info */ --color-info: #2870EC; --color-info-bg: #2870EC; --color-info-hover: #0045BC; --color-info-soft-bg: #e8f5ff; --color-info-text: #175CD3; /* Status: fiolet / teal */ --color-purple: #4A148C; --color-purple-soft-bg: #f9edfb; --color-teal: #046B6B; --color-teal-soft-bg: #dcf2f2; /* Soft-bg hover (przyciemnienie tła statusu na hover) */ --color-success-soft-bg-hover: #a5e2a9; --color-danger-soft-bg-hover: #f5b8b8; --color-warning-soft-bg-hover: #f9d9bf; --color-info-soft-bg-hover: #b0c2ef; --color-purple-soft-bg-hover: #e0ccf9; --color-teal-soft-bg-hover: #addfdf; /* Ciemne powierzchnie chrome (btn-menu, panel-heading, dark bary) */ --color-chrome: #222834; --color-chrome-deep: #1a2233; --color-scrollbar-thumb: #aaaaaa; --color-on-accent: #ffffff; --color-chrome-edge: rgba(255, 255, 255, 0.12); --color-accent-bg: #6162F1; --color-saved-filters-bg: rgba(255, 255, 255, 0.5); /* Cienie (wiązki box-shadow) */ --shadow-1: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; --shadow-2: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; --shadow-card: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; --shadow-thead: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; } /* ===== DARK MODE (html[data-theme="dark"]) ===== Aktywne przez atrybut data-theme="dark" na (przelacznik w topbarze, persist localStorage 'uniterTheme'). Brak atrybutu = light (:root powyzej). Paleta: Breeze (KDE Plasma) Dark; statusy wyostrzone. */ html[data-theme="dark"] { /* Powierzchnie (Breeze: view #1b1e20, window #2a2e32, button #31363b) */ color-scheme: dark; --color-bg-app: #1b1e20; --color-bg-app-darker: #16181a; --color-surface: #2a2e32; --color-surface-muted: #31363b; --color-surface-alt: #232629; --color-surface-highlight: #2d4257; /* Tekst (Breeze: #fcfcfc / inactive #bdc3c7) */ --color-text-primary: #fcfcfc; --color-text-secondary: #bdc3c7; --color-text-muted: #a0a6af; --color-text-inverse: #fcfcfc; /* Bordery / separatory */ --color-border: #121417; --color-border-strong: #1c1f23; --color-border-input: #16181c; /* Akcent (Breeze highlight #3daee9 / link #1d99f3) */ --color-accent: #3daee9; --color-accent-hover: #5cbef0; --color-accent-strong: #3daee9; --color-accent-deep: #93cef0; --color-accent-soft-bg: #1f3a4d; --color-accent-soft: rgba(61, 174, 233, 0.20); --color-overlay-dark: rgba(255, 255, 255, 0.07); --color-row-hover: rgba(255, 255, 255, 0.10); --color-shadow: rgba(0, 0, 0, 0.6); /* Sidebar (Breeze darks) */ --color-sidebar-bg: #121417; --color-sidebar-bg-elevated: #1c1f23; --color-sidebar-text: #eff0f1; --color-sidebar-text-muted: #8a9099; /* Statusy WYOSTRZONE (Breeze: green #27ae60, red #da4453, yellow #fdbc4b, blue #3daee9, purple #9b59b6, teal #1abc9c) */ --color-success: #2ecc71; --color-success-hover: #27ae60; --color-success-soft-bg: #16361f; --color-success-text: #5fdc8a; --color-success-bg: #1a5c34; --color-danger: #ed4a57; --color-danger-hover: #c0392b; --color-danger-alt: #ff5c69; --color-danger-soft-bg: #3a1a1e; --color-danger-text: #ff8a93; --color-warning: #fdbc4b; --color-warning-hover: #f67400; --color-warning-soft-bg: #3a2e10; --color-warning-text: #fdbc4b; --color-info: #3daee9; --color-info-hover: #1d99f3; --color-info-soft-bg: #15293a; --color-info-text: #5fbdf0; --color-info-bg: #155a8a; --color-purple: #b86fd6; --color-purple-soft-bg: #2a1638; --color-teal: #1abc9c; --color-teal-soft-bg: #0e2e2e; --color-success-soft-bg-hover: #1d4a28; --color-danger-soft-bg-hover: #4d2226; --color-warning-soft-bg-hover: #4d3d14; --color-info-soft-bg-hover: #1d3a52; --color-purple-soft-bg-hover: #3a2050; --color-teal-soft-bg-hover: #154040; --color-chrome: #2a2e32; --color-chrome-deep: #1b1e20; --color-scrollbar-thumb: #4a4f55; --color-on-accent: #ffffff; --color-accent-bg: #0f4866; --color-saved-filters-bg: #121417; --shadow-1: rgba(0, 0, 0, 0.5) 0px 1px 2px 0px, rgba(0, 0, 0, 0.4) 0px 1px 3px 1px; --shadow-2: rgba(0, 0, 0, 0.5) 0px 3px 6px, rgba(0, 0, 0, 0.6) 0px 3px 6px; --shadow-card: rgba(0, 0, 0, 0.6) 0px 2px 5px -1px, rgba(0, 0, 0, 0.5) 0px 1px 3px -1px; --shadow-thead: rgba(0, 0, 0, 0.4) 0px 1px 3px, rgba(0, 0, 0, 0.55) 0px 1px 2px; } /***************************************************/ /* SCROLLBAR****************************************/ /***************************************************/ ::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); background-clip: content-box; border: 2px solid transparent; } ::-webkit-scrollbar-corner { background: transparent; } html { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-thumb) transparent; } /***************************************************/ /* FONTS *******************************************/ /***************************************************/ @font-face { font-family: ubuntu-regular; src: url(../fonts/ubuntu/ubuntu-regular.ttf); } @font-face { font-family: ubuntu-condensed; src: url(../fonts/ubuntu/ubuntu-condensed.ttf); } @font-face { font-family: open-sans-regular; src: url(../fonts/open-sans/open-sans-regular.ttf); } @font-face { font-family: inter-regular; src: url(../fonts/inter/inter-regular.ttf); } @font-face { font-family: quicksand-regular; src: url(../fonts/quicksand/quicksand-regular.ttf); } @font-face { font-family: quicksand-medium; src: url(../fonts/quicksand/quicksand-medium.ttf); } @font-face { font-family: quicksand-semibold; src: url(../fonts/quicksand/quicksand-semibold.ttf); } /***************************************************/ /* HTML ********************************************/ /***************************************************/ body { font-family: var(--font-normal); background-color: var(--color-bg-app); color: var(--color-text-primary); display: flex; flex-direction: column; height: 100vh; } h1, h2, h3, h4, h5 { font-weight: 600; display: block; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } h1 { font-size: 130%; } h2 { font-size: 120%; } h3 { font-size: 110%; } hr { margin: 4px 0px; border-color: var(--color-border); } select[multiple] { font-family: var(--font-normal) !important; min-height: 130px; min-width: 100px; display: block; } select { font-size: inherit; font-family: var(--font-normal) !important; vertical-align: top; } option { font-size: inherit; font-family: var(--font-normal) !important; } .bg-success { background-color: var(--color-success-soft-bg) !important; } .textarea { white-space: pre-line; max-height: 150px; overflow: auto; word-break: break-word; overflow-wrap: break-word; min-width: 120px; } textarea.form-control { min-height: 100px; } /***************************************************/ /* TABLES ******************************************/ /***************************************************/ table { width: 100%; cursor: default; background: var(--color-surface); margin-bottom: 0px; } thead { position: sticky; top: 0; z-index: 3; background: var(--color-surface); box-shadow: var(--shadow-thead); } th { padding: 2px; vertical-align: middle; /* outline (not border) so the rule renders correctly under position: sticky thead and ignores border-collapse semantics */ outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; } .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { vertical-align: top; padding: 1px; text-align: center; } tr.dragover { background-color: var(--color-surface-highlight); } .table-responsive { border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } table-content { display: block; } .table-centered-form-values td { text-align: center; } .table-centered-form-values td .form-box { text-align: center; } .table-centered-form-values td .form-value { justify-content: center; text-align: center; } th > .flex-item { display: block; } th > sort, th > triple-price-sort { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; } th > label, th > triple-price-sort label { display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; padding: 2px 4px; background-color: transparent; color: inherit; border-radius: 4px; cursor: pointer; min-height: 28px; transition: background-color 0.2s ease; } th > label:hover, th > triple-price-sort label:hover { background-color: rgba(0, 0, 0, 0.05); } /* When a holds more than one , separate the rows with a thin divider so adjacent triggers don't visually merge in the now-transparent default state. */ th > .sort-dropdown + .sort-dropdown { border-top: 1px solid rgba(0, 0, 0, 0.08); margin-top: 2px; padding-top: 2px; } .sort-dropdown { width: 100%; } .sort-trigger { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 2px 4px; margin: 2px 0px; background-color: transparent; border-radius: 4px; color: inherit; text-decoration: none; text-align: left; cursor: pointer; user-select: none; transition: background-color 0.2s ease; } /* Sort triggers inside a stay centered (the canonical table-header look). */ th .sort-trigger { text-align: center; } .sort-trigger:hover, .sort-trigger:focus { background-color: rgba(0, 0, 0, 0.05); color: inherit; text-decoration: none; outline: none; } .sort-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; max-height: calc(1.2em * 3); font-size: var(--font-sm); font-weight: 600; letter-spacing: 0.02em; } .sort-trigger.is-required .sort-text::after { content: " *"; color: var(--color-danger-alt); } .sort-indicators { display: flex; justify-content: flex-start; gap: 4px; margin-top: 1px; font-size: var(--font-xs); opacity: 0.7; } th .sort-indicators { justify-content: center; } tbody > tr:hover > td { box-shadow: inset 0 0 0 9999px var(--color-row-hover); transition: box-shadow 0.15s ease; } .no-row-hover tbody > tr:hover > td { box-shadow: none; transition: none; } /* Pin last column to right edge so action buttons stay visible on horizontal scroll. Applied by default to all main list tables ([colspan-table]) and Bootstrap tables (.table). Opt-out per table by adding class .no-sticky-last-col. Skip rows with colspan (continuation/expanded rows) — their single td spans full width. */ [colspan-table]:not(.no-sticky-last-col) thead > tr > th:last-child, [colspan-table]:not(.no-sticky-last-col) tbody > tr:not(:has(td[colspan])) > td:last-child, .table:not(.no-sticky-last-col) thead > tr > th:last-child, .table:not(.no-sticky-last-col) tbody > tr:not(:has(td[colspan])) > td:last-child, .sticky-last-col thead > tr > th:last-child, .sticky-last-col tbody > tr:not(:has(td[colspan])) > td:last-child { position: sticky; right: 0; background-color: var(--color-surface); box-shadow: -4px 0 8px -2px var(--color-shadow); z-index: 2; } [colspan-table]:not(.no-sticky-last-col) thead > tr > th:last-child, .table:not(.no-sticky-last-col) thead > tr > th:last-child, .sticky-last-col thead > tr > th:last-child { z-index: 4; } /* When a dropdown is open inside the sticky last column, raise the cell's z-index above other sticky cells (same z-index in later rows would otherwise overlay it) and above the sticky thead. The dropdown-menu inside (z-index: 1100) then floats freely. */ [colspan-table]:not(.no-sticky-last-col) tbody > tr > td:last-child:has(.unt-dropdown.open), .table:not(.no-sticky-last-col) tbody > tr > td:last-child:has(.unt-dropdown.open), .sticky-last-col tbody > tr > td:last-child:has(.unt-dropdown.open) { z-index: 1101; } /* Rows whose select-one-checkbox is checked get the same subtle tint as the hover state, so users can see what is currently selected. Scoped to so the rule doesn't bleed into block-content layouts. */ table-content tbody > tr:has(select-one-checkbox input:checked) > td { box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.04); transition: box-shadow 0.15s ease; } td { border-top: 3px solid var(--color-border); padding: 2px 1px; } [colspan-table] tbody tr.freight-continuation > td { border-top: none; } /* Stacked field-like elements in a need a small gap or they visually merge. */ td > field, td > collection-field, td > status-updater, td > triple-price-field, td > double-price-field, td > save-address-button { display: block; margin: 2px 0; } .details-body table thead, .item-block table thead { position: unset; top: unset; z-index: unset; box-shadow: unset; } .light-green-background-color { background-color: var(--color-success-soft-bg); } .colspan-table-repeat-end-td { padding: 2px 8px 12px 8px; } .table-tr-collapse { padding: 8px 16px; background-color: var(--color-surface-alt); margin-bottom: 8px; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; } /***************************************************/ /* CUSTOM ** ***************************************/ /***************************************************/ .font-smaller { font-size: 90%; } /* "Dokąd jedzie" column — compact, centered, even spacing. The default .form-value is flex/space-between/text-left/min-width:40px, which broke the centering, so it is overridden here. */ .last-route-point { font-size: var(--font-xs); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; } .last-route-point .form-box { min-height: 0; } .last-route-point .form-value { justify-content: center !important; text-align: center !important; min-width: 0 !important; padding: 0 !important; } .last-route-point .route-point-line { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; } .last-route-point .route-point-line > div, .last-route-point .route-point-line .form-value { width: auto !important; } .last-route-point .enum-image { width: 16px; height: 11px; margin-right: 4px; } .font-bigger { font-size: 110%; } /* route-points table header: xs size, primary text colour (same as sort), centred values */ .route-points-header th { font-size: var(--font-xs); color: var(--color-text-primary); text-align: center; } /***************************************************/ /* BOOTSTRAP ***************************************/ /***************************************************/ .badge { font-size: var(--font-xs); font-weight: unset; padding: 0px 4px; margin: 0px 2px 0px 4px; line-height: unset; background-color: var(--color-danger-alt); color: var(--color-text-inverse); } .close { opacity: 0.5; } .row { margin: 0px 0px; padding: 0px 0px; } .nav-tabs { padding:1px 0px 0px 1px; cursor: pointer; width: 100%; border-bottom: 1px solid var(--color-border); } /* Bootstrap pulls each tab down 1px (margin-bottom: -1px) so it overlaps the bottom border line — drop it so tabs sit on the line instead of over it. */ .nav-tabs>li { margin-bottom: 0; } .nav-tabs>li>a { background-color: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-surface-highlight); border-bottom: 3px solid var(--color-surface); margin-bottom: 1px; min-width: 120px; text-align: center; padding: 4px 8px; margin: 4px 1px 0px 1px; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { cursor: default; border: 1px solid var(--color-accent); border-bottom: 3px solid var(--color-accent); background-color: var(--color-surface-highlight); color: var(--color-text-primary); font-weight: 600; } .nav-tabs>li:not(.active)>a:hover { border: 1px solid #6263D5; border-bottom: 3px solid #6263D5; background-color: var(--highlight-background-color); } [class^="col-lg-"], [class^="col-md-"], [class^="col-sm-"], [class^="col-xs-"], [class*=" col-lg-"], [class*=" col-md-"], [class*=" col-sm-"], [class*=" col-xs-"] { padding: 0 2px; } .btn { margin: 1px 1px; padding: 4px 8px; font-size: inherit; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .btn-text-left { text-align: left; } input[type="checkbox"], input[type="radio"] { margin: 4px 4px; } .badge-primary { background-color: var(--color-accent-bg); color: var(--color-text-inverse); } .list-group { margin-bottom: 0px; } .list-group.rolled-up { max-height: 250px; overflow-y: scroll; } .list-group-item { margin: 2px 0px 2px 0px; padding: 0px 2px; } .d-none { display: none !important; } .d-block { display: block !important; } @media ( min-width : 992px) { .d-lg-block { display: block !important; } } /***************************************************/ /* GRID*********************************************/ /***************************************************/ .wrapper { display: grid; /* Single column capped at the viewport (min 0) so wide content — e.g. the favourites bar scrolling on its own row — can't blow the grid column out past the screen and push the topbar's right-hand icons off. */ grid-template-columns: minmax(0, 1fr); } .topbar { height: 50px; background-color: var(--color-sidebar-bg); border-bottom: 1px solid var(--color-chrome-edge); } /* public pages: pin the paginator to the bottom of the screen while the list scrolls */ .public-paginator { position: sticky; bottom: 0; z-index: 100; background: var(--color-surface); } /* public pages: pin the topbar to the top of the screen, vertically center its elements */ .public-topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; flex: 0 0 auto; } /* Public contract-vehicle list: full-height frame — topbar pinned top, only the list scrolls, paginator pinned to the bottom of the screen. Scoped via :has() so other public pages keep their normal flow. */ .public-frame:has(public-transport-contract-vehicle-by-transport-contract-list), .public-wrapper:has(public-transport-contract-vehicle-by-transport-contract-list), [ng-view]:has(public-transport-contract-vehicle-by-transport-contract-list), public-transport-contract-details, .public-contract-page, public-transport-contract-vehicle-by-transport-contract-list, public-transport-contract-vehicle-by-transport-contract-list paginated-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } public-transport-contract-vehicle-by-transport-contract-list ng-transclude { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .public-list-title { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; } /* paginator: vertically center all its elements */ .app-content-footer > .row { display: flex; align-items: center; } .app-topbar { height: 100%; width: 100%; align-items: center; display: flex; flex-wrap: nowrap; padding: 0px 8px 0px 8px; } .app-topbar > .inline { flex-wrap: nowrap; flex-shrink: 0; } .app-topbar > .inline:last-child { margin-left: auto; } .app-topbar .btn, .app-topbar .alerts-wrapper > .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; height: 36px; min-width: 36px; padding: 0 8px; font-size: 1em; line-height: 1; } .app-topbar .btn.btn-sidebar-toggle { height: var(--topbar-height); } .app-topbar .btn > i { font-size: 1.15em; line-height: 1; } .app-topbar .btn > .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; margin: 0 0 0 6px; border-radius: 9px; font-size: 11px; line-height: 1; } #sidebar { overflow: hidden; width: var(--sidebar-width); transition: width var(--sidebar-transition); } #content { display: flex; height: calc(100vh - var(--topbar-height)); } .app-content { padding: 0px; width: calc(100vw - var(--sidebar-width)); overflow: auto; display: flex; flex-direction: column; height: 100%; transition: width var(--sidebar-transition); } .app-content-header { min-height: 40px; display: flex; flex-wrap: nowrap; align-items: center; padding: 0px 8px 0px 8px; gap: 6px; } .app-content-header > .inline:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; } .app-content-header > .inline:first-child h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-content-header-buttons { flex: 1 1 auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; } .app-content-header-buttons > *, .app-content-header-buttons .btn { flex-shrink: 0; white-space: nowrap; } .app-content-data { height: calc(100vh - 50px - 20px - 60px); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; } .app-content-footer { display: grid; align-items: center; overflow: hidden; border-top: 1px solid var(--color-border); padding-top: 4px; } #topbarContent { padding: 0px 0px 12px 0px; } .details-body { display: grid; grid-template-rows: auto 1fr; height: calc(100vh - 50px); } .details-topbar { width: 100%; overflow: hidden; background-color: var(--color-bg-app); box-shadow: var(--shadow-card); position: relative; z-index: 154; } .details-content { overflow-y: auto; overflow-x: hidden; width: 100%; padding-bottom: 50px; background-color: var(--color-bg-app); } .vehicle-actions-icons { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; } .lazy-map-prompt { padding: 24px; text-align: center; } /* Leaflet popup used as "insert waypoint" context menu on OSM map — leave room for the close button (X) and keep the action button on a single line. */ .waypoint-insert-popup .leaflet-popup-content { margin: 8px 24px 8px 8px; } .waypoint-insert-popup .leaflet-popup-content > a.btn { white-space: nowrap; } .waypoint-insert-position-modal .content-box { margin: 0; } .waypoint-insert-position-modal .waypoint-insert-list { list-style: none; padding: 0; margin: 0; } .waypoint-insert-position-modal .waypoint-insert-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px; } .waypoint-insert-position-modal .waypoint-insert-icon { width: 16px; text-align: center; } .waypoint-insert-position-modal .waypoint-insert-row.stop .waypoint-insert-icon { color: var(--color-danger-alt); } .waypoint-insert-position-modal .waypoint-insert-row.waypoint .waypoint-insert-icon { color: var(--color-success); } .waypoint-insert-position-modal .waypoint-insert-details { flex: 1; min-width: 0; } .waypoint-insert-position-modal .waypoint-insert-meta { font-size: 12px; color: var(--color-text-muted); } .waypoint-insert-position-modal .waypoint-insert-meta > span:not(:last-child)::after { content: " · "; } .waypoint-insert-position-modal .waypoint-insert-gap { text-align: center; padding: 4px 0; } .vehicle-marker-popup, .stop-marker-popup, .waypoint-marker-popup { font-size: 11px; line-height: 1.4; white-space: nowrap; } .vehicle-marker-popup > div, .stop-marker-popup > div, .waypoint-marker-popup > div { margin-bottom: 2px; } .popup-actions { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px; } /* coords-actions is a wrapper component; let its buttons flow as flex items of .popup-actions */ .popup-actions coords-actions { display: contents; } .popup-actions .btn { flex: none; } .map-context-menu { display: flex; flex-direction: column; gap: 4px; } .waypoint-latlng-row { display: flex; gap: 4px; } .waypoint-mini-map-box { margin-bottom: 8px; } .waypoint-mini-map { display: block; z-index: 1; } /* Leaflet popup: 4px corners, allow auto-width for our popups, leave room for X. Tło/tekst/ogonek czytają tokeny — biały w light, ciemna powierzchnia w dark mode. */ .leaflet-popup-content-wrapper { border-radius: 4px; background-color: var(--color-surface); color: var(--color-text-primary); } .leaflet-popup-tip { background-color: var(--color-surface); } .leaflet-popup-close-button { color: var(--color-text-secondary); } .leaflet-popup-content:has(.vehicle-marker-popup), .leaflet-popup-content:has(.stop-marker-popup), .leaflet-popup-content:has(.waypoint-marker-popup) { max-width: none !important; width: auto !important; margin: 6px 22px 6px 8px; } /* Google Maps InfoWindow: 4px corners + compact close button (insert-waypoint context menu). Tło/tekst/ogonek/krzyżyk czytają tokeny — w light mode = obecny biały dymek, w dark mode (html[data-theme="dark"]) automatycznie ciemna powierzchnia. */ .gm-style .gm-style-iw-c { border-radius: 4px !important; padding: 4px 8px !important; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; } .gm-style .gm-style-iw-c .gm-ui-hover-effect { width: 18px !important; height: 18px !important; top: 2px !important; right: 2px !important; } .gm-style .gm-style-iw-c .gm-ui-hover-effect > span { width: 14px !important; height: 14px !important; margin: 2px !important; background-color: var(--color-text-secondary) !important; } .gm-style .gm-style-iw-d { overflow: hidden !important; padding-right: 18px; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; } /* Ogonek dymka (trójkąt pod bąblem) — musi mieć ten sam kolor co powierzchnia. */ .gm-style .gm-style-iw-tc::after { background: var(--color-surface) !important; } /* Sticky stack inside freight-order-details: 1. .sticky-freight-tabs — freight nav-tabs at the top of the scroll area 2. .sticky-freight-overview — transport "Ogólne" collapsible 3. .freight-stops-host header — only the stops collapsible HEADER (title + buttons) All have an opaque background and the overview has an upward box-shadow that covers any sub-pixel gap above so scrolling content doesn't peek. */ .details-content .sticky-freight-tabs { margin: 0; } .details-content .sticky-freight-overview { background-color: var(--color-bg-app); margin: 0; } .details-content .freight-tabs-bar { position: sticky; top: 0; z-index: 153; display: flex; align-items: flex-end; gap: 12px; padding: 6px 12px 0 12px; background-color: var(--color-surface); box-shadow: var(--shadow-thead); } .details-content .freight-tabs-bar .nav-tabs { flex: 1 1 auto; margin-bottom: 0; } .details-content .freight-tabs-bar .freight-active-summary { flex: 0 1 auto; align-self: center; font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 6px; } .details-content .freight-section-title { margin: 0; padding: 6px 8px; font-weight: 600; font-size: 14px; line-height: 1.4; overflow: visible; white-space: nowrap; flex: 0 0 auto; } /* Nagłówek "Podsumowanie" w sekcji rozliczenia transportu: mniejszy niż domyślny h4 i odsunięty od listy dodatkowych pozycji nad nim. */ freight-details-settlement h4 { font-size: 14px; margin-top: 16px; margin-bottom: 4px; } currency-sums { display: block; margin-top: 8px; } /* Sekcja rozliczenia: stały układ 2 kolumn (na lg+; poniżej jedna kolumna jak dla col-lg). Kolumna z polami staje się siatką flex-wrap, a każdy wiersz (field-horizontal) zajmuje 50% — pola są uporządkowane tak, że stawka trafia do lewej kolumny, a jej wyliczona kwota do prawej (obok siebie), bez trzeciej kolumny. */ @media (min-width: 992px) { freight-details-settlement [class*="col-lg"]:has(> .field-horizontal) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 8px; } freight-details-settlement [class*="col-lg"] > .field-horizontal { flex: 0 0 calc(50% - 4px); max-width: calc(50% - 4px); } } .details-content .sticky-freight-tabs > li > a { white-space: nowrap; } /* `top` values for the sticky stack are calibrated against the default user font-size (~14px). With body { font-size } set from the user's profile (see run.js — `angular.element("body").css('font-size', data.fontSize)`), the actual heights of nav-tabs and the "Ogólne" collapsible scale with font-size, so larger user fonts can shift the boundary by a few pixels. The short upward box-shadow (8px) fills any sub-pixel gap between the sticky tabs (ends near y=38) and this sticky element (starts at y=38) without reaching the "Transporty" h3 above the tabs (tabs are ~35-44px tall depending on font, plus the h3 has its own margin and z-index). */ .details-content .sticky-freight-overview { position: sticky; top: 44px; z-index: 152; box-shadow: 0 -10px 0 0 var(--color-bg-app); } /* When the transport-options dropdown is open, lift the overview's stacking context above the sticky freight-tabs bar (z-index 153) — otherwise the dropdown menu (trapped in this sticky element's stacking context) is painted underneath the tabs bar. */ .details-content .sticky-freight-overview:has(.open) { z-index: 154; } .details-content .sticky-freight-overview .content-box-section { margin: 0; } /* Chip shown next to the Ogólne title — freight number */ #bottombar { position: fixed; max-width: calc(100vw - 250px); bottom: 0px; right: 10px; z-index: 1003; padding: 10px; } #list-tab-section { height: calc(100vh - 50px); overflow-y: auto; overflow-x: hidden; z-index: 10; box-shadow: -10px 0 24px -6px var(--color-shadow); border-left: 1px solid var(--color-border-strong); background-color: var(--color-bg-app); } .list-tab-section-body { padding: 0; } /* In the side panel, let details-body flow naturally and let #list-tab-section handle the scroll. The full-page details view keeps its fixed grid layout. */ #list-tab-section .details-body { display: block; height: auto; } #list-tab-section .details-content { overflow: visible; height: auto; padding-bottom: 0; } /* The topbar sticks to the top of the side panel while the body scrolls. */ #list-tab-section .details-topbar { overflow: visible; height: auto; position: sticky; top: 0; z-index: 5; background-color: var(--color-bg-app); } .mobile-show { display: none; } #list-tab-section [class^="col-lg-offset-"], #list-tab-section [class*=" col-lg-offset-"] { margin: unset; } #list-tab-section .mobile-hide { display: none; } /* Side panel (preview) header: show the list title inline next to the select-all checkbox so the header reads "checkbox – title – buttons" on one line, for every side list (generalized from the former entity-category-list-only rule). */ #list-tab-section .app-content-header h1.mobile-hide { display: inline-block; font-size: 16px; font-weight: 600; margin: 0 0 0 6px; } /* Side panel (preview): tighter horizontal spacing between icons/buttons. */ #list-tab-section .app-content-header, #list-tab-section .app-content-header-buttons, #list-tab-section .filter-header { gap: 3px; } #list-tab-section .app-content-header { padding-left: 4px; padding-right: 4px; } #list-tab-section .app-content-header-buttons .btn, #list-tab-section .filter-header .btn { padding-left: 6px; padding-right: 6px; } /* Side panel (preview): header / filter / sort buttons collapse to icon-only; labels remain available as hover tooltips (title). Dropdown menu item labels are preserved. */ #list-tab-section .app-content-header-buttons .btn span, #list-tab-section .filter-header .btn span { display: none; } #list-tab-section .dropdown-menu .btn span { display: inline; } /* When the side panel is open, the narrowed main-list column collapses its header button labels to icons too. Matched via the col-sm-6 main column that has a following list-tab-section sibling holding #list-tab-section (present only while a tab is active); dropdown menu item labels are preserved. */ [class*="col-sm-6"]:has(~ list-tab-section #list-tab-section) .app-content-header-buttons .btn span { display: none; } [class*="col-sm-6"]:has(~ list-tab-section #list-tab-section) .dropdown-menu .btn span { display: inline; } #list-tab-section .details-content { height: calc(100vh - 150px); } #list-tab-section .content-box-header { display: flex; } #list-tab-section .content-box { margin-top: 10px; } /* Side-panel layout. Every field is
…
. Each .row and each multi-field container is a flex-wrap row. Single-field wrappers take 50% (two per visual row); everything else takes 100%. */ #list-tab-section [class^="col-lg-"], #list-tab-section [class*=" col-lg-"] { width: 100%; margin: 0; padding: 0; float: none; } /* Exclude .content-box-header and .sticky-box rows — those use bootstrap col widths for header layouts (list-statistics, collapsible header, etc.). */ #list-tab-section .row:not(.content-box-header):not(.sticky-box):not(.app-content-header):not(.paginator-row), #list-tab-section :is(.content-box, [class^="col-lg-"], [class*=" col-lg-"]):has(> .field-horizontal + .field-horizontal) { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; column-gap: 4px; row-gap: 0; } #list-tab-section .row:not(.content-box-header):not(.sticky-box):not(.app-content-header):not(.paginator-row) > *, #list-tab-section :is(.content-box, [class^="col-lg-"], [class*=" col-lg-"]):has(> .field-horizontal + .field-horizontal) > * { flex: 0 0 100%; max-width: 100%; width: 100%; } #list-tab-section .row:not(.content-box-header):not(.sticky-box):not(.app-content-header):not(.paginator-row) > :is([class^="col-lg-"], [class*=" col-lg-"]):has(> .field-horizontal:only-child), #list-tab-section :is(.content-box, [class^="col-lg-"], [class*=" col-lg-"]):has(> .field-horizontal + .field-horizontal) > .field-horizontal { flex: 0 0 calc(50% - 2px); max-width: calc(50% - 2px); width: calc(50% - 2px); } /***************************************************/ /* MATERIAL ****************************************/ /***************************************************/ button, select, html, textarea, input { font-family: var(--font-normal); } body.md-default-theme, body, html.md-default-theme, html { color: var(--color-text-primary); } md-backdrop.md-dialog-backdrop { z-index: 992; } md-switch { margin: 0px; } /***************************************************/ /* FIELD**** ***************************************/ /***************************************************/ .field-horizontal { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; border-radius: 4px; transition: background-color 0.3s ease; } .field-horizontal:hover { background-color: rgba(0, 0, 0, 0.05); } label, .label { display: flex; flex: 1; font-size: var(--font-sm); font-weight: 600; cursor: default; color: var(--color-text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .field-extension { word-break: break-all; color: var(--color-text-muted); font-size: var(--font-sm); padding: 1px; border-radius: 4px; } .dropdown a { color: var(--color-text-secondary); } .form-box, unt-autocomplete, bool-select, unt-datetime-picker { min-height: var(--form-default-size); align-items: center; width: 100%; } .form-value { display: flex; justify-content: space-between; align-items: center; text-align: left; width: 100%; overflow-x: auto; min-width: 40px; padding: 0px 2px 0px 2px; word-break: normal; } .form-value >span { max-width: 100%; } .field-value-extension { display: flex; } .type-Country { white-space: nowrap; min-width: 56px; } .type-Country .form-value { justify-content: flex-start; } .form-value.textarea>span { white-space: break-spaces; min-width: 120px; } .form-value.textarea { align-items: flex-start; } .field-enabled { cursor: pointer; border-radius: 4px; border: 1px solid transparent; border-bottom: 1px solid var(--color-bg-app); background: var(--color-surface-muted); min-height: var(--form-default-size); } .field-disabled { cursor: default; border: 1px solid transparent; } .field-enabled:hover { cursor: default; border: 1px solid var(--color-accent-strong); background-color: var(--color-surface); box-shadow: var(--shadow-1); } .field-disabled:hover { cursor: pointer; } .field-disabled-with-dropdown { background-color: var(--color-surface-muted); min-height: var(--form-default-size); border-radius: 4px; color: var(--color-accent-deep); font-weight: 600; } .open>.field-enabled { opacity: 0.5; } .field-disabled-with-dropdown:hover { text-decoration: underline; } .input-group>textarea { white-space: pre-wrap; resize: vertical; height: 100px; min-width: 250px; } .input-group>input, select { min-width: 110px; } .field-required, .table>thead>tr>th .field-required { color: var(--color-danger-alt); font-weight: 700; } .field-no-vertical-space { flex: 2; text-align: left; padding: 0px 4px; } .field-no-vertical-space .form-box { display: flex; flex-direction: column; white-space: nowrap; margin: 0px; min-height: unset; } .form-value.field-enabled.field-mark-null { cursor: pointer; border: 1px solid transparent; border-bottom: 1px solid var(--color-danger-soft-bg); transition: border-color 0.3s ease, background-color 0.3s ease; background-color: var(--color-surface-muted); } .form-value.field-enabled.field-mark-null:hover { cursor: pointer; box-shadow: unset; background-color: var(--color-surface-muted); border: 1px solid var(--color-warning-hover); box-shadow: var(--shadow-1); } .text-red .form-value { color: red; } .form-control { border: 1px solid transparent; border-bottom: 1px solid var(--color-bg-app); font-size: inherit; height: unset; min-height: var(--form-default-size); box-shadow: unset; padding: 4px; background: var(--color-surface-muted); } .form-control:focus, .form-control:hover { border: 1px solid var(--color-accent-strong); box-shadow: var(--shadow-1); } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { /* Override Bootstrap's hardcoded #eee — in dark mode a light-gray bg under light text made disabled fields unreadable. Themed recessed surface keeps contrast with --color-text-primary in both modes. */ background-color: var(--color-surface-alt); opacity: 0.5; } /***************************************************/ /* MODAL**** ***************************************/ /***************************************************/ .modal-dialog { margin: unset; } .modal-backdrop.in { opacity: 0.7; } .modal-content { background-color: var(--color-bg-app); /* 60px = 30px góra + 30px dół (spójne z marginesem .modal-dialog). Cap na cały modal; content (.modal-body) dopasowuje się i skroluje w tej granicy, header/footer statyczne. */ max-height: calc(100vh - 60px); overflow: hidden; z-index: 1050; display: flex; flex-direction: column; } .modal-content > entity-modal { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .modal-content > entity-modal > .modal-header, .modal-content > .modal-header { flex: 0 0 auto; } .modal-content > entity-modal > .modal-body, .modal-content > .modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-bottom: 0; } .modal-content > .modal-footer { flex: 0 0 auto; } /* entity-modal: prawdziwa stopka jako rodzeństwo PONIŻEJ .modal-body (header 0 0 auto / body 1 1 auto, skroluje / footer 0 0 auto). Zastępuje dawne przyklejanie przycisków wewnątrz body — stopka jest pod treścią, nie nakłada się na nią (np. na mapę-picker). */ .modal-content > entity-modal > .modal-footer-row { flex: 0 0 auto; } /* Sticky tylko dla modali trzymających przyciski WEWNĄTRZ przewijanego .modal-body (modale nie-entity). entity-modal ma realną stopkę .modal-footer-row (rodzeństwo poza .modal-body), więc nie łapie tej reguły — bez bezczynnego sticky i zbędnego cienia. */ .modal-content .modal-body modal-buttons { display: block; position: sticky; bottom: 0; background: var(--color-bg-app); z-index: 10; box-shadow: 0 -4px 8px -2px rgba(0, 0, 0, 0.12); padding-top: 4px; } .modal-header { border: 0px; padding: 12px 12px 8px 12px; background-color: var(--color-bg-app); box-shadow: var(--shadow-card); position: relative; z-index: 153; } .modal-header > .row { display: flex; align-items: center; } .modal-header h1 { margin: 0; } /* Uniform field heights in modal body — buttons match, textarea excepted */ .modal-body input.form-control:not([type="checkbox"]):not([type="radio"]), .modal-body select.form-control, .modal-body md-autocomplete { height: 32px; min-height: 32px; } .modal-body md-autocomplete .md-whiteframe-1dp { height: 32px; } .modal-body md-autocomplete input:not(.md-input) { height: 32px; } .modal-body textarea.form-control { height: auto; min-height: 32px; } .modal-body .field-horizontal .btn { height: 32px; min-height: 32px; line-height: 1; padding: 4px 8px; } /* Required-but-empty fields in modals get a highlighted border (replaces the "*" indicator). AngularJS removes ng-invalid-required as soon as a value is entered, so the highlight disappears automatically. */ .modal-body .form-control.ng-invalid-required, .modal-body md-autocomplete.ng-invalid-required { border: 1px solid var(--color-danger-alt); } .modal-body md-autocomplete.ng-invalid-required { box-shadow: 0 0 0 1px #f53224; border-radius: 2px; } .modal-section-header { margin: 8px 0px 8px 0px; } .modal-body { border-top: 1px solid transparent; border-bottom: 1px solid transparent; } .modal-body .content-box { margin: 0px 8px 8px 8px; } .modal-body .row { padding: 4px } .modal-footer { padding: 2px; border: 0px; } /* Tryb szeroki: 30px marginesu góra/dół (symetrycznie). Wysokość: content dopasowuje się, max do calc(100vh - 60px) = 30+30 (patrz .modal-content), header/footer statyczne. */ .modal-dialog.modal-xl { width: 95vw; margin: 30px auto; padding: 0; } /* Wąski ekran: 30px marginesu ze WSZYSTKICH stron (góra/dół przez margin + max-height, boki przez width). Dotyczy każdego modala — i xl, i nie-xl (np. popupy z lupy pola). */ @media (max-width: 767px) { .modal-dialog, .modal-dialog.modal-xl { width: calc(100vw - 60px); margin: 30px auto; } } /* unt-dropdown pozycjonuje menu jako position:fixed wg btn.offset() (współrzędne względem dokumentu/viewportu). Bootstrap nadaje .modal.in .modal-dialog transform: translate(0,0), a NIEZEROWY transform czyni z .modal-dialog containing block dla position:fixed — wtedy menu trafia względem modala, nie viewportu, i jest przesunięte o offset modala (margines góra/lewo). transform:none usuwa to przechwycenie w stanie spoczynku; animacja wjazdu (.modal.fade -> translate(0,-25%) -> none, none = identyczność) działa dalej. */ .modal.in .modal-dialog { transform: none; } .form-value.warning { border: 1px solid var(--color-danger); } .form-horizontal .form-group { margin-right: 0px; margin-left: 0px; } .form-group { margin-bottom: 4px; } .btn.disabled, .btn[disabled] { pointer-events: none; } .disabled-block { pointer-events: none; opacity: 0.4; } .modal-body .input-group-addon { padding: 6px; font-size: inherit; } /***************************************************/ /* MATERIAL ******************************************/ /***************************************************/ .md-standard-list-container.md-autocomplete-suggestions-container, .md-virtual-repeat-container.md-autocomplete-suggestions-container { z-index: 1200; } md-autocomplete { border-radius: 4px; width: 100%; min-width: unset; overflow: hidden; height: unset; border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted); } md-autocomplete input:not(.md-input), .md-autocomplete-suggestions li { font-size: inherit; } md-autocomplete input:not(.md-input), md-autocomplete md-autocomplete-wrap { box-shadow: none; } md-autocomplete input:not(.md-input) { font-size: inherit; padding: 2px 4px; border-radius: 2px; background: var(--color-surface-muted); line-height: unset; height: unset; } .md-whiteframe-1dp, .md-whiteframe-z1 { box-shadow: none; height: var(--form-default-size); } .md-autocomplete-suggestions .md-autocomplete-suggestion { font-size: inherit; padding: 2px 4px; line-height: 24px; height: 28px; } md-autocomplete .md-show-clear-button button { line-height: unset; text-align: center; width: 30px; height: unset; border: none; background: transparent; margin: unset; } .md-autocomplete-suggestions-container, .md-virtual-repeat-container.md-autocomplete-suggestions-container { min-width: 360px !important; margin-top: 4px; background-color: var(--color-surface) !important; border: 1px solid var(--color-chrome-edge); border-radius: 6px; box-shadow: var(--shadow-card); max-width: 90vw; } li.md-autocomplete-suggestion { white-space: normal !important; height: auto !important; min-height: 28px !important; overflow: visible !important; line-height: 1.3 !important; padding: 4px 10px !important; border-bottom: 1px solid var(--color-surface-alt); font-size: inherit !important; } li.md-autocomplete-suggestion:last-child { border-bottom: none; } li.md-autocomplete-suggestion span { white-space: normal !important; word-break: break-word !important; display: block !important; font-weight: normal !important; font-size: inherit !important; } li.md-autocomplete-suggestion .highlight { font-weight: normal !important; } /***************************************************/ /* MAP OSM******************************************/ /***************************************************/ .leaflet-top, .leaflet-bottom { position: absolute; pointer-events: none; } .leaflet-popup-content { margin: 5px; font-family: var(--font-normal); font-size: 1.2rem; } /***************************************************/ /* NAVBAR*******************************************/ /***************************************************/ .navbar { margin-bottom: 0px; border-radius: 0px; display: flex; } .navbar-nav { float: none; margin: 0; } .navbar-nav>li { float: none; } /***************************************************/ /* SIDEBAR *****************************************/ /***************************************************/ .sidebar { background-color: var(--color-sidebar-bg); color: var(--color-sidebar-text); font-size: var(--sidebar-font-size); height: 100%; } #sidebar-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; } label { padding-left: 0px; margin: unset; } /* equal-width icons across the sidebar and the topbar burger that visually extends it */ .sidebar i, .btn.btn-sidebar-toggle > i { display: inline-flex; align-items: center; justify-content: center; width: var(--sidebar-icon-width); font-size: var(--sidebar-icon-size); flex-shrink: 0; padding: 0; } /* SEARCH */ .sidebar .navbar-top { flex-shrink: 0; padding: 0.75em 0.75em 0.5em 0.75em; } .menu-search { padding: 0; border: 0; } .menu-search .input-group { background-color: var(--sidebar-bg-soft); border: 1px solid transparent; border-radius: var(--sidebar-row-radius); display: flex; align-items: center; transition: background var(--sidebar-transition), border-color var(--sidebar-transition), box-shadow var(--sidebar-transition); } .menu-search .input-group:focus-within { background-color: var(--sidebar-bg-soft-strong); border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } #sidebar-input { background: transparent; color: var(--color-text-inverse); border: 0; padding: 0.4em 0.75em; font-size: inherit; box-shadow: none; height: auto; } #sidebar-input::placeholder { color: var(--color-sidebar-text-muted); } #sidebar-input:focus { outline: none; box-shadow: none; } .menu-search .input-group-addon { background: transparent; border: 0; color: var(--color-sidebar-text-muted); padding: 0 0.625em; cursor: pointer; transition: color var(--sidebar-transition); } .menu-search .input-group-addon:hover { color: var(--color-text-inverse); } /* MAIN MENU */ .navbar-main { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 0.25em 0.5em 0.5em 0.5em; height: auto; } .navbar-main .navbar-nav { margin: 0; padding: 0; width: 100%; float: none; } .sidebar .nav > li { float: none; list-style: none; } .sidebar .nav > li > a { display: flex; align-items: center; gap: 0.625em; padding: 0.675em 0.75em; color: var(--color-sidebar-text-muted); background-color: transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--sidebar-transition), color var(--sidebar-transition); } .sidebar .nav > li.active > a, .sidebar .nav > li.expanded > a { color: var(--color-text-inverse); } .sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus, .sidebar .nav > li.active.dropdown > a:hover, .sidebar .nav > li.expanded.dropdown > a:hover { background-color: var(--sidebar-bg-soft); color: var(--color-text-inverse); } .sidebar .nav > li:not(.dropdown).active > a { background-color: var(--color-accent-bg); color: var(--color-text-inverse); box-shadow: 0 1px 8px var(--color-accent-soft); } /* chevron indicator on group headers */ .sidebar .dropdown-toggle::after { content: ''; display: inline-block; width: 0.4em; height: 0.4em; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0.6; transition: transform var(--sidebar-transition), opacity var(--sidebar-transition); } .sidebar .nav > li.active > .dropdown-toggle::after, .sidebar .nav > li.expanded > .dropdown-toggle::after { transform: rotate(45deg); opacity: 1; } /* SUBOPTIONS — collapse/expand via max-height + opacity transitions so both directions animate. 100vh is a generous upper bound for max-height; the visual stops at the content's natural height, then the property continues toward 100vh for the remainder of the transition. */ .navbar-main .dropdown-menu { display: block; position: relative; float: none; background: transparent; color: var(--color-sidebar-text-muted); border: 0; box-shadow: none; padding: 0.125em 0 0.25em 0; margin: 0; min-width: 0; font-size: var(--sidebar-suboption-font-size); width: 100%; max-height: 0; overflow: hidden; opacity: 0; z-index: auto; transition: max-height var(--sidebar-transition) ease-out, opacity var(--sidebar-transition) ease-out; } body:not(.sidebar-mini) .navbar-main li.active .dropdown-menu, body:not(.sidebar-mini) .navbar-main li.expanded .dropdown-menu, body:not(.sidebar-mini) .navbar-main.search-active li .dropdown-menu { max-height: 100vh; opacity: 1; } /* Subtle colour flash signalling the state change. `.flash-expand` / `.flash-collapse` are added by the directive for one transition cycle. Expand flash is delayed and slower so the user first sees the submenu appear, then notices the green tint highlighting what just opened. */ @keyframes sidebar-submenu-flash-expand { 0% { background-color: transparent; } 25% { background-color: rgba(108, 218, 130, 0.25); } 100% { background-color: transparent; } } @keyframes sidebar-submenu-flash-collapse { from { background-color: rgba(232, 102, 102, 0.22); } to { background-color: transparent; } } body:not(.sidebar-mini) .navbar-main .dropdown-menu.flash-expand { animation: sidebar-submenu-flash-expand 600ms ease-out 250ms; } body:not(.sidebar-mini) .navbar-main .dropdown-menu.flash-collapse { animation: sidebar-submenu-flash-collapse var(--sidebar-transition); } .navbar-main .dropdown-menu > li > a { display: flex; align-items: center; padding: 0.4625em 0.625em 0.4625em 2.625em; color: var(--color-sidebar-text-muted); background-color: transparent; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: background var(--sidebar-transition), color var(--sidebar-transition); } .navbar-main .dropdown-menu > li > a:hover, .navbar-main .dropdown-menu > li > a:focus { background-color: var(--sidebar-bg-soft); color: var(--color-text-inverse); } .navbar-main .dropdown-menu > li > a > .menu-suboption-content { flex: 1 1 auto; min-width: 0; } .navbar-main .dropdown-menu > li > a > .badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 6px; margin: 0 0 0 8px; border-radius: 9px; font-size: 11px; line-height: 1; } .navbar-main .dropdown-menu > li.active > a { background-color: var(--color-accent-bg); color: var(--color-text-inverse); box-shadow: 0 1px 8px var(--color-accent-soft); } .menu-suboption-content { display: flex; align-items: center; gap: 0.5em; width: 100%; overflow: hidden; } .menu-suboption-content .content { overflow: hidden; text-overflow: ellipsis; } .label-menu-short { display: none; width: var(--sidebar-icon-width); font-weight: 700; font-size: 0.85em; text-align: center; color: var(--color-sidebar-text-muted); } /* --- SIDEBAR CONTROL BUTTONS ---------------------------------------------- Topbar burger (hides the sidebar) and sidebar bottom toggle (collapses to mini) share visual identity so the user reads them as the same kind of control. `.btn.btn-menu.btn-sidebar-toggle` selector uses all three classes to outrank the dark `.btn.btn-menu` background defined later in the file. */ .navbar-bottom { flex-shrink: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .btn.btn-menu.btn-sidebar-toggle, .sidebar .navbar-bottom .btn.btn-menu { height: var(--topbar-height); padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; background-color: transparent; color: var(--color-sidebar-text-muted); border: 0; border-radius: 0; transition: background var(--sidebar-transition), color var(--sidebar-transition); } .btn.btn-menu.btn-sidebar-toggle:hover, .btn.btn-menu.btn-sidebar-toggle:focus, .btn.btn-menu.btn-sidebar-toggle.active, .btn.btn-menu.btn-sidebar-toggle:active, .sidebar .navbar-bottom .btn.btn-menu:hover, .sidebar .navbar-bottom .btn.btn-menu:focus, .sidebar .navbar-bottom .btn.btn-menu.active, .sidebar .navbar-bottom .btn.btn-menu:active { background-color: var(--sidebar-bg-soft); color: var(--color-text-inverse); border: 0; } /* Burger pulls left to occupy the same column as the sidebar-mini. */ .btn.btn-menu.btn-sidebar-toggle { width: var(--sidebar-mini-width); margin-left: -8px; } /* Bottom toggle fills its container. */ .sidebar .navbar-bottom .btn.btn-menu { width: 100%; } /* FAVORITE-VIEWS (topbar) — uses the .menu-option class */ .menu-option { margin: 0px 8px; } a.menu-option { color: var(--color-sidebar-text-muted); } a.menu-option:hover, a.menu-option:focus { background-color: var(--color-chrome); color: var(--color-text-inverse); } a.menu-option.active { background-color: var(--color-accent-bg); color: var(--color-text-inverse); box-shadow: 0 1px 8px var(--color-accent-soft); } /* Favourites bar: one row that scrolls sideways when crowded — the topbar has a fixed height, so wrapping would clip the extra rows. favorite-views is the bounded, clipped box (the topbar's flex item); the inner list scrolls inside it. A vertical mouse wheel scrolls it via unt-wheel-scroll-x, which toggles can-scroll-left / can-scroll-right so the inset edge shadows below appear only on the side where items are actually hidden — under the logo on the left, under the refresh / icon buttons on the right. */ favorite-views { display: block; position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; } .favorite-views-list { display: flex; height: 100%; flex-wrap: nowrap; align-items: center; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 0 4px; scrollbar-width: none; -ms-overflow-style: none; } .favorite-views-list::-webkit-scrollbar { display: none; } /* Edge shadows painted over the scrolling items so it is obvious that content slides under the neighbouring topbar elements. */ favorite-views::before, favorite-views::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } /* The topbar background is near-black, so a faint translucent black barely shows; ramp to fully opaque at the edge so the light chips visibly fade out into it. */ favorite-views::before { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.75) 40%, rgba(0, 0, 0, 0) 100%); } favorite-views::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.75) 40%, rgba(0, 0, 0, 0) 100%); } favorite-views:has(.favorite-views-list.can-scroll-left)::before, favorite-views:has(.favorite-views-list.can-scroll-right)::after { opacity: 1; } .favorite-views-list > .menu-option { display: inline-flex; align-items: center; flex-shrink: 0; margin: 0 4px; padding: 4px 8px; border-radius: 4px; cursor: grab; line-height: 1.3; } .favorite-views-list > .menu-option.sortable-dragging { cursor: grabbing; opacity: 0.6; } .favorite-views-list > .menu-option.sortable-dragover-before { box-shadow: inset 3px 0 0 var(--color-accent); } .favorite-views-list > .menu-option.sortable-dragover-after { box-shadow: inset -3px 0 0 var(--color-accent); } /* SIDEBAR MINI */ .sidebar-mini #sidebar { width: var(--sidebar-mini-width); } .sidebar-mini .app-content { width: calc(100vw - var(--sidebar-mini-width)); } .sidebar-mini .menu-search { display: none; } .sidebar-mini .sidebar .navbar-top { padding: 0.5em 0.5em 0.25em 0.5em; } /* remove horizontal padding so each row reaches the sidebar's right edge and the cursor can travel from the icon to the flyout without losing :hover */ .sidebar-mini .navbar-main { padding-left: 0; padding-right: 0; } .sidebar-mini .sidebar .nav > li > a { justify-content: center; padding: 0.725em 0; gap: 0; border-radius: 0; } .sidebar-mini .sidebar .nav > li > a > span:not(.label-menu-short) { display: none; } .sidebar-mini .sidebar .dropdown-toggle::after { display: none; } /* highlight the icon when its group contains the current route */ .sidebar-mini .sidebar .nav > li.dropdown.active > a { position: relative; color: var(--color-accent); background-color: var(--color-accent-soft); } .sidebar-mini .sidebar .nav > li.dropdown.active > a::before { content: ''; position: absolute; left: 0; top: 0.5em; bottom: 0.5em; width: 3px; border-radius: 0 2px 2px 0; background-color: var(--color-accent-bg); } /* FLYOUT submenu (mini mode) — position: fixed to escape navbar-main's overflow clip. `border-left: transparent` creates the visual gap from the sidebar while keeping the element's hit area continuous, so the cursor can travel from the icon to the flyout without losing :hover. Show/hide is controlled by opacity + visibility transitions for smooth appear and disappear. JS sets --flyout-top/--flyout-bottom/--flyout-max-height. */ .sidebar-mini .navbar-main li .dropdown-menu { display: block; position: fixed; top: var(--flyout-top, var(--topbar-height)); bottom: var(--flyout-bottom, auto); left: var(--sidebar-mini-width); width: var(--sidebar-flyout-width); max-height: var(--flyout-max-height, calc(100vh - var(--topbar-height) - 1rem)); overflow-y: auto; padding: 0.5em; background-color: var(--color-sidebar-bg-elevated); background-clip: padding-box; border: 1px solid rgba(255, 255, 255, 0.06); border-left: 0.6rem solid transparent; /* compensate the 0.6rem transparent left border so the padding-box (visible card) has the same curve on all four corners */ border-radius: calc(var(--sidebar-row-radius) + 0.5rem) var(--sidebar-row-radius) var(--sidebar-row-radius) calc(var(--sidebar-row-radius) + 0.5rem) / var(--sidebar-row-radius); box-shadow: 0.6rem 0 3.2rem rgba(0, 0, 0, 0.45); font-size: var(--sidebar-font-size); z-index: 200; opacity: 0; visibility: hidden; transform: translateX(-0.4em); animation: none; transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 180ms; } .sidebar-mini .navbar-main li.dropdown:hover > .dropdown-menu, .sidebar-mini .navbar-main li.dropdown.expanded > .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } .sidebar-mini .navbar-main .dropdown-menu > li > a { padding: 0.45em 0.75em; justify-content: flex-start; } .sidebar-mini .navbar-main .dropdown-menu > li > a > .menu-suboption-content { justify-content: flex-start; } .sidebar-mini .navbar-main .dropdown-menu > li > a > .menu-suboption-content > .content { display: inline; } .sidebar-mini .navbar-main .dropdown-menu .label-menu-short { display: none; } /* SIDEBAR HIDE */ .sidebar-hide #sidebar { width: 0; } .sidebar-hide .app-content { width: 100vw; } .input-group-btn { font-size: inherit; } .app-content-footer input { max-width: 50px; } .paginator-mini .hide-on-narrow-screen { display: none; } .entity-file-block { width: 100%; min-width: 300px; padding: 4px; background-color: var(--color-surface-muted); border-radius: 8px; } .drop-box { border: 2px dashed var(--color-text-muted); border-radius: 4px; text-align: center; padding: 4px; margin: 2px; white-space: nowrap; background-color: var(--color-bg-app); } .drop-box:hover { background-color: var(--color-surface-muted); } .drop-box.dragover { border: 1px dashed var(--color-text-secondary); } .drop-box.drop-box-uploading { cursor: not-allowed; pointer-events: none; } .entity-file-block .list-group-item { background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); } .view { display: none; margin-bottom: 0px; } /* login */ .error { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 0px; color: var(--color-danger-text); background-color: var(--color-danger-soft-bg); border-color: var(--color-danger-soft-bg); } .msg { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 0px; color: var(--color-info-text); background-color: var(--color-info-soft-bg); border-color: var(--color-info-soft-bg); } .login-logo-wrapper { max-width: 550px; margin: auto; display: flex; justify-content: center; margin-bottom: 40px; padding: 12px 0px 12px 0px; } .logo-res { max-height: 400px; max-width: -webkit-fill-available; max-width: -moz-available; max-width: fill-available; } /* error page */ .error-box { margin-top: 25vh; } /***************************************************/ /* btn - MENU ************************************/ /***************************************************/ .btn.btn-menu { background-color: var(--color-chrome); border: 1px solid var(--color-chrome); text-align: center; color: var(--color-text-inverse); } .btn.btn-menu.focus, .btn.btn-menu:focus { background-color: var(--color-chrome); color: var(--color-text-inverse); } .btn.btn-menu:hover { background-color: var(--color-chrome); color: var(--color-text-inverse); } .btn.btn-menu.active, .btn.btn-menu:active { background-color: var(--color-chrome); color: var(--color-text-inverse); } .btn.btn-menu.active.focus, .btn.btn-menu.active:focus, .btn.btn-menu.active:hover, .btn.btn-menu:active.focus, .btn.btn-menu:active:focus, .btn.btn-menu:active:hover { background-color: var(--color-chrome); color: var(--color-text-inverse); } .btn.btn-menu.btn-autorefresh-on, .btn.btn-menu.btn-autorefresh-on.focus, .btn.btn-menu.btn-autorefresh-on:focus, .btn.btn-menu.btn-autorefresh-on:hover, .btn.btn-menu.btn-autorefresh-on.active, .btn.btn-menu.btn-autorefresh-on:active { background-color: var(--color-success); border-color: var(--color-success); } .btn.btn-menu.btn-autorefresh-off, .btn.btn-menu.btn-autorefresh-off.focus, .btn.btn-menu.btn-autorefresh-off:focus, .btn.btn-menu.btn-autorefresh-off:hover, .btn.btn-menu.btn-autorefresh-off.active, .btn.btn-menu.btn-autorefresh-off:active { background-color: var(--color-danger-alt); border-color: var(--color-danger-alt); } /***************************************************/ /* btn - status ************************************/ /***************************************************/ .btn.btn-status, .btn.btn-status.focus, .btn.btn-status:focus, .btn.btn-status.active, .btn.btn-status:active, .btn.btn-status.active.focus, .btn.btn-status.active:focus, .btn.btn-status.active:hover, .btn.btn-status:active.focus, .btn.btn-status:active:focus, .btn.btn-status:active:hover { box-shadow: unset; vertical-align: middle; text-align: center; padding: 0px 8px 0px 8px; height: var(--form-default-size); border: 1px solid var(--color-text-primary); width: 100%; font-weight: 600; } .btn.btn-status.active.grey-light, .timeline-block.grey-light { background-color: var(--color-surface-alt); color: var(--color-text-secondary); border-color: var(--color-text-secondary); font-weight: 600; } .btn.btn-status.active.grey-light:hover, .timeline-block.grey-light:hover, .timeline-block.grey-light.active { background-color: var(--color-border-input); Color: var(--color-text-secondary); border-color: var(--color-text-secondary); } .btn.btn-status.active.very-light-cyan, .timeline-block.very-light-cyan { background-color: var(--color-teal-soft-bg); color: var(--color-teal); border-color: var(--color-teal); } .btn.btn-status.active.very-light-cyan:hover, .timeline-block.very-light-cyan:hover, .timeline-block.very-light-cyan.active { background-color: var(--color-teal-soft-bg-hover); color: var(--color-teal); border-color: var(--color-teal); } .btn.btn-status.active.light-cream-yellow, .timeline-block.light-cream-yellow { background-color: var(--color-warning-soft-bg); color: var(--color-warning-text); border-color: var(--color-warning-text); } .btn.btn-status.active.light-cream-yellow:hover, .timeline-block.light-cream-yellow:hover, .timeline-block.light-cream-yellow.active { background-color: var(--color-warning-soft-bg-hover); color: var(--color-warning-text); border-color: var(--color-warning-text); } .btn.btn-status.active.light-mint-green, .timeline-block.light-mint-green { background-color: var(--color-success-soft-bg); color: var(--color-success-text); border-color: var(--color-success-soft-bg-hover); } .btn.btn-status.active.light-mint-green:hover, .timeline-block.light-mint-green:hover, .timeline-block.light-mint-green.active { background-color: var(--color-success-soft-bg-hover); color: var(--color-success-text); border-color: var(--color-success-text); } .btn.btn-status.active.light-pink-white, .timeline-block.light-pink-white { background-color: var(--color-purple-soft-bg); color: var(--color-purple); border-color: var(--color-purple); } .btn.btn-status.active.light-pink-white:hover, .timeline-block.light-pink-white:hover, .timeline-block.light-pink-white.active { background-color: var(--color-purple-soft-bg-hover); color: var(--color-purple); border-color: var(--color-purple); } .btn.btn-status.active.light-lemon-yellow, .timeline-block.light-lemon-yellow { background-color: var(--color-warning-soft-bg); color: var(--color-warning-text); border-color: var(--color-warning-text); } .btn.btn-status.active.light-lemon-yellow:hover, .timeline-block.light-lemon-yellow:hover, .timeline-block.light-lemon-yellow.active { background-color: var(--color-warning-soft-bg-hover); color: var(--color-warning-text); border-color: var(--color-warning-text); } .btn.btn-status.active.light-sky-blue, .timeline-block.light-sky-blue { background-color: var(--color-info-soft-bg); color: var(--color-info-hover); border-color: var(--color-info-hover); } .btn.btn-status.active.light-sky-blue:hover, .timeline-block.light-sky-blue:hover, .timeline-block.light-sky-blue.active { background-color: var(--color-info-soft-bg-hover); color: var(--color-info-hover); border-color: var(--color-info-hover); } .btn.btn-status.active.light-baby-blue, .timeline-block.light-baby-blue { background-color: var(--color-info-soft-bg); color: var(--color-info-text); border-color: var(--color-info-text); } .btn.btn-status.active.light-baby-blue:hover, .timeline-block.light-baby-blue:hover, .timeline-block.light-baby-blue.active { background-color: var(--color-info-soft-bg-hover); color: var(--color-info-text); border-color: var(--color-info-text); } .btn.btn-status.active.light-salmon-pink, .timeline-block.light-salmon-pink { background-color: var(--color-danger-soft-bg); color: var(--color-danger-text); border-color: var(--color-danger-text); } .btn.btn-status.active.light-salmon-pink:hover, .timeline-block.light-salmon-pink:hover, .timeline-block.light-salmon-pink.active { background-color: var(--color-danger-soft-bg-hover); color: var(--color-danger-text); border-color: var(--color-danger-text); } .btn.btn-status.active.light-blue-green { background-color: var(--color-info-soft-bg); color: var(--color-teal); border-color: var(--color-teal); } .btn.btn-status.active.light-blue-green:hover { background-color: var(--color-info-soft-bg); color: var(--color-teal); border-color: var(--color-warning-text) } .btn.btn-status.active.light-grayish-lavender { background-color: var(--color-surface-alt); color: var(--color-text-secondary); border-color: var(--color-text-secondary); } .btn.btn-status.active.light-grayish-lavender:hover { background-color: var(--color-surface-alt); color: var(--color-text-secondary); border-color: var(--color-text-secondary); } .btn.btn-status.active.light-pastel-green { background-color: var(--color-success-soft-bg); color: var(--color-success-text); border-color: var(--color-success-text); } .btn.btn-status.active.light-pastel-green:hover,.timeline-block.light-pastel-green:hover, .timeline-block.light-pastel-green.active { background-color: var(--color-success); color: var(--color-success-hover); border-color: var(--color-success-hover); } /***************************************************/ /* status class ***********************************/ /***************************************************/ .light-pastel-green { background-color: var(--color-success-soft-bg); color: var(--color-success-text); } .light-grayish-lavender { background-color: var(--color-surface-alt); color: var(--color-text-secondary); } .light-blue-green { background-color: var(--color-info-soft-bg); color: var(--color-teal); } .item-block-header.grey-light{ background-color: var(--color-surface-alt); color: var(--color-text-secondary); } .very-light-cyan{ background-color: var(--color-teal-soft-bg); color: var(--color-teal); } .light-cream-yellow { background-color: var(--color-warning-soft-bg); color: var(--color-warning-text); } .light-mint-green { background-color: var(--color-success-soft-bg); color: var(--color-success-text); } .light-pink-white { background-color: var(--color-purple-soft-bg); color: var(--color-purple); } .light-lemon-yellow { background-color: var(--color-warning-soft-bg); color: var(--color-warning-text); } .light-sky-blue { background-color: var(--color-info-soft-bg); color: var(--color-info-hover); } .light-baby-blue{ background-color: var(--color-info-soft-bg); color: var(--color-info-text); } .light-salmon-pink { background-color: var(--color-danger-soft-bg); color: var(--color-danger-text); } /***************************************************/ /* btn - default ***********************************/ /***************************************************/ .btn.btn-default { background-color: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border-input); } .btn.btn-default.focus, .btn.btn-default:focus { background-color: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-accent-strong); } .btn.btn-default:hover { background-color: var(--color-surface-muted); color: var(--color-text-secondary); border: 1px solid var(--color-border-input); } .btn.btn-default.active, .btn.btn-default:active, .open>.dropdown-toggle.btn-default { background-color: var(--color-border-input); color: var(--color-text-secondary); border: 1px solid var(--color-border-input); } .btn.btn-default.active.focus, .btn.btn-default.active:focus, .btn.btn-default.active:hover, .btn.btn-default:active.focus, .btn.btn-default:active:focus, .btn.btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover { background-color: var(--color-border-input); color: var(--color-text-secondary); border: 1px solid var(--color-accent-strong); } /***************************************************/ /* btn - var(--color-surface) ***********************************/ /***************************************************/ .btn.btn-white { border: 1px solid transparent; background-color: var(--color-surface); border-color: 0px solid var(--color-text-primary); color: var(--color-text-primary); font-weight: 400; user-select: text; } .btn.btn-white.focus, .btn.btn-white:focus { background-color: var(--color-surface-muted); outline: none; box-shadow: none; color: var(--color-text-primary); } .btn.btn-white:hover { background-color: var(--color-surface-muted); outline: none; box-shadow: none; color: var(--color-text-primary); } .btn.btn-white.active, .btn.btn-white:active { background-color: var(--color-surface-muted); color: var(--color-text-primary); outline: none; } .btn.btn-white.active.focus, .btn.btn-white.active:focus, .btn.btn-white.active:hover, .btn.btn-white:active.focus, .btn.btn-white:active:focus, .btn.btn-white:active:hover { background-color: var(--color-surface-muted); color: var(--color-text-primary); outline: none; box-shadow: none; } .details-topbar .btn-default { text-align: left; } /***************************************************/ /* btn - success ************************************/ /***************************************************/ .btn.btn-success { background-color: var(--color-success-bg); color: var(--color-text-inverse); border: 1px solid var(--color-success); } .btn.btn-success.focus, .btn.btn-success:focus { background-color: var(--color-success); color: var(--color-text-inverse); border: 1px solid var(--color-accent-strong); } .btn.btn-success:hover { background-color: var(--color-success-hover); color: var(--color-text-inverse); border: 1px solid var(--color-success-hover); } .btn.btn-success.active, .btn.btn-success:active, .open>.dropdown-toggle.btn-success { background-color: var(--color-success-hover); color: var(--color-text-inverse); border: 1px solid var(--color-success-hover); } .btn.btn-success.active.focus, .btn.btn-success.active:focus, .btn.btn-success.active:hover, .btn.btn-success:active.focus, .btn.btn-success:active:focus, .btn.btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover { background-color: var(--color-success-hover); color: var(--color-text-inverse); border: 1px solid var(--color-accent-strong); } /***************************************************/ /* btn-success-light ***********************************/ /***************************************************/ .btn.btn-success-light { background-color: var(--color-surface); color: var(--color-success); border: 1px solid var(--color-surface); } .btn.btn-success-light.focus, .btn.btn-success-light:focus { background-color: var(--color-surface-muted); color: var(--color-success); border: 1px solid var(--color-success); } .btn.btn-success-light:hover { background-color: var(--color-surface-muted); color: var(--color-success); border: 1px solid var(--color-success); } .btn.btn-success-light.active, .btn.btn-success-light:active, .open>.dropdown-toggle.btn-success-light { background-color: var(--color-surface-muted); color: var(--color-success); border: 1px solid var(--color-success); } .btn.btn-success-light.active.focus, .btn.btn-success-light.active:focus, .btn.btn-success-light.active:hover, .btn.btn-success-light:active.focus, .btn.btn-success-light:active:focus, .btn.btn-success-light:active:hover, .open>.dropdown-toggle.btn-success-light.focus, .open>.dropdown-toggle.btn-success-light:focus, .open>.dropdown-toggle.btn-success-light:hover { background-color: var(--color-surface-muted); color: var(--color-success); border: 1px solid var(--color-success); } /***************************************************/ /* btn - primary ***********************************/ /***************************************************/ .btn.btn-primary { background-color: var(--color-accent-bg); color: var(--color-text-inverse); border: 1px solid var(--color-accent); } .btn.btn-primary.focus, .btn.btn-primary:focus { background-color: var(--color-accent-bg); color: var(--color-text-inverse); border: 1px solid var(--color-accent-strong); } .btn.btn-primary:hover { background-color: var(--color-accent-hover); color: var(--color-text-inverse); border: 1px solid var(--color-accent-hover); } .btn.btn-primary.active, .btn.btn-primary:active, .open>.dropdown-toggle.btn-primary { background-color: var(--color-accent-hover); color: var(--color-text-inverse); border: 1px solid var(--color-accent-hover); } .btn.btn-primary.active.focus, .btn.btn-primary.active:focus, .btn.btn-primary.active:hover, .btn.btn-primary:active.focus, .btn.btn-primary:active:focus, .btn.btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { background-color: var(--color-accent-hover); color: var(--color-text-inverse); border: 1px solid var(--color-success); } /***************************************************/ /* btn-primary-light ***********************************/ /***************************************************/ .btn.btn-primary-light { background-color: var(--color-surface); color: var(--color-accent); border: 1px solid var(--color-surface); } .btn.btn-primary-light.focus, .btn.btn-primary-light:focus { background-color: var(--color-surface-muted); color: var(--color-accent); border: 1px solid var(--color-accent); } .btn.btn-primary-light:hover { background-color: var(--color-surface-muted); color: var(--color-accent); border: 1px solid var(--color-accent); } .btn.btn-primary-light.active, .btn.btn-primary-light:active, .open>.dropdown-toggle.btn-primary-light { background-color: var(--color-surface-muted); color: var(--color-accent); border: 1px solid var(--color-accent); } .btn.btn-primary-light.active.focus, .btn.btn-primary-light.active:focus, .btn.btn-primary-light.active:hover, .btn.btn-primary-light:active.focus, .btn.btn-primary-light:active:focus, .btn.btn-primary-light:active:hover, .open>.dropdown-toggle.btn-primary-light.focus, .open>.dropdown-toggle.btn-primary-light:focus, .open>.dropdown-toggle.btn-primary-light:hover { background-color: var(--color-surface-muted); color: var(--color-accent); border: 1px solid var(--color-accent); } /***************************************************/ /* btn-secondary ***********************************/ /***************************************************/ .btn.btn-secondary { background-color: var(--color-accent-soft-bg); color: var(--color-accent-deep); border: 1px solid var(--color-accent-soft-bg); } .btn.btn-secondary.focus, .btn.btn-secondary:focus { background-color: var(--color-accent-bg); color: var(--color-accent-deep); border: 1px solid var(--color-success); } .btn.btn-secondary:hover { background-color: var(--color-accent-soft-bg); color: var(--color-accent-deep); border: 1px solid var(--color-accent-soft-bg); } .btn.btn-secondary.active, .btn.btn-secondary:active, .open>.dropdown-toggle.btn-secondary { background-color: var(--color-accent-soft-bg); color: var(--color-accent-deep); border: 1px solid var(--color-accent-soft-bg); } .btn.btn-secondary.active.focus, .btn.btn-secondary.active:focus, .btn.btn-secondary.active:hover, .btn.btn-secondary:active.focus, .btn.btn-secondary:active:focus, .btn.btn-secondary:active:hover, .open>.dropdown-toggle.btn-secondary.focus, .open>.dropdown-toggle.btn-secondary:focus, .open>.dropdown-toggle.btn-secondary:hover { background-color: var(--color-accent-soft-bg); color: var(--color-accent-deep); border: 1px solid var(--color-success); } /***************************************************/ /* btn - warning ***********************************/ /***************************************************/ .btn.btn-warning { background-color: var(--color-warning); color: var(--color-chrome); border: 1px solid var(--color-warning); } .btn.btn-warning.focus, .btn.btn-warning:focus { background-color: var(--color-warning); color: var(--color-chrome); border: 1px solid var(--color-accent-strong); } .btn.btn-warning:hover { background-color: var(--color-warning-hover); color: var(--color-chrome); border: 1px solid var(--color-warning-hover); } .btn.btn-warning.active, .btn.btn-warning:active, .open>.dropdown-toggle.btn-warning { background-color: var(--color-warning-hover); color: var(--color-chrome); border: 1px solid var(--color-warning-hover); } .btn.btn-warning.active.focus, .btn.btn-warning.active:focus, .btn.btn-warning.active:hover, .btn.btn-warning:active.focus, .btn.btn-warning:active:focus, .btn.btn-warning:active:hover, .open>.dropdown-toggle.btn-warning.focus, .open>.dropdown-toggle.btn-warning:focus, .open>.dropdown-toggle.btn-warning:hover { background-color: var(--color-warning-hover); color: var(--color-chrome); border: 1px solid var(--color-accent-strong); } /***************************************************/ /* btn-warning-light ***********************************/ /***************************************************/ .btn.btn-warning-light { background-color: var(--color-surface); color: var(--color-warning); border: 1px solid var(--color-surface); } .btn.btn-warning-light.focus, .btn.btn-warning-light:focus { background-color: var(--color-surface-muted); color: var(--color-warning); border: 1px solid var(--color-warning); } .btn.btn-warning-light:hover { background-color: var(--color-surface-muted); color: var(--color-warning); border: 1px solid var(--color-warning); } .btn.btn-warning-light.active, .btn.btn-warning-light:active, .open>.dropdown-toggle.btn-warning-light { background-color: var(--color-surface-muted); color: var(--color-warning); border: 1px solid var(--color-warning); } .btn.btn-warning-light.active.focus, .btn.btn-warning-light.active:focus, .btn.btn-warning-light.active:hover, .btn.btn-warning-light:active.focus, .btn.btn-warning-light:active:focus, .btn.btn-warning-light:active:hover, .open>.dropdown-toggle.btn-warning-light.focus, .open>.dropdown-toggle.btn-warning-light:focus, .open>.dropdown-toggle.btn-warning-light:hover { background-color: var(--color-surface-muted); color: var(--color-warning); border: 1px solid var(--color-warning); } /***************************************************/ /* btn - info ***********************************/ /***************************************************/ .btn.btn-info { background-color: var(--color-info-bg); color: var(--color-text-inverse); border: 1px solid var(--color-info); } .btn.btn-info.focus, .btn.btn-info:focus { background-color: var(--color-info); color: var(--color-text-inverse); border: 1px solid var(--color-accent-strong); } .btn.btn-info:hover { background-color: var(--color-info-hover); color: var(--color-text-inverse); border: 1px solid var(--color-info-hover); } .btn.btn-info.active, .btn.btn-info:active, .open>.dropdown-toggle.btn-info { background-color: var(--color-info-hover); color: var(--color-text-inverse); border: 1px solid var(--color-info-hover); } .btn.btn-info.active.focus, .btn.btn-info.active:focus, .btn.btn-info.active:hover, .btn.btn-info:active.focus, .btn.btn-info:active:focus, .btn.btn-info:active:hover, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover { background-color: var(--color-info-hover); color: var(--color-text-inverse); border: 1px solid var(--color-accent-strong); } /***************************************************/ /* btn-info-light ***********************************/ /***************************************************/ .btn.btn-info-light { background-color: var(--color-surface); color: var(--color-info); border: 1px solid var(--color-surface); } .btn.btn-info-light.focus, .btn.btn-info-light:focus { background-color: var(--color-surface-muted); color: var(--color-info); border: 1px solid var(--color-info); } .btn.btn-info-light:hover { background-color: var(--color-surface-muted); color: var(--color-info); border: 1px solid var(--color-info); } .btn.btn-info-light.active, .btn.btn-info-light:active, .open>.dropdown-toggle.btn-info-light { background-color: var(--color-surface-muted); color: var(--color-info); border: 1px solid var(--color-info); } .btn.btn-info-light.active.focus, .btn.btn-info-light.active:focus, .btn.btn-info-light.active:hover, .btn.btn-info-light:active.focus, .btn.btn-info-light:active:focus, .btn.btn-info-light:active:hover, .open>.dropdown-toggle.btn-info-light.focus, .open>.dropdown-toggle.btn-info-light:focus, .open>.dropdown-toggle.btn-info-light:hover { background-color: var(--color-surface-muted); color: var(--color-info); border: 1px solid var(--color-info); } /***************************************************/ /* btn - danger ***********************************/ /***************************************************/ .btn.btn-danger { background-color: var(--color-danger); color: var(--color-text-inverse); border: 1px solid var(--color-danger); } .btn.btn-danger.focus, .btn.btn-danger:focus { background-color: var(--color-danger); color: var(--color-text-inverse); border: 1px solid var(--color-accent-strong); } .btn.btn-danger:hover { background-color: var(--color-danger-hover); color: var(--color-text-inverse); border: 1px solid var(--color-danger-hover); } .btn.btn-danger.active, .btn.btn-danger:active, .open>.dropdown-toggle.btn-danger { background-color: var(--color-danger-hover); color: var(--color-text-inverse); border: 1px solid var(--color-danger-hover); } .btn.btn-danger.active.focus, .btn.btn-danger.active:focus, .btn.btn-danger.active:hover, .btn.btn-danger:active.focus, .btn.btn-danger:active:focus, .btn.btn-danger:active:hover, .open>.dropdown-toggle.btn-danger.focus, .open>.dropdown-toggle.btn-danger:focus, .open>.dropdown-toggle.btn-danger:hover { background-color: var(--color-danger-hover); color: var(--color-text-inverse); border: 1px solid var(--color-accent-strong); } /***************************************************/ /* btn-danger-light ***********************************/ /***************************************************/ .btn.btn-danger-light { background-color: var(--color-surface); color: var(--color-danger); border: 1px solid var(--color-surface); } .btn.btn-danger-light.focus, .btn.btn-danger-light:focus { background-color: var(--color-surface-muted); color: var(--color-danger); border: 1px solid var(--color-accent-strong); } .btn.btn-danger-light:hover { background-color: var(--color-surface-muted); color: var(--color-danger); border: 1px solid var(--color-border-input); } .btn.btn-danger-light.active, .btn.btn-danger-light:active, .open>.dropdown-toggle.btn-danger-light { background-color: var(--color-surface-muted); color: var(--color-danger); border: 1px solid var(--color-border-input); } .btn.btn-danger-light.active.focus, .btn.btn-danger-light.active:focus, .btn.btn-danger-light.active:hover, .btn.btn-danger-light:active.focus, .btn.btn-danger-light:active:focus, .btn.btn-danger-light:active:hover, .open>.dropdown-toggle.btn-danger-light.focus, .open>.dropdown-toggle.btn-danger-light:focus, .open>.dropdown-toggle.btn-danger-light:hover { background-color: var(--color-surface-muted); color: var(--color-danger); border: 1px solid var(--color-accent-strong); } /***************************************************/ /* btn - stop action ***********************************/ /***************************************************/ .btn-fill-container, .search-address li a { width: 100%; overflow: hidden; text-overflow: ellipsis; } /* AI-import modal: each draft's action buttons fill the column width, stacked. */ .ai-import-draft-actions .btn { display: block; width: 100%; } .ai-import-draft-actions .btn + .btn { margin-top: 4px; } /* --- ADDRESS SEARCH DROPDOWN ---------------------------------------------- */ .search-address-header { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin: -6px 0 6px 0; background-color: var(--color-accent-soft); border-top-left-radius: 0.6em; border-top-right-radius: 0.6em; border-bottom: 1px solid rgba(97, 98, 241, 0.16); } .search-address-label { font-size: 0.85em; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-accent); } .search-address-input.form-control { padding: 6px 10px; height: auto; border: 1px solid rgba(97, 98, 241, 0.25); border-radius: 6px; background-color: var(--color-surface); box-shadow: none; transition: border-color var(--sidebar-transition), box-shadow var(--sidebar-transition); } .search-address-input.form-control:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(97, 98, 241, 0.15); } /* Toggle button — switch-style indicator so the on/off state is obvious. */ .search-address-paid-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 1px solid rgba(97, 98, 241, 0.18); border-radius: 6px; background-color: var(--color-surface); color: var(--color-text-primary); cursor: pointer; transition: border-color var(--sidebar-transition), color var(--sidebar-transition); } .search-address-paid-toggle:hover, .search-address-paid-toggle:focus { outline: none; border-color: var(--color-accent); } .search-address-paid-toggle.is-active { border-color: var(--color-accent); color: var(--color-accent); } .search-address-paid-switch { position: relative; display: inline-block; width: 30px; height: 16px; border-radius: 999px; background-color: rgba(20, 18, 42, 0.18); flex-shrink: 0; transition: background-color var(--sidebar-transition); } .search-address-paid-knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--color-surface); box-shadow: 0 1px 2px rgba(20, 18, 42, 0.3); transition: transform var(--sidebar-transition); } .search-address-paid-toggle.is-active .search-address-paid-switch { background-color: var(--color-accent-bg); } .search-address-paid-toggle.is-active .search-address-paid-knob { transform: translateX(14px); } .search-address-paid-text { font-weight: 500; } /* Results list — section labels are compact and styled, no inline list-style. */ .search-address-results { padding: 0; } .search-address { padding-inline-start: 0; margin: 0; list-style: none; } .search-address-section-label { padding: 6px 14px 2px 14px; font-size: 0.75em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-sidebar-text-muted); list-style: none; } .btn.reservared-vehicle { background: var(--color-teal); color: var(--color-text-inverse); } /************** ***FLEX-LIST*** **************/ .flex-list { width: 100%; max-height: 400px; overflow: auto; padding: 8px 0px 8px 0px; } /* Scrollable wrapper (max 600px) for entity sub-lists so the paginator stays visible below it */ .list-scroll-600 { max-height: 600px; overflow-y: auto; } .flex-list-row { display: flex; flex-wrap: nowrap; align-items: center; } .btn-icon-only span { display: none; } .flex-list-item { flex: 2; } .flex-list-item-sm { flex: 1; } .flex-list-item-lg { flex: 3; } /***************/ .children-inline div { width: inherit; display: inline; } .inline { display: inline-flex; align-items: center; } .inline-right { display: inline-flex; align-items: center; justify-content: right; } collapsible right-buttons, collapsible ng-transclude[ng-transclude-slot="rightButtons"] { display: contents; } /*************** ***FLEX-BLOCK*** ***************/ .flex-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; } .flex-container-nowrap { flex-wrap: nowrap; } .flex-item { display: flex; justify-content: flex-start; align-items: center; flex: 2 1; min-width: 36px; padding: 0px 2px; } .flex-item-double-width { flex-grow: 2; } .pair { display: flex; justify-content: center; align-items: center; } .pair label { flex: 1; text-align: right; padding-right: 10px; } .pair .flex-item, .pair triple-price-field, .pair .field-no-vertical-space { flex: 1; text-align: left; } .pair>* { margin: 2px; padding: 2px; word-break: break-word; } /* === STATYSTYKI: ujednolicony wyglad (2 kolumny, field-horizontal, kwoty wyroznione/przygaszone) === */ .statistics-section ul.list-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 0; margin-bottom: 0; } .statistics-section ul.list-group > .list-group-item { border: none; background: transparent; padding: 0; } .statistics-section .pair { justify-content: space-between; align-items: center; padding: 2px 6px; border-radius: 4px; transition: background-color 0.3s ease; } .statistics-section .pair:hover { background-color: rgba(0, 0, 0, 0.05); } .statistics-section .pair label { flex: 0 1 auto; text-align: left; font-weight: normal; padding-right: 10px; } .statistics-section .pair .field-no-vertical-space, .statistics-section .pair .flex-item, .statistics-section .pair > field { flex: 0 0 auto; text-align: right; } /* kwota dwuwalutowa: gorna wyrozniona, dolna przygaszona */ .statistics-section .field-no-vertical-space > field:first-child { font-weight: bold; } .statistics-section .field-no-vertical-space > field:not(:first-child) { color: var(--color-sidebar-text-muted); font-size: 0.85em; } /* kwota dwuwalutowa poza statystykami (np. topbar): gorna wyrozniona, dolna przygaszona */ .double-price-emphasis > field:first-child { font-weight: bold; } .double-price-emphasis > field:not(:first-child) { color: var(--color-sidebar-text-muted); font-size: 0.85em; } /* tabela w sekcji statystyk korzysta z content-boxa samej sekcji (collapsible) - bez wewnetrznej, podwojnej obwoluty */ .statistics-section .content-box { background: transparent; box-shadow: none; border-radius: 0; margin: 0; padding: 0; } .flex { display: flex; width: 100%; flex-wrap: nowrap; align-items: center; justify-content: space-between; } form .flex { padding-top: 0px; } .dropdown-menu { padding: 6px 0; font-size: inherit; cursor: default; min-width: 260px; max-width: calc(100vw - 16px); max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; background-color: var(--color-surface); background-clip: padding-box; border: 1px solid var(--color-chrome-edge); border-radius: 0.6em; box-shadow: var(--shadow-card), 0 0 0 1px var(--color-chrome-edge); z-index: 1100; } .dropdown-menu .divider, .dropdown-menu li.divider { height: 1px; margin: 4px 10px; background-color: rgba(20, 18, 42, 0.08); overflow: hidden; } /* W dark mode jasna powierzchnia dropdownu zamienia się na ciemną — przyciemniony token bordera daje wyraźny rowek oddzielający sekcje (jasny dot. light). */ html[data-theme="dark"] .dropdown-menu .divider, html[data-theme="dark"] .dropdown-menu li.divider { background-color: var(--color-border); } /* Narrow phones: dropdowns shrink so they don't push off-screen, options get tighter padding so they remain tap-friendly without overflowing horizontally. */ @media (max-width: 480px) { .dropdown-menu { min-width: calc(100vw - 16px); max-width: calc(100vw - 16px); } .dropdown-menu [dropdown-option] { padding: 9px 12px; } .field-li-input, .search-address-header { padding: 10px; } } /* === Unified dropdown option styling =================================== Every menu row carrying [dropdown-option] (a) is a full-width flex row, (b) uses a fixed icon column, (c) reveals an accent stripe on hover/active, (d) never changes its background, (e) inherits .btn .btn-default from the directive so .btn.disabled { pointer-events:none } continues to work. :is() collapses the icon-class / state-pseudo / destructive-trigger lists that would otherwise repeat 4–6 times across the rule block. */ .dropdown-menu > li { display: block; } /* Shared selector: every standard option row + nested submenu-toggle row uses the same layout. Bound to a CSS variable for easy reuse below. */ .dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle) { position: relative; display: flex; align-items: center; width: 100%; padding: 7px 14px; margin: 0; border: 0; border-radius: 0; text-align: left; white-space: nowrap; background-color: transparent; color: var(--color-text-primary); transition: color var(--sidebar-transition); } /* Left accent stripe slides in on hover — visual cue without changing background. */ .dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle)::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background-color: transparent; border-radius: 0 2px 2px 0; transform: scaleY(0); transition: transform var(--sidebar-transition), background-color var(--sidebar-transition); } /* Content wrappers (delete/clone/download/show-file) become transparent in the flex layout so their inner icon + label align identically to inline options. */ .dropdown-menu [dropdown-option] > :is(delete-button-content, clone-button-content, download-button-content, show-file-button-content) { display: contents; } .dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle) :is(i, .fa, .fas, .far, .fab, .glyphicon) { width: 1.5em; margin-right: 8px; padding: 0; text-align: center; flex-shrink: 0; transition: transform var(--sidebar-transition); } /* Safety net: options shipped without an icon still align with icon-having rows. Indent the label by the same width the icon column would occupy. */ .dropdown-menu [dropdown-option]:not(:has(> :is(i, .fa, .fas, .far, .fab, .glyphicon, delete-button-content, clone-button-content, download-button-content, show-file-button-content, .status-pill))) { padding-left: calc(14px + 1.5em + 8px); } /* Hover / focus / keyboard-active share the same cue: accent text, stripe slides in, icon nudges 2px right. */ .dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle):is(:hover, :focus, :active, .active) { background-color: transparent; border: 0; color: var(--color-accent); } .dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle):is(:hover, :focus, :active, .active)::before { background-color: var(--color-accent-bg); transform: scaleY(1); } .dropdown-menu :is([dropdown-option], .unt-dropdown > .dropdown-toggle):is(:hover, :focus, .active) :is(i, .fa, .fas, .far, .fab, .glyphicon) { transform: translateX(2px); } /* Backend marked an option as unavailable via getActionClass → "disabled" or wrapping
  • got .disabled (e.g. field directive form-invalid state). .btn.disabled (style.css:1035) blocks pointer-events at runtime; here we add the visual treatment so the user reads "you cannot pick this". */ .dropdown-menu :is([dropdown-option]:is(.disabled, [disabled]), li.disabled > [dropdown-option]) { color: var(--color-text-muted); background-color: transparent; opacity: 0.55; cursor: not-allowed; pointer-events: none; } .dropdown-menu :is([dropdown-option]:is(.disabled, [disabled]), li.disabled > [dropdown-option])::before { display: none; } .dropdown-menu :is([dropdown-option]:is(.disabled, [disabled]), li.disabled > [dropdown-option]) :is(i, .fa, .fas, .far, .fab, .glyphicon) { transform: none; } /* Status-pill inside a disabled option loses its color so it doesn't look selectable — keep the chip shape, drop the saturation. */ .dropdown-menu :is([dropdown-option]:is(.disabled, [disabled]), li.disabled > [dropdown-option]) .status-pill { background-color: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border-input); filter: grayscale(100%); } /* Destructive trigger: explicit .dropdown-option-danger class, the delete-button-content tag, or a trash / eraser icon. */ .dropdown-menu [dropdown-option]:is(.dropdown-option-danger, :has(delete-button-content), :has(> .fa-trash-can), :has(> .fa-trash), :has(> .fa-eraser)) { color: var(--color-danger-alt); } .dropdown-menu [dropdown-option]:is(.dropdown-option-danger, :has(delete-button-content), :has(> .fa-trash-can), :has(> .fa-trash), :has(> .fa-eraser)):is(:hover, :focus) { color: var(--color-danger-hover); } .dropdown-menu [dropdown-option]:is(.dropdown-option-danger, :has(delete-button-content), :has(> .fa-trash-can), :has(> .fa-trash), :has(> .fa-eraser)):is(:hover, :focus)::before { background-color: var(--color-danger-alt); } /* Primary action (save / add-new — recognised by the floppy-disk icon) wears the accent color in its resting state so the user sees it as the confirming choice in the menu. */ .dropdown-menu [dropdown-option]:has(> .fa-floppy-disk) { color: var(--color-accent); font-weight: 500; } .open>.dropdown-menu>li>a { font-size: inherit; } /* Returned-values block: enum lists and search results share the same wrapper styling — a soft tinted card so the user reads them as one coherent results area. Items inside still use the unified [dropdown-option] hover/active treatment (left accent stripe + icon nudge). */ .dropdown-menu .options, .dropdown-menu .search-address { margin: 4px 8px; padding: 4px 0; list-style: none; background-color: rgba(20, 18, 42, 0.04); border-radius: 6px; overflow: hidden; } .dropdown-menu .options > li, .dropdown-menu .search-address > li { list-style: none; padding: 0; margin: 0; } /* Enum image (small svg next to the value label) doesn't get the icon-column treatment — keep it tight to the text. */ .dropdown-menu .options [dropdown-option] > .enum-image { width: auto; height: 1em; margin-right: 8px; flex-shrink: 0; } /* Empty results card disappears so we don't show a blank tinted block. */ .dropdown-menu .options:empty, .dropdown-menu .search-address:empty { display: none; } /* Status updater menu — each row is a unified dropdown option containing a colored "pill" that previews the destination status display color. */ .dropdown-menu.status-updater-menu [dropdown-option]:hover, .dropdown-menu.status-updater-menu [dropdown-option]:focus, .dropdown-menu.status-updater-menu [dropdown-option].active { background-color: rgba(97, 98, 241, 0.08); } .status-pill { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 3px 12px; border-radius: 4px; border: 1px solid; font-weight: 600; line-height: 1.4; text-align: center; } /* Color tokens — same palette as .btn.btn-status.active.X used for the displayed value, so each option previews exactly what the row will look like once picked. */ .status-pill.grey-light { background-color: var(--color-surface-alt); color: var(--color-text-secondary); border-color: var(--color-text-secondary); } .status-pill.very-light-cyan { background-color: var(--color-teal-soft-bg); color: var(--color-teal); border-color: var(--color-teal); } .status-pill.light-cream-yellow { background-color: var(--color-warning-soft-bg); color: var(--color-warning-text); border-color: var(--color-warning-text); } .status-pill.light-mint-green { background-color: var(--color-success-soft-bg); color: var(--color-success-text); border-color: var(--color-success-soft-bg-hover); } .status-pill.light-pink-white { background-color: var(--color-purple-soft-bg); color: var(--color-purple); border-color: var(--color-purple); } .status-pill.light-lemon-yellow { background-color: var(--color-warning-soft-bg); color: var(--color-warning-text); border-color: var(--color-warning-text); } .status-pill.light-sky-blue { background-color: var(--color-info-soft-bg); color: var(--color-info-hover); border-color: var(--color-info-hover); } .status-pill.light-baby-blue { background-color: var(--color-info-soft-bg); color: var(--color-info-text); border-color: var(--color-info-text); } .status-pill.light-salmon-pink { background-color: var(--color-danger-soft-bg); color: var(--color-danger-text); border-color: var(--color-danger-text); } .status-pill.light-blue-green { background-color: var(--color-info-soft-bg); color: var(--color-teal); border-color: var(--color-teal); } .status-pill.light-grayish-lavender { background-color: var(--color-surface-alt); color: var(--color-text-secondary); border-color: var(--color-text-secondary); } .status-pill.light-pastel-green { background-color: var(--color-success-soft-bg); color: var(--color-success-text); border-color: var(--color-success-text); } /* Inside the results card, hover/active gets a soft full-row background tint so the whole option reads as highlighted (the left accent stripe alone was too subtle — looked like the cue was only at the edge). */ .dropdown-menu .options [dropdown-option]:hover, .dropdown-menu .options [dropdown-option]:focus, .dropdown-menu .options [dropdown-option].active, .dropdown-menu .search-address [dropdown-option]:hover, .dropdown-menu .search-address [dropdown-option]:focus, .dropdown-menu .search-address [dropdown-option].active { background-color: rgba(97, 98, 241, 0.10); } /* Nested dropdown-toggle (e.g. the translator picker inside transport-message) blends into the surrounding options instead of looking like a stray bootstrap button. It reuses the [dropdown-option] body styling via the shared :is() selectors above; only the chevron suffix and submenu-open accent are unique to it. */ .dropdown-menu .unt-dropdown { display: block; } .dropdown-menu .unt-dropdown > .dropdown-toggle { box-shadow: none; } .dropdown-menu .unt-dropdown > .dropdown-toggle::after { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: 0.75em; opacity: 0.4; flex-shrink: 0; transition: transform var(--sidebar-transition), opacity var(--sidebar-transition); } .dropdown-menu .unt-dropdown.open > .dropdown-toggle { color: var(--color-accent); } .dropdown-menu .unt-dropdown > .dropdown-toggle:is(:hover, :focus)::after, .dropdown-menu .unt-dropdown.open > .dropdown-toggle::after { opacity: 1; transform: translateX(2px); } .content-box { padding: 4px 8px 4px 8px; margin: 1px 8px 8px 8px; border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-card); } /* AI-import modal: pin the form (suggestion + file + add/clear buttons) above the scrolling drafts list. z-index lifts it over the later-in-DOM drafts that would otherwise paint on top while scrolling. */ .ai-import-form-sticky { position: sticky; top: 0; z-index: 5; } /* gdy collapsible nie ma treści (np. pusta, ukryta tabela) - nie pokazuj pustego boxa */ .content-box:not(:has(*)) { display: none; } .content-box-details-topbar { padding: 4px; background-color: var(--color-border); border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); } .content-box-section { border: 1px solid transparent; } .content-box-section:hover { border: 1px solid var(--color-border-strong); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .content-box-header { display: inline-flex; align-items: center; overflow: visible; width: 100%; border: 1px solid transparent; min-height: 30px; } .content-box-header:hover { background: rgba(0, 0, 0, 0.05); } .highlighted-section { background: var(--color-surface-highlight); box-shadow: var(--shadow-thead); } .content-box>table { width: 100%; overflow: auto; } .content-stop-header { position: sticky; top: 0; z-index: 10; background-color: var(--color-surface); border-radius: 4px; border-bottom: 1px solid var(--color-border-strong); } .content-stop { background-color: var(--color-surface); padding: 8px; border-radius: 8px; margin: 2px 4px; } .current-route { background-color: var(--color-success-soft-bg-hover); } .late-possibility { background-color: var(--color-danger-soft-bg-hover); border-color: red; } .past-route { background-color: var(--color-surface-muted); font-style: italic; } button.route-btn { margin: 1px; } /* !important overrides Bootstrap .btn states (hover/focus/active) */ button.route-btn.route-btn-past { opacity: 0.7; font-style: italic !important; } button.route-btn.route-btn-current { background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; font-weight: bold !important; border: 1px solid var(--color-text-primary) !important; } button.route-btn.route-btn-future { opacity: 0.7; } button.route-btn > .badge { background-color: var(--color-text-muted); } .route-row-td { text-align: center; padding: 4px 8px; } .route-time-reserve { margin: 0 4px; padding: 2px 6px; border-radius: 8px; white-space: nowrap; } .route-progress { height: 16px; margin: 4px auto 0 auto; max-width: 80%; position: relative; } .route-progress-label { position: absolute; left: 0; right: 0; text-align: center; line-height: 16px; color: var(--color-text-primary); } .past-route .form-value { color: var(--color-text-secondary); font-style: italic; } /*--------------------*/ /*-FILTRY-------------*/ /*--------------------*/ .filter-header { display: flex; padding: 6px 8px; gap: 6px; align-items: center; flex-wrap: nowrap; border-radius: 4px; min-width: 0; } .filter-header > .btn, .filter-header > .saved-filters-section { flex: 0 0 auto; white-space: nowrap; } .filter-header > .universal-search-wrapper { flex: 1 1 auto; min-width: 0; } .btn-xs { line-height: unset; padding: 1px; } .filter-block { z-index: 5; box-shadow: var(--shadow-2); margin: 0px 0px 8px 0px; } .list-block { overflow: scroll; height: 100%; } .list-first-load-spinner { display: flex; justify-content: center; align-items: center; padding: 60px 0; } .list-spinner { width: 44px; height: 44px; border: 4px solid var(--color-surface-alt); border-top: 4px solid var(--color-danger-alt); border-radius: 50%; animation: list-spin 1s linear infinite; } @keyframes list-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .list-empty-message { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; gap: 12px; color: var(--color-text-muted); } .list-empty-message i { font-size: 36px; } .filter-box { min-height: auto; background-color: var(--color-surface-highlight); border-radius: 4px; } .saved-filters-section { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; padding: 2px 4px; background-color: var(--color-saved-filters-bg); border-radius: 4px; } .saved-filters-dropdown { display: inline-block; } .saved-filters-toggle { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; } .saved-filters-current { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .saved-filters-menu { min-width: 200px; max-height: 320px; overflow-y: auto; padding: 4px 0; } .saved-filters-menu > li > a { display: flex; align-items: center; gap: 6px; padding: 6px 12px; } .saved-filters-menu > li.active > a { background-color: var(--color-surface-highlight); color: var(--color-text-secondary); font-weight: 600; } .saved-filters-check { color: var(--color-success); font-size: var(--font-sm); flex: 0 0 12px; } .saved-filters-check.invisible { visibility: hidden; } .saved-filters-empty > a { color: var(--color-text-muted); font-style: italic; cursor: default; } .list-tab-selector { display: inline-block; } .list-tab-selector-toggle { max-width: 240px; } .list-tab-selector-toggle > i, .list-tab-selector-toggle > span { vertical-align: middle; } .list-tab-selector-current { display: inline-block; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .list-tab-selector-menu { min-width: 200px; max-height: 320px; overflow-y: auto; padding: 4px 0; } .list-tab-selector-menu > li > a { display: flex; align-items: center; gap: 6px; padding: 6px 12px; } .list-tab-selector-menu > li.active > a { background-color: var(--color-surface-highlight); color: var(--color-text-secondary); font-weight: 600; } .list-tab-selector-check { color: var(--color-success); font-size: var(--font-sm); flex: 0 0 12px; } .list-tab-selector-check.invisible { visibility: hidden; } /* Save filter dialog */ .save-filter-dialog { max-width: 480px; width: 90vw; } .save-filter-dialog-title { margin: 0 0 16px 0; font-size: 18px; font-weight: 600; } .save-filter-tiles { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; } .save-filter-tile { flex: 1 1 140px; min-width: 0; padding: 20px 12px; border: 2px solid var(--color-bg-app); border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.2s ease; background-color: var(--color-surface); user-select: none; } .save-filter-tile:hover { border-color: var(--color-accent); background-color: var(--color-surface-muted); } .save-filter-tile.active { border-color: var(--color-accent); background-color: var(--color-surface-highlight); box-shadow: 0 2px 6px rgba(0,0,0,0.12); } .save-filter-tile.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .save-filter-tile-icon { font-size: 28px; color: var(--color-accent); margin-bottom: 8px; display: block; } .save-filter-tile-title { font-weight: 600; color: var(--color-text-secondary); font-size: 14px; } .save-filter-form { margin-top: 12px; } .save-filter-form label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--color-text-secondary); } .save-filter-form .form-control { width: 100%; } .save-filter-warning { margin-top: 8px; padding: 8px 12px; background-color: var(--color-warning-soft-bg); border-left: 3px solid var(--color-warning); color: var(--color-warning-text); border-radius: 4px; font-size: 13px; display: flex; align-items: center; gap: 6px; } .universal-search-wrapper { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 200px; min-width: 0; } .universal-search-input { flex: 1 1 auto; min-width: 0; padding: 4px 8px; line-height: 1.5; } .universal-search-btn { padding: 4px 10px; flex: 0 0 auto; } .filter-form-box { padding: 0; } /* Filter / sort row: mobile-first (stacked), inline on tablets+ */ .filter-separator { display: flex; flex-direction: column; gap: 4px; border-radius: 6px; padding: 6px 10px; width: 100%; margin: 2px 0; transition: background-color 0.3s ease; background-color: transparent; } .filter-separator:hover { background-color: var(--color-accent-soft-bg); } .filter-row-label { font-weight: 600; color: var(--color-text-secondary); line-height: 1.3; font-size: var(--font-sm); text-transform: uppercase; letter-spacing: 0.02em; } .filter-row-label label { margin: 0; font-size: inherit; } .filter-row-selector { flex: 0 0 auto; } .filter-row-value { flex: 1 1 auto; min-width: 0; } .filter-row-actions { display: flex; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; flex: 0 0 auto; } .filter-row-actions .btn { min-width: 36px; min-height: 36px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; } .filter-row-value-actions { display: flex; flex-direction: row; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; } .filter-row-value-actions .filter-row-value { flex: 1 1 auto; min-width: 0; } .sortable-handle { flex: 0 0 auto; cursor: grab; color: var(--color-text-muted); padding: 2px 6px; display: inline-flex; align-items: center; user-select: none; -webkit-user-select: none; } .sortable-handle:hover { color: var(--color-text-secondary); } .sortable-handle:active { cursor: grabbing; } .filter-separator.sortable-dragging { opacity: 0.4; } .filter-separator.sortable-dragover-before { box-shadow: inset 0 3px 0 0 var(--color-purple); } .filter-separator.sortable-dragover-after { box-shadow: inset 0 -3px 0 0 var(--color-purple); } @media (min-width: 768px) { .filter-separator { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; padding: 3px 10px; } .filter-row-label { flex: 0 0 20%; max-width: 20%; } .filter-row-selector { flex: 0 0 24%; max-width: 24%; } .filter-row-value-actions { flex: 1 1 30%; min-width: 200px; } .filter-row-actions .btn { min-width: 28px; min-height: 28px; padding: 4px 8px; } } .between-range { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; width: 100%; } .between-range-pair { display: flex; align-items: center; gap: 3px; flex: 1 1 0; min-width: 0; } .between-range-pair > .form-control, .between-range-pair > unt-datetime-picker { flex: 1 1 auto; min-width: 0; } .between-range-label { font-weight: normal; margin: 0; color: var(--color-text-muted); white-space: nowrap; font-size: var(--font-sm); flex: 0 0 auto; padding: 0 2px; } .multiselect-fullwidth { width: 100%; } .multivalue-list { display: flex; flex-direction: column; gap: 4px; } .multivalue-row { display: flex; gap: 4px; align-items: center; } .multivalue-row > .form-control { flex: 1 1 auto; min-width: 0; } .multivalue-row > .btn { flex: 0 0 auto; } .multiselect-badge-x { cursor: pointer; margin-left: 4px; } @keyframes filter-row-pulse { 0%, 100% { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0 transparent; } 50% { background-color: var(--pulse-bg, var(--color-accent-soft-bg)); box-shadow: 0 0 0 var(--pulse-ring-width, 0) var(--pulse-ring-color, transparent); } } .filter-separator.filter-row-highlight { animation: filter-row-pulse 0.45s ease-in-out 2; --pulse-bg: var(--color-accent-soft-bg); } .filter-separator.filter-row-highlight-duplicate { animation: filter-row-pulse 0.5s ease-in-out 3; --pulse-bg: var(--color-warning-soft-bg); --pulse-ring-width: 2px; --pulse-ring-color: var(--color-warning); } .filter-box-small .btn { margin: 1px 2px 1px 2px; } .content-box-header .form-control { overflow: hidden; text-overflow: ellipsis; padding: unset; } #filter-select { min-width: 200px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin-right: 5px; background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); height: var(--form-default-size); padding: 2px 4px; } /* New structured chip design for simplified filter bar */ .filter-chip, .sort-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 14px; font-size: var(--font-sm); line-height: 1.3; border: 1px solid transparent; margin: 0; max-width: 100%; white-space: nowrap; } .filter-chip { background: var(--color-info-soft-bg); border-color: var(--color-info-soft-bg-hover); color: var(--color-info-hover); } .sort-chip { background: var(--color-purple-soft-bg); border-color: var(--color-purple); color: var(--color-purple); } .filter-chip-icon, .sort-chip-icon { font-size: var(--font-xs); opacity: 0.65; flex: 0 0 auto; } .filter-chip-field, .sort-chip-field { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .filter-chip-op { color: rgba(0,0,0,0.55); font-weight: normal; font-size: var(--font-sm); text-transform: lowercase; } .filter-chip-value { background: rgba(255,255,255,0.85); padding: 1px 7px; border-radius: 8px; font-weight: 500; color: var(--color-info-hover); overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .filter-chip-close, .sort-chip-close { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; margin-left: 2px; transition: background 0.15s; flex: 0 0 auto; } .filter-chip-close:hover { background: rgba(13, 71, 161, 0.15); } .sort-chip-close:hover { background: rgba(74, 20, 140, 0.15); } .filter-chip-close i, .sort-chip-close i { font-size: var(--font-xs); } .filter-box-small-active>div>table>thead { top: var(--filter-box-small-height); } .filter-box select.form-control { min-width: max-content; width: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .filter-scroll-container, .filter-scroll-container-sort { max-height: 360px; overflow: auto; padding: 2px 4px; } .filter-panels-wrapper { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; } .filter-panel, .sort-panel { flex: 1 1 100%; min-width: 0; padding: 4px; } @media (min-width: 992px) { .filter-panel, .sort-panel { flex: 1 1 0; min-width: 0; } .filter-panels-wrapper.only-filters .filter-scroll-container, .filter-panels-wrapper.only-orders .filter-scroll-container-sort { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; column-gap: 8px; align-content: start; } } .filter-panel-header, .sort-panel-header { display: flex; align-items: center; gap: 8px; background-color: var(--color-accent-soft-bg); padding: 6px 10px; border-radius: 4px; flex-wrap: nowrap; } .filter-panel-title { font-size: 14px; font-weight: 600; margin: 0; flex: 0 0 auto; color: var(--color-text-secondary); white-space: nowrap; } .filter-panel-title::after { content: ":"; } .filter-panel-header > md-autocomplete { flex: 1 1 0; min-width: 0; width: auto; } .filter-bar-presentation { display: flex; flex-wrap: wrap; padding: 4px 6px; gap: 4px; } .filter-bar-section { display: inline-flex; flex-wrap: wrap; gap: 4px; } .map-box { height: 500px; z-index: 1 !important; } .osm-map-wrapper { height: 500px; } #list-tab-section .map-box { height: calc(100vh - 80px); overflow: hidden; } /* Wiersz kontrolek mapy na pełną szerokość, by przyciski mogły dosunąć się do prawej krawędzi (.row.inline to inline-flex i bez tego kurczyłby się do szerokości treści). */ .row.inline:has(> .map-control) { display: flex; width: 100%; } .map-control { padding-left: 5px; height: 30px; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: left; } /* Grupa przycisków mapy dosunięta do prawej krawędzi (margin-left:auto w flexie .map-control). */ .map-control-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } /* Ikona i tekst jako flex-items z odstępem — bez sklejania tekstu z ikoną. */ .map-control-actions .btn { display: inline-flex; align-items: center; gap: 4px; } /* Mapa-picker w modalach tworzenia (POI/adres/punkt trasy): bez wiersza kontrolek (hideButtons chowa przyciski, a ten wiersz kryje pozostały samotny checkbox autoresize). */ .poi-modal-create-map .row.inline { display: none; } /* to element własny (domyślnie inline) — robimy z niego blok w kolumnie. */ .poi-modal-create-map { display: block; } /* Mapa-picker (POI/adres/punkt trasy): stała, użyteczna wysokość 600px w obrębie swojej kolumny. Wcześniej height:100% rozciągało kontener do wysokości kolumny pól, a min-height:600px przelewało mapę poza tę kolumnę i jaśniejszą ramkę; do tego display:flex na .row psuł rynnę Bootstrapa (mapa kleiła się do pól). osm-map-wrapper wyrównuje owijkę OSM do tej samej wysokości co leaflet. */ .poi-modal-create-map .map-box, .poi-modal-create-map .osm-map-wrapper { height: 600px; } .list-view-checkbox { padding: 2px 5px 2px 5px; } .item-block { min-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-width) - 24px); max-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-width) - 24px); overflow: hidden; margin: 8px 12px 24px 12px; background-color: var(--color-surface); box-shadow: var(--shadow-2); border-radius: 8px; } .item-block:hover { box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset; } .sidebar-hide .item-block { min-width: calc(100vw - var(--scrollbar-width) - 24px); max-width: calc(100vw - var(--scrollbar-width) - 24px); } .sidebar-mini .item-block { min-width: calc(100vw - var(--sidebar-mini-width) - var(--scrollbar-width) - 24px); max-width: calc(100vw - var(--sidebar-mini-width) - var(--scrollbar-width) - 24px); } .item-block-header { display: flex; align-items: center; width: 100%; padding: 1px 1px; box-shadow: var(--shadow-1); } .item-block-internal-list { border-top: 1px solid var(--color-bg-app); } .item-block-data { padding: 4px; border-radius: 8px; } [colspan-table] tr.ng-repeat-end td { position: relative; } [colspan-table] .item-block-collapsed-wrapper { display: flex; justify-content: flex-start; position: sticky; left: 0; overflow: hidden; width: calc(100vw - var(--sidebar-width)); } /* position: sticky above makes this wrapper a stacking context with z-index: auto, which traps any fixed-positioned dropdown opened inside it (datetime picker, field / sort / status editors) below the list's sticky (z-index: 3) and header bar. While such a dropdown is open, lift the wrapper above the header so its inner dropdown-menu (z-index: 1100) floats freely. Same idiom as the sticky-last-col rule earlier in this file. */ [colspan-table] .item-block-collapsed-wrapper:has(.dropdown.open) { z-index: 1101; } .sidebar-mini [colspan-table] .item-block-collapsed-wrapper { width: calc(100vw - var(--sidebar-mini-width)); } .sidebar-hide [colspan-table] .item-block-collapsed-wrapper { width: 100vw; } .item-block-collapsed { margin: 8px; padding: 8px; border-radius: 8px; background-color: var(--color-surface-highlight); width: 100%; } .item-block-internal-box { padding: 4px; } .view-list-separator { border-right: 10px solid var(--color-bg-app); } .short .app-content-data { overflow: auto; } .details-list-view .app-content-data { height: unset; max-height: 500px; overflow: auto; display: block; width: 100%; } .content-box-modal-list { max-height: calc(100vh - 350px); display: block; overflow: auto; } .content-box-modal-list.financial-settlement-modal-list { min-height: 100px; max-height: calc(100vh - 600px); } .highlight-text { font-weight: bold; } .bold-text .form-value { font-weight: bold; text-decoration: underline; } .content-box .app-content-footer { margin: 4px; background-color: unset; } .required { color: red; font-weight: bold; } .italic { font-style: italic; } .bold { font-weight: 700; } .highlight-green { color: var(--color-success-text); } .table>tbody>tr.is-processed>td { background: var(--color-success-soft-bg); color: var(--color-text-primary); font-weight: bold; } .table>tbody>tr.sms-not-read>td { background: var(--color-success-soft-bg); color: var(--color-text-primary); font-weight: bold; } .table>tbody>tr.active>td { background: var(--color-text-muted); color: var(--color-text-primary); font-weight: bold; } /***************************************************/ /* SMS MESSAGE CHAT*********************************/ /***************************************************/ .sms-not-read { background: var(--color-success-soft-bg); color: var(--color-text-primary); font-weight: bold; } .transport-message .sms-not-read { background: var(--color-success-soft-bg); color: var(--color-text-primary); font-weight: bold; } div.filter-separator div span.input-group-btn button { height: 34px; } .dropdown.open>ul>li>a { margin: 0; } /**************** CHAT ****************/ .chat-popup { display: block; position: fixed; right: 15px; bottom: 50px; z-index: 1002; background-color: var(--color-surface); width: 450px; max-width: calc(100vw - 100px); padding: 5px 5px 5px 5px; border: 2px solid var(--color-surface-alt); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 24px, rgba(0, 0, 0, 0.22) 0px 10px 10px; } .chat-container { height: 500px; max-height: calc(100vh - 300px); overflow: auto; } .chat-container ul { list-style: none; margin: 0; } .chat-container ul li { display: inline-block; clear: both; width: 80%; } .chat-container .received .chat-message, .chat-container .sent .chat-message { border-radius: 10px; } .chat-container .received { float: right; text-align: left } .chat-container .sent { float: left; text-align: left } .chat-message { margin: 5px 10px 15px 0; } .chat-container .sent .chat-message { background: var(--color-surface-alt); color: var(--color-text-primary); } .chat-container .received .chat-message { background: var(--color-teal-soft-bg); color: var(--color-text-primary); } .chat-message .message-read { background: var(--color-info-soft-bg); color: var(--color-text-primary); border-radius: 0px; } /**************** END OF CHAT ****************/ .md-dialog-container { z-index: 1200; } .dropdown-menu>li>ul, .dropdown-menu>li>unt-datetime-picker>ul { padding-left: 0; max-height: 300px; overflow: auto; overflow-x: hidden; } .dropdown-menu>.active>a { color: var(--color-text-primary); background-color: var(--color-surface); transition: border-color 0.3s ease, background-color 0.3s ease; } .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { color: var(--color-accent-deep); background-color: var(--color-accent-soft-bg); } .dropdown-menu>li>ul>li>a { display: block; } .relationship-picker, .relationship-picker>option { font-family: var(--font-normal); margin: 0px 0px 0px 8px; } table table thead { position: unset; } .highlight-row { background-color: var(--color-border); } .enum-image { width: 24px; height: 16px; object-fit: contain; border: 1px solid var(--color-surface-alt); padding: 0px; margin-right: 4px; flex-shrink: 0; } /*--------------------------*/ /* FIELD - COLLECTION TABLE */ /*--------------------------*/ .element-collection-container { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 4px; } .element-number { flex-shrink: 0; min-width: 30px; } .element-input { flex-grow: 1; } .element-input .form-control { width: 100%; } .element-action { flex-shrink: 0; } /*--------------------------*/ .anchor-body { padding: 0px 10px 0px 10px; margin-bottom: 1px; } .anchor-header { position: sticky; top: 0; padding: 10px; z-index: 5; overflow-y: auto; white-space: nowrap; padding: 4px; background-color: var(--color-info); color: var(--color-text-inverse); display: flex; align-items: center; border-radius: 4px; } .value-text-button { width: 100%; display: flex; } .value-text { width: 100%; margin-right: 2px; } .value-button { float: right; padding: 0px 0px 0px 5px; } /* MEDIA MAX 768 px */ @media ( min-width : 768px) { .modal-dialog { margin: 30px auto; } } /* MEDIA MAX 1200 px */ @media screen and (max-width: 1200px) { .flex-list-row { display: block; flex-wrap: wrap; } .flex-list-item { width: 100%; display: block; } .item-block .item-block-header, .pair { display: block; width: 100%; } .mobile-hide { display: none; } .mobile-show { display: block; } .app-content-header-buttons .btn:not([dropdown-option]) > span:not(.badge), .filter-header .btn:not([dropdown-option]) > span:not(.badge) { display: none; } .item-block { min-width: unset; } .wrapper { display: unset; } .app-content, .sidebar-mini .app-content, .sidebar-hide .app-content { width: 100vw; } #bottombar { max-width: unset; } #sidebar, .sidebar-mini #sidebar, .sidebar-hide #sidebar { display: block; position: fixed; top: var(--topbar-height); left: 0; height: calc(100vh - var(--topbar-height)); /* As a fixed overlay the drawer must stack above ALL page content (e.g. .details-topbar z-index 154 on the dashboard) — otherwise the content header paints over the open drawer. Sit in the unused 201..991 gap: above content, still below modals/dialogs/dropdowns (>=992). */ z-index: 900; width: min(82vw, 32rem); box-shadow: 0 2rem 4.8rem rgba(0, 0, 0, 0.5); transition: transform var(--sidebar-transition), box-shadow var(--sidebar-transition); } .sidebar-hide #sidebar, .sidebar-mini #sidebar { transform: translateX(-100%); box-shadow: none; } /* backdrop while sidebar is open on mobile */ body:not(.sidebar-hide):not(.sidebar-mini):not(.auth-page)::before { content: ''; position: fixed; top: var(--topbar-height); left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 899; animation: sidebar-backdrop-in var(--sidebar-transition) ease-out; } } /* END OF MEDIA MAX 1200 px */ @keyframes sidebar-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @media ( max-width : 991px) { .hide-on-narrow-screen { display: none; } } /*************************/ /** FREIGHT STOP STATUS **/ /*************************/ .vehicle-combination-work-current { font-weight: bold; } .stop-status-going-to { font-weight: bold; } .stop-status-is-on { background-color: var(--color-success-soft-bg-hover); font-weight: bold; } .stop-status-not-going-yet { background-color: var(--color-surface); font-weight: normal; } .stop-status-finished, .cargo-status-supplied { font-style: normal; color: var(--color-text-primary); background-color: var(--color-surface-muted); } .stop-status-finished { color: #888; font-style: italic; } /*******************/ /** PERIOD STATUS **/ /*******************/ .period-status-less-than-7-days { background-color: var(--color-info-soft-bg); border: 0px solid var(--color-info); text-align: center; border-radius: 4px; } .period-status-exceeded { background-color: var(--color-danger-soft-bg); border: 0px solid var(--color-danger); text-align: center; border-radius: 4px; } /********************/ /** SUBSTATUS BAR* **/ /********************/ .substatus-bar { width: 100%; height: 4px; border-radius: 2px; } .status-bar-active { background-color: var(--color-success); } .schedule-start-in-7-days { background-color: var(--color-teal); } /********************/ /** ACTIVE PREVIEW **/ /********************/ .item-block.active-preview { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; background-color: var(--color-surface-highlight); } .table .active-preview, .active-preview { border-bottom: 2px solid var(--color-bg-app-darker); background-color: var(--color-surface-highlight); } .active-preview table { background-color: rgba(91, 91, 91, 0); background-color: var(--color-surface-highlight); } /********************/ /** FAVORITE ***** **/ /********************/ .favorite table { background-color: rgb(0, 255, 0); } /********************/ /** SELECTED****** **/ /********************/ /*************/ /** DASHBOARD **/ /*************/ .dashboard-panel { background-color: transparent; padding: 10px 10px 10px 10px; margin-top: 30px; border: none; } .dashboard-panel-body { background-color: var(--color-surface); height: 100%; box-shadow: var(--shadow-card); } .panel-default>.panel-heading { color: var(--color-text-inverse); background-color: var(--color-chrome-deep); border-color: transparent; } .panel-default>.panel-heading h2 { color: var(--color-text-inverse); } .dashboard-panel-body .menu-suboption-content { display: flex; } .dashboard-panel-body .label-menu-short { display: block; } .dashboard-panel-body .label-menu-short, .dashboard-panel-body .content { margin-right: auto; } /********************/ /** ROW HIGHLIGHTS **/ /********************/ .row-danger { background-color: var(--color-danger-soft-bg); border-bottom: 3px solid var(--color-danger); } /*************/ /** UTILITY **/ /*************/ .list-without-dots { list-style: none; padding: 0px; } /****************/ /** ANIMATIONS **/ /****************/ .row.ng-enter, .row.ng-enter.ng-enter-active, .row.ng-leave, .row.ng-leave.ng-leave-active, tr[with-context-menu].ng-enter, tr[with-context-menu].ng-enter-active, tr.ng-enter, tr.ng-enter.ng-enter-active, .my-view.ng-enter, .my-view.ng-enter.ng-enter-active, .my-view.ng-leave, .my-view.ng-leave.ng-leave-active { transition: none; opacity: 1; height: auto; } .justify-center { display: flex; flex-wrap: wrap; justify-content: center; } .uib-timepicker, .uib-daypicker, .uib-monthpicker, .uib-yearpicker { padding: 8px; background: var(--color-surface); } .uib-timepicker { display: flex; justify-content: center; } .uib-daypicker table tr td:nth-of-type(1n+8) { display: none; } /* uib-datepicker buttons — chevrons and day cells live inside .dropdown-menu but are NOT [dropdown-option]; ensure their icons stay inline and rows align. */ .uib-daypicker .btn.btn-default, .uib-monthpicker .btn.btn-default, .uib-yearpicker .btn.btn-default { padding: 4px 6px; margin: 1px; border: 1px solid transparent; border-radius: 4px; background-color: transparent; color: var(--color-text-primary); box-shadow: none; transition: background-color var(--sidebar-transition), color var(--sidebar-transition), border-color var(--sidebar-transition); } .uib-daypicker .btn.btn-default:hover, .uib-monthpicker .btn.btn-default:hover, .uib-yearpicker .btn.btn-default:hover { background-color: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; } .uib-daypicker .btn.btn-default.active, .uib-monthpicker .btn.btn-default.active, .uib-yearpicker .btn.btn-default.active, .uib-daypicker .btn.btn-info, .uib-monthpicker .btn.btn-info, .uib-yearpicker .btn.btn-info { background-color: var(--color-accent-bg); color: var(--color-on-accent); border-color: var(--color-accent); } .uib-daypicker .uib-title, .uib-monthpicker .uib-title, .uib-yearpicker .uib-title { width: 100%; font-weight: 600; } /* Reset the icon-column rule from .dropdown-menu so chevrons render at their natural inline size and stay centered in the prev/next cell. */ .uib-daypicker .glyphicon, .uib-monthpicker .glyphicon, .uib-yearpicker .glyphicon { width: auto; min-width: 0; margin: 0; padding: 0; display: inline-block; vertical-align: middle; } .uib-daypicker table, .uib-monthpicker table, .uib-yearpicker table { width: 100%; margin: 0; } .uib-daypicker th, .uib-monthpicker th, .uib-yearpicker th { padding: 2px; border: 0; background-color: transparent; box-shadow: none; } .uib-daypicker td, .uib-monthpicker td, .uib-yearpicker td { padding: 0; text-align: center; } /* Footer action bar of the datetime picker — replace the inline gray slab with a cleaner divider so it fits the new dropdown shape. */ unt-datetime-picker > .dropdown-menu > div:last-child { background-color: transparent !important; border-top: 1px solid rgba(20, 18, 42, 0.08); padding: 8px 12px !important; } /******************** ******FAVORITE******* *********************/ .favorite { background-color: rgb(136, 242, 115) } /* Header strip at the top of the field-edit dropdown — sits flush with the menu's rounded corners and gives the label + input a calm tinted background so it reads as a section header instead of a stray block. */ .dropdown-menu > li:first-child > .field-li-input, .dropdown-menu > li:first-child > form > .field-li-input { margin-top: -6px; border-top-left-radius: 0.6em; border-top-right-radius: 0.6em; } .field-li-input { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; margin: 0 0 4px 0; background-color: var(--color-accent-soft); } .field-li-input > form { display: flex; flex-direction: column; gap: 4px; margin: 0; } .field-li-input > span, .field-li-input > form > span:not([ng-init]) { font-size: 0.85em; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-accent); margin: 0; } .field-li-input .form-control { height: auto; padding: 6px 10px; border: 1px solid rgba(97, 98, 241, 0.25); border-radius: 6px; background-color: var(--color-surface); box-shadow: none; transition: border-color var(--sidebar-transition), box-shadow var(--sidebar-transition); } .field-li-input .form-control:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .field-li-input textarea.form-control { min-height: 60px; resize: both; } .field-li-input .field-required { color: var(--color-danger-alt); font-size: 0.85em; margin: 0; } .close-list-tab-section-btn { display: none; } .details-preview .close-list-tab-section-btn, #list-tab-section .close-list-tab-section-btn { display: block; } /************ ***PLANNER*** *************/ .planner { min-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-width)); } .planner .header { display: flex; flex-direction: column; position: sticky; top: 0; z-index: 2; background-color: var(--color-surface); border-top: 2px solid var(--color-border); border-bottom: 2px solid var(--color-border); } .planner .header .management-row { display: flex; justify-content: center; padding: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); } .planner .header .days-row { display: flex; flex: 1; font-weight: 700; vertical-align: middle; text-align: center; word-break: break-word; } .primary-text { font-size: var(--font-xs); color: var(--color-text-primary); } .secondary-text { font-size: var(--font-xs); color: var(--color-text-muted); } .planner .item-block-header { background-color: var(--color-surface); border: 1px solid var(--color-border); margin: 4px 0px 4px 0px; box-shadow: var(--shadow-thead); } .planner .item-block-header:hover { background-color: var(--color-surface); border-color: var(--color-text-muted); } .planner .item-block-header .flex-item { padding: 0px 4px 0px 4px; } .planner .content-row >* { flex: 1; } .planner .content-row .content-row-line { display: flex; position: relative; border-bottom: 2px solid var(--color-border-strong); } .btn-planner-layer .badge { display: none; } .btn-planner-layer .icon { display: inline-block; } .btn-planner-layer:hover .badge { display: inline-block; } .btn-planner-layer:hover .icon { display: none; } .timeline-cell { display: flex; flex: 1; border-right: 1px dashed var(--color-border-strong); min-height: 45px; align-items: center; justify-content: space-around; } .timeline-cell.past { background-color: var(--color-surface-muted); } .timeline-cell.today { background-color: var(--color-surface-muted); } .timeline-cell.future { background-color: var(--color-surface); } .timeline-cell.weekend { background-image: repeating-linear-gradient( 135deg, var(--color-surface-alt) 0px, var(--color-info-soft-bg-hover) 1px, transparent 1px, transparent 20px ); } .timeline-block { position: absolute; cursor: pointer; border-radius: 8px; border: 0.5px solid; padding: 0px 4px; overflow: hidden; white-space: nowrap; min-width: 24px; min-height: 34px; top: 50%; transform: translateY(-50%); } .timeline-block .icon { flex: 0 1 auto; flex-shrink: 0; padding-right: 8px; } .timeline-block .content { display: flex; flex: 1; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden; text-overflow: ellipsis; } .timeline-block .content .item-progress-bar { width: 100%; border-radius: 10px; overflow: hidden; text-align: center; border: 0.5px solid; border-color: darkgreen; } /************ ***IMPORT_TSL*** *************/ .order-created { background-color: var(--color-success-soft-bg); } .logo-offset { padding: 3px; } .btn-sidebar-toggle + .logo-offset { margin-left: 1rem; } .icon-info { margin-right: 4px; } /****************** ENTITY DROPDOWNS ******************/ .unt-dropdown-entity a { width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: left; } .details-body li.list-only, .modal-body .form-box .dropdown-menu li.list-only { display: none; } .unt-dropdown li { list-style-type: none; } /****************** TEXT MANAGEMENT *******************/ .text-wrap { white-space: normal; } .text-xs { font-size: var(--font-xs); } [ng-cloak] { display: none !important; } /* --------------------------------------------------- Unt-alert --------------------------------------------------- */ .unt-alert-panel { width: 100%; max-height: 60vh; padding: 0; display: flex; flex-direction: column; } .unt-alert-panel-header { padding: 6px; background-color: var(--color-surface-highlight); border-bottom: 1px solid var(--color-border); text-align: left; position: sticky; top: 0; z-index: 10; } .unt-alert-empty { padding: 12px; color: var(--color-text-muted); font-style: italic; text-align: center; } .unt-alert-list-wrapper { max-height: 60vh; overflow-y: auto; transition: max-height 0.6s ease, padding 0.6s ease, margin 0.6s ease; } .unt-alert-list { display: flex; flex-direction: column; margin: 0 4px; padding-bottom: 4px; } .unt-alert { position: relative; width: 100%; padding: 12px 18px 12px 18px; padding-right: 34px; margin-bottom: 5px; border: 1px solid; border-radius: 4px; opacity: 0.85; overflow: hidden; max-height: 200px; transition: opacity 0.6s ease, transform 0.6s ease, max-height 0.6s ease, padding 0.6s ease; transform: translateY(0); opacity: 1; } .unt-alert.closing { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; } .unt-alert:first-child { margin-top: 4px; } .unt-alert-success { background-color: transparent; border-color: var(--color-success-soft-bg); color: var(--color-success-text); } .unt-alert-info { background-color: transparent; border-color: var(--color-info-soft-bg); color: var(--color-info-text); } .unt-alert-warning { background-color: var(--color-warning-soft-bg); border-color: var(--color-warning-soft-bg); color: var(--color-warning-text); } .unt-alert-danger { background-color: var(--color-danger-soft-bg); border-color: var(--color-danger-soft-bg); color: var(--color-danger-text); } .unt-alert-icon { font-size: 18px; margin-right: 8px; vertical-align: middle; } .unt-alert-text { vertical-align: middle; } .unt-alert-link { color: inherit; font-weight: bold; margin-left: 6px; text-decoration: underline; cursor: pointer; } .unt-alert-link:hover { opacity: 0.8; } .unt-alert-close-btn { position: absolute; top: 1px; right: 6px; background: transparent; border: none; font-size: 20px; font-weight: bold; cursor: pointer; color: rgba(0,0,0,0.6); } .unt-alert-close-btn:hover { color: rgba(0,0,0,0.9); } .unt-alert-progress { position: relative; width: 100%; height: 4px; background: rgba(0, 0, 0, 0.22); border-radius: 4px; margin-top: 8px; overflow: hidden; } .unt-alert-progress-bar { position: absolute; left: 0; top: 0; height: 100%; background: rgba(255, 255, 255, 0.55); transition: width 0.05s linear; } .alerts-wrapper { position: relative; display: inline-block; } .alert-dropdown-menu { position: fixed; top: 50px; right: 0; width: 360px; max-width: calc(100vw - 20px); max-height: 70vh; background-color: var(--color-surface); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); z-index: 1050; overflow-y: hidden; transition: max-height 0.25s ease; } .dropdown-menu.alert-dropdown-menu { max-height: 70vh; overflow-y: auto; transition: max-height 0.25s ease; } .dropdown-menu.alert-dropdown-menu .btn:hover { background-color: var(--color-surface-muted); color: var(--color-warning); border: 1px solid var(--color-warning); } .freight-stop-block { border-radius: 8px; padding: 8px; margin: 8px; background-color: var(--color-surface-muted); box-shadow: var(--shadow-1); } .alert-level-ok { color: var(--color-teal); background: var(--color-surface); padding: 2px; border-radius: 4px; border: 1px solid var(--color-teal); } .alert-level-low { color: var(--color-info); background: var(--color-surface); padding: 2px; border-radius: 4px; border: 1px solid var(--color-info); } .alert-level-medium { color: var(--color-warning); background: var(--color-surface); padding: 2px; border-radius: 4px; border: 1px solid var(--color-warning); } .alert-level-high { color: var(--color-danger-alt); background: var(--color-surface); padding: 2px; border-radius: 4px; border: 1px solid var(--color-danger-alt); } .alert-level-critical { color: var(--color-danger-soft-bg); background: var(--color-text-primary); padding: 2px; border-radius: 4px; border: 1px solid var(--color-text-primary); } .multiselect-container { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; height: auto; min-height: 34px; padding: 4px; cursor: text; } .multiselect-badge { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: normal; padding: 4px 8px; border-radius: 4px; } .multiselect-input { border: none; outline: none; flex-grow: 1; min-width: 60px; background: transparent; } .multiselect-menu { min-width: 300px; max-width: 450px; white-space: normal; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-height: 250px; overflow-y: auto; z-index: 1060; margin: 0; padding: 0; } .multiselect-dropdown { padding: 6px 12px; cursor: pointer; } .multiselect-dropdown:hover, .multiselect-dropdown.active { background-color: var(--color-surface-muted); } .multiselect-no-result-container { padding: 6px 12px; color: var(--color-text-muted); font-style: italic; } /***************************************************/ /* MODERN AUTH PAGES (login / reset / 2FA) *********/ /***************************************************/ body.auth-page { margin: 0; min-height: 100vh; background: linear-gradient(135deg, var(--color-sidebar-bg) 0%, var(--color-chrome-deep) 45%, var(--color-accent-hover) 100%); color: var(--color-surface-muted); font-family: var(--font-normal); display: flex; flex-direction: column; overflow-x: hidden; } body.auth-page::before, body.auth-page::after { content: ""; position: fixed; border-radius: 50%; filter: blur(80px); z-index: 0; pointer-events: none; } body.auth-page::before { top: -120px; left: -120px; width: 380px; height: 380px; background: rgba(97, 98, 241, 0.35); } body.auth-page::after { bottom: -160px; right: -160px; width: 460px; height: 460px; background: rgba(40, 112, 236, 0.25); } .auth-shell { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 100vh; position: relative; z-index: 1; } .auth-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px 0 28px; gap: 16px; } .auth-topbar .auth-brand { display: flex; align-items: center; gap: 12px; color: var(--color-surface-muted); text-decoration: none; font-size: 14px; letter-spacing: 0.4px; } .auth-topbar .auth-brand img { height: 32px; width: auto; } .auth-content { flex: 1 1 auto; display: flex; align-items: safe center; justify-content: safe center; padding: 32px 20px; } .auth-card { width: 100%; max-width: 460px; background: rgba(255, 255, 255, 0.97); color: var(--color-chrome-deep); border-radius: 8px; padding: 36px 36px 30px 36px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); position: relative; isolation: isolate; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .auth-card-logo { display: flex; justify-content: center; margin-bottom: 18px; } .auth-card-logo img { max-height: 60px; max-width: 220px; } .auth-card h1 { font-size: 22px; font-weight: 600; text-align: center; margin-bottom: 6px; color: var(--color-chrome-deep); } .auth-card .auth-subtitle { text-align: center; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.45; margin-bottom: 22px; white-space: normal; overflow: visible; text-overflow: clip; } .auth-alert { border-radius: 4px; padding: 11px 14px; margin-bottom: 16px; font-size: 13px; border: 1px solid transparent; line-height: 1.4; } .auth-alert.alert-error { background-color: var(--color-danger-soft-bg); border-color: var(--color-danger-soft-bg-hover); color: var(--color-danger-hover); } .auth-alert.alert-success { background-color: var(--color-success-soft-bg); border-color: var(--color-success-soft-bg-hover); color: var(--color-success-hover); } .auth-field { position: relative; margin-bottom: 14px; } .auth-field i.auth-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 14px; pointer-events: none; } .auth-field input.auth-input { width: 100%; height: 44px; border: 1px solid var(--color-border-input); border-radius: 4px; padding: 0 14px 0 42px; font-size: 14px; color: var(--color-chrome-deep); background: var(--color-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none; box-shadow: none; } .auth-field input.auth-input:focus { border-color: var(--color-accent-strong); box-shadow: 0 0 0 3px rgba(136, 137, 253, 0.2); } .auth-field input.auth-input.has-action { padding-right: 56px; } .auth-field .auth-field-action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; } .auth-field .auth-field-action button { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 13px; padding: 6px 10px; border-radius: 4px; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; } .auth-field .auth-field-action button:hover { background: rgba(97, 98, 241, 0.1); color: var(--color-accent); } .auth-field .auth-field-action button:disabled { opacity: 0.4; cursor: not-allowed; color: var(--color-text-muted); background: transparent; } .auth-field .auth-password-toggle[aria-pressed="true"] { color: var(--color-accent); } .auth-btn-spaced { margin-top: 18px; } .auth-row { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 18px; font-size: 13px; } .auth-row a { color: var(--color-accent); text-decoration: none; font-weight: 500; } .auth-row a:hover { text-decoration: underline; } .auth-btn { width: 100%; height: 44px; border: 1px solid var(--color-accent); border-radius: 4px; background: var(--color-accent-bg); color: var(--color-text-inverse); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; letter-spacing: 0.3px; } .auth-btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: 0 4px 12px rgba(59, 61, 171, 0.3); } .auth-btn:active { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } .auth-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); text-decoration: none; font-size: 13px; margin-bottom: 14px; cursor: pointer; background: none; border: none; padding: 0; } .auth-back-link:hover { color: var(--color-accent); } .auth-helper { background: var(--color-surface-muted); border: 1px solid var(--color-border-input); border-radius: 4px; padding: 12px 14px; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; margin-top: 6px; white-space: normal; } .auth-steps { display: flex; gap: 6px; margin-bottom: 22px; } .auth-step { flex: 1; display: flex; flex-direction: column; gap: 6px; } .auth-step .step-bar { height: 4px; border-radius: 99px; background: var(--color-border-input); } .auth-step.is-active .step-bar, .auth-step.is-done .step-bar { background: var(--color-accent-bg); } .auth-step.is-done .step-bar { background: var(--color-success); } .auth-step .step-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; white-space: normal; overflow: visible; text-overflow: clip; } .auth-step.is-active .step-label { color: var(--color-accent); } .auth-step.is-done .step-label { color: var(--color-success-hover); } .auth-footer { text-align: center; color: rgba(244, 246, 251, 0.65); font-size: 12px; padding: 16px 12px 22px 12px; } .auth-footer a { color: var(--color-accent-strong); text-decoration: none; } .auth-footer a:hover { text-decoration: underline; } /* Language selector */ .lang-switcher { position: relative; } .lang-switcher-toggle { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-surface-muted); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: background 0.15s ease; } .lang-switcher-toggle:hover { background: rgba(255, 255, 255, 0.15); } .lang-switcher-toggle i { font-size: 11px; opacity: 0.7; } .lang-switcher-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; max-height: 320px; overflow-y: auto; background: var(--color-surface); color: var(--color-chrome-deep); border-radius: 4px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); padding: 6px 0; display: none; z-index: 50; } .lang-switcher.is-open .lang-switcher-menu { display: block; } .lang-switcher-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--color-chrome-deep); text-decoration: none; font-size: 13.5px; } .lang-switcher-menu a:hover { background: var(--color-surface-muted); } .lang-switcher-menu a.is-active { color: var(--color-accent); font-weight: 600; } .lang-switcher-menu a .lang-code { font-weight: 600; letter-spacing: 0.4px; } .lang-switcher-menu a .lang-name { color: var(--color-text-muted); } .lang-switcher-menu a.is-active .lang-name { color: var(--color-accent); } /* Hide spin arrows on number input (2FA code) */ .auth-input.no-spin::-webkit-outer-spin-button, .auth-input.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .auth-input.no-spin { -moz-appearance: textfield; letter-spacing: 0.4em; text-align: center; font-size: 18px; padding-left: 14px; } @media (max-width: 520px) { .auth-card { padding: 26px 22px 22px 22px; } .auth-card h1 { font-size: 19px; } .auth-topbar { padding: 14px 16px 0 16px; } .auth-step .step-label { display: none; } body.auth-page::before { width: 220px; height: 220px; top: -160px; left: -160px; } body.auth-page::after { width: 260px; height: 260px; bottom: -200px; right: -200px; } } /* Rich HTML editor (used by email-message-modal in previewMode) */ .rich-html-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .rich-html-editor-select { width: auto; } .rich-html-editor-color { margin-bottom: 0; } .rich-html-editor-color-input { width: 0; height: 0; padding: 0; border: 0; opacity: 0; position: absolute; } .rich-html-editor-frame { width: 100%; min-height: 600px; border: 1px solid #dee2e6; background: #ffffff; } .rich-html-editor-source { width: 100%; min-height: 600px; font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.5; padding: 10px; border: 1px solid #dee2e6; background: #fafafa; color: #333; resize: vertical; } /* Email message modal */ .email-modal-attachment-previews { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .email-modal-footer-collapse { margin-top: 8px; } /* Files uploader */ .files-uploader-row { display: flex; align-items: center; } .files-uploader-add { text-align: center; margin-top: 4px; } /* Freight-order full-width summary bar (freight-order-list-by-field) */ .freight-order-bar { display: flex; flex-wrap: wrap; align-items: center; background: var(--color-surface-highlight); border-radius: 4px; margin-bottom: 4px; } /* freight-order-bar: checkbox and the options/collapser hug their content; the data fields share the rest */ .freight-order-bar .fob-min { flex: 0 0 auto; } .freight-order-bar .fob-fill { flex: 1 1 0; min-width: 0; } /* Freight block: row mixing field cells with action buttons — vertically center */ .freight-fields-row { display: flex; flex-wrap: wrap; align-items: center; } /* Freight block (transport) — colored left border by freight status to delimit each transport */ .freight-block { border-radius: 10px; padding: 8px; border: 1px solid var(--color-border); border-left: 8px solid; margin: 8px 0px 24px 0px; } .freight-block.freight-border-INITIAL { border-left-color: #175CD3; } .freight-block.freight-border-CONFIRMED { border-left-color: #046B6B; } .freight-block.freight-border-WAREHOUSE { border-left-color: #B54708; } .freight-block.freight-border-REALIZED { border-left-color: #047B52; } .freight-block.freight-border-DOCUMENTS { border-left-color: #4A148C; } .freight-block.freight-border-CONTROL { border-left-color: #B95503; } .freight-block.freight-border-ACCOUNTING { border-left-color: #001C64; } .freight-block.freight-border-FINISHED { border-left-color: #4B4C51; } /* Flex utility: right-align flex children */ .justify-end { justify-content: flex-end; } /***************************************************/ /* BOOTSTRAP COLOR BRIDGE — bootstrap 3 → nasze tokeny */ /* Ładowane po bootstrap.min.css, więc wygrywa kolejnością. */ /* Cel: spójność palety + tematyzowalność pod dark mode. */ /* (Docelowo przenieść do components.css przy podziale.) */ /***************************************************/ /* Linki tekstowe (bootstrap domyślnie #337ab7) */ a { color: var(--color-accent); } a:hover, a:focus { color: var(--color-accent-hover); } /* Kontekstowe kolory tekstu */ .text-success { color: var(--color-success-text); } .text-danger { color: var(--color-danger-text); } .text-warning { color: var(--color-warning-text); } .text-info { color: var(--color-info-text); } /* Pasek postępu */ .progress { background-color: var(--color-surface-alt); } .progress-bar { background-color: var(--color-accent-bg); color: var(--color-text-inverse); } .progress-bar-success { background-color: var(--color-success); } .progress-bar-danger { background-color: var(--color-danger); } .progress-bar-info { background-color: var(--color-info); } .progress-bar-warning { background-color: var(--color-warning); } /* Alerty (bootstrap) + .alert-error (własna, dotąd bez koloru) */ .alert-success { background-color: var(--color-success-soft-bg); color: var(--color-success-text); border-color: var(--color-success-soft-bg-hover); } .alert-info { background-color: var(--color-info-soft-bg); color: var(--color-info-text); border-color: var(--color-info-soft-bg-hover); } .alert-warning { background-color: var(--color-warning-soft-bg); color: var(--color-warning-text); border-color: var(--color-warning-soft-bg-hover); } .alert-danger, .alert-error { background-color: var(--color-danger-soft-bg); color: var(--color-danger-text); border-color: var(--color-danger-soft-bg-hover); } /* Kontekstowe elementy list-group */ .list-group-item-success { background-color: var(--color-success-soft-bg); color: var(--color-success-text); } .list-group-item-info { background-color: var(--color-info-soft-bg); color: var(--color-info-text); } .list-group-item-warning { background-color: var(--color-warning-soft-bg); color: var(--color-warning-text); } .list-group-item-danger { background-color: var(--color-danger-soft-bg); color: var(--color-danger-text); } /***************************************************/ /* EXTRACTED FROM INLINE (Faza 3) — tokenowe, theme-aware */ /* Zastępują inline style="..." w szablonach; docelowo do components.css */ /***************************************************/ .bg-surface { background-color: var(--color-surface); } .bg-success-soft { background-color: var(--color-success-soft-bg); } .sticky-surface-header { position: sticky; top: 0; z-index: 10; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border-strong); } .modal-sticky-header { position: sticky; top: 0; z-index: 10; padding: 8px 8px; background-color: var(--color-bg-app); box-shadow: var(--color-shadow) 0px 0.0625em 0.0625em, var(--color-shadow) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; } .message-card { min-width: 300px; padding: 4px 8px; margin: 4px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); } .col-divider-x { padding: 4px 12px; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); } .settlement-row-alt { background-color: var(--color-surface-muted); margin-right: 5px; padding: 0px 5px; } .collapsible-divider { border-bottom: 1px solid var(--color-border-strong); margin: -1px; padding: 0px; } .common-details-bar { border-top: 1px solid var(--color-border-strong); background-color: var(--color-chrome); color: var(--color-text-inverse); } .datetime-toolbar { display: flex; justify-content: space-between; padding: 4px 8px; background-color: var(--color-surface-muted); } .file-uploader-box { width: 400px; padding: 4px; background-color: var(--color-surface-muted); border-radius: 8px; } /***************************************************/ /* DARK-FIX: placeholdery + tekst inputów + bordery tabel (tokeny) */ /***************************************************/ .form-control { color: var(--color-text-primary); } input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--color-text-muted); opacity: 1; } /* Bootstrap .table-bordered narzuca jasne #ddd bordery — pod token (ciemne w dark) */ .table-bordered, .table-bordered > thead > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td { border-color: var(--color-border); } .nav-tabs > li > a:hover { border: 1px solid var(--color-accent); border-bottom: 3px solid var(--color-accent); background-color: var(--color-surface-highlight); color: var(--color-text-primary); } #sidebar { box-shadow: inset -1px 0 0 var(--color-chrome-edge); } /* Przyciski subtelne (Opcja A): jasniejsze tlo + spojny border */ .btn.btn-default, .btn.btn-white, .btn.btn-success-light, .btn.btn-primary-light, .btn.btn-warning-light, .btn.btn-info-light, .btn.btn-danger-light { background-color: var(--color-surface-muted); border: 1px solid var(--color-border-input); } .btn.btn-default:hover, .btn.btn-white:hover, .btn.btn-success-light:hover, .btn.btn-primary-light:hover, .btn.btn-warning-light:hover, .btn.btn-info-light:hover, .btn.btn-danger-light:hover { background-color: var(--color-surface); } .btn.btn-secondary { border: 1px solid var(--color-border-input); } /* Bootstrap-bridge: gole .dropdown-menu > li > a (np. entity-shorts-selector) -> tokeny */ .dropdown-menu > li > a { color: var(--color-text-primary); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--color-overlay-dark); color: var(--color-accent); } .dropdown-menu > li.active > a, .dropdown-menu > li.active > a:hover, .dropdown-menu > li.active > a:focus { background-color: var(--color-surface-highlight); color: var(--color-text-primary); } /* Bootstrap-bridge: pola edytowalne -> tlo pola (tokeny), bialy input w dark */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]), textarea, select, .form-control { background-color: var(--color-surface-muted); color: var(--color-text-primary); } /* Bootstrap-bridge: bordery .table (th/thead/td) -> token (jednolite) */ .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td { border-color: var(--color-border); } /* Material-bridge: md-dialog (confirm/prompt/alert) + lazy-map-prompt -> ciemny */ md-dialog, md-dialog.md-default-theme { background-color: var(--color-surface) !important; color: var(--color-text-primary); } md-dialog md-dialog-content, md-dialog .md-dialog-content-body, md-dialog h2, md-dialog .md-title, .lazy-map-prompt { color: var(--color-text-primary); } md-dialog .md-button { color: var(--color-accent); } /* btn-default-light (np. toggle zapamietanych filtrow) — dopelnia Opcje A */ .btn.btn-default-light { background-color: var(--color-surface-muted); border: 1px solid var(--color-border-input); color: var(--color-text-secondary); } .btn.btn-default-light:hover { background-color: var(--color-surface); } /* .btn-fill-container (toggle bez wariantu, np. entity-shorts-selector) -> subtelny przycisk */ .btn.btn-fill-container { background-color: var(--color-surface-muted); border: 1px solid var(--color-border-input); color: var(--color-text-primary); } .btn.btn-fill-container:hover { background-color: var(--color-surface); } /* md-dialog refinements: separatory naglowka/akcji + czytelny przycisk + hover (material agresywny -> !important) */ md-dialog md-toolbar, md-dialog .md-title { border-bottom: 1px solid var(--color-border); padding-bottom: 8px; } md-dialog md-dialog-actions { border-top: 1px solid var(--color-border); } md-dialog .md-button { color: var(--color-accent) !important; } md-dialog .md-button:not([disabled]):hover, md-dialog .md-button:not([disabled]):focus { background-color: var(--color-accent-soft) !important; color: var(--color-accent) !important; } /* Naglowki h1-h6 wersaliki */ h1, h2, h3, h4, h5, h6 { text-transform: uppercase; } /* md-autocomplete suggestions: dark + hover (wybor pola filtra/sortu) */ .md-autocomplete-suggestions { background-color: var(--color-surface) !important; } li.md-autocomplete-suggestion { color: var(--color-text-primary) !important; } li.md-autocomplete-suggestion:hover, li.md-autocomplete-suggestion.selected { background-color: var(--color-overlay-dark) !important; color: var(--color-accent) !important; } /* Nazwa w collapsible (span, nie h-tag) — wersaliki jak naglowki */ collapsible .content-box-header .field-horizontal > span[i18n] { text-transform: uppercase; padding-right: 8px; } /* Tytuł collapsible: zwinięte -> waga standardowa, rozwinięte -> pogrubione. Stan rozpoznawany po ikonie chevron w nagłówku (bez dodawania hooków do HTML). */ collapsible .content-box-header:has(.fa-chevron-down) .field-horizontal > span[i18n] { font-weight: normal; } collapsible .content-box-header:has(.fa-chevron-up) .field-horizontal > span[i18n] { font-weight: 700; } /* Waypoints collapsible header: route summary (skip-route + distance) shown as compact label:value pairs on ONE line. The shared .field-horizontal is built for full-width column rows (label flex:1 + space-between) and the global label rule is -webkit-line-clamp:2 — in the narrow header that stacked the two pairs and wrapped "Pomiń drogę" onto two lines. Scope the overrides here. */ .waypoints-route-summary { display: flex; align-items: center; gap: 20px; margin-left: 16px; } .waypoints-route-summary .field-horizontal { padding: 0; gap: 6px; } .waypoints-route-summary .field-horizontal:hover { background-color: transparent; } .waypoints-route-summary label { flex: 0 0 auto; display: inline-flex; -webkit-line-clamp: unset; white-space: nowrap; }