/* ============================================
   LA MIDNIGHT - FORMULARE

   Inputs, Selects, Textareas.
   Brutalist: kein border-radius, klare Kanten.
   ============================================ */

/* --- Text-Inputs und Textareas --- */
input.textbox,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.75rem var(--space-md);
    font-family: var(--font-body);
    font-size: 0.875rem;
    width: 100%;
    transition: var(--transition);
}

/* Fokus-Zustand: Akzent-Border + Glow */
input.textbox:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* --- Select-Dropdowns --- */
select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: var(--space-sm) 0.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
}


/* ============================================================================
   LAM FORM-PAGE LAYOUT (newthread, newreply, edit, …)
   Brutalist-Form: keine Tabellen, klare Sektionen mit Header-Linien,
   Felder in Label-Field-Pairs.
   ============================================================================ */

.lam-form-page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-lg) 0;
}


/* ---------- Page-Header (große Display-Headline mit Akzent-Block) -------- */
.lam-form-page__header {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--text-dark);
}

.lam-form-page__header h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 var(--space-sm) 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Akzent-Block vor der Headline (Brutalist-Indikator) */
.lam-form-page__header h1::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 0.25rem;
    height: 0.85em;
    background: var(--accent);
}

.lam-form-page__subtitle {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 0;
}


/* ---------- Form-Container ------------------------------------------------ */
/* Kompaktes Spacing — Form sollte nicht ewig scrollen müssen */
.lam-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}


/* ---------- Section: gruppiert zusammengehörige Felder ------------------- */
.lam-form__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Section-Title: Mono uppercase, gespreizt, Trennlinie unten */
.lam-form__section-title {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 var(--space-sm) 0;
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
}


/* ---------- Row: Label links, Field rechts (auf Desktop) ----------------- */
.lam-form__row {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: var(--space-md);
    align-items: start;
}

/* Label: Mono klein, gespreizt */
.lam-form__label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding-top: 0.625rem;
}

/* Field-Container */
.lam-form__field {
    min-width: 0;
}


/* ---------- Form-Textarea (große Editor-Fläche) -------------------------- */
.lam-form__textarea {
    width: 100%;
    min-height: 18rem;
    padding: var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: 0;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s var(--ease);
}

.lam-form__textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: none;
}


/* ---------- Actions (Submit-Buttons unten) ------------------------------- */
.lam-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

/* Submit: Brutalist-Button (Primär).
   Höhere Specificity als globaler .button:hover (06-buttons.css), damit
   color & border korrekt erhalten bleiben — sonst rot-auf-rot beim Hover. */
.lam-form input.button.lam-form__submit,
input[type="submit"].lam-form__submit,
.lam-form__submit {
    padding: var(--space-sm) var(--space-xl);
    background: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: var(--transition);
}

.lam-form input.button.lam-form__submit:hover,
input[type="submit"].lam-form__submit:hover,
.lam-form__submit:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    /* Text dunkel halten — globaler .button:hover setzt sonst color: var(--accent) */
    color: var(--bg);
}

/* Sekundär (Vorschau): Outline-Style */
.lam-form input.button.lam-form__submit.lam-form__submit--secondary,
input[type="submit"].lam-form__submit.lam-form__submit--secondary,
.lam-form__submit--secondary {
    background: transparent;
    color: var(--accent);
}

.lam-form input.button.lam-form__submit.lam-form__submit--secondary:hover,
input[type="submit"].lam-form__submit.lam-form__submit--secondary:hover,
.lam-form__submit--secondary:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}


/* ---------- Optionen-Section (Beitragsoptionen, Umfrage etc.) ------------ */
.lam-form__optsection {
    /* keine eigene Box — passt zur entboxten Brutalist-Anmutung */
}

.lam-form__optdesc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 0 0 var(--space-sm) 0;
}

.lam-form__optgroup {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Checkbox-Zeile mit Label */
.lam-form__checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
}

.lam-form__checkbox-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: auto;
}


/* Check-Option im Brutalist-Stil — wie Subscription-Optionen.
   Kompakt, mit kleiner Native-Checkbox in Akzent-Farbe.
   Akzeptiert <strong> aus Lang-Strings (z. B. "Signatur: …") als
   leicht hervorgehobenen Label-Teil ohne aus dem Stil zu fallen. */
.lam-form__check-option {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.lam-form__check-option input[type="checkbox"] {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
    /* Override für globalen .checkbox-Style falls Theme-übergreifend */
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transform: translateY(0.15em);
}

.lam-form__check-text {
    flex: 1;
    min-width: 0;
}

/* Bold-Teil aus dem Lang-String (z. B. "Signatur:") wird zur Mono-Marker */
.lam-form__check-text strong {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    margin-right: var(--space-xs);
}

/* Inline-Field (Label + kleines Input + Hint nebeneinander) */
.lam-form__inline-field {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-dim);
    flex-wrap: wrap;
}

.lam-form__inline-label {
    color: var(--text);
}

.lam-form__inline-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.lam-form__input--narrow {
    width: 4rem;
}


/* ---------- Userbox/Loginbox als simple Info-Zeile (nicht boxförmig) ----- */
/* Override für die alten lam-reply__loginbox/userbox Klassen wenn sie im
   neuen Form-Layout erscheinen — kein bg, nur eine kompakte Info-Zeile. */
.lam-form .lam-reply__loginbox,
.lam-form .lam-reply__userbox,
.lam-form-page > .lam-reply__loginbox,
.lam-form-page > .lam-reply__userbox {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    font-family: var(--font-body);
}

.lam-form .lam-reply__userbox-label,
.lam-form-page .lam-reply__userbox-label,
.lam-form .lam-reply__loginbox-label,
.lam-form-page .lam-reply__loginbox-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.lam-form .lam-reply__userbox-name,
.lam-form-page .lam-reply__userbox-name {
    color: var(--text);
    font-weight: 600;
    /* Username darf nicht hover-färben — ist <span>, kein Link.
       Plus user-select aktivieren damit Rechtsklick "Untersuchen" geht
       (Browser interpretieren span manchmal als nicht-selectable). */
    user-select: text;
}

.lam-form .lam-reply__userbox-name:hover,
.lam-form-page .lam-reply__userbox-name:hover {
    color: var(--text);
}

.lam-form .lam-reply__userbox-change,
.lam-form-page .lam-reply__userbox-change {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
}

.lam-form .lam-reply__userbox-change:hover,
.lam-form-page .lam-reply__userbox-change:hover {
    color: var(--accent);
}


/* Field--full: spannt über volle Breite ohne Label-Spalte (z. B. für Editor) */
.lam-form__field--full {
    width: 100%;
    grid-column: 1 / -1;
}


/* ---------- Subscription/Mod-Options im neuen Form-Layout ---------------- */
/* Override: Die Default lam-reply__subscription/mod-options haben
   border-top:none weil sie ursprünglich in einem Stack saßen. Im neuen
   Form-Layout sind sie eigenständige Sections — vollständige Border raus,
   nur eine Akzent-Border-Left als Marker. */
/* Subscription/Mod-Options: kompakte Sections mit dünnen Akzent-Markern,
   einheitliches Padding & Spacing wie der Rest der Form. */
.lam-form .lam-reply__subscription,
.lam-form .lam-reply__mod-options {
    background: transparent;
    border: none;
    padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
    margin: 0;
}

.lam-form .lam-reply__subscription {
    border-left: 2px solid var(--accent);
}

.lam-form .lam-reply__mod-options {
    border-left: 2px solid var(--warning);
}

/* Subscription-Header: Mono-Title + Beschreibung dezent */
.lam-form .lam-reply__subscription-header {
    margin-bottom: var(--space-sm);
}

.lam-form .lam-reply__subscription-title,
.lam-form .lam-reply__mod-title {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 var(--space-xs) 0;
}

.lam-form .lam-reply__subscription-title {
    color: var(--accent);
}

.lam-form .lam-reply__mod-title {
    color: var(--warning);
}

.lam-form .lam-reply__subscription-desc {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 0.2rem;
}

/* Kompakteres Spacing in Options-Grid */
.lam-form .lam-reply__subscription-options {
    gap: var(--space-xs) var(--space-lg);
}

.lam-form .lam-reply__mod-grid {
    gap: var(--space-sm) var(--space-lg);
}

/* Subscription Option-Text */
.lam-form .lam-reply__subscription-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Mod-Option Label/Description */
.lam-form .lam-reply__mod-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
}

.lam-form .lam-reply__mod-desc {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-dim);
}


/* ============================================================================
   ATTACHMENTS — Brutalist Wrapper für die alte tborder-Tabelle.
   Tabelle wird zu transparent, Headers zu Mono-Section-Title.
   ============================================================================ */

.lam-form ~ br + table.tborder,
.lam-form-page table.tborder {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    margin: var(--space-md) 0;
    border-collapse: collapse;
}

.lam-form-page table.tborder .thead {
    background: transparent !important;
    border: none !important;
    padding: var(--space-sm) 0 !important;
    text-align: left;
}

.lam-form-page table.tborder .thead strong {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.lam-form-page table.tborder .tcat {
    background: transparent !important;
    border: none !important;
    padding: var(--space-xs) 0 var(--space-sm) 0 !important;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.lam-form-page table.tborder td {
    padding: var(--space-sm) 0;
    border: none;
}


/* ---------- Mobile: Label über Field stapeln ----------------------------- */
@media (max-width: 768px) {
    .lam-form__row {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .lam-form__label {
        padding-top: 0;
    }

    .lam-form__actions {
        flex-direction: column-reverse;
    }

    .lam-form__submit {
        width: 100%;
    }
}


/* ============================================================================
   SCEDITOR TOOLBAR (Brutalist)
   Standard sceditor-Klassen werden überschrieben — die Toolbar ist NICHT
   im iframe, daher haben wir hier vollen Zugriff auf CSS-Variablen.
   Der iframe-Inhalt wird separat in jquery.sceditor.modern.css gestyled.
   ============================================================================ */

/* Outer-Container: kein Border-Radius, scharfe Kanten */
.sceditor-container {
    background: var(--bg);
    border: 1px solid var(--border-light) !important;
    border-radius: 0 !important;
    color: var(--text);
    font-family: var(--font-body);
}

.sceditor-container.focused {
    border-color: var(--accent) !important;
}

/* Toolbar: dunkler Hintergrund, dezente Bottom-Border */
div.sceditor-toolbar {
    background: var(--bg-alt) !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: var(--space-xs) !important;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* Button-Gruppe: kein Border, kein bg, etwas Spacing zwischen Gruppen */
div.sceditor-group {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    gap: 1px;
    /* Kleine Trenn-Linie zwischen Gruppen */
    padding-right: var(--space-xs);
    margin-right: var(--space-xs) !important;
    border-right: 1px solid var(--border) !important;
}

div.sceditor-group:last-child {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0;
}

/* Einzelne Toolbar-Buttons: scharfkantig, transparent, Icon dezent */
.sceditor-toolbar .sceditor-button,
.sceditor-toolbar a.sceditor-button {
    width: auto !important;
    height: auto !important;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.25rem !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: var(--text-dim);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover: Akzent-Border + Akzent-Icon */
.sceditor-toolbar .sceditor-button:hover,
.sceditor-toolbar a.sceditor-button:hover {
    background: var(--bg-card) !important;
    border-color: var(--accent) !important;
    color: var(--accent);
}

/* Aktiver Button (z. B. Bold beim getipptem Bold-Text) */
.sceditor-toolbar .sceditor-button.active,
.sceditor-toolbar a.sceditor-button.active {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: var(--accent);
}

/* Disabled-Button */
.sceditor-toolbar .sceditor-button.disabled,
.sceditor-toolbar a.sceditor-button.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* SCEditor-Buttons rendern Icons über background-image — Filter macht
   die schwarzen Default-Icons im Dark-Theme sichtbar */
.sceditor-toolbar .sceditor-button div,
.sceditor-toolbar a.sceditor-button div {
    width: 1rem !important;
    height: 1rem !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    /* Invertiert dunkle Icons → hell, plus leichte Tönung */
    filter: invert(0.85) sepia(0) saturate(0);
}

.sceditor-toolbar .sceditor-button:hover div,
.sceditor-toolbar a.sceditor-button:hover div,
.sceditor-toolbar .sceditor-button.active div,
.sceditor-toolbar a.sceditor-button.active div {
    /* Beim Hover/Active: Icon in Akzent-Farbe einfärben */
    filter: invert(0.55) sepia(1) saturate(8) hue-rotate(-20deg);
}

/* Resize-Grip unten rechts: dezent */
.sceditor-grip {
    background: var(--border-light) !important;
    opacity: 0.5;
}

/* Dropdowns (z. B. Farbpalette, Smiley-Picker) */
.sceditor-dropdown {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 0 !important;
    color: var(--text);
    box-shadow: var(--shadow);
}

.sceditor-color-option {
    border: 1px solid var(--border) !important;
}

.sceditor-color-option:hover {
    border-color: var(--accent) !important;
}