/* Laravel layout guard: page styles can paint content, but this file owns the shell. */
.app {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  width: 100% !important;
}

.sidebar {
  position: sticky !important;
  top: 0 !important;
  width: auto !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

main {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.brand {
  flex: 0 0 auto !important;
}

.nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.nav a {
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  .app {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  .sidebar {
    align-items: center !important;
    padding: 20px 12px !important;
  }

  .brand {
    justify-content: center !important;
    padding: 0 !important;
  }

  .brand div:not(.brand-mark),
  .nav span,
  .help,
  .copyright,
  .nav .count {
    display: none !important;
  }

  .nav a {
    width: 50px !important;
    height: 50px !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .nav-logout button {
    width: 50px !important;
    height: 50px !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}

@media (max-width: 1100px) {
  .app {
    display: block !important;
    grid-template-columns: none !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    justify-content: center !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 -14px 34px rgba(2, 17, 31, .2) !important;
  }

  .brand div:not(.brand-mark),
  .brand,
  .nav span,
  .help,
  .copyright,
  .nav .count {
    display: none !important;
  }

  .nav {
    width: 100% !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    margin-top: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav::-webkit-scrollbar {
    display: none !important;
  }

  .nav a {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .nav-logout button {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  main {
    padding: 12px !important;
    overflow: visible !important;
  }

  .topbar {
    display: grid !important;
    align-items: start !important;
    gap: 12px !important;
  }

  .title-row {
    display: grid !important;
    gap: 6px !important;
    align-items: start !important;
  }

  .title-row h1,
  h1 {
    font-size: 22px !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }

  .title-row p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .top-actions,
  .actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .tenant-switcher {
    flex: 1 1 180px !important;
    min-width: 0 !important;
  }

  .tenant-switcher select {
    max-width: 100% !important;
  }

  .account {
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--panel) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .account .avatar {
    flex: 0 0 auto !important;
  }

  .card {
    box-shadow: 0 8px 22px rgba(16, 32, 51, .06) !important;
    min-width: 0 !important;
  }

  .layout,
  .grid,
  .dashboard-grid,
  .detail-grid,
  .user-detail-grid,
  .profile-grid,
  .settings-grid,
  .operations,
  .stats,
  .stat-grid,
  .metrics,
  .right,
  .left,
  .filters,
  .toolbar,
  .form-grid,
  .service-options,
  .document-orders,
  .ship-meta,
  .shipment-meta,
  .metric-strip,
  .quote-hero,
  .shipment,
  .shipment-head,
  .shipment-top,
  .hero-card,
  .profile-card,
  .user-toolbar form {
    grid-template-columns: 1fr !important;
  }

  .right,
  .left {
    width: 100% !important;
  }

  .filters,
  .toolbar,
  .user-toolbar {
    padding: 12px !important;
  }

  .table-wrap {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    min-width: 760px !important;
  }

  th,
  td {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .table-footer,
  .pagination-row,
  .detail-heading,
  .form-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .primary,
  .primary-action,
  .primary-btn,
  .outline-button,
  .filter-btn,
  .icon-btn,
  .danger-button {
    min-width: 0 !important;
    white-space: normal !important;
  }

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

  p,
  span,
  strong,
  small,
  dd,
  dt,
  label,
  a,
  button {
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 560px) {
  main {
    padding: 10px !important;
  }

  .top-actions > *,
  .actions > *,
  .form-actions > * {
    flex: 1 1 auto !important;
  }

  .theme-toggle,
  .bell,
  .icon-btn {
    flex: 0 0 40px !important;
  }

  .language-switch {
    flex: 0 0 auto !important;
  }

  .account {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }

  .dashboard-account {
    display: none !important;
  }

  .primary-btn {
    flex: 1 1 132px !important;
    min-height: 40px !important;
    justify-content: center !important;
    padding-inline: 10px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .nav a,
  .nav-logout button {
    width: 48px !important;
    min-width: 48px !important;
  }

  table {
    min-width: 700px !important;
  }
}