/* Final responsive shell. It intentionally leaves desktop typography and table sizing untouched. */
:root {
  --app-viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root { --app-viewport-height: 100dvh; }
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: 100%;
  overflow: hidden;
}

.app,
.app.sidebar-collapsed,
main,
.workspace-shell,
.workspace-shell > .content,
.content > .view,
.view.active,
.cashbox-tab-content,
.module-tab-content,
.report-tab-content,
.table-host,
.erp-table-shell,
.operation-editor,
.operation-form {
  min-width: 0;
  min-height: 0;
}

.app,
.app.sidebar-collapsed,
main {
  height: var(--app-viewport-height);
  min-height: var(--app-viewport-height);
  max-height: var(--app-viewport-height);
}

.app { width: 100%; }
main { width: 100%; }

.workspace-shell {
  flex: 1 1 0;
  width: 100%;
  overflow: hidden;
}

.workspace-shell > .content {
  width: 100%;
  overflow: hidden;
}

.content > .view.active {
  max-width: 100%;
  overflow: hidden;
}

.view:not(#dashboard) .cashbox-tab-content,
.view:not(#dashboard) .module-tab-content,
#reports .report-tab-content,
.view:not(#dashboard) .table-host {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.erp-table-shell {
  max-width: 100%;
  overflow: hidden;
}

.erp-table-shell .table-fixed-head,
.erp-table-shell .table-fixed-foot {
  flex: 0 0 auto;
  overflow: hidden;
}

.erp-table-shell .table-body-scroll {
  min-height: 0;
  overscroll-behavior: contain;
}

.entity-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  text-underline-offset: 2px;
}

.entity-link:hover { color: #087f72; text-decoration: underline; }
.entity-link:focus-visible { border-radius: 2px; outline: 2px solid #0b9d8c; outline-offset: 2px; }

.route-empty-state {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}

.route-empty-state strong { color: #0b9d8c; font-size: 32px; line-height: 36px; }
.route-empty-state p { max-width: 380px; margin: 0; color: #5b6c70; line-height: 19px; }

/* Composite report pages scroll as one report sheet; ordinary record pages keep only the table body scrollable. */
#reports .report-tab-content,
#cashbox .cashbox-report-content {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 8px;
}

#reports .report-table {
  min-height: 220px;
  max-width: 100%;
  overflow: hidden;
}

#reports .report-table > .erp-table-shell,
#reports .report-table > .table-scroll {
  min-height: 180px;
  max-width: 100%;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app.sidebar-collapsed .nav-label {
  display: none;
}

.app.sidebar-collapsed .nav button {
  font-size: 0;
}

.app.sidebar-collapsed .nav .ico {
  width: 22px;
  min-width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

/* Tab rows remain inside the workspace at browser zoom levels above 100%. */
.module-tabs,
.cashbox-tabs,
.settings-tabs,
.customer-tabs {
  flex: 0 0 auto;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.module-tabs > button,
.cashbox-tabs > button,
.settings-tabs > button,
.customer-tabs > button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

.developer-tools-nav {
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.developer-tools-nav > button {
  white-space: nowrap;
}

.modal-backdrop,
.system-dialog-backdrop,
.auth-password-backdrop,
.connection-backdrop {
  max-width: 100vw;
  max-height: var(--app-viewport-height);
}

.modal,
.modal.entry-mode,
.system-dialog,
.auth-password-modal {
  min-width: 0;
  min-height: 0;
  max-height: calc(var(--app-viewport-height) - 32px);
}

.modal .body,
.modal.entry-mode .body,
.system-dialog-body,
.auth-password-form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal .footer,
.modal.entry-mode .footer,
.system-dialog-footer,
.info-drawer-footer,
.operation-modal-footer {
  flex: 0 0 auto;
}

@media (min-width: 901px) {
  .sidebar {
    position: relative;
    height: var(--app-viewport-height);
  }
}

@media (max-width: 900px) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    background: #24323a;
  }

  .app,
  .app.sidebar-collapsed,
  main {
    height: calc(var(--app-viewport-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    max-height: none;
  }

  .sidebar,
  .app.sidebar-collapsed .sidebar {
    top: env(safe-area-inset-top, 0px);
    bottom: env(safe-area-inset-bottom, 0px);
    height: auto;
    max-height: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .app.sidebar-collapsed .nav-label {
    display: inline;
  }

  .app.sidebar-collapsed .nav button {
    font-size: 13px;
  }

  .content,
  .workspace-shell > .content {
    min-height: 0;
  }

  .module-tabs,
  .cashbox-tabs,
  .settings-tabs,
  .customer-tabs,
  .developer-tools-nav,
  .module-filters {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .erp-table-shell .table-body-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .content > .view.active {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  #reports .report-tab-content,
  #cashbox .cashbox-report-content {
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }

  #reports .report-table {
    min-height: 260px;
    flex: 0 0 min(58vh, 480px);
  }

  #reports .report-table .table-fixed-head,
  #reports .report-table .table-fixed-foot,
  #reports .report-table .table-body-scroll,
  #cashbox .cashbox-report-content .table-fixed-head,
  #cashbox .cashbox-report-content .table-fixed-foot,
  #cashbox .cashbox-report-content .table-body-scroll {
    max-width: 100%;
  }

  .workspace-toolbar,
  .module-tabs,
  .cashbox-tabs,
  .settings-tabs,
  .customer-tabs {
    flex-shrink: 0;
  }

  .modal-backdrop {
    position: fixed;
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }

  .modal,
  .modal.entry-mode {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(var(--app-viewport-height) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .info-drawer.open,
  .info-drawer.sales-details.open {
    inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    width: auto !important;
    max-width: none !important;
    height: auto;
    max-height: none;
  }

  .info-drawer-inner,
  .info-drawer.sales-details .info-drawer-inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
  }

  .info-drawer-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .content.editor-mode .operation-editor {
    min-height: 0;
    overflow: hidden;
  }

  .operation-form {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .operation-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 520px) {
  .workspace-toolbar {
    min-width: 0;
  }

  .workspace-search.open {
    min-width: 0;
  }

  .modal .footer,
  .modal.entry-mode .footer {
    gap: 6px;
    padding: 8px;
  }

  .modal .footer .btn,
  .modal.entry-mode .footer .btn {
    flex: 1 1 auto;
    min-width: 92px;
  }
}

@media (max-height: 700px) {
  .modal,
  .modal.entry-mode,
  .system-dialog,
  .auth-password-modal {
    max-height: calc(var(--app-viewport-height) - 16px);
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
  .topbar {
    min-height: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .workspace-toolbar {
    margin-bottom: 4px;
  }

  .modal-backdrop { padding: 4px; }
  .modal,
  .modal.entry-mode { max-height: calc(var(--app-viewport-height) - 8px); }
}