/* Fonts LOKAL (kein externer Request mehr) — siehe /vendor/fonts/fonts.css.
Tabler Core + Tabler Icons werden im Layout- als geladen —
WICHTIG: vor dieser Datei, damit die Token-Overrides hier gewinnen. */
@import url("/vendor/fonts/fonts.css");
/* Fix Tabler margin issue */
@media (min-width: 992px) {
:host, :root {
margin-left: 0 !important;
}
}
/* Custom Theme Variables */
:root {
--tblr-primary: #206bc4;
--tblr-secondary: #626976;
--tblr-success: #2fb344;
--tblr-info: #4299e1;
--tblr-warning: #f59e0b;
--tblr-danger: #d63939;
/* Brand colors */
--color-brand-primary: #206bc4;
--color-brand-secondary: #626976;
/* Conversion One Custom Colors */
--color-brand-blue: #2563eb;
--color-brand-purple: #9333ea;
--color-brand-dark: #1e40af;
/* Global font size adjustment */
--tblr-font-size-base: 0.84rem;
}
/* Apply global font size */
body {
font-size: var(--tblr-font-size-base);
}
/* Custom utilities */
.sidebar-link {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
color: #626976;
text-decoration: none;
border-radius: 0.375rem;
transition: all 0.2s;
}
.sidebar-link:hover {
background-color: rgba(32, 107, 196, 0.1);
color: #206bc4;
}
.sidebar-link.active {
background-color: #206bc4;
color: white;
}
.sidebar-link i {
margin-right: 0.75rem;
font-size: 1.25rem;
}
/* Brand gradient for login */
.brand-gradient {
background: linear-gradient(135deg, #2563eb 0%, #9333ea 50%, #1e40af 100%);
}
/* Chart container styling */
.chart-container {
position: relative;
height: 300px;
}
/* Status badges */
.badge-vacant {
background-color: #2fb344;
color: white;
}
.badge-occupied {
background-color: #626976;
color: white;
}
.badge-active {
background-color: #2fb344;
color: white;
}
.badge-inactive {
background-color: #d63939;
color: white;
}
/* Photo grid for property/unit images */
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.photo-grid-item {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 0.5rem;
cursor: pointer;
transition: transform 0.2s;
}
.photo-grid-item:hover {
transform: scale(1.05);
}
.photo-grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* TomSelect Control (the visible select box) - prevent resizing */
.ts-wrapper .ts-control {
min-height: auto !important;
height: 2.5rem !important; /* Fixed height to prevent growing */
padding: 0.5625rem 3rem 0.5625rem 1rem !important;
border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
border-radius: var(--tblr-border-radius) !important;
background-color: var(--tblr-bg-forms) !important;
font-size: 0.875rem !important;
line-height: 1.25rem !important;
overflow: hidden !important; /* Prevent content overflow */
}
.ts-wrapper.single .ts-control {
display: flex !important;
align-items: center !important;
}
.ts-wrapper .ts-control .item {
font-size: 0.875rem !important;
line-height: 1.25rem !important;
padding: 0 !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* Input field inside TomSelect */
.ts-wrapper .ts-control input {
font-size: 0.875rem !important;
line-height: 1.25rem !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
flex: 1 !important;
min-width: 0 !important;
}
.ts-wrapper .ts-control input:focus {
outline: none !important;
box-shadow: none !important;
}
/* When input is focused, hide the selected item to make room */
.ts-wrapper.focus .ts-control .item {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* When not focused, hide the input placeholder */
.ts-wrapper:not(.focus) .ts-control input {
width: 0 !important;
padding: 0 !important;
}
/* TomSelect dropdown styling fixes */
.ts-dropdown {
background-color: #fff !important;
border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
border-radius: 0.375rem !important;
margin-top: 0.25rem !important;
}
.ts-dropdown .option {
background-color: #fff !important;
padding: 0.5rem 0.75rem !important;
font-size: 0.875rem !important;
border-bottom: 1px solid var(--tblr-border-color-light, #f1f3f5) !important;
color: var(--tblr-body-color, #1e293b) !important;
}
.ts-dropdown .option:last-child {
border-bottom: none !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
background-color: var(--tblr-primary-lt, #e7f1ff) !important;
color: var(--tblr-primary, #206bc4) !important;
}
/* Dark mode support for TomSelect */
[data-bs-theme="dark"] .ts-wrapper .ts-control {
background-color: var(--tblr-bg-forms, #1e293b) !important;
border-color: var(--tblr-border-color, #374151) !important;
color: var(--tblr-body-color, #e5e7eb) !important;
}
[data-bs-theme="dark"] .ts-wrapper .ts-control .item {
color: var(--tblr-body-color, #e5e7eb) !important;
}
[data-bs-theme="dark"] .ts-wrapper .ts-control input {
color: var(--tblr-body-color, #e5e7eb) !important;
}
[data-bs-theme="dark"] .ts-wrapper .ts-control input::placeholder {
color: var(--tblr-secondary-color, rgba(229, 231, 235, 0.5)) !important;
}
[data-bs-theme="dark"] .ts-dropdown {
background-color: var(--tblr-dark, #1e293b) !important;
border-color: var(--tblr-border-color-dark, #374151) !important;
}
[data-bs-theme="dark"] .ts-dropdown .option {
background-color: var(--tblr-dark, #1e293b) !important;
border-bottom-color: var(--tblr-border-color-dark, #374151) !important;
color: var(--tblr-body-color, #f8fafc) !important;
}
[data-bs-theme="dark"] .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-dropdown .option.active {
background-color: var(--tblr-primary-lt, #1e3a5f) !important;
}
/* Native select dropdown styling - with !important to override Tabler */
.form-select {
border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
border-radius: 0.375rem !important;
padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
font-size: 0.875rem !important;
line-height: 1.5 !important;
color: var(--tblr-body-color, #1e293b) !important;
background-color: #fff !important;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.form-select:focus {
border-color: var(--tblr-primary, #206bc4) !important;
outline: 0 !important;
box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25) !important;
}
/* Style for select dropdown options - note: limited browser support */
.form-select option {
padding: 0.5rem 0.75rem !important;
font-size: 0.875rem !important;
background-color: #fff !important;
color: var(--tblr-body-color, #1e293b) !important;
}
.form-select option:hover {
background-color: var(--tblr-primary-lt, #e7f1ff) !important;
color: var(--tblr-primary, #206bc4) !important;
}
.form-select option:checked,
.form-select option:active,
.form-select option[selected] {
background-color: var(--tblr-primary, #206bc4) !important;
color: white !important;
}
/* Dark mode support for native selects */
[data-bs-theme="dark"] .form-select {
background-color: var(--tblr-dark, #1e293b) !important;
border-color: var(--tblr-border-color-dark, #374151) !important;
color: var(--tblr-body-color, #f8fafc) !important;
}
[data-bs-theme="dark"] .form-select option {
background-color: var(--tblr-dark, #1e293b) !important;
color: var(--tblr-body-color, #f8fafc) !important;
}
[data-bs-theme="dark"] .form-select option:hover {
background-color: var(--tblr-primary-lt, #1e3a5f) !important;
}
[data-bs-theme="dark"] .form-select option:checked,
[data-bs-theme="dark"] .form-select option:active,
[data-bs-theme="dark"] .form-select option[selected] {
background-color: var(--tblr-primary, #206bc4) !important;
}
/* Table sorting */
.sortable {
cursor: pointer;
user-select: none;
}
.sortable:hover {
background-color: rgba(32, 107, 196, 0.05);
}
/* Loading states */
.spinner-border-sm {
width: 1rem;
height: 1rem;
border-width: 0.15em;
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
.photo-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.sidebar-link {
padding: 0.75rem 1rem;
}
}
/* Navigation spacing and font size */
.navbar-nav .nav-item {
padding-right: 5px;
}
.navbar-nav .nav-link {
font-size: 0.82rem;
}
.navbar-nav .nav-link-title {
font-size: 0.82rem;
}
/* Property card badge sizing */
.card .badge.position-absolute {
font-size: 0.7rem !important;
padding: 0.3rem 0.5rem !important;
line-height: 1.3 !important;
white-space: normal !important;
max-width: 90%;
backdrop-filter: blur(4px);
display: inline-block !important;
height: auto !important;
min-height: auto !important;
width: auto !important;
text-align: left !important;
}
/* Logo Dark Mode styling */
[data-bs-theme="dark"] .logo-darkmode {
filter: brightness(0) invert(1);
}
/* Print styles */
@media print {
.no-print {
display: none !important;
}
}
/* ============================================================
WEALTH MANAGER THEME OVERLAY
------------------------------------------------------------
Layered on top of Tabler — keeps Tabler intact, overrides
via CSS variables and selective component rules.
Parallel light (cream) + dark (espresso) palettes.
============================================================ */
:root {
/* === LIGHT MODE: Cream / Paper === */
--wm-bg: #FAF6EF;
--wm-bg-card: #FFFFFF;
--wm-bg-sub: #F2EDE2;
--wm-bg-stripe: rgba(229, 223, 208, 0.22);
--wm-ink: #1A1F2E;
--wm-ink-soft: #2C3340;
--wm-muted: #6B7280;
--wm-muted-light: #9CA3AF;
--wm-line: #E5DFD0;
--wm-line-strong: #C9C0AB;
--wm-navy: #1F4E79;
--wm-navy-rgb: 31, 78, 121;
--wm-navy-dark: #14385A;
--wm-gold: #9C7C38;
--wm-gold-rgb: 156, 124, 56;
--wm-wine: #7B2D2D;
--wm-wine-rgb: 123, 45, 45;
--wm-success: #2F6B3D;
--wm-success-rgb: 47, 107, 61;
--wm-warn: #B45309;
--wm-warn-rgb: 180, 83, 9;
--wm-warn-bg: #FEF7E8;
--wm-warn-border: #F2D88A;
/* Fonts */
--wm-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--wm-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--wm-mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;
/* Override Tabler core tokens */
--tblr-body-bg: var(--wm-bg);
--tblr-body-color: var(--wm-ink-soft);
--tblr-card-bg: var(--wm-bg-card);
--tblr-card-color: var(--wm-ink-soft);
--tblr-card-border-color: var(--wm-line);
--tblr-border-color: var(--wm-line);
--tblr-border-color-translucent: var(--wm-line);
--tblr-primary: var(--wm-navy);
--tblr-primary-rgb: var(--wm-navy-rgb);
--tblr-primary-darken: var(--wm-navy-dark);
--tblr-secondary: var(--wm-muted);
--tblr-success: var(--wm-success);
--tblr-success-rgb: var(--wm-success-rgb);
--tblr-warning: var(--wm-warn);
--tblr-warning-rgb: var(--wm-warn-rgb);
--tblr-danger: var(--wm-wine);
--tblr-danger-rgb: var(--wm-wine-rgb);
--tblr-font-sans-serif: var(--wm-sans);
--tblr-font-monospace: var(--wm-mono);
--tblr-heading-color: var(--wm-ink);
--tblr-link-color: var(--wm-navy);
--tblr-link-color-rgb: var(--wm-navy-rgb);
--tblr-link-hover-color: var(--wm-navy-dark);
/* Unify Bootstrap radius utilities (.rounded-*) with Tabler/wm radius.
Bootstrap's default is 0.375rem (6px) which mismatches our 4px cards. */
--bs-border-radius: 4px;
--bs-border-radius-sm: 3px;
--bs-border-radius-lg: 6px;
--bs-border-radius-xl: 8px;
--bs-border-radius-pill: 50rem;
}
/* === DARK MODE: Espresso / Dark Leather === */
[data-bs-theme="dark"] {
--wm-bg: #1A1714;
--wm-bg-card: #221E1A;
--wm-bg-sub: #2A2620;
--wm-bg-stripe: rgba(74, 68, 56, 0.18);
--wm-ink: #F5EFE3;
--wm-ink-soft: #D8D2C5;
--wm-muted: #95908A;
--wm-muted-light: #6C6862;
--wm-line: #3A332A;
--wm-line-strong: #4D4438;
--wm-navy: #5B95C9;
--wm-navy-rgb: 91, 149, 201;
--wm-navy-dark: #4A7FAE;
--wm-gold: #C9A654;
--wm-gold-rgb: 201, 166, 84;
--wm-wine: #C66565;
--wm-wine-rgb: 198, 101, 101;
--wm-success: #5C9C6A;
--wm-success-rgb: 92, 156, 106;
--wm-warn: #D89548;
--wm-warn-rgb: 216, 149, 72;
--wm-warn-bg: #2E2620;
--wm-warn-border: #5D4A2A;
/* Override Tabler dark tokens */
--tblr-body-bg: var(--wm-bg);
--tblr-body-color: var(--wm-ink-soft);
--tblr-card-bg: var(--wm-bg-card);
--tblr-card-color: var(--wm-ink-soft);
--tblr-card-border-color: var(--wm-line);
--tblr-border-color: var(--wm-line);
--tblr-border-color-translucent: var(--wm-line);
--tblr-primary: var(--wm-navy);
--tblr-primary-rgb: var(--wm-navy-rgb);
--tblr-secondary: var(--wm-muted);
--tblr-success: var(--wm-success);
--tblr-warning: var(--wm-warn);
--tblr-danger: var(--wm-wine);
--tblr-heading-color: var(--wm-ink);
--tblr-link-color: var(--wm-navy);
}
/* === BODY === */
body {
background:
radial-gradient(ellipse at top left, rgba(var(--wm-navy-rgb), 0.04), transparent 60%),
radial-gradient(ellipse at bottom right, rgba(var(--wm-gold-rgb), 0.05), transparent 60%),
var(--wm-bg);
background-attachment: fixed;
font-family: var(--wm-sans);
font-feature-settings: "ss01", "cv11", "tnum";
color: var(--wm-ink-soft);
}
/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--wm-serif);
font-weight: 500;
color: var(--wm-ink);
letter-spacing: -0.01em;
}
h1, .h1 { font-weight: 400; }
/* Subheaders (Tabler's tiny uppercase labels) get mono + gold accent */
.subheader,
.card-subtitle,
.text-uppercase.text-secondary,
.text-uppercase.text-muted {
font-family: var(--wm-mono);
font-size: 0.7rem !important;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--wm-muted) !important;
text-transform: uppercase;
}
/* Numbers in tables, KPI values, mono contexts */
.tabular-nums,
.font-monospace,
code, kbd, pre, samp {
font-family: var(--wm-mono);
font-feature-settings: "tnum";
}
/* === PAGE HEADER (Editorial Masthead Style) === */
.page-header {
border-top: 2px solid var(--wm-ink);
border-bottom: 1px solid var(--wm-line-strong);
background: transparent;
margin-top: 0 !important;
margin-bottom: 1.5rem;
padding: 0 !important;
height: 4.5rem;
min-height: 4.5rem;
display: flex;
align-items: center;
}
.page-header > .container-xl,
.page-header > .container-fluid {
width: 100%;
}
.page-header .page-title {
font-family: var(--wm-serif);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.7rem;
color: var(--wm-ink);
letter-spacing: -0.015em;
margin: 0;
}
.page-header .page-pretitle,
.page-header .page-subtitle {
font-family: var(--wm-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--wm-muted);
}
/* === CARDS === */
.card {
border: 1px solid var(--wm-line);
border-radius: 4px;
box-shadow: none;
background: var(--wm-bg-card);
}
/* Images / lazy-bg / card-img-top inside a card must match the card's
INNER border curve (= outer radius - border width = 4px - 1px = 3px).
Otherwise the inner content's corners visibly mismatch the card frame. */
.card .card-img-top,
.card > a > .card-img-top,
.card > a > img:first-child,
.card > .img-responsive.rounded-top,
.card > .lazy-bg.rounded-top,
.card > .img-responsive:first-child,
.card > .lazy-bg:first-child {
border-top-left-radius: 3px !important;
border-top-right-radius: 3px !important;
}
.card .card-img-bottom,
.card > .img-responsive.rounded-bottom,
.card > .lazy-bg.rounded-bottom,
.card > .img-responsive:last-child,
.card > .lazy-bg:last-child {
border-bottom-left-radius: 3px !important;
border-bottom-right-radius: 3px !important;
}
/* Regular card-headers (with .card-title): flat, just a divider below */
.card-header {
background: transparent;
border-bottom: 1px solid var(--wm-line);
padding: 0.85rem 1.15rem;
}
.card-header .card-title {
font-family: var(--wm-serif);
font-weight: 500;
font-size: 1rem;
color: var(--wm-ink);
margin: 0;
letter-spacing: -0.005em;
}
/* Tabler's .card-header-tabs (the ) overlays the entire parent
.card-header via negative margins + own bg. We only tint the bg subtly
so the tab strip is visually distinct from the card body, without
touching margins or adding borders (Tabler's negative-margin layout
is too fragile for added side borders — they collide with the card's
own border). */
.nav-tabs.card-header-tabs {
background: var(--wm-bg-sub) !important;
}
.card-footer {
background: var(--wm-bg-sub);
border-top: 1px solid var(--wm-line);
}
/* KPI cards (opt-in via .wm-kpi) with colored top accent */
.card.wm-kpi {
border-top: 3px solid var(--wm-navy);
border-radius: 0;
}
.card.wm-kpi.accent-gold { border-top-color: var(--wm-gold); }
.card.wm-kpi.accent-wine { border-top-color: var(--wm-wine); }
.card.wm-kpi.accent-success { border-top-color: var(--wm-success); }
.card.wm-kpi .card-body { padding: 1rem 1.15rem 1.1rem; }
.card.wm-kpi .subheader { margin-bottom: 0.6rem; }
.card.wm-kpi .h1, .card.wm-kpi .h2, .card.wm-kpi .h3 {
font-family: var(--wm-serif);
font-weight: 500;
letter-spacing: -0.02em;
}
/* === SIDEBAR === */
.navbar-vertical {
background: var(--wm-bg-sub);
border-right: 1px solid var(--wm-line-strong);
box-shadow: none;
}
[data-bs-theme="dark"] .navbar-vertical {
background: #15110E;
border-right-color: var(--wm-line);
}
/* Desktop only: Sidebar logo area forms a continuous masthead-band with page-header.
Mobile retains Tabler default layout (hamburger + logo + user/theme inline at top). */
@media (min-width: 992px) {
.navbar-vertical .navbar-brand {
height: 4.5rem;
min-height: 4.5rem;
padding: 0 1.25rem;
margin-bottom: 1.5rem;
border-top: 2px solid var(--wm-ink);
border-bottom: 1px solid var(--wm-line-strong);
display: flex;
align-items: center;
}
.navbar-vertical .navbar-brand a {
display: flex;
align-items: center;
}
}
/* Nav links: transparent 3px left border → becomes ink on hover, navy on active.
border-radius is forced with !important to override the layout's inline