/* Mobile sidebar as floating card - only sidebar toggle, everything else same as desktop */

@media (max-width: 992px) {
  /* Global scale down: fonts, spacing, tables, cards, inputs, buttons */
  html,
  body {
    font-size: 12px; /* 默认约 16px，压缩为 12px 左右 */
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
  h4,
  h5,
  h6 { font-size: 1rem; }

  .container-fluid,
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .card {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }

  .card-header,
  .card-body,
  .card-footer {
    padding: 0.5rem 0.75rem;
  }

  .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .form-control,
  .custom-select {
    height: 1.8rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
  }

  .input-group-text {
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
  }

  .table {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .table td,
  .table th {
    padding: 0.3rem 0.35rem;
    white-space: nowrap;
  }

  .pagination .page-link {
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
  }

  .badge {
    padding: 0.2em 0.45em;
    font-size: 0.7rem;
  }

  .navbar,
  .topbar {
    padding: 0.25rem 0.5rem;
  }

  /* Mobile sidebar overlay - click to close */
  .mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1030;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  body.mobile-sidebar-open .mobile-sidebar-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto; /* Allow clicks to close sidebar */
  }

  /* Make sidebar a floating card */
  #accordionSidebar.sidebar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90%;
    max-width: 320px;
    max-height: 85vh;
    z-index: 1031;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    min-height: auto;
    height: auto;
  }

  /* Show sidebar when not toggled */
  body:not(.sidebar-toggled) #accordionSidebar.sidebar {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  /* Hide sidebar when toggled */
  body.sidebar-toggled #accordionSidebar.sidebar {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.95);
  }

  /* Ensure all interactions work normally - don't interfere with Bootstrap */
  #accordionSidebar.sidebar .nav-link,
  #accordionSidebar.sidebar .collapse-item {
    pointer-events: auto;
    cursor: pointer;
  }

  /* Ensure collapse functionality works */
  #accordionSidebar.sidebar .collapse {
    position: relative;
    left: 0;
    top: 0;
    margin: 0 1rem;
    animation: none;
  }

  #accordionSidebar.sidebar .collapse-inner {
    border-radius: 0;
    box-shadow: none;
  }

  /* Ensure content-wrapper doesn't have left margin on mobile */
  #content-wrapper {
    margin-left: 0 !important;
  }

  /* Add toggle button in topbar for mobile */
  #sidebarToggleTop {
    display: block !important;
  }
}