:root { --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Lexend", var(--font-sans); --bg: #f5f6f4; --panel: #ffffff; --ink: #1c2024; --muted: #667085; --line: #e1e4e2; --accent: #0f766e; --accent-strong: #0b5f59; --accent-active: #094e49; --accent-soft: rgba(15, 118, 110, 0.1); --warn: #c0362f; --gold: #a1710a; --blue: #27647b; --shadow: 0 12px 30px rgba(20, 24, 28, 0.07); --sidebar-bg: #ffffff; --sidebar-line: var(--line); --tile-placeholder: #d8ddd4; --map-pin: #d92828; --bs-primary: var(--accent); --bs-primary-rgb: 15, 118, 110; --bs-link-color: var(--accent); --bs-link-color-rgb: 15, 118, 110; --bs-link-hover-color: var(--accent-strong); } /* Dark palette: applied when the OS prefers dark AND no explicit choice has been saved yet (bare :root, no [data-bs-theme] - see the inline script in for how the attribute is set before first paint), and again explicitly under [data-bs-theme="dark"] so the in-app toggle always wins regardless of system preference. */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --bg: #14171b; --panel: #1b1f24; --ink: #e8eaed; --muted: #97a1ac; --line: #2b3036; --accent: #2dd4bf; --accent-strong: #5eead4; --accent-active: #14b8a6; --accent-soft: rgba(45, 212, 191, 0.14); --warn: #f2726c; --gold: #e0af4c; --blue: #7cb2cc; --shadow: 0 16px 34px rgba(0, 0, 0, 0.45); --sidebar-bg: #16191d; --tile-placeholder: #2a2f34; --map-pin: #f0554e; --bs-primary-rgb: 45, 212, 191; } } :root[data-bs-theme="dark"] { --bg: #14171b; --panel: #1b1f24; --ink: #e8eaed; --muted: #97a1ac; --line: #2b3036; --accent: #2dd4bf; --accent-strong: #5eead4; --accent-active: #14b8a6; --accent-soft: rgba(45, 212, 191, 0.14); --warn: #f2726c; --gold: #e0af4c; --blue: #7cb2cc; --shadow: 0 16px 34px rgba(0, 0, 0, 0.45); --sidebar-bg: #16191d; --tile-placeholder: #2a2f34; --map-pin: #f0554e; --bs-primary-rgb: 45, 212, 191; } /* Bootstrap follows the app tokens in BOTH palettes, so every Bootstrap surface (card, form-control, form-select, table, list-group, dropdown, modal, border, muted text) is painted from --bg / --panel / --ink / --line instead of Bootstrap's own grey palette. Must stay after Bootstrap's stylesheet. */ :root, :root[data-bs-theme] { --bs-body-bg: var(--bg); --bs-body-bg-rgb: 20, 23, 27; --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--muted); --bs-secondary-bg: color-mix(in srgb, var(--ink) 7%, var(--panel)); --bs-tertiary-bg: color-mix(in srgb, var(--ink) 4%, var(--panel)); --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-form-control-bg: var(--bg); } :root[data-bs-theme="light"] { --bs-body-bg-rgb: 245, 246, 244; } .card, .list-group, .dropdown-menu, .modal-content, .accordion, .offcanvas { --bs-card-bg: var(--panel); --bs-card-color: var(--ink); --bs-card-cap-bg: var(--accent-soft); --bs-list-group-bg: var(--panel); --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--line); --bs-dropdown-bg: var(--panel); --bs-dropdown-color: var(--ink); --bs-dropdown-border-color: var(--line); --bs-modal-bg: var(--panel); --bs-accordion-bg: var(--panel); } .form-control, .form-select { min-height: 40px; background-color: var(--bs-form-control-bg); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 18%, var(--line)); } textarea.form-control { min-height: 80px; } .form-control:focus, .form-select:focus { background-color: var(--bs-form-control-bg); color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-soft); } .form-control::placeholder { color: var(--muted); opacity: 0.8; } .form-control:disabled, .form-select:disabled { background-color: var(--bs-secondary-bg); } .form-check-input { background-color: var(--bs-form-control-bg); border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-soft); } .form-check-inline { margin-right: 1.25rem; min-height: 40px; display: inline-flex; align-items: center; gap: 0.5rem; padding-left: 0; } .form-check-inline .form-check-input { float: none; margin: 0; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font-sans); transition: background-color 0.2s ease, color 0.2s ease; } .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong); --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); --bs-btn-focus-shadow-rgb: 15, 118, 110; --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; } .btn { transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .btn:active { transform: translateY(1px); } .btn-icon { display: inline-flex; align-items: center; gap: 8px; } h1, h2, p { margin: 0; } h1 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.15; } h2 { font-size: 18px; font-weight: 700; } h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; } .section-head p, .status-text, .muted { color: var(--muted); } /* --- Login screen ----------------------------------------------------- */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .login-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow); } .login-brand-mark { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--accent-soft); color: var(--accent-strong); font-size: 24px; margin-bottom: 6px; } .login-title { margin: 0; font-family: var(--font-display); font-size: 22px; } .login-subtitle { margin: 0 0 14px; font-size: 13px; } .login-error { width: 100%; margin: 0 0 10px; font-size: 13px; } .login-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; } /* --- App shell: sidebar + main -------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; display: flex; flex-direction: column; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-line); padding: 20px 16px; z-index: 1040; transition: transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 22px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #ffffff; font-size: 16px; flex: none; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar-link i { width: 18px; text-align: center; flex: none; } .sidebar-link:hover { background: var(--accent-soft); color: var(--ink); } .sidebar-link.active { background: var(--accent-soft); color: var(--accent-strong); } .sidebar-footer { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); } .sidebar-version { text-align: center; color: var(--muted); font-size: 12px; } .sidebar-user { display: flex; align-items: center; gap: 8px; } .sidebar-user-email { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; } .sidebar-logout { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: var(--muted); flex: 0 0 auto; } .sidebar-logout:hover { background: var(--accent-soft); color: var(--accent-strong); } /* The theme button shows the current mode: half circle = System, sun = Light, moon = Dark. */ .theme-icon-light, .theme-icon-dark { display: none; } :root[data-theme-mode="light"] .theme-icon-system, :root[data-theme-mode="dark"] .theme-icon-system { display: none; } :root[data-theme-mode="light"] .theme-icon-light, :root[data-theme-mode="dark"] .theme-icon-dark { display: inline-block; } .sidebar-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 1050; width: 42px; height: 42px; padding: 0; border-radius: 10px; box-shadow: var(--shadow); } .app-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 18, 21, 0.5); z-index: 1035; } .app-main { flex: 1 1 auto; margin-left: 260px; min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 56px; } .app-view[hidden] { display: none; } .view-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .view-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .view-title { margin: 0; } .view-subtitle { margin-top: 2px; } .detail-header { margin-bottom: 16px; } .back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13px; } .back-link:hover { color: var(--accent); } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); width: 84vw; max-width: 300px; box-shadow: var(--shadow); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .app-backdrop { display: block; } /* Full touch targets for the sidebar footer actions (theme, notifications) on a phone. */ .sidebar-footer .btn { min-height: 44px; } .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; } .app-main { margin-left: 0; padding-top: 72px; } } .section-head, .form-row, .list-head { display: flex; align-items: center; gap: 12px; } .section-head { justify-content: space-between; margin-bottom: 14px; } .form-row { justify-content: space-between; margin-top: 12px; } .stat-card { transition: transform 0.15s ease, box-shadow 0.15s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .stat-card .card-body { padding: 16px; } .stat-label { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .stats-grid strong { display: block; margin-top: 6px; font-size: 24px; font-family: var(--font-display); } .list-head { align-items: flex-end; margin-bottom: 14px; } .list-head input { max-width: 360px; } .empty-state { padding: 40px 28px; text-align: center; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 12px; } .listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .all-listings-row { cursor: pointer; } .listing-card { display: grid; grid-template-rows: 170px auto; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .listing-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 34px rgba(20, 24, 28, 0.12); } .listing-card.archived { opacity: 0.65; } .thumb { background: linear-gradient(135deg, var(--tile-placeholder), var(--line)); position: relative; min-height: 170px; overflow: hidden; cursor: pointer; } .media-preview { display: grid; grid-template-columns: 1fr; } .media-preview.split { grid-template-columns: 1fr 1fr; } .photo-preview, .satellite-preview, .media-empty { min-width: 0; } .photo-preview { position: relative; height: 100%; min-height: 170px; overflow: hidden; background: var(--tile-placeholder); } .photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .satellite-preview { position: relative; width: 100%; height: 100%; min-height: 170px; overflow: hidden; background: var(--tile-placeholder); } .satellite-preview.large { height: 320px; margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; } .satellite-tiles { position: absolute; left: 50%; top: 50%; width: 768px; height: 768px; transform: translate(-50%, -50%); } .satellite-tiles img { position: absolute; width: 256px; height: 256px; object-fit: cover; } .map-pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 3px solid #ffffff; border-radius: 999px; background: var(--map-pin); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); } .map-pin::after { content: ""; position: absolute; left: 50%; bottom: -10px; border: 6px solid transparent; border-top-color: var(--map-pin); transform: translateX(-50%); } .satellite-source { position: absolute; right: 8px; bottom: 8px; border-radius: 999px; padding: 4px 7px; color: #ffffff; background: rgba(0, 0, 0, 0.58); font-size: 11px; } .media-label { position: absolute; right: 8px; bottom: 8px; border-radius: 999px; padding: 4px 7px; color: #ffffff; background: rgba(0, 0, 0, 0.58); font-size: 11px; } .photo-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; color: #ffffff; background: rgba(0, 0, 0, 0.45); font-size: 12px; } .photo-nav:hover { background: rgba(0, 0, 0, 0.7); } .photo-nav-prev { left: 6px; } .photo-nav-next { right: 6px; } .photo-carousel { position: relative; height: 320px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--tile-placeholder); } .photo-carousel .carousel-inner, .photo-carousel .carousel-item { height: 100%; } .photo-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; } .photo-carousel-count { left: 8px; right: auto; } .media-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); } .status-badge { position: absolute; top: 10px; left: 10px; border-radius: 999px; padding: 5px 9px; color: #ffffff; background: var(--blue); font-size: 12px; font-weight: 700; } .status-badge.unavailable { background: var(--warn); } .card-body { padding: 14px; } .card-text { cursor: pointer; } .card-title { font-size: 16px; font-weight: 650; line-height: 1.3; margin-bottom: 8px; } .price { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--accent-strong); } .meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 12px; color: var(--muted); font-size: 13px; } .meta span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; background: var(--bg); } .delta { color: var(--gold); font-weight: 700; } .detail-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .detail-locality { margin-bottom: 4px; } .share-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; } .share-create-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .share-create-row .share-ttl-select { flex: 0 0 auto; width: auto; } .share-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .share-links-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .share-url-input { flex: 1 1 220px; min-width: 0; font-size: 13px; } .share-expiry { font-size: 12px; white-space: nowrap; } .detail-quick-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .detail-quick-fact { font-size: 12px; font-weight: 600; } .duplicate-alert { margin-bottom: 14px; } .duplicate-alert ul { margin: 8px 0 0; padding-left: 20px; } .duplicate-alert li + li { margin-top: 4px; } .detail-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .detail-media:empty { display: none; } .photo-preview.large { height: 320px; border: 1px solid var(--line); border-radius: 10px; } .detail-media .satellite-preview.large { margin-top: 0; } .detail-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .detail-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .detail-metrics > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--panel); } .detail-metrics span { display: block; color: var(--muted); font-size: 13px; } .detail-metrics strong { display: block; margin-top: 4px; font-size: 18px; font-family: var(--font-display); } .tabs-block { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; } .crime-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .crime-grid > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; background: var(--panel); } .crime-grid span { display: block; color: var(--muted); font-size: 13px; } .crime-grid strong { display: block; margin-top: 4px; font-size: 16px; overflow-wrap: anywhere; } .parameters-table th { width: 45%; color: var(--muted); font-weight: 650; white-space: nowrap; } .parameters-table td { overflow-wrap: anywhere; } .parameters-context { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); } .parameters-context p { margin-bottom: 6px; } .ai-badge { display: inline-block; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle; } .info-icon { appearance: none; background: none; border: none; padding: 0; color: var(--muted); font-size: 12px; margin-left: 4px; cursor: pointer; vertical-align: middle; } .info-icon:hover, .info-icon:focus-visible { color: var(--accent); } .info-popup-row td { background: var(--accent-soft); border-radius: 8px; color: var(--ink); font-size: 13px; line-height: 1.5; padding: 10px 12px !important; white-space: normal; } .parameters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; } .ai-parameters-status { font-size: 13px; } .crime-source { margin: 10px 0 0; color: var(--muted); font-size: 13px; } .mapy-attribution { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; } .mapy-attribution img { display: block; } .location-map { height: 440px; border: 1px solid var(--line); border-radius: 10px; background: var(--tile-placeholder); } .location-map.overview-map { height: 70vh; min-height: 440px; } .location-map-hint { margin: 8px 0 0; font-size: 13px; } .overview-map-popup { min-width: 160px; } .overview-map-popup strong { display: block; margin-bottom: 2px; } .overview-map-popup button { margin-top: 8px; } /* Leaflet's default control chrome is light-only; retint it for dark mode so it doesn't look like a stray white box floating on a dark page. */ :root[data-bs-theme="dark"] .leaflet-bar a, :root[data-bs-theme="dark"] .leaflet-control-layers { background: var(--panel); color: var(--ink); border-color: var(--line); } :root[data-bs-theme="dark"] .leaflet-control-layers-toggle { filter: invert(1) brightness(1.4); } :root[data-bs-theme="dark"] .leaflet-bar a:hover { background: var(--bg); } :root[data-bs-theme="dark"] .leaflet-control-attribution { background: rgba(20, 24, 28, 0.75); color: var(--ink); } :root[data-bs-theme="dark"] .leaflet-control-attribution a { color: var(--accent); } .gps-map { position: relative; margin-top: 12px; } .gps-map-search { display: flex; gap: 6px; margin-bottom: 8px; } .gps-map-search input { flex: 1 1 auto; } .gps-map-search-status { display: block; margin-bottom: 8px; font-size: 13px; } .gps-map-viewport { position: relative; height: 320px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--tile-placeholder); cursor: grab; touch-action: none; } .gps-map-viewport.dragging { cursor: grabbing; } .gps-map-tiles { position: absolute; inset: 0; } .gps-map-tiles img { position: absolute; width: 256px; height: 256px; object-fit: cover; pointer-events: none; } .gps-map-pin { position: absolute; width: 22px; height: 22px; padding: 0; min-height: 0; border: 3px solid #ffffff; border-radius: 999px; background: var(--map-pin); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); transform: translate(-50%, -50%); cursor: grab; touch-action: none; } .gps-map-pin:active { cursor: grabbing; } .gps-map-controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 1; } .gps-map-controls .btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .gps-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); } .settings-label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; color: var(--muted); font-size: 13px; } .gps-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .gps-status { display: block; margin-top: 8px; font-size: 13px; } .events h3 { font-size: 16px; margin: 0 0 8px; } .description-text { margin: 0; color: var(--ink); line-height: 1.6; white-space: normal; } .ai-summary-block { margin-bottom: 16px; } .ai-summary-text { background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; line-height: 1.55; } .ai-summary-text .ai-badge { margin-right: 4px; } .notes-block { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); } .settings-section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; } .settings-section + .settings-section { margin-top: 18px; } .test-notification-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .test-notification-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .user-invite-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .user-invite-form input[type="email"] { flex: 1 1 220px; } .user-invite-status { display: block; margin-top: 6px; font-size: 13px; } .users-list { margin-top: 14px; display: flex; flex-direction: column; } .user-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .user-row-info { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; } .user-row-info .muted { font-size: 12px; } .user-role-select { width: auto; flex: 0 0 auto; } .user-row-placeholder { width: 32px; } .travel-points-list { margin: 14px 0 20px; display: flex; flex-direction: column; } .travel-point-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .travel-point-info { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; } .travel-point-info .muted { font-size: 12px; } .history-table { margin-top: 12px; } .price-chart-wrap { margin-bottom: 4px; } .price-chart { display: block; width: 100%; height: 200px; } .price-chart-area { fill: var(--accent); opacity: 0.12; stroke: none; } .price-chart-line { stroke: var(--accent-strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .price-chart-dot { fill: var(--panel); stroke: var(--accent-strong); stroke-width: 2; } .price-chart-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 6px; font-size: 13px; color: var(--muted); } .events { margin-top: 18px; } .event { padding: 10px 0; border-bottom: 1px solid var(--line); } .documents-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .documents-upload-form input[type="file"] { flex: 1 1 260px; } .documents-upload-status { font-size: 13px; } .documents-list { display: flex; flex-direction: column; } .document-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .document-open-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--bs-link-color, var(--accent-strong)); font: inherit; cursor: pointer; text-align: left; } .document-open-btn:hover { text-decoration: underline; } .document-meta { margin-left: auto; font-size: 12px; white-space: nowrap; } .document-viewer { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); } .document-viewer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .document-viewer-title { margin-right: auto; font-size: 13px; overflow-wrap: anywhere; } .document-viewer-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: var(--tile-placeholder); } @media (max-width: 720px) { .section-head, .list-head, .form-row { align-items: stretch; flex-direction: column; } .view-header { flex-direction: column; } .detail-links { justify-content: flex-start; } .detail-media { grid-template-columns: 1fr; } .detail-metrics { grid-template-columns: 1fr; } .crime-grid { grid-template-columns: 1fr; } .gps-map-viewport { height: 240px; } .location-map { height: 320px; } .document-viewer-frame { height: 50vh; } .document-meta { margin-left: 0; } .list-head input { max-width: none; } .parameters-table th { /* Desktop keeps labels on one line since the 45% column is wide enough - on a narrow screen that same rule forces long labels (e.g. "Radonový index podloží") to overflow their column instead of wrapping, squeezing or breaking the value column next to them. */ white-space: normal; width: 40%; } } /* --- Logs page --------------------------------------------------------- */ .logs-filters { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 16rem) minmax(0, 1fr); gap: 0.5rem; margin-bottom: 1rem; } .logs-events { border: 1px solid var(--bs-border-color); border-radius: 0.5rem; max-height: 60vh; overflow-y: auto; font-family: var(--bs-font-monospace); font-size: 0.8rem; } .logs-events > p { margin: 0; padding: 0.75rem; } .log-event { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 0.5rem; align-items: baseline; padding: 0.35rem 0.75rem; border-bottom: 1px solid var(--bs-border-color-translucent); } .log-event .badge { justify-self: start; } .log-event:last-child { border-bottom: 0; } .log-event-time, .log-event-source { color: var(--bs-secondary-color); white-space: nowrap; } .log-event-message { white-space: pre-wrap; overflow-wrap: anywhere; } .logs-section-title { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; } .logs-tail { max-height: 50vh; overflow: auto; padding: 0.75rem; border: 1px solid var(--bs-border-color); border-radius: 0.5rem; background: var(--bs-tertiary-bg); font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 640px) { .logs-filters { grid-template-columns: minmax(0, 1fr); } .log-event { grid-template-columns: auto minmax(0, 1fr); } .log-event-source { grid-column: 1 / -1; order: -1; } .log-event-message { grid-column: 1 / -1; } .logs-files-table .btn { min-height: 40px; } } /* --- Platform area: settings map, push toggle, public share page ------------------------ */ .settings-map { height: 320px; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .settings-home-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .settings-home-row .form-control { flex: 1 1 220px; } .settings-coords { font-size: 13px; font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .settings-map { height: 260px; } .user-invite-form .btn, .user-invite-form .form-select, .user-invite-form .form-control { min-height: 44px; } .user-role-select { min-height: 40px; } } /* Public share page (/share/{token}) - prefix sh- */ .sh-page { min-height: 100vh; background: var(--bg); color: var(--ink); } .sh-top { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .sh-logo { font-family: var(--font-display); font-weight: 700; font-size: 18px; } .sh-badge { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; } .sh-main { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; } .sh-state { text-align: center; color: var(--muted); padding: 60px 20px; font-size: 15px; } .sh-muted { color: var(--muted); } .sh-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } .sh-list-header { margin-bottom: 18px; } .sh-list-header h1 { font-size: 22px; margin: 0 0 4px; } .sh-list-header p { color: var(--muted); font-size: 14px; } .sh-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .sh-card-link { display: block; color: inherit; text-decoration: none; } .sh-photo { position: relative; aspect-ratio: 4 / 3; background: var(--tile-placeholder); overflow: hidden; } .sh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .sh-photo-nav { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: rgba(20, 20, 20, 0.5); color: #fff; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; font-size: 20px; line-height: 1; } .sh-prev { left: 8px; } .sh-next { right: 8px; } .sh-photo-count { position: absolute; right: 8px; bottom: 8px; background: rgba(20, 20, 20, 0.55); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 999px; } .sh-pad { padding: 16px; } .sh-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 6px; overflow-wrap: anywhere; } .sh-card h2.sh-title { font-size: 16px; margin: 0 0 4px; } .sh-price { font-weight: 600; font-size: 18px; color: var(--accent); } .sh-locality { color: var(--muted); font-size: 14px; margin: 4px 0 0; } .sh-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 8px; } .sh-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .sh-fact { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--muted); } .sh-fact.sh-warn { color: var(--warn); border-color: var(--warn); } .sh-open { display: inline-block; margin-top: 16px; color: var(--accent); font-weight: 600; text-decoration: none; } .sh-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 0; padding: 0 16px; } .sh-tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: 14px; padding: 10px 8px; min-height: 40px; cursor: pointer; } .sh-tab.sh-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .sh-panel { padding: 16px; } .sh-desc { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; } .sh-table-scroll { overflow-x: auto; } .sh-table { width: 100%; border-collapse: collapse; font-size: 14px; } .sh-table th, .sh-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; } .sh-table th { color: var(--muted); font-weight: 500; width: 45%; } .sh-gap { margin-top: 12px; } .sh-ai-badge { font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0 5px; margin-right: 6px; } .sh-ai-inline { margin: 0 0 0 4px; } .sh-ai-summary { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; line-height: 1.55; } .sh-info-icon { appearance: none; background: none; border: none; padding: 4px 6px; color: var(--muted); font-size: 13px; cursor: pointer; vertical-align: middle; min-width: 32px; min-height: 32px; } .sh-info-icon:hover, .sh-info-icon:focus-visible { color: var(--accent); } .sh-info-popup td { background: var(--accent-soft); border-radius: 8px; font-size: 13px; line-height: 1.5; padding: 10px 12px; } .sh-aerial { position: relative; width: 100%; height: 280px; overflow: hidden; border-radius: 10px; background: var(--tile-placeholder); margin-bottom: 12px; } .sh-aerial-tiles img { position: absolute; width: 256px; height: 256px; margin-left: -128px; margin-top: -128px; max-width: none; } .sh-aerial-pin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--map-pin); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .sh-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; } .sh-links a { color: var(--accent); font-size: 14px; } .sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .sh-grid div { display: flex; flex-direction: column; gap: 2px; } .sh-grid span { color: var(--muted); font-size: 12px; } .sh-source { color: var(--muted); font-size: 12px; margin-top: 12px; } .sh-doc { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .sh-doc a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; } .sh-chart-wrap { margin-bottom: 14px; } .sh-chart { width: 100%; height: 160px; display: block; } .sh-chart-area { fill: var(--accent-soft); } .sh-chart-line { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; } .sh-chart-dot { fill: var(--accent); } .sh-chart-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 12px; color: var(--muted); margin-top: 6px; } .sh-events { display: flex; flex-direction: column; gap: 10px; } .sh-event div { color: var(--muted); font-size: 12px; } @media (max-width: 560px) { .sh-main { padding: 16px 12px 40px; } .sh-pad, .sh-panel { padding: 12px; } .sh-tabs { padding: 0 8px; } .sh-table th { width: 40%; } .sh-aerial { height: 220px; } } /* ---- Archive area: phone layout of the dashboard / detail (touch targets, scrolling tab strip) ---- */ .tabs-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .tabs-nav .tab-button { white-space: nowrap; } @media (max-width: 640px) { .detail-toolbar .btn, .view-header-actions .btn, .tabs-nav .tab-button, .import-button, .notes-form .btn { min-height: 40px; } .view-header-actions { width: 100%; } } /* ===== Search area (classic search, AI profiles, swipe, favorites, stats) ============================== */ :root { --score-plus: #177a45; } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --score-plus: #4ade80; } } :root[data-bs-theme="dark"] { --score-plus: #4ade80; } .search-narrow { max-width: 720px; } .search-wide { max-width: 820px; } .search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--panel); font-size: 13px; } .chip-outline { background: transparent; color: var(--muted); } .sort-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; font-size: 13px; } .sort-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; } .sort-pill:hover { color: var(--ink); } .sort-pill.active { background: var(--accent); border-color: var(--accent); color: #ffffff; } .sync-banner { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 14px; } .sync-done { color: var(--score-plus); } .search-details { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; } .search-details > summary { padding: 12px 16px; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; } .search-details .table-responsive { border-top: 1px solid var(--line); } .classic-form .check-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; } .classic-form .check-item { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; } .classic-form .form-check-input { margin-top: 0; } .profile-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; } .profile-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .profile-row:hover { border-color: var(--accent); box-shadow: var(--shadow); } .profile-row-icon { width: 18px; flex: none; color: var(--muted); text-align: center; } .profile-row-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .profile-row-name { font-weight: 600; overflow-wrap: anywhere; } .profile-row-meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-row-date { flex: none; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; } .profile-answer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* Estate card (EstateCard + EstateMedia) */ .ec { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); } .ec-muted { opacity: 0.75; } .ec-heart { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--panel) 90%, transparent); color: var(--muted); backdrop-filter: blur(4px); } .ec-heart.on { color: var(--warn); } .ec-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 14px; } .ec-body p { margin: 0; } .ec-name { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .ec-price { color: var(--accent-strong); font-family: var(--font-display); font-size: 18px; font-weight: 700; } .ec-loc, .ec-meta { color: var(--muted); font-size: 12px; } .ec-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; } /* AI area: profile wizard chat (/app/profile) */ .profile-wizard { max-width: 720px; display: flex; flex-direction: column; gap: 14px; } .profile-wizard-progress { display: flex; align-items: center; gap: 12px; } .profile-wizard-progress .progress { height: 8px; } .profile-wizard-steps { font-size: 12px; font-variant-numeric: tabular-nums; } .profile-wizard-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 12px; } .profile-wizard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; } .ec-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--muted); font-size: 12px; text-decoration: none; } .ec-link:hover { color: var(--accent); text-decoration: underline; } .ec-actions .btn { min-height: 40px; } .ec-error { color: var(--warn); font-size: 12px; } .ec-why { border-top: 1px solid var(--line); } .ec-why > summary { padding: 10px 14px; min-height: 40px; color: var(--muted); font-size: 12px; cursor: pointer; } .score-badge { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 90%, transparent); font-size: 12px; font-weight: 700; backdrop-filter: blur(4px); } .score-plus { color: var(--score-plus); } .score-minus { color: var(--warn); } .score-list { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0; padding: 0; font-size: 12px; list-style: none; } .em { display: flex; flex-direction: column; } .em-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tile-placeholder); } .em-stage > img, .em-stage > iframe { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; } .em-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted); } .em-sat { position: absolute; inset: 0; overflow: hidden; } .em-sat .sat-thumb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .em-btn { position: absolute; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--ink); font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); } .em-map { right: 8px; bottom: 8px; } .em-close { top: 8px; right: 8px; width: 40px; padding: 0; justify-content: center; } .em-arrow { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.9); font-size: 22px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7)); } .em-prev { left: 0; } .em-next { right: 0; } .em-count { position: absolute; bottom: 8px; left: 50%; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--muted); font-size: 10px; transform: translateX(-50%); } .em-thumbs { display: flex; gap: 6px; padding: 10px 14px 0; overflow-x: auto; } .em-thumb { flex: none; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: none; width: 56px; height: 56px; } .em-thumb.active { outline: 2px solid var(--accent); outline-offset: -2px; } .em-thumb img { width: 56px; height: 56px; object-fit: cover; display: block; } .sat-thumb { position: relative; flex: none; overflow: hidden; background: var(--tile-placeholder); } .sat-thumb img { position: absolute; width: 256px; height: 256px; max-width: none; max-height: none; } .sat-thumb-label { position: absolute; right: 2px; bottom: 2px; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--muted); font-size: 9px; line-height: 1.4; pointer-events: none; } /* Swipe deck */ .swipe-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; } .swipe-stack { position: relative; width: 100%; max-width: 384px; min-height: 500px; } .swipe-under { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 60%, transparent); transform: scale(0.95); } .swipe-card { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); touch-action: none; user-select: none; } .swipe-card .em-thumbs, .swipe-card .em-btn, .swipe-card .em-arrow { touch-action: manipulation; } .swipe-enter { animation: swipe-in 0.22s ease-out backwards; } @keyframes swipe-in { from { opacity: 0; transform: scale(0.94); } } .swipe-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 16px; } .swipe-body p { margin: 0; } .swipe-stamp { position: absolute; top: 16px; z-index: 2; padding: 2px 12px; border: 4px solid; border-radius: 10px; background: color-mix(in srgb, var(--panel) 80%, transparent); font-size: 18px; font-weight: 800; letter-spacing: 0.04em; opacity: 0; text-transform: uppercase; pointer-events: none; } .swipe-like { left: 16px; border-color: var(--score-plus); color: var(--score-plus); } .swipe-dislike { right: 16px; border-color: var(--warn); color: var(--warn); } .swipe-buttons { display: flex; gap: 28px; } .swipe-btn { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 2px solid; border-radius: 50%; background: var(--panel); font-size: 24px; transition: transform 0.12s ease; } .swipe-btn:hover:not(:disabled) { transform: scale(1.06); } .swipe-btn:disabled { opacity: 0.4; } .swipe-btn-no { border-color: var(--warn); color: var(--warn); } .swipe-btn-yes { border-color: var(--score-plus); color: var(--score-plus); } /* Statistics bar chart */ .bar-chart { display: flex; flex-direction: column; gap: 6px; } .bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .bar-label { flex: none; width: 104px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; } .bar-track { flex: 1 1 auto; min-width: 0; height: 16px; overflow: hidden; border-radius: 3px; background: var(--line); } .bar-fill { height: 100%; border-radius: 3px; background: var(--accent); } .bar-value { flex: none; width: 84px; font-weight: 600; text-align: right; } .stat-num { display: block; font-family: var(--font-display); font-size: 22px; } @media (min-width: 641px) { .bar-label { width: 150px; } } @media (max-width: 640px) { .view-header-actions .btn { flex: 1 1 auto; } .list-head { flex-direction: column; align-items: stretch; } .list-head input { max-width: none; } .photo-nav { min-width: 40px; min-height: 40px; } .profile-row-date { display: none; } } /* Context area: phone touch targets (>= 40 px) for the location, travel point and parameters UI. */ @media (max-width: 720px) { .travel-point-row .btn, .gps-form-actions .btn, .gps-map-search .btn, .gps-map-search input, .travel-point-form .form-control { min-height: 40px; } .travel-point-row .btn-icon { min-width: 40px; } .parameters-table .info-icon { /* grow the tap area without growing the row */ padding: 12px; margin: -12px -6px -12px 0; } } .profile-wizard-badge { background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; padding: 2px 10px; font-size: 12px; } .profile-chat-log { height: min(360px, 50vh); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; } .profile-chat-row { display: flex; } .profile-chat-row.user { justify-content: flex-end; } .profile-chat-bubble { max-width: 85%; padding: 8px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; background: var(--accent-soft); color: var(--ink); border-bottom-left-radius: 4px; } .profile-chat-row.user .profile-chat-bubble { background: var(--accent); color: #ffffff; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; } .profile-chat-thinking { font-size: 13px; display: flex; align-items: center; gap: 8px; } .profile-wizard-input { display: flex; flex-direction: column; gap: 10px; } .profile-wizard-options { display: flex; flex-wrap: wrap; gap: 8px; } .profile-wizard-options .btn { border-radius: 999px; min-height: 40px; } .profile-wizard-helper { margin: 0; font-size: 12px; } .profile-wizard-form { display: flex; gap: 8px; } .profile-wizard-form .btn, .profile-wizard-actions .btn { min-height: 40px; min-width: 44px; } .profile-wizard-actions { display: flex; justify-content: flex-end; } .profile-wizard-error { margin: 0; font-size: 13px; } @media (max-width: 575.98px) { .profile-wizard-card { padding: 10px; } .profile-chat-bubble { max-width: 92%; } } /* Blazor's unhandled-error bar: hidden until the framework shows it (the rules came with the project template's layout stylesheet, which the merged layout does not have). Themed with the app tokens. */ #blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; padding: 0.6rem 2.5rem 0.7rem 1.25rem; background: var(--panel); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.85rem; top: 0.55rem; } /* ---- Tasks page (Úlohy na pozadí) and the sidebar indicator ---- */ .task-section { margin-bottom: 24px; } .task-heading { margin: 0 0 10px; font-size: 17px; font-weight: 700; } .task-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; } .task-title, .task-scope { overflow-wrap: anywhere; } .task-progress { height: 8px; margin-top: 10px; } .task-filters { display: flex; flex-wrap: wrap; gap: 8px; } .task-filters .form-select { min-height: 40px; width: auto; max-width: 100%; } .task-table td, .task-table th { vertical-align: top; } .task-error { margin: 6px 0 0; max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--warn); } .task-error-details summary { cursor: pointer; color: var(--warn); font-size: 13px; } .task-indicator { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 700; } .task-indicator .spinner-border { width: 12px; height: 12px; border-width: 2px; } @media (max-width: 575.98px) { .task-filters, .task-filters .form-select { width: 100%; } }