/**
 * Supreme ERP — full-width layout on phones, tablets, and Supreme mobile app WebView.
 * Loaded after styles.css. Does not change desktop browsers at 1300px+ unless
 * html.supreme-in-app-browser is set (Supreme Android/iOS app).
 */

/* ── Phones & tablets (< 1300px): theme horizontal layout uses full width ── */
@media (max-width: 1299.98px) {
  html[data-layout="horizontal"] .topbar,
  html[data-layout="horizontal"] .app-header,
  html[data-layout="horizontal"] .app-header .navbar,
  html[data-layout="horizontal"] .left-sidebar,
  html[data-layout="horizontal"] .left-sidebar .scroll-sidebar,
  html[data-layout="horizontal"] .body-wrapper > .container-fluid,
  html[data-layout="horizontal"] .body-wrapper > .container-sm,
  html[data-layout="horizontal"] .body-wrapper > .container-md,
  html[data-layout="horizontal"] .body-wrapper > .container-lg,
  html[data-layout="horizontal"] .body-wrapper > .container-xl,
  html[data-layout="horizontal"] .body-wrapper > .container-xxl,
  html[data-boxed-layout="boxed"] .container-fluid,
  html[data-boxed-layout="boxed"] .container-sm,
  html[data-boxed-layout="boxed"] .container-md,
  html[data-boxed-layout="boxed"] .container-lg,
  html[data-boxed-layout="boxed"] .container-xl,
  html[data-boxed-layout="boxed"] .container-xxl {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-wrapper .body-wrapper > .container-fluid,
  .page-wrapper .body-wrapper > .container-sm,
  .page-wrapper .body-wrapper > .container-md,
  .page-wrapper .body-wrapper > .container-lg,
  .page-wrapper .body-wrapper > .container-xl,
  .page-wrapper .body-wrapper > .container-xxl {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html[data-layout="horizontal"] .body-wrapper > .container-fluid,
  html[data-layout="horizontal"] .body-wrapper > .container-sm,
  html[data-layout="horizontal"] .body-wrapper > .container-md,
  html[data-layout="horizontal"] .body-wrapper > .container-lg,
  html[data-layout="horizontal"] .body-wrapper > .container-xl,
  html[data-layout="horizontal"] .body-wrapper > .container-xxl {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ── Supreme mobile app WebView (class set by app) — all viewport widths ── */
html.supreme-in-app-browser[data-layout="horizontal"] .topbar,
html.supreme-in-app-browser[data-layout="horizontal"] .app-header,
html.supreme-in-app-browser[data-layout="horizontal"] .app-header .navbar,
html.supreme-in-app-browser[data-layout="horizontal"] .left-sidebar,
html.supreme-in-app-browser[data-layout="horizontal"] .left-sidebar .scroll-sidebar,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-fluid,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-sm,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-md,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-lg,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-xl,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-xxl,
html.supreme-in-app-browser[data-boxed-layout="boxed"] .container-fluid,
html.supreme-in-app-browser[data-boxed-layout="boxed"] .container-sm,
html.supreme-in-app-browser[data-boxed-layout="boxed"] .container-md,
html.supreme-in-app-browser[data-boxed-layout="boxed"] .container-lg,
html.supreme-in-app-browser[data-boxed-layout="boxed"] .container-xl,
html.supreme-in-app-browser[data-boxed-layout="boxed"] .container-xxl {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html.supreme-in-app-browser .preloader img {
  max-width: min(220px, 72vw) !important;
  width: auto !important;
  height: auto !important;
}

html.supreme-in-app-browser .preloader {
  background: #fff !important;
}

html.supreme-in-app-browser .page-wrapper .body-wrapper > .container-fluid,
html.supreme-in-app-browser .page-wrapper .body-wrapper > .container-sm,
html.supreme-in-app-browser .page-wrapper .body-wrapper > .container-md,
html.supreme-in-app-browser .page-wrapper .body-wrapper > .container-lg,
html.supreme-in-app-browser .page-wrapper .body-wrapper > .container-xl,
html.supreme-in-app-browser .page-wrapper .body-wrapper > .container-xxl,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-fluid,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-sm,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-md,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-lg,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-xl,
html.supreme-in-app-browser[data-layout="horizontal"] .body-wrapper > .container-xxl {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

html.supreme-in-app-browser #main-wrapper,
html.supreme-in-app-browser .page-wrapper,
html.supreme-in-app-browser .body-wrapper {
  max-width: 100% !important;
  width: 100% !important;
}