/* forms.css — GLOBALE Form-Feld Styles (Single Source of Truth)
 *
 * GOLDENE REGEL: Alle Formfelder im gesamten Projekt werden HIER gestyled.
 * Keine lokalen Overrides in Seiten-CSS. Keine !important in anderen Dateien.
 * Gleiche Felder == gleiches Design. Überall. Basta.
 *
 * !important wird hier bewusst eingesetzt, weil:
 * 1. Bootstrap-CDN-Defaults überschrieben werden müssen
 * 2. Inline-Styles in Legacy-Code überschrieben werden müssen
 * 3. Dies die EINZIGE Datei ist, die Form-Styles definieren darf
 */

/* =============================================
   Globale Form-Felder — gelten ÜBERALL, IMMER
   ============================================= */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
    border: 1px solid #dde4ed !important;
    border-radius: 2px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    color: #303030 !important;
    background: #fff !important;
    transition: border-color 0.1s !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: #999 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Input-group: restore Bootstrap border-radius handling (overridden by !important above) */
.input-group > .form-control:not(:last-child),
.input-group > input:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group > .btn:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.input-group > .btn:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Password toggle button in input-group — matches form-control border */
.input-group .password-toggle {
    border: 1px solid #dde4ed !important;
    background: #fff !important;
    color: #666;
    padding: 0 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.input-group .password-toggle:hover {
    color: #303030;
    background: #f5f5f5 !important;
    border-color: #dde4ed !important;
    transform: none !important;
}

/* MagePickerPlus Trigger — sieht aus wie ein Formfeld */
.mpp-trigger {
    border: 1px solid #dde4ed !important;
    border-radius: 2px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    color: #303030 !important;
    background: #fff !important;
}
.mpp-trigger:hover {
    border-color: #999 !important;
}

/* Quill WYSIWYG Editor Container — gleiche Borders wie alle Formfelder */
.ql-toolbar.ql-snow {
    border: 1px solid #dde4ed !important;
    border-radius: 2px 2px 0 0 !important;
    background: #fafafa !important;
}
.ql-container.ql-snow {
    border: 1px solid #dde4ed !important;
    border-radius: 0 0 2px 2px !important;
    border-top: none !important;
}
.ql-editor {
    font-size: 14px !important;
    color: #303030 !important;
    min-height: 80px;
}
/* Quill Toolbar Buttons — quadratisch, abgerundete Corners */
.ql-toolbar.ql-snow .ql-formats button {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.1s !important;
}
.ql-toolbar.ql-snow .ql-formats button:hover {
    background: #f0f0f0 !important;
    border-color: #d1d5db !important;
}
.ql-toolbar.ql-snow .ql-formats button.ql-active {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
}
/* Icon-Farben: immer dunkel, nie blau */
.ql-toolbar.ql-snow .ql-stroke {
    stroke: #303030 !important;
}
.ql-toolbar.ql-snow .ql-fill,
.ql-toolbar.ql-snow .ql-stroke.ql-fill {
    fill: #303030 !important;
}
.ql-toolbar.ql-snow .ql-picker-label {
    color: #303030 !important;
}
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke {
    stroke: #111 !important;
}
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill {
    fill: #111 !important;
}
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active {
    color: #111 !important;
}
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke {
    stroke: #111 !important;
}

/* =============================================
   Mage-Field Layout (Label + Input Container)
   ============================================= */
.mage-field { margin-bottom: 18px; }
.mage-field:last-child { margin-bottom: 0; }
.mage-field-label { display: block; font-size: 14px; font-weight: 600; color: #303030; margin-bottom: 6px; }
.mage-field-label .text-danger { color: #e22626; }
.mage-field-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.mage-field-row .mage-field { flex: 1; }
.mage-field .form-control,
.mage-field .form-select { width: 100%; }
.mage-field .form-text { font-size: 12px; color: #999; margin-top: 4px; }

/* MagePicker-Trigger volle Breite in Modals und mage-field */
.modal .mage-picker-trigger,
.mage-field .mage-picker-trigger {
    width: 100%;
    max-width: none;
    margin-right: 0;
}

/* Field Hint (subtitle/description under inputs) */
.field-hint {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
    line-height: 1.4;
}

/* Button-Feld in einer .mage-field-row bündig zu den Inputs (unsichtbarer Label-Platzhalter) */
.mage-field-label.spacer{visibility:hidden;user-select:none;pointer-events:none}