/* Layout System Utilities */
:root {
  --ng-layout-max-boxed: 1280px;
  --ng-layout-max-wide: 1480px;
  --ng-layout-gutter: clamp(16px, 2vw, 28px);
  --ng-sticky-offset: 88px;
  --ng-z-dropdown: 1060;
  --ng-z-sticky: 1070;
  --ng-z-modal: 1080;
  --ng-z-toast: 1090;
}

html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

.ng-page {
  width: 100%;
}

.ng-layout {
  width: 100%;
  min-width: 0;
}

.ng-layout--boxed,
.ng-layout-boxed {
  padding-inline: var(--ng-layout-gutter);
}

.ng-layout--full,
.ng-layout-full {
  padding-inline: 0;
}

.ng-container {
  width: min(100%, 100vw);
  min-width: 0;
  margin-inline: auto;
}

.ng-container--boxed {
  max-width: var(--ng-layout-max-boxed);
}

.ng-container--wide {
  max-width: var(--ng-layout-max-wide);
}

.ng-container--full {
  max-width: none;
  width: 100%;
}

.ng-section,
.ng-card,
.ng-form,
.ng-dashboard,
.ng-calendar {
  min-width: 0;
}

.ng-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.ng-grid > * {
  min-width: 0;
}

.ng-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ng-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.ng-form input,
.ng-form select,
.ng-form textarea,
.ng-form button {
  max-width: 100%;
}

.ng-form button,
.ng-calendar .ngc-slot__cta,
.ng-dashboard a[role="button"],
.ng-dashboard button {
  min-height: 44px;
}

.ng-dashboard {
  width: 100%;
  overflow: visible;
}

.ng-dashboard__inner {
  width: min(100%, 100vw);
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--ng-layout-gutter);
}

.ng-calendar,
.ngc-tutor-calendar {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.ngc-tutor-calendar__slots {
  width: 100%;
}

.ngc-slot {
  min-width: 0;
}

.site-main,
.bi-theme-content,
.bi-builder-content,
.bi-builder-article {
  min-width: 100%;
  max-width: 100%;
}

body.admin-bar .ngt-nav,
body.admin-bar .ngt-nav--transparent,
body.admin-bar .ngt-nav--minimal {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .ngt-nav,
  body.admin-bar .ngt-nav--transparent,
  body.admin-bar .ngt-nav--minimal {
    top: 46px;
  }
}

[aria-expanded="true"] + .dropdown-menu,
.dropdown-menu[aria-hidden="false"] {
  z-index: var(--ng-z-dropdown);
}

.modal,
[role="dialog"] {
  z-index: var(--ng-z-modal);
  max-width: min(96vw, 960px);
  max-height: min(92vh, 960px);
}

.toast,
.woocommerce-notices-wrapper {
  z-index: var(--ng-z-toast);
}

.bi-page-builder-active .bi-dashboard-rest,
.bi-page-builder-active .ngc-tutor-calendar,
.bi-page-builder-active .ngc-form {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.bi-wpbakery-page .vc_row[data-vc-full-width],
.bi-wpbakery-page .vc_row.vc_row-fluid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.bi-elementor-page .elementor-section-wrap,
.bi-elementor-page .elementor-widget-wrap {
  min-width: 0;
}

.bi-elementor-canvas .ng-layout,
.bi-elementor-canvas .ng-container {
  padding-inline: 0;
  max-width: 100%;
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

/* Admin-only debug mode */
body.ng-layout-debug * {
  outline: 1px dashed rgba(0, 102, 204, 0.25);
}

body.ng-layout-debug [data-ng-overflow="1"] {
  outline: 2px solid #ef4444 !important;
}

body.ng-layout-debug [data-ng-hidden-control="1"] {
  outline: 2px solid #f59e0b !important;
}

#ng-layout-debug-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1100;
  background: #111827;
  color: #f9fafb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  max-width: 320px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

@media (max-width: 1024px) {
  .ng-grid {
    grid-template-columns: 1fr;
  }

  .ng-layout--boxed,
  .ng-layout-boxed,
  .ng-dashboard__inner {
    padding-inline: 14px;
  }

  #ng-layout-debug-panel {
    left: 10px;
    right: 10px;
    max-width: none;
  }
}