/* my-webpage/assets/style.css */

/* Make sidebar links look better on hover */
.nav-pills .nav-link:not(.active):hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* Ensure main content area can scroll if it overflows */
.main-content {
	height: 100vh;
	overflow-y: auto;
}

/* Make sidebar links look better on hover */
.nav-pills .nav-link:not(.active):hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* 
  NEW CSS FOR RESPONSIVE LAYOUT
  On large screens (when the offcanvas is visible), 
  push the main content to the right by the width of the sidebar.
*/
@media (min-width: 992px) {
	.main-content {
		margin-left: 280px;
		/* This must match your sidebar width */
	}
}

/* Make the admin panel border only appear on large screens */
.border-start-lg {
	border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

@media (max-width: 991.98px) {
	.border-start-lg {
		border-left: none !important;
	}
}

/* ==========================================================================
   HARD OVERRIDES so theme always wins over Bootstrap (quick visual certainty)
   You can remove !important later once all markup is cleaned.
   ========================================================================== */
:root {
  --hc-bg-0: #070b15;
  --hc-bg-1: #0b1224;
  --hc-bg-2: #0f1a33;
  --hc-text: #d8e6ff;
  --hc-muted: #9db0d1;
  --hc-neon-a: #00e5ff;
  --hc-neon-b: #2a66ff;
  --hc-border: rgba(140, 191, 255, .18);
  --hc-glass: rgba(13, 22, 45, .58);
}
/* Page */
html, body { background: linear-gradient(180deg, var(--hc-bg-0), #05070e) !important; color: var(--hc-text) !important; }
/* Navbar + common bg utilities */
.navbar, .navbar.bg-body-tertiary, .navbar.bg-light, .navbar.bg-dark,
.bg-body, .bg-body-tertiary, .bg-light, .bg-dark {
  background: var(--hc-glass) !important;
  color: var(--hc-text) !important;
  border-bottom: 1px solid var(--hc-border) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
}
.navbar .navbar-brand, .navbar .nav-link { color: var(--hc-text) !important; }
.navbar .nav-link:hover { color: var(--hc-neon-a) !important; text-shadow: 0 0 8px rgba(0,229,255,.35) !important; }
/* Cards */
.card, .modal-content, .dropdown-menu, .offcanvas, .list-group, .toast {
  background: var(--hc-glass) !important;
  border: 1px solid var(--hc-border) !important;
  border-radius: 16px !important;
  color: var(--hc-text) !important;
}
.card-header, .modal-header { background: rgba(255,255,255,.05) !important; }
/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--hc-neon-a), var(--hc-neon-b)) !important;
  border: none !important;
  color: #001019 !important;
  box-shadow: 0 10px 30px -12px rgba(0,229,255,.55) !important;
}
.btn-outline-primary {
  color: var(--hc-neon-a) !important;
  border-color: rgba(0,229,255,.5) !important;
}
.btn-outline-primary:hover {
  color: #001019 !important;
  background: linear-gradient(135deg, var(--hc-neon-a), var(--hc-neon-b)) !important;
  border-color: transparent !important;
}
/* Forms */
.form-control, .form-select {
  background: rgba(255,255,255,.03) !important;
  color: var(--hc-text) !important;
  border: 1px solid rgba(176, 205, 255, .18) !important;
  border-radius: 12px !important;
}
.form-control::placeholder { color: #93a7c7 !important; }
/* Tables */
.table { color: var(--hc-text) !important; }
.table thead th { background: rgba(255,255,255,.04) !important; }
/* Misc */
.text-dark, .navbar-light .navbar-brand, .navbar-light .navbar-nav .nav-link { color: var(--hc-text) !important; }
.text-bg-dark { background: var(--hc-glass) !important; color: var(--hc-text) !important; }