/* =========================================================
   Dashboard CSS (Clean, Responsive, Theme-Aligned)
   ========================================================= */

/* Root variables aligned with your neutral index theme */
:root{
  --dash-bg: #f5f9ff;
  --dash-surface: #ffffff;
  --dash-border: rgba(10, 72, 153, 0.16);
  --dash-text: #0f2747;
  --dash-muted: #4f6684;
  --dash-accent: #0c77f8;
  --dash-accent-2: #00b8d9;
  --dash-accent-3: #ff8a00;
  --dash-radius: 12px;
  --dash-shadow: 0 14px 30px rgba(15, 50, 96, 0.12);
}

.skip-link{
  position: fixed;
  left: 12px;
  top: -44px;
  z-index: 2000;
  background: #0f2747;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
  transition: top 0.15s ease-in-out;
}

.skip-link:focus{
  top: 72px;
  color: #fff;
}

/* =========================================================
   Top Navbar
   ========================================================= */
.dashboard-navbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 58px;
  background:
    linear-gradient(90deg, rgba(12, 119, 248, 0.08), rgba(0, 184, 217, 0.06) 45%, rgba(255, 138, 0, 0.06) 100%),
    var(--dash-bg);
  border-bottom: 1px solid var(--dash-border);
  box-shadow: 0 6px 22px rgba(15, 50, 96, 0.12);
  z-index: 1035;
}

/* Inner layout: left + centered desktop menu + right + mobile menu */
.dashboard-nav-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

/* Logo */
.dashboard-logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.dashboard-logo img{
  height: 34px;
  width: auto;
  display: block;
}

/* LEFT */
.dashboard-nav-left{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* RIGHT (desktop profile only) */
.dashboard-nav-right{
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* MOBILE menu area (hamburger only) */
.dashboard-nav-mobile{
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Center menu: visually centered on large screens */
.dashboard-nav-center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}

/* Safety: prevent center from overflowing small desktops */
@media (max-width: 1200px){
  .dashboard-nav-center{
    gap: 14px;
  }
}

/* =========================================================
   Buttons / Links
   ========================================================= */
.dashboard-link{
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(12, 119, 248, 0.14);
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--dash-text);
  text-decoration: none;
  line-height: 1;
}

.dashboard-link:hover{
  background: rgba(12, 119, 248, 0.10);
  color: var(--dash-text);
}

/* Rotating wallet/profit slot in top nav */
.dashboard-metric-rotator{
  position: relative;
  height: 40px;
  min-width: 252px;
  border-radius: 999px;
  border: 1px solid rgba(12, 119, 248, 0.16);
  background: linear-gradient(135deg, #ffffff, #eef6ff);
  overflow: hidden;
}
.dashboard-metric-item{
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  white-space: nowrap;
  color: var(--dash-text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}
.dashboard-metric-item.is-active{
  opacity: 1;
  transform: translateY(0);
}
.dashboard-metric-item i{
  font-size: 1rem;
  color: var(--dash-accent);
}
.dashboard-metric-item .metric-label{
  font-weight: 600;
  font-size: 0.88rem;
}
.dashboard-metric-item .metric-value{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.94rem;
}

/* Profile button */
.dashboard-profile{
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(12, 119, 248, 0.28);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(214, 233, 255, 0.92));
  border-radius: var(--dash-radius);
  padding: 8px 14px;
  min-height: 42px;
  font-weight: 600;
  color: var(--dash-text);
  box-shadow:
    0 10px 20px rgba(12, 44, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.dashboard-profile::before{
  content: "";
  position: absolute;
  inset: 1px 1px 55% 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.dashboard-profile:hover{
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(200, 224, 255, 0.9));
}

.dashboard-profile.dropdown-toggle::after{
  margin-left: 0.45rem;
}

.dashboard-profile i,
.dashboard-profile span,
.dashboard-profile.dropdown-toggle::after{
  color: var(--dash-accent-3);
}

/* Prevent name overflow */
.dashboard-profile span{
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hamburger icon */
.dashboard-icon-btn{
  border: 1px solid rgba(12, 119, 248, 0.26);
  background: linear-gradient(135deg, #ffffff, #eef6ff);
  border-radius: var(--dash-radius);
  padding: 7px 10px;
  line-height: 1;
}
.dashboard-icon-btn:hover{
  background: linear-gradient(135deg, #ffffff, #dff0ff);
}
.dashboard-icon-btn i{
  font-size: 1.35rem;
  color: var(--dash-accent);
}

/* Focus styles (modern + accessible) */
.dashboard-link:focus,
.dashboard-profile:focus,
.dashboard-icon-btn:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.22);
}

/* Keep dropdown trigger focus subtle and avoid thick Bootstrap ring */
.dashboard-profile:focus,
.dashboard-profile:focus-visible,
.dashboard-profile.show,
.dashboard-profile:active{
  border-color: rgba(12, 119, 248, 0.34);
  box-shadow: 0 0 0 2px rgba(12, 119, 248, 0.15) !important;
}

/* =========================================================
   Dropdowns
   ========================================================= */
.dashboard-navbar.navbar .dropdown-menu{
  border-radius: var(--dash-radius);
  border: 1px solid var(--dash-border);
  box-shadow: var(--dash-shadow);
  padding: 8px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  --bs-dropdown-link-color: var(--dash-accent-3);
  --bs-dropdown-link-hover-color: var(--dash-accent-3);
  --bs-dropdown-link-hover-bg: rgba(12, 119, 248, 0.1);
  --bs-dropdown-divider-bg: rgba(15, 72, 153, 0.16);
}

.dashboard-right-actions{
  padding-right: 8px;
}

.dashboard-user-menu .dropdown-menu{
  margin-top: 0.45rem;
  min-width: 220px;
}
.dashboard-navbar .dashboard-user-menu .dropdown-menu .dropdown-item,
.dashboard-navbar .dashboard-user-menu .dropdown-menu .dropdown-item:link,
.dashboard-navbar .dashboard-user-menu .dropdown-menu .dropdown-item:visited{
  color: var(--dash-accent-3) !important;
}
.dashboard-navbar .dashboard-user-menu .dropdown-menu .dropdown-item *{
  color: inherit !important;
}
.dashboard-navbar.navbar .dropdown-item{
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--dash-accent-3) !important;
}
.dashboard-navbar.navbar .dropdown-item:hover{
  background: rgba(2, 6, 23, 0.05);
  color: var(--dash-accent-3) !important;
}
.dashboard-navbar.navbar .dropdown-item:focus,
.dashboard-navbar.navbar .dropdown-item:active{
  background: rgba(12, 119, 248, 0.12);
  color: var(--dash-accent-3) !important;
}
.dashboard-navbar.navbar .dropdown-item i{
  color: var(--dash-accent-3);
}
.dashboard-navbar.navbar .dropdown-item.text-danger,
.dashboard-navbar.navbar .dropdown-item.text-danger:hover,
.dashboard-navbar.navbar .dropdown-item.text-danger:focus,
.dashboard-navbar.navbar .dropdown-item.text-danger:active{
  color: #dc3545 !important;
}
.dashboard-navbar.navbar .dropdown-item.text-danger i{
  color: #dc3545;
}

/* =========================================================
   Layout offset (push content below fixed navbar)
   IMPORTANT: Works with your base.html structure
   ========================================================= */
body > .flex-grow-1{
  padding-top: 58px;
}

/* =========================================================
   Responsive heights
   ========================================================= */
@media (max-width: 576px){
  .dashboard-navbar{ height: 52px; }
  body > .flex-grow-1{ padding-top: 52px; }
  .dashboard-logo img{ height: 32px; }
  .dashboard-right-actions{ padding-right: 4px; }
  .dashboard-profile{ padding: 7px 12px; min-height: 40px; }
  .dashboard-profile span{ max-width: 104px; }
}

@media (max-width: 1199.98px){
  .dashboard-metric-rotator{ min-width: 228px; }
  .dashboard-metric-item .metric-label{
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 992px){
  .dashboard-navbar{ height: 60px; }
  body > .flex-grow-1{ padding-top: 60px; }
}
/* Dashboard nav should look like your theme but minimal */
.dashboard-navbar{
  background: var(--dash-bg);
  border-bottom: 1px solid var(--dash-border);
}

/* Brand logo sizing */
.dashboard-logo img{
  height: 34px;
  width: auto;
}

/* Toggler */
.dashboard-toggler{
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius);
  padding: 6px 10px;
  background: var(--dash-surface);
}
.dashboard-toggler i{
  font-size: 1.6rem;
  color: var(--dash-text);
}

/* Make collapse menu look clean on mobile */
@media (max-width: 991.98px){
  #dashboardNavbar{
    background: var(--dash-bg);
    border-top: 1px solid var(--dash-border);
    margin-top: 10px;
    padding-top: 10px;
  }
}