/*
 ASFaMMS
 Simple Sidebar layout based on Start Bootstrap Simple Sidebar v6.0.6
*/

html, body { height: 100%; }
body { overflow-x: hidden; }

#wrapper { display: flex; width: 100%; align-items: stretch; }

/* Sidebar */
#sidebar-wrapper {
  min-height: 100vh;
  width: 15rem;
  margin-left: -15rem;
  transition: margin 0.25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  font-size: 1.05rem;
  font-weight: 600;
}

#sidebar-wrapper .list-group { width: 15rem; }

/* Content */
#page-content-wrapper { min-width: 0; width: 100%; }

/* Toggle behavior - default collapsed on mobile */
body.sb-sidenav-toggled #wrapper #sidebar-wrapper { margin-left: 0; }

@media (min-width: 768px) {
  #sidebar-wrapper { margin-left: 0; }
  body.sb-sidenav-toggled #wrapper #sidebar-wrapper { margin-left: -15rem; }
}

/* Role-specific accents */
.sidebar-admin .sidebar-heading { background-color: #0d6efd; color: #fff; }
.sidebar-cashier .sidebar-heading { background-color: #198754; color: #fff; }
.sidebar-student .sidebar-heading { background-color: #6f42c1; color: #fff; }

/* Improve active state visibility */
.list-group-item.active {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.sidebar-cashier .list-group-item.active {
  background-color: #198754;
  border-color: #198754;
}

.sidebar-student .list-group-item.active {
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.breadcrumb a { text-decoration: none; }

/* Brand logo sizing and alignment */
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}

/* Larger logo specifically inside the navbar */
.navbar .brand-logo {
  height: 70px;
}

@media (max-width: 575.98px) {
  .brand-logo { height: 32px; }
  .navbar .brand-logo { height: 36px; }
  .navbar .btn.btn-sm { padding: .125rem .375rem; }
}

/* Compact icon button for sidebar toggle */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
}

.navbar .btn-icon:hover {
  background-color: rgba(0,0,0,0.03);
}

/* Mobile overlay behavior for sidebar */
@media (max-width: 767.98px) {
  #sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1040; /* Above navbar/content, below modal (Bootstrap scale) */
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
  }

  /* Prevent background scroll when sidebar is shown on mobile */
  body.sb-sidenav-toggled {
    overflow: hidden;
  }

  /* Interactive overlay element (appended to body via JS) */
  .sb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1030;
  }

  .sb-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Dark mode (lightweight overrides) */
html[data-theme='dark'] body { background-color: #121212; color: #e6e6e6; }
html[data-theme='dark'] .navbar, html[data-theme='dark'] .bg-light { background-color: #1e1e1e !important; }
html[data-theme='dark'] .card, html[data-theme='dark'] .dropdown-menu, html[data-theme='dark'] .offcanvas, html[data-theme='dark'] .modal-content { background-color: #1e1e1e; color: #e6e6e6; border-color: #333; }
html[data-theme='dark'] .list-group-item { background-color: #1e1e1e; color: #e6e6e6; border-color: #333; }
html[data-theme='dark'] .table { color: #ddd; }
html[data-theme='dark'] .table-striped>tbody>tr:nth-of-type(odd)>* { color: #ddd; }
html[data-theme='dark'] .form-control, html[data-theme='dark'] .form-select { background-color: #151515; color: #e6e6e6; border-color: #333; }
html[data-theme='dark'] .btn-outline-secondary { color: #e6e6e6; border-color: #555; }
html[data-theme='dark'] .border, html[data-theme='dark'] .border-bottom, html[data-theme='dark'] .card, html[data-theme='dark'] .table, html[data-theme='dark'] .list-group-item { border-color: #333 !important; }
html[data-theme='dark'] .text-muted { color: #aaa !important; }