/* admin-style.css - Finale Version mit Orange-Akzent & Fix für das Formular-Layout */

:root {
    --bg-dark: #0f0f0f;
    --card-bg: #1a1a1a;
    --accent-orange: #ff9800; /* Kräftiges Orange */
    --accent-white: #ffffff;
    --accent-gray: #2a2a2a;
    --error-red: #ff5f5f;
    --success-green: #2ecc71;
    --info-blue: #3498db;
    --border-color: #2c2c2c;
    --text-main: #f0f0f0;
    --text-muted: #a0a0a0;
    --input-bg: #0a0a0a;
}

body { 
    font-family: 'Inter', 'Segoe UI', sans-serif; 
    background-color: var(--bg-dark); 
    color: var(--text-main); 
    margin: 0; 
    padding: clamp(1rem, 5vw, 3rem); 
    box-sizing: border-box;
}

.admin-container { 
    width: 100%;
    max-width: 1100px; 
    margin: 0 auto; 
}

/* Header Bereich */
.header { 
    background: var(--card-bg);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 2rem;
}

/* TATTOO ADMIN - Orange und Fett */
h1 { 
    font-size: clamp(1.4rem, 4vw, 2.2rem); 
    font-weight: 900; /* Extra Fett */
    text-transform: uppercase; 
    letter-spacing: 2px; 
    margin: 0; 
    color: var(--accent-orange); 
}

/* Utility Bar (Export/Import) */
.util-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.btn-util { 
    background: var(--accent-gray); 
    color: white; 
    padding: 10px 20px; 
    border: 1px solid var(--border-color);
    min-width: 160px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    text-align: center;
}

/* Eingabe-Karte Fix */
.input-card { 
    background: var(--card-bg); 
    padding: 2.5rem; 
    border-radius: 20px; 
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--accent-orange); 
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column; /* Erzwingt, dass alles untereinander steht */
}

/* Formular-Elemente Fix: 100% Breite erzwingen */
input, textarea { 
    width: 100% !important; 
    display: block !important;
    padding: 14px 18px; 
    margin: 10px 0; 
    border-radius: 10px; 
    border: 1px solid var(--border-color); 
    background: var(--input-bg); 
    color: white; 
    box-sizing: border-box; 
    font-size: 1rem;
}

textarea {
    min-height: 100px;
    resize: vertical;
}

/* Speichern Button Symmetrie */
.btn-save {
    background: var(--accent-orange);
    color: white;
    padding: 16px 30px;
    width: 100%; /* In der Karte volle Breite */
    max-width: 300px;
    border-radius: 10px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 1rem;
    align-self: flex-start; /* Links ausgerichtet innerhalb der Karte */
}

.btn-add-field {
    background: var(--accent-gray);
    color: white;
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 10px;
    width: fit-content;
}

/* Kunden-Liste Symmetrie */
.customer-item { 
    background: var(--card-bg); 
    padding: 1.8rem; 
    border-radius: 16px; 
    margin-bottom: 1rem; 
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.action-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 130px; /* Symmetrische Breite für Aktions-Buttons */
}

.btn-edit, .btn-delete {
    width: 100%;
    padding: 10px 0;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    background: transparent;
}

.btn-edit { border: 1px solid var(--info-blue); color: var(--info-blue); }
.btn-delete { border: 1px solid var(--error-red); color: var(--error-red); }

.btn-edit:hover { background: var(--info-blue); color: white; }
.btn-delete:hover { background: var(--error-red); color: white; }

/* Modal Fix */
.modal { 
    display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.9); align-items: center; justify-content: center; 
}

.modal-content { 
    background: var(--card-bg); padding: 2.5rem; border-radius: 20px; 
    width: 90%; max-width: 500px; border: 1px solid var(--border-color); 
}

/* Mobile Fixes */
@media (max-width: 768px) {
    .customer-item { flex-direction: column; align-items: flex-start; }
    .action-btns { width: 100%; flex-direction: row; }
    .action-btns button { flex: 1; }
    .btn-save { max-width: 100%; }
}