.kpi-tile{display: flex;flex-direction: column;gap: 0.25rem;padding: var(--vaadin-padding-m,1rem);border-radius: var(--vaadin-radius-l,8px);border: 1px solid var(--vaadin-border-color-secondary);background: var(--aura-surface-color);color: var(--vaadin-text-color);min-width: 12rem}.kpi-tile-title{font-size: var(--aura-font-size-s);color: var(--vaadin-text-color-secondary);font-weight: var(--aura-font-weight-medium)}.kpi-tile-value{font-size: calc(var(--aura-font-size-xl) * 1.4);font-weight: var(--aura-font-weight-semibold);font-variant-numeric: tabular-nums}.kpi-tile-caption{font-size: var(--aura-font-size-xs);color: var(--vaadin-text-color-secondary)}.kpi-tile-trend[data-direction='up']{color: var(--aura-green-text)}.kpi-tile-trend[data-direction='down']{color: var(--aura-red-text)}.kpi-tile-success{border-color: var(--aura-green)}.kpi-tile-warning{border-color: var(--aura-orange)}.kpi-tile-error{border-color: var(--aura-red)}.kpi-tile-clickable{cursor: pointer}vaadin-grid::part(budget-unfavourable),.budget-unfavourable{color: var(--aura-red-text,var(--vaadin-error-color,#c9453b));font-weight: var(--aura-font-weight-semibold,600)}vaadin-grid::part(budget-warning),.budget-warning{color: var(--aura-orange-text,var(--vaadin-warning-color,#e08a1e))}vaadin-grid::part(budget-favourable),.budget-favourable{color: var(--aura-green-text,var(--vaadin-success-color,#2e9e6a))}.dashboard-grid{display: grid;grid-template-columns: repeat(12,minmax(0,1fr));gap: 1rem;width: 100%}.dashboard-widget{grid-column: span 6;border: 1px solid var(--vaadin-border-color,rgba(0,0,0,0.12));border-radius: 0.5rem;padding: 0.75rem;min-width: 0}.dashboard-widget.span-3{grid-column: span 3}.dashboard-widget.span-12{grid-column: span 12}.dashboard-widget h4{margin: 0 0 0.5rem 0}@media (max-width: 1199px){.dashboard-grid{grid-template-columns: repeat(6,minmax(0,1fr))}.dashboard-widget,.dashboard-widget.span-3,.dashboard-widget.span-12{grid-column: span 6}}@media (max-width: 767px){.dashboard-grid{grid-template-columns: 1fr}.dashboard-widget,.dashboard-widget.span-3,.dashboard-widget.span-12{grid-column: span 1}}.portal{display: flex;flex-direction: column;min-height: 100vh;box-sizing: border-box}.portal-header{display: flex;align-items: center;gap: 0.75rem;padding: 0.5rem 1rem;border-bottom: 1px solid var(--vaadin-border-color,#ddd)}.portal-logo{height: 36px;width: auto}.portal-sacco-name{font-weight: 600;flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.portal-top-nav{display: flex;flex-wrap: wrap;gap: 0.25rem;padding: 0 1rem;border-bottom: 1px solid var(--vaadin-border-color,#ddd)}.portal-nav-link{display: inline-flex;align-items: center;gap: 0.35rem;min-height: 44px;min-width: 44px;padding: 0 0.75rem;text-decoration: none;color: inherit}.portal-nav-link[highlight]{font-weight: 600}.portal-content{flex: 1;padding: 1rem;max-width: 1100px;width: 100%;margin: 0 auto;box-sizing: border-box}.portal-bottom-nav{display: none}.portal-card{border: 1px solid var(--vaadin-border-color,#ddd);border-radius: 8px;padding: 0.75rem 1rem;margin-bottom: 0.75rem;box-sizing: border-box;width: 100%}.portal-card-title{font-weight: 600}.portal-amount{text-align: right;font-variant-numeric: tabular-nums;white-space: nowrap}.portal-row{display: flex;justify-content: space-between;gap: 1rem;flex-wrap: wrap}.portal-muted{color: var(--vaadin-text-color-secondary,#666);font-size: 0.875rem}.portal-tiles{display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 0.75rem}.portal-actions vaadin-button,.portal vaadin-button{min-height: 44px}.portal-auth{max-width: 420px;margin: 2rem auto;padding: 0 1rem;box-sizing: border-box}.portal-overdue{color: var(--vaadin-error-color,#c62828);font-weight: 600}@media (max-width: 767px){.portal-top-nav{display: none}.portal-bottom-nav{display: flex;justify-content: space-around;position: fixed;bottom: 0;left: 0;right: 0;background: var(--vaadin-background-color,#fff);border-top: 1px solid var(--vaadin-border-color,#ddd);z-index: 10}.portal-bottom-nav .portal-nav-link{flex-direction: column;font-size: 0.75rem;padding: 0.25rem;gap: 0}.portal-content{padding: 0.75rem 0.75rem 72px}.portal-desktop-only{display: none}}@media (min-width: 768px){.portal-mobile-only{display: none}}:root{--sacco-training: #ff9800;--sacco-training-text: #1a1a1a}.training-banner{position: sticky;top: 0;z-index: 1000;display: flex;flex-wrap: wrap;gap: 0.5rem 1.5rem;align-items: center;justify-content: center;width: 100%;box-sizing: border-box;padding: 0.35rem 1rem;background: var(--sacco-training);color: var(--sacco-training-text);font-weight: 600}.training-banner a{color: var(--sacco-training-text);text-decoration: underline}.training-banner-otp{font-family: monospace}body.training::after{content: "";position: fixed;inset: 0;border: 4px solid var(--sacco-training);pointer-events: none;z-index: 10000}.main-layout-app-name{display: block;padding: 0.75rem 1rem;font-weight: 600;font-size: 1.1rem}.main-layout-header{padding-inline-end: 1rem}.main-layout-title{font-size: 1.5rem;margin: 0}.main-layout-date{white-space: nowrap}.two-factor-banner{background: var(--vaadin-error-color,#c62828);color: white;padding: 0.25rem 1rem;font-weight: 600;text-align: center}