/* public/site-css/mobile.css
   Mobile Optimierungen
   - Desktop bleibt unangetastet
   - Mobile: Icon-Rail links + ausklappbar
   - Kein horizontales Overflow / kein Zoom nötig
*/

@media (max-width: 900px) {

  /* ================================
     GLOBAL: Overflow-Killer
  ================================ */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ================================
     Sidebar Breiten (nur Mobile!)
  ================================ */
  :root {
    --sidebar-w: 240px;          /* expanded */
    --sidebar-w-collapsed: 80px; /* rail */
  }

  /* ================================
     CONTENT
  ================================ */
  .tbp-content {
    padding: 12px !important;
  }

  .tbp-content > .wrap,
  .tbp-content > .container,
  .wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box;
  }

  .card {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px !important;
  }

  /* ================================
     SIDEBAR: Fixiert links
  ================================ */
  .tbp-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 10 !important;
  }

  /* Wichtig: damit Flex-Layout sauber ist (Nav scrollt, Settings kleben unten) */
  .tbp-sidebar__inner {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Nav darf scrollen */
  .tbp-sidebar__nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ================================
     COLLAPSED (Icon-Rail)
  ================================ */

  /* Nur Icons, kein Text */
  .tbp-sidebar--collapsed .tbp-sidebar__link > span:not(.tbp-sidebar__icon),
  .tbp-sidebar--collapsed
    .tbp-sidebar__summary
    > span:not(.tbp-sidebar__icon):not(.tbp-sidebar__chevron),
  .tbp-sidebar--collapsed .tbp-sidebar__brand-text,
  .tbp-sidebar--collapsed .navSiteTitle {
    display: none !important;
  }

  /* Submenu & Chevron NUR im collapsed aus */
  .tbp-sidebar--collapsed .tbp-sidebar__submenu,
  .tbp-sidebar--collapsed .tbp-sidebar__chevron {
    display: none !important;
  }

  /* Userblock aus (spart Höhe) */
  .tbp-sidebar__user-block {
    display: none !important;
  }

  /* Header kompakt */
  .tbp-sidebar__header {
    padding: 12px !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  .navBrandLogo img {
    max-height: 42px !important;
  }

  /* Icons zentriert im Rail */
  .tbp-sidebar--collapsed .tbp-sidebar__link,
  .tbp-sidebar--collapsed .tbp-sidebar__summary {
    justify-content: center !important;
    padding: 14px 12px !important;
    gap: 0 !important;
  }

  .tbp-sidebar__icon {
    width: 20px !important;
    height: 20px !important;
  }

  .tbp-sidebar--collapsed .tbp-sidebar__icon {
    width: 24px !important;
    height: 24px !important;
    opacity: 0.95 !important;
  }

  /* ================================
     SETTINGS (Zahnrad) – IMMER SICHTBAR
     -> sticky bottom, damit es NIE verschwindet
  ================================ */

  .tbp-sidebar__settings {
    display: block !important;
    flex: 0 0 auto !important;

    position: sticky !important;
    bottom: 0 !important;

    /* kleines Backplate damit es im Verlauf nicht "verschwindet" */
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.25) 35%,
      rgba(0,0,0,0.40) 100%
    ) !important;

    padding: 10px 0 !important;
    margin-top: 0 !important;

    /* damit es über dem Nav-Scroll liegt */
    z-index: 2 !important;
  }

  /* Summary (Einstellungen) im Rail als Icon zentrieren */
  .tbp-sidebar--collapsed
    .tbp-sidebar__settings
    .tbp-sidebar__summary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 14px 12px !important;
    gap: 0 !important;
  }

  /* Text aus, Icon bleibt */
  .tbp-sidebar--collapsed
    .tbp-sidebar__settings
    .tbp-sidebar__summary
    > span {
    display: none !important;
  }

  /* Icon immer sichtbar (SVG mit .tbp-sidebar__icon ist vorhanden) */
  .tbp-sidebar--collapsed
    .tbp-sidebar__settings
    .tbp-sidebar__summary
    .tbp-sidebar__icon {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    opacity: 0.95 !important;
  }

  /* ================================
     FORMS
  ================================ */
  .row {
    flex-direction: column;
    align-items: stretch;
  }

  .row > input,
  .row > select,
  .row > textarea,
  .row > button {
    width: 100% !important;
  }

  label.mini {
    width: auto !important;
  }

  /* ================================
     TABLES – Scroll statt Zoom
  ================================ */
  table {
    width: 100% !important;
    max-width: 100% !important;
  }

  .card table {
    min-width: 680px;
  }

  th,
  td {
    white-space: nowrap;
    font-size: 12px;
  }

  .actions button,
  .actions .safeBTN,
  .actions .deleteBTN {
    padding: 8px 10px !important;
  }
}