/* Custom UI tweaks for demos: reposition/resize header and navbar elements */
:root{
  --navbar-height: 64px;
}

/* Make navbar slightly taller and adjust brand positioning */
.navbar {
  min-height: var(--navbar-height) !important;
  height: var(--navbar-height) !important;
}

.navbar .navbar-brand .title-logo {
  font-size: 1.25rem;
  line-height: 1;
  margin: 0;
  transform: translateY(6px);
}

/* Resize avatar in navbar */
.d-flex #currencydiv img {
  width: 28px !important;
  height: 28px !important;
}

/* Slightly increase spacing for nav links */
.navbar-nav .nav-link {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Example utility: move nav to the right on larger screens */
@media (min-width: 992px) {
  .navbar .container-fluid > .navbar-brand { margin-right: 24px; }
}

/* Use this file to experiment: change --navbar-height or transforms to reposition/resize elements */

/* ------------------------
   Login page repositioning
   - Moves the decorative image to the left of the form on wide screens
   - Stacks the image above the form on small screens
   - Adjust gap and max-height to taste
   ------------------------ */
.login-container {
  display: flex;
  align-items: center;
  gap: 32px;
}

.login-container > div {
  order: 2; /* form column */
  flex: 1 1 0;
}

.login-container img {
  order: 1; /* image column */
  max-height: 420px;
  width: auto;
  display: block;
}

/* Mobile / small screens: stack vertically with image on top */
@media (max-width: 992px) {
  .login-container {
	flex-direction: column-reverse; /* keep form visible first on very small screens */
	min-width: 280px;
	gap: 16px;
  }
  .login-container img {
	width: 100%;
	max-height: 240px;
	object-fit: cover;
  }
  .login-container > div {
	order: 1;
	width: 100%;
  }
}

/* Utility: nudge the form horizontally if needed */
.login-container .form-nudge { transform: translateX(10px); }

/* Login logo styling: replace h1 text with an image */
.login-logo {
  display: block;
  margin: 0 auto 8px;
  max-width: 220px;
  height: auto;
}
.login-subtitle {
  text-align: center;
  margin-bottom: 12px;
  font-size: small;
  color: rgba(230,238,248,0.9);
}

/* Navbar brand logo styling */
.navbar .navbar-brand .brand-logo {
  display: block;
	max-height: 72px; /* increased size */
  width: auto;
  transform: translateY(2px);
}

@media (max-width: 576px) {
  .navbar .navbar-brand .brand-logo { max-height: 48px; transform: translateY(4px); }
}

.has-left-sidebar .fixed-top.width-100 {
  /* Keep the top bar visible when a left sidebar is present.
	 Shift it right so it doesn't overlap the sidebar and reduce its width. */
  left: 220px !important;
  width: calc(100% - 220px) !important;
  box-sizing: border-box;
}
.left-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 220px;
  background: #1f1f1f;
  color: #fff;
  padding-top: 18px;
  z-index: 1040;
  overflow: auto;
}
.left-sidebar .sidebar-brand { text-align: center; padding: 6px 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.left-sidebar .sidebar-brand .brand-logo { max-height: 48px; }
.left-sidebar .sidebar-nav ul { list-style:none; margin:0; padding:8px 0; }
.left-sidebar .sidebar-nav li { margin:0; }
.left-sidebar .sidebar-nav a { display:block; padding:10px 16px; color: #ddd; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.02); }
.left-sidebar .sidebar-nav a:hover { background: rgba(255,255,255,0.03); color:#fff; }
.left-sidebar .sidebar-nav .badge { background:#e53935; color:#fff; font-size:11px; padding:2px 6px; border-radius:10px; margin-left:6px; }

/* push page content to the right so the sidebar doesn't overlap */
.has-left-sidebar body, .has-left-sidebar .width-100 { margin-left: 220px !important; }
@media (max-width: 992px) {
  .left-sidebar { transform: translateX(-220px); transition: transform .2s ease; }
  .left-sidebar.open { transform: translateX(0); }
  .has-left-sidebar .width-100 { margin-left: 0 !important; }
}