/* ==========================================================================
   HOA VIEN BINH AN - DESIGN SYSTEM V1.1
   Luxury Memorial Park Design Tokens & Theme Stylesheet
   ========================================================================== */

/* 1. Design Tokens (:root) */
:root {
  /* Brand Core Colors */
  --hv-color-persimmon: #E4A02E;      /* Primary Brand Color - 70% */
  --hv-color-pullman-brown: #673E17;  /* Secondary Brand Color - Text, Sidebar, Dark Surfaces */
  --hv-color-pastel-peach: #F0CCA7;   /* Tertiary Brand Color - Background Fills */
  --hv-color-after-shock: #FEC35A;    /* Accent Color - 30% */

  /* Persimmon Tints */
  --hv-color-persimmon-100: #E4A02E;
  --hv-color-persimmon-80:  #EAB355;
  --hv-color-persimmon-60:  #EFC27B;
  --hv-color-persimmon-40:  #F4D1A2;
  --hv-color-persimmon-20:  #FAE8D0;

  /* Pullman Brown Tints */
  --hv-color-brown-100: #673E17;
  --hv-color-brown-80:  #856445;
  --hv-color-brown-60:  #A48B74;
  --hv-color-brown-40:  #C2B1A2;
  --hv-color-brown-20:  #E1D8D0;

  /* Pastel Peach Tints */
  --hv-color-peach-100: #F0CCA7;
  --hv-color-peach-80:  #F3D6B9;
  --hv-color-peach-60:  #F6E0CA;
  --hv-color-peach-40:  #F9EBDC;
  --hv-color-peach-20:  #FCF5ED;

  /* After Shock Tints */
  --hv-color-aftershock-100: #FEC35A;
  --hv-color-aftershock-80:  #FECE7B;
  --hv-color-aftershock-60:  #FED99C;
  --hv-color-aftershock-40:  #FFE4BD;
  --hv-color-aftershock-20:  #FFF2DE;

  /* Neutral Spectrum */
  --hv-neutral-0:   #FFFFFF;
  --hv-neutral-50:  #FAFAF9;
  --hv-neutral-100: #F4F1EC;
  --hv-neutral-200: #E8E0D5;
  --hv-neutral-300: #D5C9B8;
  --hv-neutral-400: #BCA898;
  --hv-neutral-500: #9E8672;
  --hv-neutral-600: #7D654F;
  --hv-neutral-700: #5C4736;
  --hv-neutral-800: #3B2D20;
  --hv-neutral-900: #1E1510;

  /* Semantic Colors */
  --hv-bg-default: #FFFFFF;
  --hv-bg-section: #F0CCA7;
  --hv-bg-dark:    #673E17;
  --hv-bg-overlay: rgba(103, 62, 23, 0.5);

  --hv-text-primary:   #673E17;
  --hv-text-secondary: #9E8672;
  --hv-text-light:     #FFFFFF;
  --hv-text-highlight: #E4A02E;
  --hv-text-disabled:  #C2B1A2;

  --hv-border-default: rgba(103, 62, 23, 0.15);
  --hv-border-strong:  #673E17;
  --hv-border-brand:   #E4A02E;
  --hv-border-focus:   #E4A02E;
  --hv-border-error:   #C0392B;

  /* Status Colors */
  --hv-status-success-base:    #27AE60;
  --hv-status-success-surface: #EAFAF1;
  --hv-status-success-text:    #1E8449;
  --hv-status-success-border:  #A9DFBF;

  --hv-status-warning-base:    #E4A02E;
  --hv-status-warning-surface: #FEF9EE;
  --hv-status-warning-text:    #9A6B0A;
  --hv-status-warning-border:  #FEC35A;

  --hv-status-danger-base:     #C0392B;
  --hv-status-danger-surface:  #FDEDEC;
  --hv-status-danger-text:     #922B21;
  --hv-status-danger-border:   #F1948A;

  --hv-status-info-base:       #2980B9;
  --hv-status-info-surface:    #EBF5FB;
  --hv-status-info-text:       #1A5276;
  --hv-status-info-border:     #85C1E9;

  /* Gradients */
  --hv-gradient-brand: linear-gradient(90deg, #E4A02E 0%, #FEC35A 100%);
  --hv-gradient-brand-diagonal: linear-gradient(135deg, #E4A02E 0%, #FEC35A 100%);
  --hv-gradient-sidebar: linear-gradient(180deg, #3B2D20 0%, #673E17 60%, #856445 100%);
  --hv-gradient-sidebar-brand: linear-gradient(135deg, #673E17 0%, #E4A02E 100%);

  /* Typography */
  --hv-font-primary: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hv-font-secondary: 'Crimson Pro', Georgia, serif;

  /* Shadows */
  --hv-shadow-xs: 0 1px 3px 0 rgba(103, 62, 23, 0.08);
  --hv-shadow-sm: 0 2px 8px 0 rgba(103, 62, 23, 0.08);
  --hv-shadow-md: 0 6px 20px 0 rgba(103, 62, 23, 0.10);
  --hv-shadow-lg: 0 12px 40px 0 rgba(103, 62, 23, 0.12);

  /* Border Radii */
  --hv-radius-sm:   4px;
  --hv-radius-md:   8px;
  --hv-radius-lg:   12px;
  --hv-radius-xl:   16px;
  --hv-radius-pill: 999px;
}

/* ==========================================================================
   2. Base Typography & Global Overrides
   ========================================================================== */
body {
  font-family: var(--hv-font-primary);
  color: var(--hv-text-primary);
  background-color: var(--hv-neutral-50);
}

h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .brand-heading {
  font-family: var(--hv-font-secondary);
  color: var(--hv-text-primary);
  font-weight: 700;
}

h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--hv-font-primary);
  color: var(--hv-text-primary);
  font-weight: 600;
}

a {
  color: var(--hv-color-persimmon);
  transition: color 150ms ease-in-out;
}
a:hover {
  color: #CB8E22;
  text-decoration: none;
}

/* ==========================================================================
   3. SB Admin 2 Component Overrides
   ========================================================================== */

/* --- Sidebar Theme --- */
.bg-gradient-primary {
  background-color: var(--hv-color-pullman-brown) !important;
  background-image: var(--hv-gradient-sidebar) !important;
  background-size: cover !important;
}

.sidebar-dark .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 500;
  transition: all 200ms ease-in-out;
}

.sidebar-dark .nav-item .nav-link:hover {
  color: #FFFFFF !important;
  background: rgba(228, 160, 46, 0.20) !important;
  border-radius: var(--hv-radius-md);
}

.sidebar-dark .nav-item.active .nav-link {
  color: #FFFFFF !important;
  background: rgba(228, 160, 46, 0.35) !important;
  font-weight: 700 !important;
  border-radius: var(--hv-radius-md);
  border-left: 4px solid var(--hv-color-persimmon);
}

.sidebar-dark .nav-item .nav-link i {
  color: var(--hv-color-after-shock) !important;
}

.sidebar-dark .nav-item.active .nav-link i {
  color: #FFFFFF !important;
}

.sidebar-dark .sidebar-heading {
  color: var(--hv-color-pastel-peach) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.sidebar-dark #sidebarToggle {
  background-color: rgba(228, 160, 46, 0.25) !important;
}
.sidebar-dark #sidebarToggle:hover {
  background-color: var(--hv-color-persimmon) !important;
}

/* --- Topbar & Header Navbar --- */
.topbar {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--hv-border-default) !important;
  box-shadow: var(--hv-shadow-xs) !important;
}

.topbar .nav-item .nav-link {
  color: var(--hv-text-primary) !important;
.sidebar-dark .collapse-inner,
.sidebar .collapse-inner {
  background-color: #3B2D20 !important;
  border: 1px solid rgba(228, 160, 46, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  padding: 0.5rem 0 !important;
}

.sidebar-dark .collapse-inner .collapse-header,
.sidebar .collapse-inner .collapse-header {
  color: #F0CCA7 !important;
  font-weight: 700 !important;
}

.sidebar-dark .collapse-inner .collapse-item,
.sidebar .collapse-inner .collapse-item {
  color: #E1D8D0 !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.2s ease !important;
}

.sidebar-dark .collapse-inner .collapse-item:hover,
.sidebar .collapse-inner .collapse-item:hover {
  color: #FFFFFF !important;
  background-color: rgba(228, 160, 46, 0.25) !important;
}

.sidebar-dark .collapse-inner .collapse-item.active,
.sidebar .collapse-inner .collapse-item.active {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #E4A02E 0%, #CB8E22 100%) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(228, 160, 46, 0.4) !important;
}

.topbar .dropdown-menu {
  border-radius: var(--hv-radius-md);
  box-shadow: var(--hv-shadow-md);
  border: 1px solid var(--hv-border-default);
}

/* --- Primary & Action Buttons --- */
.btn-primary {
  background-color: var(--hv-color-persimmon) !important;
  border-color: var(--hv-color-persimmon) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  border-radius: var(--hv-radius-md);
  box-shadow: 0 2px 8px 0 rgba(103, 62, 23, 0.18);
  transition: all 150ms ease-in-out !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #CB8E22 !important;
  border-color: #CB8E22 !important;
  box-shadow: 0 4px 14px 0 rgba(103, 62, 23, 0.25);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--hv-color-pullman-brown) !important;
  border-color: var(--hv-color-pullman-brown) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  border-radius: var(--hv-radius-md);
}

.btn-secondary:hover {
  background-color: #523011 !important;
  border-color: #523011 !important;
}

.btn-outline-primary {
  color: var(--hv-color-pullman-brown) !important;
  border-color: var(--hv-color-pullman-brown) !important;
  background-color: transparent !important;
  font-weight: 600;
  border-radius: var(--hv-radius-md);
}

.btn-outline-primary:hover {
  background-color: var(--hv-neutral-100) !important;
  color: var(--hv-color-pullman-brown) !important;
}

.btn-success {
  background-color: var(--hv-status-success-base) !important;
  border-color: var(--hv-status-success-base) !important;
  color: #FFFFFF !important;
  border-radius: var(--hv-radius-md);
}

.btn-danger {
  background-color: var(--hv-status-danger-base) !important;
  border-color: var(--hv-status-danger-base) !important;
  color: #FFFFFF !important;
  border-radius: var(--hv-radius-md);
}

/* --- Cards & Containers --- */
.card {
  border-radius: var(--hv-radius-lg) !important;
  border: 1px solid var(--hv-border-default) !important;
  box-shadow: var(--hv-shadow-sm) !important;
  background-color: #FFFFFF;
}

.card-header {
  background-color: var(--hv-neutral-50) !important;
  border-bottom: 1px solid var(--hv-border-default) !important;
  font-family: var(--hv-font-primary);
  font-weight: 700;
  color: var(--hv-color-pullman-brown);
}

/* --- Form Controls --- */
.form-control {
  border-radius: var(--hv-radius-md) !important;
  border: 1.5px solid rgba(103, 62, 23, 0.20) !important;
  color: var(--hv-text-primary);
  transition: all 150ms ease-in-out;
}

.form-control:focus {
  border-color: var(--hv-color-persimmon) !important;
  box-shadow: 0 0 0 3px rgba(228, 160, 46, 0.20) !important;
}

/* --- DataTables Modern Styling --- */
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--hv-radius-md) !important;
  border: 1.5px solid rgba(103, 62, 23, 0.20) !important;
  color: var(--hv-color-pullman-brown) !important;
  font-weight: 700;
}

.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--hv-color-persimmon) !important;
  box-shadow: 0 0 0 3px rgba(228, 160, 46, 0.20) !important;
}

.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--hv-radius-pill) !important;
  border: 1.5px solid rgba(103, 62, 23, 0.20) !important;
  color: var(--hv-color-pullman-brown) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--hv-color-persimmon) !important;
  box-shadow: 0 0 0 3px rgba(228, 160, 46, 0.20) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--hv-radius-md) !important;
  border: 1px solid var(--hv-neutral-300) !important;
  background: #FFFFFF !important;
  color: var(--hv-text-primary) !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--hv-color-persimmon) !important;
  color: #FFFFFF !important;
  border-color: var(--hv-color-persimmon) !important;
  box-shadow: 0 2px 6px rgba(228, 160, 46, 0.35) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--hv-neutral-100) !important;
  color: var(--hv-color-pullman-brown) !important;
}

/* --- Badges --- */
.badge {
  font-weight: 600;
  border-radius: var(--hv-radius-pill);
  padding: 4px 10px;
}

.badge-primary {
  background-color: rgba(228, 160, 46, 0.18) !important;
  color: #9A6B0A !important;
  border: 1px solid var(--hv-color-persimmon-40);
}

.badge-success {
  background-color: var(--hv-status-success-surface) !important;
  color: var(--hv-status-success-text) !important;
  border: 1px solid var(--hv-status-success-border);
}

.badge-warning {
  background-color: var(--hv-status-warning-surface) !important;
  color: var(--hv-status-warning-text) !important;
  border: 1px solid var(--hv-status-warning-border);
}

.badge-danger {
  background-color: var(--hv-status-danger-surface) !important;
  color: var(--hv-status-danger-text) !important;
  border: 1px solid var(--hv-status-danger-border);
}

.badge-info {
  background-color: var(--hv-status-info-surface) !important;
  color: var(--hv-status-info-text) !important;
  border: 1px solid var(--hv-status-info-border);
}

/* ==========================================================================
   4. Legacy Green & Emerald Global Overrides (Hoa Vien Design System v1.1)
   ========================================================================== */

/* Overriding Header Banners & Gradient Cards */
.service-header,
.user-header,
.user-register-header,
.bg-gradient-emerald,
.bg-gradient-primary {
  background: linear-gradient(135deg, #3B2D20 0%, #673E17 60%, #856445 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 30px rgba(103, 62, 23, 0.25) !important;
}

/* Overriding Legacy Utility Classes */
.text-emerald {
  color: var(--hv-color-pullman-brown) !important;
}

.bg-emerald,
.badge-emerald {
  background-color: var(--hv-color-pullman-brown) !important;
  color: #FFFFFF !important;
}

.btn-emerald {
  background-color: var(--hv-color-persimmon) !important;
  color: #FFFFFF !important;
  border: none !important;
  transition: all 150ms ease-in-out !important;
}

.btn-emerald:hover {
  background-color: #CB8E22 !important;
  color: #FFFFFF !important;
}

/* Attribute Selectors for Inline Style Overrides */
[style*="#047857"],
[style*="#065f46"],
[style*="#064e3b"],
[style*="#0d9488"] {
  color: var(--hv-color-pullman-brown);
}

[style*="background:#047857"],
[style*="background: #047857"],
[style*="background-color:#047857"],
[style*="background-color: #047857"],
[style*="background:#065f46"],
[style*="background: #065f46"],
[style*="background-color:#065f46"] {
  background-color: var(--hv-color-pullman-brown) !important;
  color: #FFFFFF !important;
}

[style*="linear-gradient(135deg, #047857"],
[style*="linear-gradient(135deg, #10b981"],
[style*="linear-gradient(180deg, #064e3b"],
[style*="linear-gradient(145deg, #064e3b"] {
  background: linear-gradient(135deg, #3B2D20 0%, #673E17 60%, #856445 100%) !important;
}

/* Shared Page Banner Component Style */
.hv-page-banner,
.contract-header,
.contract-header-banner,
.order-header,
.product-header,
.service-header,
.digital-asset-header,
.report-header,
.card-header-gradient {
  background: var(--hv-gradient-sidebar, linear-gradient(135deg, #3B2D20 0%, #673E17 60%, #856445 100%)) !important;
  color: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 22px 28px !important;
  box-shadow: 0 10px 30px rgba(103, 62, 23, 0.25) !important;
}

/* Avatar Circles for Sales / Users */
.avatar-circle {
  background: linear-gradient(135deg, #673E17 0%, #E4A02E 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(103, 62, 23, 0.2) !important;
}

/* Active Filter Pills */
.btn-filter.active,
.badge-filter.active,
.nav-pills .nav-link.active,
.filter-pill.active,
a[style*="background:#047857"],
a[style*="background: #047857"] {
  background-color: var(--hv-color-pullman-brown) !important;
  color: #FFFFFF !important;
  border-color: var(--hv-color-pullman-brown) !important;
  box-shadow: 0 4px 12px rgba(103, 62, 23, 0.25) !important;
}

/* Currency & Price Text Colors */
.text-price,
.text-amount,
.price-value {
  color: var(--hv-color-pullman-brown) !important;
  font-weight: 700 !important;
}

/* Outline Approve Buttons (.btn-outline-success / Approve Action) */
.btn-outline-success,
.btn-outline-emerald {
  color: var(--hv-color-pullman-brown) !important;
  border-color: var(--hv-color-pullman-brown) !important;
}

.btn-outline-success:hover,
.btn-outline-emerald:hover {
  background-color: var(--hv-color-persimmon) !important;
  border-color: var(--hv-color-persimmon) !important;
  color: #FFFFFF !important;
}

/* Sidebar Dropdown Sub-menu High Specificity Override */
#accordionSidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapse .collapse-inner,
.sidebar-dark .collapse-inner {
  background-color: #3B2D20 !important;
  border: 1px solid rgba(228, 160, 46, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 0.5rem 0 !important;
}

#accordionSidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar-dark .collapse-inner .collapse-item {
  color: #F0CCA7 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  margin: 3px 8px !important;
  padding: 0.55rem 1rem !important;
  transition: all 0.2s ease !important;
  background-color: transparent !important;
}

#accordionSidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar-dark .collapse-inner .collapse-item:hover {
  color: #FFFFFF !important;
  background-color: rgba(228, 160, 46, 0.25) !important;
  text-decoration: none !important;
}

#accordionSidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar-dark .collapse-inner .collapse-item.active {
  color: #3B2D20 !important;
  background: linear-gradient(135deg, #E4A02E 0%, #FEC35A 100%) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(228, 160, 46, 0.4) !important;
}