/* Filament-like layout styles (Bootstrap-based, no build tools) */

:root {
  --sidebar-width: 260px;
  --sidebar-mini-width: 72px;
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(0,0,0,.08);
  /* Using Bootstrap 5 default primary #0d6efd (rgb: 13,110,253) */
  --sidebar-active-bg: rgba(13, 110, 253, 0.08);
  --sidebar-active-color: #0d6efd;
}

/******** Layout Shell ********/
html, body { height: 100%; }
body { background-color: #f6f7fb; }

.sidebar {
  width: var(--sidebar-width);
}

@media (min-width: 992px) { /* lg+ */
  .sidebar .offcanvas-body { padding: 0; }
  .sidebar { position: sticky; top: 0; height: 100vh; }
}

/* Sidebar inner structure */
.sidebar-inner { background: var(--sidebar-bg); }
.sidebar-brand { height: 56px; }

/* Nav links */
.sidebar .nav-link {
  border-radius: .375rem;
  margin: 2px 0px;
  padding: .5rem .75rem;
  font-weight: 500;
}
.sidebar .nav-link i { color: #6c757d; }
.sidebar .nav-link:hover { background: rgba(0,0,0,.04); }
.sidebar .nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-color) !important;
}
.sidebar .nav-link.active i { color: var(--sidebar-active-color); }

/* Bottom area */
.sidebar .nav .btn.btn-link { text-decoration: none; }

/******** Mini (collapsed) mode on desktop ********/
@media (min-width: 992px) {
  body.sidebar-mini .sidebar { width: var(--sidebar-mini-width); }
  body.sidebar-mini .sidebar .app-brand-text,
  body.sidebar-mini .sidebar .sidebar-link-text { display: none; }
  body.sidebar-mini .sidebar .nav-link { justify-content: center; }
  body.sidebar-mini .sidebar .nav-link i { margin-right: 0 !important; }
}

/* Topbar */
.topbar .topbar-title { font-weight: 600; }

/* Content spacing */
#appContent main { min-height: calc(100vh - 56px); }