/* Curated replica of LayoutCalendar.vue and Design System v4; no Vue dependency. */
/* Die vier frueheren Dateien inter-400/500/600/700.woff2 waren byte-gleich; eine Datei mit Gewichtsbereich
   verhaelt sich identisch (Bereich deckt jedes Gewicht ab, also keine kuenstliche Fettung). */
@font-face { font-family: Inter; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter.woff2) format('woff2'); }
:root { --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-xl: 0 16px 48px rgba(0,0,0,.16); }
html { font-size: 16px; }
body { font-size: 14px; line-height: 1.5; }
.topnav.calendar-topbar { height: 60px; padding: 0 16px; justify-content: space-between; gap: 12px; box-shadow: var(--shadow-sm); }
.topbar-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
.brand-area { background: transparent; border: 0; display: flex; padding: 0; border-radius: 6px; }
.brand-logo { width: 32px; height: 32px; object-fit: contain; }
.main-nav { display: flex; gap: 12px; align-items: center; }
.topnav .navtab { height: 36px; padding: 0 12px; gap: 8px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 500; }
.topnav .navtab svg { width: 18px; height: 18px; }
.actions-area { display: flex; align-items: center; gap: 8px; }
.actions-area .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
.actions-area .icon-btn svg { width: 18px; height: 18px; }
.actions-area .inkognito-btn { width: auto; padding: 0 10px; gap: 6px; font-size: 12px; }
.inkognito-btn[aria-pressed=true] { color: var(--primary); background: var(--primary-light); }
.divider-vertical { height: 24px; width: 1px; background: var(--border-color); margin: 0 4px; }
.user-avatar { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--secondary); color: white; font-size: 12px; font-weight: 600; }
.account-overlay { justify-content: flex-end; padding: 0; }
.account-drawer { width: 360px; height: 100%; background: var(--bg-surface); box-shadow: var(--shadow-xl); }
.account-theme { margin: 20px 0; width: 100%; justify-content: flex-start; }
.inkognito .private-value, .inkognito .ev-name, .inkognito .a-name, .inkognito .ct-client, .inkognito .mt-client, .inkognito #clientRows [data-profile].text-link, .inkognito #financeRows td:nth-child(2) strong { visibility: hidden; }
.btn { min-height: 42px; border-radius: 12px; font-weight: 600; line-height: 1; }
.btn--sm { min-height: 26px; font-size: 12px; padding: 6px 12px; }
.demo-page { padding: 12px 32px 24px; max-width: none; }
.page-header { min-height: 48px; padding: 0 0 8px; margin: 0 0 16px; }
.page-header h1 { font-weight: 600; font-size: 20px; }
.page-header p { display: none; }
.card__header { padding: 12px; min-height: 48px; background: var(--bg-surface); }
.card__title { font-size: 15px; }
.card__body { padding: 12px; }
.form-row { grid-template-columns: 140px minmax(0,1fr); gap: 12px; }
.form-row label { font-size: 12px; color: var(--text-secondary); }
.form-input, .form-select { border-radius: 10px; }
.search-field { width: 300px; background: var(--bg-surface); border: 1px solid var(--border-color); }
.data-table th, .data-table td { padding: 8px 12px; }
.data-table th { height: 40px; border-bottom-width: 2px; }
.overlay { background: rgba(15,23,42,.55); }
.modal-container { border-radius: 20px; }
@media (min-width: 1024px) and (max-width: 1150px) {
    .main-nav { gap: 4px; } .topbar-left { gap: 16px; } .topnav .navtab { padding: 0 8px; }
    .actions-area { gap: 4px; } .actions-area .inkognito-btn span { display: none; }
}

/* CalendarClientsView -> ProfileModal -> ProfileDetail -> StammdatenTab. */
.client-toolbar { justify-content: flex-start; gap: 16px; margin: 12px 0 16px; }
.client-toolbar #clientCount { margin-left: auto; }
.profile-name { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); font-weight: 500; }
.profile-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: var(--bg-secondary); color: var(--text-secondary); }
.profile-avatar svg { width: 16px; height: 16px; }
.profile-dialog { display: flex; flex-direction: column; width: min(1400px,95vw); height: min(720px,90vh); border-radius: 20px; box-shadow: var(--shadow-xl); overflow: hidden; background: var(--bg-surface); }
#profileDialogBody { flex: 1; min-height: 0; }
#profileDialogBody .client-layout { height: 100%; grid-template-columns: 300px minmax(0,1fr); gap: 0; }
.profiles-sidebar { overflow-y: auto; background: var(--bg-secondary); border-right: 1px solid var(--border-color); }
.profiles-sidebar .card__header { background: transparent; }
.profile-sidebar-search { padding: 12px; }
.profile-sidebar-search .search-field { width: 100%; }
.client-list { padding: 0 12px 12px; }
.client-list button { gap: 10px; padding: 12px; margin-bottom: 4px; }
.profile-list-label { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.profile-list-label small { font-size: 12px; color: var(--text-secondary); }
.profile-detail { padding: 24px; overflow: auto; background: var(--bg-primary); }
.profile-heading { border-bottom: 1px solid var(--border-color); padding-bottom: 16px; margin-bottom: 16px; }
.profile-heading h1 { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 600; }
.profile-heading h1 svg { width: 28px; height: 28px; color: var(--primary); }
.profile-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.profile-tabs button { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 12px; white-space: nowrap; }
.profile-tabs button svg { width: 18px; height: 18px; }
.profile-tab-count { background: var(--bg-tertiary); border-radius: 10px; padding: 0 6px; font-size: 11px; }
.profile-grid { grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); padding-top: 12px; }
.form-section-title { font-size: 12px; font-weight: 600; margin: 16px 0 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
#profileContent .form-row:last-of-type { margin-bottom: 0; }

.profile-dialog .modal-title { font-size: 20px; }
.modal-title svg { color: var(--primary); }

/* Income: InvoiceList.vue result row and standard FinanceTableShell table. */
.income-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px; }
.income-toolbar .search-field { width: 200px; padding: 0 8px; background: var(--bg-secondary); }
.income-toolbar input { height: 32px; font-size: 12px; }
.income-toolbar .form-select { height: 32px; padding: 4px 8px; font-size: 12px; background: var(--bg-surface); border-color: var(--border-color); }
.income-toolbar .finance-filter select { min-width: 82px; }
.income-toolbar .seg button { font-size: 12px; }
.income-status { display: flex; gap: 4px; }
.income-status .icon-btn { width: 32px; height: 32px; border-radius: 8px; }
.income-status .icon-btn svg { width: 18px; height: 18px; }
.income-status [aria-pressed=true] { color: var(--primary); background: var(--primary-light); }
.income-status [data-income-status=Offen] { color: var(--t-super); }
.income-status [data-income-status=Bezahlt] { color: var(--t-therapy); }
.income-results { display: flex; align-items: center; gap: 24px; margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); }
.income-results > div { display: flex; align-items: baseline; gap: 8px; }
.income-results strong { font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.income-results #financeCount { margin-left: auto; }
.income-view .income-paid { color: var(--t-therapy); font-weight: 600; }
.income-table-scroll { max-height: calc(100vh - 290px); overflow: auto; }
.income-table { min-width: 880px; }
.income-table th { position: sticky; top: 0; background: var(--bg-surface); z-index: 1; }
.income-table th button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.income-sort-icon { display: flex; }
.income-sort-icon svg { width: 16px; height: 16px; }
.income-table [aria-sort=ascending] button, .income-table [aria-sort=descending] button { color: var(--primary); }
.income-table tbody td { height: 54px; }
.income-table .text-link { font-weight: 500; color: var(--text-primary); }
.income-payment span, .income-payment small { display: block; }
.income-payment small { font-size: 11px; color: var(--text-secondary); }
.income-payment-open { color: var(--text-secondary); }
.income-table tfoot td { padding: 12px; }
.income-hint { font-size: 12px; color: var(--text-secondary); margin-top: 12px; }

/* Expenses reuse the standard finance shell; sum belongs in the toolbar. */
.expense-summary { margin-left: auto; display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.expense-summary strong, .expense-amount { font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.expense-view .income-table-scroll { max-height: calc(100vh - 260px); }
.expense-view .income-table { min-width: 1080px; }
.expense-view [data-expense-status="Beleg fehlt"] { color: var(--t-super); }
.expense-view [data-expense-status="Beleg OK"], .expense-paid { color: var(--t-therapy); }
.expense-paid { font-size: 11px; }
.expense-view #financeCount { float: right; }

/* TaxOverviewTab / design-system KPI cards: number first, aligned footer. */
.overview-view .kpi-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; margin: 16px 0; }
.overview-view .kpi-card { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto 1fr auto; grid-template-areas: 'label icon' 'value icon' 'meta meta' 'axis axis'; gap: 2px 12px; padding: 16px; text-align: left; cursor: pointer; position: relative; color: var(--text-primary); }
.overview-view .kpi-label { grid-area: label; font-size: 12px; font-weight: 500; margin: 0; }
.overview-view .kpi-value { grid-area: value; font-size: 24px; line-height: 1.15; letter-spacing: -.5px; }
.overview-view .kpi-icon { grid-area: icon; position: static; width: 36px; height: 36px; padding: 0; justify-content: center; align-items: center; }
.overview-view .kpi-icon svg { width: 18px; height: 18px; }
.overview-view .kpi-icon--success { color: var(--t-therapy); background: var(--b-therapy); }
.overview-view .kpi-icon--error { color: var(--error); background: rgba(220,53,69,.1); }
.overview-view .kpi-icon--warning { color: var(--t-super); background: var(--b-super); }
.overview-view .kpi-meta { grid-area: meta; border-top: 1px solid var(--border-color); margin-top: 8px; padding: 8px 16px 0 0; font-size: 11px; }
.overview-view .kpi-achse { grid-area: axis; color: var(--text-secondary); font-size: 11px; font-style: italic; }
.overview-view .kpi-arrow { position: absolute; right: 12px; bottom: 14px; width: 16px; height: 16px; color: var(--text-secondary); }
.overview-view .kpi-card:hover { border-color: var(--primary); background: var(--bg-hover); }
.overview-balance { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; margin-bottom: 16px; }
.overview-balance span, .overview-balance small { display: block; }
.overview-balance span { font-size: 14px; font-weight: 600; }
.overview-balance small { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.overview-balance strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.overview-section { margin-bottom: 16px; }
.overview-section tbody td { height: 48px; }

/* Quarterly overview follows TaxOverviewTab, with keyboard-operable month rows. */
.quarter-toggle { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 0; color: var(--text-primary); font-size: 14px; text-align: left; }
.quarter-toggle span { color: var(--text-secondary); font-size: 12px; margin-left: 8px; }
.quarter-chevron { width: 14px; height: 14px; transition: transform .15s; }
.quarter-chevron.is-expanded { transform: rotate(90deg); }
.quarter-row .quarter-result { font-weight: 600; }
.quarter-month { background: var(--bg-secondary); font-size: 12px; }
.quarter-month td:first-child { padding-left: 42px; color: var(--text-secondary); }
.overview-view .quarter-income, .overview-view .quarter-result { color: var(--t-therapy); }
.overview-view .quarter-expense, .overview-view .quarter-loss { color: var(--error); }
#quarterTable tfoot td { padding: 12px; font-weight: 600; }