/* public/assets/css/bausteine/formulare.css */

/* ==========================================================================
   1. STANDARD EINGABEFELDER (Input & Textarea)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea {
    /* GRUNDLAGE: Reset */
    -webkit-appearance: none;
    appearance: none;
    
    /* OPTIK: Grauer Hintergrund statt Rahmen-Fokus */
    background-color: #f3f4f6 !important; /* Hellgrau (Gray-100) */
    color: #111827 !important;       /* Tiefschwarz */
    
    /* Rahmen: Dezent passend zum Hintergrund, nicht mehr schwarz */
    border: 1px solid #e5e7eb !important; /* Gray-200 */
    border-radius: 6px !important;
    
    /* INNEN-SCHATTEN: "Eingedrückt"-Effekt */
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03) !important;
    
    /* TYPOGRAFIE & ABSTAND */
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    padding: 0.5rem 0.75rem !important;
    width: 100%;
    transition: all 0.2s ease-in-out;
}

/* FOKUS-ZUSTAND: Roter Rand & Weißer Hintergrund */
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    outline: none !important;
    background-color: #ffffff !important; /* Wird weiß beim Tippen */
    
    /* ROTER RAND (Wunschgemäß) */
    border-color: #ef4444 !important; /* Red-500 */
    
    /* ROTE CORONA: Leuchtender roter Ring */
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important; 
    
    z-index: 50;
    position: relative;
}

/* ==========================================================================
   2. DROPDOWNS (Select)
   ========================================================================== */
select:not([disabled]) {
    /* Auch Dropdowns grau im Ruhezustand */
    background-color: #f3f4f6 !important; 
    border: 1px solid #e5e7eb !important;
    color: #111827 !important;
    border-radius: 6px !important;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem !important;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    
    /* Pfeil-Icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    -webkit-appearance: none;
    appearance: none;
}

/* ==========================================================================
   3. STATUS & HELFER
   ========================================================================== */

/* Platzhalter Text */
::placeholder { 
    color: #9ca3af !important; 
    opacity: 1; 
}

/* Readonly & Disabled */
input[readonly], 
input:disabled, 
select:disabled, 
textarea:disabled {
    background-color: #e5e7eb !important; /* Etwas dunkleres Grau für Disabled */
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Validierungs-Status (Fehler ist auch Rot, aber dunkler) */
input.error, select.error, textarea.error {
    border-color: #b91c1c !important; /* Dark Red */
    background-color: #fef2f2 !important;
}

/* ==========================================================================
   4. TOGGLE SWITCH
   ========================================================================== */
.toggle-checkbox { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.toggle-track { width: 2.75rem; height: 1.5rem; background-color: #e5e7eb; border-radius: 9999px; transition: background-color 0.2s ease-in-out; position: relative; }
/* Toggle bleibt Blau (Standard), oder soll der auch rot werden? Hier erstmal Blau gelassen */
.toggle-checkbox:checked + .toggle-track { background-color: #4f46e5; }
.toggle-checkbox:focus + .toggle-track { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3); }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; background-color: white; border-radius: 9999px; border: 1px solid #d1d5db; transition: transform 0.2s ease-in-out; transform: translateX(0); }
.toggle-checkbox:checked + .toggle-track .toggle-knob { transform: translateX(100%); border-color: white; }