/*
 * Visual-V CP - Mobile Basic Safe
 * Ausschliesslich fuer kleinere Viewports. Desktop >= 981px bleibt unangetastet.
 */
@media (max-width: 980px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body, .app-shell, .content, main, .page, .page-content {
    min-width: 0 !important;
  }

  .app-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh !important;
  }

  /* Sidebar bleibt funktional, nimmt mobil aber nicht die ganze Seite ein. */
  .sidebar,
  html[data-theme] .sidebar,
  html[data-theme="halloween"] .sidebar {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px !important;
    overflow: visible !important;
  }

  .sidebar-scroll,
  html[data-theme] .sidebar-scroll,
  html[data-theme="halloween"] .sidebar-scroll {
    width: 100% !important;
    min-height: 0 !important;
    max-height: 46dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
    overscroll-behavior: contain;
  }

  .sidebar-footer,
  html[data-theme] .sidebar-footer,
  html[data-theme="halloween"] .sidebar-footer {
    position: static !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  .content,
  html[data-theme] .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  .page-header,
  .section-title,
  .panel-head,
  .card-head,
  .toolbar,
  .filterbar,
  .filters,
  .actions,
  .form-actions {
    max-width: 100% !important;
  }

  /* Allgemeine Grids auf eine sichere mobile Spalte reduzieren. */
  .grid,
  .two-col,
  .three-col,
  .kpi-grid,
  .podium,
  .dashboard-grid,
  .dashboard-info-grid,
  .dashboard-license-grid,
  .stats-grid,
  .overview-grid,
  .family-grid,
  .storage-grid,
  .pd-options-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .grid > *,
  .two-col > *,
  .three-col > *,
  .kpi-grid > *,
  .dashboard-grid > *,
  .stats-grid > * {
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
  }

  /* Hero soll mobil nicht durch fixe Hoehen oder grosse Schrift sprengen. */
  .dashboard-hero,
  .dashboard-hero-modern,
  html[data-theme] body .dashboard-hero.dashboard-hero-modern {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 155px !important;
    height: auto !important;
    padding: 18px !important;
    gap: 14px !important;
  }

  .dashboard-hero-modern h2 {
    font-size: clamp(1.65rem, 7vw, 2rem) !important;
    line-height: 1.08 !important;
  }

  .dashboard-hero-copy,
  .dashboard-datetime {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .dashboard-hero-modern .dashboard-datetime {
    width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  /* Formulare duerfen den Viewport nicht verbreitern. */
  form,
  fieldset,
  .field,
  .inline-form,
  .form-grid,
  .filter-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .inline-form {
    align-items: stretch !important;
  }

  .inline-form .field {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Tabs bleiben horizontal erreichbar statt unschoen zu umbrechen. */
  .tabs,
  .dashboard-tabs,
  .biz-modal-tabs,
  .inventory-tabs,
  .storage-tabs,
  .admin-tabs,
  .subtabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .tabs > *,
  .dashboard-tabs > *,
  .biz-modal-tabs > *,
  .inventory-tabs > *,
  .storage-tabs > *,
  .admin-tabs > *,
  .subtabs > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Tabellen: keine Logik aendern, nur sicheren horizontalen Scroll erlauben. */
  .table-wrap,
  .table-scroll,
  .pd-table-scroll,
  .lb-table-wrap,
  .market-table-wrap,
  .logs-table-wrap,
  .admin-table-wrap,
  .faction-members-table-wrap,
  .responsive-table,
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table,
  .table-scroll table,
  .pd-table-scroll table,
  .lb-table-wrap table,
  .market-table-wrap table,
  .logs-table-wrap table,
  .admin-table-wrap table,
  .faction-members-table-wrap table,
  .responsive-table table,
  .table-responsive table {
    width: max-content !important;
    min-width: 100% !important;
  }

  th, td {
    overflow-wrap: anywhere;
  }

  /* Karten und Medien nie breiter als der Bildschirm. */
  .card,
  .panel,
  .dashboard-card,
  .metric-card,
  .kpi-box,
  .vehicle-card,
  .rare-card,
  .market-card,
  .family-vehicle-card,
  .storage-frame,
  .inv-frame,
  .inventory-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

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

  /* Modals bleiben innerhalb des sichtbaren Bereichs und scrollbar. */
  .modal,
  .vehicle-modal,
  .biz-modal,
  .house-modal,
  .family-vehicle-modal {
    padding: 10px !important;
    overflow-y: auto !important;
  }

  .modal-content,
  .vehicle-modal-panel,
  .biz-modal-panel,
  .house-modal-panel,
  .family-vehicle-modal-box,
  [class*="modal-card"],
  [class*="modal-box"],
  [class*="modal-panel"] {
    width: min(100%, 760px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Inventar: genug Platz zum Tippen, ohne den Desktop anzufassen. */
  .inventory-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .inventory-grid-slots,
  .inv-storage-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .site-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 560px) {
  .content {
    padding: 12px !important;
  }

  .sidebar {
    padding: 12px !important;
  }

  .sidebar-scroll {
    max-height: 42dvh !important;
  }

  .inventory-grid-slots,
  .inv-storage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dashboard-hero,
  .dashboard-hero-modern,
  html[data-theme] body .dashboard-hero.dashboard-hero-modern {
    padding: 15px !important;
  }
}

@media (max-width: 390px) {
  .inventory-grid-slots,
  .inv-storage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile Off-Canvas Sidebar - nur <= 980px */
.mobile-sidebar-toggle,
.mobile-sidebar-overlay,
.mobile-sidebar-close { display:none; }

@media (max-width:980px) {
  body.mobile-sidebar-open { overflow:hidden!important; }

  .mobile-sidebar-toggle {
    display:grid!important; place-items:center;
    position:fixed; left:12px; top:12px; z-index:10030;
    width:46px!important; height:46px!important; min-width:46px!important;
    padding:0!important; margin:0!important;
    border-radius:13px; border:1px solid var(--theme-border,rgba(255,255,255,.13));
    background:rgba(8,14,21,.92); color:var(--theme-text,#f4f7fb);
    box-shadow:0 10px 28px rgba(0,0,0,.28); backdrop-filter:blur(12px);
    cursor:pointer;
  }
  .mobile-sidebar-toggle-icon { font-size:1.25rem; line-height:1; }

  .mobile-sidebar-overlay {
    display:block!important; position:fixed; inset:0; z-index:10010;
    width:100vw; height:100dvh; padding:0; margin:0; border:0; border-radius:0;
    background:rgba(2,5,9,.64); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease;
  }
  .mobile-sidebar-overlay.mobile-open { opacity:1; visibility:visible; pointer-events:auto; }

  .sidebar,
  html[data-theme] .sidebar,
  html[data-theme="halloween"] .sidebar {
    display:flex!important; position:fixed!important; left:0!important; top:0!important;
    z-index:10020!important; width:min(310px,86vw)!important; max-width:310px!important;
    height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important;
    padding:14px 12px 12px!important; margin:0!important; flex-direction:column!important;
    overflow:hidden!important; transform:translate3d(-105%,0,0);
    transition:transform .24s ease; box-shadow:22px 0 50px rgba(0,0,0,.34);
  }
  .sidebar.mobile-open { transform:translate3d(0,0,0); }

  .mobile-sidebar-close {
    display:grid!important; place-items:center; position:absolute; right:12px; top:12px; z-index:8;
    width:38px; height:38px; padding:0; border-radius:11px;
    border:1px solid var(--theme-border,rgba(255,255,255,.10));
    background:rgba(255,255,255,.055); color:var(--theme-text,#f4f7fb);
    font:inherit; font-size:1rem; cursor:pointer;
  }
  .sidebar>.sidebar-scroll,.sidebar.mobile-open>.sidebar-scroll {
    display:block!important; flex:1 1 0%!important; min-height:0!important; max-height:none!important;
    overflow-y:auto!important; overflow-x:hidden!important; margin:0!important; padding-right:4px!important;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar>.sidebar-footer,.sidebar.mobile-open>.sidebar-footer {
    display:block!important; flex:0 0 auto!important; margin-top:8px!important;
  }
  .sidebar .brand { padding-right:46px!important; }
  .content { padding-top:68px!important; }

  .dashboard-hero,.dashboard-hero-modern,html[data-theme] body .dashboard-hero.dashboard-hero-modern {
    min-height:0!important; padding:17px!important; gap:14px!important;
  }
  .dashboard-hero-modern h2 { font-size:clamp(1.65rem,7vw,2rem)!important; }
  .dashboard-hero-modern .dashboard-datetime {
    width:100%!important; min-width:0!important; align-self:stretch!important; box-sizing:border-box!important;
  }
  button,.btn,.button,input[type="submit"],input[type="button"],.nav-link { min-height:42px; }

  html[data-theme="halloween"] .mobile-sidebar-toggle {
    border-color:rgba(255,116,31,.34); background:rgba(20,10,6,.92); color:#ffb26e;
  }
  html[data-theme="halloween"] .mobile-sidebar-close {
    border-color:rgba(255,116,31,.26); color:#ffb26e;
  }
}

@media (max-width:560px) {
  .mobile-sidebar-toggle { left:10px; top:10px; width:44px!important; height:44px!important; }
  .content { padding-top:64px!important; }
}

@media (prefers-reduced-motion:reduce) and (max-width:980px) {
  .sidebar,.mobile-sidebar-overlay { transition:none!important; }
}

/* Drawer click/open state fix */
@media (max-width: 980px) {
  #cpSidebar,
  html[data-theme] #cpSidebar,
  html[data-theme="halloween"] #cpSidebar {
    transform: translate3d(-105%,0,0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #cpSidebar.mobile-open,
  html[data-theme] #cpSidebar.mobile-open,
  html[data-theme="halloween"] #cpSidebar.mobile-open,
  body.mobile-sidebar-open #cpSidebar {
    transform: translate3d(0,0,0) !important;
  }
  #mobileSidebarOverlay.mobile-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  #mobileSidebarToggle {
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}