/* ABOTRIX V26.1.3 — verified shell alignment and responsive layout
   Uses the application's existing navigation and click handlers. */

:root {
  --abotrix-sidebar-desktop: 250px;
  --abotrix-sidebar-tablet: 210px;
  --abotrix-content-gap: 20px;
}

/* Desktop: one grid, no double offset, no artificial gutter. */
@media (min-width: 1101px) {
  body.abotrix-authenticated #appView {
    display: grid !important;
    grid-template-columns: var(--abotrix-sidebar-desktop) minmax(0, 1fr) !important;
    align-items: start !important;
    min-height: 100vh !important;
  }

  body.abotrix-authenticated #appView > aside,
  body.abotrix-authenticated #appView > aside.v12-sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    grid-column: 1 !important;
    width: var(--abotrix-sidebar-desktop) !important;
    min-width: var(--abotrix-sidebar-desktop) !important;
    max-width: var(--abotrix-sidebar-desktop) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 50 !important;
  }

  body.abotrix-authenticated #appView > main,
  body.abotrix-v12-ui #appView > main {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 24px 40px !important;
    overflow-x: clip !important;
  }
}

/* Tablet: compact sidebar and fluid content. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.abotrix-authenticated #appView {
    display: grid !important;
    grid-template-columns: var(--abotrix-sidebar-tablet) minmax(0, 1fr) !important;
    min-height: 100vh !important;
  }

  body.abotrix-authenticated #appView > aside,
  body.abotrix-authenticated #appView > aside.v12-sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    grid-column: 1 !important;
    width: var(--abotrix-sidebar-tablet) !important;
    min-width: var(--abotrix-sidebar-tablet) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.abotrix-authenticated #appView > main,
  body.abotrix-v12-ui #appView > main {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 18px 34px !important;
    overflow-x: clip !important;
  }

  body.abotrix-v12-ui .v12-sidebar .brand img {
    max-width: 150px !important;
  }

  body.abotrix-v12-ui #nav .v12-nav-item {
    padding-inline: 10px !important;
    font-size: 12px !important;
  }
}

/* Mobile: stacked shell with horizontal, clickable navigation. */
@media (max-width: 760px) {
  body.abotrix-authenticated #appView {
    display: block !important;
    min-height: 100vh !important;
  }

  body.abotrix-authenticated #appView > aside,
  body.abotrix-authenticated #appView > aside.v12-sidebar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  body.abotrix-v12-ui .v12-sidebar .brand {
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
  }

  body.abotrix-v12-ui .v12-sidebar .brand img {
    width: 128px !important;
    max-width: 128px !important;
    max-height: 42px !important;
  }

  body.abotrix-v12-ui #nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 7px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  body.abotrix-v12-ui #nav .v12-nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 42px !important;
    white-space: nowrap !important;
  }

  body.abotrix-v12-ui .v12-sidebar .logout {
    margin-top: 10px !important;
  }

  body.abotrix-authenticated #appView > main,
  body.abotrix-v12-ui #appView > main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-x: clip !important;
  }

  #content,
  #content > *,
  .inv-shell,
  .inv-workspace {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .inv-tabs,
  .restaurant-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .inv-tabs > *,
  .restaurant-toolbar > * {
    flex: 0 0 auto !important;
  }
}

/* Keep command groups balanced and prevent the large empty center gap. */
.inv-command-bar {
  gap: 10px !important;
}

.inv-command-bar > div {
  gap: 8px !important;
}

@media (min-width: 851px) {
  .inv-command-bar > div:first-child {
    flex: 1 1 auto !important;
  }

  .inv-command-bar > div:last-child {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}