/* ===================================================================== VLYX Auftrags-Dashboard – Design-System Angeglichen an den VLYX-Navigator / Digitale Vorgangsakte (Theme „classic“): dunkle Sidebar + helle Topbar mit Breadcrumb, Slate-Palette, Blau-Akzent, weiße Cards mit Rand statt Schatten. Hell + Dunkel über data-bs-theme (). Die Akzentfarbe (--primary ...) wird pro Instanz aus den Einstellungen (branding_color) im injiziert – siehe brandVars(). ===================================================================== */ /* ---- Design-Tokens (Light / classic) ---- */ :root, :root[data-bs-theme="light"] { --primary:#2563eb; --primary-dark:#1d4ed8; --primary-ink:#ffffff; --primary-weak:rgba(37,99,235,.12); --primary-line:rgba(37,99,235,.30); --primary-light:#dbeafe; --ground:#f1f5f9; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9; --border:#e2e8f0; --border-strong:#cbd5e1; --text:#1e293b; --muted:#64748b; --faint:#94a3b8; /* Sidebar (dunkles Slate) + Topbar (hell) */ --sidebar-bg:#1e293b; --sidebar-hover:#334155; --sidebar-text:#cbd5e1; --sidebar-text-active:#ffffff; --sidebar-brand:#ffffff; --sidebar-border:rgba(255,255,255,.10); --sidebar-width:260px; --topbar-bg:#ffffff; --topbar-height:56px; /* Alias für Altbestand (dunkle Leiste) */ --bar:#1e293b; --bar-ink:#ffffff; --bar-muted:#cbd5e1; --success:#16a34a; --warning:#d97706; --danger:#dc2626; --info:#0891b2; --radius:.5rem; --radius-sm:.375rem; --shadow-sm:none; --shadow-md:0 2px 8px rgba(0,0,0,.08); --login-bg:linear-gradient(135deg,#1e293b 0%,#334155 100%); --overlay-bg:rgba(0,0,0,.5); --mono: ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace; --bs-body-bg: var(--ground); --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--border); --bs-primary: var(--primary); --bs-primary-rgb: 37,99,235; --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-dark); --bs-focus-ring-color: rgba(37,99,235,.20); } :root[data-bs-theme="dark"] { --primary-light:rgba(37,99,235,.22); --ground:#0f172a; --surface:#1e293b; --surface-2:#273449; --surface-3:#334155; --border:#334155; --border-strong:#475569; --text:#e2e8f0; --muted:#94a3b8; --faint:#64748b; --topbar-bg:#1e293b; --shadow-sm:none; --shadow-md:0 4px 14px rgba(0,0,0,.45); } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme]) { --primary-light:rgba(37,99,235,.22); --ground:#0f172a; --surface:#1e293b; --surface-2:#273449; --surface-3:#334155; --border:#334155; --border-strong:#475569; --text:#e2e8f0; --muted:#94a3b8; --faint:#64748b; --topbar-bg:#1e293b; } } /* ---- Grundlagen ---- */ body { font-family: 'Inter', system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background-color: var(--ground); color: var(--text); font-size: 0.9rem; } .mono, .num, .onr { font-family: var(--mono); font-variant-numeric: tabular-nums; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); text-decoration: underline; } .card a:hover, a.btn:hover, .list-group-item a:hover, .sidebar-nav-item:hover { text-decoration: none; } h1,h2,h3,h4,h5,h6 { font-weight: 600; } /* ===================================================================== App-Shell: Sidebar (dunkel) + Main + Topbar (hell) ===================================================================== */ .app-wrapper { display: flex; min-height: 100vh; } .app-main { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-width: 0; } .app-content { padding: 1.5rem; flex: 1; } /* ---- Sidebar ---- */ .app-sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-text); position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; z-index: 1040; display: flex; flex-direction: column; transition: transform .3s ease; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sidebar-border); } .sidebar-brand { color: var(--sidebar-brand); text-decoration: none; font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; letter-spacing: -.01em; } .sidebar-brand:hover { color: var(--sidebar-brand); text-decoration: none; } .sidebar-brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: var(--primary); color:#fff; font-size: 1rem; } .sidebar-brand .brand-logo-img { border-radius: 7px; flex: 0 0 auto; } .sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .sidebar-brand-name { font-weight: 700; } .sidebar-brand-sub { font-size: .72rem; font-weight: 500; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-close { background: none; border: none; color: var(--sidebar-text); font-size: 1.25rem; cursor: pointer; padding: .25rem; } .sidebar-nav { flex: 1; padding: .75rem 0; } .sidebar-nav-item { display: flex; align-items: center; gap: .75rem; padding: .65rem 1.25rem; color: var(--sidebar-text); text-decoration: none; font-size: .9rem; transition: background-color .15s, color .15s; border-left: 3px solid transparent; } .sidebar-nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); } .sidebar-nav-item.active { background: var(--sidebar-hover); color: var(--sidebar-text-active); border-left-color: var(--primary); font-weight: 500; } .sidebar-nav-item i { font-size: 1.15rem; width: 1.25rem; text-align: center; } .sidebar-divider { border-top: 1px solid var(--sidebar-border); margin: .5rem 1.25rem; } .sidebar-section-label { padding: .55rem 1.25rem .2rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sidebar-text); opacity: .5; user-select: none; } .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--sidebar-border); } .sidebar-user { display: flex; align-items: center; gap: .5rem; color: var(--sidebar-text); font-size: .85rem; } .sidebar-user i { font-size: 1.4rem; } /* ---- Topbar ---- */ .app-topbar { height: var(--topbar-height); background: var(--topbar-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1020; } .topbar-toggle { background: none; border: none; font-size: 1.5rem; color: var(--text); cursor: pointer; padding: .25rem; margin-right: .75rem; } .topbar-breadcrumb { display: flex; align-items: center; gap: 0; min-width: 0; overflow: hidden; } .topbar-breadcrumb-link { color: var(--primary); text-decoration: none; font-size: .9rem; white-space: nowrap; flex-shrink: 0; } .topbar-breadcrumb-link:hover { color: var(--primary-dark); text-decoration: underline; } .topbar-breadcrumb-sep { color: var(--muted); font-size: .7rem; margin: 0 .4rem; flex-shrink: 0; } .topbar-breadcrumb-current { color: var(--text); font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .topbar-actions { display: flex; align-items: center; gap: .5rem; } .topbar-actions .btn-link { text-decoration: none; font-size: .9rem; color: var(--text); } /* ---- Sidebar-Overlay (mobil) ---- */ .sidebar-overlay { position: fixed; inset: 0; background: var(--overlay-bg); z-index: 1035; display: none; } .sidebar-overlay.show { display: block; } /* ---- Page-Header ---- */ .page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; } .page-header h1 { font-size: 1.5rem; font-weight: 600; margin: 0; } /* ---- Karten ---- */ .card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; transition: border-color .15s; } .card-header { background-color: transparent; border-bottom: 1px solid var(--border); padding: .7rem 1rem; } .admin-tile { transition: border-color .15s, box-shadow .15s; } .admin-tile:hover { border-color: var(--primary); box-shadow: var(--shadow-md); } /* KPI-Kacheln (Navigator-Motiv: Icon-Quadrat + Wert) */ .kpi-card { display: flex; align-items: flex-start; gap: 1rem; } .kpi-card .kpi-icon { width: 48px; height: 48px; border-radius: .5rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .kpi-card .kpi-icon.bg-primary-light { background: var(--primary-light); color: var(--primary); } .kpi-card .kpi-icon.bg-success-light { background: #dcfce7; color: var(--success); } .kpi-card .kpi-icon.bg-warning-light { background: #fef3c7; color: var(--warning); } .kpi-card .kpi-icon.bg-danger-light { background: #fee2e2; color: var(--danger); } .kpi-card .kpi-icon.bg-info-light { background: #cffafe; color: var(--info); } .kpi-card .kpi-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; } .kpi-card .kpi-label { font-size: .8rem; color: var(--muted); margin-top: .25rem; } /* ---- Tabellen ---- */ .table { font-size: 0.9rem; --bs-table-bg: transparent; color: var(--text); border-color: var(--border); } .table thead th { background-color: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; border-bottom: 1px solid var(--border); padding: 0.75rem 1rem; white-space: nowrap; } .table td { vertical-align: middle; padding: 0.7rem 1rem; border-color: var(--border); } .table > :not(caption) > * > * { background-color: transparent; } .table-hover tbody tr:hover td { background-color: var(--surface-2); } /* ---- Buttons ---- */ .btn { border-radius: var(--radius-sm); font-weight: 500; font-size: 0.875rem; } .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--primary-ink); } .btn-outline-primary { color: var(--primary); border-color: var(--border-strong); background: var(--surface); } .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .btn-outline-secondary { color: var(--muted); border-color: var(--border-strong); background: transparent; } .btn-outline-secondary:hover { background-color: var(--surface-3); border-color: var(--border-strong); color: var(--text); } /* ---- Formulare ---- */ .form-control, .form-select { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); background-color: var(--surface); } .form-control::placeholder { color: var(--faint); } .form-label { font-weight: 500; font-size: 0.82rem; color: var(--muted); } /* ---- Badges / Status-Chips ---- */ .badge { font-weight: 600; font-size: 0.72rem; padding: 0.34em 0.62em; border-radius: 999px; } .tb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; line-height: 1.7; white-space: nowrap; --_c: var(--c,#64748b); color: color-mix(in srgb, var(--_c) 78%, var(--text)); background: color-mix(in srgb, var(--_c) 15%, var(--surface)); } .tb-chip::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--_c); opacity:.95; flex:0 0 auto; } @supports not (color: color-mix(in srgb, red, blue)) { .tb-chip { background: var(--_c); color:#fff; } .tb-chip::before { background:#fff; } } .alert { border-radius: var(--radius); border: 1px solid var(--border); font-size: 0.9rem; } .list-group-item { background-color: var(--surface); border-color: var(--border); color: var(--text); } /* ---- Kanban-Board ---- */ .board-scroll { overflow-x: auto; padding-bottom: .5rem; } .board-columns { display: flex; gap: .75rem; align-items: flex-start; min-height: 60vh; } .board-column { flex: 0 0 280px; width: 280px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; } .board-column-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; font-size: .85rem; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); background: var(--surface); border-bottom: 1px solid var(--border); } .board-column-body { padding: .5rem; display: flex; flex-direction: column; gap: .5rem; } .board-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .7rem; box-shadow: var(--shadow-sm); transition: box-shadow .12s, border-color .12s; } .board-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .board-card-id { font-family: var(--mono); font-size: .74rem; color: var(--muted); font-weight: 600; } .board-card-title { font-weight: 600; margin: .15rem 0; font-size: .9rem; color: var(--text); } .board-card-meta { font-size: .77rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .5rem; } .board-empty { text-align: center; padding: .5rem 0; } .board-columns.board-single { display: block; } .board-columns.board-single .board-column { flex: none; width: 100%; } .board-columns.board-single .board-column-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; align-items: start; } /* Checklisten-Fortschritt auf der Kachel */ .cl-badge { display: inline-flex; align-items: center; gap: 5px; width: 100%; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: var(--radius-sm); padding: .2rem .5rem; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: filter .12s, border-color .12s; } .cl-badge:hover:not(:disabled) { border-color: var(--border-strong); } .cl-badge:disabled { cursor: default; opacity: .8; } .cl-badge .cl-open { font-weight: 600; } .cl-badge.cl-done { color: var(--success); border-color: color-mix(in srgb,#16a34a 30%,var(--border)); background: color-mix(in srgb,#16a34a 8%,var(--surface)); } .cl-badge.cl-warn { color: #b8860b; border-color: color-mix(in srgb,#d0a020 40%,var(--border)); background: color-mix(in srgb,#d0a020 10%,var(--surface)); } @supports not (color: color-mix(in srgb, red, blue)) { .cl-badge.cl-done { color:#16a34a; } .cl-badge.cl-warn { color:#b8860b; } } /* ---- Login / Gäste-Bereich ---- */ .app-content-guest { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--login-bg); } .login-card { background: #ffffff; border-radius: .75rem; box-shadow: 0 10px 40px rgba(0,0,0,.15); padding: 2.5rem; width: 100%; max-width: 420px; } .login-card .login-header { text-align: center; margin-bottom: 2rem; } .login-card .login-header .brand-mark { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:14px; background:var(--primary); color:#fff; font-size:1.9rem; } .login-card .login-header .login-logo { width:64px; height:64px; border-radius:14px; } .login-card .login-header h1 { font-size: 1.3rem; font-weight: 600; margin-top: .75rem; color: var(--text); } .login-card .login-header p { color: var(--muted); font-size: .9rem; margin: 0; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); } .app-sidebar::-webkit-scrollbar-thumb { background: var(--sidebar-hover); } .cursor-pointer { cursor: pointer; } /* Dark-Mode: fest kodierte Bootstrap-Utilities angleichen */ [data-bs-theme="dark"] .bg-light { background-color: var(--surface-2) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; } [data-bs-theme="dark"] .text-dark { color: var(--text) !important; } [data-bs-theme="dark"] .login-card { background: var(--surface); } /* ---- Responsive ---- */ @media (max-width: 767.98px) { .app-sidebar { transform: translateX(-100%); } .app-sidebar.show { transform: translateX(0); } .app-main { margin-left: 0; } .app-content { padding: 1rem; } } @media (min-width: 768px) { .topbar-toggle { display: none; } .sidebar-close { display: none; } } @media (max-width: 576px) { .board-column { flex-basis: 85vw; width: 85vw; } .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; } .page-header { align-items: stretch; } }