:root { color-scheme: dark; }

.sidebar-offcanvas { width: 280px; }
.sidebar-inner { min-height: calc(100vh - 56px); display: flex; flex-direction: column; }
.avatar-circle { width: 36px; height: 36px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.12); flex: 0 0 auto; }

.content-wrapper { padding-left: 0; }
@media (min-width: 992px) {
  .content-wrapper { margin-left: 280px; }
}

.btn, .form-control, .form-select { min-height: 44px; }
.table td, .table th { vertical-align: middle; }

.flash-stack .alert { margin-bottom: .75rem; }

.card-stat { border: 1px solid rgba(255,255,255,.12); }
.card-stat .icon { font-size: 1.6rem; opacity: .9; }
.card-stat .label { color: rgba(255,255,255,.75); }
.card-stat .value { font-size: 1.6rem; font-weight: 700; letter-spacing: .3px; }

.datatable-wrap .dataTables_wrapper .dataTables_filter input,
.datatable-wrap .dataTables_wrapper .dataTables_length select {
  margin-left: .5rem;
}

.datatable-wrap .dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: .35rem .65rem;
}

.table-responsive { overflow-x: auto; }

/* =========================
   LAYOUT FIX (sidebar + main)
   ========================= */

/* Prevent horizontal scroll from offcanvas transforms */
body { overflow-x: hidden; }

@media (min-width: 992px) {
  /* Make sure the wrapper is truly a flex row */
  .app-layout {
    display: flex;
    width: 100%;
    align-items: stretch;
  }

  /* Sidebar: fixed width in the flex row */
  .sidebar-offcanvas {
    position: static;
    flex: 0 0 260px;
    width: 260px;
    min-height: calc(100vh - 56px);
  }

  /* Main: remove any old “push” rules */
  .content-wrapper {
    flex: 1 1 auto;
    min-width: 0;            /* important: prevents weird flex overflow */
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: none !important;
  }

  /* If you previously centered content with max-width on container, remove it */
  .content-wrapper > .container-fluid {
    max-width: none !important;
    width: 100%;
  }
}