/* BillionMail admin: phone-friendly overrides. Injected by nginx (mail.themainsmm.com) via sub_filter.
   Upstream UI is desktop-only (body min-width 1100px). Everything here is scoped to <=768px, desktop untouched. */
@media (max-width: 768px) {
  body { min-width: 0 !important; }

  /* sidebar -> slide-in drawer. App's own collapse toggle (header hamburger) opens/closes it. */
  aside.n-layout-sider { position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 3000; overflow: visible !important; box-shadow: 4px 0 18px rgba(0,0,0,.18); transition: transform .25s ease; -webkit-transition: -webkit-transform .25s ease; }
  aside.n-layout-sider.n-layout-sider--collapsed { transform: translateX(-100%); -webkit-transform: translateX(-100%); box-shadow: none; }
  /* backdrop lives INSIDE the sider (absolute, to its right) so no stacking-context / iOS-WebKit quirk can put it over the menu.
     A tap on it targets the <aside> itself, which bm-mobile.js treats as "close". */
  aside.n-layout-sider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background: rgba(0,0,0,.35); cursor: pointer; pointer-events: auto; }
  aside.n-layout-sider.n-layout-sider--collapsed::before { display: none; }

  /* header: keep hamburger + icons, drop "Submit a Request" */
  .n-layout-header .header-left > .n-button:nth-child(n+2) { display: none !important; }

  /* page padding */
  .n-layout-content, .n-layout-scroll-container > div[class*="p-"], .n-layout-scroll-container > div[class*="px-"] { padding-left: 12px !important; padding-right: 12px !important; }

  /* any row holding 2+ cards becomes a column (stat tiles, chart rows) */
  [class]:has(> .n-card + .n-card) { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .n-card { min-width: 0 !important; width: 100% !important; flex: 1 1 100% !important; }
  .metrics-cards, .detail-row, .charts-row, .rate-cards { flex-direction: column !important; }
  .date-filters, .filter-bar, .toolbar, .n-layout-scroll-container .flex.justify-between:not([class*="n-"]) { flex-wrap: wrap !important; gap: 8px !important; row-gap: 8px !important; }
  .n-layout-scroll-container [class*="grid-cols-"] { grid-template-columns: 1fr !important; }
  .n-layout-scroll-container [class*="w-"][class*="00"] { max-width: 100% !important; }

  /* tables: natural width + horizontal scroll instead of one-letter-per-line columns */
  .n-data-table .n-data-table-table { table-layout: auto !important; width: max-content !important; min-width: 100% !important; }
  .n-data-table th, .n-data-table td { white-space: nowrap !important; }
  .n-data-table-wrapper, .n-data-table-base-table, .n-data-table-base-table-header, .n-data-table-base-table-body { overflow-x: auto !important; }
  .n-pagination { flex-wrap: wrap !important; row-gap: 8px !important; }

  /* forms, modals, drawers */
  .n-form-item, .n-input, .n-select, .n-date-picker, .n-input-number { max-width: 100% !important; }
  .n-form.n-form--inline .n-form-item { width: 100% !important; }
  .n-modal, .n-modal.n-card, .n-dialog { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; margin: 10px auto !important; }
  .n-drawer, .n-drawer.n-drawer--right-placement, .n-drawer.n-drawer--left-placement { width: 100vw !important; max-width: 100vw !important; }

  /* two-pane settings pages (e.g. Settings > AI Model: provider list | config form) */
  .manager-wrapper, [class*="manager-wrapper"], [class*="two-column"], [class*="split-pane"] { grid-template-columns: 1fr !important; display: grid !important; }
  .right-configuration, .left-list, .center-api { width: 100% !important; min-width: 0 !important; }
  .n-tabs .n-tabs-nav-scroll-content { overflow-x: auto !important; }
  /* long-text buttons (e.g. SMTP page banner button) wrap instead of overflowing */
  .n-layout-scroll-container .n-button { max-width: 100% !important; height: auto !important; min-height: 34px; }
  .n-layout-scroll-container .n-button .n-button__content { white-space: normal !important; text-align: left; }
  .n-page-header, .page-header { flex-wrap: wrap !important; gap: 8px !important; }
  h1, .text-2xl, .text-xl { font-size: 18px !important; }
}