/* heyde.schule - Modular CSS: 20_forms.css */

/* --- Responsive Form Layouts (Modern Glass Design) --- */

/* Block-Modus: Untereinander (z.B. in Modals oder Dashboards) */
.updform, .addform, .cpyform, .delform, .login-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    padding: var(--spacing-std);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-std);
    gap: 12px;
    width: 100%;
    margin-bottom: var(--spacing-std);
    box-sizing: border-box;
}

/* Row-Modus: Kompakt, nebeneinander fließend (z.B. in Listen) */
.updformrow, .addformrow {
    display: inline-flex;
    flex-wrap: wrap;
    width: fit-content;
    min-width: 280px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    padding: 8px 14px;
    margin: 4px 8px 4px 0;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    align-items: center;
}

.updformrow form, .addformrow form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    width: 100%;
}

/* Feld-Wrapper Logik */
.updform-field-wrapper, .addform-field-wrapper, .cpyform-row, .delform-row, .modal-matter .table-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 4px;
    margin-bottom: 20px;
    padding: 0;
}

/* Labels vereinheitlichen */
.updformrow-label, .addformrow-label, .updform-label, .addform-label, .cpyform-label, .delform-label, .modal-matter label {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--accent-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin-bottom: 2px;
    opacity: 0.95;
}

/* FIX: In Row-Formularen dürfen Labels nicht die volle Breite einnehmen */
.updformrow .updformrow-label, .addformrow .addformrow-label {
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Input-Logik vereinheitlichen */
.updformrow-input, .addformrow-input, .updform-input, .addform-input, .cpyform-input, .delform-input, .modal-matter input, .modal-matter select {
    display: flex;
    align-items: center;
    width: 100%;
    flex: 1 1 auto;
}

/* FIX: In Row-Formularen fließen Inputs nebeneinander */
.updformrow .updformrow-input, .addformrow .addformrow-input {
    width: auto !important;
    min-width: 60px;
    flex: 0 1 auto !important;
}

/* Spezielle Ausnahme für Boolean-Flipper (Verhindert Stretching) */
.updformrow-input:has(.bool-flip), .addformrow-input:has(.bool-flip),
.updform-input:has(.bool-flip), .addform-input:has(.bool-flip),
.cpyform-input:has(.bool-flip), .delform-input:has(.bool-flip),
.modal-matter :has(.bool-flip) {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding-right: 8px; 
    width: auto !important;
}

/* Glass Bricks - Embossed Ästhetik */
.brick-outset {
    box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 1px 1px 1px rgba(255,255,255,0.2) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

.brick-inset {
    box-shadow: inset 1px 1px 5px rgba(0,0,0,0.3) !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: transparent !important;
}

/* Akzent für alles was "Neu" ist */
.addformrow, .addform, .modal-matter > form {
    border-left: 5px solid var(--accent-1);
}

/* Gemeinsames Input-Styling für ALLE Text-basierten Formular-Felder */
input[type="text"], input[type="password"], input[type="date"], input[type="number"], 
select, textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    color: var(--text-1);
    font-family: var(--font);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* NUR Text-Inputs bekommen den leuchtenden Rand bei Fokus */
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, 
input[type="number"]:focus, select:focus, textarea:focus {
    border-color: var(--accent-1) !important;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(199, 96, 45, 0.2);
    outline: none;
}

@media (max-width: 768px) {
    .updformrow, .addformrow {
        flex-direction: column;
        align-items: flex-start;
        display: flex;
        width: 100%;
    }
    
    .updformrow > *, .addformrow > *, .addform > * {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    .updformrow .button-xs, .updformrow .action-icon {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* Content from boolean-flipper.css */
/* === Basis-Parameter === */
:root {
  --row-h: 26px;        /* Höhe der Datenzeile */
  --pad-x: 4px;         /* Innenabstand */
  --thumb: 18px;        /* Durchmesser des Schalters */
  --radius: 6px;        /* leicht abgerundet */
  --gap: 8px;           /* Abstand zu Nachbarfeldern */
}

/* === Hauptcontainer des Schalters === */
.bool-flip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--row-h);
  border: 1px solid #b8bfc7;
  border-radius: var(--radius);
  background: #f3f5f7;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 var(--gap) 0 0;
  vertical-align: middle;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
  background-clip: padding-box;
  z-index: 1;
  width: auto;
  min-width: 60px; /* Sicherheits-Mindestbreite */
  flex-shrink: 0;   /* Darf nicht gestaucht werden */
  line-height: var(--row-h);
}

/* Entfernt graue Altlasten */
.bool-flip::before,
.bool-flip::after { content: none !important; }

/* Farben */
.bool-flip.off { background:#f5dede; border-color:#c88c8c; }
.bool-flip.on  { background:#dff5e0; border-color:#7db48b; }

/* === Sizer: sorgt für automatische Breite === */
.bool-flip .sizer {
  visibility: hidden;
  position: relative;
  z-index: -1;
  white-space: nowrap;
  padding: 0 calc(var(--thumb) - var(--pad-x));
  font-weight: 600;
  line-height: 1;
  font-size: 12px;
  text-transform: uppercase;
}

/* === Textbereich === */
.bool-flip .bgtext {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  opacity: .9;
  pointer-events: none;
  padding: 0 var(--pad-x);
  font-size: 12px;
  text-transform: uppercase;
}

/* Textposition abhängig vom Zustand */
.bool-flip.off .bgtext {
  padding-left: calc(var(--pad-x) + var(--thumb));
  padding-right: var(--pad-x);
  color: #777;
}

.bool-flip.on .bgtext {
  padding-left: var(--pad-x);
  padding-right: calc(var(--pad-x) + var(--thumb));
  color: #111;
}

/* === Thumb (Schiebeknopf) === */
.bool-flip .thumb {
  position: absolute;
  top: 50%;
  left: var(--pad-x);
  right: auto;
  width: var(--thumb);
  height: var(--thumb);
  transform: translateY(-50%);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.08);
  z-index: 2;
  transition: left .18s ease, right .18s ease;
}

.bool-flip.on .thumb {
  left: auto;
  right: var(--pad-x);
}

/* === Fokus- und Schrift === */
.bool-flip:focus-visible {
  outline: 2px solid #2f6fed;
  outline-offset: 2px;
}

.bool-flip,
.bool-flip .bgtext,
.bool-flip .sizer {
  font-size: 12px;
  text-transform: uppercase;
}


/* --- Inline Forms (e.g. inside Table Cells) --- */
.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.inline-form .updformrow-input {
    width: auto !important;
    flex: 0 1 auto !important;
}
.inline-form input[type="submit"] {
    width: auto;
}