/**
 * 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;
}

/* ─────────────────────────────────────────────────
   11. Wizard de creació de procés comunitari
   ───────────────────────────────────────────────── */
.wizard-step {
  width: 120px;
}

.wizard-step-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FDE8E6;
  font-size: 1.5rem;
  color: #E03728;
}

.wizard-step.active .wizard-step-icon {
  background: #E03728;
  color: #fff;
}

.wizard-step.completed .wizard-step-icon {
  background: #FDE8E6;
  color: #E03728;
  opacity: 0.7;
}

.wizard-step-label {
  color: #3D4154;
  font-size: 0.78rem;
}

.wizard-step.active .wizard-step-label {
  font-weight: 700;
}

.wizard-step.completed .wizard-step-label {
  color: #9194A9;
}

a.wizard-step {
  text-decoration: none;
}

.wizard-step.clickable {
  cursor: pointer;
}

.wizard-step.clickable .wizard-step-icon {
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.wizard-step.clickable:hover .wizard-step-icon {
  background: #C02F22;
  color: #fff;
  opacity: 1;
}

.wizard-step.clickable:hover .wizard-step-label {
  color: #C02F22;
}

/* ─────────────────────────────────────────────────
   12. Observatori — document list components
   ───────────────────────────────────────────────── */

/* Document type icon wrapper */
.doc-icon-wrapper {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #FDE8E6;
  color: #E03728;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

/* Drag & drop upload zone */
.dropzone-area {
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  background: #F8F7F7;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dropzone-area:hover,
.dropzone-area:focus-within {
  border-color: #E03728;
  background: #FDE8E6;
}

.dropzone-area.dragover {
  border-color: #E03728;
  background: #FDE8E6;
  box-shadow: 0 0 0 3px rgba(224, 55, 40, 0.15);
}

.dropzone-area .dropzone-icon {
  font-size: 2.5rem;
  color: #9194A9;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.dropzone-area:hover .dropzone-icon,
.dropzone-area.dragover .dropzone-icon {
  color: #E03728;
}

/* IA validation pending badge */
.badge-ia {
  background-color: #F59E0B;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25em 0.5em;
  border-radius: 4px;
}