/*
 * Mobile layout hardening for the default Sngine theme.
 *
 * The base Vikinger stylesheet already contains the reference responsive grid.
 * This file only normalizes the legacy Sngine wrappers and controls that are
 * rendered inside that grid, so the same layout remains usable on phones.
 */

body.vikinger-theme .main-wrapper,
body.vikinger-theme .content-grid,
body.vikinger-theme .container,
body.vikinger-theme .container-fluid,
body.vikinger-theme .row,
body.vikinger-theme [class*="col-"],
body.vikinger-theme .sg-offcanvas,
body.vikinger-theme .sg-offcanvas-sidebar,
body.vikinger-theme .sg-offcanvas-mainbar,
body.vikinger-theme .widget-box,
body.vikinger-theme .post,
body.vikinger-theme .card,
body.vikinger-theme .section-header,
body.vikinger-theme .section-filters-bar {
  min-width: 0;
}

body.vikinger-theme .content-grid > *,
body.vikinger-theme .grid > *,
body.vikinger-theme .post > *,
body.vikinger-theme .post-body > *,
body.vikinger-theme .post-content > *,
body.vikinger-theme .widget-box > *,
body.vikinger-theme .card > *,
body.vikinger-theme .section-header > *,
body.vikinger-theme .section-filters-bar > * {
  min-width: 0;
  max-width: 100%;
}

body.vikinger-theme img,
body.vikinger-theme video,
body.vikinger-theme iframe,
body.vikinger-theme embed,
body.vikinger-theme object {
  max-width: 100%;
}

body.vikinger-theme .post-text,
body.vikinger-theme .post-title,
body.vikinger-theme .widget-box-title,
body.vikinger-theme .section-title,
body.vikinger-theme .section-header-subsection,
body.vikinger-theme .card-body,
body.vikinger-theme .form,
body.vikinger-theme label {
  overflow-wrap: anywhere;
}

@media screen and (max-width: 1070px) {
  body.vikinger-theme .content-grid .grid.grid-3-6-3,
  body.vikinger-theme .grid.grid-3-6-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  body.vikinger-theme .content-grid .grid.grid-3-6-3 > *,
  body.vikinger-theme .content-grid .grid.grid-3-6-3 > [class*="col-"] {
    min-width: 0;
    max-width: 100%;
  }

  body.vikinger-theme .sg-offcanvas > .row {
    min-width: 0;
    max-width: 100%;
  }
}

@media screen and (max-width: 960px) {
  body.vikinger-theme .profile-header-info,
  body.vikinger-theme .profile-header-info-actions,
  body.vikinger-theme .profile-header-social-links-wrap,
  body.vikinger-theme .user-stats,
  body.vikinger-theme .section-header-actions,
  body.vikinger-theme .filter-tabs,
  body.vikinger-theme .form-input,
  body.vikinger-theme .form-select,
  body.vikinger-theme .form-input.with-button {
    min-width: 0;
    max-width: 100%;
  }

  body.vikinger-theme .profile-header-info-actions {
    flex-wrap: wrap;
  }

  /* AdminCP has a second, desktop-specific grid declaration later in its
   * stylesheet. Reset that declaration at the same breakpoint used by the
   * Vikinger single-column layout, otherwise the main panel remains 330px
   * wide on tablets. */
  body.vikinger-admin-shell .vikinger-admin-page > .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.vikinger-admin-shell .vikinger-admin-page > .row > .vikinger-admin-sidebar,
  body.vikinger-admin-shell .vikinger-admin-page > .row > .vikinger-admin-main {
    grid-column: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

@media screen and (max-width: 767.98px) {
  /* Bootstrap's legacy row/column wrappers must become one safe mobile flow. */
  body.vikinger-theme .sg-offcanvas,
  body.vikinger-theme .sg-offcanvas > .row,
  body.vikinger-theme .sg-offcanvas > .row > [class*="col-"],
  body.vikinger-theme .sg-offcanvas-sidebar,
  body.vikinger-theme .sg-offcanvas-mainbar {
    max-width: 100%;
    min-width: 0;
  }

  body.vikinger-theme .sg-offcanvas > .row {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  body.vikinger-theme .sg-offcanvas > .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.vikinger-theme .content-grid,
  body.vikinger-theme .content-grid[data-vikinger-scope="page"] {
    max-width: 100%;
    min-width: 0;
  }

  body.vikinger-theme .section-header,
  body.vikinger-theme .section-header-actions,
  body.vikinger-theme .section-filters-bar,
  body.vikinger-theme .section-filters-bar-actions,
  body.vikinger-theme .filter-tabs,
  body.vikinger-theme .nav-tabs,
  body.vikinger-theme .pagination {
    min-width: 0;
    max-width: 100%;
  }

  body.vikinger-theme .section-header-actions,
  body.vikinger-theme .section-filters-bar-actions {
    flex-wrap: wrap;
  }

  body.vikinger-theme .form,
  body.vikinger-theme .form-input,
  body.vikinger-theme .form-select,
  body.vikinger-theme .form-input.with-button,
  body.vikinger-theme .form-input input,
  body.vikinger-theme .form-input textarea,
  body.vikinger-theme .form-input select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.vikinger-theme .form-input.with-button {
    display: flex;
  }

  body.vikinger-theme .form-input.with-button input {
    flex: 1 1 auto;
  }

  body.vikinger-theme .post,
  body.vikinger-theme .widget-box,
  body.vikinger-theme .card {
    width: 100%;
  }

  body.vikinger-theme .post-user-status,
  body.vikinger-theme .vikinger-post-user-status,
  body.vikinger-theme .post-content,
  body.vikinger-theme .post-body,
  body.vikinger-theme .post-footer,
  body.vikinger-theme .post-actions,
  body.vikinger-theme .vikinger-post-content-actions {
    min-width: 0;
    max-width: 100%;
  }

  body.vikinger-theme .post-actions,
  body.vikinger-theme .vikinger-post-content-actions {
    flex-wrap: wrap;
  }

  body.vikinger-theme .post-text,
  body.vikinger-theme .vikinger-post-text,
  body.vikinger-theme .vikinger-post-title,
  body.vikinger-theme .vikinger-post-user-status .post-title {
    min-width: 0;
    max-width: 100%;
  }

  body.vikinger-theme .post-content img,
  body.vikinger-theme .post-content video,
  body.vikinger-theme .post-content iframe,
  body.vikinger-theme .vikinger-post-content img,
  body.vikinger-theme .vikinger-post-content video,
  body.vikinger-theme .vikinger-post-content iframe,
  body.vikinger-theme .vikinger-shared-post img,
  body.vikinger-theme .vikinger-shared-post video,
  body.vikinger-theme .vikinger-shared-post iframe {
    max-width: 100%;
  }

  body.vikinger-theme .table-responsive,
  body.vikinger-theme .dataTables_wrapper,
  body.vikinger-theme pre,
  body.vikinger-theme .CodeMirror,
  body.vikinger-theme .ql-container {
    max-width: 100%;
    min-width: 0;
  }

  body.vikinger-theme .table-responsive,
  body.vikinger-theme pre,
  body.vikinger-theme .CodeMirror {
    overflow-x: auto;
  }

  /* Keep the Vikinger post publisher on its own responsive contract.  The
   * generic Sngine modal fallback must not override its full-width mobile
   * layout or compress the composer to calc(100vw - 24px). */
  body.vikinger-theme #modal:not(.vikinger-post-modal-open) > .modal-dialog,
  body.vikinger-theme #modal:not(.vikinger-post-modal-open):has(> .modal-dialog) > .modal-dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin: 12px auto;
  }

  body.vikinger-theme #modal:not(.vikinger-post-modal-open) > .modal-dialog > .modal-content,
  body.vikinger-theme #modal:not(.vikinger-post-modal-open) .modal-body,
  body.vikinger-theme #modal:not(.vikinger-post-modal-open) .modal-header,
  body.vikinger-theme #modal:not(.vikinger-post-modal-open) .modal-footer {
    max-width: 100%;
    min-width: 0;
  }

  body.vikinger-theme #modal:not(.vikinger-post-modal-open) .modal-body {
    overflow-x: hidden;
  }
}

@media screen and (max-width: 680px) {
  /* The feed adds two legacy filters to Vikinger's tab row. Let the row grow
   * instead of clipping the last control at the phone edge; dropdown menus keep
   * their visible overflow. */
  body.vikinger-theme .vikinger-post-filter-tabs {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 36px;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    overflow: visible;
  }

  /* The fixed mobile action bar uses z-index: 10000.  Raise only the
   * currently opened feed menu above it; closed controls keep the normal
   * Vikinger stacking order and do not cover the action bar. */
  body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap]:has(> [data-vikinger-filter-menu-toggle][aria-expanded="true"]) {
    z-index: 10001 !important;
  }

  body.vikinger-theme .vikinger-post-filter-tabs:has([data-vikinger-filter-menu-toggle][aria-expanded="true"]) {
    z-index: 10001 !important;
  }

  body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap]:has(> [data-vikinger-filter-menu-toggle][aria-expanded="true"]) > [data-vikinger-filter-menu] {
    z-index: 10002 !important;
  }

  /* On a phone Vikinger replaces the text tabs with the bordered
   * .form-select control.  The country menu keeps the same control surface;
   * the secondary post-type menu is already represented by that select. */
  body.vikinger-theme .vikinger-post-filter-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    border-bottom: 0;
  }

  body.vikinger-theme .vikinger-post-filter-tabs > form {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 48px;
    flex: 0 0 48px;
  }

  body.vikinger-theme .vikinger-post-filter-tabs > form .form-select,
  body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    flex: 0 0 48px;
  }

  /* Keep the direct text tabs available through the mobile All Updates
   * selector, as in the original Vikinger responsive layout. */
  body.vikinger-theme .vikinger-post-filter-tabs > .simple-tab-item:not([data-vikinger-filter-menu-wrap]) {
    display: none !important;
  }

  /* The mobile Vikinger select already exposes All Updates plus every
   * secondary post type.  The separate Sngine More control repeats the same
   * filter as "Mostra tutto", so keep it desktop-only on phones.  The country
   * control remains visible because it is not part of the select options. */
  body.vikinger-theme .vikinger-post-filter-tabs > .vikinger-post-filter-more {
    display: none !important;
  }

  body.vikinger-theme .vikinger-filter-menu-portal.vikinger-filter-menu-more {
    display: none !important;
  }

  /* Match the actual mobile form-select surface supplied by the theme and
   * Bootstrap: same border, radius, padding, arrow and typography. */
  body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap] {
    display: block;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 36px 6px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: calc(100% - 12px) 50%;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    color: #3e3f5e;
    opacity: 1;
  }

  body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap] > [data-vikinger-filter-menu-toggle] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 34px;
    min-width: 0;
    overflow: hidden;
    color: #3e3f5e;
    font-family: Rajdhani, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap]:focus-within,
  body.vikinger-theme .vikinger-post-filter-tabs > [data-vikinger-filter-menu-wrap]:has(> [data-vikinger-filter-menu-toggle][aria-expanded="true"]) {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }

  /* The connection tabs inherit an 80px desktop offset from .filter-tabs.
   * Remove it on phones; otherwise the fourth tab widens the document. */
  body.vikinger-theme .vikinger-profile-view-friends .vikinger-friends-filters .filter-tabs.vikinger-profile-connection-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 12px 0 0;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  body.vikinger-theme .vikinger-profile-view-friends .vikinger-friends-filters .filter-tabs.vikinger-profile-connection-tabs::-webkit-scrollbar {
    display: none;
  }

  body.vikinger-theme .vikinger-profile-view-friends .vikinger-profile-connection-tabs .section-header-subsection {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body.vikinger-theme .profile-header-social-links-wrap,
  body.vikinger-theme .profile-header-social-links {
    max-width: 100%;
  }

  body.vikinger-theme .profile-tabs-wrapper,
  body.vikinger-theme .profile-tabs-wrapper > a {
    min-width: 0;
    max-width: 100%;
  }

  body.vikinger-theme .vikinger-profile-page .profile-tabs-wrapper {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  body.vikinger-theme .vikinger-profile-page .profile-header-info-actions {
    justify-content: center;
    gap: 8px;
  }
}

@media screen and (max-width: 767.98px) {
  /* Admin forms and generated table controls use the same touch-safe flow. */
  body.vikinger-admin-shell .vikinger-admin-main,
  body.vikinger-admin-shell .vikinger-admin-main .card,
  body.vikinger-admin-shell .vikinger-admin-main .card-body,
  body.vikinger-admin-shell .vikinger-admin-main .card-header,
  body.vikinger-admin-shell .vikinger-admin-main .card-footer,
  body.vikinger-admin-shell .vikinger-admin-main .form-table-row,
  body.vikinger-admin-shell .vikinger-admin-main .input-group {
    min-width: 0;
    max-width: 100%;
  }

  body.vikinger-admin-shell .vikinger-admin-main .form-control,
  body.vikinger-admin-shell .vikinger-admin-main .form-select,
  body.vikinger-admin-shell .vikinger-admin-main input[type="text"],
  body.vikinger-admin-shell .vikinger-admin-main input[type="password"],
  body.vikinger-admin-shell .vikinger-admin-main input[type="email"],
  body.vikinger-admin-shell .vikinger-admin-main input[type="number"],
  body.vikinger-admin-shell .vikinger-admin-main input[type="url"],
  body.vikinger-admin-shell .vikinger-admin-main input[type="date"],
  body.vikinger-admin-shell .vikinger-admin-main input[type="datetime-local"],
  body.vikinger-admin-shell .vikinger-admin-main textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.vikinger-admin-shell .vikinger-admin-main .input-group {
    flex-wrap: wrap;
  }

  body.vikinger-admin-shell .vikinger-admin-main .input-group > * {
    min-width: 0;
    max-width: 100%;
  }

  body.vikinger-admin-shell .vikinger-admin-main .nav-tabs {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: none;
  }

  body.vikinger-admin-shell .vikinger-admin-main .nav-tabs::-webkit-scrollbar,
  body.vikinger-admin-shell .vikinger-admin-main .dt-paging::-webkit-scrollbar {
    display: none;
  }

  body.vikinger-admin-shell .vikinger-admin-main .nav-tabs .nav-link {
    flex: 0 0 auto;
  }

  body.vikinger-admin-shell .vikinger-admin-main .card-footer.text-end {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    text-align: left !important;
  }

  body.vikinger-admin-shell .vikinger-admin-main .card-footer.text-end > * {
    margin: 0 !important;
  }

  body.vikinger-admin-shell .vikinger-admin-main .dt-paging {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.vikinger-admin-shell .vikinger-admin-main .dt-paging > nav > ul.pagination {
    width: max-content;
    min-width: 100%;
    justify-content: flex-start !important;
    flex-wrap: nowrap;
  }
}

@media screen and (max-width: 480px) {
  body.vikinger-theme .section-title {
    font-size: 1.25rem;
    line-height: 1.15;
  }

  body.vikinger-theme .widget-box-title,
  body.vikinger-theme .card-header {
    overflow-wrap: anywhere;
  }

  body.vikinger-admin-shell .vikinger-admin-main .card-body,
  body.vikinger-admin-shell .vikinger-admin-main .card-header,
  body.vikinger-admin-shell .vikinger-admin-main .card-footer {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* The original Vikinger header hides its progress action at this breakpoint,
 * while the search action remains available. Sngine does not render the
 * progress action, so the generic :nth-last-child(2) rule would otherwise
 * hide the search field itself. */
@media screen and (max-width: 960px) {
  body.vikinger-theme .header > .header-actions.search-bar {
    display: flex;
    width: 80%;
    min-width: 0;
  }
}

/* Vikinger mobile floaty bar.
 * The native header already contains the live request, message, notification
 * and settings dropdowns. Reuse that action group while applying the exact
 * spacing, separators and icon states used by Vikinger's .floaty-bar rules. */
@media screen and (max-width: 680px) {
  body.vikinger-theme .header .header-actions:last-child {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
    background-color: #615dfa;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
  }

  body.vikinger-theme .header .header-actions:last-child > .action-list {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 18px;
  }

  body.vikinger-theme .header .header-actions:last-child > .action-list::before,
  body.vikinger-theme .header .header-actions:last-child > .action-list::after {
    top: 14px;
  }

  body.vikinger-theme .header .header-actions:last-child > .action-list .action-list-item.unread::after {
    top: 16px;
  }

  /* The reference floaty-bar has no create-post action. */
  body.vikinger-theme .header .header-actions:last-child > .action-list > .action-list-item-wrap:first-child {
    display: none;
  }

  body.vikinger-theme .header .header-actions:last-child > .action-list > .action-list-item-wrap,
  body.vikinger-theme .header .header-actions:last-child > .action-item-wrap {
    height: 60px;
  }

  body.vikinger-theme .header .header-actions:last-child .action-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 14px;
  }

  body.vikinger-theme .header .header-actions:last-child .action-list-item-wrap > .action-list-item > .counter.red {
    top: 8px;
    right: 10px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-color: #615dfa;
    font-size: 9px;
  }

  body.vikinger-theme.night-mode .header .header-actions:last-child .action-list-item-wrap > .action-list-item > .counter.red {
    border-color: #262d34;
  }

  body.vikinger-theme .header .header-actions:last-child .action-list-item-icon,
  body.vikinger-theme .header .header-actions:last-child .action-item-icon {
    fill: #8b88ff;
    transition: fill 0.2s ease-in-out;
  }

  body.vikinger-theme .header .header-actions:last-child .action-list.dark .action-list-item:hover .action-list-item-icon,
  body.vikinger-theme .header .header-actions:last-child .action-list.dark .action-list-item.active .action-list-item-icon,
  body.vikinger-theme .header .header-actions:last-child .action-list.dark .action-list-item.unread .action-list-item-icon,
  body.vikinger-theme .header .header-actions:last-child .action-item.dark .action-item-icon {
    fill: #fff;
  }

  body.vikinger-theme .header .header-actions:last-child .action-list-item:hover .action-list-item-icon,
  body.vikinger-theme .header .header-actions:last-child .action-list-item[aria-expanded="true"] .action-list-item-icon,
  body.vikinger-theme .header .header-actions:last-child .action-item:hover .action-item-icon,
  body.vikinger-theme .header .header-actions:last-child .action-item[aria-expanded="true"] .action-item-icon {
    fill: #fff;
  }

  body.vikinger-theme .header .header-actions:last-child > .action-item-wrap > .action-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 60px;
    padding: 0;
  }

  /* Dropdowns open upward from the fixed bar and remain usable on narrow
   * touch screens, even though the native script initially writes top/right
   * coordinates for the desktop header. */
  body.vikinger-theme .header .header-actions:last-child .dropdown-box,
  body.vikinger-theme .header .header-actions:last-child .dropdown-navigation {
    position: fixed !important;
    top: auto !important;
    right: 12px !important;
    bottom: 60px !important;
    left: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 84px);
    margin: 0;
    overflow-y: auto;
  }

  body.vikinger-theme .header .header-actions:last-child .dropdown-box .js_scroller {
    max-height: min(280px, calc(100vh - 220px));
  }
}

@media screen and (max-width: 480px) {
  body.vikinger-theme .header .header-actions:last-child > .action-list {
    padding: 0;
  }

  body.vikinger-theme .header .header-actions:last-child > .action-list::before,
  body.vikinger-theme .header .header-actions:last-child > .action-list::after {
    display: none;
  }

  body.vikinger-theme .header .header-actions:last-child .action-list-item {
    padding: 0 20px;
  }

  body.vikinger-theme .header .header-actions:last-child > .action-item-wrap > .action-item {
    width: auto;
    padding: 0 20px;
  }
}

/* Match Vikinger's native phone reaction bar.  The original theme keeps
 * each post option at 80px on screens up to 479px and lets the parent place
 * those options with space-between; the legacy compatibility rule above uses
 * equal flex columns and pulls the reaction icon too far toward the center. */
@media screen and (max-width: 479px) {
  body.vikinger-theme .vikinger-post-standalone .post-actions {
    gap: 0;
    padding-right: 28px;
    padding-left: 28px;
  }

  body.vikinger-theme .vikinger-post-standalone .post-actions > .post-option-wrap,
  body.vikinger-theme .vikinger-post-standalone .post-actions > .post-option,
  body.vikinger-theme .vikinger-post-standalone .post-actions > .post-option-wrap > .post-option {
    flex: 0 0 80px;
    width: 80px;
  }

  /* Vikinger hides the auxiliary user-avatar list on very small screens so
   * the reaction icon and count stay aligned in the compact meta line. */
  body.vikinger-theme .content-actions .vikinger-reaction-avatar-list.has-avatars {
    display: none !important;
  }
}