/* Global mobile/responsive hardening */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.app-body {
  overflow-x: clip;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(2, 6, 23, 0.55);
  z-index: 995;
  cursor: pointer;
}

.main-layout,
.content,
.dashboard-shell,
.card-xl,
.table-wrapper,
.table-responsive,
.table-card {
  min-width: 0;
}

.content {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

.fe-floating-action {
  bottom: calc(20px + env(safe-area-inset-bottom));
}

.menu-item.has-submenu > a {
  justify-content: space-between;
}

.menu-item.has-submenu > a .label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 1023px) {
  .menu-item .submenu-panel {
    display: none;
  }

  .menu-item.has-submenu.is-open .submenu-panel {
    display: block;
  }

  .menu-item .submenu-panel a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 42px;
    text-decoration: none;
    color: var(--sidebar-text-muted);
  }

  .menu-item .submenu-panel a:hover {
    color: var(--sidebar-text);
    background: rgba(15, 23, 42, 0.95);
  }

  .main-layout {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border, #cbd5e1);
    background: var(--surface, #fff);
  }

  .sidebar {
    width: min(86vw, 320px) !important;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    z-index: 1000 !important;
    overflow-x: hidden;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .topbar {
    min-height: 60px;
    padding: 8px 12px;
    gap: 8px;
  }

  .topbar-title {
    min-width: 0;
    font-size: 15px;
  }

  .topbar-right {
    gap: 8px;
  }

  .topbar-user {
    padding: 4px 6px;
    border-radius: 999px;
  }

  .topbar-user .user-meta {
    display: none !important;
  }

  .user-avatar {
    width: 34px;
    height: 34px;
  }

  .notif-toggle {
    width: 44px;
    height: 44px;
  }

  .notif-dropdown {
    position: fixed !important;
    right: 10px !important;
    left: 10px !important;
    top: 68px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, 560px);
  }

  .flash-messages {
    padding: 0 12px;
  }

  .page-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .btn {
    width: 100%;
  }

  .uf-filter-row {
    align-items: stretch;
  }

  .uf-filter-actions {
    width: 100%;
    margin-left: 0 !important;
  }

  .uf-filter-actions .btn {
    flex: 1;
  }

  .uf-filter-tabs a {
    min-height: 44px;
  }

  .table-wrapper {
    overflow-x: auto;
  }

  .modal {
    padding: 12px;
  }

  .modal-content {
    max-height: min(84vh, 780px);
    overflow-y: auto;
  }

  .fe-fab {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 767px) {
  .content {
    padding: 16px 12px calc(92px + env(safe-area-inset-bottom));
  }

  .btn,
  .btn-sm,
  .btn-lg {
    min-height: 44px;
  }

  .table-wrapper.table-responsive {
    display: none;
  }

  .responsive-data-list .mobile-list {
    display: block !important;
  }

  .mobile-card {
    border-radius: 14px;
    padding: 14px;
  }

  .mobile-card-actions .btn {
    width: 100%;
  }
}