/* MyMI Wallet Mobile Responsiveness Layer */

:root {
  --mobile-tap-size: 44px;
  --mobile-page-padding: 1rem;
  --mobile-card-padding: 1rem;
  --mobile-header-height: 56px;
}

@media (max-width: 767.98px) {
  html {
    font-size: 16px;
  }

  body {
    font-size: 1rem;
    line-height: 1.5;
  }

  body,
  .nk-body {
    overflow-x: hidden;
  }

  .nk-header {
    position: sticky;
    top: 0;
    z-index: 1030;
  }

  .nk-header,
  .navbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.25rem);
  }

  .nk-content,
  .content-wrapper {
    padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px));
  }

  .nk-wrap,
  .db-nk-wrap {
    margin-left: 0 !important;
    width: 100%;
    padding-left: var(--mobile-page-padding);
    padding-right: var(--mobile-page-padding);
  }

  .nk-sidebar {
    transform: translateX(-100%);
  }

  .nk-sidebar.show,
  .nk-sidebar.collapse.show,
  .nk-sidebar.collapse.in {
    transform: translateX(0);
  }

  .navbar-collapse {
    width: 100%;
  }

  .navbar-nav {
    gap: 0.5rem;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-nav .btn,
  .navbar-nav .nav-link,
  .navbar-toggler {
    min-height: var(--mobile-tap-size);
  }

  .navbar-toggler {
    padding: 0.5rem 0.75rem;
  }

  .form-control,
  .form-select,
  .btn,
  button,
  input,
  select,
  textarea {
    min-height: var(--mobile-tap-size);
    font-size: 1rem;
  }

  .form-control,
  .form-select,
  textarea {
    padding: 0.625rem 0.75rem;
  }

  .btn {
    padding: 0.625rem 1rem;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    min-height: var(--mobile-tap-size);
  }

  .dropdown-menu {
    min-width: 100%;
  }

  .card,
  .nk-card {
    padding: var(--mobile-card-padding);
  }

  .card .card-body,
  .nk-card-body {
    padding: var(--mobile-card-padding);
  }

  .row > [class*='col-'] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

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

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_info {
    width: 100%;
    text-align: left;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0;
  }

  table.dataTable {
    width: 100% !important;
  }

  table.dataTable thead th,
  table.dataTable tbody td {
    white-space: nowrap;
  }

  .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
  }

  .modal-content {
    min-height: 100vh;
    border-radius: 0;
  }

  .modal-header,
  .modal-footer {
    padding: 1rem;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 1;
  }

  .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 140px);
  }

  canvas,
  .chartjs-render-monitor {
    max-width: 100%;
  }

  .nk-content .btn:active,
  .nk-content .nav-link:active,
  .nk-content .dropdown-item:active {
    opacity: 0.85;
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-fluid,
  .nk-content,
  .content-wrapper {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .nk-header {
    min-height: var(--mobile-header-height);
  }

  .nk-header .navbar-brand,
  .navbar .navbar-brand {
    max-width: 70%;
  }

  .nk-content .row.g-4,
  .nk-content .row.g-3 {
    --bs-gutter-x: 0.75rem;
  }

  .nk-header .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
  }
}