/*
 * Theme: Light Hub — colors and logo only, no layout changes
 */

:root {
  --brand-dark:  #0d1b2a;
  --accent:      #2563eb;
  --active-bg:   #dbeafe;
  --active-text: #1d4ed8;
  --border:      #e5e7eb;
  --page-bg:     #ffffff;
}

/* ── Page background ──────────────────────────────────────────── */
body { background-color: var(--page-bg) !important; }

/* ── Bootstrap helpers ────────────────────────────────────────── */
.bg-primary  { background-color: var(--brand-dark) !important; }
.bg-secondary { background-color: #1e3a5f !important; }

/* ── Navbars ──────────────────────────────────────────────────── */
.navbar { background: var(--brand-dark) !important; }
.navbarButton:hover { background: rgba(255,255,255,0.12) !important; }
/* Fix toggler icon visibility on dark navbar background */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,0.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-light .navbar-toggler {
    border-color: rgba(255,255,255,0.4) !important;
}
/* Fix collapsed navbar dropdown — dark background so white text stays visible */
.navbar-light .navbar-collapse.show,
.navbar-light .navbar-collapse.collapsing {
    background: var(--brand-dark) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0 0 4px 4px !important;
    position: relative !important;
    z-index: 1050 !important;
}
/* In mobile dropdown, switch icon+text items from column (sidebar style) to row */
@media (max-width: 575px) {
    .navbar-collapse .nav-icon-text {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 6px 0 !important;
    }
    .navbar-collapse .nav-icon-text .ms-Icon {
        font-size: 1em !important;
    }
    .navbar-collapse .nav-text {
        font-size: 0.85em !important;
        text-align: left !important;
    }
}

/* ── Brand logo ───────────────────────────────────────────────── */
.brand-logo {
  display: inline-flex !important;
  align-items: end !important;
  gap: 8px !important;
  font-size: 1.15em !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
  padding: 0 !important;
}
.brand-logo .ms-Icon {
  font-size: 1.25em !important;
  margin-right: 0 !important;
  color: #60a5fa !important;
}

/* ── Sidebar customer header (dark 40px strip) ────────────────── */
.sidebar-customer-header {
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  justify-content: center !important;
  background: var(--brand-dark) !important;
  color: #93c5fd !important;
  font-size: 0.78em !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 0 !important;
}

/* ── Sidebar colors only ──────────────────────────────────────── */
#sidebar,
#sidebar .sidebar-header      { background: #ffffff !important; color: #1f2937 !important; }
#sidebar ul li a              { background: #ffffff !important; color: #1f2937 !important; }
#sidebar                      { background: #ffffff !important; padding-top: 0 !important; }
#sidebar ul li a:hover        { background: #eff6ff !important; color: #2563eb !important; }
#sidebar ul li.active > a,
a[aria-expanded="true"]       { background: #dbeafe !important; color: #1d4ed8 !important; }
.activeLink,
#sidebar ul li a.activeLink    { background-color: #dbeafe !important; color: #1d4ed8 !important; }
ul ul a                       { background: #f8fafc !important; color: #1f2937 !important; }
a.download, a.download:hover  { background: #dbeafe !important; color: #1d4ed8 !important; }

/* Section headings */
#sidebar .sidebar-header h4,
#sidebar .sidebar-section-middle h4 {
  color: #6b7280 !important;
  background: #ffffff !important;
  margin-top: 8px !important;
  padding-top: 3px !important;
  padding-bottom: 8px !important;  
  border-bottom: 1px solid #e5e7eb !important;
}

/* Beta badge */
.beta-label {
  background-color: #dbeafe !important;
  color: #1d4ed8 !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb       { background: #cbd5e1 !important; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }

/* ── site.css color overrides ─────────────────────────────────── */
h2   { color: #1e3a5f; }
h3   { background-color: #1e3a5f; }
.nav-link { color: rgba(255,255,255,0.88) !important; }
.jumbotron { border: none !important; }

/* Left border on content — only visible below the 40px dark toolbar */
.content { position: relative !important; }
.content::before {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 0;
  width: 1px;
  background: #e5e7eb;
  pointer-events: none;
}

/* Right border on sidebar — only on white portion */
.sidebar-sections {
  border-right: 1px solid #e5e7eb !important;
}

/* ── Bootstrap components ─────────────────────────────────────── */
.btn-primary                    { background-color: var(--accent); border-color: var(--accent); }
.btn-primary:hover,
.btn-primary:focus              { background-color: #1d4ed8; border-color: #1d4ed8; }
.btn-outline-primary            { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover      { background-color: var(--accent); }
.dropdown-item:hover            { background-color: var(--active-bg); color: var(--active-text); }
.dropdown-item.active           { background-color: var(--accent); color: white; }
.form-control:focus,
.form-select:focus              { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(37,99,235,0.2); }
.modal-header .btn-close        { filter: invert(1) grayscale(1) brightness(2); }
.modal-content                  { box-shadow: 0 8px 32px rgba(13,27,42,0.18); }
.nav-tabs .nav-link.active      { color: var(--active-text); border-bottom-color: var(--accent); }
.nav-pills .nav-link.active     { background-color: var(--accent); }
.badge.bg-primary               { background-color: var(--accent) !important; }
.page-item.active .page-link    { background-color: var(--accent); border-color: var(--accent); }
.page-link                      { color: var(--accent); }