/*
  Parenteris mobile UX layer
  - Mobile-first corrections for header, cards, filters, buttons and tables
  - Loaded after brand.css so it can safely override Tabler defaults
*/

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

  .page {
    min-width: 0;
  }

  .page-wrapper {
    min-width: 0;
  }

  .page-body {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .page-body > .container-xl,
  .footer > .container-xl {
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .page-header {
    margin: .35rem 0 1rem;
  }

  .page-header .row {
    row-gap: .75rem;
  }

  .page-title {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .page-pretitle,
  .subheader,
  .card-subtitle,
  .text-muted {
    overflow-wrap: anywhere;
  }

  /* Mobile topbar: compact, sticky and touch-friendly */
  .navbar-vertical {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: auto;
    border-bottom: 1px solid var(--tblr-border-color);
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .06);
  }

  html[data-bs-theme="dark"] .navbar-vertical {
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .35);
  }

  .navbar-vertical > .container-fluid {
    min-height: 3.25rem;
    padding: .35rem .75rem;
    gap: .25rem;
    flex-wrap: nowrap !important;
  }

  .navbar-vertical .navbar-brand,
  .navbar-vertical .sidebar-brand {
    width: auto;
    min-width: 0;
    max-width: min(44vw, 170px);
    padding: 0 !important;
    margin-right: .25rem !important;
  }

  .navbar-vertical .sidebar-brand-link {
    min-width: 0;
    padding-left: 0 !important;
  }

  .navbar-vertical .sidebar-brand-link .parenteris-logo,
  .navbar-vertical .navbar-brand > a .parenteris-logo {
    height: 30px !important;
    max-width: 145px !important;
    transform: none !important;
    object-fit: contain;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none {
    gap: .05rem;
    align-items: center;
    flex: 0 0 auto;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none .nav-link {
    width: 2.05rem;
    height: 2.05rem;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none .nav-link .ti {
    font-size: 1.15rem;
  }

  .navbar-vertical .navbar-toggler {
    width: 2.15rem;
    height: 2.15rem;
    min-width: 2.15rem;
    padding: .35rem;
    margin-left: .15rem !important;
    border-radius: .65rem;
  }

  #sidebar-menu {
    order: 4;
    flex-basis: 100%;
    margin-top: .35rem;
    max-height: calc(100vh - 4.25rem);
    overflow-y: auto;
    border-top: 1px solid var(--tblr-border-color);
  }

  #sidebar-menu .navbar-nav {
    padding-top: .35rem !important;
    padding-bottom: .35rem;
  }

  #sidebar-menu .nav-link {
    padding: .55rem .25rem;
    border-radius: .65rem;
  }

  #sidebar-menu .nav-link-title {
    white-space: normal;
  }

  /* Header actions and filter bars become usable stacked blocks */
  .page-header .col-auto,
  .page-header .col-auto.ms-auto,
  .card-header > form,
  .card-header .row,
  .card-header .ms-auto {
    width: 100%;
    max-width: 100% !important;
  }

  .page-header .col-auto.d-flex,
  .page-header .btn-list,
  .card-header .btn-list,
  .card-body > .d-flex,
  .d-print-none.d-flex {
    flex-wrap: wrap;
  }

  .page-header form.d-flex,
  .page-header .col-auto > form.d-flex,
  .materials-toolbar,
  .aptneo-mobile-stack {
    width: 100%;
    flex-wrap: wrap;
  }

  .page-header form.d-flex > .form-control,
  .page-header form.d-flex > .input-icon,
  .page-header form.d-flex > .form-select,
  .page-header form.d-flex > .btn,
  .page-header form.d-flex > a.btn,
  .page-header .btn-list > .btn,
  .page-header .btn-list > form,
  .page-header .btn-list > form > .btn,
  .card-header .btn-list > .btn,
  .card-header .btn-list > form,
  .card-header .btn-list > form > .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .row-cols-lg-auto > .col-12,
  .row-cols-lg-auto > .col-lg-auto {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-lg-auto .btn,
  .row-cols-lg-auto .form-control,
  .row-cols-lg-auto .form-select,
  .row-cols-lg-auto .input-icon {
    width: 100%;
  }

  .btn-list.flex-nowrap,
  .btn-list {
    flex-wrap: wrap !important;
  }

  .btn-list .btn,
  .btn-list form,
  .btn-list form .btn {
    min-width: 0;
  }

  .card-header {
    gap: .5rem;
  }

  .card-title {
    line-height: 1.25;
  }

  .card-body {
    padding: .9rem;
  }

  .row-cards {
    --tblr-gutter-y: .75rem;
  }

  .h1,
  h1.h1,
  .card .h1 {
    font-size: 1.65rem;
  }

  .footer {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .modal-dialog {
    margin: .5rem;
  }

  /* Robust mobile menu: overlay panel instead of pushing/breaking layout */
  .navbar-vertical {
    width: 100% !important;
  }

  .navbar-vertical > .container-fluid {
    position: relative;
    justify-content: space-between;
    align-items: center !important;
  }

  .navbar-vertical .navbar-brand,
  .navbar-vertical .sidebar-brand {
    flex: 1 1 auto;
    max-width: min(38vw, 180px);
    overflow: hidden;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none {
    margin-left: auto;
    flex-wrap: nowrap !important;
  }

  #sidebar-menu {
    position: absolute;
    top: calc(100% + .35rem);
    left: .5rem;
    right: .5rem;
    z-index: 1055;
    margin-top: 0;
    max-height: min(75vh, calc(100vh - 4.5rem));
    padding: .55rem;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color);
    border-radius: 1rem;
    box-shadow: 0 .85rem 2rem rgba(0, 0, 0, .14);
  }

  html[data-bs-theme="dark"] #sidebar-menu {
    box-shadow: 0 .85rem 2rem rgba(0, 0, 0, .4);
  }

  #sidebar-menu.collapse:not(.show) {
    display: none !important;
  }

  #sidebar-menu.collapse.show {
    display: block !important;
  }

  #sidebar-menu .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-top: 0 !important;
    padding-bottom: 0;
  }

  #sidebar-menu .nav-link {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    width: 100%;
    padding: .7rem .75rem;
  }

  #sidebar-menu .nav-link-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    margin-top: .08rem;
  }

  #sidebar-menu .nav-link-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #sidebar-menu .nav-item.mt-3 {
    margin-top: .5rem !important;
  }

  #sidebar-menu .nav-item.mt-3 .nav-link.text-muted {
    padding-top: .9rem;
    padding-bottom: .25rem;
  }
}

@media (max-width: 767.98px) {
  /* Generic automatic table-to-card mode. JS injects data-label from <th>. */
  .table-responsive.aptneo-cards-wrap {
    overflow: visible;
  }

  .table-responsive.aptneo-cards-wrap > .table.aptneo-mobile-cards {
    margin-bottom: 0;
  }

  .table.aptneo-mobile-cards,
  .table.aptneo-mobile-cards > tbody,
  .table.aptneo-mobile-cards > tbody > tr,
  .table.aptneo-mobile-cards > tbody > tr > td {
    display: block;
    width: 100%;
  }

  .table.aptneo-mobile-cards > thead,
  .table.aptneo-mobile-cards > tfoot {
    display: none;
  }

  .table.aptneo-mobile-cards > tbody > tr {
    margin: 0 0 .75rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: .85rem;
    background: var(--tblr-card-bg, var(--tblr-bg-surface));
    box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .045);
    overflow: hidden;
  }

  html[data-bs-theme="dark"] .table.aptneo-mobile-cards > tbody > tr {
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .22);
  }

  .table.aptneo-mobile-cards > tbody > tr > td {
    min-height: 2.4rem;
    padding: .55rem .75rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
    white-space: normal !important;
    text-align: right !important;
    overflow-wrap: anywhere;
  }

  .table.aptneo-mobile-cards > tbody > tr > td:last-child {
    border-bottom: 0 !important;
  }

  .table.aptneo-mobile-cards > tbody > tr > td:not(.aptneo-mobile-actions):not(.aptneo-mobile-colspan) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
  }

  .table.aptneo-mobile-cards > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    max-width: 42%;
    text-align: left;
    color: var(--tblr-secondary-color, var(--tblr-muted));
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
    overflow-wrap: normal;
  }

  .table.aptneo-mobile-cards > tbody > tr > td[data-label=""]::before,
  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-colspan::before {
    content: none;
  }

  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions {
    text-align: left !important;
  }

  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions::before {
    display: block;
    max-width: 100%;
    margin-bottom: .4rem;
  }

  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions .btn-list,
  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions .d-flex,
  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions form {
    flex-wrap: wrap !important;
    gap: .4rem !important;
  }

  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions .btn,
  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions .form-select {
    flex: 1 1 auto;
  }

  .table.aptneo-mobile-cards input.form-control,
  .table.aptneo-mobile-cards select.form-select {
    min-width: 0 !important;
  }

  .table.aptneo-mobile-cards .text-end,
  .table.aptneo-mobile-cards .text-nowrap {
    white-space: normal !important;
  }

  /* Compact metric cards: less wasted vertical space on phones */
  .row-deck > [class*="col-"] > .card,
  .row-cards > [class*="col-"] > .card {
    min-height: 0;
  }

  .row-deck .card-body,
  .row-cards .card-body {
    padding: .8rem;
  }

  /* Tabs should scroll horizontally instead of squeezing labels. */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
  }

  /* Toasts and notifications should not cover the whole phone width awkwardly. */
  #toast-root {
    right: .5rem !important;
    left: .5rem !important;
    top: .5rem !important;
    padding: 0 !important;
  }

  #toast-root .toast {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .navbar-vertical .sidebar-brand-link .parenteris-logo,
  .navbar-vertical .navbar-brand > a .parenteris-logo {
    height: 26px !important;
    max-width: 116px !important;
  }

  .navbar-vertical .sidebar-brand,
  .navbar-vertical .navbar-brand {
    max-width: min(34vw, 135px);
  }

  #density-toggle-mobile {
    display: none !important;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none .nav-link {
    width: 1.9rem;
    height: 1.9rem;
  }

  .navbar-vertical .navbar-toggler {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
  }

  .page-body > .container-xl,
  .footer > .container-xl {
    padding-right: .55rem;
    padding-left: .55rem;
  }

  .page-title {
    font-size: 1.15rem;
  }

  .btn {
    white-space: normal;
  }

  .page-header .btn,
  .card-header .btn,
  .card-body > .d-flex .btn {
    justify-content: center;
  }

  .input-icon {
    width: 100%;
  }

  .table.aptneo-mobile-cards > tbody > tr > td:not(.aptneo-mobile-actions):not(.aptneo-mobile-colspan) {
    gap: .5rem;
  }

  .table.aptneo-mobile-cards > tbody > tr > td::before {
    flex-basis: 45%;
    max-width: 45%;
  }
}

@media (max-width: 767.98px) {
  .table.aptneo-mobile-cards > tbody > tr.collapse:not(.show) {
    display: none !important;
  }

  .table.aptneo-mobile-cards > tbody > tr.collapsing {
    display: block !important;
  }
}


/* ------------------------------------------------------------------
   Phase72 mobile hardening
   Fixes: stretched header/login buttons, broken offcanvas tables,
   horizontal overflow on validation/outbox/material pages.
------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .navbar-vertical .navbar-nav.flex-row.d-lg-none {
    min-width: 0;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none .nav-item,
  .navbar-vertical .navbar-nav.flex-row.d-lg-none .dropdown,
  .navbar-vertical .navbar-toggler {
    flex: 0 0 auto !important;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none .nav-link,
  .navbar-vertical .navbar-toggler,
  .container-tight .card .btn-icon {
    aspect-ratio: 1 / 1;
    line-height: 1;
  }

  .container-tight .card .btn-list {
    width: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: .4rem;
  }

  .container-tight .card .btn-icon {
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    max-width: 2.45rem !important;
    height: 2.45rem !important;
    padding: 0 !important;
    flex: 0 0 2.45rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .container-tight .card .btn-icon .ti {
    font-size: 1.1rem;
  }

  /* Avoid desktop two-column layouts overflowing the phone viewport. */
  .row.row-cards,
  .row.row-deck,
  .row.row-deck.row-cards {
    min-width: 0;
  }

  .row.row-cards > [class*="col-"],
  .row.row-deck > [class*="col-"] {
    min-width: 0;
  }

  .card,
  .card-body,
  .card-header,
  .table-responsive {
    min-width: 0;
  }

  .page-header .col-auto.d-flex,
  .page-header .col-auto.ms-auto.d-flex {
    align-items: stretch !important;
    gap: .5rem !important;
  }

  .page-header .col-auto.d-flex > .btn,
  .page-header .col-auto.d-flex > a.btn,
  .page-header .col-auto.d-flex > form > .btn,
  .page-header .col-auto.ms-auto.d-flex > .btn,
  .page-header .col-auto.ms-auto.d-flex > a.btn,
  .page-header .col-auto.ms-auto.d-flex > form > .btn {
    flex: 1 1 calc(50% - .5rem);
    min-width: 0;
    justify-content: center;
  }

  .page-header .col-auto.d-flex > form,
  .page-header .col-auto.ms-auto.d-flex > form,
  .page-header .col-auto.d-flex > form.d-flex,
  .page-header .col-auto.ms-auto.d-flex > form.d-flex {
    flex: 1 1 100%;
    min-width: 0;
  }

  .page-header .col-auto.d-flex > form.d-flex .form-control,
  .page-header .col-auto.ms-auto.d-flex > form.d-flex .form-control {
    min-width: 0;
  }

  /* Keep offcanvas summaries readable: use normal scrollable tables, not cards. */
  .offcanvas {
    max-width: 100vw;
  }

  .offcanvas.offcanvas-end {
    width: min(100vw, 440px) !important;
  }

  .offcanvas-body {
    overflow-x: hidden;
  }

  .offcanvas .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .offcanvas .table {
    min-width: 100%;
    font-size: .82rem;
  }

  .offcanvas .table th,
  .offcanvas .table td {
    white-space: normal;
    vertical-align: middle;
  }
}

@media (max-width: 767.98px) {
  /* In narrow screens, cardified table cells should be true two-column rows.
     This prevents labels such as CONSTITUINTE/VALOR/UNID. from overlapping values. */
  .table.aptneo-mobile-cards > tbody > tr > td:not(.aptneo-mobile-actions):not(.aptneo-mobile-colspan) {
    display: grid;
    grid-template-columns: minmax(5.75rem, 36%) minmax(0, 1fr);
    align-items: start;
    justify-content: initial;
    text-align: left !important;
    gap: .5rem;
  }

  .table.aptneo-mobile-cards > tbody > tr > td::before {
    grid-column: 1;
    max-width: none;
    flex: none;
    min-width: 0;
  }

  .table.aptneo-mobile-cards > tbody > tr > td > * {
    max-width: 100%;
    min-width: 0;
  }

  .table.aptneo-mobile-cards > tbody > tr > td .text-end,
  .table.aptneo-mobile-cards > tbody > tr > td.text-end {
    text-align: left !important;
  }

  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions {
    display: block;
  }

  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions .btn,
  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions form,
  .table.aptneo-mobile-cards > tbody > tr > td.aptneo-mobile-actions form .btn {
    width: 100%;
  }

  .modal .table.aptneo-mobile-cards,
  .offcanvas .table.aptneo-mobile-cards {
    display: table;
  }

  /* Validation page: force one-column reading flow, even if a child creates overflow. */
  .page-body .row-deck.row-cards > .col-12,
  .page-body .row-deck.row-cards > .col-lg-8,
  .page-body .row-deck.row-cards > .col-lg-4 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .position-sticky {
    position: static !important;
  }

  /* Main action rows: stack cleanly instead of spilling horizontally. */
  .btn-list.flex-nowrap,
  .d-flex.flex-nowrap {
    flex-wrap: wrap !important;
  }

  .btn-list.flex-nowrap > .btn,
  .btn-list.flex-nowrap > form,
  .btn-list.flex-nowrap > form > .btn {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .navbar-vertical > .container-fluid {
    gap: .2rem;
    padding-left: .55rem;
    padding-right: .55rem;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none {
    gap: .15rem;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none .nav-link,
  .navbar-vertical .navbar-toggler {
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    height: 2.15rem !important;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none .avatar.avatar-sm {
    width: 2.15rem;
    height: 2.15rem;
  }

  .navbar-vertical .sidebar-brand,
  .navbar-vertical .navbar-brand {
    max-width: 7.6rem;
  }

  .navbar-vertical .sidebar-brand-link .parenteris-logo,
  .navbar-vertical .navbar-brand > a .parenteris-logo {
    max-width: 7.4rem !important;
    height: 1.75rem !important;
  }

  .table.aptneo-mobile-cards > tbody > tr > td:not(.aptneo-mobile-actions):not(.aptneo-mobile-colspan) {
    grid-template-columns: minmax(5.4rem, 38%) minmax(0, 1fr);
  }

  .page-header .col-auto.d-flex > .btn,
  .page-header .col-auto.d-flex > a.btn,
  .page-header .col-auto.d-flex > form > .btn,
  .page-header .col-auto.ms-auto.d-flex > .btn,
  .page-header .col-auto.ms-auto.d-flex > a.btn,
  .page-header .col-auto.ms-auto.d-flex > form > .btn {
    flex-basis: 100%;
  }
}

/* ------------------------------------------------------------------
   Phase76 mobile refinements
   - offcanvas/modal tables are restored to real compact tables
   - validation pages use a strict one-column flow on phones/tablets
   - icon-only controls keep square hit areas and never stretch
------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .navbar-vertical .navbar-nav.flex-row.d-lg-none .nav-link,
  .navbar-vertical .navbar-nav.flex-row.d-lg-none .dropdown > .nav-link,
  .navbar-vertical .navbar-toggler,
  .btn-icon,
  .btn.btn-icon {
    flex: 0 0 auto !important;
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    max-width: 2.15rem !important;
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none .badge {
    position: absolute;
    transform: translate(.75rem, -.75rem);
  }

  /* Keep the authenticated header from stealing vertical space. */
  .navbar-vertical > .container-fluid {
    min-height: 3rem;
  }

  .navbar-vertical .sidebar-brand-link .parenteris-logo,
  .navbar-vertical .navbar-brand > a .parenteris-logo {
    object-fit: contain;
    object-position: left center;
  }

  /* Validation/detail screens: do not keep desktop side-by-side columns. */
  .page-body .container-xl > .row.row-deck.row-cards,
  .page-body .container-xl > .row.row-cards {
    min-width: 0;
  }

  .page-body .container-xl > .row.row-deck.row-cards > [class*="col-lg-"],
  .page-body .container-xl > .row.row-cards > [class*="col-lg-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767.98px) {
  /* Full reset for tables that were cardified before being moved into a modal/offcanvas. */
  .modal .table.aptneo-mobile-cards,
  .modal .table.aptneo-mobile-cards > thead,
  .modal .table.aptneo-mobile-cards > tbody,
  .modal .table.aptneo-mobile-cards > tfoot,
  .modal .table.aptneo-mobile-cards > tbody > tr,
  .modal .table.aptneo-mobile-cards > tbody > tr > td,
  .offcanvas .table.aptneo-mobile-cards,
  .offcanvas .table.aptneo-mobile-cards > thead,
  .offcanvas .table.aptneo-mobile-cards > tbody,
  .offcanvas .table.aptneo-mobile-cards > tfoot,
  .offcanvas .table.aptneo-mobile-cards > tbody > tr,
  .offcanvas .table.aptneo-mobile-cards > tbody > tr > td {
    display: revert !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .modal .table.aptneo-mobile-cards > tbody > tr > td,
  .offcanvas .table.aptneo-mobile-cards > tbody > tr > td {
    padding: .45rem .55rem !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
    text-align: inherit !important;
  }

  .modal .table.aptneo-mobile-cards > tbody > tr > td::before,
  .offcanvas .table.aptneo-mobile-cards > tbody > tr > td::before {
    content: none !important;
    display: none !important;
  }

  .offcanvas .table-responsive,
  .modal .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .offcanvas .table,
  .modal .table {
    min-width: 360px;
    font-size: .78rem;
  }

  /* Key/value tables should stay compact, not become cards. */
  table.aptneo-kv-table,
  table.aptneo-kv-table tbody,
  table.aptneo-kv-table tr,
  table.aptneo-kv-table td {
    display: revert !important;
  }

  .prescription-validate-page .card-body .row.g-3 > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  .navbar-vertical .navbar-nav.flex-row.d-lg-none {
    gap: .1rem !important;
  }

  .navbar-vertical .navbar-nav.flex-row.d-lg-none .nav-link,
  .navbar-vertical .navbar-nav.flex-row.d-lg-none .dropdown > .nav-link,
  .navbar-vertical .navbar-toggler,
  .btn-icon,
  .btn.btn-icon {
    width: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
  }

  .page-header .btn-list .btn,
  .page-header .btn-list form,
  .page-header .btn-list form .btn {
    width: 100%;
  }
}