/*
  Bookkeeping UI – Apple‑like Light

  Important: This file only styles the UI. No business logic changes.
  We rely on the shared design tokens from assets/style.css (var(--panel),
  var(--line), var(--accent), …) to keep the whole website consistent.
*/

:root{
  --bk-gap: 14px;
  --bk-border: var(--line2);
  --bk-border-strong: var(--line);
  --bk-bg-soft: var(--panel2);
  --bk-bg-hover: rgba(0,113,227,.06);
}

.bkApp{display:grid;grid-template-columns:320px 1fr;gap:var(--bk-gap);align-items:start}
@media (max-width: 980px){.bkApp{grid-template-columns:1fr}.bkSidebar{position:static}}

/* Mobile navigation: sidebar collapses into a dropdown (no overlay). */
.bkNavSelect{display:none;min-width:170px}
@media (max-width: 820px){
  .bkSidebar{display:none}
  .bkNavSelect{display:inline-flex}
  .bkApp{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .bkApp{gap:10px}
  .bkToolbar{padding:10px;border-radius:14px}
  .bkDashWelcome{font-size:22px}
  .bkDashHeroTop{flex-direction:column;align-items:flex-start}
  .bkDashPills{justify-content:flex-start;width:100%}
  .bkMiniPill{min-width:unset;width:100%}
  .bkDashQuick{grid-template-columns:1fr}
  .bkBars{height:120px}
  .bkBarWrap{height:100px}
  .bkNavSelect{width:100%}
  .bkToolbarRight{display:flex;flex-direction:column;align-items:stretch;gap:10px}
}

.bkSidebar{position:sticky;top:12px;padding:14px;border:1px solid var(--bk-border)}
.bkSidebarHeader{padding:6px 2px 10px;border-bottom:1px solid var(--bk-border);margin-bottom:10px}
.bkSidebarTitle{font-size:18px;font-weight:800}
.bkSidebarHint{opacity:.75;font-size:12px;margin-top:2px}

.bkNav{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.bkNavItem{width:100%;text-align:left;border:1px solid var(--bk-border);background:var(--bk-bg-soft);color:inherit;border-radius:12px;padding:10px 12px;cursor:pointer;display:flex;align-items:center;gap:10px}
.bkNavItem.active{background:rgba(0,113,227,.10);border-color:rgba(0,113,227,.22)}
.bkNavItem:hover{background:var(--bk-bg-hover)}

.bkSidebarFooter{margin-top:12px;padding-top:10px;border-top:1px solid var(--bk-border)}
.bkSidebarFooter .tiny{opacity:.8;font-size:12px}

.bkMain{display:flex;flex-direction:column;gap:var(--bk-gap)}

/*
  Page header (replaces the old "box" look):
  Title centered + bold, subtitle smaller + lighter.
*/
.bkToolbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 18px 10px 10px;
  border:0;
  background:transparent;
  text-align:center;
}
.bkToolbarLeft{width:100%;text-align:center}
.bkToolbarRight{width:100%;display:flex;justify-content:center;margin-top:10px}
.bkTitle{font-size:20px;font-weight:900;letter-spacing:-.01em}
.bkSub{opacity:.70;font-size:12px;margin-top:4px;font-weight:400;line-height:1.35}

/*
  Always-visible controls: Scope switch + Quick action button
  live in the header (top-right), outside the page content.
*/
body[data-page="bookkeeping"] .bkHeaderControls{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* When the scope switch lives inline next to the title (Bookkeeping header), keep it horizontal. */
body[data-page="bookkeeping"] .bkHeaderControls.bkHeaderInline{flex-direction:row;align-items:center;gap:8px}
@media (max-width: 520px){
  body[data-page="bookkeeping"] .bkHeaderControls{align-items:flex-start}
  body[data-page="bookkeeping"] .bkHeaderControls.bkHeaderInline{gap:6px}
  body[data-page="bookkeeping"] .appTopbarTitleRight .btn{padding:8px 10px}
}
/* Schnellaktion komplett ausblenden (Element bleibt nur für JS-Kompatibilität vorhanden). */
body[data-page="bookkeeping"] .bkHeaderControls #bkQuickBtn{display:none !important}

/* Sicherheitsnetz: Der ehemalige "Kasten" (Toolbar) darf keinerlei Rand/Shadow/Outline zeigen. */
#bkToolbar.bkToolbar{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* =========================
   Dashboard (Apple website style)
   ========================= */
.bkDashWelcome{font-size:28px;font-weight:900;letter-spacing:-.02em;margin:4px 0 10px}
.bkDashHeroTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bkIconBtn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px}

.bkDashQuick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 0}
@media (max-width: 980px){.bkDashQuick{grid-template-columns:repeat(2,1fr)}}
.bkQuickCard{border:1px solid var(--bk-border);background:var(--panel);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left}
.bkQuickCard:hover{background:var(--panel2);border-color:var(--bk-border-strong)}
.bkQuickCard .ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.bkQuickCard span:last-child{font-weight:800}

.bkDashChart{padding:16px}
.bkDashChartHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.bkDashChartTools{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.bkDashBig{font-size:34px;font-weight:900;letter-spacing:-.02em;margin-top:2px}
.bkDashBigSm{font-size:20px;font-weight:900;letter-spacing:-.01em}
.bkDashPills{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.bkMiniPill{border:1px solid var(--bk-border);background:var(--panel);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;min-width:150px}
.bkMiniPill .dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.bkMiniPill .dot.inc{background:#0A84FF}
.bkMiniPill .dot.exp{background:#FF3B30}
.bkMiniPill .val{font-weight:900;margin-top:2px}

.bkDashBars{padding:10px 0 6px}

/* Profit line chart (SVG) should scale responsively without looking "squeezed" on mobile */
.bkProfitLines{width:100%}
.bkProfitLines .bkPL_svg{display:block;width:100%;height:auto;max-width:100%}

/*
  Profit line: connect dots with a visible stroke.
  The SVG uses `currentColor` (set inline), so we only define stroke/fill here.
*/
.bkPL_line_profit{
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;
}
.bkPL_dot_profit{
  fill: currentColor;
  stroke: rgba(255,255,255,.9);
  stroke-width: 2;
}
.bkPL_grid{stroke: rgba(0,0,0,.08);stroke-width: 1}
.bkPL_x,.bkPL_y{fill: rgba(0,0,0,.55);font-size: 12px;font-weight: 700}

/*
  Profit chart (SVG)
  Desktop: stays exactly as-is.
  Mobile (portrait): avoid "squeezed" look by letting the chart keep its aspect
  ratio and scale its height with the available width.
*/
.bkLineWrap{width:100%}
.bkLineWrap svg{display:block;width:100%;max-width:100%}
@media (max-width: 520px){
  /* override inline height so the chart is not stretched */
  .bkLineWrap{height:auto !important; aspect-ratio: 16 / 7;}
  .bkLineWrap svg{height:100% !important;}
}
.bkBars{display:flex;gap:10px;align-items:stretch;height:170px}
.bkBarCol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.bkBarWrap{width:100%;height:150px;position:relative}
.bkBarZero{position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--bk-border);opacity:.65}
.bkBarCol:first-child .bkBarZero::after{content:'0,00 €';position:absolute;left:0;top:-11px;background:var(--panel);border:1px solid var(--bk-border);border-radius:999px;padding:2px 7px;font-size:11px;font-weight:800;opacity:.85}
.bkBar{position:absolute;left:0;right:0;border-radius:8px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.05)}
.bkBar.pos{border:2px solid rgba(10,122,51,.85);background:rgba(10,122,51,.62)}
.bkBar.neg{border:2px solid rgba(255,59,48,.55);background:rgba(255,59,48,.72)}
.bkBarLab{font-size:11px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.bkDashChartFoot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--bk-border);padding-top:10px;margin-top:10px}
.bkSelect{border:1px solid var(--bk-border);border-radius:12px;padding:9px 12px;background:var(--panel);color:inherit}

.bkDashBox{border:1px solid var(--bk-border);background:rgba(0,0,0,.02);border-radius:14px;padding:12px;margin:10px 0}
.bkDashBoxInner{display:block}
.bkDashRows{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.bkDashRow{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--bk-border);padding-top:10px}
.bkDashRow:first-child{border-top:none;padding-top:0}

.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:999px;padding:0 6px;font-size:12px;font-weight:900;margin-right:8px;border:1px solid var(--bk-border)}
.badge.red{background:rgba(255,59,48,.12);border-color:rgba(255,59,48,.22)}
.badge.amber{background:rgba(255,159,10,.14);border-color:rgba(255,159,10,.24)}
.badge.gray{background:rgba(142,142,147,.14);border-color:rgba(142,142,147,.24)}

.bkDashLinkRow{display:flex;justify-content:flex-end;margin-top:10px}
.bkLink{color:var(--accent);text-decoration:none;font-weight:800}
.bkLink:hover{text-decoration:underline}

.bkDashVatGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.bkDashVatBox{border:1px solid var(--bk-border);border-radius:14px;padding:12px;background:rgba(0,0,0,.02)}

.bkEmpty{border:1px solid var(--bk-border);border-radius:14px;padding:24px 14px;background:rgba(0,0,0,.01);text-align:center;opacity:.85}

.bkDonut{display:flex;gap:16px;align-items:center;padding:10px}
.bkLegend{display:flex;flex-direction:column;gap:8px;min-width:0}
.bkLegendRow{display:flex;align-items:center;gap:8px;min-width:0}
.bkLegendRow .sw{width:8px;height:8px;border-radius:2px}
.bkLegendRow .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.bkDonutValue{font-size:16px;font-weight:900;fill:var(--text)}

.bkTimeline{padding:10px}
.bkTlItem{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--bk-border)}
.bkTlItem:last-child{border-bottom:none}
.bkTlIco{width:28px;height:28px;border:1px solid var(--bk-border);border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fff}
.bkTlDate{font-size:12px;opacity:.75;text-transform:uppercase;letter-spacing:.08em}
.bkTlText{font-weight:700}

.bkDashHint{margin:16px auto 0;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(0,113,227,.18);background:rgba(0,113,227,.10);color:#0A84FF;padding:10px 14px;border-radius:14px;font-weight:700}
.bkDashHint .i{width:18px;height:18px;border-radius:999px;border:1px solid rgba(0,113,227,.28);display:inline-flex;align-items:center;justify-content:center;font-weight:900}

/* =========================
   Mobile chart rendering
   =========================
   On small screens the profit chart SVG must keep its aspect ratio.
   We avoid "squished" look by letting the wrapper determine height
   via aspect-ratio (portrait), while desktop stays unchanged.
*/
.bkLineWrap{width:100%;}
@media (max-width: 520px){
  .bkLineWrap{height:auto !important; aspect-ratio: 16 / 7; overflow:visible !important;}
  .bkLineWrap svg{width:100% !important; height:100% !important; display:block;}
}

.bkGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.bkGrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 980px){.bkGrid2{grid-template-columns:1fr}}
.bkGrid2{align-items:stretch}
.bkGrid2 > .card{width:100%}
.bkKpi{grid-column:span 3;padding:14px}
@media (max-width: 1100px){.bkKpi{grid-column:span 6}}
@media (max-width: 640px){.bkKpi{grid-column:span 12}}
.bkKpiLabel{opacity:.75;font-size:12px}
.bkKpiValue{font-size:24px;font-weight:900;margin-top:6px}
.bkKpiSub{opacity:.7;font-size:12px;margin-top:4px}

.bkCard{padding:14px}
.bkCardTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.bkCardMeta{font-size:12px;opacity:.85;white-space:nowrap}
.bkCardBody{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.bkCardHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bkCardHeaderRight{display:flex;align-items:center;gap:10px}
.bkCardHeaderRight .bkSelect{min-width:150px}
#bkDashTaxViewSeg .seg{padding:7px 10px;font-size:12px}

@media (max-width: 680px){
  .bkCardHeaderRight{flex-wrap:wrap;justify-content:flex-end}
  .bkCardHeaderRight .bkSelect{min-width:160px}
}
.bkCardTitle{font-weight:900}
.bkCardActions{display:flex;gap:8px}

/* Projects card header layout */
.bkProjectCard{overflow:hidden}
.bkProjectHead{padding:14px 14px 0}
.bkProjectTitle{font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.bkProjectActionsRow{display:flex;gap:10px;padding:10px 14px 0}
@media (max-width: 520px){.bkProjectActionsRow{flex-direction:column}}

/* Projects list (iOS-like compact stats) */
.bkProjectMeta{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:12px 14px 10px}
.bkProjectMetaItem{min-width:0}
.bkProjectMetaItem .k{font-size:12px;opacity:.68}
.bkProjectMetaItem .v{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkProjectBudgetWrap{padding:0 14px 14px}
.bkProjBudget{border:1px solid var(--bk-border);background:var(--panel2);border-radius:14px;padding:10px 12px}
.bkProjBudgetTop{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;opacity:.92}
.bkProjBudgetTop span{opacity:.72}
.bkProjBudgetTop b{font-weight:900;opacity:1}
.bkProjBudgetSub{margin-top:6px;font-size:12px;opacity:.78}
.bkMiniBar{height:8px;border-radius:999px;background:rgba(0,0,0,.06);margin-top:8px;overflow:hidden}
.bkMiniBarFill{height:100%;border-radius:999px}
.bkMiniBarFill.bkOk{background:#0a7a33}
.bkMiniBarFill.bkWarn{background:#b26a00}
.bkMiniBarFill.bkOver{background:#b00020}

.bkEmptyState{padding:18px;text-align:center}
.bkEmptyIcon{font-size:26px;line-height:1;margin-bottom:8px}
.bkEmptyTitle{font-weight:900;font-size:16px;margin-bottom:6px}
.bkEmptyText{font-size:12px;opacity:.75;margin-bottom:10px}

html[data-theme="dark"] .bkMiniBar{background:rgba(255,255,255,.10)}

.bkTable{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}
.bkTable thead th{opacity:.75;font-weight:800;font-size:12px;text-align:left;padding:10px 10px;border-bottom:1px solid var(--bk-border)}
.bkTable tbody td{padding:10px 10px;border-bottom:1px solid var(--bk-border);vertical-align:top}
.bkTable tbody tr:hover td{background:rgba(0,0,0,.02)}
.bkTable tbody tr:last-child td{border-bottom:none}
.bkTable .right{text-align:right}

/*
  Mobile (only): make tables fit the viewport.
  Previous approach (forcing min-width + horizontal scroll) caused Safari to
  still clip content in some views. Here we keep the desktop unchanged and
  switch tables to a fixed layout that wraps long content.
*/
@media (max-width: 820px){
  /*
    iOS/Safari can expand the layout viewport when *any* child element is
    wider than the visible screen. That results in the entire view being
    shifted/cropped on the right (exactly what you see in the screenshots).

    Strategy:
    - Never allow the BODY to grow horizontally.
    - Keep cards within the viewport.
    - Allow wide tables to scroll *inside* their card instead of stretching
      the whole page.
  */

  /*
    HARD MOBILE SAFETY NET
    Some Bookkeeping views render plain <table> (without .bkTable) and
    some controls have long unbreakable content.
    On iOS Safari a single overflowing child widens the *layout viewport*,
    shifting the whole UI to the right ("cut off" look).

    We therefore:
    1) Prevent the bookkeeping page from ever growing horizontally.
    2) Force all immediate containers to respect viewport width.
    3) Make any table scroll/wrap INSIDE its card.
  */

  html, body{max-width:100%; overflow-x:hidden;}
  body[data-page="bookkeeping"]{max-width:100%; overflow-x:hidden;}

  /* Main page container used by app_shell.css */
  body[data-page="bookkeeping"] .pageWrap{max-width:100%; padding-left:12px; padding-right:12px; overflow-x:hidden;}

  /* Bookkeeping layout containers */
  body[data-page="bookkeeping"] .bkApp,
  body[data-page="bookkeeping"] .bkMain,
  body[data-page="bookkeeping"] .bkToolbar,
  body[data-page="bookkeeping"] .bkToolbarLeft,
  body[data-page="bookkeeping"] .bkToolbarRight{
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
    box-sizing:border-box;
  }

  /* Cards must not widen the page. Allow inner scrolling instead. */
  body[data-page="bookkeeping"] .card{
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
    box-sizing:border-box;
  }

  /* Any table inside cards: contain overflow locally */
  body[data-page="bookkeeping"] .card table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-collapse:separate;
  }
  body[data-page="bookkeeping"] .card table thead,
  body[data-page="bookkeeping"] .card table tbody{display:table; width:100%; table-layout:fixed;}
  body[data-page="bookkeeping"] .card table th,
  body[data-page="bookkeeping"] .card table td{
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    max-width:0;
  }

  /* Also keep the styled .bkTable behaviour */
  .bkTable{display:block;width:100%;max-width:100%;overflow-x:auto}
  .bkTable thead, .bkTable tbody{display:table;width:100%;table-layout:fixed}
  .bkTable th,.bkTable td{white-space:normal;word-break:break-word;overflow-wrap:anywhere;max-width:0}
  .bkTable th{padding:10px 8px}
  .bkTable td{padding:10px 8px}
  .bkTable .right{white-space:nowrap}
}

.bkTableFooter{padding:10px 12px;border-top:1px solid var(--bk-border);display:flex;justify-content:flex-end;background:transparent}

.pillIco{font-size:13px;line-height:1;opacity:.95}

.bkInlineInput{width:100%;padding:8px 10px;border-radius:12px;border:1px solid var(--bk-border);background:var(--panel);color:inherit}
.bkInlineNum{text-align:right}
.bkInlineCheck{display:inline-flex;align-items:center;gap:6px;margin-right:10px;font-size:12px;opacity:.85}
.bkTable tbody tr.isEditing td{background:rgba(0,113,227,.06)}

.bkPill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bk-border);padding:4px 8px;border-radius:999px;font-size:12px;opacity:.95;background:var(--panel2)}
.bkPill.green{border-color:rgba(0,255,140,.35)}
.bkPill.yellow{border-color:rgba(255,210,0,.35)}
.bkPill.red{border-color:rgba(255,70,70,.35)}
.bkPill.gray{border-color:var(--bk-border);opacity:.85}

.bkForm{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bkForm .full{grid-column:1/-1}
.bkForm label{display:block;font-size:12px;opacity:.8;margin-bottom:4px}
.bkForm input,.bkForm select,.bkForm textarea{width:100%;padding:10px;border-radius:12px;border:1px solid var(--bk-border);background:var(--panel);color:inherit}
.bkForm input:focus,.bkForm select:focus,.bkForm textarea:focus{outline:none;border-color:rgba(0,113,227,.45);box-shadow:0 0 0 4px rgba(0,113,227,.16)}
.bkTopActions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap}
@media (max-width: 820px){
  .bkTopActions{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .bkTopActions > *{width:100%;max-width:100%}
  .bkTopActions .bkFilters{width:100%}
  .bkTopActions .bkSearch{width:100%}
}
.bkFilters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bkFilters select,.bkFilters input{min-width:180px}

/* Inline button groups (e.g. Reports & Export) */
.bkPills{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

@media (max-width: 520px){
  /* On very small screens, allow filter controls to shrink to fit */
  .bkFilters select,.bkFilters input{min-width:0;flex:1 1 160px}
  .bkPills .btn{flex:1 1 200px}
}

.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bk-border);padding:4px 10px;border-radius:999px;font-size:12px;opacity:.95}
.pill.draft{opacity:.8}
.pill.sent{border-color:rgba(255,210,0,.35)}
.pill.paid{border-color:rgba(0,255,140,.35)}
.pill.overdue{border-color:rgba(255,70,70,.35)}
.pill.accepted{border-color:rgba(0,255,140,.35)}
.pill.rejected{border-color:rgba(255,70,70,.35)}
.pill.cancelled{opacity:.7}

.tiny{font-size:12px;opacity:.78}

/* nicer invoice items grid on narrow screens */
@media (max-width: 780px){
  .bkInvoiceItems .itemRow{grid-template-columns:1fr 1fr;}
}
.bkForm textarea{min-height:90px;resize:vertical}
.bkForm .rowActions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* Settings: logo preview */
.bkLogoPreview{width:120px;height:64px;border:1px solid var(--bk-border);border-radius:12px;background:var(--bk-bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bkLogoPreview img{max-width:100%;max-height:100%;object-fit:contain;display:block}

.bkModal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:20000;pointer-events:none}
.bkModal.open{display:flex;pointer-events:auto}
.bkModalCard{width:min(980px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:14px}
.bkModalHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bkModalTitle{font-weight:900}

.bkKanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 980px){.bkKanban{grid-template-columns:1fr}}
.bkCol{padding:12px}
.bkColTitle{font-weight:900;margin-bottom:10px}
.bkTask{padding:10px;border:1px solid var(--line2);background:var(--panel2);border-radius:12px;margin-bottom:8px}
.bkTaskTitle{font-weight:800}
.bkTaskMeta{opacity:.75;font-size:12px;margin-top:4px}
.bkTaskActions{display:flex;gap:8px;margin-top:8px}

.bkPalette{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:flex-start;justify-content:center;padding:80px 16px;z-index:20000;pointer-events:none}
.bkPalette.open{display:flex;pointer-events:auto}
.bkPaletteCard{width:min(720px,100%);padding:12px}
.bkPaletteInput{width:100%;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.bkPaletteList{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.bkPaletteItem{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line2);background:var(--panel2);padding:10px 12px;border-radius:12px;cursor:pointer}
.bkPaletteItem:hover{background:#ffffff}
.bkPaletteItem small{opacity:.75}

.bkSplit{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
@media (max-width: 980px){.bkSplit{grid-template-columns:1fr}}

.bkInvoiceItems{margin-top:10px}
.bkInvoiceItems .itemRow{display:grid;grid-template-columns:1.6fr .5fr .7fr .5fr .6fr;gap:8px;margin-bottom:8px}
.bkInvoiceItems .itemRow input{padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.bkInvoiceItems .itemRow .danger{border-color:rgba(255,70,70,.35)}

.bkRight{display:flex;justify-content:flex-end}


/* Invoice Editor (Sevdesk-like) */
#bkModal.wide .bkModalCard{ max-width: 1100px; width: 96vw; }
.bkInvTopbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 18px; }
.bkSwitch{ display:flex; align-items:center; gap:10px; user-select:none; }
.bkSwitch input{ display:none; }
.bkSwitch span{ width:42px; height:24px; border-radius:999px; background:var(--panel2); position:relative; border:1px solid var(--line); }
.bkSwitch span:after{ content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:999px; background:var(--bg2); border:1px solid var(--line2); transition:transform .18s ease; }
.bkSwitch input:checked + span{ background:rgba(0,113,227,.15); border-color:rgba(0,113,227,.35); }
.bkSwitch input:checked + span:after{ transform:translateX(18px); }
.bkInvTopActions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.btn.dark{ background:transparent; border:1px solid var(--line); color:var(--text); }
.btn.success{ background:#e9f8ef; border:1px solid #2e7d32; color:#1b5e20; }
.btn.primary{ background:var(--accent); border:1px solid rgba(0,0,0,.04); color:#fff; }
.bkInvLayout{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.bkInvSection{ background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:16px; margin-bottom:14px; }
.bkInvSection h3{ margin:0 0 10px; font-size:18px; }
.bkInvSection label{ display:block; font-size:13px; color:var(--muted); margin:8px 0; }
.bkInvSection input, .bkInvSection select, .bkInvSection textarea{
  width:100%; padding:10px 12px; border-radius:12px;
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
}
.bkRow3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }
.bkRow2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.bkRow2.tight{ grid-template-columns: 1fr 1fr; gap:8px; }
/* Some views still use .bkRow (legacy) for a simple 2-column row */
.bkRow{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.bkInline{ display:flex; align-items:center; gap:8px; }
.bkSelectPlus{ display:flex; gap:8px; align-items:center; }
.iconBtn{ border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--text); padding:8px 10px; cursor:pointer; }
.bkInvPosHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bkSeg{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--panel2); }
.bkSeg .seg{ padding:8px 12px; background:transparent; border:0; color:var(--muted); cursor:pointer; }
.bkSeg .seg.active{ background:#ffffff; color:var(--text); }
.bkInvItemsWrap{ overflow:auto; }
.bkInvItems{ width:100%; border-collapse:collapse; }
.bkInvItems th, .bkInvItems td{ padding:10px 8px; border-bottom:1px solid var(--line2); font-size:13px; }
.bkInvItems thead th{ color:var(--muted); font-weight:600; }
.bkInvItems input, .bkInvItems select{ padding:8px 10px; border-radius:10px; }
.bkInvItemActions{ margin-top:10px; }
.bkInvTotals{ margin-top:14px; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.bkInvTotals .line{ display:flex; gap:18px; width:320px; justify-content:space-between; color:var(--text); }
.bkInvTotals .line.total{ font-weight:800; font-size:15px; }
.bkInvTotals b{ color:var(--text); }
@media (max-width: 960px){
  .bkInvLayout{ grid-template-columns:1fr; }
  .bkRow3{ grid-template-columns:1fr; }
  .bkRow2{ grid-template-columns:1fr; }
  .bkRow{ grid-template-columns:1fr; }
  .bkInvTotals .line{ width:100%; }
}


/* Inline select used in totals (VAT rate) */
.bkInlineSelect{background:var(--panel);color:var(--text);border:1px solid var(--bk-border);border-radius:10px;padding:6px 10px;font-weight:600;}
.bkInlineSelect:focus{outline:none;border-color:rgba(0,113,227,.55);box-shadow:0 0 0 4px rgba(0,113,227,.16);} 


/* ===== Projects: Time tracking ===== */
.bkTabs{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.bkTab{border:1px solid var(--bk-border);background:var(--panel);color:var(--muted);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:750;font-size:13px}
.bkTab:hover{box-shadow:var(--shadow2);color:var(--text)}
.bkTab.active{background:rgba(0,113,227,.10);color:var(--accent);border-color:rgba(0,113,227,.25)}
.bkTabSpacer{flex:1}
.bkSectionTitle{font-weight:700;margin-bottom:8px}
.bkFormGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bkFormGrid label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text)}
.bkTimerRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bkTimerClock{font-size:26px;font-weight:800;letter-spacing:1px}
.bkTimeList{margin-top:10px;overflow:auto}
.bkTable{width:100%;border-collapse:collapse;font-size:13px}
.bkTable th,.bkTable td{border-bottom:1px solid var(--bk-border);padding:8px 6px;vertical-align:top}
.bkBudgetBox{margin-top:10px;border:1px solid var(--bk-border);border-radius:16px;padding:12px;background:var(--panel2)}
.bkBudgetRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bkBudgetItem{border:1px solid var(--bk-border);border-radius:16px;padding:12px;background:var(--panel)}

/* Budget color helpers */
.bkOk{color:#0a7a33;}
.bkWarn{color:#b26a00;}
.bkOver{color:#b00020;}

.bkBar{
  /* NOTE: .bkBar is also used by the chart component above (absolute positioned).
     For the budget progress bar we must explicitly reset the positioning.
     Otherwise Safari/Chrome may render it as a full-width overlay “stripe”. */
  position:static;
  left:auto;
  right:auto;
  display:block;
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  margin-top:8px;
  overflow:hidden;
}
.bkBarFill{height:100%;border-radius:999px}
.bkBarFill.bkOk{background:#0a7a33}
.bkBarFill.bkWarn{background:#b26a00}
.bkBarFill.bkOver{background:#b00020}
@media (max-width:900px){
  .bkFormGrid{grid-template-columns:1fr}
  .bkBudgetRow{grid-template-columns:1fr}
}

/* ===== Project Calendar ===== */
.bkCalGrid{display:block}
.bkCalHead,.bkCalBody{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bkCalHeadCell{font-weight:750;font-size:12px;text-align:center;background:var(--panel2);color:var(--muted);border:1px solid var(--bk-border);border-radius:12px;padding:8px 0}
.bkCalEmpty{background:transparent;border:0}
.bkCalDayCell{cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;border:1px solid var(--bk-border);border-radius:16px;padding:10px;background:var(--panel)}
.bkCalDayCell:hover{border-color:rgba(0,113,227,.35);box-shadow:var(--shadow2)}
/* Days that already have saved entries (any type) get a subtle green outline */
.bkCalDayCell.bkCalHasEntries{border-color:rgba(34,197,94,.65);box-shadow:0 0 0 1px rgba(34,197,94,.35) inset}
.bkCalDayCell.bkCalHasEntries:hover{border-color:rgba(34,197,94,.9);box-shadow:0 0 0 2px rgba(34,197,94,.35) inset, var(--shadow2)}
.bkCalDayNum{font-weight:800;font-size:13px}
.bkCalBadge{font-size:11px;color:var(--accent);background:rgba(0,113,227,.10);border:1px solid rgba(0,113,227,.20);border-radius:999px;display:inline-block;padding:3px 8px;width:max-content;font-weight:650}
.bkCalDay{border-top:1px solid var(--bk-border);padding-top:12px}

/* ===== Mini calendar for manual day entries ===== */
.bkMiniCalWrap{margin-top:10px;border:1px solid var(--bk-border);border-radius:16px;padding:12px;background:var(--panel2)}
.bkMiniCalBar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.bkMiniCal{display:block}
.bkMiniCalHead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:6px}
.bkMiniCalGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bkMiniCalCell{border:1px solid var(--bk-border);border-radius:12px;padding:8px 0;text-align:center;font-size:12px;background:var(--panel);color:var(--text)}
.bkMiniCalEmpty{background:transparent;border:0}
.bkMiniCalWeek{background:var(--panel2);font-weight:800;color:var(--muted)}
.bkMiniCalDay{cursor:pointer}
.bkMiniCalDay:hover{border-color:rgba(0,113,227,.55)}
/* Selected days: blue outline (not black fill) */
.bkMiniCalDay.sel{background:transparent;color:var(--text);border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}

/* Existing days that were already recorded (shown as selected, but not re-addable). */
.bkMiniCalDay.existing{border-style:dashed;opacity:.85}

/* ===== Invoice editor + palette: Apple‑like light overrides ===== */
.bkModalCard{background:var(--panel);border:1px solid var(--line2);border-radius:22px;box-shadow:var(--shadow)}
.bkInvSection{background:var(--panel2);border:1px solid var(--line2);border-radius:18px}
.bkInvSection label{color:var(--muted)}
.bkInvSection input,.bkInvSection select,.bkInvSection textarea{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
}
.iconBtn{background:var(--panel2);border:1px solid var(--line);color:var(--text)}
.bkSeg{border:1px solid var(--line)}
.bkSeg .seg{color:var(--muted)}
.bkSeg .seg.active{background:rgba(0,113,227,.10);color:var(--accent)}
.bkInvItems th,.bkInvItems td{border-bottom:1px solid var(--line2)}
.bkInvItems thead th{color:var(--muted)}
.bkInvTotals .line{color:var(--muted)}
.bkInvTotals .line.total{color:var(--text)}
.bkPaletteCard{background:var(--panel);border:1px solid var(--line2);border-radius:22px;box-shadow:var(--shadow)}
.bkPaletteInput{background:var(--panel);border:1px solid var(--line);color:var(--text)}
.bkPaletteItem{background:var(--panel2);border:1px solid var(--line2)}
.bkPaletteItem:hover{background:rgba(0,113,227,.06)}


/* Dashboard clickable rows */
.bkDashRowLink{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;text-decoration:none;color:inherit;border-top:1px solid var(--hairline,#E5E5EA);} 
.bkDashRowLink:hover{background:rgba(0,0,0,0.02);} 
.bkMoney.pos{color:#1D6F42;} 
.bkMoney.neg{color:#B42318;} 
.bkCheckRow{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hairline,#E5E5EA);} 
.bkCheckRow:last-child{border-bottom:none;} 


/* Einkommensteuer Widget */
.bkTaxHero{display:flex; justify-content:space-between; gap:12px; align-items:flex-end; margin-top:10px;}
.bkTaxSubHero{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--line2);
  border-radius:14px;
  background: var(--panel2);
  color: var(--text);
}
.bkMoneyLine{font-size:18px; font-weight:800; letter-spacing:-0.02em;}
.bkTaxControl{margin-top:12px; padding-top:12px; border-top:1px solid var(--line2);}
.bkTaxControlRow{display:flex; gap:8px; align-items:center; margin-top:8px;}
.bkTaxControlRow input{flex:1; min-width:120px;}
.bkBigMoney{font-size:28px; font-weight:800; letter-spacing:-0.02em;}
.bkBigMoney.neg{color:var(--danger);}
.bkBigPct{font-size:20px; font-weight:700;}
.bkTaxBar{height:10px; background:var(--line); border-radius:999px; overflow:hidden; margin:12px 0 10px 0;}
.bkTaxBarFill{height:100%; background:var(--accent); border-radius:999px;}
.bkTaxRows{display:flex; flex-direction:column; gap:6px; font-size:13px;}
.bkTaxRows > div{display:flex; justify-content:space-between; gap:10px;}
.bkTaxTotal{margin-top:6px; padding-top:8px; border-top:1px solid var(--line2);}

/* Einkommensteuer Widget – nutzt CSS-Variablen (funktioniert in Light/Dark Presets gleichermaßen) */
.bkMoney.neg{color:var(--danger);}

/* Einkommensteuer Verlauf (Auto vs Manuell) */
.bkTaxChartWrap{margin-top:6px;}
.bkTaxLegend{display:flex; gap:12px; align-items:center; justify-content:flex-start; margin-bottom:6px; font-size:12px;}
.bkTaxLegend .item{display:flex; gap:8px; align-items:center;}
.bkTaxLegend .item.muted{opacity:.65;}
.bkTaxLegend .line{display:inline-block; width:22px; height:0; border-top:2px solid color-mix(in srgb, var(--text) 30%, transparent); border-radius:999px;}
.bkTaxLegend .line.auto{border-top-color:var(--accent);}
.bkTaxLegend .line.manual{border-top-color:color-mix(in srgb, var(--text) 40%, transparent); border-top-style:dashed;}

.bkTaxChart{width:100%; height:140px; border-radius:14px; overflow:hidden; border:1px solid var(--line2); background:var(--panel2);}
.bkTaxChartBg{fill:transparent;}
.bkTaxAxisLine{stroke:color-mix(in srgb, var(--text) 14%, transparent); stroke-width:1;}
.bkTaxAxis{fill:var(--muted); font-size:11px;}
.bkTaxLine{fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;}
.bkTaxLine.auto{stroke:var(--accent);}
.bkTaxLine.manual{stroke:color-mix(in srgb, var(--text) 40%, transparent); stroke-dasharray:5 4;}
.bkTaxDot{stroke:#fff; stroke-width:1.5;}
.bkTaxDot.auto{fill:var(--accent);}
.bkTaxDot.manual{fill:color-mix(in srgb, var(--text) 40%, transparent);}


.bkHint{ font-size:13px; opacity:.85; margin-top:8px; line-height:1.35; }


/* Scope Switch (Business/Privat) */
.bkScopeSwitch{display:flex; align-items:center; gap:0; border:1px solid rgba(0,0,0,0.10); background:rgba(242,242,247,0.75); border-radius:999px; overflow:hidden;}
[data-theme="dark"] .bkScopeSwitch{border-color:rgba(255,255,255,0.14); background:rgba(28,28,30,0.7);}
.bkScopeBtn{appearance:none; border:0; background:transparent; padding:8px 12px; font-size:12px; font-weight:700; cursor:pointer; opacity:.75; user-select:none;}
.bkScopeBtn.active{opacity:1; background:rgba(11,46,102,0.18); color: rgba(11,46,102,1);}
[data-theme="dark"] .bkScopeBtn.active{background:rgba(11,46,102,0.36); color: rgba(221,235,255,1);}
.bkScopeBtn + .bkScopeBtn{border-left:1px solid rgba(0,0,0,0.08);}
[data-theme="dark"] .bkScopeBtn + .bkScopeBtn{border-left-color:rgba(255,255,255,0.12);}

/* Slightly tighter toolbar on small screens */
@media (max-width: 820px){
  .bkScopeSwitch{transform:scale(.95); transform-origin:right center;}
}


/* ===== Modal rendering / Safari seam fixes ===== */
.bkModalCard{
  overflow-x: hidden;               /* prevent any full-width separators leaking */
  -webkit-transform: translateZ(0); /* stabilize compositing on Safari */
  transform: translateZ(0);
  isolation: isolate;               /* avoid backdrop/gradient bleed through */
  background-clip: padding-box;
}
.bkModalCard *{
  max-width: 100%;
  box-sizing: border-box;
}
/* Any accidental full-viewport lines inside the modal should be clipped */
.bkModalCard hr{
  width: 100%;
  max-width: 100%;
}