/* * Design system tokens for the DYSPO.PL redesign (Etap 0 — sidebar/header shell). * * Scope note: only the sidebar/header chrome (".dc-*" classes) uses these tokens * today. The rest of the app still renders through Bootstrap's dark theme CDN * stylesheet (see layout.html ), which stays untouched * on purpose until each page is reskinned in Etap 1 — so the two systems must * coexist without fighting over the same classes/selectors. That's why every * component class here is prefixed ".dc-" and nothing here redefines Bootstrap * classes or removes the "data-bs-theme" attribute. * * Theme handling: this app has been dark-only for its whole life, so unlike the * source mockup (which defaults to light), the tokens below default to DARK with * no attribute needed, and flip to light only when data-theme="light" is set. * That keeps first paint visually consistent with the rest of the (still-dark) * app during the migration. The toggle button only affects ".dc-*" chrome for * now — full-page theming arrives naturally once Etap 1 reskins page content * onto these same tokens. */ :root, :root[data-theme="dark"] { --bg: #11151B; --surface: #191E26; --surface-2: #1E242D; --line: #2A313C; --line-soft: #232933; --ink: #E7ECF2; --ink-2: #B7C0CC; --muted: #8B95A3; --accent: #3E6FA8; --accent-ink: #9FC0E4; --accent-soft: #1D2836; --on-accent: #FFFFFF; --ok: #5FBF8A; --ok-soft: #16261E; --warn: #D9A441; --warn-soft: #292117; --danger: #E07A7A; --danger-soft: #2A1A1A; --info: #7FAEE0; --info-soft: #17222E; --violet: #A98FE0; --violet-soft: #221D2E; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .28); --shadow-modal: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 20px rgba(0, 0, 0, .35), 0 32px 64px rgba(0, 0, 0, .45); --radius: 12px; } :root[data-theme="light"] { --bg: #F4F6F8; --surface: #FFFFFF; --surface-2: #FAFBFC; --line: #E3E7EC; --line-soft: #EDF0F4; --ink: #1A2230; --ink-2: #4A5566; --muted: #7A8494; --accent: #1E3A5F; --accent-ink: #1E3A5F; --accent-soft: #EBF0F6; --on-accent: #FFFFFF; --ok: #1F7A46; --ok-soft: #E8F3EC; --warn: #9A6209; --warn-soft: #FBF2E2; --danger: #B03636; --danger-soft: #FAEBEB; --info: #215C9A; --info-soft: #E9F0F8; --violet: #5B3E96; --violet-soft: #F0ECF9; --shadow: 0 1px 2px rgba(20, 30, 48, .05), 0 8px 24px rgba(20, 30, 48, .05); --shadow-modal: 0 2px 6px rgba(20, 30, 48, .10), 0 12px 24px rgba(20, 30, 48, .12), 0 32px 64px rgba(20, 30, 48, .16); } /* ---------- Shell layout ---------- */ .dc-shell { min-height: 100vh; display: flex; background: var(--bg); } .dc-backdrop { position: fixed; inset: 0; /* Wyzej niz banner cookies (.cookie-consent w layout.html, z-index:10000) - inaczej otwarte na telefonie menu boczne renderowalo sie POD bannerem, ktory zaslanial dolne pozycje (Wyloguj) i blokowal ich klikniecie. */ z-index: 10001; background: rgba(12, 18, 28, .5); display: none; } .dc-backdrop.show { display: block; } .dc-sidebar { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; /* Wyzej niz banner cookies (.cookie-consent w layout.html, z-index:10000) - patrz komentarz przy .dc-backdrop. */ z-index: 10002; width: 248px; max-width: 86vw; /* Celowo BEZ jawnego height - top:0 + bottom:0 na position:fixed juz rozciaga element do prawdziwej widocznej wysokosci. Jawne "height:100vh" tutaj wygrywalo nad "bottom:0" (nadmiarowo okreslony box wg specyfikacji CSS) i przy chowajacym sie pasku adresu przegladarki mobilnej sidebar byl przycinany do starej, wiekszej wysokosci 100vh - dolna belka (Wyloguj) chowala sie pod paskiem przegladarki i nie dalo sie do niej przewinac, bo sam element "nie wiedzial", ze cos mu wystaje poza faktyczny widoczny ekran. */ flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateX(-100%); transition: transform .18s ease, width .18s ease; } .dc-sidebar.show { transform: translateX(0); } @media (min-width: 992px) { .dc-sidebar { position: sticky; transform: none; /* Sticky trzyma sie gory TYLKO gdy element miesci sie w oknie. Pasek z kompletem pozycji (administrator: 18 pozycji, w tym "Planer zaladunku") byl wyzszy niz ekran 1080p i wtedy przewijal sie razem ze strona. Ograniczenie do wysokosci okna + przewijanie wewnatrz .dc-sidebar-body (ma overflow-y:auto) przywraca przyklejony pasek. */ max-height: 100vh; max-height: 100dvh; } .dc-sidebar-body { min-height: 0; /* Przewijanie zostaje (kolko, dotyk), ale bez widocznego paska - w menu aplikacji pasek przewijania wyglada jak blad, a w komplecie pozycji brakuje najwyzej kilku pikseli. */ scrollbar-width: none; } .dc-sidebar-body::-webkit-scrollbar { display: none; } html.dc-collapsed .dc-sidebar { width: 76px; } } /* Niskie okno (1080p z paskami przegladarki, laptop): komplet 18 pozycji ma sie zmiescic bez przewijania - pozycje nizsze i bez odstepow, na 768 px jeszcze ciasniej. */ /* Selektory z .dc-sidebar celowo: reguly bazowe (.dc-nav-item, .dc-sidebar-head) sa nizej w pliku i przy rownej specyficznosci wygrywalyby z tymi w zapytaniu o media. */ @media (min-width: 992px) and (max-height: 1000px) { .dc-sidebar .dc-sidebar-body { padding-top: 6px; padding-bottom: 8px; } .dc-sidebar .dc-nav-item { min-height: 40px; margin-bottom: 0; } } @media (min-width: 992px) and (max-height: 800px) { .dc-sidebar .dc-sidebar-head { min-height: 52px; padding: 6px 12px; } .dc-sidebar .dc-nav-item { min-height: 36px; font-size: 14px; } } .dc-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; } .dc-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: .02em; min-width: 0; overflow: hidden; color: var(--ink); text-decoration: none; } .dc-brand:hover { color: var(--ink); text-decoration: none; } .dc-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--accent); color: #fff; font-size: 14px; } /* Stan zwinietego paska bocznego siedzi na , a NIE na .dc-shell, celowo. Klase nakłada maly skrypt w , zanim przegladarka cokolwiek narysuje - wczesniej robil to skrypt na koncu strony, wiec przy kazdym przejsciu miedzy zakladkami pasek pojawial sie najpierw rozwiniety i dopiero animowal do zwinietego. Wygladalo to jak mrugniecie menu przy kazdym klikniecu. */ html.dc-collapsed .dc-brand-label, html.dc-collapsed .dc-nav-item span { display: none; } /* Zwiniety sidebar (tylko ikony, 76px) - naglowek i pozycje menu musza sie przelozyc na pionowy uklad wysrodkowany, inaczej marka + przycisk zwijania nie miesca sie obok siebie w poziomie (przycisk wystaje/przycina sie), a ikony pozycji menu zostaja przyklejone do lewej krawedzi zamiast na srodku. */ html.dc-collapsed .dc-sidebar-head { flex-direction: column; gap: 10px; padding: 12px 8px; } html.dc-collapsed .dc-nav-item { justify-content: center; padding: 0; } html.dc-collapsed .dc-nav-item i { width: auto; } html.dc-collapsed .dc-nav-item .fa-lock { display: none; } .dc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none; } .dc-icon-btn:hover { background: var(--surface-2); color: var(--ink); } .dc-icon-btn.lg { width: 40px; height: 40px; border-radius: 10px; } .dc-sidebar-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px 16px; } .dc-nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; margin-bottom: 2px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-decoration: none; } .dc-nav-item i { width: 20px; flex-shrink: 0; text-align: center; font-size: 14px; opacity: .9; } .dc-nav-item:hover { background: var(--surface-2); color: var(--ink); } .dc-nav-item.active { background: var(--accent); color: var(--on-accent); } .dc-nav-item.active:hover { background: var(--accent); color: var(--on-accent); } .dc-nav-item.locked { color: var(--muted); } .dc-nav-item .fa-lock { margin-left: auto; font-size: 11px; opacity: .8; } .dc-nav-divider { height: 1px; background: var(--line-soft); margin: 10px 4px; } .dc-nav-item.danger { color: var(--danger); } .dc-nav-item.danger:hover { background: var(--danger-soft); } /* ---------- Header ---------- */ .dc-header { position: sticky; top: 0; z-index: 1030; background: var(--surface); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); } .dc-header-inner { max-width: 1320px; margin: 0 auto; padding: 9px 16px; min-height: 60px; display: flex; align-items: center; gap: 10px; min-width: 0; } .dc-search { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; max-width: 420px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } .dc-search i { font-size: 13px; color: var(--muted); flex-shrink: 0; } .dc-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); outline: none; font-size: 14px; } .dc-header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } .dc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; } .dc-user-toggle { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; } .dc-user-toggle:hover { background: var(--surface-2); } .dc-user-toggle .dc-avatar { background: var(--accent-soft); color: var(--accent-ink); } .dc-user-name { font-size: 14px; font-weight: 500; } /* ---------- Dropdowns (bell / user) ---------- */ .dc-dropdown-wrap { position: relative; } .dc-bell-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface); } .dc-dropdown { position: absolute; top: 52px; right: 0; z-index: 1060; width: 360px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); display: none; } .dc-dropdown-wrap.open .dc-dropdown { display: block; } .dc-dropdown-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; } .dc-dropdown-head .title { font-size: 14px; font-weight: 600; color: var(--ink); } .dc-dropdown-count { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--danger-soft); color: var(--danger); } .dc-dropdown-list { max-height: 340px; overflow-y: auto; } .dc-dropdown-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 9px; min-width: 0; color: inherit; text-decoration: none; } .dc-dropdown-item:hover { background: var(--surface-2); } .dc-dropdown-item .icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; font-size: 12px; } .dc-dropdown-item .title { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: break-word; } .dc-dropdown-item .meta { display: block; font-size: 12px; color: var(--muted); overflow-wrap: break-word; } .dc-dropdown-empty { padding: 14px 10px; font-size: 13px; color: var(--muted); text-align: center; } .dc-dropdown-foot { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; } .dc-dropdown-foot a, .dc-dropdown-foot button { display: block; width: 100%; padding: 9px; border: 0; background: transparent; border-radius: 9px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; } .dc-dropdown-foot a:hover, .dc-dropdown-foot button:hover { background: var(--surface-2); } .dc-user-menu-head { padding: 9px 11px 11px; border-bottom: 1px solid var(--line-soft); margin-bottom: 5px; } .dc-user-menu-head .name { font-size: 14px; font-weight: 600; color: var(--ink); } .dc-user-menu-head .company { font-size: 12.5px; color: var(--muted); } .dc-menu-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 11px; border-radius: 9px; font-size: 14px; color: var(--ink-2); text-decoration: none; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; } .dc-menu-item i { width: 16px; text-align: center; font-size: 13px; } .dc-menu-item:hover { background: var(--surface-2); color: var(--ink); } .dc-menu-item.danger { color: var(--danger); font-weight: 500; } .dc-menu-item.danger:hover { background: var(--danger-soft); } /* ---------- Main content area ---------- */ .dc-main { flex: 1; min-width: 0; width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px 16px 40px; } .dc-content-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } @media (max-width: 991.98px) { .dc-sidebar { top: 0; } } /* ---------- Small header link/CTA (logged-out state) ---------- */ .dc-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; } .dc-link-btn:hover { background: var(--surface-2); color: var(--ink); } .dc-cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600; text-decoration: none; border: 0; } .dc-cta-btn:hover { opacity: .9; color: var(--on-accent); } /* ---------- Notification variant colors (maps existing Bootstrap-style variant names from header_attention_items to the new token pairs) ---------- */ .dc-variant-danger { background: var(--danger-soft); color: var(--danger); } .dc-variant-warning { background: var(--warn-soft); color: var(--warn); } .dc-variant-info { background: var(--info-soft); color: var(--info); } .dc-variant-success { background: var(--ok-soft); color: var(--ok); } .dc-variant-primary { background: var(--accent-soft); color: var(--accent-ink); } .dc-variant-secondary { background: var(--surface-2); color: var(--ink-2); } /* ---------- Generic add/edit form shell (used by add_*.html / edit_*.html) - markup/values copied from the mockup's isGenericForm section: back button + title + Anuluj/Usun/Zapisz row, then bordered sections with an icon header and a grid of labeled fields. Shared here (rather than repeated per-file) because ~13 form templates use the exact same shell. ---------- */ .gform-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; } .gform-back { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); text-decoration: none; } .gform-back:hover { background: var(--surface-2); } .gform-header-text { min-width: 0; flex: 1; } .gform-header-text h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); } .gform-header-text .sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; } .gform-actions { display: flex; flex-wrap: wrap; gap: 8px; } .gform-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; } .gform-btn:hover { background: var(--surface-2); color: var(--ink); } .gform-btn.danger { border-color: var(--danger); color: var(--danger); } .gform-btn.danger:hover { background: var(--danger); color: #fff; } .gform-btn.primary { border: 0; background: var(--accent); color: var(--on-accent); font-weight: 600; } .gform-btn.primary:hover { opacity: .9; color: var(--on-accent); } /* Przycisk "Otworz trase w Google Maps" na stronach tras - zmieniamy WYLACZNIE kolor, cala geometria (wysokosc, wciecia, czcionka, promien, pelna szerokosc) zostaje z gform-btn. Wypelniony niebieskim Google, zeby od razu bylo widac, dokad prowadzi - konkretnie Blue 700 (#1967d2), ten sam, ktorego Google uzywa we wlasnych przyciskach na jasnym tle. Swiadomie NIE niebieski z logo Map (#4285f4): bialy tekst na nim ma kontrast 3.56:1, czyli ponizej progu WCAG AA (4.5:1). Ciemniejszy #1a73e8 wychodzi 4.51:1, a wiec dokladnie na styk - uzyte Blue 700 daje 5.37:1, z zapasem. Zmierzone, nie oszacowane. Ramka zdjeta jak w gform-btn.primary - przy wypelnionym tle jasna obwodka z var(--line) odcinalaby sie obca kreska. Wypelnienie dziala tak samo w motywie jasnym i ciemnym, wiec nie potrzebuje wariantu. */ .gform-btn.gmaps-btn { border: 0; background: #1967d2; color: #fff; } .gform-btn.gmaps-btn:hover { background: #185abc; color: #fff; } .gform-body { display: flex; flex-direction: column; gap: 14px; max-width: 900px; } .gform-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-width: 0; } .gform-section-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); } .gform-section-head .icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 12px; flex-shrink: 0; } .gform-section-head h2 { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--ink); } .gform-section-body { padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .gform-section-body.wide { grid-template-columns: 1fr; } .gform-field { min-width: 0; } .gform-field.span-2 { grid-column: span 2; } .gform-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; } .gform-field .hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); } .gform-input, .gform-select, .gform-textarea { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: 14px; outline: none; } .gform-textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; font-family: inherit; } .gform-select[multiple] { height: auto; min-height: 110px; padding: 8px 12px; } .gform-input:focus, .gform-select:focus, .gform-textarea:focus { border-color: var(--accent); background: var(--surface); } .gform-input:disabled { color: var(--muted); cursor: not-allowed; } .gform-input::placeholder, .gform-textarea::placeholder { color: var(--muted); } .gform-input.is-invalid, .gform-select.is-invalid, .gform-textarea.is-invalid { border-color: var(--danger); } .gform-field .invalid-feedback { color: var(--danger); font-size: 12px; margin-top: 4px; } .gform-check { display: flex; align-items: center; gap: 9px; min-height: 44px; } .gform-check input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; } .gform-check label { margin: 0; font-size: 14px; color: var(--ink); font-weight: 500; } /* Dynamicky dodawane bloki adresu zaladunku/rozladunku w formularzu zlecenia (add_order.html/edit_order.html) - stylowane osobno od .gform-section, bo JS query'uje .loading-address-block/.unloading-address-block po nazwie przy dodawaniu/usuwaniu/przenumerowywaniu kolejnych punktow. */ .gaddr-block { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; } .gaddr-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .gaddr-block-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; } .gaddr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .gaddr-grid .span-2 { grid-column: span 2; } .gform-input[type="file"] { height: auto; min-height: 44px; padding: 8px 12px; border-style: dashed; cursor: pointer; } /* Plywajacy przycisk zapisu (gform-enhancements.js) - Zapisz jest tez w naglowku na gorze, ale formularze koncza sie na dole, wiec duplikat pojawia sie w rogu ekranu dopiero gdy przycisk z naglowka wyjdzie poza widok (patrz IntersectionObserver). */ .gform-float-save { position: fixed; right: 20px; bottom: 20px; /* Nad bannerem RODO (z-index 10000 w layout.html), pod modalem polityki prywatnosci (10010) - inaczej na swiezej sesji (baner cookies jeszcze widoczny) przycisk chowal sie pod nim, niewidoczny mimo .show. */ z-index: 10005; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .gform-float-save.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .gform-float-save .gform-btn { box-shadow: 0 6px 20px rgba(0,0,0,.25); } /* Baner propozycji przywrocenia niezapisanego formularza (gform-enhancements.js) */ .gform-draft-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--warn); border-radius: var(--radius); background: var(--warn-soft); color: var(--ink); font-size: 13.5px; } .gform-draft-banner .gform-draft-text { display: flex; align-items: center; gap: 8px; color: var(--ink); } .gform-draft-banner .gform-draft-actions { display: flex; gap: 8px; flex-shrink: 0; } /* ---------- Detail/preview modal content (showDetailsModal JS in orders.html, clients.html, drivers.html, vehicles.html, reminders.html) - these build their content as JS template-string HTML injected into the shared #detailsModal, so there's no server-rendered markup to reskin per-page like everywhere else; the classes below are the reusable target every one of those functions renders into. Content passes through tmsSanitizeHtml() (main.js) before insertion - it strips onXXX/script/style tags but leaves class and style attributes alone, so both are safe to use here. ---------- */ .ddetail-section { margin-bottom: 16px; } .ddetail-section:last-child { margin-bottom: 0; } .ddetail-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .ddetail-section-head .icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; font-size: 11px; flex-shrink: 0; } .ddetail-section-head h6 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); } .ddetail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .ddetail-field { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); } .ddetail-field.wide { grid-column: 1 / -1; } .ddetail-field .lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .ddetail-field .val { font-size: 14px; color: var(--ink); font-weight: 500; overflow-wrap: break-word; } .ddetail-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .ddetail-box { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; } /* ---------- Bootstrap modal shell (.modal-content/.modal-header/...) - used by every modal in the app (#detailsModal, #eventModal, #calendarFeedModal, rating modals, etc.). Only the shell/shape gets tokenized here (bg/border/radius/shadow/spacing/typography) - button *colors* stay on Bootstrap's own --bs-primary/--bs-secondary/etc. (already patched to the light palette separately in style.css) so this doesn't have to touch every modal's button markup across the app, just make the shape consistent with the rest of the redesign. ---------- */ /* Bootstrap focuses the outer .modal (tabindex="-1") when it opens; some browsers (esp. Edge on Windows) draw their native focus ring in the OS accent color around whatever gets focus()'d, regardless of this app's own CSS - not something intentionally styled here, just neutralized with !important since a plain "outline: none" wasn't enough to beat the browser's native focus-ring painting. Elevation instead comes from a layered shadow (--shadow-modal) so the dialog reads as a floating card. */ .modal, .modal-dialog, .modal-content { outline: none !important; box-shadow: none; } .modal-content { background: var(--surface); border: none !important; border-radius: var(--radius); box-shadow: var(--shadow-modal) !important; } .modal-header { border-bottom: 1px solid var(--line); padding: 18px 22px; } .modal-header .modal-title { color: var(--ink); font-size: 17px; font-weight: 600; } .modal-body { padding: 20px 22px; color: var(--ink-2); } .modal-footer { border-top: 1px solid var(--line); padding: 14px 22px; gap: 8px; } .modal-footer .btn, .modal-body .btn { border-radius: 9px; font-weight: 600; } .modal .form-control, .modal .form-select { border-radius: 8px; } .ddetail-box strong { color: var(--ink); } /* ---------- Auth shell (login/rejestracja/reset hasla) - te strony NIE dziedzicza normalnej powloki aplikacji (sidebar/header/stopka), tylko wlasny pelnoekranowy uklad dwukolumnowy (ciemny panel z marka po lewej, jasny formularz po prawej). Uzywaja layout.html {% block body %}. ---------- */ .auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--bg); } @media (min-width: 900px) { .auth-shell { grid-template-columns: 1fr 1fr; } } .auth-aside { background: var(--accent); color: #fff; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; } .auth-aside .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .02em; font-size: 18px; color: #fff; text-decoration: none; } .auth-aside .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.15); flex-shrink: 0; } .auth-aside .lede { max-width: 420px; } .auth-aside h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; } .auth-aside .lede p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.78); } .auth-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .auth-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 13px; color: #fff; } .auth-aside .copyright { font-size: 13px; color: rgba(255,255,255,.6); } .auth-form-col { display: flex; align-items: center; justify-content: center; padding: 40px 24px; min-width: 0; } .auth-form-col .inner { width: 100%; max-width: 400px; } .auth-form-col h2 { margin: 0 0 5px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } .auth-form-col .sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; } .auth-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; } .auth-field-wrap { position: relative; margin-bottom: 16px; } .auth-field-wrap > i { position: absolute; left: 14px; top: 25px; color: var(--muted); font-size: 13px; pointer-events: none; } .auth-field-wrap input { width: 100%; height: 50px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); outline: none; font-size: 15px; } .auth-field-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .auth-field-wrap.no-icon input { padding-left: 14px; } .auth-field-error input { border-color: var(--danger); } .auth-error-msg { color: var(--danger); font-size: 12.5px; margin-top: 4px; } .auth-help-text { font-size: 12px; color: var(--muted); margin-top: 4px; } .auth-btn-primary { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; } .auth-btn-primary:hover { opacity: .9; color: var(--on-accent); } .auth-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 48px; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; text-decoration: none; background: transparent; cursor: pointer; } .auth-btn-secondary:hover { background: var(--surface-2); color: var(--ink); } .auth-trust-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .auth-trust-row span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); } .auth-flash { padding: 14px 20px; background: var(--info-soft); color: var(--info); font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .auth-flash.warning { background: var(--warn-soft); color: var(--warn); } .auth-flash.danger { background: var(--danger-soft); color: var(--danger); } .auth-flash.success { background: var(--ok-soft); color: var(--ok); } .auth-flash button { border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; font-size: 16px; line-height: 1; } .auth-flash button:hover { opacity: 1; } /* ---------- Portal kierowcy (mobile app-shell, uzywany przez driver_*.html) ---------- */ .dp-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } .dp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .dp-topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); text-decoration: none; min-width: 0; } .dp-topbar .brand-mark { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 13px; } .dp-topbar .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none; } .dp-icon-btn:hover { border-color: var(--accent); color: var(--ink); } .dp-preview-banner { padding: 10px 16px; background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; text-align: center; } .dp-content { flex: 1; padding: 16px; padding-bottom: 92px; max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; } .dp-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); z-index: 10; } .dp-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; position: relative; } .dp-bottomnav a.active { color: var(--accent-ink); background: var(--accent-soft); } .dp-bottomnav a i { font-size: 17px; } .dp-bottomnav .badge { position: absolute; top: 2px; right: 18%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .dp-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; } .dp-card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink); } .dp-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } .dp-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 14.5px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; } .dp-btn-primary:hover { opacity: .9; color: var(--on-accent); } .dp-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; } .dp-btn-secondary:hover { background: var(--surface-2); color: var(--ink); } /* Wybor zdjecia w portalu kierowcy - dwa przyciski (galeria / aparat) nad jednym polem pliku. Pole pliku jest schowane dopiero wtedy, gdy skrypt odslonil przyciski (.dp-foto--gotowy); bez JavaScriptu zostaje zwykle pole, a nie dwa martwe przyciski. Chowamy je przez odsuniecie poza kadr, a nie display:none, bo przy display:none przegladarka nie umie pokazac komunikatu walidacji przy polu wymaganym - formularz odmawialby wyslania bez slowa wyjasnienia. */ .dp-foto-input { width: 100%; font-size: 13px; color: var(--ink-2); } .dp-foto--gotowy .dp-foto-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .dp-foto { position: relative; } .dp-foto-akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dp-foto-akcje .dp-btn-secondary { height: 52px; } @media (max-width: 340px) { .dp-foto-akcje { grid-template-columns: 1fr; } } .dp-foto-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .dp-foto-wybrane { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } .dp-foto-praca { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; } .dp-foto-podsumowanie { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .dp-foto-podsumowanie.za-ciezko { color: var(--danger); } .dp-foto-wskazowka { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--muted); } .dp-foto-wybrane img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .dp-foto-wybrane .nazwa { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; } .dp-foto-wybrane .usun { flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; } .dp-foto-wybrane .usun:hover { color: var(--danger); border-color: var(--danger); } .dp-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dp-status-opt { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; } .dp-status-opt.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); } .dp-checklist-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; } .dp-checklist-item .name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .dp-seg { display: flex; gap: 6px; } .dp-seg label { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink-2); } .dp-seg input { display: none; } .dp-seg input:checked + label.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); } .dp-seg input:checked + label.uwaga { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); } .dp-seg input:checked + label.usterka { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } .dp-chat-scroll { display: flex; flex-direction: column; gap: 10px; } .dp-msg { max-width: 78%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; } .dp-msg.out { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; } .dp-msg.in { align-self: flex-start; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .dp-msg .time { display: block; margin-top: 4px; font-size: 10.5px; opacity: .7; } .dp-empty { text-align: center; padding: 30px 12px; color: var(--muted); } .dp-details { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface); } .dp-details summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--ink); list-style: none; background: var(--surface-2); } .dp-details summary::-webkit-details-marker { display: none; } .dp-details summary .dp-details-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .dp-details summary .count { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; } .dp-details summary .chev { font-size: 11px; color: var(--muted); transition: transform .15s; } .dp-details[open] summary .chev { transform: rotate(180deg); } .dp-details .dp-details-body { padding: 12px; } /* Podpowiedz nazwy zakladki przy zwinietym pasku bocznym. Element jest pojedynczy i lezy POZA paskiem, bo .dc-sidebar-body ma overflow-x: hidden - dymek narysowany wewnatrz pozycji menu bylby po prostu przyciety. Pozycje wylicza skrypt przy najechaniu, stad position: fixed. */ .dc-nav-tip { position: fixed; z-index: 1200; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); } .dc-nav-tip[hidden] { display: none; } /* ================================================================================================== MODUL "POZYSKIWANIE" Kolor wiersza nie jest ustawiany recznie i nie ma go w bazie - wynika z danych (lead_row_state w models.py). Tutaj sa tylko odpowiedniki kolorow z tej funkcji, zeby nazwa stanu z backendu przekladala sie na jedna klase. ================================================================================================== */ .lead-c-danger { --lead-kolor: var(--danger); --lead-tlo: var(--danger-soft); } .lead-c-warn { --lead-kolor: var(--warn); --lead-tlo: var(--warn-soft); } .lead-c-ok { --lead-kolor: var(--ok); --lead-tlo: var(--ok-soft); } .lead-c-info { --lead-kolor: var(--info); --lead-tlo: var(--info-soft); } .lead-c-accent { --lead-kolor: var(--accent-ink); --lead-tlo: var(--accent-soft); } .lead-c-muted { --lead-kolor: var(--muted); --lead-tlo: var(--surface-2); } .lead-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--lead-tlo); color: var(--lead-kolor); white-space: nowrap; } /* Liczby nad kolejka - klikniecie przewija do sekcji. */ .lead-liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; } .lead-liczba { display: block; padding: 13px 15px; border: 1px solid var(--line); border-left: 3px solid var(--lead-kolor); border-radius: 12px; background: var(--surface); text-decoration: none; } .lead-liczba .ile { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--lead-kolor); } .lead-liczba .co { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .lead-sekcja { margin-bottom: 22px; } .lead-sekcja h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); } .lead-sekcja h2 .licznik { padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; } /* Zwiniety wiersz - pasek koloru po lewej, cala reszta to jeden duzy cel do klikniecia. */ .lead-wiersz { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: 6px; border: 1px solid var(--line); border-left: 3px solid var(--lead-kolor); border-radius: 10px; background: var(--surface); text-decoration: none; color: inherit; } .lead-wiersz:hover { background: var(--surface-2); color: inherit; } .lead-wiersz .nazwa { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .lead-wiersz .drobne { font-size: 12.5px; font-weight: 400; color: var(--muted); } /* Karta rozmowy - to na nia patrzy uzytkownik w chwili wybierania numeru. */ .lead-karta { border: 1px solid var(--line); border-left: 3px solid var(--lead-kolor); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; } .lead-karta h3 { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .lead-karta .meta { margin-top: 3px; font-size: 13px; color: var(--muted); } .lead-karta .opis { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .lead-osoba { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); } .lead-osoba .kto { font-size: 14px; font-weight: 600; color: var(--ink); } .lead-osoba .stanowisko { font-size: 12.5px; color: var(--muted); } .lead-osoba a { font-size: 13.5px; font-weight: 600; color: var(--accent-ink); text-decoration: none; } .lead-historia { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; } .lead-historia .wpis { display: flex; gap: 9px; padding: 5px 0; font-size: 12.5px; color: var(--ink-2); } .lead-historia .kiedy { flex-shrink: 0; color: var(--muted); min-width: 84px; } /* Przyciski akcji. Minimum 44 px wysokosci - obsluga jedna reka, w kabinie, w rekawiczce. */ .lead-akcje { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin-top: 14px; } .lead-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; } .lead-btn:hover { background: var(--surface-2); color: var(--ink); } .lead-btn.glowny { border-color: transparent; background: var(--accent); color: var(--on-accent); } .lead-btn.glowny:hover { opacity: .9; color: var(--on-accent); } .lead-panel { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); } .lead-panel label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .lead-panel textarea, .lead-panel input, .lead-panel select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; box-sizing: border-box; } .lead-panel textarea { min-height: 80px; resize: vertical; } .lead-skroty { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .lead-skrot { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; } .lead-skrot:hover { background: var(--accent-soft); color: var(--accent-ink); } .lead-pusto { padding: 28px 16px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; color: var(--muted); font-size: 14px; } /* Podsumowanie wspolpracy na karcie firmy - to sie czyta w trakcie wybierania numeru, wiec musi byc widoczne bez przewijania. */ .lead-rytm { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); } .lead-rytm b { color: var(--ink); } @media (max-width: 560px) { .lead-akcje { grid-template-columns: 1fr 1fr; } .lead-liczby { grid-template-columns: 1fr 1fr; } }