html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ============================================================
   Mobile-friendly responsive overrides
   ============================================================ */

@media (max-width: 767.98px) {

  /* ?? Page container ?? */
  .app-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ?? Card headers: stack title + toolbar vertically ?? */
  .card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .card-title {
    width: 100% !important;
  }

  /* ?? Filter row inside card-title: must wrap so items stack instead of squeezing ?? */
  .card-title > div {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  /* ?? Search inputs / selects inside card-title ?? */
  .card-title .form-control,
  .card-title .form-select {
    width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }

  /* ?? Toolbar: full-width, wrap all buttons/selects ?? */
  .card-toolbar {
    width: 100% !important;
  }

  .card-toolbar > div {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .card-toolbar .btn {
    flex: 1 1 auto !important;
    white-space: nowrap;
  }

  /* ?? Inline filter selects in toolbar (RentRoll, ScheduleE, NetCashFlow) ?? */
  .card-toolbar .form-select {
    width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }

  /* Date range input-group inside toolbar */
  .card-toolbar .input-group {
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .card-toolbar .input-group .form-control {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin-bottom: 0 !important;
  }

  /* ?? Data tables: horizontal scroll ?? */
  .card-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .card-body .table {
    min-width: 540px;
  }

  /* ?? Drawers near full-width ?? */
  [data-kt-drawer-width] {
    width: 95vw !important;
  }

  /* ?? Side-by-side pairs inside drawer forms ??
     Covers w-225/w-md-225px, w-175/w-md-175px, w-125/w-md-125px, w-75/w-md-75px etc.
     All become full-width and stack vertically.                                      */
  .d-flex.flex-wrap.justify-content-between > div,
  .form-group.d-flex.flex-wrap.justify-content-between > div,
  .form-group.d-flex.flex-wrap.justify-content-start > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Bed/Bath/SqFt row */
  .form-group.d-flex.flex-wrap.align-items-center {
    gap: 0.5rem !important;
  }

  .form-group.d-flex.flex-wrap.align-items-center > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ?? All input-groups everywhere on mobile ??
     Keep the icon-span + input on the same line (nowrap).
     Remove the mb-3 / mb-lg-0 bottom-margin applied to .form-control
     inside an input-group — that margin breaks the flex row visually.  */
  .input-group {
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  .input-group .input-group-text {
    flex-shrink: 0;
  }

  .input-group .form-control,
  .input-group .form-select {
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 auto !important;
    /* Cancel the mb-3 that the views put on form-control inside input-group */
    margin-bottom: 0 !important;
  }

  /* ?? All form-control / form-select in the drawer card-body ?? */
  .card-body .form-control,
  .card-body .form-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ?? User Profile / detail pages: label + input rows stack ?? */
  .fv-row.row .col-md-3,
  .fv-row.row .col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .fv-row.row .col-md-3 {
    padding-bottom: 0.25rem !important;
  }

  /* ?? Dashboard ?? */
  .h-150px.w-100px {
    width: 80px !important;
    height: 120px !important;
  }

  .fs-2hx {
    font-size: 1.75rem !important;
  }

  /* ?? Login / standalone pages ?? */
  .d-flex.flex-column.flex-lg-row.flex-column-fluid > div:last-child:not(:first-child) {
    display: none !important;
  }

  .w-lg-500px {
    width: 100% !important;
    padding: 1rem !important;
  }
}