/* ========================================================
   VIFOGRA MEDIA — Orchidly-Style Patch
   ======================================================== */

/* Wärmeres Dunkel wie Orchidly */
:root {
    --bg-base:    #1a1a1a;
    --bg-sidebar: #1f1f1f;
    --bg-card:    #262626;
    --bg-card-hover: #2d2d2d;
    --bg-input:   #333333;
    --border:     rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.13);
    --text-primary:   #e5e7eb;
    --text-secondary: #9ca3af;
    --text-muted:     #6b7280;
    /* Teal als globaler Accent für Wine-Overrides */
    --color-accent-wine: #00BCD4;
}

/* Gradient-Buttons Teal → einheitliche Größe überall */
.vm-btn-primary,
button[type="submit"].btn-primary,
.btn-primary,
input[type="submit"],
a.btn-primary {
    background: linear-gradient(135deg, #38D8EC 0%, #00BCD4 100%) !important;
    border: none !important;
    color: #fff !important;
    height: 34px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(0, 188, 212, 0.3) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.vm-btn-primary:hover,
button[type="submit"].btn-primary:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #00ACC1 0%, #0277BD 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.5) !important;
    transform: translateY(-1px) !important;
    opacity: 1 !important;
}

/* Sidebar wärmer */
.sidebar {
    background: #1f1f1f !important;
    border-right: 1px solid rgba(255,255,255,0.07) !important;
}

.sidebar-header-fixed {
    background: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 100%) !important;
}

/* Grauer Text statt weiß */
.sidebar-nav-scrollable a,
.nav-menu a,
.nav-section-title span {
    color: #d1d5db !important;
}

/* Cards wärmer — NUR Container-Cards, keine Stat-Cards */
.card, .vm-card, .widget-card, .card.glass,
.card-header, .card-body {
    background: #262626 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Aktiver Menüpunkt */
.nav-menu a.active,
.nav-section-content a.active {
    background: rgba(0,188,212,0.15) !important;
    border-left: 3px solid #00BCD4 !important;
    color: #00BCD4 !important;
    border-radius: 8px !important;
}

/* Abstände zwischen Nav-Einträgen */
.nav-menu > li {
    margin-bottom: 4px !important;
}

/* Basis-Styling für alle Nav-Links */
.nav-menu a,
.nav-section-content li a {
    border-radius: 8px !important;
}

/* Hover ebenfalls abgerundet */
.nav-menu a:hover,
.nav-section-content a:hover {
    border-radius: 8px !important;
}

/* Sidebar Footer */
.sidebar-footer {
    background: #1f1f1f !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}

/* Bereich-Karten — semantische Farben je Bereich */
.bereich-card {
    transition: all 0.2s ease !important;
}
.bereich-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
}

.bereich-card.stsob {
    background: rgba(34,197,94,0.08) !important;
    border-color: rgba(34,197,94,0.28) !important;
}
.bereich-card.stsob:hover {
    background: rgba(34,197,94,0.14) !important;
    border-color: rgba(34,197,94,0.45) !important;
}
.bereich-card.stsob .bereich-content h3,
.bereich-card.stsob .bereich-stat-value { color: #22c55e !important; }
.bereich-card.stsob .bereich-icon { color: #22c55e !important; }

.bereich-card.vifogra,
.bereich-card.news {
    background: rgba(74,144,197,0.08) !important;
    border-color: rgba(74,144,197,0.28) !important;
}
.bereich-card.vifogra:hover,
.bereich-card.news:hover {
    background: rgba(74,144,197,0.14) !important;
    border-color: rgba(74,144,197,0.45) !important;
}
.bereich-card.vifogra .bereich-content h3,
.bereich-card.vifogra .bereich-stat-value,
.bereich-card.news .bereich-content h3,
.bereich-card.news .bereich-stat-value { color: #4A90C5 !important; }
.bereich-card.vifogra .bereich-icon,
.bereich-card.news .bereich-icon { color: #4A90C5 !important; }

.bereich-card.vv,
.bereich-card.produktion {
    background: rgba(0,188,212,0.08) !important;
    border-color: rgba(0,188,212,0.28) !important;
}
.bereich-card.vv:hover,
.bereich-card.produktion:hover {
    background: rgba(0,188,212,0.14) !important;
    border-color: rgba(0,188,212,0.45) !important;
}
.bereich-card.vv .bereich-content h3,
.bereich-card.vv .bereich-stat-value,
.bereich-card.produktion .bereich-content h3,
.bereich-card.produktion .bereich-stat-value { color: #00BCD4 !important; }
.bereich-card.vv .bereich-icon,
.bereich-card.produktion .bereich-icon { color: #00BCD4 !important; }

/* Alle primären Button-Varianten mit Teal-Gradient */
.btn-vv, .btn-vifogra, .btn-news, .btn-produktion,
.btn-stsob, .btn-primary, .vm-btn-primary,
button.btn-primary, a.btn-primary,
input[type="submit"] {
    background: linear-gradient(135deg, #00BCD4 0%, #0288D1 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0,188,212,0.3) !important;
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
}

.btn-vv:hover, .btn-vifogra:hover, .btn-news:hover,
.btn-produktion:hover, .btn-stsob:hover,
.btn-primary:hover, .vm-btn-primary:hover {
    background: linear-gradient(135deg, #00ACC1 0%, #0277BD 100%) !important;
    box-shadow: 0 6px 20px rgba(0,188,212,0.45) !important;
    transform: translateY(-1px) !important;
    opacity: 1 !important;
    color: #fff !important;
}

/* btn-glass Varianten (überall verwendet, bisher undefiniert) */
.btn-glass-primary {
    background: rgba(0,188,212,0.12) !important;
    border: 1px solid rgba(0,188,212,0.35) !important;
    color: #00BCD4 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}
.btn-glass-primary:hover {
    background: rgba(0,188,212,0.22) !important;
    border-color: rgba(0,188,212,0.6) !important;
    color: #fff !important;
}

.btn-glass-secondary {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #9ca3af !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}
.btn-glass-secondary:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: #e5e7eb !important;
}

.btn-glass-success {
    background: rgba(34,197,94,0.10) !important;
    border: 1px solid rgba(34,197,94,0.3) !important;
    color: #22c55e !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}
.btn-glass-success:hover {
    background: rgba(34,197,94,0.20) !important;
    border-color: rgba(34,197,94,0.55) !important;
    color: #fff !important;
}

/* btn-vv Glow reduzieren */
.btn-vv {
    box-shadow: 0 3px 10px rgba(0,188,212,0.2) !important;
}
.btn-vv:hover {
    box-shadow: 0 5px 15px rgba(0,188,212,0.35) !important;
}

/* ============================================================
   TABS — Orchidly Teal-Underline-Style (alle Varianten)
   ============================================================ */

/* page-tabs .tab — fix Wine-Accent auf Teal */
.page-tabs .tab:hover {
    background: rgba(0,188,212,0.06) !important;
    color: #e5e7eb !important;
}
.page-tabs .tab.active {
    color: #00BCD4 !important;
    border-bottom-color: #00BCD4 !important;
}

/* filter-btn (Tabs als Filter-Buttons) */
.filter-btn {
    border-color: rgba(255,255,255,0.1) !important;
    background: transparent !important;
    color: #9ca3af !important;
    border-radius: 8px !important;
}
.filter-btn:hover {
    border-color: rgba(0,188,212,0.5) !important;
    background: rgba(0,188,212,0.08) !important;
    color: #e5e7eb !important;
}
.filter-btn.active {
    border-color: #00BCD4 !important;
    background: rgba(0,188,212,0.15) !important;
    color: #00BCD4 !important;
}

/* profile-tab / kunde-tab / tab-btn — einheitlicher Underline-Stil */
.profile-tab,
.kunde-tab,
.tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #9ca3af !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
}
.profile-tab:hover,
.kunde-tab:hover,
.tab-btn:hover {
    color: #e5e7eb !important;
    background: rgba(0,188,212,0.05) !important;
}
.profile-tab.active,
.kunde-tab.active,
.tab-btn.active {
    color: #00BCD4 !important;
    border-bottom-color: #00BCD4 !important;
    background: rgba(0,188,212,0.08) !important;
    font-weight: 600 !important;
}

/* Reporter/Rollen-Badges — Farben wiederherstellen */
.badge-intern {
    background: rgba(34,197,94,0.15) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34,197,94,0.3) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
}
.badge-extern {
    background: rgba(245,158,11,0.15) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245,158,11,0.3) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
}

/* ============================================================
   TABELLEN — einheitliches Dark-Style
   ============================================================ */
.data-table,
table.data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.875rem !important;
}
.data-table th,
.table-container table th,
.table-wrap table th {
    background: transparent !important;
    color: #9ca3af !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.data-table td,
.table-container table td,
.table-wrap table td {
    padding: 8px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    color: #c9cdd4 !important;
}
.data-table tr:hover td,
.table-container table tr:hover td,
.table-wrap table tr:hover td {
    background: rgba(255,255,255,0.03) !important;
}
.data-table tr:last-child td,
.table-container table tr:last-child td,
.table-wrap table tr:last-child td {
    border-bottom: none !important;
}

.table-container,
.table-wrap {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* ============================================================
   SEARCH / FILTER-CHIP — global einheitlich, Orchidly-Minimal
   Struktur: <div class="filter-chip-input"><i></i><input></div>
             <div class="filter-chip-select"><i></i><select></div>
   Der Container ist die sichtbare Box, Input/Select transparent drin
   ============================================================ */

/* Container für Search-Chip */
.filter-chip-input {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    background: rgba(0,0,0,0.22) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    position: static !important;
}
.filter-chip-input:focus-within {
    background: rgba(0,0,0,0.30) !important;
    border-color: rgba(255,255,255,0.14) !important;
}
.filter-chip-input i {
    color: rgba(255,255,255,0.28) !important;
    font-size: 0.82rem !important;
    position: static !important;
    flex-shrink: 0 !important;
}
.filter-chip-input input {
    border: none !important;
    background: transparent !important;
    color: #d1d5db !important;
    font-size: 0.875rem !important;
    padding: 0 !important;
    min-width: 150px !important;
    height: auto !important;
    outline: none !important;
}
.filter-chip-input input::placeholder {
    color: rgba(255,255,255,0.28) !important;
}

/* Container für Select-Chip */
.filter-chip-select {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    background: rgba(0,0,0,0.22) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
    position: static !important;
}
.filter-chip-select:hover {
    background: rgba(0,0,0,0.28) !important;
    border-color: rgba(255,255,255,0.11) !important;
}
.filter-chip-select.has-value {
    background: rgba(0,0,0,0.28) !important;
    border-color: rgba(255,255,255,0.14) !important;
}
.filter-chip-select i {
    color: rgba(255,255,255,0.28) !important;
    font-size: 0.82rem !important;
    position: static !important;
    flex-shrink: 0 !important;
}
.filter-chip-select.has-value i {
    color: rgba(255,255,255,0.5) !important;
}
.filter-chip-select select {
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.875rem !important;
    padding: 0 !important;
    height: auto !important;
    appearance: none !important;
    cursor: pointer !important;
    outline: none !important;
}
.filter-chip-select.has-value select {
    color: #d1d5db !important;
}

/* filter-bar: nur Layout, linksbündig mit Seiteninhalt */
.filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border-bottom: none !important;
}

/* ============================================================
   CARD-FLAT — transparente Card ohne Hintergrund/Rahmen
   Für Inhalts-Container (Tabellen, Listen) die direkt auf dem
   Seiten-Hintergrund sitzen sollen.
   Verwendung: class="card glass card-flat"
   ============================================================ */
.card-flat,
.card-flat.glass,
.card.glass.card-flat {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.card-flat .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 12px 0 12px 0 !important;
}

/* Page-Header Trennlinie dezenter */
.page-header,
.dashboard-header,
[class*="page-header"] {
    border-bottom-color: rgba(255,255,255,0.05) !important;
}

/* ============================================================
   SEARCH-BOX / FILTER-GROUP / FILTER-SELECT — global
   (verwendet in CRM und anderen Seiten)
   ============================================================ */

/* search-box: Icon + Input Wrapper */
.search-box {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}
.search-box i {
    position: absolute !important;
    left: 11px !important;
    color: rgba(255,255,255,0.28) !important;
    font-size: 0.8rem !important;
    pointer-events: none !important;
}
.search-box input[type="text"],
.search-box input[type="search"] {
    padding: 7px 12px 7px 32px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(0,0,0,0.22) !important;
    color: #d1d5db !important;
    font-size: 0.84rem !important;
    min-width: 200px !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.search-box input::placeholder { color: rgba(255,255,255,0.28) !important; }
.search-box input:focus {
    outline: none !important;
    border-color: rgba(255,255,255,0.14) !important;
    background: rgba(0,0,0,0.30) !important;
}

/* filter-group: Label + Select nebeneinander */
.filter-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.filter-group label {
    font-size: 0.82rem !important;
    color: rgba(255,255,255,0.4) !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* filter-select: Select ohne Wrapper-Chip */
.filter-select,
select.filter-select {
    padding: 6px 10px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(0,0,0,0.22) !important;
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.84rem !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}
.filter-select:focus {
    outline: none !important;
    border-color: rgba(255,255,255,0.14) !important;
    background: rgba(0,0,0,0.30) !important;
}

/* stat-card Basis — border-style/width setzen damit border-color inline greift */
.stat-card {
    border-radius: 10px;
    padding: 1rem 1.25rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ============================================================
   SEARCH-BAR + SEARCH-INPUT-WRAP (Aufgaben, global)
   ============================================================ */
.search-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.search-input-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}
.search-input-wrap i {
    position: absolute !important;
    left: 11px !important;
    color: rgba(255,255,255,0.28) !important;
    font-size: 0.8rem !important;
    pointer-events: none !important;
}
.search-input,
.search-input-wrap input {
    padding: 7px 12px 7px 32px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(0,0,0,0.22) !important;
    color: #d1d5db !important;
    font-size: 0.84rem !important;
    min-width: 220px !important;
    transition: background 0.15s ease !important;
}
.search-input::placeholder,
.search-input-wrap input::placeholder { color: rgba(255,255,255,0.28) !important; }
.search-input:focus,
.search-input-wrap input:focus {
    outline: none !important;
    border-color: rgba(255,255,255,0.14) !important;
    background: rgba(0,0,0,0.30) !important;
}

/* Schnellfilter-Buttons (sf-btn) — Basis */
.sf-btn {
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.04) !important;
    color: #9ca3af !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}
/* Semantische Farben — immer sichtbar, wie Stat-Cards */
#sfMeine {
    background: rgba(0,188,212,0.08) !important;
    border-color: rgba(0,188,212,0.25) !important;
    color: #00BCD4 !important;
}
#sfMeine:hover, #sfMeine.active {
    background: rgba(0,188,212,0.18) !important;
    border-color: rgba(0,188,212,0.5) !important;
}
#sfUeberfaellig {
    background: rgba(231,76,60,0.08) !important;
    border-color: rgba(231,76,60,0.25) !important;
    color: #e74c3c !important;
}
#sfUeberfaellig:hover, #sfUeberfaellig.active {
    background: rgba(231,76,60,0.18) !important;
    border-color: rgba(231,76,60,0.5) !important;
}
#sfHeute {
    background: rgba(230,126,34,0.08) !important;
    border-color: rgba(230,126,34,0.25) !important;
    color: #E88A3A !important;
}
#sfHeute:hover, #sfHeute.active {
    background: rgba(230,126,34,0.18) !important;
    border-color: rgba(230,126,34,0.5) !important;
}
#sfOhneZuweisung {
    background: rgba(156,163,175,0.08) !important;
    border-color: rgba(156,163,175,0.2) !important;
    color: #9ca3af !important;
}
#sfOhneZuweisung:hover, #sfOhneZuweisung.active {
    background: rgba(156,163,175,0.15) !important;
    border-color: rgba(156,163,175,0.4) !important;
    color: #d1d5db !important;
}
#sfDringend {
    background: rgba(192,57,43,0.08) !important;
    border-color: rgba(192,57,43,0.25) !important;
    color: #C0392B !important;
}
#sfDringend:hover, #sfDringend.active {
    background: rgba(192,57,43,0.18) !important;
    border-color: rgba(192,57,43,0.5) !important;
}

/* btn-erweitert (Filter-Toggle) */
.btn-erweitert {
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(0,0,0,0.22) !important;
    color: #9ca3af !important;
    font-size: 0.84rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.15s ease !important;
}
.btn-erweitert:hover, .btn-erweitert.active {
    background: rgba(0,188,212,0.12) !important;
    border-color: rgba(0,188,212,0.35) !important;
    color: #00BCD4 !important;
}

/* btn-bulk-mode, btn-settings-open — einheitliche Höhe */
.btn-bulk-mode,
.btn-settings-open {
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.04) !important;
    color: #9ca3af !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}
.btn-bulk-mode:hover, .btn-settings-open:hover {
    background: rgba(0,188,212,0.12) !important;
    border-color: rgba(0,188,212,0.35) !important;
    color: #00BCD4 !important;
}
/* Archiv-Button aktiv: deutlich sichtbar */
#btnArchiv.archiv-aktiv {
    background: rgba(149,165,166,0.2) !important;
    border-color: rgba(149,165,166,0.5) !important;
    color: #95a5a6 !important;
}

/* Modal-Backdrop dezenter */
.vorlage-modal-overlay,
.kp-to-task-modal,
[class*="modal-overlay"] {
    background: rgba(0,0,0,0.45) !important;
    backdrop-filter: blur(3px) !important;
}

/* ============================================================
   GRADIENT — heller Teal → unser Teal (global)
   ============================================================ */
.btn-primary, button[type="submit"].btn-primary,
.btn-vv, .btn-vifogra, .btn-news, .btn-produktion, .btn-stsob,
.vm-btn-primary, button.btn-primary, a.btn-primary,
input[type="submit"] {
    background: linear-gradient(135deg, #38D8EC 0%, #00BCD4 100%) !important;
}
.btn-primary:hover, .btn-vv:hover, .btn-news:hover,
.btn-produktion:hover, .btn-stsob:hover,
.vm-btn-primary:hover {
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%) !important;
}

/* ============================================================
   TOGGLE SWITCH — global
   ============================================================ */
.vm-toggle-wrap { position: relative; display: inline-block; }
.vm-toggle-track {
    width: 36px !important;
    height: 20px !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    position: relative !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
.vm-toggle-thumb {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 14px !important;
    height: 14px !important;
    background: rgba(255,255,255,0.4) !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}
#filterErledigt:checked ~ .vm-toggle-track,
input[type="checkbox"]:checked + .vm-toggle-track {
    background: rgba(0,188,212,0.35) !important;
    border-color: rgba(0,188,212,0.5) !important;
}
#filterErledigt:checked ~ .vm-toggle-track .vm-toggle-thumb,
input[type="checkbox"]:checked + .vm-toggle-track .vm-toggle-thumb {
    left: 18px !important;
    background: #00BCD4 !important;
}
/* JS-basierter Toggle: Klasse 'checked' auf track */
.vm-toggle-track.checked {
    background: rgba(0,188,212,0.35) !important;
    border-color: rgba(0,188,212,0.5) !important;
}
.vm-toggle-track.checked .vm-toggle-thumb {
    left: 18px !important;
    background: #00BCD4 !important;
}

/* ============================================================
   TOP-BUTTONS — farbige Hintergründe via ID
   ============================================================ */
a[href*="aufgaben_report"],
button[title*="Report"] {
    background: rgba(93,173,226,0.08) !important;
    border-color: rgba(93,173,226,0.25) !important;
    color: #5DADE2 !important;
}
button[title*="Tags"] {
    background: rgba(165,105,189,0.08) !important;
    border-color: rgba(165,105,189,0.25) !important;
    color: #A569BD !important;
}
#btnBulkMode {
    background: rgba(0,188,212,0.08) !important;
    border-color: rgba(0,188,212,0.25) !important;
    color: #00BCD4 !important;
}
#btnArchiv {
    background: rgba(149,165,166,0.08) !important;
    border-color: rgba(149,165,166,0.2) !important;
    color: #95a5a6 !important;
}
#btnArchiv.archiv-aktiv {
    background: rgba(149,165,166,0.2) !important;
    border-color: rgba(149,165,166,0.5) !important;
}

/* ============================================================
   VORLAGE-BADGES — farbig + rechteckig
   ============================================================ */
.vorlage-badge {
    padding: 2px 7px !important;
    border-radius: 4px !important;
    font-size: 0.72rem !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.55) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.vorlage-badge.prio-niedrig { background: rgba(39,174,96,0.1) !important; border-color: rgba(39,174,96,0.25) !important; color: #27ae60 !important; }
.vorlage-badge.prio-mittel  { background: rgba(243,156,18,0.1) !important; border-color: rgba(243,156,18,0.25) !important; color: #f39c12 !important; }
.vorlage-badge.prio-hoch    { background: rgba(232,138,58,0.1) !important; border-color: rgba(232,138,58,0.25) !important; color: #e88a3a !important; }
.vorlage-badge.prio-dringend{ background: rgba(231,76,60,0.1)  !important; border-color: rgba(231,76,60,0.25)  !important; color: #e74c3c !important; }
.vorlage-badge.bereich-stsob       { background: rgba(39,174,96,0.08) !important;  border-color: rgba(39,174,96,0.2) !important;  color: #27ae60 !important; }
.vorlage-badge.bereich-vifogra,
.vorlage-badge.bereich-news        { background: rgba(93,173,226,0.08) !important;  border-color: rgba(93,173,226,0.2) !important;  color: #5DADE2 !important; }
.vorlage-badge.bereich-vifogravision,
.vorlage-badge.bereich-produktion  { background: rgba(0,188,212,0.08) !important;   border-color: rgba(0,188,212,0.2) !important;   color: #00BCD4 !important; }
.vorlage-badge.bereich-crm         { background: rgba(165,105,189,0.08) !important; border-color: rgba(165,105,189,0.2) !important; color: #A569BD !important; }
.vorlage-badge.bereich-buchhaltung { background: rgba(212,82,140,0.08) !important;  border-color: rgba(212,82,140,0.2) !important;  color: #D4528C !important; }