/* =========================================
   VERSIONY TABLE EDITOR STYLES - FINAL
   ========================================= */

.versiony-section { margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #f9f9f9; }
.versiony-textarea { width: 100%; min-height: 150px; font-family: 'Courier New', monospace; font-size: 14px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; box-sizing: border-box; }

/* MODAL & OVERLAY */
.table-editor-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; }
.table-editor-overlay.show { display: block; }

.table-editor-modal { overflow: hidden; position: fixed; inset: 20px; background: white; border-radius: 10px; padding: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 10000; display: none; flex-direction: column; }

.modal-header { padding: 15px; border-bottom: 1px solid #eee; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; background: #fafafa; }
.modal-footer { padding: 15px; border-top: 1px solid #eee; background: #fff; text-align: right; }

/* EDITOR TABLE */
.table-block-wrapper { background: #fff; border: 1px solid #ddd; padding: 15px; margin-bottom: 30px; border-radius: 6px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.editor-table { border-collapse: collapse; margin: 10px 0; width: 100%; table-layout: fixed; }
.editor-table th, .editor-table td { border: 1px solid #ccc; position: relative; vertical-align: top; }

/* HEADER STYLING */
.editor-table th { 
    background-color: #f0f0f0; 
    font-weight: bold; 
    padding: 8px; 
    position: relative; 
}

/* TEXTAREA STYLING (Invisible) */
.editor-table textarea {
    width: 100%;
    min-height: 40px;
    resize: vertical;
    white-space: pre-wrap;
    padding: 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    display: block;
    border: none;
    background: transparent;
    outline: none;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
}
.editor-table textarea:focus { background-color: #f0f8ff; box-shadow: inset 0 0 0 2px #2c61e0; }

.editor-table th textarea {
    min-height: 40px;
    font-weight: bold;
    text-align: center;
    padding-top: 5px;
}

/* =========================================
   COLUMN CONTROLS (Oben) - STYLE FIX
   ========================================= */
.cell-wrapper { position: relative; display: block; width: 100%; height: 100%; }

.col-controls { 
    position: absolute; 
    top: -30px; left: 0; right: 0; 
    height: 30px; 
    
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 5px; 
    
    opacity: 0; 
    pointer-events: none; 
    transition: all 0.2s ease; 
    transform: translateY(-5px); 
    z-index: 20;
}

th:hover .col-controls { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Buttons Style: Blau mit Weißer Schrift (wie Row Controls) */
.col-controls button { 
    padding: 0; width: 20px; height: 20px; 
    font-size: 14px; line-height: 1; 
    
    background-color: #2c61e0; /* BLAU */
    color: white;              /* WEISS */
    
    border: none; border-radius: 2px; 
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.col-controls button:hover { transform: scale(1.1); background-color: #1e4bb8; }

/* Löschen Button: Rot mit Weißer Schrift */
.col-controls .del-col { 
    background-color: #b81d37; /* ROT */
    color: white;              /* WEISS */
}
.col-controls .del-col:hover { background-color: #96172d; }


/* =========================================
   ROW CONTROLS (Links)
   ========================================= */
.row-controls-cell { width: 30px; background-color: #fafafa; border-right: 1px solid #ccc; vertical-align: middle; padding: 0 !important; }
.row-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px 0; opacity: 0; transition: opacity 0.15s; }
tr:hover .row-controls { opacity: 1; }

.row-controls button { padding: 0; width: 20px; height: 20px; font-size: 14px; display: flex; align-items: center; justify-content: center; background-color: #2c61e0; color: white; border: none; border-radius: 3px; cursor: pointer; }
.row-controls .del-row { background-color: #b81d37; }

.row-controls button:hover { transform: scale(1.1); background-color: #1e4bb8; }
.row-controls .del-row:hover { background-color: #96172d; }

/* =========================================
   ACTION BUTTONS (Footer & Tools)
   ========================================= */

/* Gestreifter "Einfügen"-Button */
.btn-insert-block { display: block; width: 100%; padding: 8px; border: 2px dashed #ccc; background: transparent; color: #666; margin: 10px 0; transition: all 0.2s; cursor: pointer; }
.btn-insert-block:hover { border-color: #2c61e0; color: #2c61e0; background: #f0f8ff; }

/* Standard Primary (Blau) */
.btn-primary { background-color: #2c61e0; color: white; border:none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.btn-primary:hover { background-color: #1e4bb8; }

/* Danger (Rot) */
.btn-danger { background-color: #b81d37; color: white; border:none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.btn-danger:hover { background-color: #96172d; }

/* Secondary (Grau - Abbrechen) */
.btn-secondary { background-color: #6c757d; color: white; border:none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-right: 8px; }
.btn-secondary:hover { background-color: #5a6268; }

/* Success (Grün - Speichern) */
.btn-success { background-color: #28a745; color: white; border:none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px;  }
.btn-success:hover { background-color: #218838; }