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,
.form-select:focus, .form-control:focus-visible, .form-select:focus-visible {
  box-shadow: none;
  outline: 2px solid #258cfb;
  outline-offset: 1px;
}

/* Prevent scroll containers from clipping focus outlines on the left/right edges.
   When overflow-y is set, browsers auto-apply overflow-x: hidden which clips outlines.
   Adding a small horizontal padding gives the outline room to render fully. */
.scroll-y,
.hover-scroll-y,
.hover-scroll-overlay-y {
  padding-left: 3px;
  padding-right: 3px;
}

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: full-width on mobile, safety cap prevents any overflow ?? */
  [data-kt-drawer-width] {
    max-width: 100vw !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;
  }

  /* Drawer headers: double-class selector beats single .card-header/.card-toolbar rules */  /* ?? Toast notifications: prevent overflow on mobile ?? */
  .position-fixed.top-0.start-50.translate-middle-x {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90vw !important;
    max-width: 400px !important;
  }

  .position-fixed.top-0.start-50.translate-middle-x .toast {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ?? Toast notifications: sit above fixed header (z-index 100) and below it visually ?? */
  .position-fixed.top-0.start-50.translate-middle-x {
    top: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90vw !important;
    max-width: 400px !important;
    z-index: 1100 !important;
  }

  .position-fixed.top-0.start-50.translate-middle-x .toast {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Drawer headers: double-class selector beats single .card-header/.card-toolbar rules */
  .card-header.drawer-card-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    min-height: 0 !important;
  }

  .card-header.drawer-card-header .card-title {
    width: auto !important;
    flex: 1 1 auto !important;
    margin: 0.5rem 0 !important;
  }

  .card-header.drawer-card-header .card-toolbar.drawer-card-toolbar {
    width: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    margin: 0.5rem 0 !important;
  }
}

/* Prevent the first column (checkbox) from being clipped.
   Metronic's .table:not(.table-bordered) td:first-child / th:first-child sets padding-left: 0,
   which cuts off the left edge of the checkbox. Give it enough room. */
table.dataTable > tbody > tr > td:first-child,
table.dataTable > thead > tr > th:first-child {
  padding-left: 0.75rem !important;
}

/* Logo text: hide when collapsed, fade in on hover expand */
.app-sidebar-logo-text {
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}
[data-kt-app-sidebar-minimize="on"] .app-sidebar-logo-text {
  opacity: 0;
  pointer-events: none;
}
[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .app-sidebar-logo-text {
  opacity: 1;
  pointer-events: auto;
}

/* Logo icon: scale down when sidebar collapses, restore on expand/hover */
.app-sidebar-logo-default svg {
  transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
  transform-origin: left center;
}
[data-kt-app-sidebar-minimize="on"] .app-sidebar-logo-default svg {
  transform: scale(0.72);
}
[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .app-sidebar-logo-default svg {
  transform: scale(1);
}