/**
 * RIZÓÖ — Custom theme overrides
 *
 * Overrides Vuexy/Bootstrap CSS variables with RIZÓÖ brand colors.
 * Must be loaded AFTER core.css.
 *
 * Brand palette:
 *   Primary:         #E03728  (warm red)
 *   Primary dark:    #C02F22  (hover states)
 *   Primary subtle:  #FDE8E6  (background tints)
 *   Body bg:         #F8F7F7  (content area)
 *   Login bg:        #F5F0EE  (auth pages)
 *   Text dark:       #3D4154
 *   Text secondary:  #9194A9
 */

/* ─────────────────────────────────────────────────
   1. Bootstrap & Vuexy CSS variable overrides
   ───────────────────────────────────────────────── */
:root,
[data-skin="default"],
[data-bs-theme="light"] {
  --bs-primary:                #E03728;
  --bs-primary-rgb:            224, 55, 40;
  --bs-primary-text-emphasis:  #7a1e17;
  --bs-primary-bg-subtle:      #fde8e6;
  --bs-primary-border-subtle:  #f4a49e;
  --bs-btn-focus-shadow-rgb:   224, 55, 40;
  --bs-link-color:             #E03728;
  --bs-link-color-rgb:         224, 55, 40;
  --bs-link-hover-color:       #C02F22;
  --bs-link-hover-color-rgb:   192, 47, 34;
}

/* ─────────────────────────────────────────────────
   2. Bootstrap 5 button components
   ───────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:                 #E03728;
  --bs-btn-border-color:       #E03728;
  --bs-btn-hover-bg:           #C02F22;
  --bs-btn-hover-border-color: #B52B1F;
  --bs-btn-active-bg:          #B52B1F;
  --bs-btn-active-border-color:#AA281D;
  --bs-btn-disabled-bg:        #E03728;
  --bs-btn-disabled-border-color: #E03728;
}

.btn-outline-primary {
  --bs-btn-color:              #E03728;
  --bs-btn-border-color:       #E03728;
  --bs-btn-hover-bg:           #E03728;
  --bs-btn-hover-border-color: #E03728;
  --bs-btn-hover-color:        #fff;
  --bs-btn-active-bg:          #E03728;
  --bs-btn-active-border-color:#E03728;
  --bs-btn-active-color:       #fff;
}

/* ─────────────────────────────────────────────────
   3. Utility helpers
   ───────────────────────────────────────────────── */
.text-primary        { color: #E03728 !important; }
.bg-primary          { background-color: #E03728 !important; }
.border-primary      { border-color: #E03728 !important; }
.bg-label-primary    { background-color: #fde8e6 !important; color: #E03728 !important; }

/* ─────────────────────────────────────────────────
   4. Form controls
   ───────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: #E03728;
  box-shadow: 0 0 0 0.2rem rgba(224, 55, 40, 0.15);
}

.form-check-input:checked {
  background-color: #E03728;
  border-color:     #E03728;
}

/* ─────────────────────────────────────────────────
   5. Navigation & badges
   ───────────────────────────────────────────────── */
.nav-pills .nav-link.active           { background-color: #E03728; }
.page-item.active .page-link          { background-color: #E03728; border-color: #E03728; }
.progress-bar.bg-primary              { background-color: #E03728 !important; }
.badge.bg-primary                     { background-color: #E03728 !important; }

/* ─────────────────────────────────────────────────
   6. Vuexy sidebar / menu active state
   ───────────────────────────────────────────────── */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
.menu-vertical .menu-item:not(.menu-item-closing) > .menu-toggle.active {
  color: #FFF;
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
.menu-vertical .menu-item.active > .menu-link .menu-icon i {
  color: #FFF;
}

/* Sidebar brand logo */
.app-brand-logo .rizoo-icon {
  color: #E03728;
  font-size: 1.75rem;
  line-height: 1;
}

.app-brand {
  height: 64px;
}

/* ─────────────────────────────────────────────────
   7. Avatar / user initials
   ───────────────────────────────────────────────── */
.avatar-initial.bg-primary,
.bg-primary .avatar-initial {
  background-color: #E03728 !important;
}

/* ─────────────────────────────────────────────────
   8. Login / authentication pages
   ───────────────────────────────────────────────── */

/* Left panel: full-bleed photo */
.auth-cover-photo {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  block-size: 100vh;
  inline-size: 100%;
}

/* Right panel: brand background */
.auth-rizoo-bg {
  background-color: #F5F0EE;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Decorative shape behind the card (echoes the design) */
.auth-rizoo-bg::before {
  content: '';
  position: absolute;
  top: 10%;
  right: -3rem;
  width: 18rem;
  height: 22rem;
  background-color: rgba(224, 55, 40, 0.08);
  border-radius: 2rem;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}

.auth-rizoo-bg > * {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────
   9. Dropdown links
   ───────────────────────────────────────────────── */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #E03728;
}

/* ─────────────────────────────────────────────────
   10. Base template
   ───────────────────────────────────────────────── */
.layout-page .layout-navbar {
  background-color: transparent;
  box-shadow: none;
}