/*
 * SkillsRanker – Brand Theme Overrides
 * Botswana Innovation Hub
 *
 * Loaded LAST in index.html so these rules win over app.min.css.
 * Maps the Minton template's hardcoded colours to BIH's palette.
 *
 *   Template navy  #2a3042  →  BIH navy   #1a2035
 *   Template blue  #556ee6  →  BIH gold   #e2b537
 *   Template dark  rgb(49,49,50) → #1a2035
 *   Template grey  #545a6d  →  #5c6680
 * ─────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════
   1. Google Fonts
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   2. Global tokens (available to any inline style via var())
   ══════════════════════════════════════════════════════════════════ */
:root {
  --brand-navy:       #1a2035;
  --brand-navy-mid:   #242b42;
  --brand-gold:       #e2b537;
  --brand-gold-hover: #c99f2a;
  --brand-gold-light: #fdf3d1;
  --color-bg:         #f0f2f7;
  --color-surface:    #ffffff;
  --color-border:     #e4e7ef;
  --text-primary:     #1a2035;
  --text-secondary:   #5c6680;
  --text-muted:       #9ca3b8;
  --font-sans: 'Inter', 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════
   3. Base
   ══════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-sans) !important;
  background-color: var(--color-bg) !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════
   4. Topbar
   ══════════════════════════════════════════════════════════════════ */
#page-topbar,
body[data-topbar="dark"] #page-topbar,
body[data-layout="horizontal"] #page-topbar,
body[data-layout="horizontal"][data-topbar="dark"] #page-topbar,
body[data-layout="horizontal"][data-topbar="colored"] #page-topbar {
  background-color: var(--brand-navy) !important;
  box-shadow: 0 2px 16px rgba(26, 32, 53, 0.28) !important;
}

/* Logo brand box background */
.navbar-brand-box,
body[data-sidebar="dark"] .navbar-brand-box {
  background: var(--brand-navy) !important;
}

/* Keep the navy logo box within the 70px topbar. The light logo ships at
   height=150, which otherwise stretches the box to 150px and spills a navy
   block ~40px below the header on the left. Clamp the box and size the logo. */
.navbar-brand-box {
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
.navbar-brand-box .logo img,
.navbar-brand-box .logo-lg img,
.navbar-brand-box .logo-sm img {
  max-height: 60px !important;
  width: auto !important;
}

/* Topbar text / icon colour */
body[data-topbar="dark"] .header-item,
body[data-topbar="dark"] .header-item:hover,
body[data-layout="horizontal"][data-topbar="dark"] .header-item {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

body[data-topbar="dark"] .header-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* Power / icon buttons */
body[data-topbar="dark"] .noti-icon i {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Profile avatar border */
.header-profile-user {
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  transition: border-color 0.15s ease !important;
}

body[data-topbar="dark"] .header-profile-user {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════
   5. Top Navigation Bar
   ══════════════════════════════════════════════════════════════════ */
.topnav,
body[data-layout="horizontal"][data-topbar="light"] .topnav,
body[data-layout="horizontal"][data-topbar="colored"] .topnav {
  background-color: var(--color-surface) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 1px 4px rgba(26, 32, 53, 0.06) !important;
}

/* Nav links – default */
.topnav .navbar-nav .nav-link,
body[data-layout="horizontal"][data-topbar="light"] .topnav .navbar-nav .nav-link,
body[data-layout="horizontal"][data-topbar="colored"] .topnav .navbar-nav .nav-link {
  color: var(--text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 1rem 1.1rem !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
}

/* Nav links – hover & active */
.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .nav-link:focus,
.topnav .navbar-nav .nav-item .nav-link.active,
.topnav .navbar-nav .dropdown.active > a,
body[data-layout="horizontal"] .topnav .navbar-nav .nav-link:hover,
body[data-layout="horizontal"] .topnav .navbar-nav .dropdown.active > a,
body[data-layout="horizontal"][data-topbar="colored"] .topnav .navbar-nav .nav-link:hover,
body[data-layout="horizontal"][data-topbar="colored"] .topnav .navbar-nav > .dropdown.active > a {
  color: var(--brand-navy) !important;
  background-color: transparent !important;
  border-bottom-color: var(--brand-gold) !important;
}

/* Dropdown items */
.topnav .navbar-nav .dropdown-item,
.topnav .dropdown-item {
  color: var(--text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.topnav .navbar-nav .dropdown-item.active,
.topnav .navbar-nav .dropdown-item:hover,
.topnav .dropdown-item:hover {
  color: var(--brand-navy) !important;
  background-color: var(--brand-gold-light) !important;
}

.topnav .dropdown .dropdown-menu {
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(26, 32, 53, 0.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   6. Buttons
   ══════════════════════════════════════════════════════════════════ */

/* Primary */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #ffffff !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--brand-navy-mid) !important;
  border-color: var(--brand-navy-mid) !important;
  box-shadow: 0 4px 14px rgba(26, 32, 53, 0.3) !important;
}

/* Gold accent button */
.btn-accent {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: var(--brand-navy) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--brand-gold-hover) !important;
  border-color: var(--brand-gold-hover) !important;
  color: var(--brand-navy) !important;
  box-shadow: 0 4px 14px rgba(226, 181, 55, 0.4) !important;
}

/* Outline primary */
.btn-outline-primary {
  border-color: var(--brand-navy) !important;
  color: var(--brand-navy) !important;
  border-radius: 8px !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #fff !important;
}

/* General button font */
.btn {
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* ══════════════════════════════════════════════════════════════════
   7. Links & Anchors
   ══════════════════════════════════════════════════════════════════ */
a {
  color: var(--brand-navy) !important;
  transition: color 0.15s ease !important;
}

a:hover { color: var(--brand-navy) !important; }

/* Nav-links should NOT be gold — override back */
.topnav .navbar-nav .nav-link,
.topnav .dropdown-item,
#page-topbar .btn.header-item,
#page-topbar a.btn.header-item,
.footer a,
.breadcrumb-item a {
  color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════
   8. Cards
   ══════════════════════════════════════════════════════════════════ */
.card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(26, 32, 53, 0.07) !important;
  transition: box-shadow 0.22s ease !important;
}

.card:hover {
  box-shadow: 0 6px 20px rgba(26, 32, 53, 0.12) !important;
}

.card-body {
  padding: 1.5rem !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 1rem 1.5rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
}

.card-title {
  font-family: var(--font-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════
   9. Form Controls
   ══════════════════════════════════════════════════════════════════ */
.form-control {
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  color: var(--text-primary) !important;
  background-color: var(--color-surface) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: 8px !important;
  padding: 0.6rem 0.875rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control::placeholder { color: var(--text-muted) !important; }

.form-control:focus {
  border-color: var(--brand-navy) !important;
  box-shadow: 0 0 0 3px rgba(26, 32, 53, 0.12) !important;
  background-color: var(--color-surface) !important;
}

label, .control-label {
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 0.4rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   10. Nav Pills
   ══════════════════════════════════════════════════════════════════ */
.nav-pills .nav-link {
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.nav-pills .nav-link:hover {
  background: #f0f2f7 !important;
  color: var(--text-primary) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--brand-gold) !important;
  color: var(--brand-navy) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════
   11. Tables
   ══════════════════════════════════════════════════════════════════ */
.table {
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  color: var(--text-primary) !important;
}

.table thead th {
  font-family: var(--font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
  background-color: #f7f8fc !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0.75rem 1rem !important;
}

.table tbody td {
  border-bottom: 1px solid var(--color-border) !important;
  padding: 1rem !important;
  vertical-align: middle !important;
  color: var(--text-secondary) !important;
}

.table tbody tr:hover td {
  background-color: #f7f8fc !important;
}

/* ══════════════════════════════════════════════════════════════════
   12. Badges
   ══════════════════════════════════════════════════════════════════ */
.badge {
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 0.35em 0.75em !important;
  border-radius: 999px !important;
}

.badge-primary, .bg-primary { background-color: var(--brand-navy) !important; }
.badge-warning, .bg-warning { background-color: var(--brand-gold) !important; color: var(--brand-navy) !important; }
.badge-soft-primary {
  background-color: rgba(26, 32, 53, 0.1) !important;
  color: var(--brand-navy) !important;
}

/* ══════════════════════════════════════════════════════════════════
   13. Modals
   ══════════════════════════════════════════════════════════════════ */
.modal-content {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(26, 32, 53, 0.18) !important;
  overflow: hidden !important;
}

.modal-header {
  background-color: var(--brand-navy) !important;
  border-bottom: none !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-title {
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.modal-header .close {
  color: rgba(255, 255, 255, 0.7) !important;
}

.modal-body {
  padding: 1.5rem !important;
  /* Use background-color (not the `background` shorthand) so an inline
     background-image on a modal body — e.g. the landing-page event banner —
     is not reset to none. */
  background-color: var(--color-surface) !important;
}

.modal-footer {
  background: #f7f8fc !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 1rem 1.5rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   14. Progress Bars
   ══════════════════════════════════════════════════════════════════ */
.progress {
  background-color: var(--color-border) !important;
  border-radius: 999px !important;
  height: 6px !important;
}

.progress-bar {
  background-color: var(--brand-gold) !important;
}

.progress-bar.bg-primary,
.bg-primary.progress-bar {
  background-color: var(--brand-navy) !important;
}

/* ══════════════════════════════════════════════════════════════════
   15. Pagination
   ══════════════════════════════════════════════════════════════════ */
.page-link {
  color: var(--brand-navy) !important;
  border-color: var(--color-border) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
}

.page-link:hover {
  background-color: var(--brand-gold-light) !important;
  color: var(--brand-navy) !important;
}

.page-item.active .page-link {
  background-color: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════
   16. Sidebar (if ever activated)
   ══════════════════════════════════════════════════════════════════ */
#sidebar-menu ul li a,
.mm-active > a,
#sidebar-menu ul li ul.sub-menu li a:hover,
#sidebar-menu ul li a:hover {
  color: var(--brand-gold) !important;
}

.metismenu li.mm-active > a {
  color: var(--brand-gold) !important;
}

/* ══════════════════════════════════════════════════════════════════
   17. Typography
   ══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans) !important;
  color: var(--text-primary) !important;
  /* Hero / slider section overrides live in theme.css under
     .event-detail__hero and .slider-area selectors with higher
     specificity, also using !important, so they win over this rule. */
}

p, span, small, li, td, th, label {
  font-family: var(--font-sans) !important;
}

/* Page title */
.page-title-box {
  padding: 1.5rem 0 !important;
}

.page-title-box h4 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════
   18. Footer
   ══════════════════════════════════════════════════════════════════ */
.footer {
  background-color: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 1.25rem 1.5rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════
   19. Scrollbar (Webkit)
   ══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f2f7; }
::-webkit-scrollbar-thumb {
  background: #c5cad8;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #a0a8ba; }

/* ══════════════════════════════════════════════════════════════════
   20. Login / Auth Pages  (skeleton.css overrides)
   ══════════════════════════════════════════════════════════════════ */

/* Main login card wrapper */
.login-wrapper {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 48px rgba(26, 32, 53, 0.16) !important;
  background: #ffffff !important;
}

/* Left panel (form side) */
.login-signup-form {
  background: #ffffff !important;
  padding: 2.5rem !important;
}

.login-signup-form h2 {
  font-family: var(--font-sans) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--brand-navy) !important;
  margin-bottom: 1.5rem !important;
}

/* Inputs */
.login-signin-input.form-control {
  border: 1.5px solid var(--color-border) !important;
  border-radius: 8px !important;
  padding: 0.65rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9rem !important;
  color: var(--text-primary) !important;
  background: #f7f8fc !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.login-signin-input.form-control:focus {
  border-color: var(--brand-navy) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(26, 32, 53, 0.1) !important;
}

/* LOGIN button — overrides skeleton.css rgb(144,57,47) !important */
.login-btn {
  background-color: var(--brand-navy) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.6rem 2.5rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
  width: 100% !important;
}

.login-btn:hover,
.login-btn:focus {
  background-color: var(--brand-navy-mid) !important;
  box-shadow: 0 4px 14px rgba(26, 32, 53, 0.3) !important;
  color: #fff !important;
}

/* Register / secondary button — sits on the dark right panel */
.signup-1-btn {
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 0.6rem 2.5rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  background: transparent !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.signup-1-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  color: #fff !important;
}

/* Right panel (branding side) */
.signup-message {
  background: linear-gradient(150deg, var(--brand-navy) 0%, #2e3754 100%) !important;
  border-left: none !important;
}

.signup-message h1,
.signup-message p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.signup-message .signup-message-wrapper h1 {
  font-family: var(--font-sans) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.signup-message .signup-message-wrapper p {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Vertical divider between panels */
.vl { border-left: 1px solid rgba(255,255,255,0.15) !important; }

/* Landing-page stat counters rendered as bordered cards.
   Scoped to the .sr-counter-cards container so the other counter row
   (hackathons/businesses/tech) is unaffected. The old vl/vr divider lines
   are neutralised here since each counter now has a full border. */
.sr-counter-cards .vl,
.sr-counter-cards .vr { border: 0 !important; }

.sr-counter-cards .single-counter {
  border: 1px solid #d9deeb;
  border-radius: 10px;
  background: #ffffff;
  padding: 26px 16px;
  margin: 10px;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sr-counter-cards .single-counter:hover {
  border-color: var(--brand-gold, #e2b537);
  box-shadow: 0 6px 18px rgba(26, 32, 53, 0.08);
}

/* Remove the Bootstrap column gutter inside this block so the gap between the
   two middle cards (which straddle the col boundary) matches the gaps within
   each column — all four cards end up evenly spaced by their own 10px margins. */
.sr-counter-cards .row { margin-left: 0; margin-right: 0; }
.sr-counter-cards [class*="col-"] { padding-left: 0; padding-right: 0; }

/* Forgot password / muted links on login page */
.login-signup-form .text-muted {
  color: var(--text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
}

.login-signup-form .text-muted:hover {
  color: var(--brand-gold) !important;
}

/* ══════════════════════════════════════════════════════════════════
   21. Wizard (contest creation steps)
   ══════════════════════════════════════════════════════════════════ */
.wizard__header {
  background: var(--brand-navy) !important;
}

.step.-completed .checkmark__circle,
.step.-completed .checkmark__check {
  stroke: var(--brand-gold) !important;
}

.line.-progress {
  background-color: var(--brand-gold) !important;
}

/* ══════════════════════════════════════════════════════════════════
   21. Header & Footer text → white (backgrounds unchanged)
   Applies app-wide wherever the landing-template header/footer appear.
   ══════════════════════════════════════════════════════════════════ */

/* Header navigation links — white by default */
.header-area .main-menu ul li a,
.second-menu .main-menu ul li a {
  color: #ffffff !important;
}

/* Active item in a distinct gold; hover also gold. No underline. */
.header-area .main-menu ul li.active > a,
.second-menu .main-menu ul li.active > a {
  color: var(--brand-gold) !important;
  font-weight: 700 !important;
}
.header-area .main-menu ul li:hover > a,
.second-menu .main-menu ul li:hover > a {
  color: var(--brand-gold) !important;
  text-decoration: none !important;
}

/* Footer text → soft off-white for gentler contrast than pure white.
   Two footers exist: .page-footer (Footer partial, main landing + most pages)
   and .footer-bg (LandingPage2). !important beats the inline color:white on
   the partial's elements. */
.footer-bg,
.footer-bg p,
.footer-text p,
.footer-widget .widgettitle,
.footer-widget p,
.footer-widget a,
.footer-widget .widget ul li a,
.footer-social a,
.copyright-text,
.copyright-text p,
.copyright-text a,
.page-footer,
.page-footer p,
.page-footer h6,
.page-footer a,
.page-footer i,
.page-footer .contacts,
.page-footer .footer-copyright {
  color: #e9edf5 !important;
}

/* ══════════════════════════════════════════════════════════════════
   22. Dashboard (admin) top navigation
   app.min.css renders the horizontal topbar menu white for some
   data-topbar variants and can leave a gap under the fixed header.
   Force dark menu text (all variants) and close the gap.
   ══════════════════════════════════════════════════════════════════ */

/* Remove any gap between the fixed #page-topbar and the menu */
.topnav,
body[data-layout] .topnav,
body[data-layout="horizontal"] .topnav {
  margin-top: 0 !important;
}

/* Pull the page content up under the fixed topbar to close the gap */
body[data-layout="horizontal"] .page-content {
  margin-top: -70px;
}

/* Developer (/profile) and Business (/business) app layouts reserve the fixed
   white topnav's height so content clears BOTH fixed bars (navy topbar 70px +
   white topnav ~57px) instead of sliding underneath it. AdminWrapper is
   deliberately excluded (no .sr-app-layout class) — its dashboard relies on the
   -70px .page-content tightening above, which is cancelled here where the
   opposite is needed. */
.sr-app-layout {
  padding-top: 16px;
}
.sr-app-layout .page-content {
  margin-top: 0 !important;
}
/* The secondary white .topnav menu bar renders empty/collapsed on these
   layouts (its links are hidden and navigation lives in the header + page
   sidebars), leaving just a white strip under the header. Remove it. */
.sr-app-layout .topnav {
  display: none !important;
}
/* Taller header on the app layouts so a larger (100px) logo fits without
   spilling below. Admin dashboard keeps the default 70px header. */
.sr-app-layout #page-topbar,
.sr-app-layout .navbar-header,
.sr-app-layout .navbar-brand-box {
  height: 84px !important;
  min-height: 84px !important;
}
.sr-app-layout .navbar-brand-box img {
  max-height: 70px !important;
}
/* Remove the padding/centering space around the logo so it sits flush-left
   with no surrounding gap. */
.sr-app-layout .navbar-brand-box {
  padding: 0 !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.sr-app-layout .navbar-brand-box .logo,
.sr-app-layout .navbar-brand-box .logo-lg,
.sr-app-layout .navbar-brand-box .logo-sm {
  margin: 0 !important;
  padding: 0 !important;
}

/* Menu links + their icons → near-black, regardless of data-topbar */
.topnav .navbar-nav .nav-link,
.topnav .navbar-nav .nav-link i,
.topnav .navbar-nav .nav-link .bx,
body[data-layout] .topnav .navbar-nav .nav-link,
body[data-layout="horizontal"][data-topbar="dark"] .topnav .navbar-nav .nav-link,
body[data-layout="horizontal"][data-topbar="light"] .topnav .navbar-nav .nav-link,
body[data-layout="horizontal"][data-topbar="colored"] .topnav .navbar-nav .nav-link {
  color: #1a2035 !important;
}

/* Hover / active keep the gold underline accent */
.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .nav-link.active,
.topnav .navbar-nav .nav-item.active > .nav-link,
body[data-layout="horizontal"][data-topbar="dark"] .topnav .navbar-nav .nav-link:hover {
  color: #1a2035 !important;
  border-bottom-color: var(--brand-gold) !important;
}