body {
  background-color: var(--bs-body-bg);
  padding-top: 56px; 
  font-family: 'Lonie', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; 
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { 
  font-family: 'Lonie', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; 
}

h1.h4 { margin-bottom: 1rem;}
label { font-weight: bold; }
dd { margin-bottom: 1.5rem;}
a { text-decoration: none; }
.breadcrumb { font-size: 11pt; }
.fw-black { font-weight: 900; }

.sidebar {
  position: fixed;
  top: 56px;
  bottom: 0;
  left: 0;
  width: 260px;
  padding: 1rem;
  overflow-y: auto;
  /* border-right: 1px solid rgba(0,0,0,.1); */
  background-color: var(--bs-body-bg);
  transition: left .2s ease-in-out, width .2s ease-in-out;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.content { margin-left: 260px; padding: 1rem; }
/* Make sidebar links use flex to allow centering in collapsed mode */
.sidebar .nav .nav-link { display: flex; align-items: center; }
@media (max-width: 991.98px) {
  .sidebar { left: -260px; }
  .sidebar.show { left: 0; }
  .content { margin-left: 0; }
}

@media (min-width: 992px) {
  .navbar { display: none; }
  body { padding-top: 0; }
  .sidebar { top: 0; }
  /* Collapsed desktop sidebar */
  .sidebar.collapsed { width: 72px; }
  .sidebar.collapsed .text-muted { display: none !important; }
  .sidebar.collapsed .nav .nav-link { justify-content: center; }
  .sidebar.collapsed .nav .nav-link .label { display: none; }
  .sidebar.collapsed .nav .nav-link { padding-left: 0; padding-right: 0; }
  .sidebar.collapsed .nav .nav-link i { margin-right: 0 !important; font-size: 1.1rem; }
  .sidebar.collapsed .sidebar-user .d-flex { flex-direction: column; align-items: center; gap: .25rem; }
  .sidebar.collapsed #sidebar-user-name { display: none; }
  .sidebar.collapsed #sidebar-user-id { display: block; font-size: .75rem; text-align: center; }
  .sidebar.collapsed .sidebar-user .btn { display: none; }
  /* Shift content when collapsed */
  .sidebar.collapsed + .content { margin-left: 72px; transition: margin-left .2s ease-in-out; }
  .sidebar.collapsed .justify-content-between { justify-content: center !important; }
  .sidebar.collapsed #sidebar-collapse { margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; }
}

.fit { width:1px; }
.nowrap { white-space: nowrap; }

.btn-group-xs>.btn, .btn-xs {
--bs-btn-padding-y: 0rem;
--bs-btn-padding-x: 0.3rem;
--bs-btn-font-size: 0.75rem;
--bs-btn-border-radius: var(--bs-border-radius-sm);
margin-bottom: 3px;
}

div.dataTables_wrapper div.dataTables_info {
padding-top: 0 !important;
}

.dt-search {
  margin-left: 0 !important;
}
.dt-length select {
  margin-right: 0 !important;
}
.dt-info {
  font-size: var(--bs-font-size-sm);
  color: var(--bs-gray-600);
}

/* Mobile DataTable controls */
@media (max-width: 767.98px) {
  .dt-length {
    display: none !important;
  }
  
  .dt-search {
    flex: 1 !important;
    margin: 0 !important;
  }
  
  .dt-search input[type="search"] {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Align DataTable buttons to the left on mobile */
  .dt-layout-cell.dt-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .dt-buttons {
    display: flex;
    justify-content: flex-start !important;
    gap: .5rem;
    margin: 0 !important;
  }
}

/* Lighter (soft) button variants */
.btn-soft-primary {
  background-color: #E2EEFF;
  color: var(--bs-primary);
  border-color: #E7F1FF;
}
.btn-soft-primary:hover,
.btn-soft-primary:focus {
  background-color: #CFE2FF;
  color: var(--bs-primary);
  border-color: #9EC5FE;
}

.btn-soft-secondary {
  background-color: #EDEEEF;
  color: var(--bs-secondary);
  border-color: #EEEFEF;
}
.btn-soft-secondary:hover,
.btn-soft-secondary:focus {
  background-color: #E2E3E5;
  color: var(--bs-secondary);
  border-color: #C4C8CB;
}

.btn-soft-success {
  background-color: #E3F1EA;
  color: var(--bs-success);
  border-color: #E6F3EE;
}
.btn-soft-success:hover,
.btn-soft-success:focus {
  background-color: #D1E7DD;
  color: var(--bs-success);
  border-color: #A3CFBB;
}

.btn-soft-danger {
  background-color: #FBE7E9;
  color: var(--bs-danger);
  border-color: #FBEAEC;
}
.btn-soft-danger:hover,
.btn-soft-danger:focus {
  background-color: #F8D7DA;
  color: var(--bs-danger);
  border-color: #F1AEB5;
}

.btn-soft-warning {
  background-color: #FFF8E1;
  color: var(--bs-warning);
  border-color: #FFF9E6;
}
.btn-soft-warning:hover,
.btn-soft-warning:focus {
  background-color: #FFF3CD;
  color: var(--bs-warning);
  border-color: #FFE69C;
}

.btn-soft-info {
  background-color: #E2F9FD;
  color: var(--bs-info);
  border-color: #E6FAFE;
}
.btn-soft-info:hover,
.btn-soft-info:focus {
  background-color: #CFF4FC;
  color: var(--bs-info);
  border-color: #9EEAF9;
}

.btn-soft-dark {
  background-color: #E4E5E5;
  color: var(--bs-dark);
  border-color: #E7E8E8;
}
.btn-soft-dark:hover,
.btn-soft-dark:focus {
  background-color: #D3D3D4;
  color: var(--bs-dark);
  border-color: #A6A8A9;
}

.bg-soft-primary { background-color: #E2EEFF !important; color: var(--bs-primary) !important; }
.bg-soft-secondary { background-color: #EDEEEF !important; color: var(--bs-secondary) !important; }
.bg-soft-success { background-color: #E3F1EA !important; color: var(--bs-success) !important; }
.bg-soft-danger { background-color: #FBE7E9 !important; color: var(--bs-danger) !important; }
.bg-soft-warning { background-color: #FFF8E1 !important; color: var(--bs-warning) !important; }
.bg-soft-info { background-color: #E2F9FD !important; color: var(--bs-info) !important; }
.bg-soft-dark { background-color: #E4E5E5 !important; color: var(--bs-dark) !important; }
.bg-soft-light { background-color: #FCFCFD !important; color: var(--bs-body-color) !important; }

/* Badge soft variants */
.badge-soft-primary, .badge-soft-secondary, .badge-soft-success, .badge-soft-danger, 
.badge-soft-warning, .badge-soft-info, .badge-soft-muted {
  padding: 0.25em 0.5em;
  border-radius: 0.375rem;
}
.badge-soft-primary { background-color: #E2EEFF; color: var(--bs-primary); }
.badge-soft-secondary { background-color: #EDEEEF; color: var(--bs-secondary); }
.badge-soft-success { background-color: #E3F1EA; color: var(--bs-success); }
.badge-soft-danger { background-color: #FBE7E9; color: var(--bs-danger); }
.badge-soft-warning { background-color: #FFF8E1; color: var(--bs-warning); }
.badge-soft-info { background-color: #E2F9FD; color: var(--bs-info); }
.badge-soft-muted { background-color: #F0F0F0; color: #666; }

/* Soft active state */
.active {
  background-color: #DBE9FF !important;
  color: var(--bs-primary) !important;
  border-color: #CFE2FF !important;
}

.sidebar-user {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
}

/* Sticky table columns for reports */
.table th.sticky-left,
.table td.sticky-left {
  position: sticky;
  left: 0;
}

.table th.sticky-right,
.table td.sticky-right {
  position: sticky;
  right: 0;
}

/* On desktop, account for sidebar width */
@media (min-width: 992px) {
  .table th.sticky-left,
  .table td.sticky-left {
    left: 260px !important;
  }
  
  /* When sidebar is collapsed */
  .sidebar.collapsed ~ .content .table th.sticky-left,
  .sidebar.collapsed ~ .content .table td.sticky-left {
    left: 72px !important;
  }
}

.dataTable .selected td {
  color: var(--bs-body-color) !important;
  background-color: #E2EEFF !important;
  box-shadow: none !important;
}
.dataTable .selected td a {
  color: var(--bs-body-color) !important;
}