/* Sinapsi UI — shared app shell layout (SPC Console reference) */

.app-content,
.layout > .content,
.layout > section.content,
.spc-console-content,
.account-summary-content-slot > .content,
.billing-hub-content .billing-hub-shell {
  display: grid;
  gap: 20px;
  justify-items: center;
  width: 100%;
  min-width: 0;
}

.app-content > .panel,
.layout > .content > .panel,
.layout > section.content > .panel,
.spc-console-content > .panel,
.spc-console-content > .main-data-sections,
.spc-console-content .main-data-sections,
.account-summary-content-slot .panel,
.account-summary-content-slot .main-data-sections,
.account-summary-content-slot .security-sections,
.account-summary-content-slot .devices-sections,
.account-summary-content-slot .settings-sections,
.account-summary-content-slot > .content > *,
.layout > .content > .security-sections,
.layout > section.content > .security-sections,
.billing-hub-content .panel,
.billing-hub-shell > .panel,
.billing-hub-shell > section.panel {
  width: 100%;
  max-width: var(--account-content-max-width, 1100px);
}

.dbox-content {
  display: grid;
  gap: 20px;
  justify-items: center;
  width: 100%;
  min-width: 0;
}

.dbox-content > .panel,
.dbox-content > .dbox-panel {
  width: 100%;
  max-width: 1100px;
}

@media (min-width: 1121px) {
  body.account-summary-page .layout {
    grid-template-columns: 290px minmax(0, 1fr);
    position: relative;
  }

  html.app-sidebar-collapsed body.account-summary-page .layout {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body.account-summary-page .layout:has(.account-summary-guide-slot:not(:empty)) {
    grid-template-columns: 290px minmax(0, 1fr);
  }

  html.app-sidebar-collapsed body.account-summary-page .layout:has(.account-summary-guide-slot:not(:empty)) {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .account-summary-content-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--account-content-max-width, 1100px), 100%)) minmax(0, 1fr);
    align-items: start;
    width: 100%;
    min-width: 0;
    grid-column: 2;
  }

  .account-summary-content-slot > .content {
    grid-column: 2;
    width: 100%;
    max-width: var(--account-content-max-width, 1100px);
    margin-inline: 0;
    justify-self: center;
    justify-items: stretch;
    min-width: 0;
  }

  body.account-summary-page .account-summary-guide-slot:not(:empty) {
    position: absolute;
    top: 0;
    right: 0;
    width: 290px;
    grid-column: auto;
    z-index: 4;
    pointer-events: none;
  }

  body.account-summary-page .account-summary-guide-slot:not(:empty) .guide-sidebar.is-open {
    pointer-events: auto;
  }

  .account-summary-content-slot .panel,
  .account-summary-content-slot .main-data-sections,
  .account-summary-content-slot .security-sections,
  .account-summary-content-slot .devices-sections,
  .account-summary-content-slot .settings-sections,
  .account-summary-content-slot > .content > * {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 1120px) {
  .layout > .sidebar,
  .layout > aside.sidebar {
    display: none !important;
  }

  .layout,
  .layout:has(.account-summary-guide-slot:not(:empty)) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .layout > .content,
  .layout > section.content,
  .account-summary-content-slot,
  .billing-hub-content {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .account-summary-guide-slot {
    display: none !important;
  }

  .account-summary-content-slot {
    display: block;
    grid-template-columns: none;
  }

  body.account-summary-page .account-summary-guide-slot:not(:empty) {
    position: static;
    width: 100%;
    pointer-events: auto;
  }

  .account-summary-content-slot > .content,
  .layout > .content,
  .layout > section.content,
  .billing-hub-content .billing-hub-shell {
    justify-items: stretch;
  }

  .account-summary-content-slot .panel,
  .account-summary-content-slot .main-data-sections,
  .account-summary-content-slot .security-sections,
  .account-summary-content-slot .devices-sections,
  .account-summary-content-slot .settings-sections,
  .account-summary-content-slot > .content > *,
  .layout > .content > .security-sections,
  .layout > section.content > .security-sections,
  .layout > .content > .panel,
  .layout > section.content > .panel,
  .spc-console-content > .main-data-sections,
  .spc-console-content .main-data-sections {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  .layout,
  .layout:has(.account-summary-guide-slot:not(:empty)),
  .account-summary-content-slot,
  .billing-hub-content,
  .app-content,
  .layout > .content,
  .layout > section.content,
  .account-summary-content-slot > .content,
  .spc-console-content,
  .dbox-shell {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  .panel,
  .account-summary-content-slot .panel,
  .main-data-sections,
  .main-data-panel,
  .security-sections,
  .devices-sections,
  .settings-sections,
  .security-sessions-panel {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .spc-console-panel-body,
  .panel-heading + .admin-panel-body,
  .billing-hub-panel,
  .billing-hub-inner-panel {
    box-sizing: border-box;
  }
}

@media (max-width: 1120px) {
  .mobile-menu-toggle {
    display: flex;
  }
}

@media (min-width: 1121px) {
  .mobile-menu-toggle,
  #mobile-menu-overlay,
  .mobile-menu-overlay {
    display: none !important;
  }
}