/* orkidata brand overrides for SB Admin 2
 * Loaded after sb-admin-2.min.css so these declarations win the cascade.
 * Only overrides: typography (Nunito -> Inter) and brand accent
 * (SB Admin 2 primary blue -> --ok-purple). Neutral grays and
 * success/danger/warning/info colors are intentionally left alone.
 */

/* Derived hover shade. Not a new palette value — only used for
   interactive-state contrast on buttons and links. */
:root {
  --ok-purple-hover: #3E1F9E;
}

/* Typography */
body {
  font-family: var(--ok-font-ui);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ok-font-ui);
}

/* Links */
a {
  color: var(--ok-purple);
}
a:hover,
a:focus {
  color: var(--ok-purple-hover);
}

/* Primary buttons */
.btn-primary {
  background-color: var(--ok-purple);
  border-color: var(--ok-purple);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--ok-purple-hover);
  border-color: var(--ok-purple-hover);
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(78, 40, 199, 0.5);
}

/* Outline primary buttons */
.btn-outline-primary {
  color: var(--ok-purple);
  border-color: var(--ok-purple);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ok-purple);
  border-color: var(--ok-purple);
  color: #fff;
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(78, 40, 199, 0.5);
}

/* Utilities */
.bg-primary {
  background-color: var(--ok-purple) !important;
}
.text-primary {
  color: var(--ok-purple) !important;
}
.border-primary {
  border-color: var(--ok-purple) !important;
}

/* Gradient utility — SB Admin 2 applies .bg-gradient-primary to two
   surfaces: the sidebar (tall, variable-height) and auth-page bodies
   (login / register / forgot-password — full viewport). A single
   stretched linear-gradient on both is visually unstable across
   viewport sizes, so they're handled separately below. */

/* Auth-page body backgrounds keep the expressive purple->teal
   gradient — these pages are marketing-adjacent, short-lived, and
   benefit from the full brand gradient. */
body.bg-gradient-primary {
  background-color: var(--ok-purple) !important;
  background-image: var(--ok-gradient) !important;
}

/* Sidebar: solid brand purple with a fixed-height teal accent band
   pinned to the bottom via a pseudo-element. Using a fixed pixel
   height keeps the gradient band visually identical across viewport
   heights, unlike a stretched linear-gradient on a 100vh container. */
.sidebar.bg-gradient-primary,
#accordionSidebar.bg-gradient-primary {
  background: var(--ok-purple) !important;
  background-image: none !important;
  position: relative;
}
.sidebar.bg-gradient-primary::after,
#accordionSidebar.bg-gradient-primary::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  background: linear-gradient(to bottom, transparent 0%, rgba(22, 199, 193, 0.6) 100%);
  pointer-events: none;
  z-index: 0;
}
.sidebar > * {
  position: relative;
  z-index: 1;
}

/* Sidebar brand — full stacked lockup when sidebar is expanded,
   glyph-only when sidebar is collapsed (.sidebar.toggled). Both
   images live in the DOM; CSS swaps visibility based on toggle state. */
.sidebar .sidebar-brand {
  padding: 1.25rem 0.5rem;
  height: auto;
  min-height: 4.375rem;
}
.sidebar .sidebar-brand-full {
  width: 80%;
  max-width: 10rem;
  height: auto;
}
.sidebar .sidebar-brand-glyph {
  display: none;
  width: 60%;
  max-width: 3rem;
  height: auto;
}
.sidebar.toggled .sidebar-brand-full {
  display: none;
}
.sidebar.toggled .sidebar-brand-glyph {
  display: inline-block;
}