/* Global Design System — Vision L&T CRM One stylesheet for light/dark themes and reusable components Theme switching: (persisted via localStorage) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* 1) Design Tokens: colors, spacing, radii, shadows */ :root { /* Professional ERP palette (light) */ --color-bg: #f4f7fb; --color-surface: #ffffff; --color-surface-2: #f1f5f9; --color-surface-soft: #f8fafc; --color-text: #172033; --color-text-muted: #667085; --color-border: #d9e1eb; --color-border-strong: #b8c4d3; --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-contrast: #ffffff; --color-accent: #eaf2ff; --color-accent-strong: #1d4ed8; --color-danger: #c43232; --color-success: #16834f; --color-warning: #b7791f; --color-info: #2563eb; --color-nav: #102a43; --color-nav-strong: #0b1f33; --color-nav-text: #dbe7f3; --color-crm: #2563eb; --color-documents: #2563eb; --color-pos: #2563eb; --color-finance: #2563eb; --color-accent-warm: #fff3d6; /* ERP status tokens (DACH style) */ --status-draft-bg: #f3f4f6; --status-draft-text: #4b5563; --status-sent-bg: #dbeafe; --status-sent-text: #1d4ed8; --status-paid-bg: #dcfce7; --status-paid-text: #166534; --status-overdue-bg: #ffedd5; --status-overdue-text: #c2410c; --status-cancel-bg: #fee2e2; --status-cancel-text: #b91c1c; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow-md: 0 6px 18px rgba(15, 23, 42, .08); --shadow-lg: 0 12px 28px rgba(15, 23, 42, .12); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 8px; --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --focus-ring: 0 0 0 3px rgba(37, 99, 235, .18); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; /* Authenticated application layout */ --app-sidebar-width: 260px; --app-topbar-height: 72px; --app-modulebar-height: 55px; --app-page-max-width: 1480px; --app-page-padding: clamp(16px, 2vw, 28px); --app-section-gap: 20px; --app-card-padding: 20px; --app-grid-gap: 16px; --app-form-gap: 12px; /* Bootstrap variable hooks */ --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-primary: var(--color-primary); --bs-primary-rgb: 37, 99, 235; } /***** Dark Theme *****/ :root[data-theme="dark"] { --color-bg: #0d141b; --color-surface: #141f29; --color-surface-2: #1d2b38; --color-surface-soft: #182531; --color-text: #f8fafc; --color-text-muted: #a9b8c7; --color-border: #314151; --color-primary: #7dd3fc; --color-primary-contrast: #082f49; --color-accent: #173b3a; --color-accent-strong: #5eead4; --color-danger: #f97066; --color-success: #47cd89; --color-warning: #fdb022; --color-info: #84caff; --color-crm: #7dd3fc; --color-documents: #fdb022; --color-pos: #7dd3fc; --color-finance: #bef264; --color-accent-warm: #3b2d13; --status-draft-bg: #1f2937; --status-draft-text: #d1d5db; --status-sent-bg: #1e3a8a; --status-sent-text: #bfdbfe; --status-paid-bg: #14532d; --status-paid-text: #bbf7d0; --status-overdue-bg: #7c2d12; --status-overdue-text: #fed7aa; --status-cancel-bg: #7f1d1d; --status-cancel-text: #fecaca; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 8px 20px rgba(0,0,0,.42); --shadow-lg: 0 12px 30px rgba(0,0,0,.5); /* Bootstrap hooks to avoid dark-bg + black-text regressions */ --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-emphasis-color: var(--color-text); --bs-secondary-color: var(--color-text-muted); --bs-tertiary-bg: var(--color-surface-2); --bs-border-color: var(--color-border); } /* 2) Base */ html, body { height: 100%; } html { overflow-x: clip; } body { background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--color-info) 7%, transparent), transparent 28rem), linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 86%, #fff), var(--color-bg) 18rem); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--font-sans); letter-spacing: 0; font-size: 14px; line-height: 1.55; } :root[data-theme="dark"] body { color-scheme: dark; } /* Links */ a { color: var(--color-primary); } a:hover { color: color-mix(in srgb, var(--color-primary) 80%, #000); } /* 3) Header/Navbar */ .crm-navbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .crm-navbar .navbar-brand span { font-weight: 700; letter-spacing: .4px; } .crm-navbar .nav-link { color: var(--color-text); opacity: .9; } .crm-navbar .nav-link:hover { opacity: 1; } .crm-navbar .nav-link.active { font-weight: 600; color: var(--color-accent); } .brand-animated { transition: transform .2s ease; } .brand-animated:hover { transform: rotate(-4deg) scale(1.05); } /* Navbar toggler icon visibility for both themes */ .navbar .navbar-toggler { border: none; } .navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); } .navbar .navbar-toggler-icon { background-size: 1.5em 1.5em; } /* Light */ :root .navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230f172a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Dark */ :root[data-theme='dark'] .navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e5e7eb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .user-chip { display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--color-border); color:inherit; font-size:.9rem; } .theme-toggle { background:none; border:none; color:inherit; font-size:1.2rem; } /* 4) Page titles */ .page-title { font-size: clamp(1.42rem, 1.12rem + 1vw, 1.95rem); font-weight: 850; margin: var(--space-6) 0 var(--space-1); line-height: 1.24; color: var(--color-text); } .page-sub { color: var(--color-text-muted); margin-bottom: var(--space-5); } /* 5) Cards */ .card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .card .card-header { background: transparent; border-bottom:1px solid var(--color-border); } .ds-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); } /* KPI specific */ .kpi-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .kpi-card:active { transform: scale(0.98); } .kpi-label { color: var(--color-text-muted); font-size: .9rem; margin-bottom: 4px; } .kpi-value { font-size: 1.4rem; font-weight: 700; } /* Action grid/cards */ .action-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; } .action-card { background: var(--color-surface-2); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; text-align:center; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; box-shadow: none; user-select: none; color: inherit; } .action-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); } .action-card:active { transform: scale(0.98); } .action-icon { font-size: 1.8rem; margin-bottom: 6px; } .action-title { font-weight: 600; font-size: .95rem; } .action-sub { font-size: .75rem; color: var(--color-text-muted); } /* 6) Tables */ .table { --tbl-border: var(--color-border); --tbl-head-bg: color-mix(in srgb, var(--color-surface) 92%, #fff); --tbl-head-color: var(--color-text-muted); color: inherit; border-collapse: separate; border-spacing: 0; } .table thead th { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 7%, var(--tbl-head-bg)), var(--tbl-head-bg)); color: var(--tbl-head-color); border-bottom:1px solid var(--color-border); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: 13px 14px; white-space: nowrap; } .table tbody td { border-top: 1px solid var(--color-border); font-size: 13.5px; font-weight: 500; line-height: 1.45; vertical-align: middle; padding: 14px; } .table-hover tbody tr:hover { background: color-mix(in srgb, var(--color-surface) 95%, #000); } .table > :not(caption) > * > * { box-shadow: none; } .table-sm thead th, .table-sm tbody td { padding: 10px 12px; } /* Force Bootstrap table variables to follow our theme */ .table { --bs-table-bg: var(--color-surface); --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); --bs-table-striped-bg: color-mix(in srgb, var(--color-surface) 88%, #fff); --bs-table-striped-color: var(--color-text); --bs-table-active-bg: color-mix(in srgb, var(--color-surface) 84%, #fff); --bs-table-active-color: var(--color-text); --bs-table-hover-bg: color-mix(in srgb, var(--color-surface) 82%, #fff); --bs-table-hover-color: var(--color-text); } /* Explicit dark-mode safety for list pages */ :root[data-theme="dark"] #list-table, :root[data-theme="dark"] #list-table thead, :root[data-theme="dark"] #list-table tbody, :root[data-theme="dark"] #list-table tr, :root[data-theme="dark"] #list-table th, :root[data-theme="dark"] #list-table td, :root[data-theme="dark"] #list-table .text-muted { color: var(--color-text) !important; } :root[data-theme="dark"] #list-table th { background: color-mix(in srgb, var(--color-surface) 84%, #fff) !important; border-color: var(--color-border) !important; } :root[data-theme="dark"] #list-table td { background: var(--color-surface) !important; border-color: var(--color-border) !important; } /* DataTables compatibility */ .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background: var(--color-surface); color: inherit; border:1px solid var(--color-border); border-radius: var(--radius-sm); min-height: 40px; padding: 8px 10px; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px !important; padding: 4px 10px !important; } /* 7) Buttons */ .btn { border-radius: 10px; font-weight: 600; min-height: 40px; padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease; box-shadow: none; } .btn-sm { min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: .85rem; gap: 6px; } .btn-lg { min-height: 46px; padding: 10px 16px; border-radius: 10px; } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0) scale(.985); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent); } .btn:disabled, .btn.disabled { opacity: .62; transform: none; box-shadow: none; pointer-events: none; } .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primary) 88%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 80%, #000); --bs-btn-color: var(--color-primary-contrast); } .btn-outline-secondary { --bs-btn-color: var(--color-text); --bs-btn-border-color: var(--color-border); --bs-btn-hover-bg: var(--color-surface-2); --bs-btn-hover-border-color: var(--color-border); } .btn-outline-dark { --bs-btn-color: var(--color-text); --bs-btn-border-color: var(--color-border); --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--color-surface-2); --bs-btn-hover-border-color: var(--color-border); --bs-btn-active-color: var(--color-text); --bs-btn-active-bg: var(--color-surface-2); --bs-btn-active-border-color: var(--color-border); } .btn-danger { --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger); } .btn-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); } .btn-warning { --bs-btn-bg: var(--color-warning); --bs-btn-border-color: var(--color-warning); } /* Icon-only buttons */ .btn-icon { width: 36px; height: 36px; display:inline-flex; align-items:center; justify-content:center; border-radius: 10px; } .btn .bi { margin-right: 0; } /* Unified aliases used across list pages */ .action-btn, .crm-btn { border-radius: 10px; font-weight: 600; min-height: 40px; padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--color-border); text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease; } .action-btn:hover, .crm-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; } /* Global loading state */ .btn.is-loading { position: relative; color: transparent !important; } .btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: rgba(255,255,255,1); animation: btn-spin .7s linear infinite; } .btn.btn-outline-secondary.is-loading::after, .btn.btn-light.is-loading::after, .btn.btn-outline-primary.is-loading::after { border: 2px solid rgba(0,0,0,.2); border-top-color: rgba(0,0,0,.7); } @keyframes btn-spin { to { transform: rotate(360deg); } } /* 8) Forms */ .form-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 700; margin-bottom: 6px; } .form-control, .form-select, textarea { background: var(--color-surface); color: inherit; border:1px solid var(--color-border); border-radius: var(--radius-sm); min-height: 40px; font-size: 14px; } .form-control:focus, .form-select:focus, textarea:focus { border-color: color-mix(in srgb, var(--color-primary) 45%, #888); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } .input-group-text { background: var(--color-surface-2); color: inherit; border:1px solid var(--color-border); } /* Search inputs: simple, professional and consistent */ input[type="search"], input[id="search"], input[id$="Filter"] { background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); min-height: 42px; } input[type="search"]::placeholder, input[id="search"]::placeholder, input[id$="Filter"]::placeholder { color: var(--color-text-muted); opacity: 1; } input[type="search"]:focus, input[id="search"]:focus, input[id$="Filter"]:focus { border-color: color-mix(in srgb, var(--color-primary) 45%, #888); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } /* 9) Badges */ .badge { border:1px solid transparent; } .badge.bg-success { background-color: color-mix(in srgb, var(--color-success) 18%, transparent) !important; color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 40%, transparent); } .badge.bg-danger { background-color: color-mix(in srgb, var(--color-danger) 18%, transparent) !important; color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); } .badge.bg-warning { background-color: color-mix(in srgb, var(--color-warning) 18%, transparent) !important; color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); } .badge.bg-primary { background-color: color-mix(in srgb, var(--color-primary) 18%, transparent) !important; color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); } /* 10) Modals */ .modal-content { background: var(--color-surface); border:1px solid var(--color-border); box-shadow: var(--shadow-md); border-radius: var(--radius-md); } .modal-header { border-bottom:1px solid var(--color-border); } .modal-footer { border-top:1px solid var(--color-border); } /* 11) Alerts */ .alert { border-radius: var(--radius-sm); border:1px solid var(--color-border); } .alert-primary { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-text); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); } .alert-danger { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-text); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); } .alert-success { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-text); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); } /* 12) Utilities */ .border-subtle { border-color: var(--color-border) !important; } .text-muted-strong { color: var(--color-text-muted) !important; } .shadow-soft { box-shadow: var(--shadow-md) !important; } .rounded-md { border-radius: var(--radius-md) !important; } /* Bootstrap compatibility layer for pages still using utility classes */ .text-muted { color: var(--color-text-muted) !important; } .bg-light, .table-light, .card-header.bg-light { background-color: var(--color-surface-2) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%); } /* 13) Dashboard-specific helpers */ .fab { position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast) !important; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg); } .fab i { font-size: 1.6rem; } #invoiceListWrap { animation: fadeIn .2s ease-in; } @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } /* 14) Touch targets and buttons */ .btn, .btn-icon { min-height: 44px; } .btn-touch { min-height: 44px; } .btn-group-touch { display: flex; flex-wrap: wrap; gap: 8px; } .btn i { margin-right: 6px; } /* 15) Unified App Shell */ .app-shell { min-height: 100vh; background: var(--color-bg); } .app-topbar { position: sticky; top: 0; z-index: 1040; height: var(--app-topbar-height); display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 0 22px; border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 94%, transparent); backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 10%, transparent); } .app-topbar-left, .app-topbar-right { display: flex; align-items: center; gap: 12px; } .app-topbar-left { min-width: 0; } .app-topbar-right { min-width: 0; flex: 1; justify-content: flex-end; } .app-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); font-weight: 700; } .app-brand-logo { width: 46px; height: 46px; border-radius: 8px; object-fit: contain; } .app-breadcrumbs { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 12px; } .app-breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } .app-global-search { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: min(300px, 24vw); border: 1px solid var(--color-border); border-radius: 10px; padding: 7px 11px; background: var(--color-surface-2); } .app-global-search i { color: var(--color-text-muted); } .app-global-search input { border: 0; outline: 0; width: 100%; background: transparent; color: var(--color-text); } .app-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 360px; overflow: auto; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: var(--shadow-lg); z-index: 1060; padding: 6px; } .app-search-item { display: block; text-decoration: none; color: var(--color-text); border-radius: 8px; padding: 8px 10px; } .app-search-item:hover, .app-search-item.is-active { background: var(--color-surface-2); } .app-search-item-title { font-size: 13px; font-weight: 600; } .app-search-item-sub { font-size: 12px; color: var(--color-text-muted); } .app-search-empty { font-size: 12px; color: var(--color-text-muted); padding: 8px 10px; } .app-icon-btn { width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); } .app-pos-actions { display: inline-flex; align-items: center; gap: 8px; max-width: min(720px, 52vw); overflow-x: auto; padding: 4px; scrollbar-width: none; } .app-pos-actions::-webkit-scrollbar { display: none; } .app-pos-btn { width: 52px; min-width: 52px; height: 52px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.28rem; transition: background-color .14s ease, border-color .14s ease, transform .14s ease, color .14s ease; } .app-pos-btn:hover { background: var(--color-surface-2); border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); transform: translateY(-1px); } .app-pos-btn.is-active { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); } /* Hauptmodule (persistente Navigation zwischen allen Bereichen) */ .app-modulebar { position: sticky; top: var(--app-topbar-height); z-index: 1035; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: saturate(140%) blur(12px); overflow-x: auto; scrollbar-width: none; } .app-modulebar::-webkit-scrollbar { display: none; } .app-module-link { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease; } .app-module-link:hover { background: var(--color-surface-2); color: var(--color-text); border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); transform: translateY(-1px); } .app-module-link.is-active { background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)), var(--color-surface)); color: var(--color-text); border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border)); box-shadow: var(--shadow-sm); } .app-module-link.is-active i { color: var(--color-primary); } .app-module-link i { font-size: 1.05rem; } /* Mobile Navigation drawer */ .app-nav-drawer-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .app-nav-drawer-modules .app-module-link { width: 100%; min-width: 0; overflow: hidden; justify-content: flex-start; } .app-user-menu { position: relative; } .app-user-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 10px; padding: 6px 10px; background: var(--color-surface); } .app-user-menu summary::-webkit-details-marker { display: none; } .app-user-menu-panel { position: absolute; right: 0; top: 40px; min-width: 180px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: var(--shadow-md); padding: 6px; } .app-user-menu-panel a { display: block; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--color-text); } .app-user-menu-panel a:hover { background: var(--color-surface-2); } .app-user-menu-panel a.danger { color: var(--color-danger); } .app-shell-body { display: grid; grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr); min-height: calc(100dvh - var(--app-topbar-height) - var(--app-modulebar-height)); } .app-sidebar { border-right: 1px solid var(--color-border); background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 94%, var(--color-surface-2))); padding: 14px 12px 20px; overflow: auto; position: sticky; top: calc(var(--app-topbar-height) + var(--app-modulebar-height)); height: calc(100dvh - var(--app-topbar-height) - var(--app-modulebar-height)); } .app-sidebar-context { border: 1px solid var(--color-border); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)), var(--color-surface)); border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow-sm); } .app-sidebar-context-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); } .app-sidebar-context-title { margin-top: 3px; font-size: 18px; font-weight: 850; color: var(--color-text); } .app-nav-group { padding: 8px; border: 1px solid transparent; border-radius: 12px; } .app-nav-group.has-active { border-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-border)); background: color-mix(in srgb, var(--color-surface) 72%, transparent); } .app-nav-group + .app-nav-group { margin-top: 8px; } .app-nav-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); padding: 2px 8px 8px; } .app-nav-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); padding: 9px 10px; border-radius: 8px; min-height: 42px; font-weight: 560; border: 1px solid transparent; transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease; } .app-nav-link i { width: 22px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: var(--color-text-muted); background: color-mix(in srgb, var(--color-surface-2) 72%, transparent); } .app-nav-link:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .app-nav-link.is-active { background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface)); color: var(--color-text); font-weight: 750; border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); box-shadow: var(--shadow-sm); } .app-nav-link.is-active i { color: var(--color-primary-contrast); background: var(--color-primary); } .app-content { padding: var(--app-page-padding); min-width: 0; } .app-shell-no-sidebar .app-shell-body { grid-template-columns: 1fr; } .app-shell-no-sidebar .app-content { padding: var(--app-page-padding); } .app-shell-full-bleed .app-content { padding: 0; } .app-shell-no-sidebar .app-footer { display: none; } .app-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 12px; color: var(--color-text-muted); } .app-footer-right { display: inline-flex; gap: 14px; } .app-footer a { color: var(--color-text-muted); text-decoration: none; } .app-dialog { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); min-width: 320px; padding: 0; } .app-dialog::backdrop { background: rgba(0,0,0,.35); } .app-dialog-head { padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-weight: 600; } .app-dialog-body { padding: 10px; display: grid; gap: 6px; } .app-dialog-body a { text-decoration: none; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; padding: 8px; } @media (max-width: 1023.98px) { :root { --app-topbar-height: 64px; --app-modulebar-height: 49px; --app-page-padding: 16px; --app-section-gap: 16px; --app-card-padding: 16px; --app-grid-gap: 14px; } .app-shell-body { grid-template-columns: 1fr; } .app-modulebar { top: 64px; padding: 6px 10px; } .app-module-link { height: 36px; padding: 0 12px; font-size: 12.5px; } .app-sidebar { display: none; } .app-breadcrumbs { display: none; } .app-global-search { display: none; } .app-pos-actions { max-width: calc(100vw - 188px); } .app-pos-btn { width: 46px; min-width: 46px; height: 46px; font-size: 1.14rem; } .app-topbar { padding: 0 12px; } .app-brand-logo { width: 40px; height: 40px; } .app-footer { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 12px; } } @media (max-width: 767.98px) { :root { --app-page-padding: 12px; --app-grid-gap: 12px; } } /* 16) Legacy Page Harmonizer (cross-page consistency) */ .app-content .container, .app-content .container-fluid { max-width: 1360px; } .app-content .dashboard-modern, .app-content main.container, .app-content main.container-fluid { padding-top: 8px !important; } /* Legacy headers / toolbars */ .toolbar, .quick-actions, .stats-card, .card-dark { background: var(--color-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; } .toolbar { padding: 14px 16px !important; } /* KPI cards */ .kpi-card, .stats-card, .card-dark, .ds-card { min-height: 104px; display: flex; flex-direction: column; justify-content: center; } .kpi-label { font-size: 12px !important; font-weight: 600 !important; color: var(--color-text-muted) !important; text-transform: uppercase; letter-spacing: .04em; } .kpi-value, .stats-number { font-size: 1.45rem !important; font-weight: 700 !important; color: var(--color-text) !important; } /* Action cards */ .action-grid { gap: 12px !important; } .action-card { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; min-height: 98px; padding: 14px !important; } .action-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm) !important; } .action-title { font-size: 13px !important; font-weight: 650 !important; } .action-sub { font-size: 11px !important; } /* Legacy page titles */ .page-title { margin-top: 4px !important; margin-bottom: 4px !important; } .page-sub { margin-bottom: 14px !important; } /* Forms consistency on legacy pages */ .app-content .form-control, .app-content .form-select, .app-content textarea { min-height: 40px !important; border-radius: 10px !important; } /* Modal consistency */ .modal-content { border-radius: 12px !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-md) !important; } .modal-header, .modal-footer { border-color: var(--color-border) !important; } /* Table consistency even when pages still use custom wrappers */ .table-responsive { border-radius: 10px; } .table thead th, .table tbody td { border-color: var(--color-border) !important; } /* Increase table cell padding for touch */ .table td, .table th { padding: 0.9rem 0.75rem; } .table-modern td, .table-modern th { padding: 0.9rem 0.75rem; } /* 15) Avatars */ .avatar-circle { width: 40px; height: 40px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 700; } .client-avatar { width: 40px; height: 40px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 700; } /* 16) Quick action buttons */ .quick-action-btn { width: 36px; height: 36px; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--color-border); background: var(--color-surface-2); color: inherit; } .quick-action-btn:hover { background: color-mix(in srgb, var(--color-surface) 90%, #000); } /* 17) Footer */ .app-footer { border-top:1px solid var(--color-border); background: var(--color-surface); } /* 18) Legacy compatibility + common page containers */ /* Map older classes used across pages to design tokens without changing markup */ .card-dark { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-md); } .toolbar { background: var(--color-surface); color: var(--color-text); border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; } .quick-actions { background: var(--color-surface); color: inherit; border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; } .stats-card { background: var(--color-surface); color: inherit; border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; } .table-container { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: none; } .bulk-actions { background: var(--color-surface); color: inherit; border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } /* Harmonize Bootstrap light button with themes */ .btn-light { --bs-btn-bg: var(--color-surface-2); --bs-btn-border-color: var(--color-border); --bs-btn-color: var(--color-text); --bs-btn-hover-bg: color-mix(in srgb, var(--color-surface) 92%, #000); --bs-btn-hover-border-color: var(--color-border); } /* ====================================================== Angebote List – Page-specific styling Uses existing Vision L&T design tokens ====================================================== */ /* Page container rhythm */ main.container-fluid { animation: fadeIn .2s ease-in; } /* Header / toolbar refinement */ .toolbar h1 { display: flex; align-items: center; gap: 10px; font-weight: 700; } /* Quick actions block */ .quick-actions { padding: var(--space-4); } /* Stats cards — align with KPI cards */ .stats-card { cursor: default; transition: transform .12s ease, box-shadow .12s ease; } .stats-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stats-number { font-size: 1.8rem; font-weight: 800; color: var(--color-primary); } /* Table spacing + hierarchy */ .table-container { overflow: hidden; } .table thead th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; } .table tbody tr { transition: background .12s ease; } .table tbody tr:hover { background: color-mix(in srgb, var(--color-surface) 94%, #000); } /* Amount column emphasis */ .table td.text-end strong { font-variant-numeric: tabular-nums; font-weight: 700; } /* Status badges — mapped to your design tokens */ .status-badge { padding: .35em .7em; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; border: 1px solid transparent; } .status-open { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 32%, transparent); } .status-accepted { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 36%, transparent); } .status-expired { background: color-mix(in srgb, var(--color-text-muted) 18%, transparent); color: var(--color-text-muted); border-color: color-mix(in srgb, var(--color-text-muted) 36%, transparent); } .status-rejected { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 36%, transparent); } /* Action buttons inside table */ .table .btn-group .btn { border-radius: 10px; transition: transform .12s ease, box-shadow .12s ease; } .table .btn-group .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } /* Floating bulk actions — CRM style */ .bulk-actions { backdrop-filter: blur(8px); } .bulk-actions .btn { font-weight: 500; } /* Pagination polish */ .pagination-controls .btn { min-height: 40px; } /* Loading overlay card */ #loadingOverlay > div { box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); } /* Notification stack spacing */ .notification .alert + .alert { margin-top: 8px; }