/* Final responsive layout layer. Loaded after styles.css so legacy overrides
   cannot turn the register back into a single column. */
@media (min-width: 700px) {
  .app-shell {
    --sidebar-width: 280px;
    display: grid !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
    grid-template-rows: 28px 100px minmax(0, 1fr) !important;
    grid-template-areas: "promo promo" "topbar topbar" "sidebar content" !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .app-shell.sidebar-collapsed,
  body.sidebar-collapsed .app-shell { --sidebar-width: 76px; }

  .promo-bar { grid-area: promo !important; position: sticky !important; top: 0 !important; z-index: 40 !important; }
  .topbar { grid-area: topbar !important; position: sticky !important; top: 28px !important; z-index: 39 !important; width: auto !important; max-width: none !important; margin: 0 !important; }

  .app-sidebar {
    grid-area: sidebar !important;
    position: sticky !important;
    top: 128px !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 128px) !important;
    max-height: none !important;
    align-self: stretch !important;
    margin: 0 !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  .app-sidebar .sidebar-toggle {
    left: calc(var(--sidebar-width) - 21px) !important;
    right: auto !important;
    transition: left .25s ease !important;
  }

  .view.active {
    grid-area: content !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .view:not(.active) { display: none !important; }

  .view.active.register-layout,
  .view.active.overview-layout,
  .view.active.cash-layout,
  .view.active.shift-layout,
  .view.active.fulfillment-layout,
  .view.active.settings-layout,
  .view.active.release-layout {
    display: grid !important;
    padding: 50px 34px 0 24px !important;
  }

  .view.active.register-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 50px 34px 0 24px !important;
    box-sizing: border-box !important;
  }
  .register-layout > *,
  .register-layout .products-panel,
  .register-layout .receipt-panel { min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; }
  .register-layout .receipt-panel { position: sticky !important; top: 152px !important; right: auto !important; max-height: none !important; overflow: visible !important; }
  .register-layout .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .product-button { min-height: 124px !important; }

  .overview-layout, .cash-layout, .shift-layout, .fulfillment-layout, .settings-layout, .release-layout {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 50px 34px 0 24px !important;
    gap: 18px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 699px) {
  .app-shell { display: block !important; width: 100% !important; min-width: 0 !important; }
}

.audit-change-detail {
  color: #8ea0b6;
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 2px;
}