/* 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); --bs-primary-rgb: 45, 175, 230; } /* Override Bootstrap bg-primary with EntroVy Blue */ .bg-primary { background-color: #2dafe6 !important; } /* Theming variables (light by default) */ :root { --color-bg: #FAFAFA; --color-text: #1a1a1a; --color-card-bg: #ffffff; --color-border: rgba(0, 0, 0, 0.1); --footer-bg: #FAFAFA; --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: transparent; --table-row-alt-bg: transparent; --table-hover-bg: rgba(0, 0, 0, 0.03); --input-bg: transparent; --input-text: #1a1a1a; --input-border: rgba(0, 0, 0, 0.2); --dropdown-bg: #ffffff; --dropdown-text: #1a1a1a; --muted-text: #6c757d; --placeholder-text: #9CA3AF; } /* System dark mode when no explicit override is set */ @media (prefers-color-scheme: dark) { :root { --color-bg: #1A1A1A; --color-text: #FFFFFF; --color-card-bg: #1A1A1A; --color-border: #2D2D2D; --footer-bg: #1A1A1A; --footer-text: #9CA3AF; /* Hero becomes light in dark mode */ --hero-bg: #ffffff; --hero-text: #0b0c10; --hero-subtext: #2b2f33; /* Table & UI */ --table-header-bg: #1A1A1A; --table-row-alt-bg: #1A1A1A; --table-hover-bg: rgba(255, 255, 255, 0.08); --input-bg: transparent; --input-text: #FFFFFF; --input-border: #2D2D2D; --dropdown-bg: #1A1A1A; --dropdown-text: #FFFFFF; --muted-text: #9CA3AF; --placeholder-text: #6B7280; /* Brighter cyan for dark mode visibility */ --entrovy-cyan: #38BDF8; } } /* Explicit overrides via data-theme on */ [data-theme="light"] { --color-bg: #FAFAFA; --color-text: #1a1a1a; --color-card-bg: #ffffff; --color-border: rgba(0, 0, 0, 0.1); --footer-bg: #FAFAFA; --footer-text: #6c757d; --hero-bg: #000000; --hero-text: #ffffff; --hero-subtext: #e8f6ff; --table-header-bg: transparent; --table-row-alt-bg: transparent; --table-hover-bg: rgba(0, 0, 0, 0.03); --input-bg: transparent; --input-text: #1a1a1a; --input-border: rgba(0, 0, 0, 0.2); --dropdown-bg: #ffffff; --dropdown-text: #1a1a1a; --muted-text: #6c757d; --placeholder-text: #9CA3AF; } [data-theme="dark"] { --color-bg: #1A1A1A; --color-text: #FFFFFF; --color-card-bg: #1A1A1A; --color-border: #2D2D2D; --footer-bg: #1A1A1A; --footer-text: #9CA3AF; --hero-bg: #ffffff; --hero-text: #0b0c10; --hero-subtext: #2b2f33; --table-header-bg: #1A1A1A; --table-row-alt-bg: #1A1A1A; --table-hover-bg: rgba(255, 255, 255, 0.08); --input-bg: transparent; --input-text: #FFFFFF; --input-border: #2D2D2D; --dropdown-bg: #1A1A1A; --dropdown-text: #FFFFFF; --muted-text: #9CA3AF; --placeholder-text: #6B7280; /* Brighter cyan for dark mode visibility */ --entrovy-cyan: #38BDF8; } /* ========================================= ENTROVY GLOBAL DESIGN TOKENS Single source of truth for all pages ========================================= */ /* 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); } /* --- Typography Scale --- */ /* xs: 0.75rem (12px) — uppercase table headers, meta text sm: 0.875rem (14px) — small labels, filter text, badges base: 1rem (16px) — body text, table cells, inputs lg: 1.1rem (17.6px) — card/section headers xl: 1.25rem (20px) — section titles 2xl: 1.5rem (24px) — page sub-headings 3xl: 1.75rem (28px) — page main headings */ /* --- Global transparent backgrounds --- */ /* All UI elements blend with page background by default. Only dropdowns, modals, and overlays get opaque backgrounds. */ /* --- Placeholder text (dark mode readable) --- */ ::placeholder { color: var(--placeholder-text) !important; opacity: 1 !important; } ::-webkit-input-placeholder { color: var(--placeholder-text) !important; } ::-moz-placeholder { color: var(--placeholder-text) !important; opacity: 1 !important; } :-ms-input-placeholder { color: var(--placeholder-text) !important; } /* Select default/empty option placeholder style */ select option[value=""], select option:disabled { color: var(--placeholder-text); } /* --- Consistent label/strong text --- */ label, .form-label { color: var(--color-text); font-weight: 500; font-size: 0.875rem; } strong { font-weight: 600; color: var(--color-text); } /* --- Consistent muted/meta text --- */ small, .small, .text-muted, .form-text, figcaption { color: var(--muted-text) !important; font-size: 0.875rem; } /* --- Horizontal rules --- */ hr { border-color: var(--color-border); opacity: 1; } /* Remove default container padding to use full width */ main.container { max-width: 100%; padding-left: 0; padding-right: 0; } /* --- 100vh Full-Height Layout (no page scrollbar) --- */ html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; } header { flex-shrink: 0; } /* Default: pages can scroll normally */ main.container { flex: 1 1 auto; } /* Fullheight mode: page fits in viewport, no body scrollbar */ main.container.entrovy-main-fullheight { flex: 1 1 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } main.container.entrovy-main-fullheight>#alertContainer:empty { display: none; } /* .entrovy-page/.entrovy-kanban inside fullheight: fill remaining space with internal scroll */ main.container.entrovy-main-fullheight .entrovy-page, main.container.entrovy-main-fullheight .entrovy-kanban, main.container.entrovy-main-fullheight .board-wrapper { flex: 1 1 0; overflow: auto; min-height: 0; } /* AI/Agents containers inside fullheight: flex fill */ main.container.entrovy-main-fullheight .ai-container, main.container.entrovy-main-fullheight .agents-container { flex: 1 1 0; min-height: 0; } /* Header */ .navbar-brand { font-weight: 700; } /* Content sections */ .section-title { border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; margin-bottom: 1.5rem; } .card { border-radius: 0; box-shadow: none; margin-bottom: 1.5rem; background-color: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .card-header { background-color: transparent; color: var(--color-text); border-bottom: 1px solid var(--color-border); } /* KPI dashboard widgets */ .dashboard-widget { border-radius: 0; padding: 1rem 1.25rem; box-shadow: none; 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; } /* 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; } /* Light mode (default): Navbar schwarz mit weißer Schrift */ .navbar-nav .nav-link { color: var(--entrovy-white) !important; font-weight: 700; } .navbar-nav .nav-link.active { color: var(--entrovy-cyan) !important; font-weight: 800; } .navbar-nav .nav-link:hover { color: var(--entrovy-cyan) !important; } /* Explicit light theme */ [data-theme="light"] .navbar-nav .nav-link { color: var(--entrovy-white) !important; font-weight: 700; } [data-theme="light"] .navbar-nav .nav-link.active { color: var(--entrovy-cyan) !important; font-weight: 800; } [data-theme="light"] .navbar-nav .nav-link:hover { color: var(--entrovy-cyan) !important; } /* Dark mode: Navbar weiß mit schwarzer Schrift */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .entrovy-navbar { background-color: #ffffff !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } :root:not([data-theme]) .navbar-brand-text { color: #000000 !important; } :root:not([data-theme]) .navbar-nav .nav-link { color: #000000 !important; font-weight: 700; } :root:not([data-theme]) .navbar-nav .nav-link.active { color: var(--entrovy-cyan) !important; font-weight: 800; } :root:not([data-theme]) .navbar-nav .nav-link:hover { color: var(--entrovy-cyan) !important; } :root:not([data-theme]) .navbar-toggler-icon { filter: invert(1); } /* Benachrichtigungs- und User-Buttons */ :root:not([data-theme]) .entrovy-navbar .btn-outline-light { color: #000000 !important; border-color: #000000 !important; background-color: transparent !important; } :root:not([data-theme]) .entrovy-navbar .btn-outline-light:hover, :root:not([data-theme]) .entrovy-navbar .btn-outline-light:focus { color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; background-color: transparent !important; } :root:not([data-theme]) .entrovy-navbar .btn-outline-light i { color: #000000 !important; } :root:not([data-theme]) .entrovy-navbar .btn-outline-light:hover i, :root:not([data-theme]) .entrovy-navbar .btn-outline-light:focus i { color: var(--entrovy-cyan) !important; } :root:not([data-theme]) .entrovy-navbar .btn-outline-light span { color: #000000 !important; } :root:not([data-theme]) .entrovy-navbar .btn-outline-light:hover span, :root:not([data-theme]) .entrovy-navbar .btn-outline-light:focus span { color: var(--entrovy-cyan) !important; } :root:not([data-theme]) .dropdown-menu { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.1); } :root:not([data-theme]) .dropdown-item { color: #000000; } :root:not([data-theme]) .dropdown-item:hover { background-color: #f8f9fa; color: var(--entrovy-cyan); } /* Logo-Wechsel: Weißes Logo ausblenden, schwarzes Logo anzeigen */ :root:not([data-theme]) .logo-white { display: none !important; } :root:not([data-theme]) .logo-black { display: inline-block !important; } } [data-theme="dark"] .entrovy-navbar { background-color: #ffffff !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } [data-theme="dark"] .navbar-brand-text { color: #000000 !important; } [data-theme="dark"] .navbar-nav .nav-link { color: #000000 !important; font-weight: 700; } [data-theme="dark"] .navbar-nav .nav-link.active { color: var(--entrovy-cyan) !important; font-weight: 800; } [data-theme="dark"] .navbar-nav .nav-link:hover { color: var(--entrovy-cyan) !important; } [data-theme="dark"] .navbar-toggler-icon { filter: invert(1); } /* Benachrichtigungs- und User-Buttons */ [data-theme="dark"] .entrovy-navbar .btn-outline-light { color: #000000 !important; border-color: #000000 !important; background-color: transparent !important; } [data-theme="dark"] .entrovy-navbar .btn-outline-light:hover, [data-theme="dark"] .entrovy-navbar .btn-outline-light:focus { color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; background-color: transparent !important; } [data-theme="dark"] .entrovy-navbar .btn-outline-light i { color: #000000 !important; } [data-theme="dark"] .entrovy-navbar .btn-outline-light:hover i, [data-theme="dark"] .entrovy-navbar .btn-outline-light:focus i { color: var(--entrovy-cyan) !important; } [data-theme="dark"] .entrovy-navbar .btn-outline-light span { color: #000000 !important; } [data-theme="dark"] .entrovy-navbar .btn-outline-light:hover span, [data-theme="dark"] .entrovy-navbar .btn-outline-light:focus span { color: var(--entrovy-cyan) !important; } [data-theme="dark"] .dropdown-menu { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.1); } [data-theme="dark"] .dropdown-item { color: #000000; } [data-theme="dark"] .dropdown-item:hover { background-color: #f8f9fa; color: var(--entrovy-cyan); } /* Logo-Wechsel: Weißes Logo ausblenden, schwarzes Logo anzeigen */ [data-theme="dark"] .logo-white { display: none !important; } [data-theme="dark"] .logo-black { display: inline-block !important; } /* Theme toggle in user menu */ .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; } .btn-outline-primary { color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; background-color: transparent !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { color: var(--entrovy-white) !important; background-color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; } .btn-outline-primary:active, .btn-outline-primary.active { color: var(--entrovy-white) !important; 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: 3rem; top: 50%; transform: translateY(-50%); width: min(45vw, 580px); 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(--color-bg); color: var(--color-text); border-radius: 0; padding: 1rem 1rem; overflow: hidden; /* ensure swirl is clipped to rounded corners */ } .feature-dark { border: 1px solid var(--color-border); border-radius: 0.5rem; } .features-dark-section::after { content: none; } .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: transparent; color: var(--muted-text); border-bottom-color: var(--color-border); } .table tbody tr { border-color: var(--color-border); } .table> :not(caption)>*>* { background-color: transparent !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: transparent; } .table-hover tbody tr:hover { background-color: var(--table-hover-bg); color: var(--color-text); } .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: var(--table-hover-bg) !important; } /* 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: transparent; color: var(--color-text); border-color: var(--color-border) var(--color-border) transparent; } .tab-content { background-color: transparent; color: var(--color-text); } /* Forms - Using higher specificity to override Bootstrap defaults */ .form-control, .form-select, input.form-control, select.form-select, textarea.form-control { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border); } .form-control:focus, .form-select:focus, input.form-control:focus, select.form-select:focus, textarea.form-control:focus { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--entrovy-cyan); box-shadow: 0 0 0 0.2rem rgba(45, 175, 230, 0.25); } /* Input group addons */ .input-group-text { background-color: var(--input-bg); color: var(--input-text); border-color: var(--input-border); } /* Date/Time input icons - Dark Mode Fix */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) input[type="date"]::-webkit-calendar-picker-indicator, :root:not([data-theme]) input[type="time"]::-webkit-calendar-picker-indicator, :root:not([data-theme]) input[type="datetime-local"]::-webkit-calendar-picker-indicator, :root:not([data-theme]) input[type="week"]::-webkit-calendar-picker-indicator, :root:not([data-theme]) input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; } } /* 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: transparent; 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); } /* Pagination */ .pagination .page-link { background-color: transparent; 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: transparent; 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: transparent; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 0; 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: transparent; color: var(--color-text); } :root:not([data-theme]) .feature-dark { background-color: transparent; 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: transparent; color: var(--color-text); } [data-theme="light"] .feature-dark { background-color: transparent; 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: transparent !important; color: var(--color-text) !important; } } [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-white { background-color: transparent !important; color: var(--color-text) !important; } /* Bootstrap CSS variables overrides for dark */ @media (prefers-color-scheme: dark) { :root { --bs-body-bg: #1A1A1A; --bs-body-color: var(--color-text); --bs-card-bg: transparent; --bs-card-color: var(--color-text); --bs-card-border-color: var(--color-border); --bs-border-color: var(--color-border); --bs-table-bg: transparent; --bs-table-color: var(--color-text); --bs-table-striped-bg: transparent; --bs-table-hover-bg: rgba(255, 255, 255, 0.08); --bs-dropdown-bg: #1A1A1A; --bs-dropdown-color: var(--color-text); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08); --bs-modal-bg: #1A1A1A; --bs-modal-color: var(--color-text); } } [data-theme="dark"] { --bs-body-bg: #1A1A1A; --bs-body-color: var(--color-text); --bs-card-bg: transparent; --bs-card-color: var(--color-text); --bs-card-border-color: var(--color-border); --bs-border-color: var(--color-border); --bs-table-bg: transparent; --bs-table-color: var(--color-text); --bs-table-striped-bg: transparent; --bs-table-hover-bg: rgba(255, 255, 255, 0.08); --bs-dropdown-bg: #1A1A1A; --bs-dropdown-color: var(--color-text); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08); --bs-modal-bg: #1A1A1A; --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: transparent !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: transparent !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: transparent; color: var(--color-text); border-color: var(--color-border); } .alert .alert-link { color: var(--entrovy-cyan); } .alert-info { background-color: transparent; color: var(--color-text); border-color: var(--color-border); } .alert-warning { background-color: transparent; color: var(--color-text); border-color: var(--color-border); } .alert-success { background-color: transparent; color: var(--color-text); border-color: var(--color-border); } .alert-danger { background-color: transparent; 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: transparent !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: transparent !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } } [data-theme="dark"] .kanban-column, [data-theme="dark"] .kanban-body { background-color: transparent !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: transparent !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: transparent !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: transparent !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: transparent; 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: transparent; 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: transparent; } [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: transparent; color: var(--color-text); border-color: var(--color-border); } /* Form Check Inputs (Checkboxes, Radio, Switches) - Light Mode Fix */ [data-theme="light"] .form-check-input { background-color: transparent !important; border: 2px solid #6c757d !important; } [data-theme="light"] .form-check-input:checked { background-color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; } [data-theme="light"] .form-check-input[type="checkbox"]:indeterminate { background-color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; } /* Form Check Inputs (Checkboxes, Radio, Switches) - Dark Mode Fix */ [data-theme="dark"] .form-check-input { background-color: transparent !important; border: 2px solid #adb5bd !important; } [data-theme="dark"] .form-check-input:checked { background-color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; } [data-theme="dark"] .form-check-input[type="checkbox"]:indeterminate { background-color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .form-check-input { background-color: transparent !important; border: 2px solid #6c757d !important; } :root:not([data-theme]) .form-check-input:checked { background-color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .form-check-input { background-color: transparent !important; border: 2px solid #adb5bd !important; } :root:not([data-theme]) .form-check-input:checked { background-color: var(--entrovy-cyan) !important; border-color: var(--entrovy-cyan) !important; } } /* ==================== ENTROVY MINIMALIST REDESIGN ==================== */ /* Full-width layout, no shadows, sharp corners, control bar attached to navbar */ /* Global container full width */ .container { max-width: 100% !important; padding-left: 20px; padding-right: 20px; } .container-fluid { padding-left: 20px; padding-right: 20px; } /* Remove all border-radius globally (modals and cards have their own radius) */ .card-header, .card-footer, .btn, .form-control, .form-select, .input-group-text, .dropdown-menu, .alert, .badge, .list-group-item, .nav-tabs .nav-link, .pagination .page-link, .table, .toast, .tooltip-inner, .popover, .accordion-item, .accordion-button { border-radius: 0 !important; } /* Modals get subtle rounding */ .modal-content { border-radius: 8px !important; } .modal-header, .modal-footer { border-radius: 0 !important; } /* Remove all box-shadows globally */ .card, .btn, .dropdown-menu, .modal-content, .form-control:focus, .form-select:focus, .toast, .shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; } /* Focus styles without shadow - use border instead */ .form-control:focus, .form-select:focus { border-color: var(--entrovy-cyan) !important; outline: none; } /* Control bar / Page header directly attached to navbar (no margin-top) */ .page-header, .board-header, .control-bar, .content-header { margin-top: 0 !important; padding-top: 15px; padding-bottom: 15px; background: transparent; border-bottom: 1px solid var(--color-border); } /* Main content area - remove top padding */ main, .main-content, #main-content { padding-top: 0 !important; } /* Board wrapper for Kanban - no margin */ .board-wrapper { margin-top: 0 !important; border-radius: 0 !important; } /* List and card elements - sharp corners */ .list, .not-now-list, .list-header, .not-now-list-header { border-radius: 0 !important; } /* Notification dropdown */ .notification-dropdown { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--color-border) !important; } /* Member avatars - keep circular */ .member-avatar, .card-member-avatar, .user-avatar { border-radius: 50% !important; } /* Tags/Labels - keep small radius for readability */ .tag, .label, .kanban-label { border-radius: 2px !important; } /* Input groups */ .input-group>.form-control, .input-group>.form-select, .input-group>.input-group-text, .input-group>.btn { border-radius: 0 !important; } /* Tables - ensure sharp corners */ .table-responsive { border-radius: 0 !important; } /* Breadcrumb and page navigation */ .breadcrumb { border-radius: 0 !important; background: transparent; } /* Progress bars */ .progress { border-radius: 0 !important; } .progress-bar { background-color: var(--entrovy-cyan) !important; } /* Tabs and pills */ .nav-pills .nav-link { border-radius: 0 !important; } /* Offcanvas and sidebars */ .offcanvas { border-radius: 0 !important; } /* Calendar events */ .calendar-event { border-radius: 0 !important; } /* Chat bubbles - keep slight radius for readability */ .chat-bubble, .message-bubble { border-radius: 2px !important; } /* Form switches - keep rounded for UX */ .form-switch .form-check-input { border-radius: 0.5rem !important; } /* Spinners - keep circular */ .spinner-border, .spinner-grow { border-radius: 50% !important; } /* =========================================== MOBILE VIEW - Full Width Layout =========================================== */ @media (max-width: 767.98px) { /* Remove container padding on mobile */ .container, .container-fluid { padding-left: 8px !important; padding-right: 8px !important; } /* Main content area - minimal padding */ main, .main-content, #main-content { padding-left: 0 !important; padding-right: 0 !important; } /* Board header - full width on mobile */ .board-header, .page-header, .control-bar, .content-header { margin-left: 0 !important; margin-right: 0 !important; padding-left: 10px !important; padding-right: 10px !important; } /* Lists wrapper - minimal padding on mobile */ .lists-wrapper { padding-left: 8px !important; padding-right: 8px !important; } /* Cards and widgets - full width */ .card, .widget-card { margin-left: 0 !important; margin-right: 0 !important; } /* Kanban lists - adjust for mobile */ .list, .not-now-list { min-width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; } } /* =========================================== ENTROVY MINIMALIST THEME Clean, borderless design with whitespace structure =========================================== */ /* Minimalist container (list pages) */ .entrovy-page { max-width: 100%; padding: 2rem; background: var(--color-bg); } /* Section title in list pages - no border */ .entrovy-page .section-title { border: none; padding-bottom: 0; } /* Remove card borders and backgrounds globally */ .entrovy-page .card, .entrovy-page .card-body, .entrovy-page .card-header { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* ========================================= ENTROVY VIEW (detail pages) Clean cards with subtle separators ========================================= */ .entrovy-view { background: var(--color-bg); padding: 2rem; } /* Section title in view pages - no border, more space */ .entrovy-view .section-title { border: none; font-size: 1.75rem; font-weight: 700; margin-bottom: 0; padding-bottom: 0; } /* Heading row spacing */ .entrovy-view>.d-flex:first-child { margin-bottom: 2.5rem !important; padding-top: 1rem; } /* Buttons in view pages */ .entrovy-view .btn { border-radius: 0; } .entrovy-view .btn-success { background-color: var(--entrovy-cyan); border-color: var(--entrovy-cyan); color: #fff; } .entrovy-view .btn-success:hover { background-color: var(--entrovy-cyan-600); border-color: var(--entrovy-cyan-600); } .entrovy-view .btn-secondary { background-color: transparent; border: 1px solid var(--color-border); color: var(--color-text); } .entrovy-view .btn-secondary:hover { background-color: var(--table-hover-bg); border-color: var(--color-text); color: var(--color-text); } .entrovy-view .btn-outline-secondary { border-color: var(--color-border); color: var(--muted-text); } .entrovy-view .btn-outline-secondary:hover { background-color: transparent; border-color: var(--color-text); color: var(--color-text); } .entrovy-view .btn-info { background-color: transparent; border: 1px solid var(--entrovy-cyan); color: var(--entrovy-cyan); } .entrovy-view .btn-info:hover { background-color: var(--entrovy-cyan); color: #fff; } .entrovy-view .btn-warning { background-color: transparent; border: 1px solid #d97706; color: #d97706; } .entrovy-view .btn-warning:hover { background-color: #d97706; color: #fff; } .entrovy-view .card { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; border-bottom: 1px solid var(--color-border) !important; margin-bottom: 1.5rem; padding-bottom: 1.5rem; } .entrovy-view .card:last-child { border-bottom: none !important; } .entrovy-view .card-header { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 0 0.75rem 0 !important; font-weight: 600; font-size: 1.1rem; color: var(--color-text); } .entrovy-view .card-body { background: transparent !important; padding: 0 !important; } .entrovy-view .card-footer { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0.75rem 0 0 0 !important; color: var(--muted-text); } /* Sub-cards inside view (e.g. Ansprechpartner, UBO) */ .entrovy-view .card .card { border: none !important; border-bottom: none !important; border-left: 3px solid var(--color-border) !important; padding: 0 0 0 1rem !important; margin-bottom: 1rem; } .entrovy-view .card .card .card-header { font-size: 0.95rem; padding: 0 0 0.5rem 0 !important; } /* Fix colored card headers (bg-info, bg-warning etc.) */ .entrovy-view .card-header.bg-info, .entrovy-view .card-header.bg-warning, .entrovy-view .card-header.bg-success, .entrovy-view .card-header.bg-danger, .entrovy-view .card-header.bg-primary { background: transparent !important; color: var(--color-text) !important; } /* Fix colored card borders */ .entrovy-view .card.border-info, .entrovy-view .card.border-warning, .entrovy-view .card.border-success, .entrovy-view .card.border-danger, .entrovy-view .card.border-primary { border-color: var(--color-border) !important; } /* Tables in view pages */ .entrovy-view .table { border-collapse: collapse; width: 100%; font-size: 1rem; } .entrovy-view .table thead th { background: transparent; border-bottom: 1px solid var(--color-border); color: var(--muted-text); font-weight: 500; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; padding: 0.5rem 0.75rem; } .entrovy-view .table tbody td { border-bottom: 1px solid var(--color-border); padding: 0.75rem; color: var(--color-text); background: transparent; } .entrovy-view .table tbody tr:last-child td { border-bottom: none; } .entrovy-view .table tbody tr:hover td { background: var(--table-hover-bg); } .entrovy-view .table-active td, .entrovy-view .table-active th { background: transparent !important; font-weight: 700; } /* Badges in view pages — left-border style */ .entrovy-view .badge { font-size: inherit; font-weight: normal; border-radius: 0; padding: 0.25em 0.5em; } .entrovy-view .badge.bg-success { background: transparent !important; color: #16a34a !important; border-left: 3px solid #16a34a; } .entrovy-view .badge.bg-danger { background: transparent !important; color: #dc2626 !important; border-left: 3px solid #dc2626; } .entrovy-view .badge.bg-warning { background: transparent !important; color: #d97706 !important; border-left: 3px solid #d97706; } .entrovy-view .badge.bg-info { background: transparent !important; color: #2563eb !important; border-left: 3px solid #2563eb; } .entrovy-view .badge.bg-primary { background: transparent !important; color: #2dafe6 !important; border-left: 3px solid #2dafe6; } .entrovy-view .badge.bg-secondary { background: transparent !important; color: var(--muted-text) !important; border-left: 3px solid var(--muted-text); } .entrovy-view .badge.bg-dark { background: transparent !important; color: var(--color-text) !important; border-left: 3px solid var(--color-text); } .entrovy-view .badge.bg-light { background: transparent !important; color: var(--muted-text) !important; border-left: 3px solid var(--color-border); } /* Contact person / UBO items */ .entrovy-view .border.rounded { border-radius: 0 !important; border: none !important; border-left: 3px solid var(--color-border) !important; padding: 0.5rem 0 0.5rem 1rem !important; } /* Stat cards (bg-light) in view pages */ .entrovy-view .card.bg-light { background: transparent !important; border-bottom: none !important; border-left: 3px solid var(--color-border) !important; padding: 0.5rem 1rem !important; } /* Alerts */ .entrovy-view .alert { border-radius: 0; border: none; border-left: 3px solid; } .entrovy-view .alert-info { border-left-color: #2563eb; background: transparent; color: var(--muted-text); } .entrovy-view .alert-danger { border-left-color: #dc2626; background: transparent; color: #dc2626; } .entrovy-page .card { margin-bottom: 2rem; } /* Minimalist filter toggle */ .entrovy-filter-toggle { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; height: 40px; } .entrovy-filter-btn { display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--muted-text); padding: 0.25rem; cursor: pointer; transition: color 0.2s; flex-shrink: 0; } .entrovy-filter-btn:hover, .entrovy-filter-btn.active { color: var(--color-text); } .entrovy-filter-btn i { font-size: 1rem; } .entrovy-filter-content { display: flex; align-items: center; width: 0; overflow: hidden; transition: width 0.3s ease-out, opacity 0.2s ease-out; opacity: 0; white-space: nowrap; } .entrovy-filter-content.show { width: auto; opacity: 1; overflow: visible; } .entrovy-filter-bar { display: flex; gap: 1rem; align-items: center; flex-wrap: nowrap; } .entrovy-filter-bar select, .entrovy-filter-bar input[type="date"], .entrovy-filter-bar input[type="text"] { border: none; border-bottom: 1px solid var(--color-border); background: transparent; padding: 0.5rem 1.5rem 0.5rem 0; font-family: 'Satoshi', sans-serif; font-size: 0.875rem; color: var(--color-text); outline: none; transition: border-color 0.2s; } .entrovy-filter-bar select:focus, .entrovy-filter-bar input:focus { border-bottom-color: var(--color-text); } .entrovy-filter-bar .btn-reset { background: transparent; border: none; color: var(--muted-text); padding: 0.5rem; cursor: pointer; transition: color 0.2s; } .entrovy-filter-bar .btn-reset:hover { color: var(--color-text); } /* Minimalist new item button (matches Kanban "Neues Board" style) */ .entrovy-new-item-btn { margin-left: auto; background: transparent !important; border: none !important; color: var(--muted-text) !important; font-family: 'Satoshi', sans-serif; font-size: 0.9rem; cursor: pointer; transition: color 0.2s; padding: 0.5rem 0 !important; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; white-space: nowrap; box-shadow: none !important; } .entrovy-new-item-btn:hover { color: var(--color-text) !important; text-decoration: none; background: transparent !important; } .entrovy-new-item-btn:focus { box-shadow: none !important; outline: none !important; } /* Minimalist tabs */ .entrovy-tabs { display: flex; gap: 2rem; margin-bottom: 2.5rem; border: none !important; } .entrovy-tabs .nav-item { border: none !important; } .entrovy-tab, .entrovy-tabs .nav-link { font-family: 'Satoshi', sans-serif; font-weight: 500; font-size: 0.95rem; color: var(--muted-text); padding: 0.75rem 0; border: none !important; background: transparent !important; cursor: pointer; transition: color 0.2s; position: relative; } .entrovy-tab:hover, .entrovy-tabs .nav-link:hover { color: var(--color-text); border: none !important; } .entrovy-tab.active, .entrovy-tabs .nav-link.active { color: var(--color-text); background: transparent !important; border: none !important; } /* ============================================= DEMO MODE ============================================= */ /* Badge in Navbar: hidden by default, visible in demo mode */ .demo-mode-badge { display: none; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; background: #f59e0b; color: #1a1a1a; text-transform: uppercase; vertical-align: middle; margin-left: 8px; } [data-demo="active"] .demo-mode-badge { display: inline-block; } /* Blur sensitive content when demo mode is active */ [data-demo="active"] .demo-blur { filter: blur(6px); user-select: none; cursor: default; transition: filter 0.2s ease; border-radius: 3px; position: relative; } /* Slight unblur on hover to indicate it's content */ [data-demo="active"] .demo-blur:hover { filter: blur(5px); } /* Demo toggle button active state indicator */ #demoModeToggle .demo-active-indicator { display: none; } [data-demo="active"] #demoModeToggle .demo-active-indicator { display: inline-flex; } .entrovy-tab.active::after, .entrovy-tabs .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--color-text); } .entrovy-tab i, .entrovy-tabs .nav-link i { margin-right: 0.5rem; } /* Minimalist table */ .entrovy-table { width: 100%; border-collapse: collapse; border: none !important; } .entrovy-table thead th { font-family: 'Satoshi', sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-text); padding: 0.75rem 1rem; text-align: left; border: none !important; background: transparent !important; } .entrovy-table tbody td { font-family: 'Satoshi', sans-serif; font-size: 1rem; color: var(--color-text); padding: 1rem; border: none !important; background: transparent !important; } .entrovy-table tbody tr { transition: background-color 0.15s; border: none !important; } .entrovy-table tbody tr:hover { background: rgba(0, 0, 0, 0.02); } .entrovy-table tbody tr:hover td { background: rgba(0, 0, 0, 0.02) !important; } [data-theme="dark"] .entrovy-table tbody tr:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .entrovy-table tbody tr:hover td { background: rgba(255, 255, 255, 0.08) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .entrovy-table tbody tr:hover, :root:not([data-theme]) .entrovy-table tbody tr:hover td { background: rgba(255, 255, 255, 0.08) !important; } } /* Apply same to standard tables within entrovy-page */ .entrovy-page .table { border: none !important; } .entrovy-page .table thead th { font-family: 'Satoshi', sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-text); padding: 0.75rem 1rem; border: none !important; background: transparent !important; } .entrovy-page .table tbody td { font-family: 'Satoshi', sans-serif; font-size: 1rem !important; color: var(--color-text) !important; padding: 1rem; border: none !important; background: transparent !important; } /* Ensure table font-size is consistent even within tab-content */ .entrovy-page .tab-content .table tbody td, .entrovy-page .tab-pane .table tbody td { font-family: 'Satoshi', sans-serif; font-size: 1rem !important; font-weight: normal !important; } .entrovy-page .table tbody tr { border: none !important; } .entrovy-page .table tbody tr:hover { background: rgba(0, 0, 0, 0.02) !important; } .entrovy-page .table tbody tr:hover td { background: rgba(0, 0, 0, 0.02) !important; } [data-theme="dark"] .entrovy-page .table tbody tr:hover { background: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .entrovy-page .table tbody tr:hover td { background: rgba(255, 255, 255, 0.08) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .entrovy-page .table tbody tr:hover, :root:not([data-theme]) .entrovy-page .table tbody tr:hover td { background: rgba(255, 255, 255, 0.08) !important; } } .entrovy-page .table> :not(caption)>*>* { border: none !important; background: transparent !important; } /* Minimalist status badges - left border only */ .entrovy-badge { background: transparent !important; color: var(--color-text) !important; border: none; border-left: 3px solid; border-radius: 0; padding: 0.35rem 0.75rem; font-weight: normal; font-size: 0.875rem; } /* Normalize badge font-size within entrovy-page tables */ .entrovy-page .table .badge { font-size: inherit !important; font-weight: normal !important; border-radius: 0 !important; padding: 0.35rem 0.75rem !important; } .entrovy-badge.success, .entrovy-page .badge.bg-success { background: transparent !important; color: var(--color-text) !important; border-left: 3px solid #10b981 !important; } .entrovy-badge.danger, .entrovy-page .badge.bg-danger { background: transparent !important; color: var(--color-text) !important; border-left: 3px solid #ef4444 !important; } .entrovy-badge.warning, .entrovy-page .badge.bg-warning { background: transparent !important; color: var(--color-text) !important; border-left: 3px solid #f59e0b !important; } .entrovy-badge.info, .entrovy-page .badge.bg-info { background: transparent !important; color: var(--color-text) !important; border-left: 3px solid var(--entrovy-cyan) !important; } .entrovy-badge.secondary, .entrovy-page .badge.bg-secondary { background: transparent !important; color: var(--color-text) !important; border-left: 3px solid var(--muted-text) !important; } .entrovy-badge.primary, .entrovy-page .badge.bg-primary { background: transparent !important; color: var(--color-text) !important; border-left: 3px solid var(--entrovy-cyan) !important; } .entrovy-badge.dark, .entrovy-page .badge.bg-dark { background: transparent !important; color: var(--color-text) !important; border-left: 3px solid var(--color-text) !important; } /* Minimalist section headers */ .entrovy-section-title { font-family: 'Satoshi', sans-serif; font-weight: 600; font-size: 1.25rem; color: var(--color-text); margin-bottom: 1.5rem; border: none !important; } /* Minimalist action buttons */ .entrovy-page .btn-group .btn, .entrovy-action-btn { border: none; background: transparent; color: var(--muted-text); padding: 0.25rem 0.5rem; } .entrovy-page .btn-group .btn:hover, .entrovy-action-btn:hover { color: var(--color-text); background: rgba(0, 0, 0, 0.02); } /* Primary action button stays styled */ .entrovy-page .btn-primary { background-color: var(--entrovy-cyan); border-color: var(--entrovy-cyan); color: white; } .entrovy-page .btn-primary:hover { background-color: var(--entrovy-cyan-600); border-color: var(--entrovy-cyan-600); } /* Minimalist form inputs */ .entrovy-page .form-control, .entrovy-page .form-select { border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; padding: 0.5rem 0; font-size: 1rem; } .entrovy-page .form-control:focus, .entrovy-page .form-select:focus { border-bottom-color: var(--color-text); box-shadow: none; background: transparent; } .entrovy-page .input-group { border: none; } .entrovy-page .input-group .input-group-text { border: none; background: transparent; color: var(--muted-text); padding-left: 0; } .entrovy-page .input-group .form-control { border: none; border-bottom: 1px solid var(--color-border); } /* Minimalist pagination */ .entrovy-page .pagination { gap: 0.5rem; } .entrovy-page .pagination .page-link { border: none; background: transparent; color: var(--muted-text); padding: 0.5rem 0.75rem; } .entrovy-page .pagination .page-link:hover { color: var(--color-text); background: transparent; } .entrovy-page .pagination .page-item.active .page-link { color: var(--color-text); background: transparent; font-weight: 600; } .entrovy-page .pagination .page-item.disabled .page-link { color: var(--color-border); background: transparent; } /* Responsive adjustments */ @media (max-width: 768px) { .entrovy-page { padding: 1.5rem 1rem; } .entrovy-tabs { gap: 1rem; overflow-x: auto; } /* Mobile filter toggle: vertical expansion instead of width-based */ .entrovy-filter-toggle { flex-wrap: wrap; height: auto; } .entrovy-filter-btn { order: 1; } .entrovy-new-item-btn { order: 2; } .entrovy-filter-content { order: 3; width: 100% !important; flex-basis: 100%; max-height: 0; overflow: hidden; white-space: normal; transition: max-height 0.3s ease-out, opacity 0.2s ease-out; } .entrovy-filter-content.show { max-height: 500px; overflow: visible; margin-top: 0.75rem; } /* Override Bootstrap d-none d-md-flex on mobile when filter is shown */ .entrovy-filter-content.show .entrovy-filter-bar { display: flex !important; } .entrovy-filter-bar { flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; } } /* Dark mode specific fixes */ @media (prefers-color-scheme: dark) { select option { background-color: var(--dropdown-bg); color: var(--dropdown-text); } } [data-theme="dark"] select option { background-color: var(--dropdown-bg); color: var(--dropdown-text); }