/* assets/css/style.css - UI shell styles (Bootstrap 4 based) */

/* Global */
body.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.topbar {
  z-index: 1030;
}

/* Wrapper layout: sidebar + content */
#wrapper {
  width: 100%;
  display: flex;
  align-items: stretch;
}

/* Sidebar */
#sidebar {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  transition: all .25s ease;
  position: relative;
  height: calc(100vh - 56px); /* subtract top navbar height (approx) */
  overflow-y: auto;
}

/* FIX: Prevent auto-hiding on desktop */
#wrapper.toggled #sidebar {
  margin-left: 0;
}

/* Content area */
#page-content {
  flex: 1;
  padding: 24px;
  background: #f7f9fb;
  min-height: calc(100vh - 56px);
}

/* Sidebar look */
.sidebar-heading {
  border-bottom: 1px solid #eee;
}

.list-group-item {
  border: none;
  padding: 12px 20px;
  color: #333;
}

.list-group-item:hover {
  background: rgba(0,0,0,0.03);
  color: #000;
}

/* Footer */
.footer {
  width: 100%;
}

/* Responsive: collapse sidebar on small devices */
@media (max-width: 768px) {
  #sidebar {
    position: absolute;
    z-index: 1040;
    height: calc(100vh - 56px);
    left: -240px;
  }

  #wrapper.toggled #sidebar {
  margin-left: -240px;
}

  #page-content {
    padding: 15px;
  }
}

/* Nice card header */
.card .card-title {
  margin-bottom: 0.5rem;
}

/* Badge style consistency */
.badge-role {
  background: linear-gradient(90deg,#007bff,#00a8ff);
  color: #fff;
}

/* tiny helper */
.text-muted.small { font-size: 0.85rem; }

/* --------------------------------------------- */
/* FIXED: FORCE SIDEBAR ALWAYS VISIBLE ON DESKTOP */
/* --------------------------------------------- */
@media (min-width: 769px) {
  #sidebar {
    margin-left: 0 !important;
    left: 0 !important;
  }
}