/* Mobile navigation and layouts. Desktop and printed documents keep their layout. */
#sidebar .sidebar-close, .sidebar-backdrop { display: none; }
#page, main .row > *, main .card, .user-name { min-width: 0; }
.user-menu { display: inline-flex; align-items: center; max-width: 100%; }
.user-menu .avatar { flex-shrink: 0; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main dd, main .alert { overflow-wrap: anywhere; }
@media screen and (max-width: 900px) {
  #sidebar { width: min(290px, calc(100vw - 48px)); transform: translateX(-100%); visibility: hidden; height: 100dvh; transition: transform .2s ease; }
  body:not(.sidebar-collapsed) #sidebar, body.sidebar-collapsed #sidebar { transform: translateX(-100%); }
  body.sidebar-open #sidebar { transform: translateX(0); visibility: visible; }
  #page, body.sidebar-collapsed #page { margin-left: 0; }
  body.sidebar-open { overflow: hidden; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); border: 0; padding: 0; z-index: 1025; }
  body.sidebar-open .sidebar-backdrop { display: block; }
  #sidebar .sidebar-close { display: grid; place-items: center; position: absolute; top: 20px; right: 8px; width: 44px; height: 44px; color: white; background: transparent; border: 0; border-radius: 8px; }
  #sidebar .brand { padding-right: 56px; }
  #sidebar .brand img { max-width: 100%; }
  #sidebar nav { padding-bottom: max(18px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  #sidebar nav a { min-height: 48px; }
  #menuButton { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  #page > header { height: 64px; padding: 0 12px; gap: 8px; }
  #page > header .dropdown { min-width: 0; max-width: calc(100% - 52px); }
  #page > header .user-menu { min-height: 44px; }
  main.container-fluid.p-4 { padding: 16px !important; }
  main > .d-flex.justify-content-between { flex-wrap: wrap; gap: 16px; }
  main > .d-flex.justify-content-between > .d-flex { flex-wrap: wrap; gap: 8px; }
  main .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  main .nav-tabs > li { flex-shrink: 0; }
  main .nav-tabs .nav-link { min-height: 44px; white-space: nowrap; }
  main .table-responsive { overscroll-behavior-x: contain; }
  main .table-responsive:focus-visible { outline: 2px solid var(--lezitech-dark); outline-offset: 2px; }
  main .btn, main .form-control, main .form-select { min-height: 44px; }
  main .form-control, main .form-select { font-size: 16px; }
  main .form-control[style*="min-width"], main .form-select[style*="min-width"] { min-width: 0 !important; max-width: 100%; }
  main textarea.form-control { min-height: 88px; }
}
@media screen and (max-width: 575px) {
  main.container-fluid.p-4 { padding: 12px !important; }
  main .card.p-4 { padding: 16px !important; }
  .login-panel.p-5 { padding: 24px !important; }
  .page-title { font-size: 1.35rem; }
  main .wizard-step { flex: 1 1 0; flex-direction: column; gap: 6px; text-align: center; font-size: .8rem; min-width: 0; }
  main .wizard-step .dot { flex-shrink: 0; }
  main .wizard-step > span:last-child { overflow-wrap: anywhere; }
  main form.d-flex { flex-wrap: wrap; row-gap: 8px; }
  main form.d-flex .form-select { flex: 1 1 140px; width: auto; min-width: 0; }
  main .card-header.d-flex { flex-wrap: wrap; gap: 8px; }
  main .card .d-flex:has(> .page-title) { flex-wrap: wrap; }
  main .table > :not(caption) > * > * { padding: .65rem; }
}
@media (prefers-reduced-motion: reduce) { #sidebar, #page { transition: none; } }