/* ================================================================
   VISARO BRAND THEME — HR Admin Portal
   Aligns Horilla with Visaro's brand identity.

   Tokens:
     --v-navy:    #1A1A31  (deepBlue — sidebar, primary buttons)
     --v-orange:  #EA5C29  (action accent — CTA buttons, active)
     --v-green:   #5FCF86  (success / positive)
     --v-mint:    #DCFEBC  (light success tint)
     Font: Space Grotesk (Google Fonts)
   ================================================================ */

/* ── 1. Space Grotesk font ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ── 2. CSS tokens ── */
:root {
  --v-navy:        #1A1A31;
  --v-navy-light:  #252548;
  --v-navy-hover:  rgba(255,255,255,0.07);
  --v-orange:      #EA5C29;
  --v-orange-dark: #C84D1E;
  --v-orange-pale: rgba(234,92,41,0.12);
  --v-green:       #5FCF86;
  --v-green-dark:  #3daa62;
  --v-mint:        #DCFEBC;
}

/* ── 3. Typography ── */
body,
input, select, textarea, button,
.oh-sidebar,
.oh-navbar,
.oh-modal,
.oh-auth-card {
  font-family: 'Space Grotesk', 'Poppins', -apple-system, system-ui, sans-serif !important;
}

/* ── 4. Sidebar ── */
.oh-sidebar {
  background-color: var(--v-navy) !important;
}

.oh-sidebar__company-profile {
  background-color: var(--v-orange) !important;
}

.oh-sidebar__submenu {
  background-color: #13132a !important;
}

.oh-sidebar__menu-link--active {
  background-color: var(--v-orange-pale) !important;
  border-left: 3px solid var(--v-orange) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding-left: calc(0.85rem - 3px) !important;
}

.oh-sidebar__menu-link:hover {
  background-color: var(--v-navy-hover) !important;
  opacity: 1 !important;
}

/* ── 5. Topbar / Navbar ── */
.oh-navbar {
  border-bottom: 3px solid var(--v-orange) !important;
  background-color: #ffffff !important;
}

/* ── 6. Input focus ── */
.oh-input:focus,
.oh-input:focus-visible,
select:focus,
select:focus-visible {
  outline: var(--v-navy) solid 1px !important;
  border: 1px solid var(--v-navy) !important;
  box-shadow: 0 0 0 3px rgba(234,92,41,0.12) !important;
}

/* ── 7. Buttons ── */

/* Secondary = Visaro orange (primary action) */
.oh-btn--secondary,
.oh-btn--secondary:visited {
  background-color: var(--v-orange) !important;
  color: #fff !important;
}
.oh-btn--secondary:hover,
.oh-btn--secondary:focus,
.oh-btn--secondary:focus-visible {
  background-color: var(--v-orange-dark) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.oh-btn--secondary:disabled {
  background-color: var(--v-orange) !important;
  opacity: 0.55 !important;
}

/* Secondary outline */
.oh-btn--secondary-ouline,
.oh-btn--secondary-outline {
  border: 1px solid var(--v-orange) !important;
  color: var(--v-orange) !important;
  background-color: transparent !important;
}
.oh-btn--secondary-ouline:hover,
.oh-btn--secondary-outline:hover {
  background-color: var(--v-orange) !important;
  color: #fff !important;
}
.oh-btn--secondary-ouline:focus,
.oh-btn--secondary-ouline:focus-visible,
.oh-btn--secondary-outline:focus,
.oh-btn--secondary-outline:focus-visible {
  color: var(--v-orange-dark) !important;
  border-color: var(--v-orange-dark) !important;
  background-color: transparent !important;
}

/* Primary = deep navy */
.oh-btn--primary {
  background-color: var(--v-navy) !important;
  color: #fff !important;
}
.oh-btn--primary:hover,
.oh-btn--primary:focus,
.oh-btn--primary:focus-visible {
  background-color: var(--v-navy-light) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.oh-btn--primary-outline {
  background-color: transparent !important;
  border: 1px solid var(--v-navy) !important;
  color: var(--v-navy) !important;
}
.oh-btn--primary-outline:hover,
.oh-btn--primary-outline:focus,
.oh-btn--primary-outline:focus-visible {
  background-color: var(--v-navy) !important;
  color: #fff !important;
}

/* Secondary link */
.oh-btn--secondary-link,
.oh-btn--secondary-link:visited {
  color: var(--v-orange) !important;
  background-color: transparent !important;
}
.oh-btn--secondary-link:hover,
.oh-btn--secondary-link:focus,
.oh-btn--secondary-link:focus-visible {
  color: var(--v-orange-dark) !important;
}

/* Success = Visaro green */
.oh-btn--success {
  background-color: var(--v-green) !important;
  color: #fff !important;
}
.oh-btn--success:hover,
.oh-btn--success:focus,
.oh-btn--success:focus-visible {
  background-color: var(--v-green-dark) !important;
}

/* ── 8. Badges ── */
.oh-badge--secondary {
  background-color: var(--v-orange) !important;
  color: #fff !important;
}

.oh-badge--info {
  background-color: var(--v-navy) !important;
  color: #fff !important;
}

/* ── 9. Checkpoint badges ── */
.oh-checkpoint-badge--secondary {
  color: var(--v-orange) !important;
  border-color: var(--v-orange) !important;
}

/* ── 10. Dots ── */
.oh-dot--secondary {
  background-color: var(--v-orange) !important;
}

/* ── 11. Text helpers ── */
.oh-text--secondary {
  color: var(--v-orange) !important;
}

/* ── 12. Links ── */
.oh-link--secondary,
.oh-link--secondary:visited {
  color: var(--v-orange) !important;
}
.oh-link--secondary:hover,
.oh-link--secondary:focus,
.oh-link--secondary:focus-visible {
  color: var(--v-orange-dark) !important;
}

/* ── 13. Dropdown hover ── */
.oh-dropdown__link:hover {
  color: var(--v-orange) !important;
}

/* ── 14. Progress bars ── */
.oh-progress__bar--secondary,
.oh-progress__bar--table-secondary {
  background-color: var(--v-orange) !important;
}

/* ── 15. Profile active badge ── */
.oh-profile__active-badge--secondary {
  background-color: var(--v-orange) !important;
}

/* ── 16. Tabs ── */
.oh-tabs__tab--active {
  border-top: 2px solid var(--v-orange) !important;
  border-bottom: 1px solid #fff !important;
  color: var(--v-orange) !important;
}
.oh-tabs__tab:hover {
  color: var(--v-orange) !important;
}

/* ── 17. Bootstrap primary overrides ── */
:root {
  --bs-primary: var(--v-orange) !important;
  --bs-secondary: var(--v-navy) !important;
  --bs-orange: var(--v-orange) !important;
}
.text-primary { color: var(--v-orange) !important; }
.bg-primary    { background-color: var(--v-orange) !important; }
.btn-primary   { background-color: var(--v-orange) !important; border-color: var(--v-orange) !important; }
.btn-primary:hover { background-color: var(--v-orange-dark) !important; border-color: var(--v-orange-dark) !important; }

/* ── 18. Login / Auth page ── */
body:has(.oh-auth) {
  background: linear-gradient(150deg, #1A1A31 0%, #13132a 40%, #0d0d1e 100%) !important;
  min-height: 100vh;
}
.oh-auth-card {
  border-top: 4px solid var(--v-orange) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.28) !important;
}

/* ── 19. Page background tint ── */
body {
  background-color: #F5F7FF !important;
}
/* The main content wrapper (inside sidebar) keeps a slightly blue-white tint */
#main {
  background-color: #F5F7FF !important;
}

/* ── 20. Alert/notification secondary ── */
.oh-alert--secondary {
  background-color: var(--v-orange-pale) !important;
  border-color: var(--v-orange) !important;
  color: var(--v-orange-dark) !important;
}

/* ── 21. Always show main content area ──
   Horilla hides #main-section-data via inline style="display:none" and
   reveals it in saveFilters.js. If that JS fails (bad localStorage JSON,
   script error, etc.) the entire content area stays blank. CSS !important
   beats inline styles, so this guarantees the area is always visible. */
#main-section-data {
  display: block !important;
}