/* Self-hosted Satoshi font faces */ @font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../fonts/Satoshi-Black.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* EntroVy Brand Variables */ :root { --entrovy-black: #000000; --entrovy-cyan: #2dafe6; /* EntroVy Blue */ --entrovy-cyan-600: #1b99c7; /* Hover */ --entrovy-cyan-200: #aee3f7; /* Subtle */ --entrovy-white: #ffffff; /* Override Bootstrap primary */ --bs-primary: var(--entrovy-cyan); } /* Theming variables (light by default) */ :root { --color-bg: #f8f9fa; --color-text: #1a1a1a; --color-card-bg: #ffffff; --color-border: rgba(0, 0, 0, 0.1); --footer-bg: #f8f9fa; --footer-text: #6c757d; /* Hero (inverted behavior): dark in light mode */ --hero-bg: #000000; --hero-text: #ffffff; --hero-subtext: #e8f6ff; /* Table & UI element colors */ --table-header-bg: #f1f3f5; --table-row-alt-bg: #fcfdfe; --table-hover-bg: #f6f8fb; --input-bg: #ffffff; --input-text: #1a1a1a; --input-border: rgba(0, 0, 0, 0.2); --dropdown-bg: #ffffff; --dropdown-text: #1a1a1a; --muted-text: #6c757d; } /* System dark mode when no explicit override is set */ @media (prefers-color-scheme: dark) { :root { --color-bg: #000000; --color-text: #e9ecef; --color-card-bg: #000000; --color-border: rgba(255, 255, 255, 0.12); --footer-bg: #000000; --footer-text: #adb5bd; /* Hero becomes light in dark mode */ --hero-bg: #ffffff; --hero-text: #0b0c10; --hero-subtext: #2b2f33; /* Table & UI */ --table-header-bg: #000000; --table-row-alt-bg: #000000; --table-hover-bg: #0a0a0a; --input-bg: #000000; --input-text: #e9ecef; --input-border: rgba(255, 255, 255, 0.16); --dropdown-bg: #000000; --dropdown-text: #e9ecef; --muted-text: #dfe4ea; } } /* Explicit overrides via data-theme on */ [data-theme="light"] { --color-bg: #f8f9fa; --color-text: #1a1a1a; --color-card-bg: #ffffff; --color-border: rgba(0, 0, 0, 0.1); --footer-bg: #f8f9fa; --footer-text: #6c757d; --hero-bg: #000000; --hero-text: #ffffff; --hero-subtext: #e8f6ff; --table-header-bg: #f1f3f5; --table-row-alt-bg: #fcfdfe; --table-hover-bg: #f6f8fb; --input-bg: #ffffff; --input-text: #1a1a1a; --input-border: rgba(0, 0, 0, 0.2); --dropdown-bg: #ffffff; --dropdown-text: #1a1a1a; --muted-text: #6c757d; } [data-theme="dark"] { --color-bg: #000000; --color-text: #e9ecef; --color-card-bg: #000000; --color-border: rgba(255, 255, 255, 0.12); --footer-bg: #000000; --footer-text: #adb5bd; --hero-bg: #ffffff; --hero-text: #0b0c10; --hero-subtext: #2b2f33; --table-header-bg: #000000; --table-row-alt-bg: #000000; --table-hover-bg: #0a0a0a; --input-bg: #000000; --input-text: #e9ecef; --input-border: rgba(255, 255, 255, 0.16); --dropdown-bg: #000000; --dropdown-text: #e9ecef; --muted-text: #dfe4ea; } /* Main Styles for Austrian Dunning Letter Generator */ /* Global styles */ body { font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; background-color: var(--color-bg); color: var(--color-text); } /* Header */ .navbar-brand { font-weight: 700; } /* Content sections */ .section-title { border-bottom: 2px solid #dee2e6; padding-bottom: 0.5rem; margin-bottom: 1.5rem; } .card { border-radius: 0.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); margin-bottom: 1.5rem; background-color: var(--color-card-bg); color: var(--color-text); border: 1px solid var(--color-border); } .card-header { background-color: var(--table-header-bg); color: var(--color-text); border-bottom: 1px solid var(--color-border); } /* KPI dashboard widgets */ .dashboard-widget { border-radius: 0.5rem; padding: 1rem 1.25rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); border: 1px solid rgba(0, 0, 0, 0.085); } .dashboard-widget .widget-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem 0; } .dashboard-widget .widget-value { font-size: 2rem; font-weight: 700; line-height: 1.1; } /* Buttons and actions */ .btn-dunning { background-color: #007bff; border-color: #007bff; color: white; } .btn-dunning:hover { background-color: #0069d9; border-color: #0062cc; color: white; } /* Status indicators */ .status-badge { font-size: 0.875rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } /* Status-spezifische Farben (erweitert Bootstrap-Palette) */ .bg-orange { background-color: #fd7e14 !important; color: white !important; } .bg-purple { background-color: #6f42c1 !important; color: white !important; } .bg-cyan { background-color: #17a2b8 !important; color: white !important; } /* Überschreibungen für spezifische Status-Badges */ .badge.bg-primary.overdue-no-dunning { background-color: #fd7e14 !important; /* Orange für "Überfällig ohne Mahnung" */ } .badge.bg-dark.legal-dunning { background-color: #6f42c1 !important; /* Lila für "Mahnverfahren" */ } .badge.bg-dark.uncollectible { background-color: #343a40 !important; /* Dunkelgrau für "Uneinbringlich" */ } /* Dashboard Widget Farben */ .dashboard-widget.bg-orange { background-color: #fd7e14 !important; color: white !important; } .dashboard-widget.bg-purple { background-color: #6f42c1 !important; color: white !important; } .dashboard-widget.bg-cyan { background-color: #17a2b8 !important; color: white !important; } /* EntroVy Theme Extensions */ /* Navbar */ .entrovy-navbar { background-color: var(--entrovy-black) !important; border-bottom: 1px solid rgba(41, 182, 246, 0.35); } .navbar-brand-text { color: var(--entrovy-white) !important; font-weight: 800; letter-spacing: 0.3px; } /* Footer */ .site-footer { background-color: var(--footer-bg); color: var(--footer-text); border-top: 1px solid var(--color-border); } .site-footer a { color: var(--entrovy-cyan); } .site-footer a:hover { color: var(--entrovy-cyan-600); } .theme-toggle { color: var(--footer-text); border-color: var(--color-border); } .theme-toggle:hover { color: var(--entrovy-white); background-color: var(--entrovy-cyan-600); border-color: var(--entrovy-cyan-600); } /* Buttons (ensure primary matches brand) */ .btn-primary { background-color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--entrovy-cyan-600) !important; border-color: var(--entrovy-cyan-600) !important; } /* Links */ a { color: var(--entrovy-cyan); } a:hover { color: var(--entrovy-cyan-600); } /* Hero section for EntroVy */ .entrovy-hero { position: relative; background-color: var(--hero-bg); color: var(--hero-text); overflow: hidden; } .entrovy-hero .entrovy-scribble { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); width: min(70vw, 920px); opacity: 0.95; pointer-events: none; } .entrovy-hero .lockup { display: inline-block; border: 3px solid var(--hero-text); padding: 1rem 1.25rem; } .entrovy-hero .lockup .title { font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; line-height: 1.05; } .entrovy-hero .lockup .tagline { margin-top: 0.5rem; font-size: clamp(1rem, 2.2vw, 1.5rem); font-weight: 600; color: var(--hero-subtext); } .entrovy-divider { height: 2px; background: linear-gradient(90deg, rgba(41, 182, 246, 0.0), rgba(41, 182, 246, 1), rgba(41, 182, 246, 0.0)); } /* Homepage features: dark section with swirl background */ .features-dark-section { position: relative; background-color: var(--entrovy-black); color: var(--entrovy-white); border-radius: 0.75rem; padding: 1rem 1rem; overflow: hidden; /* ensure swirl is clipped to rounded corners */ } .features-dark-section::after { content: ""; position: absolute; inset: 0; background-image: url('../images/entrovy-path.svg'); background-repeat: no-repeat; background-position: right center; background-size: min(70vw, 900px); opacity: 0.18; pointer-events: none; z-index: 0; } .features-dark-section .row { position: relative; z-index: 1; } /* Themed components (light/dark) */ /* Tables */ .table { color: var(--color-text); border-color: var(--color-border); } .table thead th { background-color: var(--table-header-bg); color: var(--color-text); border-bottom-color: var(--color-border); } .table tbody tr { border-color: var(--color-border); } .table> :not(caption)>*>* { background-color: var(--color-card-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--table-row-alt-bg); } .table-hover tbody tr:hover { background-color: var(--table-hover-bg); color: var(--color-text); } /* Tabs */ .nav-tabs { border-bottom-color: var(--color-border); } .nav-tabs .nav-link { color: var(--color-text); border-color: transparent; } .nav-tabs .nav-link:hover { border-color: var(--color-border); } .nav-tabs .nav-link.active { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border) var(--color-border) transparent; } .tab-content { background-color: var(--color-card-bg); color: var(--color-text); } /* Forms */ .form-control, .form-select { background-color: var(--input-bg); color: var(--input-text); border-color: var(--input-border); } .form-control:focus, .form-select:focus { border-color: var(--entrovy-cyan); box-shadow: 0 0 0 0.2rem rgba(45, 175, 230, 0.25); } /* Dropdowns */ .dropdown-menu { background-color: var(--dropdown-bg); color: var(--dropdown-text); border-color: var(--color-border); } .dropdown-item { color: var(--dropdown-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--table-hover-bg); color: var(--dropdown-text); } /* Modals */ .modal-content { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); } /* List groups */ .list-group-item { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); } /* Inverted hero outline button */ .entrovy-hero .btn-outline-light { color: var(--hero-text); border-color: var(--hero-text); } .entrovy-hero .btn-outline-light:hover { background-color: var(--hero-text); color: var(--hero-bg); } /* Text helpers */ .text-muted, .form-text { color: var(--muted-text) !important; } /* Pagination */ .pagination .page-link { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); } .pagination .page-link:hover { background-color: var(--table-hover-bg); color: var(--color-text); } .pagination .page-item.disabled .page-link { color: var(--muted-text); background-color: var(--color-card-bg); border-color: var(--color-border); } .pagination .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(45, 175, 230, 0.25); border-color: var(--entrovy-cyan); } /* Input group */ .input-group-text { background-color: var(--input-bg); color: var(--input-text); border-color: var(--input-border); } /* Outline secondary button */ .btn-outline-secondary { color: var(--color-text); border-color: var(--color-border); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { color: var(--color-text); border-color: var(--entrovy-cyan); } /* Chart controls wrapper */ .chart-controls { background-color: var(--color-card-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.75rem; } .chart-controls .form-label { color: var(--color-text); } /* Light mode: make homepage unified features section/cards light */ @media (prefers-color-scheme: light) { :root:not([data-theme]) .features-dark-section { background-color: var(--color-card-bg); color: var(--color-text); } :root:not([data-theme]) .feature-dark { background-color: var(--color-card-bg); color: var(--color-text); border: 1px solid var(--color-border); } :root:not([data-theme]) .feature-dark h4, :root:not([data-theme]) .feature-dark p, :root:not([data-theme]) .feature-dark i { color: var(--color-text); } } [data-theme="light"] .features-dark-section { background-color: var(--color-card-bg); color: var(--color-text); } [data-theme="light"] .feature-dark { background-color: var(--color-card-bg); color: var(--color-text); border: 1px solid var(--color-border); } [data-theme="light"] .feature-dark h4, [data-theme="light"] .feature-dark p, [data-theme="light"] .feature-dark i { color: var(--color-text); } /* Utility backgrounds in dark mode */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .bg-light, :root:not([data-theme]) .bg-white { background-color: #000 !important; color: var(--color-text) !important; } } [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-white { background-color: #000 !important; color: var(--color-text) !important; } /* Bootstrap CSS variables overrides for dark */ @media (prefers-color-scheme: dark) { :root { --bs-body-bg: #000; --bs-body-color: var(--color-text); --bs-card-bg: #000; --bs-card-color: var(--color-text); --bs-card-border-color: var(--color-border); --bs-border-color: var(--color-border); --bs-table-bg: #000; --bs-table-color: var(--color-text); --bs-table-striped-bg: #0a0a0a; --bs-table-hover-bg: #0a0a0a; --bs-dropdown-bg: #000; --bs-dropdown-color: var(--color-text); --bs-dropdown-link-hover-bg: #0a0a0a; --bs-modal-bg: #000; --bs-modal-color: var(--color-text); } } [data-theme="dark"] { --bs-body-bg: #000; --bs-body-color: var(--color-text); --bs-card-bg: #000; --bs-card-color: var(--color-text); --bs-card-border-color: var(--color-border); --bs-border-color: var(--color-border); --bs-table-bg: #000; --bs-table-color: var(--color-text); --bs-table-striped-bg: #0a0a0a; --bs-table-hover-bg: #0a0a0a; --bs-dropdown-bg: #000; --bs-dropdown-color: var(--color-text); --bs-dropdown-link-hover-bg: #0a0a0a; --bs-modal-bg: #000; --bs-modal-color: var(--color-text); } /* Kanban & Boards: Dark mode overrides */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .board-card, :root:not([data-theme]) .overview-card { background: var(--color-card-bg) !important; border-color: var(--color-border) !important; } :root:not([data-theme]) .board-header { background: var(--table-header-bg) !important; } :root:not([data-theme]) .overview-board-wrapper { background: var(--table-header-bg) !important; } :root:not([data-theme]) .overview-tag-list { background: var(--table-header-bg) !important; } :root:not([data-theme]) .overview-card-meta { color: var(--muted-text) !important; } :root:not([data-theme]) .board-actions .dropdown-menu { background-color: var(--dropdown-bg) !important; border-color: var(--color-border) !important; color: var(--dropdown-text) !important; } } [data-theme="dark"] .board-card, [data-theme="dark"] .overview-card { background: var(--color-card-bg) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .board-header { background: var(--table-header-bg) !important; } [data-theme="dark"] .overview-board-wrapper { background: var(--table-header-bg) !important; } [data-theme="dark"] .overview-tag-list { background: var(--table-header-bg) !important; } [data-theme="dark"] .overview-card-meta { color: var(--muted-text) !important; } [data-theme="dark"] .board-actions .dropdown-menu { background-color: var(--dropdown-bg) !important; border-color: var(--color-border) !important; color: var(--dropdown-text) !important; } /* Alerts, badges, and info boxes */ .alert { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); } .alert .alert-link { color: var(--entrovy-cyan); } .alert-info { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); } .alert-warning { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); } .alert-success { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); } .alert-danger { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); } /* Make muted copy readable in dark */ .text-muted, .form-text { color: var(--muted-text) !important; } /* === Kanban: direct board view (columns/cards) === */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .kanban-column, :root:not([data-theme]) .kanban-body { background-color: var(--color-card-bg) !important; } :root:not([data-theme]) .kanban-header { background-color: var(--table-header-bg) !important; color: var(--color-text) !important; } :root:not([data-theme]) .kanban-card .card { background-color: var(--color-card-bg) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } } [data-theme="dark"] .kanban-column, [data-theme="dark"] .kanban-body { background-color: var(--color-card-bg) !important; } [data-theme="dark"] .kanban-header { background-color: var(--table-header-bg) !important; color: var(--color-text) !important; } [data-theme="dark"] .kanban-card .card { background-color: var(--color-card-bg) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* === Kanban: overview lists should have borders === */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .overview-tag-list { border: 1px solid var(--color-border) !important; } } [data-theme="dark"] .overview-tag-list { border: 1px solid var(--color-border) !important; } /* === Kanban: active boards card title readable === */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .board-title { color: var(--color-text) !important; } } [data-theme="dark"] .board-title { color: var(--color-text) !important; } /* === Notifications page dark mode === */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .notifications-container .notification-item { background: var(--color-card-bg) !important; border-color: var(--color-border) !important; } :root:not([data-theme]) .notification-item.unread { background: var(--table-header-bg) !important; border-left-color: var(--entrovy-cyan) !important; } :root:not([data-theme]) .notification-title { color: var(--color-text) !important; } :root:not([data-theme]) .notification-message, :root:not([data-theme]) .notification-meta { color: var(--muted-text) !important; } :root:not([data-theme]) .filter-tabs .nav-link { color: var(--muted-text) !important; } :root:not([data-theme]) .filter-tabs .nav-link.active { color: var(--entrovy-cyan) !important; border-bottom-color: var(--entrovy-cyan) !important; } } [data-theme="dark"] .notifications-container .notification-item { background: var(--color-card-bg) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .notification-item.unread { background: var(--table-header-bg) !important; border-left-color: var(--entrovy-cyan) !important; } [data-theme="dark"] .notification-title { color: var(--color-text) !important; } [data-theme="dark"] .notification-message, [data-theme="dark"] .notification-meta { color: var(--muted-text) !important; } [data-theme="dark"] .filter-tabs .nav-link { color: var(--muted-text) !important; } [data-theme="dark"] .filter-tabs .nav-link.active { color: var(--entrovy-cyan) !important; border-bottom-color: var(--entrovy-cyan) !important; } /* Select2 Styling */ .select2-container--bootstrap-5 .select2-selection { min-height: 38px; } .select2-container--bootstrap-5 .select2-selection--single { padding: 0.375rem 0.75rem; } .select2-container--bootstrap-5 .select2-dropdown { border-color: var(--color-border); background-color: var(--color-card-bg); } .select2-container--bootstrap-5 .select2-results__option { color: var(--color-text); } .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: var(--entrovy-cyan); color: white; } .select2-container--bootstrap-5 .select2-search__field { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); } /* Dark mode für Select2 */ [data-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color: var(--color-card-bg); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { background-color: var(--color-card-bg); border-color: var(--color-border); } [data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option { color: var(--color-text); background-color: var(--color-card-bg); } [data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: var(--entrovy-cyan); color: white; } [data-theme="dark"] .select2-container--bootstrap-5 .select2-search__field { background-color: var(--color-card-bg); color: var(--color-text); border-color: var(--color-border); }