/* ═══════════════════════════════════════════════════════════════
   v9 Work Area Styles
   Datum: 15.03.2026
   Append to styles.css or load as separate file
   ═══════════════════════════════════════════════════════════════ */

/* ── Animation ── */
.fade-in { animation: v9FadeIn 0.25s ease-out; }
@keyframes v9FadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ── Form Groups (v9 Work Body) ── */
.v9-form-group { margin-bottom: 18px; }
.v9-form-group:last-child { margin-bottom: 0; }
.v9-form-group + .v9-form-group { padding-top: 18px; border-top: 1px solid #e8e8e8; }
.v9-form-label { font-size: 12px; font-weight: 600; color: #515559; margin-bottom: 6px; }
.v9-field-label { font-size: 11px; font-weight: 600; color: #6a6d70; margin-bottom: 4px; }

/* ── Decision Radio Options ── */
.v9-decision-row { display: flex; gap: 10px; }
.v9-decision-option--dimmed { opacity: 0.5; }
.v9-decision-option:hover { border-color: #8c8f92 !important; }
.v9-decision-option--active:hover { border-color: inherit !important; }

/* ── Sibling Jobs (Geschwister-Liste) ── */
.sibling-job { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:#fff; border:1.5px solid #d9d9d9; border-radius:8px; cursor:pointer; transition:all 0.2s; }
.sibling-job:hover { border-color:#0a6ed1; background:#f8faff; }
.sibling-job--checked { border-color:#0a6ed1; background:#eff6ff; }
.sibling-job--current { border-left:3px solid #0a6ed1; }
.sib-check { width:20px; height:20px; border-radius:5px; background:#d9d9d9; color:white; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; transition:all 0.2s; margin-top:1px; }
.sibling-job--checked .sib-check { background:#0a6ed1; }
.sib-body { flex:1; min-width:0; }
.sib-main { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sib-rma { font-weight:600; font-size:12px; color:#32363a; }
.sib-dot { color:#d9d9d9; font-size:10px; }
.sib-sn { font-family:Consolas,monospace; font-size:11.5px; color:#515559; }
.sib-badge { font-size:10px; padding:1px 6px; border-radius:4px; font-weight:600; }
.sib-badge--self { background:#dbeafe; color:#2563eb; }
.sib-sub { font-size:11px; color:#8c8f92; margin-top:2px; }

/* ── Sibling Status Rows (after-email-sent, warte-auf-dl) ── */
.sib-status-row { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#fff; border:1px solid #e8e8e8; border-radius:6px; font-size:12px; color:#515559; }
.sib-status-row span:nth-child(2) { flex:1; }
.sib-status-icon { font-size:13px; flex-shrink:0; }
.sib-status-tag { font-size:10px; padding:2px 8px; border-radius:10px; font-weight:600; white-space:nowrap; }
.sib-status-tag--waiting { background:#fef3c7; color:#b45309; }
.sib-status-tag--shipped { background:#ede9fe; color:#7c3aed; }
.sib-status-tag--received { background:#dcfce7; color:#107e3e; }

/* ── Mono Input Helper ── */
.mono { font-family: Consolas, monospace !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .v9-decision-row { flex-direction: column; }
    .schnellauswahl-row { grid-template-columns: 1fr !important; }
}

/* ═══ Adaptive Fluid Scaling (Laptop 1366px ↔ Desktop 1920px+) ═══
   Wie SAP Fiori: clamp()-basiert, keine harten Breakpoints.
   Alles skaliert fließend mit der Viewport-Breite.
   ═══════════════════════════════════════════════════════════════ */

/* Work Area: Padding + Spacing */
.v9-work-header { padding: clamp(6px, 0.6vw, 12px) clamp(12px, 1.2vw, 20px) !important; }
.v9-work-body { padding: clamp(12px, 1.2vw, 20px) !important; }
.v9-form-group { margin-bottom: clamp(8px, 0.9vw, 18px); }
.v9-form-group + .v9-form-group { padding-top: clamp(8px, 0.9vw, 18px); }

/* Labels: fluid font-size */
.v9-form-label { font-size: clamp(12px, 0.8vw, 14px); margin-bottom: clamp(3px, 0.3vw, 6px); }

/* Checkbox Chips: kompakter, keine Nummern/Drag-Handles */
.checkbox-item { padding: clamp(5px, 0.4vw, 8px) clamp(6px, 0.6vw, 10px); font-size: clamp(12px, 0.8vw, 14px); }
.checkbox-item .checkbox-label { font-size: clamp(12px, 0.8vw, 14px); }
.checkbox-item .drag-handle { display: none; }
.checkbox-item .nummer { display: none; }

/* Schnellauswahl Grid: kompakterer Gap */
.checkbox-grid { gap: clamp(4px, 0.35vw, 8px) !important; }

/* Textarea: fluid min-height, lean start */
.form-textarea { font-size: clamp(13px, 0.8vw, 14px); min-height: clamp(44px, 4vh, 100px) !important; }

/* Decision Options: fluid padding + font */
.v9-decision-option { font-size: clamp(13px, 0.8vw, 15px); }
.v9-decision-row { gap: clamp(6px, 0.5vw, 10px); }

/* Context Header: fluid */
.v9-ctx-header { padding: clamp(8px, 0.7vw, 14px) clamp(12px, 1.2vw, 20px) !important; }
.v9-ctx-header .ctx-edit-icon { opacity: 0; transition: opacity 0.15s; }
.v9-ctx-header > div:hover .ctx-edit-icon { opacity: 1; }
.v9-ctx-header span[style*="font-size:11px"] { font-size: 12px !important; }
.v9-ctx-header div[style*="font-size:13px"] { font-size: 14px !important; }
.v9-ctx-header span[style*="font-size:12px"] { font-size: 13px !important; }

/* Work Header Title: fluid */
#v9WorkTitle { font-size: clamp(13px, 0.85vw, 16px) !important; }

/* Schnellauswahl Header */
.schnellauswahl-header { font-size: clamp(12px, 0.75vw, 13px) !important; margin-bottom: clamp(3px, 0.3vw, 6px) !important; }

/* Schnellauswahl Row: Textarea wächst mit Chip-Spalte mit */

/* ═══ v9 Layout: Complete Height Chain ═══
   Architektur (wie Jira/Salesforce/Asana):
   Jedes Element in der Kette MUSS seine Höhe weitergeben.
   Wenn EINES fehlt → v9ScrollContent bekommt keine Höhe → kein Scroll.
   
   Chain: #rcContent → .content → #bearbeiten → #editPageLayout 
          → #editFormColumn → v9ScrollContent (EINZIGER Scroll)
   ═══════════════════════════════════════════════════════════ */

/* 1. #rcContent: kein Scroll wenn bearbeiten aktiv */
#rcContent:has(#bearbeiten.tab-content.active) {
    overflow: hidden !important;
    overflow-y: hidden !important;
}
.rc-content.v9-no-scroll {
    overflow: hidden !important;
    overflow-y: hidden !important;
}

/* 2. .content: Höhe weitergeben, KEIN eigener Scroll, KEIN padding */
#rcContent:has(#bearbeiten.tab-content.active) .content {
    overflow: hidden !important;
    overflow-y: hidden !important;
    height: 100% !important;
    padding: 0 !important;
}

/* 3. #bearbeiten: volle Höhe, flex-column */
#bearbeiten.tab-content.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* 4. #editPageLayout: flex:1 mit min-height:0 (Flex-Shrink erlauben) */
#editPageLayout {
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
}

/* 5. #editFormColumn: flex-column container, overflow hidden */
#editFormColumn {
    overflow: hidden !important;
}