/*
  VHW mobile.css
  Wersja uporządkowana:
  - zachowuje działający header mobile
  - menu Objekt na mobile = 2 kolumny
  - dropdowny Objekt nad kartami
  - modale / popupy zawsze nad header i footer
  - usuwa agresywne reguły dla dolnej belki czatu,
    które rozwalały pole wiadomości i przycisk Senden
*/

@media (max-width: 980px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* =========================
     HEADER / MENU / USER MENU
     ========================= */
  header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 10px !important;
    gap: 8px;
    z-index: 10000 !important;
  }

  .logo {
    flex: 0 0 auto;
    min-width: 0;
  }

  .logo img {
    height: 36px !important;
    width: auto !important;
    margin-right: 10px !important;
  }

  .menu-container {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .menu-container::-webkit-scrollbar,
  #meinedokumente-scope-switch::-webkit-scrollbar,
  .anl-toolbar::-webkit-scrollbar {
    display: none;
  }

  .menu-btn {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.2;
    border-radius: 999px !important;
  }

  .nav-inbox {
    flex: 0 0 auto;
  }

  .nav-inbox-btn {
    width: 42px;
    height: 42px;
  }

  .nav-inbox-btn .ico-mail,
  .nav-inbox-btn .ico-mail svg {
    width: 24px;
    height: 24px;
  }

  .auth-container {
    flex: 0 0 auto;
    min-width: 0;
  }

  .logout-btn {
    min-width: 0 !important;
    max-width: 150px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 220px;
    max-width: min(92vw, 320px);
  }

  .nav-inbox-dd {
    right: 0;
    left: auto;
    width: min(92vw, 360px);
    min-width: 0;
    max-width: none;
  }

  .mode-banner {
    top: 56px !important;
    padding: 8px 10px !important;
    gap: 8px;
    font-size: 13px !important;
    flex-wrap: wrap;
    z-index: 9990 !important;
  }

  /* =========================
     FOOTER – fixed zostaje
     ========================= */
  .site-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px !important;
    z-index: 10000 !important;
  }

  .footer-container {
    gap: 8px !important;
    justify-content: center !important;
  }

  .footer-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
  }

  .footer-center a {
    margin: 0 !important;
  }

  /* =========================
     PAGE SHELL / CONTAINERS
     ========================= */
  main {
    padding-top: 78px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    padding-bottom: 96px !important;
    min-width: 0;
    width: auto;
  }

  .container,
  .profile-container,
  .forgot-box,
  .cp-card,
  .reset-card,
  .box,
  .card,
  .modal-content {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .container,
  .profile-container,
  .forgot-box,
  .cp-card,
  .reset-card {
    padding: 18px 14px !important;
  }

  .cards {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }

  .card,
  .add-card {
    height: auto !important;
    min-height: 140px;
  }

  h1 {
    overflow-wrap: anywhere;
  }

  /* =========================
     BUTTON ROWS / HEADERS
     ========================= */
  .users-search-row,
  .profile-header,
  .section-header,
  .actions,
  .buttons-row,
  .composer .row,
  .modal-actions {
    flex-wrap: wrap !important;
  }

  .users-search-row > * {
    min-width: 0;
  }

  #searchInput {
    width: 100%;
    min-width: 0;
  }

  .actions > *,
  .buttons-row > *,
  .modal-actions > * {
    width: 100%;
  }

  #addUserBtn {
    flex: 0 0 38px;
  }

  /* =========================
     SCOPES / TOOLBARS
     ========================= */
  #meinedokumente-scope-switch {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #meinedokumente-scope-switch .scope-pill {
    flex: 0 0 auto;
  }

  .anl-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .anl-toolbar > * {
    flex: 0 0 auto;
  }

  /* =========================
     FORMS / MODALS
     ========================= */
  form.grid,
  #profileForm,
  #addUserForm,
  #editUserForm,
  #objektForm,
  #editVerwaltungForm,
  .ro-grid,
  #viewModal .ro-grid,
  .form-row,
  .inline-datetime,
  .calendar .form-row,
  .calendar .inline-datetime {
    grid-template-columns: 1fr !important;
  }

  label,
  form.grid > label,
  #profileForm > label,
  #addUserForm > label,
  #editUserForm > label,
  #objektForm > label,
  #editVerwaltungForm > label,
  #viewModal .ro-grid > div:nth-child(odd) {
    justify-self: start !important;
    text-align: left !important;
  }

  button.modal-submit-btn,
  .modal-submit-btn,
  .buttons-row,
  .actions {
    grid-column: 1 !important;
  }

  input[type="text"],
  input[type="date"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  textarea,
  select,
  .input-like-static {
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  #editModal > div,
  #viewModal .modal-content,
  #objektModal > div,
  #deleteModal .modal-content,
  #deleteFinalModal .modal-content,
  .modal .modal-content,
  #loginModal > div {
    width: min(94vw, 560px) !important;
    max-width: 94vw !important;
    padding: 18px 16px !important;
  }

  .anl-modal .modal-card {
    width: min(96vw, 900px) !important;
    max-width: 96vw !important;
  }

  /* =========================
     OBJEKT – PINNWAND / OVERVIEW / EIGENTUEMER
     ========================= */
  #pinnwand .composer .poll,
  #composer_box .poll {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  #pinnwand .composer-poll-choice,
  #pinnwand .composer-pin-controls,
  #composer_box .composer-poll-choice,
  #composer_box .composer-pin-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }

  #pinnwand .composer-pin-controls,
  #composer_box .composer-pin-controls {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0 !important;
  }

  #pinnwand #pin_days,
  #composer_box #pin_days {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #overview p,
  #overview .box p,
  #uebersicht-nuclear p {
    overflow-wrap: anywhere;
  }

  #overview .bilder-grid,
  #uebersicht-nuclear .bilder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #overview .bilder-upload form,
  #uebersicht-nuclear .bilder-upload form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  #overview .bilder-upload label,
  #uebersicht-nuclear .bilder-upload label {
    max-width: 100%;
    text-align: center;
    justify-content: center;
  }

  #overview .bilder-upload .submit,
  #uebersicht-nuclear .bilder-upload .submit {
    margin-left: 0 !important;
  }

  #eigentuemer #ownerViewModal,
  #eigentuemer .mmodal,
  #vermietenModal {
    z-index: 50020 !important;
  }

  /* =========================
     TABLE / LIST SCROLL AREAS
     ========================= */
  .ud-list,
  #mitglieder,
  #eigentuemer,
  #meinedokumente-browser,
  #jahresabschluss,
  #versammlung,
  #rechnungen,
  #meine_rechnungen,
  #rechnung_stammdaten,
  .calendar,
  .chat-root {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #usersTable,
  #verwaltungenTable,
  #mitgliederTable,
  #eigentuemerTable {
    min-width: 760px !important;
  }

  .ud-list > table,
  #dokumente .table,
  #unterlagen .table,
  #meinedokumente-browser .table {
    min-width: 720px !important;
  }

  #jahresabschluss .table-clean,
  #versammlung .table-clean,
  .mm-support-table,
  .list {
    min-width: 720px !important;
  }

  .calendar .cal-grid {
    min-width: 700px !important;
  }

  /* =========================
     CHAT – tylko bezpieczne reguły
     ========================= */
  .chat-root .chat-wrap {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .chat-root .chat-left,
  .chat-root .chat-right {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .chat-root .thread-list {
    max-height: 280px !important;
  }

  .chat-root .message-list {
    min-height: 320px !important;
  }

  .chat-root .msg {
    max-width: 86% !important;
  }

  /* =========================
     PORTAL INFO / CALLOUTS
     ========================= */
  .portal-body .anl-callout {
    flex-direction: column;
  }

  .portal-body .anl-callout-badge {
    align-self: flex-start;
  }

  /* =========================
     OBJEKT MENU MOBILE = 2 KOLUMNY
     ========================= */
  .tabs,
  .tabs.tabs--rect,
  .tabbar,
  .objekt-tabs,
  .objekt-subnav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    white-space: normal !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: visible !important;
    isolation: auto !important;
    z-index: auto !important;
  }

  .tabs > *,
  .tabs.tabs--rect > *,
  .tabbar > *,
  .objekt-tabs > *,
  .objekt-subnav > * {
    min-width: 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: auto !important;
  }

  .tabs .tab-btn,
.tabs.tabs--rect .tab-btn,
.objekt-tabs .tab-btn,
.objekt-subnav .tab-btn,
.tabbar .tab-btn,
.tabs a.tab-btn,
.tabs button.tab-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 10px 12px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
}
.tabs .tab-btn span,
.tabs.tabs--rect .tab-btn span,
.objekt-tabs .tab-btn span,
.objekt-subnav .tab-btn span,
.tabbar .tab-btn span,
.tabs .dropdown-toggle span,
.tabs.tabs--rect .dropdown-toggle span,
.objekt-tabs .dropdown-toggle span,
.objekt-subnav .dropdown-toggle span,
.tabbar .dropdown-toggle span {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.2 !important;
}

  .tabs .dropdown,
  .tabs.tabs--rect .dropdown,
  .objekt-tabs .dropdown,
  .objekt-subnav .dropdown,
  .tabbar .dropdown {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  .tabs .dropdown.open,
  .tabs .dropdown.show,
  .tabs .dropdown:focus-within,
  .tabs.tabs--rect .dropdown.open,
  .tabs.tabs--rect .dropdown.show,
  .tabs.tabs--rect .dropdown:focus-within,
  .objekt-tabs .dropdown.open,
  .objekt-tabs .dropdown.show,
  .objekt-tabs .dropdown:focus-within,
  .objekt-subnav .dropdown.open,
  .objekt-subnav .dropdown.show,
  .objekt-subnav .dropdown:focus-within,
  .tabbar .dropdown.open,
  .tabbar .dropdown.show,
  .tabbar .dropdown:focus-within {
    z-index: 5 !important;
  }

 .tabs .dropdown-toggle,
.tabs.tabs--rect .dropdown-toggle,
.objekt-tabs .dropdown-toggle,
.objekt-subnav .dropdown-toggle,
.tabbar .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 10px 12px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: auto !important;
}

  .tabs .dropdown-menu,
  .tabs.tabs--rect .dropdown-menu,
  .objekt-tabs .dropdown-menu,
  .objekt-subnav .dropdown-menu,
  .tabbar .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
  }

  .tabs .dropdown.dropdown-right .dropdown-menu,
  .tabs.tabs--rect .dropdown.dropdown-right .dropdown-menu,
  .objekt-tabs .dropdown.dropdown-right .dropdown-menu,
  .objekt-subnav .dropdown.dropdown-right .dropdown-menu,
  .tabbar .dropdown.dropdown-right .dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }

  .tabs-wrap,
  .tab-wrap,
  .objekt-header,
  .objekt-top,
  .objekt-title-wrap,
  .objekt-main-top {
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
    isolation: auto !important;
  }


  /* =========================
     OBJEKT MENU – bez przebijania popupów
     ========================= */
  .tabs,
  .tabs.tabs--rect,
  .tabbar,
  .objekt-tabs,
  .objekt-subnav,
  .tabs-wrap,
  .tab-wrap,
  .objekt-header,
  .objekt-top,
  .objekt-title-wrap,
  .objekt-main-top {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  /* =========================
     MODALE / POPUPY / DIALOGI NAD WSZYSTKIM
     ========================= */
  .modal,
  .modal-backdrop,
  .popup,
  .popup-backdrop,
  .dialog-backdrop,
  .overlay,
  .lightbox,
  .viewer-overlay,
  .anl-modal,
  .swal-overlay,
  .swal2-container {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;
  }

  .modal-content,
  .modal-dialog,
  .popup-content,
  .dialog,
  .lightbox-content,
  .viewer-modal,
  .anl-modal .modal-card,
  .swal-modal,
  .swal2-popup {
    position: relative !important;
    z-index: 50010 !important;
  }
}

@media (max-width: 640px) {
  header {
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 8px !important;
  }

  .logo img {
    height: 32px !important;
  }

  .menu-btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  .logout-btn {
    max-width: 120px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  .mode-banner {
    top: 54px !important;
    font-size: 12px !important;
  }

  main {
    padding-top: 74px !important;
    padding-bottom: 104px !important;
  }

  .nav-inbox-dd,
  .dropdown-menu {
    max-width: 92vw !important;
  }

  .container,
  .profile-container,
  .forgot-box,
  .cp-card,
  .reset-card {
    padding: 16px 12px !important;
  }

  .chat-root .msg {
    max-width: 90% !important;
  }

  .calendar .cal-grid {
    min-width: 640px !important;
  }

  .tabs,
  .tabs.tabs--rect,
  .objekt-tabs,
  .objekt-subnav,
  .tabbar {
    gap: 8px !important;
  }

  .tabs .tab-btn,
  .tabs.tabs--rect .tab-btn,
  .objekt-tabs .tab-btn,
  .objekt-subnav .tab-btn,
  .tabbar .tab-btn,
  .tabs .dropdown-toggle,
  .tabs.tabs--rect .dropdown-toggle,
  .objekt-tabs .dropdown-toggle,
  .objekt-subnav .dropdown-toggle,
  .tabbar .dropdown-toggle {
    min-height: 44px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
  }
}