/* jckbn-ui — Mobile-Patterns (active <= 600px)
 *
 * Enthält:
 *  - Safe-area-Padding für Body/Header
 *  - Bottom-Sheet (von unten einrastend)
 *  - Action-Sheet (iOS-style Liste am unteren Rand)
 *  - Sticky-Bottom-Action-Bar
 *  - Long-press-Visualfeedback
 *  - Auf Touch min-height 44px für alle Buttons
 *
 * Konvention: Mobile-Klassen beginnen mit `.m-…` oder werden in @media gewrapped.
 */

/* ============ Touch-Minima (Apple HIG) ============ */
@media (hover: none) {
  .ui-btn { min-height: var(--touch-min); padding: .75rem 1rem; }
  .ui-iconbtn { min-width: var(--touch-min); min-height: var(--touch-min); padding: .5rem; }
  .ui-chip { min-height: 32px; padding: .45rem .75rem; }
  /* Inputs: nicht zoomen lassen bei Focus (iOS Safari) */
  input, select, textarea { font-size: 16px; }
}

/* ============ Safe-Area-Insets ============ */
body {
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  /* padding-bottom kommt aus Komponenten (z.B. Sticky-Bottom-Bar oder Sheet) */
}

/* ============ Mobile-Header (Welle 4.4) ============
 * Auf Mobile: Hamburger ersetzt die Nav, ein Tap öffnet ein Bottom-Sheet
 * mit allen Nav-Einträgen. Resultat: kompakter Header in einer Zeile.
 */
@media (max-width: 600px) {
  .ui-header {
    padding: .85rem 1rem;
    position: sticky;
    top: 0;
    z-index: 90;
    flex-wrap: nowrap;
  }
  .ui-header h1 { font-size: 1.05rem; letter-spacing: 1.5px; }
  .ui-header .nav { display: none; }
  .ui-header .hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============ Mobile-Toast: full-width statt zentriert rechts ============ */
@media (max-width: 600px) {
  .ui-toast {
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + var(--safe-bottom));
    max-width: none;
    text-align: center;
  }
}

/* ============ Mobile-Dialog: vollflächig statt zentriert ============ */
@media (max-width: 600px) {
  .ui-overlay { padding: 0; align-items: stretch; }
  .ui-dialog {
    max-width: 100%;
    max-height: 100dvh;
    padding: 1.5rem;
    padding-top: calc(1.5rem + var(--safe-top));
    padding-bottom: calc(1.5rem + var(--safe-bottom));
    border: none;
  }
  .ui-dialog h2 { font-size: 1rem; margin-bottom: 1.5rem; }
  .ui-dialog-actions { flex-direction: column-reverse; gap: .5rem; margin-top: 1.5rem; }
  .ui-dialog-actions .ui-btn { width: 100%; min-height: var(--touch-min); }
}

/* ============ Bottom-Sheet ============
 * Slidet von unten ein. Used für Action-Menüs, Kontextmenüs auf Mobile.
 *
 *  <div class="ui-sheet" id="myFooSheet">
 *    <div class="ui-sheet-backdrop"></div>
 *    <div class="ui-sheet-panel">
 *      <div class="ui-sheet-handle"></div>
 *      <div class="ui-sheet-title">Aktionen</div>
 *      <ul class="ui-sheet-list">
 *        <li class="ui-sheet-item">Eintrag</li>
 *      </ul>
 *    </div>
 *  </div>
 */
.ui-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
}
.ui-sheet.active { display: block; }
.ui-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .25s;
}
.ui-sheet.active .ui-sheet-backdrop { opacity: 1; }
.ui-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  padding: .5rem 0 calc(.5rem + var(--safe-bottom));
  max-height: 80dvh;
  overflow-y: auto;
}
.ui-sheet.active .ui-sheet-panel { transform: translateY(0); }
.ui-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--text3);
  border-radius: 2px;
  margin: .5rem auto 1rem;
  opacity: .6;
}
.ui-sheet-title {
  text-align: center;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text3);
  padding: 0 1rem .75rem;
  border-bottom: 1px solid var(--surface2);
  margin-bottom: .5rem;
}
.ui-sheet-list { list-style: none; }
.ui-sheet-item {
  padding: 1rem 1.25rem;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--touch-min);
  border-bottom: 1px solid var(--surface2);
  font-family: var(--font-sans);
  color: var(--text);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
}
.ui-sheet-item:last-child { border-bottom: none; }
.ui-sheet-item:active { background: var(--surface2); }
.ui-sheet-item.danger { color: var(--accent); }
.ui-sheet-item[disabled] { opacity: .4; pointer-events: none; }
.ui-sheet-item .label-sub {
  display: block;
  font-size: .7rem;
  color: var(--text3);
  margin-top: .15rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ui-sheet-cancel {
  margin: .5rem 1rem 0;
  padding: 1rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  width: calc(100% - 2rem);
  font-family: var(--font-sans);
  min-height: var(--touch-min);
}

/* ============ Sticky-Bottom-Action-Bar
 * Erscheint nur auf Mobile, ersetzt Selection-Toolbar
 *
 *  <div class="ui-bottom-bar" id="myBar">
 *    <button class="ui-btn">Aktion 1</button>
 *    <button class="ui-btn">Aktion 2</button>
 *  </div>
 */
.ui-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: .6rem 1rem calc(.6rem + var(--safe-bottom));
  display: none;
  gap: .5rem;
  z-index: 80;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-bottom-bar.active { display: flex; }
.ui-bottom-bar .ui-btn { flex: 0 0 auto; }

/* ============ Long-press-Feedback ============ */
.ui-long-press-active {
  background: rgba(207, 181, 59, .18) !important;
  transition: background .15s;
}

/* ============ Helper Utility ============ */
.m-only { display: none !important; }
.d-only { display: initial; }
@media (max-width: 600px) {
  .m-only { display: initial !important; }
  .d-only { display: none !important; }
}

/* ============ Tap-Highlight neutralisieren ============ */
button, a, .ui-sheet-item, .ui-iconbtn {
  -webkit-tap-highlight-color: transparent;
}