/* ---------- V2.0/V3.1 mobile ergonomics + Navigation ----------
   Einzige Quelle für Topbar- und Tab-Leisten-Regeln auf Mobilgeräten
   (vorher zusätzlich in mobile-layout.css und mobile-header.css redefiniert -
   siehe DESIGN.md, Abschnitt "Mobile Breakpoints"). Die Tab-Labels der
   unteren Navigation werden über [data-view] statt :nth-child() zugeordnet,
   damit sie nicht mehr von der Tab-Reihenfolge in index.html abweichen
   können. Die reservierte Höhe für die fixierte Leiste kommt aus
   --mobile-nav-height, das app.js per ResizeObserver an der echten Höhe
   von .tabs misst (Fallback-Werte hier nur für den ersten Render vor JS). */
@media (max-width:760px){
  html{
    font-size:var(--text-sm);
  }

  body{
    background:var(--bg);
    padding-bottom:var(--mobile-nav-height, 112px);
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 10px;
    min-height:48px;
    background:rgba(255,255,255,.96);
    box-shadow:0 1px 0 var(--border);
  }

  .brand{
    min-width:0;
    gap:8px;
    order:1;
  }

  .brand .mark{
    width:30px;
    height:30px;
  }

  .brand h1{
    font-size:var(--text-18);
  }

  .brand .sub{
    display:none;
  }

  .settings-btn{
    order:2;
    width:34px;
    height:34px;
    min-height:34px;
    border-radius:var(--radius);
    font-size:var(--text-17);
  }

  .settings-btn span:last-child{
    display:none;
  }

  /* Kennzahlen sind auf Mobil standardmäßig eingeklappt, damit das
     Scan-Feld (die eigentliche Aufgabe) ohne Scrollen sichtbar bleibt -
     siehe header-stats-toggle-Klick-Handler in app.js. */
  .header-stats{
    order:4;
    display:flex;
    flex-direction:column;
    flex:1 0 100%;
    width:100%;
    margin:4px 0 0;
  }

  .header-stats-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    background:none;
    border:none;
    padding:4px 2px;
    font-size:var(--text-13);
    font-weight:700;
    color:var(--text-muted);
    cursor:pointer;
  }

  .header-stats-toggle .icon{
    width:16px;
    height:16px;
  }

  .provider-stats-group{
    width:100%;
    padding:7px;
    display:none;
  }

  .header-stats.is-expanded .provider-stats-group{
    display:flex;
  }

  .header-stats .stats-group-label{
    display:none;
  }

  .provider-stats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }

  .provider-stat,
  .provider-stat-total{
    min-width:0;
    padding:6px 4px;
  }

  .provider-stat b,
  .provider-stat-total b{
    font-size:var(--text-18);
  }

  .provider-stat span{
    font-size:var(--text-15);
  }

  /* ---------- Untere Tab-Leiste (fixiert) ---------- */
  .tabs{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:60;
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:6px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.98);
    border-top:1px solid var(--border);
    border-bottom:none;
    box-shadow:0 -8px 24px rgba(24,33,29,.12);
    overflow:visible;
  }

  .tab[data-view="export"],
  #view-export{
    display:none;
  }

  /* Icon (echtes <svg class="tab-icon">) + Label kommen jetzt als reales
     Markup aus index.html statt als CSS-content-String - das Label bleibt
     unsichtbar (font-size:0), die Kurzform kommt aus dem data-mobile-label-
     Attribut am Button selbst (::after liest attr() nur vom eigenen
     Element, deshalb hier auf .tab und nicht auf .tab-label). Weiterhin
     ausschließlich über [data-view]/[data-mobile-label] adressiert, nie
     über :nth-child - siehe DESIGN.md. */
  .tab{
    min-width:0;
    min-height:44px;
    padding:5px 4px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-2);
    color:var(--text-muted);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    text-align:center;
    line-height:1.1;
  }

  .tab .tab-icon{
    width:20px;
    height:20px;
  }

  .tab .tab-label{
    font-size:0;
  }

  .tab::after{
    content:attr(data-mobile-label);
    display:block;
    white-space:pre-line;
    font-size:var(--text-2xs);
    font-weight:700;
    line-height:1.1;
  }

  .tab.active{
    background:var(--accent);
    color:var(--surface);
    border-color:var(--accent);
    box-shadow:none;
  }

  /* Zweite Duotone-Fläche ist standardmäßig in --accent eingefärbt -
     auf dem aktiven Tab (Hintergrund selbst --accent) wäre sie sonst
     unsichtbar, siehe --icon-tint in templates/index.html. */
  .tab.active .icon{
    --icon-tint:var(--surface);
    --icon-tint-opacity:0.45;
  }

  /* Die Bereichsfarbe je Tab (base.css, .tab[data-view="…"] .tab-icon)
     gilt bewusst auch für den aktiven Tab - nur hier auf Mobil wird sie
     wieder auf Weiß zurückgesetzt: gegen die satte --accent-Kachel des
     aktiven Tabs haben mehrere der Bereichsfarben (z. B. --icon-pick,
     fast identisch mit --accent selbst) keinen ausreichenden Kontrast
     mehr. [data-view] + .active + .tab-icon ist spezifischer als die
     Regel in base.css, gewinnt also unabhängig von der Ladereihenfolge. */
  .tab[data-view].active .tab-icon{ color:var(--surface); }

  /* .tabs-account (Benutzername + Abmelden) ist auf Desktop absolut
     positioniert (siehe base.css) - im Grid der unteren Tab-Leiste muss
     es aber ein normales Grid-Kind sein, sonst verschwindet es aus dem
     Layout. Eigene, volle Zeile unter den Icons. Die fixierte Leiste
     bleibt trotzdem korrekt hoch, weil app.js die Höhe per ResizeObserver
     aus der echten .tabs-Höhe misst (siehe Kommentar oben), statt sie
     hier zu raten. */
  .tabs-account{
    position:static;
    grid-column:1 / -1;
    justify-content:center;
    border-left:none;
    padding:2px 0 0;
  }

  .tabs-account-name{
    font-size:var(--text-13);
  }

  .view{
    padding:14px 10px 24px;
  }

  .table-toolbar{
    top:48px;
  }

  .panel,
  .modal-box{
    padding:14px;
  }

  .modal-backdrop{
    padding:14px 10px;
  }

  .modal-actions,
  .settings-inline-row,
  .datetime-pair,
  .box-setting,
  .box-setting-edit,
  .box-current-actions,
  .box-detail-header,
  .export-col-actions,
  .pick-detail-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .modal-actions button,
  .settings-inline-row button,
  .box-setting-edit button,
  .box-detail-header button,
  .export-col-actions button,
  .pick-detail-actions button{
    width:100%;
  }

  /* Die feste Breite von .settings-toggle (siehe base.css) ist nur für die
     Desktop-Ausrichtung der Schalter - auf Mobil (Spalten-Layout durch
     .settings-inline-row oben) soll er wie alle anderen Felder die volle
     Breite bekommen. */
  .settings-toggle{
    flex-basis:auto;
    width:100%;
  }

  .scan-layout{
    gap:14px;
  }

  .scan-input-row input{
    font-size:var(--text-18);
  }

  .scan-input-row button{
    min-height:48px;
  }

  .roll{
    max-height:42vh;
  }

  .detail-header{
    align-items:flex-start;
  }

  .cover,
  .cover-placeholder,
  .cover-thumb{
    width:78px;
    height:112px;
  }

  .detail-title{
    font-size:var(--text-md);
  }

  .source-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .table-toolbar{
    align-items:stretch;
    gap:10px;
    margin-bottom:12px;
  }

  .table-toolbar input,
  .table-toolbar .search-field{
    width:100%;
    min-width:0;
  }

  #book-count,
  #pick-count{
    display:block;
    font-size:var(--text-xs);
  }

  .table-wrap{
    overflow:visible;
    border:none;
    background:transparent;
    box-shadow:none;
  }

  .detail-row{
    display:block !important;
  }

  .detail-row td{
    display:block;
    padding:12px;
  }

  .detail-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .detail-facts{
    grid-template-columns:1fr;
  }

  .history-chart{
    height:150px;
  }

  .history-list-row{
    grid-template-columns:1fr;
    gap:4px;
  }

  .rescan-header,
  .rescan-panel-header,
  .rescan-summary,
  .lager-group-header{
    align-items:stretch;
    flex-direction:column;
  }

  .rescan-summary{
    grid-template-columns:1fr;
  }

  .rescan-table,
  .rescan-table thead,
  .rescan-table tbody,
  .rescan-table tr,
  .rescan-table td{
    display:block;
    width:100%;
  }

  .rescan-table thead{
    display:none;
  }

  .rescan-table tr{
    border-bottom:1px solid var(--border);
    padding:10px 0;
  }

  .rescan-table td{
    padding:4px 10px;
  }

  .trends-intro{
    margin-bottom:16px;
  }

  .trends-intro h2{
    font-size:var(--text-md);
  }

  .trends-intro p,
  .export-time-hint{
    font-size:var(--text-xs);
  }

  /* .export-presets/.pick-filter-row/.pick-stats waren hier zusätzlich als
     horizontal scrollender Flex-Streifen definiert - toter Code, denn
     mobile-layout.css (lädt danach, siehe <link>-Reihenfolge in
     index.html) setzt für dieselben Selektoren display:grid und damit
     einen komplett anderen Formatierungskontext; overflow-x/flex-wrap/
     flex:0 0 auto griffen nie. Alleiniger Owner ist jetzt mobile-layout.css,
     siehe dort für den Grid-Rahmen und die Zeilenumbruch-Korrektur. */

  .export-form{
    grid-template-columns:1fr;
    gap:12px;
  }

  .export-form button{
    width:100%;
  }

  .export-results{
    grid-template-columns:1fr;
  }

  .export-item-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
  }

  .export-item-main{
    grid-column:1 / -1;
  }

  .export-change-btn{
    min-height:36px;
    padding:8px 12px;
  }

  .pick-layout{
    gap:14px;
  }

  .pick-toolbar{
    flex-direction:row;
    align-items:center;
  }

  .pick-item{
    grid-template-columns:auto 44px minmax(0,1fr);
    align-items:start;
    gap:10px;
  }

  .pick-check{
    margin-top:20px;
  }

  .pick-cover,
  .pick-cover-placeholder{
    width:44px;
    height:62px;
  }

  .pick-price{
    grid-column:3;
    justify-self:start;
  }

  .pick-source-title{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
}

@media (max-width:420px){
  .topbar{
    min-height:44px;
    padding:5px 8px;
  }

  .brand .mark{
    width:28px;
    height:28px;
  }

  .brand h1{
    font-size:var(--text-17);
  }

  .settings-btn{
    width:32px;
    height:32px;
    min-height:32px;
  }

  .provider-stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .tabs{
    gap:5px;
    padding-left:7px;
    padding-right:7px;
  }

  .tab{
    min-height:41px;
  }

  .tab::after{
    font-size:var(--text-2xs);
  }
}