/* ============================================================
   mobile.css — Valencia Dark (MOBILE ONLY OVERRIDES)
   Wird als LETZTES geladen.
   ============================================================ */

/* Anti horizontal bleed */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* iOS Safe Area */
:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Sichtbarkeit */
.show-on-mobile{ display:none !important; }
.hide-on-mobile{ display:block !important; }
.mobile-only{ display:none !important; }
.desktop-only{ display:block !important; }

@media (max-width: 820px){
  .show-on-mobile{ display:block !important; }
  .hide-on-mobile{ display:none !important; }
  .mobile-only{ display:block !important; }
  .desktop-only{ display:none !important; }

  /* Desktop Sidebar aus */
  .sidebar{ display:none !important; }

  /* iOS Topbar: etwas runter (Safe Area) */
  .topbar{
    padding-top: var(--safe-top) !important;
    height: calc(var(--topbar-h) + var(--safe-top)) !important;
  }
  .layout{
    min-height: calc(100vh - (var(--topbar-h) + var(--safe-top))) !important;
  }

  /* Layout niemals horizontal */
  .layout{
    display:block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .content{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 14px 14px calc(92px + var(--safe-bottom)) !important;
  }

  /* typische Overflow-Kandidaten */
  .card,
  .table,
  .table-wrap,
  .table-responsive{
    max-width: 100%;
  }

  .table-wrap,
  .table-responsive{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  img, svg, canvas, video{
    max-width: 100%;
    height: auto;
  }

  code, pre, .path-cell{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Topbar enger */
  .topbar{ padding-left: 12px !important; padding-right: 12px !important; }
  .topbar-right .user-label{ display:none; }
  
  /* Topbar: iOS Safe-Area oben berücksichtigen */
  .topbar{
    padding: calc(var(--safe-top)) 12px 0 !important;
    height: calc(var(--topbar-h) + var(--safe-top)) !important;
  }
  .topbar-right .user-label{ display:none; }

  /* Layout-Höhe passend zur größeren Topbar */
  .layout{
    min-height: calc(100vh - (var(--topbar-h) + var(--safe-top))) !important;
  }
  
    /* V-Card Actions: mobil als Grid (sieht viel sauberer aus) */
  .v-actions{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .v-actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* Details Button soll volle Breite bekommen */
  .v-actions .btn-full{
    grid-column: 1 / -1;
  }

  /* v-kv schöner stapeln wenn es eng wird */
  .v-kv{ flex-wrap: wrap; }
  .v-k{ width:auto; min-width: 90px; }


  /* ------------------------------------------------
     Bottom Nav (5 Slots)
  ------------------------------------------------- */
  .bottom-nav{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + var(--safe-bottom));
    z-index: 6000;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;

    padding: 10px;
    border-radius: 18px;

    background: rgba(12,12,24,0.72);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  }

  .bn-item{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: 6px;

    padding: 10px 8px;
    border-radius: 14px;

    text-decoration:none;
    color: rgba(245,245,255,0.82);

    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);

    min-height: 56px;

    user-select:none;
    -webkit-tap-highlight-color: transparent;
  }

  .bn-item .bn-icon{ font-size: 20px; line-height: 1; opacity: 0.95; }
  .bn-item .bn-label{ font-size: 11px; letter-spacing: 0.02em; opacity: 0.85; }

  .bn-item.active{
    background: rgba(123,44,255,0.26);
    border-color: rgba(123,44,255,0.35);
    box-shadow: 0 0 0 1px rgba(255,122,246,0.12) inset;
    color: rgba(255,255,255,0.95);
  }

  .bn-item:active{ transform: translateY(1px); }

  /* ------------------------------------------------
     Mobile Menu Sheet
     CLOSED by default, open via .is-open
  ------------------------------------------------- */
  .mobile-sheet{
    display:none !important;
    position: fixed;
    inset: 0;
    z-index: 7000;
  }
  .mobile-sheet.is-open{
    display:block !important;
  }

  .mobile-sheet-backdrop{
    position:absolute;
    inset:0;
    z-index: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mobile-sheet-panel{
    position:absolute;
    left: 10px;
    right: 10px;

    /* tiefer Richtung Boden */
    bottom: calc(70px + var(--safe-bottom));

    max-height: calc(100vh - 160px);
    overflow:hidden;

    z-index: 1;

    border-radius: 18px;
    background: rgba(18,18,34,0.78);
    border: 1px solid rgba(255,255,255,0.10);

    box-shadow: 0 24px 60px rgba(0,0,0,0.68);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mobile-sheet-header{
    display:flex;
    align-items:center;
    justify-content: space-between;

    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .mobile-sheet-title{ font-weight: 800; }

  .mobile-sheet-body{
    padding: 10px 12px;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 260px);
  }

  .mobile-sheet-section{
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
    margin: 10px 4px 6px;
  }

  .mobile-sheet-link{
    display:flex;
    align-items:center;
    gap: 10px;

    padding: 10px 12px;
    margin-bottom: 7px;

    border-radius: 14px;
    text-decoration:none;

    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: rgba(245,245,255,0.90);
  }

  .mobile-sheet-link:active{ transform: translateY(1px); }

  .mobile-sheet-danger{
    background: rgba(255,77,77,0.14) !important;
    border-color: rgba(255,77,77,0.22) !important;
  }

  /* wenn Sheet offen: Hintergrund nicht scrollen */
  body.sheet-open{
    overflow: hidden;
    touch-action: none;
  }

  /* Tabellen lesbar */
  .table{ font-size: 12px; }
  .table th, .table td{ white-space: nowrap; }

  .card{ border-radius: 18px; }
  .btn{ border-radius: 12px; }
}

/* HARD STOP: niemals horizontal auf Mobile (ohne Grid kaputt zu machen) */
@media (max-width: 820px){
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .layout, .content{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  pre, code, .path-cell{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .table, .table-wrap, .table-responsive{
    max-width: 100% !important;
  }

  /* Reinforcement: Bottom Nav MUSS horizontal bleiben (Programme/Webhooks Fix) */
  .bottom-nav{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    align-items: stretch !important;
  }
  .bottom-nav .bn-item{
    width: auto !important;
    max-width: none !important;
    display: flex !important;
  }

  /* damit kein “max-width” irgendwas am Bar/Grid bricht */
  .bottom-nav, .bottom-nav *{
    max-width: none !important;
  }
}

/* ModHub Mobile improvements */
.modhub-filterbar-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.modhub-search {
  max-width: 380px;
}

.modhub-meta {
  margin-left: auto;
}

.modhub-cards {
  display: none;
  gap: 10px;
  margin-top: 10px;
}

/* Mobile: switch table -> cards */
@media (max-width: 780px) {
  .modhub-search {
    width: 100%;
    max-width: none;
  }

  .modhub-meta {
    width: 100%;
    margin-left: 0;
  }

  .modhub-tablewrap {
    display: none;
  }

  .modhub-cards {
    display: grid;
  }

  .modhub-card .card-body {
    padding: 12px;
  }
}

/* modhub helpers */
.hide-mobile { display:block; }
.show-mobile { display:none; }

@media (max-width: 720px) {
  .hide-mobile { display:none !important; }
  .show-mobile { display:block !important; }
}