/* ==========================================================================
   Detailseiten-Designsprache (Namensraum .cd-*)
   --------------------------------------------------------------------------
   Gemeinsames Aussehen aller Objekt-Detailseiten (Kunden, Lieferanten,
   Mitarbeiter, Produkte, Auftraege, Projekte, Rechnungen ...). Entstanden auf
   der Kundendetailseite und von dort hierher gezogen, damit eine Aenderung
   ueberall wirkt statt fuenfzehnmal gepflegt zu werden.

   Aufbau einer Detailseite:
     #formViewContainer
       .cd-hero            Kopfbereich: Avatar, Name, Meta-Pillen, Kennzahlen,
                           Aktionen und optional die Bleistiftskizze
       .split-layout-content
         form.cd-col-main  linke Spalte mit .cd-card-Bloecken
         .cd-col-side      rechte Spalte mit Reitern (.cd-panel-card)

   Die Zahl der Kennzahl-Kacheln steuert jede Seite ueber --cd-stat-cols am
   .cd-stats-Element; ohne Angabe sind es fuenf.
   ========================================================================== */

    /* Tokens stehen global, weil die Bearbeiten-Dialoge außerhalb des
       Detailbereichs im DOM liegen und dieselbe Sprache sprechen sollen. */
    :root {
        --cd-gap: 18px;
        --cd-line: rgba(0, 0, 0, 0.06);
        --cd-line-soft: rgba(0, 0, 0, 0.04);
        --cd-ok: #2E9E5B;
        --cd-crit: #D6455D;
        --cd-info: #3B6FD4;
    }

    #formViewContainer { gap: var(--cd-gap); }

    /* ---------- Kopfbereich ----------
       Zwei Spalten: links Kunde, Kennzahlen; rechts Aktionen und die
       Bleistiftskizze, die den Kunden auf einen Blick zusammenfasst. */
    .cd-hero {
        position: relative;
        background: var(--bg-surface);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        padding: 20px 22px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px 24px;
        overflow: hidden;
    }

    /* Feiner Farbverlauf oben – gibt dem Blatt eine Kante, ohne laut zu sein. */
    .cd-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 25%, transparent) 60%, transparent);
    }

    .cd-hero-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

    .cd-hero-side {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
    }

    .cd-hero-top {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        flex-wrap: wrap;
    }

    .cd-hero-avatar {
        width: 58px;
        height: 58px;
        border-radius: 14px;
        flex-shrink: 0;
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid var(--cd-line);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .cd-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: none; }
    .cd-hero-avatar svg { width: 26px; height: 26px; }

    .cd-hero-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }

    .cd-eyebrow {
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.9px;
        color: var(--primary);
        margin: 0;
        line-height: 1.2;
    }

    .cd-hero-name {
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--text-main);
        line-height: 1.2;
        letter-spacing: -0.2px;
        word-break: break-word;
    }

    .cd-hero-sub { font-size: 0.82rem; color: var(--text-muted); margin: 2px 0 0; }

    .cd-hero-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }

    .cd-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-main);
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid var(--cd-line);
        border-radius: 20px;
        padding: 3px 10px;
        white-space: nowrap;
    }

    .cd-chip svg { width: 12px; height: 12px; color: var(--text-muted); flex-shrink: 0; }
    .cd-chip.accent { color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
    .cd-chip.accent svg { color: var(--primary); }
    .cd-chip.mono { font-family: monospace; letter-spacing: 0.3px; }

    .cd-hero-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

    /* ---------- Bleistiftskizze im Kopfbereich ----------
       Nutzt dieselben Filter und Zeichenanimationen wie die Leeransichten
       (nova-sketch.js), zeigt aber die Zahlen dieses Kunden. */
    .cd-sketch-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 12px 6px;
        border: 1px dashed rgba(0, 0, 0, 0.1);
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.015);
        width: 252px;
        max-width: 100%;
    }

    .cd-sketch-panel .nova-sketch { max-width: 228px; }

    .cd-sketch-caption {
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--text-muted);
        text-align: center;
    }

    .cd-sketch-panel text { font-family: 'Carrois Gothic', sans-serif; }

    .cd-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: var(--bg-surface);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 9px 16px;
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--text-main);
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    }

    .cd-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
    .cd-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
    .cd-btn svg { width: 14px; height: 14px; }

    .cd-btn-primary {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

    .cd-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

    /* ---------- Kennzahlen ---------- */
    .cd-stats {
        display: grid;
        /* Jede Seite hat unterschiedlich viele Kennzahlen; ohne Angabe fuenf. */
        grid-template-columns: repeat(var(--cd-stat-cols, 5), minmax(0, 1fr));
        gap: 10px;
        border-top: 1px solid var(--cd-line);
        padding-top: 14px;
    }

    .cd-stat {
        border-left: 3px solid var(--cd-stat-accent, var(--primary));
        background: rgba(0, 0, 0, 0.02);
        border-radius: 10px;
        padding: 8px 12px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .cd-stat-label {
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: var(--text-muted);
    }

    .cd-stat-value {
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 1.15rem;
        font-weight: bold;
        color: var(--text-main);
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---------- Spalten ---------- */
    #formViewContainer .split-layout-content { gap: var(--cd-gap); }

    .cd-col-main {
        display: flex;
        flex-direction: column;
        gap: var(--cd-gap);
        flex: 1.6;
        max-width: 680px;
        width: 100%;
    }

    .cd-col-side {
        flex: 1;
        min-width: 320px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: sticky;
        top: 8px;
        height: calc(100vh - 48px);
    }

    /* ---------- Karten ---------- */
    .cd-card {
        background: var(--bg-surface);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
        padding: 18px 20px 20px;
        display: flex;
        flex-direction: column;
        min-width: 0;
        transition: box-shadow 0.2s ease;
    }

    .cd-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07); }

    .cd-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 12px;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--cd-line);
        flex-wrap: wrap;
    }

    .cd-card-title {
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: var(--text-main);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        line-height: 1.2;
        margin: 0;
    }

    .cd-card-title svg { width: 17px; height: 17px; color: var(--primary); flex-shrink: 0; }

    .cd-count {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--text-muted);
        background: rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        padding: 1px 8px;
        letter-spacing: 0;
    }

    .cd-card-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

    /* Karten, deren Inhalt ohne eigenes .cd-card-body direkt in der Karte
       steht. Der Abstand kommt dann von der Karte selbst, und der Kopf braucht
       keinen zusätzlichen Unterrand. */
    .cd-card-flow { gap: 14px; }
    .cd-card-flow > .cd-card-head { margin-bottom: 0; }

    /* ---------- Formularfelder ---------- */
    .cd-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .cd-row-1 { grid-template-columns: minmax(0, 1fr); }

    .cd-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

    .cd-label {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--text-muted);
    }

    .cd-input,
    select.cd-input {
        width: 100%;
        padding: 9px 12px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        background: var(--bg-surface);
        font-family: inherit;
        font-size: 0.88rem;
        color: var(--text-main);
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .cd-input::placeholder { color: color-mix(in srgb, var(--text-muted) 70%, transparent); }

    .cd-input:hover { border-color: rgba(0, 0, 0, 0.2); }

    .cd-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
    }

    .cd-input-split { display: flex; gap: 8px; }
    .cd-input-split .cd-input:last-child { width: 116px; flex: none; }

    textarea.cd-input { resize: vertical; min-height: 76px; line-height: 1.5; }

    .cd-hint { font-size: 0.72rem; color: var(--text-muted); }

    /* Branche + Notiz stehen links, die Auswahlkachel daneben. Die Kachel sitzt
       oben bündig direkt unter ihrer Beschriftung und ist so hoch wie ein
       normales Eingabefeld – sie soll als Formularfeld lesbar sein, das man
       anklickt, nicht als große Fläche. */
    .cd-row-selector { align-items: start; }
    .cd-row-selector > .cd-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
    .cd-row-selector > .cd-field { min-width: 0; }

    .cd-card .silhouette-card-selector {
        min-height: 42px;
        padding: 0 10px 0 12px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        background: var(--bg-surface);
        display: flex;
        align-items: center;
        text-align: left;
        box-shadow: none;
        transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    /* Leer: gestrichelt, damit sofort klar ist, dass hier noch etwas gewählt wird. */
    .cd-card .silhouette-card-selector:not(.filled) {
        border-style: dashed;
        border-color: rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.02);
    }

    .cd-card .silhouette-card-selector:hover {
        border-color: var(--primary);
        background: color-mix(in srgb, var(--primary) 6%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
    }

    .cd-card .silhouette-card-selector .selector-content {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 9px;
        width: 100%;
        height: auto;
    }

    /* Der gefüllte Zustand kapselt den Namen in ein <div>. Daran hängen zwei
       Pseudo-Elemente: ein getönter Kreis (::before) und darin die
       Personensilhouette (::after). Zusammen ergeben sie den Avatar, der die
       Kachel als Mitarbeiterauswahl ausweist. */
    .cd-card .silhouette-card-selector .selector-content > div {
        position: relative;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .cd-card .silhouette-card-selector.filled .selector-content > div { padding-left: 31px; }

    .cd-card .silhouette-card-selector.filled .selector-content > div::before,
    .cd-card .silhouette-card-selector.filled .selector-content > div::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .cd-card .silhouette-card-selector.filled .selector-content > div::before {
        left: 0;
        width: 23px;
        height: 23px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--primary) 13%, transparent);
    }

    .cd-card .silhouette-card-selector.filled .selector-content > div::after {
        left: 5px;
        width: 13px;
        height: 13px;
        background-color: var(--primary);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") no-repeat center / contain;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") no-repeat center / contain;
    }

    .cd-card .silhouette-card-selector .selected-text {
        font-weight: 700;
        font-size: 0.88rem;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cd-card .silhouette-card-selector .selector-placeholder { font-size: 0.85rem; color: var(--text-muted); }

    /* Wechseln-Symbol rechts – der Griff, an dem man die Kachel öffnet. */
    .cd-card .silhouette-card-selector .change-icon {
        margin-left: auto;
        width: 15px;
        height: 15px;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .cd-card .silhouette-card-selector:hover .change-icon { color: var(--primary); }

    .cd-card .silhouette-card-selector .search-icon {
        width: 15px;
        height: 15px;
        color: var(--text-muted);
        flex-shrink: 0;
        order: -1;
    }

    /* ---------- Logo-Upload ---------- */
    .cd-logo { display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; }

    .cd-logo-drop {
        width: 92px;
        height: 92px;
        border-radius: 16px;
        border: 1px dashed rgba(0, 0, 0, 0.18);
        background: rgba(0, 0, 0, 0.02);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

    .cd-logo-drop:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
    .cd-logo-drop img { width: 100%; height: 100%; object-fit: cover; }

    .cd-logo-hint {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 600;
        text-align: center;
        line-height: 1.25;
        pointer-events: none;
    }

    .cd-logo-hint svg { width: 20px; height: 20px; opacity: 0.55; }

    .cd-logo-remove {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--cd-crit);
        text-decoration: none;
        cursor: pointer;
    }

    .cd-logo-remove:hover { text-decoration: underline; }

    /* ---------- Listenzeilen (Kontakte, Adressen, Banken, E-Mails) ---------- */
    .cd-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }

    .cd-list::-webkit-scrollbar { width: 5px; }
    .cd-list::-webkit-scrollbar-track { background: transparent; }
    .cd-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; }
    .cd-list::-webkit-scrollbar-thumb:hover { background: var(--primary); }

    .cd-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        background: var(--bg-surface);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .cd-item:hover { 
        border-color: rgba(0, 0, 0, 0.1); 
        background: var(--bg-surface); 
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); 
        transform: translateY(-2px);
    }
    
    .cd-item.is-main { 
        border-color: color-mix(in srgb, var(--primary) 35%, transparent); 
        background: color-mix(in srgb, var(--primary) 3%, transparent); 
        box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 8%, transparent);
    }

    .cd-item-radio { 
        width: 18px; 
        height: 18px; 
        cursor: pointer; 
        accent-color: var(--primary); 
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }
    .cd-item-radio:hover { transform: scale(1.1); }

    .cd-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

    .cd-item-title {
        font-weight: 700;
        font-size: 0.87rem;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .cd-item-sub { font-size: 0.76rem; color: var(--text-muted); line-height: 1.45; word-break: break-word; }
    .cd-item-sub .mono { font-family: monospace; }

    /* Anschrift steht zeilenweise untereinander: Straße, PLZ/Ort, Land.
       Die Landesflagge liegt dabei bündig neben dem Landesnamen. */
    .cd-item-country { display: flex; align-items: center; gap: 6px; }
    .cd-item-country img,
    .cd-item-country svg { width: 15px; height: auto; flex-shrink: 0; border-radius: 2px; }

    .cd-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

    .cd-icon-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid var(--cd-line);
        background: var(--bg-surface);
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.18s ease;
        padding: 0;
    }

    .cd-icon-btn svg { width: 14px; height: 14px; }
    .cd-icon-btn:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
    .cd-icon-btn.danger:hover { color: var(--cd-crit); border-color: var(--cd-crit); background: rgba(214, 69, 93, 0.08); }

    .cd-tag {
        display: inline-flex;
        align-items: center;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 9%, transparent);
        border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
        border-radius: 20px;
        padding: 3px 10px;
    }



    /* ---------- Leer- und Ladezustände ---------- */
    .cd-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        text-align: center;
        padding: 24px 12px;
        color: var(--text-muted);
    }

    .cd-empty svg { width: 34px; height: 34px; opacity: 0.3; margin-bottom: 2px; }
    .cd-empty strong { font-family: 'Carrois Gothic', sans-serif; color: var(--text-main); font-size: 0.86rem; }
    .cd-empty span { font-size: 0.76rem; }

    .cd-error {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--cd-crit);
        background: rgba(214, 69, 93, 0.07);
        border: 1px solid rgba(214, 69, 93, 0.2);
        border-radius: 8px;
        padding: 10px 12px;
    }

    .cd-skel {
        background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 37%, rgba(0,0,0,0.04) 63%);
        background-size: 400% 100%;
        animation: cdShimmer 1.3s ease-in-out infinite;
        border-radius: 6px;
        height: 46px;
    }

    @keyframes cdShimmer {
        0% { background-position: 100% 50%; }
        100% { background-position: 0 50%; }
    }

    .cd-skel-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }

    /* ---------- Reiter (rechte Spalte) ---------- */
    #formViewContainer .mt-tabs-header {
        background: rgba(0, 0, 0, 0.035) !important;
        border: 1px solid var(--cd-line);
        border-radius: 12px;
        padding: 4px;
        gap: 3px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    #formViewContainer .mt-tabs-header::-webkit-scrollbar { height: 4px; }
    #formViewContainer .mt-tabs-header::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; }

    #formViewContainer .mt-tab {
        background: transparent !important;
        border: none !important;
        border-radius: 8px;
        padding: 7px 13px;
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--text-muted);
        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    #formViewContainer .mt-tab:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.7) !important; }

    #formViewContainer .mt-tab.active {
        background: var(--bg-surface) !important;
        color: var(--text-main);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .cd-panel-card { flex: 1; min-height: 250px; max-height: 100%; padding: 18px 20px; }
    .cd-panel-card .cd-card-head { margin-bottom: 12px; flex-shrink: 0; }

    /* Zähler am Reiter und Kennzahl in der Reiterkarte */
    .cd-tab-count {
        display: none;
        margin-left: 6px;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0;
        background: rgba(0, 0, 0, 0.08);
        color: var(--text-muted);
        border-radius: 20px;
        padding: 1px 6px;
        vertical-align: 1px;
    }

    .cd-tab-count.has-value { display: inline-block; }
    #formViewContainer .mt-tab.active .cd-tab-count { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }

    .cd-panel-note {
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: none;
        letter-spacing: 0;
        font-family: inherit;
        white-space: nowrap;
    }

    .cd-panel-note strong { color: var(--text-main); font-family: 'Carrois Gothic', sans-serif; }

    .cd-panel-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
        margin-right: -4px;
    }

    .cd-panel-list::-webkit-scrollbar { width: 5px; }
    .cd-panel-list::-webkit-scrollbar-track { background: transparent; }
    .cd-panel-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; }
    .cd-panel-list::-webkit-scrollbar-thumb:hover { background: var(--primary); }

    /* Datensatz-Zeile in den Reitern */
    .cd-rec {
        display: flex;
        padding: 14px 16px;
        gap: 14px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        background: var(--bg-surface);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
        align-items: center;
        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .cd-rec:hover { border-color: rgba(0, 0, 0, 0.1); background: var(--bg-surface); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); }
    .cd-rec.clickable { cursor: pointer; }
    .cd-rec.clickable:hover { 
        border-color: color-mix(in srgb, var(--primary) 35%, transparent); 
        transform: translateY(-2px);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 6%, transparent);
    }
    .cd-rec.unread { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 4%, transparent); }
    .cd-rec-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .cd-rec-no { font-family: monospace; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.3px; }
    .cd-rec-title { font-weight: 700; font-size: 0.87rem; color: var(--text-main); word-break: break-word; }
    .cd-rec-meta { font-size: 0.74rem; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .cd-rec-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); flex-shrink: 0; }
    .cd-rec-meta .warnval { color: var(--cd-crit); font-weight: 700; }
    .cd-rec-snippet {
        font-size: 0.74rem;
        color: var(--text-muted);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cd-rec-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
    .cd-rec-value { font-family: 'Carrois Gothic', sans-serif; font-weight: 700; font-size: 0.88rem; color: var(--text-main); white-space: nowrap; }
    .cd-rec-value-sub { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }

    .cd-rec-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: rgba(0, 0, 0, 0.04);
        color: var(--text-main);
        font-family: 'Carrois Gothic', sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
    }

    .cd-rec-icon svg { width: 16px; height: 16px; }
    .cd-rec-icon.accent { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

    /* Protokolleintrag */
    .cd-log {
        border: 1px solid var(--cd-line);
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.015);
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cd-log-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .cd-log-time { font-size: 0.73rem; color: var(--text-muted); white-space: nowrap; }
    .cd-log-user { font-size: 0.8rem; color: var(--text-main); }
    .cd-log-changes { font-size: 0.75rem; color: var(--text-muted); border-top: 1px solid var(--cd-line-soft); padding-top: 6px; line-height: 1.6; word-break: break-word; }
    .cd-log-foot { display: flex; justify-content: flex-end; }

    .cd-mini-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid var(--cd-line);
        background: var(--bg-surface);
        border-radius: 8px;
        padding: 4px 10px;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-main);
        cursor: pointer;
        transition: all 0.18s ease;
    }

    .cd-mini-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
    .cd-mini-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .cd-mini-btn svg { width: 12px; height: 12px; }

    /* ---------- Unterlagen-Reiter ----------
       Der Dateibrowser kommt aus dem geteilten Partial _ProjectFileExplorer und
       wird auch von Projekten, Aufträgen, Mitarbeitern und Lieferanten genutzt.
       Deshalb ist hier nichts am Partial geändert: alle Regeln hängen unter
       .cd-col-side und gelten damit nur auf der Kundendetailseite. Das !important
       ist nötig, weil das Partial mit Inline-Styles arbeitet. */
    #unterlagenTab {
        background: var(--bg-surface);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
        padding: 18px 20px;
        min-height: 250px;
        flex: 1;
    }

    /* Innerer Scrollbereich */
    .cd-col-side #unterlagenTab > div { padding-right: 4px !important; gap: 10px !important; }

    .cd-col-side #unterlagenTab > div::-webkit-scrollbar { width: 5px; }
    .cd-col-side #unterlagenTab > div::-webkit-scrollbar-track { background: transparent; }
    .cd-col-side #unterlagenTab > div::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; }

    /* Kopfzeile wie in den übrigen Reiterkarten */
    .cd-col-side #unterlagenTab > div > div:first-child {
        border-bottom: 1px solid var(--cd-line) !important;
        padding-bottom: 12px !important;
        margin-bottom: 2px !important;
        gap: 12px;
        flex-wrap: wrap;
    }

    .cd-col-side #unterlagenTab h3 {
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: var(--text-main);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* Ordnersymbol vor der Überschrift – das Partial liefert keines mit. */
    .cd-col-side #unterlagenTab h3::before {
        content: '';
        width: 17px;
        height: 17px;
        flex-shrink: 0;
        background-color: var(--primary);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>") no-repeat center / contain;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>") no-repeat center / contain;
    }

    /* Werkzeugleiste: gleiche Knöpfe wie im übrigen Detailbereich */
    .cd-col-side #unterlagenTab .btn,
    .cd-col-side #unterlagenTab label.btn-illustrative {
        background: var(--bg-surface) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 8px !important;
        padding: 7px 12px !important;
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 0.72rem !important;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--text-main) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    }

    .cd-col-side #unterlagenTab .btn:hover,
    .cd-col-side #unterlagenTab label.btn-illustrative:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .cd-col-side #unterlagenTab label.btn-primary-sketch {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: #fff !important;
    }

    .cd-col-side #unterlagenTab label.btn-primary-sketch:hover { background: var(--primary-hover) !important; }

    .cd-col-side #unterlagenTab #btnExplDeleteFolder {
        color: var(--cd-crit) !important;
        border-color: color-mix(in srgb, var(--cd-crit) 45%, transparent) !important;
    }

    /* Vorlagen-Klappliste */
    .cd-col-side #unterlagenTab .docgen-dropdown-content {
        border: 1px solid var(--cd-line) !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
    }

    /* Ordnerbaum */
    .cd-col-side #unterlagenTab #explSidebar {
        width: 178px !important;
        border-right: 1px solid var(--cd-line) !important;
        padding-right: 12px !important;
    }

    .cd-col-side #unterlagenTab .folder-item {
        border-radius: 8px;
        padding: 7px 9px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-main);
    }

    .cd-col-side #unterlagenTab .folder-item:hover { background: rgba(0, 0, 0, 0.04); }

    .cd-col-side #unterlagenTab .folder-item.active {
        background: color-mix(in srgb, var(--primary) 10%, transparent);
        color: var(--primary);
    }

    /* Pfadanzeige als Pille */
    .cd-col-side #unterlagenTab #explBreadcrumbs {
        display: inline-block;
        margin-bottom: 12px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--text-muted) !important;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid var(--cd-line);
        border-radius: 20px;
        padding: 3px 11px;
    }

    /* Dateiliste: schmale Spalte, deshalb scrollt die Tabelle in sich selbst */
    .cd-col-side #unterlagenTab div:has(> .data-table) { overflow-x: auto; padding-right: 0 !important; }
    .cd-col-side #unterlagenTab div:has(> .data-table)::-webkit-scrollbar { height: 5px; }
    .cd-col-side #unterlagenTab div:has(> .data-table)::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; }

    .cd-col-side #unterlagenTab .data-table { table-layout: auto; min-width: 720px; }

    .cd-col-side #unterlagenTab .data-table th {
        padding: 6px 10px !important;
        font-size: 0.68rem;
        letter-spacing: 0.7px;
        border-bottom: 1px solid var(--cd-line);
        width: auto !important;
    }

    .cd-col-side #unterlagenTab .data-table td {
        padding: 9px 10px !important;
        font-size: 0.82rem;
        border-bottom: 1px solid var(--cd-line-soft);
    }

    /* Der Zeilenversatz aus der Listenansicht wirkt in der schmalen Karte unruhig. */
    .cd-col-side #unterlagenTab .data-table tbody tr:hover { background: rgba(0, 0, 0, 0.025); transform: none; }
    .cd-col-side #unterlagenTab .data-table tbody tr:active { transform: none; }

    /* Zeilenaktionen als Symbolknöpfe. Nur reine Symbolknöpfe werden quadratisch –
       Knöpfe mit Text (z. B. „Verzeichnis jetzt anlegen") bleiben lesbar. */
    .cd-col-side #unterlagenTab .data-table td .btn:has(> svg) {
        width: 30px;
        height: 30px;
        padding: 0 !important;
        border-radius: 8px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted) !important;
        margin-left: 4px;
    }

    .cd-col-side #unterlagenTab .data-table td .btn:has(> svg):hover {
        color: var(--primary) !important;
        border-color: var(--primary) !important;
        background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
        transform: none;
    }

    .cd-col-side #unterlagenTab .data-table td .btn[title="Löschen"]:hover {
        color: var(--cd-crit) !important;
        border-color: var(--cd-crit) !important;
        background: rgba(214, 69, 93, 0.08) !important;
    }

    /* ---------- Dialoge (Adresse, Kontakt, Bank, E-Mail) ---------- */
    .cd-modal-form {
        display: flex;
        flex-direction: column;
        gap: 14px;
        background: var(--bg-surface);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
        padding: 20px;
    }

    .cd-check { display: flex; align-items: center; gap: 9px; padding-top: 2px; }
    .cd-check input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary); }
    .cd-check label { font-size: 0.85rem; font-weight: 700; color: var(--text-main); cursor: pointer; }

    /* ---------- Responsive ---------- */
    @media (max-width: 1400px) {
        .cd-stats { grid-template-columns: repeat(var(--cd-stat-cols-md, 3), minmax(0, 1fr)); }
    }

    /* Wird es eng, rutscht die Skizze unter den Kundenblock statt daneben. */
    @media (max-width: 1150px) {
        .cd-hero { grid-template-columns: minmax(0, 1fr); }
        .cd-hero-side { align-items: stretch; }
        .cd-hero-actions { justify-content: flex-start; margin-left: 0; }
        .cd-sketch-panel { width: 100%; align-self: center; max-width: 320px; }
    }

    @media (max-width: 992px) {
        .cd-col-side { height: auto !important; position: static !important; }
        .cd-col-main { max-width: 100%; }
        .cd-panel-card { max-height: none; }
    }

    @media (max-width: 700px) {
        .cd-row { grid-template-columns: minmax(0, 1fr); }
        .cd-stats { grid-template-columns: repeat(var(--cd-stat-cols-sm, 2), minmax(0, 1fr)); }
        .cd-hero-actions { width: 100%; margin-left: 0; }
        .cd-hero-name { font-size: 1.25rem; }
    }