/* ═══════════════════════════════════════════════════════════════════════ BankPilot - "Klar" redesign (Direction 1a): fintech clean, white cards, refined indigo accent, green income / red expense. Loaded after style.css (Dash serves assets alphabetically), so the rules here win ties. Scope: the /app page (.bs-app). The theme follows the existing mechanism (data-bs-theme on : dark is the default, light is the override) - the k-* tokens below map the spec's light/dark palettes onto it, and the legacy --bs-* tokens are re-pointed for the app page so every existing component inherits the new palette and font. ═══════════════════════════════════════════════════════════════════════ */ /* ── Tokens ── */ :root, [data-bs-theme="dark"] { --k-bg: #0D0F13; --k-card: #16181D; --k-tile: #1C1F26; --k-border: #262A32; --k-border-soft: #22252C; --k-ink: #F2F3F5; --k-ink-sub: #9AA1AB; --k-ink-faint: #787F8A; --k-ink-chip: #B7BDC7; --k-accent: #7D8FFF; --k-accent-h: #98A6FF; --k-accent-bg: rgba(125,143,255,.10); --k-ok: #4ADE9C; --k-ok-bg: #123626; --k-ok-dot: #3BBD87; --k-ok-dot-strong: #1F8F63; --k-skel-base: #262A32; --k-skel-hi: rgba(255,255,255,.07); --k-warn: #E8A34C; --k-warn-bg: #3A2A14; --k-warn-dot: #E8A34C; --k-warn-row: #1D1A15; --k-due-dot: #8A6A35; --k-bad: #F07B72; --k-bad-bg: #3A1B19; --k-inverse: #7D8FFF; --k-inverse-ink: #0D0F13; --k-inverse-sub: rgba(13,15,19,.72); --k-hover: #1A1D24; --k-cell-empty: #2A2E36; --k-thumb-shadow: 0 1px 3px rgba(0,0,0,.45); --k-seg-bg: #262A32; --k-seg-thumb: #343946; --k-seg-ink: #F2F3F5; --k-menu-shadow: 0 10px 28px rgba(0,0,0,.45); --k-income: #3BBD87; --k-expense: #F07B72; --k-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; } [data-bs-theme="light"] { --k-bg: #F5F6F8; --k-card: #FFFFFF; --k-tile: #F7F8FA; --k-border: #E6E8EC; --k-border-soft: #F0F1F4; --k-ink: #14161A; --k-ink-sub: #6A7079; --k-ink-faint: #9AA1AB; --k-ink-chip: #565D68; --k-accent: #3652E1; --k-accent-h: #2A43C9; --k-accent-bg: #F3F5FE; --k-ok: #12855F; --k-ok-bg: #E4F3EC; --k-ok-dot: #2AA274; --k-ok-dot-strong: #106B4B; --k-skel-base: #E6E8EE; --k-skel-hi: rgba(255,255,255,.9); --k-warn: #B25E09; --k-warn-bg: #FCEEDC; --k-warn-dot: #D98E2B; --k-warn-row: #FEF9F1; --k-due-dot: #D9B98A; --k-bad: #C2352B; --k-bad-bg: #FBE7E5; --k-inverse: #14161A; --k-inverse-ink: #FFFFFF; --k-inverse-sub: #9AA1AB; --k-hover: #FAFBFC; --k-cell-empty: transparent; --k-thumb-shadow: 0 1px 3px rgba(20,25,60,.14); --k-seg-bg: #E9EBF3; --k-seg-thumb: #FFFFFF; --k-seg-ink: #3A44C4; --k-menu-shadow: 0 10px 28px rgba(20,22,26,.12); --k-income: #16995f; --k-expense: #e0524b; } /* ── Re-point the legacy app tokens on the /app page ── The theme scripts mirror data-bs-theme onto .bs-app and .bss-standalone too; on those elements the global [data-bs-theme] token blocks would win over the inherited remap and paint the legacy navy page colour next to the Klar background. The second selector re-applies the remap there. */ body:has(.bs-app), body:has(.bs-app) [data-bs-theme] { --bs-navy: var(--k-bg); --bs-navy-light: var(--k-tile); --bs-navy-mid: var(--k-tile); --bs-navy-card: var(--k-card); --bs-surface: var(--k-tile); --bs-border: var(--k-border); --bs-border-l: var(--k-border); --bs-accent: var(--k-accent); --bs-accent-h: var(--k-accent-h); --bs-text-1: var(--k-ink); --bs-text-2: var(--k-ink-sub); --bs-text-3: var(--k-ink-faint); --bs-ok: var(--k-ok); --bs-warn: var(--k-warn); --bs-danger: var(--k-bad); --bs-font: var(--k-font); --bs-shadow: none; --bs-shadow-lg: 0 8px 32px rgba(0,0,0,.18); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html:not([data-bs-theme="light"]) body:has(.bs-app) .bss-navbar { background: rgba(13,15,19,.92); } html:not([data-bs-theme="light"]) body:has(.bs-app) .bss-footer { background: rgba(13,15,19,.6); } .bs-app, .bs-app .bs-btn, .bs-app button, .bs-app input, .bs-app select { font-family: var(--k-font); } .bs-app { color: var(--k-ink); background: var(--k-bg); font-variant-numeric: tabular-nums; } .bs-app :focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; } /* ── Card shell ── */ .bs-app .bs-card { background: var(--k-card); border: 1px solid var(--k-border); border-radius: 14px; box-shadow: none; overflow: hidden; } .bs-app .bs-card:hover { border-color: var(--k-border); } .bs-app .bs-card-header { padding: 20px 24px; background: transparent; border-bottom: 1px solid var(--k-border-soft); gap: 12px; } .bs-app .bs-card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--k-ink); gap: 8px; } .bs-app .bs-card-body { padding: 18px 24px; } .k-card-heading { display: flex; flex-direction: column; min-width: 0; } .k-card-sub { font-size: 12.5px; color: var(--k-ink-sub); margin-top: 3px; font-variant-numeric: tabular-nums; } .k-header-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; width: auto; flex: 0 0 auto; } .bs-app .k-header-controls > * { flex: 0 0 auto; } .k-header-link { text-decoration: none; } .k-help { margin: 0; padding: 14px 24px 0; font-size: 12.5px; color: var(--k-ink-sub); line-height: 1.45; } .k-empty { margin: 0; padding: 28px 24px; text-align: center; font-size: 13px; color: var(--k-ink-sub); } /* ── Pill controls (select, buttons) ── */ .k-pill-btn, .k-select { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--k-border); border-radius: 9px; background: var(--k-card); color: var(--k-ink); font: 500 13px/1 var(--k-font); padding: 0 12px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; white-space: nowrap; } .k-pill-btn:hover { border-color: var(--k-ink-faint); } .k-pill-btn-accent { color: var(--k-accent); } .k-pill-btn-accent:hover { background: var(--k-accent-bg); border-color: var(--k-border); color: var(--k-accent); } .k-select { position: relative; padding: 0; } .k-select::after { content: "\25BE"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--k-ink-faint); font-size: 11px; pointer-events: none; } .bs-app .k-select .k-select-input, .bs-app .k-select .bs-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 32px !important; min-height: 32px; border: none !important; box-shadow: none !important; background: transparent !important; background-image: none !important; color: var(--k-ink) !important; font: 500 13px/1 var(--k-font); padding: 0 28px 0 12px !important; border-radius: 9px !important; cursor: pointer; width: auto; } .bs-app .k-select:focus-within { border-color: var(--k-accent); } .bs-app .k-select .bs-select:focus { outline: none; } .bs-app .k-select option { background: var(--k-card); color: var(--k-ink); } .k-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--k-border); border-radius: 8px; background: transparent; color: var(--k-ink-faint); cursor: pointer; transition: color .15s, border-color .15s, background .15s; padding: 0; line-height: 1; } .k-icon-btn:hover { color: var(--k-ink); border-color: var(--k-ink-faint); } /* ── Zahlungsmonitor: stats ── */ .k-monitor-body { padding: 0 0 6px; } .k-monitor-body > .bs-monitor-reconnect { margin: 14px 24px 0 !important; } .k-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 24px; } .k-stat { background: var(--k-tile); border-radius: 10px; padding: 14px 16px; min-width: 0; } .k-stat-value { font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--k-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; } .k-stat-ok { color: var(--k-ok); } .k-stat-warn { color: var(--k-warn); } .k-stat-bad { color: var(--k-bad); } .k-stat-label { margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--k-ink-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-stat-inverse { background: var(--k-inverse); } .k-stat-inverse .k-stat-value { color: var(--k-inverse-ink); } .k-stat-inverse .k-stat-label { color: var(--k-inverse-sub); } /* ── Zahlungsmonitor: rules list ── */ .k-rules-head { display: grid; grid-template-columns: minmax(0, 1fr) 168px 130px 120px 36px; gap: 16px; padding: 8px 24px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-ink-faint); } .k-right { text-align: right; } .k-rule-row { display: flex; align-items: center; padding: 13px 24px; border-top: 1px solid var(--k-border-soft); transition: background .15s; } .k-rule-row:hover { background: var(--k-hover); } .k-rule-row-overdue, .k-rule-row-overdue:hover { background: var(--k-warn-row); } .k-rule-target { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 168px 130px 120px; gap: 16px; align-items: center; cursor: pointer; } .k-rule-menu { flex: 0 0 auto; width: 36px; margin-left: 16px; display: flex; justify-content: flex-end; } .k-rule-id { min-width: 0; } .k-rule-name { font-size: 14.5px; font-weight: 600; color: var(--k-ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-rule-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 5px; min-width: 0; } .k-chip { display: inline-block; font-size: 11px; font-weight: 500; line-height: 1.5; padding: 2px 7px; border-radius: 5px; background: var(--k-border-soft); color: var(--k-ink-chip); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .k-chip-income { background: var(--k-ok-bg); color: var(--k-ok); } .k-rule-last { font-size: 11.5px; color: var(--k-ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; } .k-rule-since { font-size: 11.5px; font-weight: 500; color: var(--k-warn); white-space: nowrap; } /* month match grid */ .k-rule-months { min-width: 0; } .k-mgrid { display: flex; flex-wrap: wrap; gap: 3px; } .k-mcell { width: 9px; height: 9px; border-radius: 2px; box-sizing: border-box; flex: 0 0 auto; } .k-mcell-ok { background: var(--k-ok-dot); } .k-mcell-ok2 { background: var(--k-ok-dot-strong); } .k-mcell-dev { background: var(--k-warn-dot); } .k-mcell-missing { border: 1px dashed var(--k-border); background: var(--k-cell-empty); } .k-mcell-due { border: 1px dashed var(--k-due-dot); background: var(--k-cell-empty); } .k-mcell-inactive { border: 1px dashed var(--k-border-soft); background: transparent; opacity: .7; } [data-bs-theme="dark"] .k-mcell-missing, html:not([data-bs-theme="light"]) .k-mcell-missing { border-color: transparent; } .k-mcount { margin-top: 5px; font-size: 11.5px; color: var(--k-ink-sub); white-space: nowrap; font-variant-numeric: tabular-nums; } .k-mcount-n { font-weight: 700; color: var(--k-ink); } .k-mcount-dev { color: var(--k-warn); font-weight: 600; } .k-rule-sum { text-align: right; font-size: 14.5px; font-weight: 600; color: var(--k-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .k-rule-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .k-badge { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.35; padding: 4px 10px; border-radius: 99px; white-space: nowrap; } .k-badge-ok { color: var(--k-ok); background: var(--k-ok-bg); } .k-badge-warn { color: var(--k-warn); background: var(--k-warn-bg); } .k-badge-bad { color: var(--k-bad); background: var(--k-bad-bg); } /* row menu */ .k-menu { position: relative; } .k-menu > summary { list-style: none; } .k-menu > summary::-webkit-details-marker { display: none; } .k-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--k-border); border-radius: 8px; color: var(--k-ink-faint); background: transparent; font-size: 16px; line-height: 1; cursor: pointer; user-select: none; transition: color .15s, border-color .15s, background .15s; } .k-menu-btn:hover, .k-menu[open] > .k-menu-btn { color: var(--k-ink); border-color: var(--k-ink-faint); background: var(--k-card); } .k-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; width: max-content; max-width: min(320px, 90vw); padding: 6px; background: var(--k-card); border: 1px solid var(--k-border); border-radius: 10px; box-shadow: var(--k-menu-shadow); z-index: 1200; } .k-menu-panel .k-menu-item, .k-menu-panel .bs-notify-bell-btn { display: flex !important; align-items: center; justify-content: space-between !important; gap: 12px; box-sizing: border-box; width: 100% !important; min-width: 0; height: auto !important; margin: 0 !important; padding: 8px 10px !important; border: none !important; border-radius: 7px !important; background: transparent; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--k-ink) !important; opacity: 1 !important; cursor: pointer; white-space: nowrap; text-align: left; flex: 0 0 auto; } .k-menu-panel .k-menu-item:hover, .k-menu-panel .bs-notify-bell-btn:hover, .k-menu-panel .bs-notify-bell-btn.active:hover { background: var(--k-tile) !important; } .k-menu-panel .bs-notify-bell-btn.active { background: transparent; } .k-menu-item-label { flex: 1 1 auto; min-width: 0; } .k-menu-state { flex: 0 0 auto; } /* On/Off pill: text comes from data-on / data-off on the state span, so the notify toggle callback only needs to flip the item's .active class. */ .k-menu-state::after { content: attr(data-off); display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--k-border-soft); color: var(--k-ink-sub); } .k-menu-item.active .k-menu-state::after { content: attr(data-on); background: var(--k-ok-bg); color: var(--k-ok); } .k-rules-more { display: none; width: 100%; padding: 12px 24px; border: none; border-top: 1px solid var(--k-border-soft); background: transparent; color: var(--k-accent); font: 600 13px var(--k-font); cursor: pointer; } .k-rules-more:hover { background: var(--k-hover); } /* ── Transaktionen: header + filters ── */ .k-tx-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; } .k-collapse-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: none; background: transparent; color: var(--k-ink); cursor: pointer; text-align: left; width: auto; } .k-collapse-toggle:hover { background: transparent; } .k-collapse-toggle .bs-transactions-chevron { color: var(--k-ink-faint); font-size: 13px; line-height: 1; } .k-tx-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; min-width: 0; } .k-tx-filters.is-collapsed { display: none; } .k-filter { min-width: 0; } .k-filter .bs-multiselect { width: auto; } .bs-app .k-tx-filters .bs-ms-toggle { height: 32px; padding: 0 11px; border: 1px solid var(--k-border); border-radius: 9px; background: var(--k-card); box-shadow: none; gap: 6px; } .bs-app .k-tx-filters .bs-ms-toggle:hover { border-color: var(--k-ink-faint); } .bs-app .k-tx-filters .bs-multiselect[open] .bs-ms-toggle { border-color: var(--k-accent); box-shadow: none; } .bs-app .k-tx-filters .bs-ms-text { font-size: 12.5px; font-weight: 500; color: var(--k-ink); } .bs-app .k-tx-filters .bs-ms-chevron { font-size: 9px; color: var(--k-ink-faint); margin-left: 0; } .bs-app .k-tx-filters .bs-ms-panel { background: var(--k-card); border-color: var(--k-border); border-radius: 10px; box-shadow: var(--k-menu-shadow); right: 0; left: auto; } .bs-app .k-tx-filters .bs-ms-actions { border-bottom-color: var(--k-border-soft); } .bs-app .k-tx-filters .bs-ms-action { color: var(--k-accent); } .bs-app .k-tx-filters .bs-ms-checklist label, .bs-app .k-tx-filters .bs-ms-label { color: var(--k-ink); font-size: 12.5px; } .bs-app .k-tx-filters .bs-ms-checklist label:hover, .bs-app .k-tx-filters .bs-ms-label:hover { background: var(--k-tile); } .bs-app .k-tx-filters .bs-ms-checklist input[type="checkbox"], .bs-app .k-tx-filters .bs-ms-checkbox { background: var(--k-card); border-color: var(--k-border); } .bs-app .k-tx-filters .bs-ms-checklist input[type="checkbox"]:checked, .bs-app .k-tx-filters .bs-ms-checkbox:checked { background: var(--k-accent); border-color: var(--k-accent); } .bs-app .k-tx-filters .bs-ms-checklist label:has(input[type="checkbox"]:checked), .bs-app .k-tx-filters .bs-ms-label:has(input[type="checkbox"]:checked) { background: var(--k-accent-bg); color: var(--k-ink); } /* date range as one bordered pill */ .bs-app .k-tx-filters .DateRangePicker { display: block; } .bs-app .k-tx-filters .DateRangePickerInput { display: inline-flex; align-items: center; height: 32px; padding: 0 6px; border: 1px solid var(--k-border) !important; border-radius: 9px; background: var(--k-card) !important; box-shadow: none; } .bs-app .k-tx-filters .DateRangePickerInput:hover { border-color: var(--k-ink-faint) !important; } .bs-app .k-tx-filters .DateRangePickerInput:focus-within { border-color: var(--k-accent) !important; } .bs-app .k-tx-filters .DateInput { width: 66px; background: transparent; } .bs-app .k-tx-filters .DateInput_input { height: 30px !important; padding: 0 4px !important; border: none !important; background: transparent !important; color: var(--k-ink) !important; font: 500 12.5px var(--k-font) !important; text-align: center; font-variant-numeric: tabular-nums; } .bs-app .k-tx-filters .DateInput_input__focused { border: none !important; } .bs-app .k-tx-filters .DateRangePickerInput_arrow { padding: 0 2px; display: inline-flex; } .bs-app .k-tx-filters .DateRangePickerInput_arrow_svg { width: 14px; height: 14px; fill: var(--k-ink-faint); } .bs-app .k-tx-filters .DateInput_fang { display: none; } .bs-app .k-tx-filters .DateRangePicker_picker { z-index: 1300; } .bs-app .DayPicker, .bs-app .CalendarMonth, .bs-app .CalendarMonthGrid, .bs-app .DayPicker_transitionContainer { background: var(--k-card) !important; } .bs-app .DayPicker__withBorder { border-radius: 12px; box-shadow: var(--k-menu-shadow); border: 1px solid var(--k-border); } .bs-app .CalendarDay__default { border-color: var(--k-border-soft) !important; } /* search */ .bs-app .k-search { height: 32px; width: 150px; padding: 0 11px; border: 1px solid var(--k-border); border-radius: 9px; background: var(--k-card); color: var(--k-ink); font: 500 12.5px var(--k-font); outline: none; transition: border-color .15s; } .bs-app .k-search::placeholder { color: var(--k-ink-faint); font-weight: 400; } .bs-app .k-search:hover { border-color: var(--k-ink-faint); } .bs-app .k-search:focus { border-color: var(--k-accent); box-shadow: none; } /* ── Transaktionen: body ── */ .bs-app .k-tx-collapse-body { padding: 0; } .k-tx-feedback:empty { display: none; } .k-tx-feedback { padding: 12px 24px 0; } .k-tx-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; } .k-tx-table { min-width: 0; padding-bottom: 8px; } .k-tx-body:has(#bs-tx-chart-col.bs-chart-expanded) { grid-template-columns: minmax(0, 1fr); } .bs-app .bs-card-body:has(#transactions-container .bs-tx-empty-state) .k-tx-body { grid-template-columns: minmax(0, 1fr); } .k-tx-empty { margin: 0; padding: 32px 24px; text-align: center; font-size: 13px; color: var(--k-ink-sub); } .k-tx-showing { margin: 0; padding: 12px 24px 4px; text-align: center; font-size: 11.5px; color: var(--k-ink-faint); } .bs-app .tx-scroll-wrap { padding-right: 0; } .bs-app .bs-tx-pagination { margin: 8px 24px 4px; } .bs-app .bs-tx-pagination .page-link { background: var(--k-card); border-color: var(--k-border); color: var(--k-ink-sub); font-size: 12px; font-family: var(--k-font); } .bs-app .bs-tx-pagination .page-link:hover { background: var(--k-tile); color: var(--k-ink); border-color: var(--k-border); } .bs-app .bs-tx-pagination .page-item.active .page-link { background: var(--k-accent); border-color: var(--k-accent); color: #fff; } .bs-app .bs-tx-pagination .page-item.disabled .page-link { background: var(--k-card); color: var(--k-ink-faint); border-color: var(--k-border-soft); } .bs-app #tx-loading .dash-spinner { transform: scale(.75); } #transactions-container .alert { margin: 12px 24px 0; border-radius: 10px; font-family: var(--k-font); } /* transaction rows */ .k-tx-row { display: flex; align-items: center; gap: 14px; padding: 12px 24px; border-bottom: 1px solid var(--k-border-soft); transition: background .15s; } .k-tx-row:hover { background: var(--k-hover); } .k-tx-row:last-child { border-bottom: none; } .k-tx-row-excluded .k-tx-name, .k-tx-row-excluded .k-tx-amount { opacity: .55; text-decoration: line-through; } .k-tx-date { flex: 0 0 74px; font-size: 12px; color: var(--k-ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .k-tx-main { flex: 1 1 auto; min-width: 0; } .k-tx-name { font-size: 13.5px; font-weight: 600; color: var(--k-ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-tx-memo { margin-top: 1px; font-size: 11.5px; color: var(--k-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-tx-cat { flex: 0 1 auto; min-width: 0; max-width: 200px; display: flex; justify-content: flex-end; } .k-tx-cat .k-chip:empty { display: none; } .bs-app .bs-tag.k-chip { background: var(--k-border-soft); color: var(--k-ink-chip); border-radius: 5px; font-size: 11px; font-weight: 500; padding: 2px 7px; transition: background .15s, box-shadow .15s; } .bs-app .bs-tag.k-chip.k-chip-income { background: var(--k-ok-bg); color: var(--k-ok); } .bs-app .bs-tag.k-chip.bs-tag-clickable:hover { box-shadow: 0 0 0 2px var(--k-accent-bg), 0 0 0 3px var(--k-accent); background: var(--k-border-soft); } .k-tx-amount { flex: 0 0 96px; text-align: right; font-size: 13.5px; font-weight: 600; color: var(--k-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .k-tx-amount-in { color: var(--k-ok); font-weight: 700; } .bs-app .k-tx-action { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px; border-color: transparent; color: var(--k-ink-faint); background: transparent; opacity: 0; transition: opacity .15s, color .15s, border-color .15s, background .15s; } .k-tx-row:hover .k-tx-action, .bs-app .k-tx-action:focus-visible, .bs-app .k-tx-action.bs-icon-btn-restore { opacity: 1; } .bs-app .k-tx-action:hover { color: var(--k-ink); border-color: var(--k-border); background: var(--k-card); } .bs-app .k-tx-action.bs-icon-btn-restore { color: var(--k-ok); } .bs-app .k-tx-action.bs-icon-btn-restore:hover { border-color: var(--k-ok); background: var(--k-ok-bg); } .bs-app .tx-cat-select { font-family: var(--k-font); font-size: 12px; border-radius: 7px; background: var(--k-card); color: var(--k-ink); border: 1px solid var(--k-accent); } @media (hover: none) { .bs-app .k-tx-action { opacity: 1; } } /* ── Chart panel ── */ .k-chart-panel { border-left: 1px solid var(--k-border-soft); padding: 16px 24px 18px; min-width: 0; } .k-chart-toolbar { display: grid; /* Row 1 is the toggle plus the small maximize button; the caption line (source count + income/expense legend) gets its own full-width row. It used to share the button's column, which made that column as wide as the legend and squeezed the toggle until its options overflowed. */ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seg btn" "caption caption"; align-items: center; gap: 8px 10px; margin-bottom: 14px; } .k-chart-caption { grid-area: caption; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .k-chart-caption:empty { display: none; } .k-chart-meta { grid-area: meta; font-size: 12px; color: var(--k-ink-faint); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-legend-io { grid-area: legend; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; font-size: 12px; color: var(--k-ink-sub); white-space: nowrap; justify-self: end; } .k-legend-io > span:not(.k-dot) + .k-dot { margin-left: 8px; } .k-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .k-dot-in { background: var(--k-income); } .k-dot-out { background: var(--k-expense); } .k-chart-max { grid-area: btn; width: 28px; height: 28px; justify-self: end; } .k-chart-max i { font-size: 12px; } /* segmented control (dbc.RadioItems: .form-check > input + label) */ .bs-app .k-seg { grid-area: seg; display: flex; align-items: stretch; background: var(--k-seg-bg); border-radius: 9px; padding: 3px; gap: 2px; justify-self: stretch; /* Equal halves that fill the toolbar cell: with nowrap labels and a fixed min-width the options used to overflow the grey pill on narrow panels (visible as the active thumb sticking out on "Zeitverlauf"). */ width: 100%; max-width: 100%; box-sizing: border-box; line-height: 1; } .bs-app .k-seg .form-check, .bs-app .k-seg .form-check-inline { display: flex !important; flex: 1 1 0; min-width: 0; margin: 0 !important; padding: 0 !important; min-height: 0 !important; position: relative; float: none; } .bs-app .k-seg .form-check-input, .bs-app .k-seg .k-seg-input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; float: none !important; pointer-events: none; } .bs-app .k-seg .form-check-label, .bs-app .k-seg .k-seg-btn { display: inline-flex; align-items: center; justify-content: center; height: 28px; width: 100%; min-width: 0; padding: 0 12px; margin: 0; border-radius: 7px; font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--k-ink-sub); background: transparent; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; transition: background .15s, color .15s, box-shadow .15s; } .bs-app .k-seg .k-seg-btn:hover { color: var(--k-ink); } .bs-app .k-seg .k-seg-btn.k-seg-active, .bs-app .k-seg .form-check-input:checked + .form-check-label { background: var(--k-seg-thumb); color: var(--k-seg-ink); box-shadow: var(--k-thumb-shadow); } .bs-app .k-seg .k-seg-input:focus-visible + .k-seg-btn { outline: 2px solid var(--k-accent); outline-offset: 1px; } .bs-app .bs-chart-scroll { height: auto; max-height: 420px; overflow-x: hidden; overflow-y: auto; padding-right: 2px; } /* Desktop: the panel matches the table's height and scrolls inside it (the 0/100% pair keeps the panel from stretching the grid row itself). */ @media (min-width: 992px) { .k-tx-body { min-height: 320px; } #bs-tx-chart-col.k-chart-panel:not(.bs-chart-expanded) { display: flex; flex-direction: column; height: 0; min-height: 100%; box-sizing: border-box; } #bs-tx-chart-col.k-chart-panel:not(.bs-chart-expanded) .k-chart-toolbar { flex: 0 0 auto; } #bs-tx-chart-col.k-chart-panel:not(.bs-chart-expanded) .bs-chart-scroll { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; overflow-y: auto; scrollbar-width: thin; } #bs-tx-chart-col.k-chart-panel:not(.bs-chart-expanded) .k-tl-grid { padding-bottom: 4px; } } .k-chart-body { min-width: 0; } .k-chart-empty { margin: 0; padding: 28px 8px; text-align: center; font-size: 12.5px; color: var(--k-ink-sub); } /* donut + legend */ .k-donut-wrap { display: flex; align-items: center; gap: 16px; } .k-donut-graph { flex: 0 0 auto; } .k-legend { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .k-legend-row { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; } .k-swatch { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 2px; } .k-legend-label { flex: 1 1 auto; min-width: 0; color: var(--k-ink-chip); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; } .k-legend-amt { display: none; color: var(--k-ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .k-legend-pct { flex: 0 0 auto; font-weight: 700; color: var(--k-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .k-donut-wrap-lg { gap: 32px; padding: 8px 0 8px 8px; } .k-donut-wrap-lg .k-legend { max-width: 420px; gap: 12px; } .k-donut-wrap-lg .k-legend-row { font-size: 13px; } .k-donut-wrap-lg .k-legend-amt { display: inline; } .k-donut-wrap-lg .k-legend-pct { min-width: 56px; text-align: right; } /* timeline cards */ .k-tl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .k-tl-grid-lg { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .k-tl-card { background: var(--k-card); border: 1px solid var(--k-border); border-radius: 14px; padding: 14px 16px 10px; box-shadow: 0 1px 2px rgba(18,24,48,.04); min-width: 0; } .k-tl-title { font-size: 13.5px; font-weight: 600; color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .k-tl-graph { width: 100%; height: 150px; } /* Payment bars are 7px scatter stems (see _build_timeline_card); the round cap is what rounds both ends - same stroke, same colour, no marker dots. */ .bs-app .k-tl-graph .js-plotly-plot .scatterlayer .js-line { stroke-linecap: round !important; stroke-linejoin: round !important; } /* expanded state (takes the table's place) */ #bs-tx-chart-col.bs-chart-expanded { border-left: none; padding: 16px 24px 24px; } #bs-tx-chart-col.bs-chart-expanded .k-chart-toolbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; grid-template-areas: "meta seg legend btn"; margin-bottom: 18px; } #bs-tx-chart-col.bs-chart-expanded .k-chart-caption { display: contents; } #bs-tx-chart-col.bs-chart-expanded .k-legend-io { margin-left: 0; } #bs-tx-chart-col.bs-chart-expanded .k-seg { justify-self: center; } #bs-tx-chart-col.bs-chart-expanded .k-seg { border-radius: 11px; width: max-content; max-width: 100%; justify-self: center; } #bs-tx-chart-col.bs-chart-expanded .k-seg .form-check { flex: 0 0 auto; } #bs-tx-chart-col.bs-chart-expanded .k-seg .k-seg-btn { height: 32px; min-width: 120px; padding: 0 24px; font-size: 13px; border-radius: 9px; } #bs-tx-chart-col.bs-chart-expanded .k-chart-meta { font-size: 13px; } #bs-tx-chart-col.bs-chart-expanded .k-legend-io { font-size: 12.5px; } #bs-tx-chart-col.bs-chart-expanded .bs-chart-scroll { max-height: none; overflow: visible; } #bs-tx-chart-col.bs-chart-expanded .k-tl-card { background: var(--k-tile); } html[data-bs-theme="light"] #bs-tx-chart-col.bs-chart-expanded .k-tl-card { background: var(--k-card); } /* Plotly hover label font */ .bs-app .js-plotly-plot .hoverlayer .hovertext text { font-family: var(--k-font) !important; } .bs-app .js-plotly-plot .plotly .modebar { display: none; } /* ── Skeletons ── One shimmer treatment for the redesigned placeholders (.k-skel) and the legacy ones still used by the connection/rule cards. The old rules paint with --bs-text-3 and a pulsing opacity, which is far too loud on the new white cards; both get the same quiet sweep instead. */ @keyframes k-skel-sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } } .k-skel, .bs-app .bs-skeleton-line, .bs-app .bs-skeleton-circle, .bs-app .bs-skeleton-badge { background-color: var(--k-skel-base); background-image: linear-gradient(90deg, transparent 0%, var(--k-skel-hi) 45%, transparent 90%); background-size: 220% 100%; background-repeat: no-repeat; animation: k-skel-sweep 1.5s linear infinite; opacity: 1; } .k-skel { border-radius: 6px; flex: 0 0 auto; } @media (prefers-reduced-motion: reduce) { .k-skel, .bs-app .bs-skeleton-line, .bs-app .bs-skeleton-circle, .bs-app .bs-skeleton-badge { animation: none; background-image: none; } } .k-monitor-body > #monitoring-container > .bs-skeleton-group, #transactions-container > .bs-skeleton-group { padding: 16px 24px; } /* monitor skeleton: same rhythm as the real rows */ .k-skel-monitor .k-stat { pointer-events: none; } .k-skel-stat-value { width: 54px; height: 22px; border-radius: 7px; } .k-skel-stat-label { width: 78px; height: 9px; margin-top: 8px; } .k-skel-list { padding-bottom: 4px; } .k-skel-row { display: grid; grid-template-columns: minmax(0, 1fr) 168px 130px 120px 36px; gap: 16px; align-items: center; padding: 15px 24px; border-top: 1px solid var(--k-border-soft); } .k-skel-id { min-width: 0; } .k-skel-name { height: 13px; border-radius: 5px; max-width: 260px; } .k-skel-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .k-skel-chip { width: 66px; height: 15px; border-radius: 5px; } .k-skel-meta { width: 104px; height: 10px; } .k-skel-months { min-width: 0; } .k-skel-months .k-mgrid { gap: 3px; } .k-skel-cell { width: 9px; height: 9px; border-radius: 2px; } .k-skel-count { width: 92px; height: 10px; margin-top: 8px; } .k-skel-sum { width: 84px; height: 13px; justify-self: end; } .k-skel-badge { width: 74px; height: 20px; border-radius: 99px; } .k-skel-menu { width: 30px; height: 30px; border-radius: 8px; justify-self: end; } /* transactions skeleton */ .k-skel-txlist { padding-bottom: 4px; } .k-skel-txrow { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--k-border-soft); } .k-skel-txrow:last-child { border-bottom: none; } .k-skel-date { width: 60px; height: 11px; } .k-skel-txmain { flex: 1 1 auto; min-width: 0; } .k-skel-memo { height: 9px; margin-top: 7px; } .k-skel-amount { width: 76px; height: 13px; } /* ── Other app cards (rules / connections) inherit the shell ── */ .bs-app .bs-list-row { border-bottom-color: var(--k-border-soft); } .bs-app .bs-list-row:hover { background: var(--k-hover); } .bs-app .bs-tag { background: var(--k-border-soft); color: var(--k-ink-chip); border-radius: 5px; } .bs-app .bs-status-badge { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; padding: 4px 10px; } .bs-app .bs-status-ok { background: var(--k-ok-bg); color: var(--k-ok); } .bs-app .bs-status-overdue { background: var(--k-warn-bg); color: var(--k-warn); } .bs-app .bs-status-missing { background: var(--k-bad-bg); color: var(--k-bad); } .bs-app .bs-btn { border-radius: 9px; font-family: var(--k-font); } .bs-app .bs-btn-outline { color: var(--k-accent); border-color: var(--k-border); background: var(--k-card); } .bs-app .bs-btn-outline:hover { background: var(--k-accent-bg); border-color: var(--k-border); color: var(--k-accent); } .bs-app .bs-btn-primary { background: var(--k-accent); border-color: var(--k-accent); } .bs-app .bs-btn-primary:hover { background: var(--k-accent-h); border-color: var(--k-accent-h); } .bs-app .bs-icon-btn { border-radius: 8px; border-color: var(--k-border); color: var(--k-ink-faint); } .bs-app .bs-icon-btn:hover { color: var(--k-ink); border-color: var(--k-ink-faint); background: transparent; } .bs-app .bs-svg-icon { color: inherit; } .bs-app .bs-page-header { border-bottom-color: var(--k-border); } .bs-app .bs-page-title { font-size: 22px; letter-spacing: -0.02em; } .bs-app .bs-step-tab { font-family: var(--k-font); } .bs-app .bs-referral-btn { font-family: var(--k-font); } .bs-app .bs-text-strong { color: var(--k-ink); } .bs-app .bs-monitor-reconnect { border-radius: 10px; } /* ── Responsive: tablet ── */ @media (max-width: 1100px) { .k-rules-head, .k-rule-target { grid-template-columns: minmax(0, 1fr) 150px 120px 112px; } .k-rules-head { grid-template-columns: minmax(0, 1fr) 150px 120px 112px 36px; } .k-tx-body { grid-template-columns: minmax(0, 1fr) 320px; } } /* ── Responsive: stacked layout (< 992px) ── */ @media (max-width: 991.98px) { .k-tx-body { display: flex; flex-direction: column; } #bs-tx-chart-col { order: -1; border-left: none; border-bottom: 1px solid var(--k-border-soft); padding: 14px 16px 16px; } #bs-tx-chart-col.bs-chart-expanded { padding: 14px 16px 16px; } .k-chart-max { display: none; } .k-chart-toolbar, #bs-tx-chart-col.bs-chart-expanded .k-chart-toolbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "seg" "caption"; gap: 10px; } #bs-tx-chart-col.bs-chart-expanded .k-chart-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } #bs-tx-chart-col.bs-chart-expanded .k-legend-io { margin-left: auto; } .bs-app .k-seg, #bs-tx-chart-col.bs-chart-expanded .k-seg { width: 100%; justify-self: stretch; border-radius: 11px; padding: 3px; } #bs-tx-chart-col.bs-chart-expanded .k-seg .form-check { flex: 1 1 0; } .bs-app .k-seg .k-seg-btn, #bs-tx-chart-col.bs-chart-expanded .k-seg .k-seg-btn { width: 100%; min-width: 0; height: 34px; padding: 0 10px; font-size: 13px; border-radius: 9px; } .bs-app .bs-chart-scroll, #bs-tx-chart-col.bs-chart-expanded .bs-chart-scroll { max-height: none; overflow: visible; padding-right: 0; } /* donut card */ .k-donut-wrap, .k-donut-wrap-lg { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 14px 8px; border: 1px solid var(--k-border); border-radius: 14px; background: var(--k-card); } .bs-app .k-donut-graph { width: 200px !important; height: 200px !important; margin: 0 auto; } .k-legend, .k-donut-wrap-lg .k-legend { max-width: none; gap: 0; } .k-legend-row, .k-donut-wrap-lg .k-legend-row { font-size: 13px; padding: 10px 2px; border-top: 1px solid var(--k-border-soft); } .k-legend-label { color: var(--k-ink); font-weight: 500; } .k-legend-amt, .k-donut-wrap-lg .k-legend-amt { display: inline; order: 3; font-weight: 700; color: var(--k-ink); min-width: 72px; text-align: right; } .k-legend-pct, .k-donut-wrap-lg .k-legend-pct { order: 2; font-weight: 500; color: var(--k-ink-faint); min-width: 44px; text-align: right; } .k-tl-grid, .k-tl-grid-lg { grid-template-columns: minmax(0, 1fr); gap: 12px; } #bs-tx-chart-col.bs-chart-expanded .k-tl-card { background: var(--k-card); } /* filters: search first (full width), pills wrap below */ .k-tx-header { flex-direction: column; align-items: stretch; gap: 12px; } .k-tx-filters { margin-left: 0; width: 100%; } .k-filter-search { flex: 1 1 100%; order: -1; } .bs-app .k-search { width: 100%; height: 38px; border-radius: 11px; font-size: 14px; padding: 0 14px; } .bs-app .k-tx-filters .bs-ms-toggle, .bs-app .k-tx-filters .DateRangePickerInput { height: 34px; border-radius: 99px; } .bs-app .k-tx-filters .bs-ms-panel { left: 0; right: auto; } .k-filter-dates .bs-multiselect { width: auto; } /* rules grid narrower */ .k-rules-head, .k-rule-target { grid-template-columns: minmax(0, 1fr) 140px 110px 104px; gap: 12px; } .k-rules-head, .k-skel-row { grid-template-columns: minmax(0, 1fr) 140px 110px 104px 30px; gap: 12px; } .k-rule-menu { width: 30px; margin-left: 12px; } } /* ── Responsive: mobile (< 769px) ── */ @media (max-width: 768px) { .bs-app .bs-card { border-radius: 14px; } .bs-app .bs-card-header, .k-card-header { padding: 16px 16px 14px; flex-wrap: wrap; } .bs-app .bs-card-title { font-size: 17px; } .k-card-sub { font-size: 12px; } .k-header-controls { gap: 8px; } .k-help { padding: 12px 16px 0; } .k-empty { padding: 22px 16px; } /* stats 2 x 2 */ .k-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; } .k-stat { padding: 12px 14px; } .k-stat-value { font-size: 22px; } .k-stat-label { font-size: 10.5px; } /* rules as stacked cards */ .k-rules-head { display: none; } .k-rules-list { padding: 0 16px 4px; } .k-rule-row, .k-rule-row-overdue { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; grid-template-areas: "name sum menu" "meta meta meta" "status months months"; gap: 6px 10px; align-items: start; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--k-border); border-radius: 12px; background: var(--k-card); } .k-rule-row-overdue, .k-rule-row-overdue:hover { background: var(--k-warn-row); border-color: var(--k-warn-bg); } .k-rule-row:hover { background: var(--k-card); } .k-rule-target, .k-rule-id { display: contents; } .k-rule-name { grid-area: name; font-size: 15px; white-space: normal; } .k-rule-meta { grid-area: meta; margin-top: 0; } .k-rule-status { margin-top: 4px; } .k-rule-months { margin-top: 4px; } .k-rule-sum { grid-area: sum; font-size: 15px; align-self: start; padding-top: 1px; } .k-rule-menu { grid-area: menu; width: 30px; margin-left: 0; align-self: start; } .k-rule-status { grid-area: status; flex-direction: row; flex-wrap: wrap; align-items: center; } .k-rule-months { grid-area: months; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 8px; min-width: 0; min-height: 26px; } .k-mgrid { gap: 2px; } .k-mcell { width: 8px; height: 8px; } .k-mcount { margin-top: 0; font-size: 12px; } .k-mcount-label { display: none; } .k-rules:not(.is-expanded) .k-rules-list > .k-rule-row:nth-child(n+6) { display: none; } .k-skel-list { padding: 0 16px 4px; } .k-skel-row { grid-template-columns: minmax(0, 1fr) auto 30px; grid-template-areas: "id sum menu" "months months months"; gap: 10px; align-items: start; padding: 14px; margin-bottom: 10px; border: 1px solid var(--k-border); border-top: 1px solid var(--k-border); border-radius: 12px; } .k-skel-id { grid-area: id; } .k-skel-sum { grid-area: sum; } .k-skel-menu { grid-area: menu; } .k-skel-months { grid-area: months; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .k-skel-count { margin-top: 0; } .k-skel-badge { display: none; } .k-skel-txrow { padding: 14px 16px; } .k-skel-txlist .k-skel-chip { display: none; } .k-rules-more { display: block; border-top: none; padding: 6px 16px 14px; } .k-menu-panel { min-width: 190px; } /* transactions rows */ .k-tx-feedback { padding: 10px 16px 0; } .k-tx-showing { padding: 10px 16px 4px; } .k-tx-empty { padding: 26px 16px; } .bs-app .bs-tx-pagination { margin: 8px 16px 4px; } #transactions-container .alert { margin: 10px 16px 0; } .k-tx-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 26px; grid-template-areas: "name name amount action" "date memo cat action"; gap: 3px 6px; align-items: center; padding: 12px 16px; } .k-tx-main { display: contents; } .k-tx-name { grid-area: name; font-size: 14px; } .k-tx-date { grid-area: date; flex-basis: auto; font-size: 11.5px; } .k-tx-memo { grid-area: memo; margin-top: 0; font-size: 11.5px; } .k-tx-date + .k-tx-main .k-tx-memo::before, .k-tx-memo::before { content: "\00B7\00A0"; } .k-tx-amount { grid-area: amount; flex-basis: auto; font-size: 14px; } .k-tx-cat { grid-area: cat; max-width: none; justify-content: flex-end; } .k-tx-cat .k-chip { max-width: 160px; } .bs-app .k-tx-action { grid-area: action; opacity: 1; align-self: center; } .k-tx-row-excluded .k-tx-name { text-decoration: line-through; } } @media (max-width: 480px) { .k-stat-value { font-size: 20px; } .k-stat-label { letter-spacing: .05em; font-size: 10px; } .k-rules-list { padding: 0 12px 4px; } .k-rule-row, .k-rule-row-overdue { padding: 12px 12px; } .k-tx-row { padding: 12px 14px; } .k-tx-cat .k-chip { max-width: 120px; } .bs-app .k-donut-graph { width: 190px !important; height: 190px !important; } } /* ── "Install app" button in the /app page header ── bs_pwa.js decides whether a phone can still install the app; desktop never shows it. */ .bs-install-btn { display: inline-flex; } @media (min-width: 821px) { .bs-install-btn { display: none !important; } } /* Navbar account button: icon only on phones, so it fits the first row next to the theme and language controls. */ @media (max-width: 768px) { #bss-account-toggle { padding-left: 0.6rem; padding-right: 0.6rem; } #bss-account-toggle #bss-account-label { display: none; } #bss-account-toggle .bi { margin-right: 0 !important; font-size: 1rem; } } /* ── PWA install / push opt-in banner (appended to by bs_pwa.js) ── */ .k-pwa-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 2000; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--k-card); color: var(--k-ink); border: 1px solid var(--k-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.28); font-family: var(--k-font); opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; max-width: 560px; margin: 0 auto; } .k-pwa-banner.is-visible { opacity: 1; transform: none; } .k-pwa-icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; border: 1px solid var(--k-border-soft); } .k-pwa-text { flex: 1 1 auto; min-width: 0; } .k-pwa-title { font-size: 14px; font-weight: 600; line-height: 1.3; } .k-pwa-body { font-size: 12.5px; color: var(--k-ink-sub); line-height: 1.35; margin-top: 2px; } .k-pwa-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; } .k-pwa-btn { border: 1px solid var(--k-border); background: var(--k-card); color: var(--k-ink); border-radius: 9px; padding: 7px 12px; font: 600 12.5px var(--k-font); cursor: pointer; white-space: nowrap; } .k-pwa-btn-primary { background: var(--k-accent); border-color: var(--k-accent); color: #fff; } .k-pwa-btn:hover { border-color: var(--k-ink-faint); } .k-pwa-btn-primary:hover { background: var(--k-accent-h); border-color: var(--k-accent-h); } @media (min-width: 821px) { .k-pwa-banner { left: auto; right: 20px; bottom: 20px; margin: 0; } .k-pwa-actions { flex-direction: row; } } /* settings page: push controls */ .k-push-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .k-push-status { font-size: 12.5px; color: var(--k-ink-sub); flex: 1 1 100%; margin-bottom: 4px; }