/* ============================================================
   BERATUNG: Mobile & UX Fixes
   ============================================================
   Wird NACH style.css und VOR style-dark.css eingebunden.
   Inhalt:
     A) Touch-Target-Fixes (Icon-Buttons, Logout)
     B) Sticky Save-Bar in langen Formularen
     C) Card-Layout für Tabellen auf Smartphones
     D) Schriftgrößen-Skalierung (data-textsize)
     E) Preferences-Leiste in der Fußzeile (FT-identisch)
     F) iOS / Safari spezifische Fixes
   ============================================================ */


/* ── A) Touch-Target-Fixes ───────────────────────────────── */

@media (max-width: 768px) {
  .btn-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .btn-icon i { font-size: 1rem; }
}

@media (max-width: 600px) {
  .btn-logout {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-logout i { font-size: 1rem; }
}

.item-list-table td .btn-icon + .btn-icon,
.item-list-table td form + .btn-icon,
.item-list-table td .btn-icon + form { margin-left: 4px; }
@media (max-width: 768px) {
  .item-list-table td .btn-icon + .btn-icon,
  .item-list-table td form + .btn-icon,
  .item-list-table td .btn-icon + form { margin-left: 8px; }
}


/* ── B) Sticky Save-Bar in langen Formularen ─────────────── */

@media (max-width: 768px) {
  .form-actions--sticky,
  .form-navigation--sticky {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin-left: calc(-1 * var(--sp-md));
    margin-right: calc(-1 * var(--sp-md));
    padding: var(--sp-md);
    padding-bottom: max(var(--sp-md), env(safe-area-inset-bottom));
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  }
}


/* ── C) Card-Layout für Tabellen auf Smartphones ─────────── */

@media (max-width: 480px) {
  .item-list-table--cards,
  .item-table--cards { display: block; }
  .item-list-table--cards thead,
  .item-table--cards thead { display: none; }
  .item-list-table--cards tbody,
  .item-list-table--cards tr,
  .item-table--cards tbody,
  .item-table--cards tr { display: block; }
  .item-list-table--cards tr,
  .item-table--cards tr {
    margin-bottom: var(--sp-sm);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-sm);
    background: var(--surface);
  }
  .item-list-table--cards td,
  .item-table--cards td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--sp-xs) 0;
    border: none;
    gap: var(--sp-md);
  }
  .item-list-table--cards td::before,
  .item-table--cards td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-mid);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .item-list-table--cards td:first-child,
  .item-table--cards td:first-child {
    font-weight: 600;
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--sp-xs);
    margin-bottom: var(--sp-xs);
  }
  .item-list-table--cards td:first-child::before,
  .item-table--cards td:first-child::before { display: none; }
}


/* ── D) Schriftgrößen-Skalierung (data-textsize) ──────────── */
/* Standard-Schrift = 16px (Browser-Default). Wenn der Benutzer
   in der Fußzeile "A" Mittel oder "A" Groß klickt, setzt das
   JavaScript html[data-textsize="l"] bzw. "xl". Weil alle Maße
   in rem definiert sind, skaliert die Seite proportional mit. */

html[data-textsize="l"]  { font-size: 112.5%; } /* 18px */
html[data-textsize="xl"] { font-size: 125%;   } /* 20px */

/* Bei vergrößerter Schrift sollen Inputs mitwachsen
   (Default-Override für iOS-Zoom-Prevention). */
html[data-textsize="l"] input,
html[data-textsize="l"] select,
html[data-textsize="l"] textarea,
html[data-textsize="xl"] input,
html[data-textsize="xl"] select,
html[data-textsize="xl"] textarea {
  font-size: 1rem;
}


/* ── E) Preferences-Leiste in der Fußzeile ───────────────── */

.user-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  align-items: center;
  justify-content: center;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
  font-size: var(--fs-xs);
}

.user-prefs__group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-prefs__label {
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-2xs);
}

.user-prefs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-mid);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  line-height: 1;
}

.user-prefs__btn:hover {
  background: var(--navy-wash);
  border-color: var(--navy-muted);
  color: var(--navy);
}

.user-prefs__btn--aktiv {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.user-prefs__btn--aktiv:hover {
  background: var(--navy-light);
  color: #fff;
  border-color: var(--navy-light);
}

.user-prefs__btn i { font-size: 0.8rem; width: 14px; height: 14px; }

.user-prefs__btn--text {
  font-weight: 700;
  min-width: 36px;
}

@media (max-width: 600px) {
  .user-prefs {
    gap: var(--sp-sm);
    padding: var(--sp-xs) var(--sp-sm);
  }
  .user-prefs__btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
  }
  .user-prefs__btn--text { min-width: 44px; }
}


/* ============================================================
   F) iOS / Safari spezifische Fixes
   ============================================================ */

@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px; }
  input[type="text"],
  input[type="date"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select, textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--r-sm);
  }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer { padding-bottom: env(safe-area-inset-bottom); }
  .site-header { padding-top: env(safe-area-inset-top); }
}

.table-responsive { -webkit-overflow-scrolling: touch; }

a, button, input, select, textarea {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}