/*
 * NTEZFI responsive desktop/tablet layer
 * Phone styling remains exactly as provided. All overrides begin at 680px.
 */

/* Renderer defaults: keep the current phone experience. */
.ntezfi-sidebar {
  display: none;
}

.ntezfi-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.ntezfi-mobile-wrapper {
  display: block;
  height: 100vh;
  min-height: 100vh;
}

.ntezfi-desktop-shell {
  display: none;
}

@media (min-width: 680px) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
  }

  body.theme-light {
    background: #f4f3f8 !important;
  }

  /* Replace the phone app bar with proper wider-screen navigation. */
  #bottom_footer,
  #footer-bar {
    display: none !important;
  }

  .footer-clear {
    padding-bottom: 36px !important;
  }

  /* Stable renderer layout. */
  body > .container-fluid.px-0 > .row,
  body > .container-fluid.px-0 > .row.g-0 {
    flex-wrap: nowrap;
    margin: 0;
  }

  .ntezfi-sidebar {
    display: block !important;
    flex: 0 0 82px;
    width: 82px;
    max-width: 82px;
    min-width: 82px;
    height: 100vh !important;
    position: sticky !important;
    top: 0;
    overflow: hidden !important;
    z-index: 20;
  }

  .ntezfi-main {
    flex: 1 1 auto;
    width: calc(100% - 82px);
    max-width: calc(100% - 82px);
    min-width: 0;
  }

  .ntezfi-mobile-wrapper {
    display: none !important;
  }

  .ntezfi-desktop-shell {
    display: block !important;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 12px 42px !important;
    overflow: visible !important;
  }

  #desktop-wrapper {
    width: 100%;
    height: auto !important;
    min-height: calc(100vh - 32px);
    overflow: visible !important;
  }

  #desktop-wrapper > #shared-page,
  #shared-page {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Compact icon rail for medium-width desktop windows. */
  #main-sidebar > .p-4 {
    padding: 14px 8px !important;
  }

  #main-sidebar > .p-4 > h1,
  #main-sidebar > .p-4 > p,
  #main-sidebar > .p-4 > .divider,
  #main-sidebar > .p-4 > .border-orange-dark:last-of-type {
    display: none !important;
  }

  #sidebar-nav {
    display: flex !important;
    width: 100%;
    margin: 0 !important;
    padding: 8px 5px !important;
    border-radius: 18px !important;
  }

  #sidebar-nav a,
  #sidebar-nav button {
    min-height: 48px;
    justify-content: center !important;
    padding: 10px 4px !important;
    margin-bottom: 5px;
  }

  #sidebar-nav a span,
  #sidebar-nav button span {
    display: none !important;
  }

  #sidebar-nav a i,
  #sidebar-nav button i {
    margin: 0 !important;
    font-size: 20px !important;
  }

  /* Main PWA pages: center content and stop cards stretching edge-to-edge. */
  #shared-page #page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  #shared-page .page-content:not(.d-flex) {
    width: 100%;
    max-width: 640px;
    min-height: auto;
    margin: 0 auto;
    padding: 0 18px 42px;
    overflow: visible;
  }

  #shared-page .page-content:not(.d-flex) > :not(script):not(style):not(.offcanvas):not(.modal):not(.toast) {
    max-width: 590px;
    margin-left: auto;
    margin-right: auto;
  }

  #shared-page .page-content:not(.d-flex) > .card-style,
  #shared-page .page-content:not(.d-flex) > .content,
  #shared-page .page-content:not(.d-flex) > .pt-3,
  #shared-page .page-content:not(.d-flex) > .page-title,
  #shared-page .page-content:not(.d-flex) > form {
    width: calc(100% - 30px);
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #shared-page .page-content:not(.d-flex) > form > .card-style,
  #shared-page .page-content:not(.d-flex) > section > .card-style {
    width: 100%;
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Dynamic asset lists become a proper responsive grid rather than long strips. */
  #dashboard-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 590px;
    margin: 0 auto;
    padding: 0 15px;
  }

  #dashboard-cards > .card-style,
  #dashboard-cards > .card {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  .card-stack {
    width: calc(100% - 30px);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  .page-title img,
  img[src*="images/logo.png"] {
    max-width: 225px !important;
    height: auto !important;
    background: transparent !important;
  }

  .table-responsive,
  .overflow-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #shared-page img,
  #shared-page video,
  #shared-page canvas,
  #shared-page svg {
    max-width: 100%;
  }

  /* Forms and auth cards remain centered without changing phone styling. */
  body > #page .page-content.d-flex > .card,
  body > #page .page-content.d-flex .card-center {
    max-width: 560px;
  }

  /* Admin area: prevent giant stretched panels on wide monitors. */
  .content-page {
    min-width: 0;
    overflow-x: hidden;
  }

  .content-page > .container-fluid {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 22px;
  }

  .content-page .iq-card,
  .content-page .iq-card-stretch {
    min-width: 0;
    height: auto;
  }
}

@media (min-width: 992px) {
  .ntezfi-sidebar {
    flex-basis: 250px;
    width: 250px;
    max-width: 250px;
    min-width: 250px;
    overflow-y: auto !important;
  }

  .ntezfi-main {
    width: calc(100% - 250px);
    max-width: calc(100% - 250px);
  }

  #main-sidebar > .p-4 {
    padding: 24px 18px !important;
  }

  #main-sidebar > .p-4 > h1,
  #main-sidebar > .p-4 > p,
  #main-sidebar > .p-4 > .divider,
  #main-sidebar > .p-4 > .border-orange-dark:last-of-type {
    display: block !important;
  }

  #sidebar-nav {
    padding: 12px !important;
  }

  #sidebar-nav a,
  #sidebar-nav button {
    justify-content: flex-start !important;
    padding: 9px 12px !important;
  }

  #sidebar-nav a span,
  #sidebar-nav button span {
    display: inline !important;
  }

  #sidebar-nav a i,
  #sidebar-nav button i {
    margin-right: .5rem !important;
    font-size: 1.2rem !important;
  }

  .ntezfi-desktop-shell {
    padding: 22px clamp(18px, 2.5vw, 42px) 50px !important;
  }

  #shared-page .page-content:not(.d-flex) {
    max-width: 1040px;
    padding-inline: 24px;
  }

  #shared-page .page-content:not(.d-flex) > :not(script):not(style):not(.offcanvas):not(.modal):not(.toast) {
    max-width: 900px;
  }

  #shared-page .page-content:not(.d-flex) > .card-style,
  #shared-page .page-content:not(.d-flex) > .content,
  #shared-page .page-content:not(.d-flex) > .pt-3,
  #shared-page .page-content:not(.d-flex) > .page-title,
  #shared-page .page-content:not(.d-flex) > form,
  #shared-page .page-content:not(.d-flex) > form > .card-style,
  #shared-page .page-content:not(.d-flex) > section > .card-style {
    max-width: 860px;
  }

  #dashboard-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
  }

  .card-stack {
    max-width: 620px;
  }

  .ntezfi-docs {
    max-width: 980px !important;
  }
}

@media (min-width: 1440px) {
  .content-page > .container-fluid {
    max-width: 1380px;
  }

  #shared-page .page-content:not(.d-flex) {
    max-width: 1120px;
  }

  #shared-page .page-content:not(.d-flex) > .card-style,
  #shared-page .page-content:not(.d-flex) > .content,
  #shared-page .page-content:not(.d-flex) > .pt-3,
  #shared-page .page-content:not(.d-flex) > form {
    max-width: 900px;
  }

  #dashboard-cards {
    max-width: 960px;
  }
}

/* Final specificity overrides for the older 992px desktop rules. */
@media (min-width: 992px) {
  #main-sidebar.ntezfi-sidebar {
    flex: 0 0 250px !important;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;
  }

  #main-sidebar.ntezfi-sidebar + main.ntezfi-main {
    flex: 1 1 auto !important;
    width: calc(100% - 250px) !important;
    max-width: calc(100% - 250px) !important;
    min-width: 0 !important;
  }

  #desktop-wrapper #shared-page .page-content:not(.d-flex) {
    width: 100% !important;
    max-width: 1000px !important;
    margin-inline: auto !important;
    padding-inline: 24px !important;
  }

  #desktop-wrapper #shared-page .page-content:not(.d-flex) > .card-style,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > .content,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > .pt-3,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > .page-title,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > form,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > form > .card-style,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > section > .card-style {
    width: calc(100% - 30px) !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #desktop-wrapper #shared-page #dashboard-cards {
    width: 100% !important;
    max-width: 860px !important;
  }
}

@media (min-width: 1440px) {
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > .card-style,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > .content,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > .pt-3,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > .page-title,
  #desktop-wrapper #shared-page .page-content:not(.d-flex) > form {
    max-width: 860px !important;
  }

  #desktop-wrapper #shared-page #dashboard-cards {
    max-width: 900px !important;
  }
}