/* ══════════════════════════════════════════════════════════════ CRM Design System — Partnerportal Global geladen, aber jede Regel unter .crm-scope geschachtelt — überschreibt dadurch NICHT mehr die globalen Bootstrap-Variablen oder -Klassen auf Seiten ohne dieses Scope. .crm-scope wird von _Layout.cshtml auf den gesetzt, wenn ViewData["UseCrmTheme"] von der jeweiligen Seite gesetzt wurde (CRM-Bereich + ScanjobWizard). ══════════════════════════════════════════════════════════════ */ /* ── Design Tokens (nur innerhalb von .crm-scope sichtbar) ──── */ .crm-scope { --crm-green: #16a34a; --crm-green-dark: #15803d; --crm-green-light: #f0fdf4; --crm-green-ring: rgba(22, 163, 74, .12); --crm-green-border: rgba(22, 163, 74, .3); --crm-border: #e4e4e7; --crm-surface: #f4f4f5; --crm-text: #18181b; --crm-muted: #71717a; --crm-label: #a1a1aa; --crm-radius: 8px; --crm-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --crm-shadow-md: 0 4px 12px rgba(0,0,0,.08); /* Override Bootstrap primary → brand green, nur innerhalb des CRM-Bereichs */ --bs-primary: #16a34a; --bs-primary-rgb: 22, 163, 74; --bs-link-color: #16a34a; --bs-link-color-rgb: 22, 163, 74; --bs-link-hover-color: #15803d; } /* ── Green focus rings on all form controls ─────────────────── */ .crm-scope .form-control:focus, .crm-scope .form-select:focus, .crm-scope textarea.form-control:focus, .crm-scope input.form-check-input:focus { border-color: var(--crm-green) !important; box-shadow: 0 0 0 3px var(--crm-green-ring) !important; outline: none !important; } /* ── Bootstrap nav-tabs → Segmented Control ─────────────────── */ .crm-scope .nav-tabs { border-bottom: none !important; background: var(--crm-surface); border-radius: 10px !important; padding: 3px !important; display: inline-flex !important; flex-wrap: nowrap; gap: 0; } .crm-scope .nav-tabs .nav-item { margin: 0 !important; } .crm-scope .nav-tabs .nav-link { border: none !important; border-radius: var(--crm-radius) !important; color: var(--crm-muted) !important; font-weight: 500; font-size: .82rem; padding: 6px 14px !important; background: transparent !important; margin: 0 !important; transition: all .15s ease !important; white-space: nowrap; } .crm-scope .nav-tabs .nav-link.active { color: var(--crm-text) !important; background: #ffffff !important; box-shadow: 0 1px 4px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06) !important; } .crm-scope .nav-tabs .nav-link:hover:not(.active) { background: rgba(0,0,0,.05) !important; color: #3f3f46 !important; } .crm-scope .nav-tabs .nav-link .badge { font-size: .65rem; } /* ── tab-content spacing ────────────────────────────────────── */ .crm-scope .tab-content { margin-top: .75rem; } /* ── btn-primary → green ────────────────────────────────────── */ .crm-scope .btn-primary { background-color: var(--crm-green) !important; border-color: var(--crm-green) !important; } .crm-scope .btn-primary:hover, .crm-scope .btn-primary:focus { background-color: var(--crm-green-dark) !important; border-color: var(--crm-green-dark) !important; box-shadow: 0 2px 8px var(--crm-green-ring) !important; } /* ── btn-outline-primary → green outline ───────────────────── */ .crm-scope .btn-outline-primary { color: var(--crm-green) !important; border-color: var(--crm-green) !important; } .crm-scope .btn-outline-primary:hover { background-color: var(--crm-green) !important; border-color: var(--crm-green) !important; color: #fff !important; } /* ── btn-success (keep in sync with brand green) ────────────── */ .crm-scope .btn-success { background-color: var(--crm-green) !important; border-color: var(--crm-green) !important; } .crm-scope .btn-success:hover, .crm-scope .btn-success:focus { background-color: var(--crm-green-dark) !important; border-color: var(--crm-green-dark) !important; } /* ── btn-outline-secondary (standardize) ───────────────────── */ .crm-scope .btn-outline-secondary { border-color: var(--crm-border) !important; color: #52525b !important; } .crm-scope .btn-outline-secondary:hover { background: var(--crm-surface) !important; border-color: #d4d4d8 !important; color: var(--crm-text) !important; } /* ── Table headers ──────────────────────────────────────────── */ .crm-scope .table thead th { font-size: .70rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--crm-label); border-bottom: 2px solid var(--crm-border); background: transparent; } .crm-scope .table-light thead th { background: transparent !important; } .crm-scope .table tbody tr:hover td { background: #fafafa; } /* ── Section label (same as .qa-lbl) ───────────────────────── */ .crm-scope .crm-lbl { display: block; font-size: .69rem; font-weight: 700; color: var(--crm-label); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; } /* ── Card standard ──────────────────────────────────────────── */ .crm-scope .crm-card { background: #fff; border: 1px solid var(--crm-border); border-radius: 12px; box-shadow: var(--crm-shadow); } .crm-scope .crm-card-header { padding: .65rem 1rem; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; } .crm-scope .crm-card-title { font-size: .70rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--crm-label); } /* ── KPI cards (both cc-kpi-card and mt-kpi-card) ───────────── */ .crm-scope .cc-kpi-card, .crm-scope .mt-kpi-card { border-radius: 12px !important; border: 1px solid var(--crm-border) !important; box-shadow: var(--crm-shadow) !important; } /* ── text-primary → green ───────────────────────────────────── */ .crm-scope .text-primary { color: var(--crm-green) !important; } /* ── spinner-border.text-primary ────────────────────────────── */ .crm-scope .spinner-border.text-primary { color: var(--crm-green) !important; } /* ── badge bg-primary ───────────────────────────────────────── */ .crm-scope .badge.bg-primary, .crm-scope .badge.text-bg-primary { background-color: var(--crm-green) !important; } /* ── progress bar ───────────────────────────────────────────── */ .crm-scope .progress-bar { background-color: var(--crm-green); } /* ── History list (carried over from original crm.css) ─────── */ .crm-scope #crm-historie-list .list-group-item { border-left: none; border-right: none; } .crm-scope #crm-historie-list .list-group-item:first-child { border-top: none; } /* ── Toast animation (carried over) ────────────────────────── */ .crm-scope .crm-feedback-toast { animation: crmFadeIn 0.3s ease; } @keyframes crmFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ── Page header pattern ────────────────────────────────────── */ .crm-scope .crm-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--crm-border); flex-wrap: wrap; gap: .75rem; } .crm-scope .crm-page-title { font-size: 1.1rem; font-weight: 700; color: var(--crm-text); margin: 0; } .crm-scope .crm-page-sub { font-size: .78rem; color: var(--crm-muted); margin: 2px 0 0; } /* ── Filter bar ─────────────────────────────────────────────── */ .crm-scope .crm-filter-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .65rem .9rem; background: #fff; border: 1px solid var(--crm-border); border-radius: 12px; margin-bottom: 1rem; } /* ── Empty state ────────────────────────────────────────────── */ .crm-scope .crm-empty { text-align: center; padding: 3rem 1rem; color: var(--crm-label); } .crm-scope .crm-empty i { font-size: 2.5rem; display: block; margin-bottom: .75rem; opacity: .4; } .crm-scope .crm-empty p { font-size: .88rem; margin: 0; }