/* ==========================================================================
   Avril Haute Parfumerie & Couture — Design System
   Source of Truth: DESIGN.md
   ========================================================================== */

:root {
  /* --- Canvas & Surfaces --- */
  --canvas-default: #faf8f5;
  --canvas-surface: #ffffff;
  --surface-subtle: #f5f1eb;
  --surface-muted: #efece6;
  --surface-dim: #dbdad7;
  --surface-bright: #fbf9f6;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f5f3f0;
  --surface-container: #efeeeb;
  --surface-container-high: #eae8e5;
  --surface-container-highest: #e4e2df;

  /* --- Ink & Typography --- */
  --ink-primary: #161514;
  --ink-secondary: #5e5954;
  --ink-tertiary: #948e85;
  --on-surface: #1b1c1a;
  --on-surface-variant: #4a4640;

  /* --- Accents & Metallics --- */
  --accent-champagne: #c5a880;
  --accent-champagne-light: #f7f2ea;
  --accent-bronze: #9e7d53;
  --secondary: #725b38;
  --secondary-container: #fedeb2;
  --on-secondary-container: #78603e;

  /* --- Borders & Dividers --- */
  --border-delicate: #e8e2d9;
  --border-focus: #c5a880;
  --outline-variant: #cdc5bd;

  /* --- Typography Families --- */
  --font-editorial: 'Playfair Display', 'Tajawal', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Radii Tokens --- */
  --radius-pill: 9999px;
  --radius-card: 1.5rem;   /* 24px */
  --radius-card-lg: 1.75rem; /* 28px */
  --radius-modal: 2rem;    /* 32px */
  --radius-inset: 1rem;    /* 16px */
  --radius-sm: 0.5rem;     /* 8px */

  /* --- Depth & Elevation --- */
  --shadow-ambient: 0 16px 36px -8px rgba(197, 168, 128, 0.16), 0 6px 16px -2px rgba(22, 21, 20, 0.04);
  --shadow-subtle: 0 4px 20px rgba(22, 21, 20, 0.04);
  --shadow-modal: 0 28px 60px -12px rgba(22, 21, 20, 0.10);
  --shadow-focus-ring: 0 0 0 4px rgba(197, 168, 128, 0.14);
}

/* --------------------------------------------------------------------------
   1. GLOBAL SANCTUARY FOUNDATION
   -------------------------------------------------------------------------- */
body,
html,
body.vertical-layout {
  background-color: var(--canvas-default) !important;
  color: var(--ink-primary);
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}

.app-content,
.app-content .content-wrapper,
.content-body {
  background-color: var(--canvas-default) !important;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY HIERARCHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.card-title,
.content-header-title,
.brand-text,
.editorial-title {
  font-family: var(--font-editorial);
  color: var(--ink-primary) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p, span, a, td, th, li, label, input, button, select, textarea {
  font-family: var(--font-body);
}

.text-muted,
.text-secondary {
  color: var(--ink-secondary) !important;
}

/* --------------------------------------------------------------------------
   3. SCULPTED CARDS & CONTAINERS
   -------------------------------------------------------------------------- */
.card,
.card-analytics,
.content-wrapper .card {
  background: var(--canvas-surface) !important;
  border-radius: var(--radius-card) !important;
  border: 1px solid rgba(22, 21, 20, 0.05) !important;
  box-shadow: 0 16px 36px -8px rgba(197, 168, 128, 0.12), 0 6px 16px -2px rgba(22, 21, 20, 0.03) !important;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-ambient) !important;
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--surface-subtle) !important;
  padding: 1.4rem 1.75rem !important;
}

.card-body {
  padding: 1.75rem !important;
}

.card-footer {
  background-color: var(--surface-subtle) !important;
  border-top: 1px solid var(--border-delicate) !important;
}

/* --------------------------------------------------------------------------
   4. PILL BUTTONS (ACTIONS)
   -------------------------------------------------------------------------- */
.btn:not(.btn-icon):not(.dropdown-toggle-split),
.main-btn {
  border-radius: var(--radius-pill) !important;
  font-weight: 500 !important;
  padding: 0.65rem 1.6rem !important;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-sm,
.main-btn.sm {
  padding: 0.45rem 1.1rem !important;
  font-size: 0.85rem !important;
}

.btn-lg,
.main-btn.lg {
  padding: 0.85rem 2.2rem !important;
  font-size: 1.05rem !important;
}

/* Primary Pill Action: Deep Obsidian with Bronze & Champagne Hover */
.btn-primary,
.main-btn:not(.white):not(.transparent):not(.yellow-transparent):not(.red) {
  background: var(--ink-primary) !important;
  border: 1.5px solid var(--ink-primary) !important;
  color: var(--canvas-default) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.main-btn:not(.white):not(.transparent):not(.yellow-transparent):not(.red):hover {
  background: var(--accent-bronze) !important;
  border-color: var(--accent-bronze) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(197, 168, 128, 0.28) !important;
  transform: translateY(-1px);
}

/* Secondary Pill Action: Champagne Gold Outline */
.btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid var(--accent-champagne) !important;
  color: var(--ink-primary) !important;
  box-shadow: none !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--accent-champagne-light) !important;
  border-color: var(--accent-bronze) !important;
  color: var(--accent-bronze) !important;
  box-shadow: 0 4px 16px rgba(197, 168, 128, 0.18) !important;
}

/* Circular Icon Buttons */
.btn-icon-circle {
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-subtle) !important;
  color: var(--ink-primary) !important;
  border: none !important;
  transition: all 0.2s ease;
}

.btn-icon-circle:hover {
  background-color: var(--surface-muted) !important;
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   5. PILL INPUT FIELDS & FORMS
   -------------------------------------------------------------------------- */
.form-control:not(textarea) {
  border-radius: var(--radius-pill) !important;
  background-color: var(--canvas-surface) !important;
  border: 1px solid var(--border-delicate) !important;
  color: var(--ink-primary) !important;
  padding: 0.65rem 1.4rem !important;
  height: auto !important;
  min-height: 46px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
  color: var(--ink-tertiary) !important;
  opacity: 0.85;
}

.form-control:focus {
  border-color: var(--accent-champagne) !important;
  box-shadow: var(--shadow-focus-ring) !important;
  outline: none !important;
}

textarea.form-control {
  border-radius: var(--radius-card) !important;
  background-color: var(--canvas-surface) !important;
  border: 1px solid var(--border-delicate) !important;
  color: var(--ink-primary) !important;
  padding: 1rem 1.25rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.form-control:focus {
  border-color: var(--accent-champagne) !important;
  box-shadow: var(--shadow-focus-ring) !important;
  outline: none !important;
}

.input-group .form-control:first-child {
  border-top-left-radius: var(--radius-pill) !important;
  border-bottom-left-radius: var(--radius-pill) !important;
}
.input-group .form-control:last-child {
  border-top-right-radius: var(--radius-pill) !important;
  border-bottom-right-radius: var(--radius-pill) !important;
}

/* Select2 Pill Capsules */
.select2-container--default .select2-selection--single {
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border-delicate) !important;
  background-color: var(--canvas-surface) !important;
  height: 46px !important;
  padding: 0.45rem 1.2rem !important;
  display: flex !important;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink-primary) !important;
  padding: 0 !important;
}

.select2-dropdown {
  border-radius: var(--radius-inset) !important;
  border: 1px solid var(--border-delicate) !important;
  box-shadow: var(--shadow-ambient) !important;
  background: var(--canvas-surface) !important;
  overflow: hidden;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--accent-champagne-light) !important;
  color: var(--accent-bronze) !important;
}

/* Custom File Uploads */
.custom-file {
  border-radius: var(--radius-pill) !important;
}
.custom-file-label {
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border-delicate) !important;
  background-color: var(--canvas-surface) !important;
  color: var(--ink-secondary) !important;
  height: 46px !important;
  display: flex !important;
  align-items: center;
  padding-inline: 1.4rem !important;
}
.custom-file-label::after {
  border-radius: var(--radius-pill) !important;
  background-color: var(--ink-primary) !important;
  border: 1px solid var(--ink-primary) !important;
  color: var(--canvas-default) !important;
  height: calc(100% - 6px) !important;
  margin: 3px !important;
  display: flex !important;
  align-items: center;
  padding: 0 1.4rem !important;
  transition: all 0.2s ease;
}
.custom-file:hover .custom-file-label::after {
  background-color: var(--accent-bronze) !important;
  border-color: var(--accent-bronze) !important;
}

/* --------------------------------------------------------------------------
   6. BADGES & STATUS CHIPS (PILL SILHOUETTES)
   -------------------------------------------------------------------------- */
.badge {
  border-radius: var(--radius-pill) !important;
  padding: 0.45em 1.1em !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  font-size: 0.78rem !important;
}

.badge-light-primary {
  background-color: var(--accent-champagne-light) !important;
  color: var(--accent-bronze) !important;
  border: 1px solid rgba(197, 168, 128, 0.3) !important;
}

.badge-light-success {
  background-color: rgba(40, 199, 111, 0.12) !important;
  color: #1e8e4f !important;
  border: 1px solid rgba(40, 199, 111, 0.25) !important;
}

.badge-light-danger {
  background-color: #ffdad6 !important;
  color: #ba1a1a !important;
  border: 1px solid rgba(186, 26, 26, 0.2) !important;
}

.badge-light-warning {
  background-color: #fedeb2 !important;
  color: #78603e !important;
  border: 1px solid rgba(120, 96, 62, 0.2) !important;
}

.badge-light-info {
  background-color: rgba(0, 207, 232, 0.12) !important;
  color: #008da0 !important;
  border: 1px solid rgba(0, 207, 232, 0.25) !important;
}

/* --------------------------------------------------------------------------
   7. FLOATING HEADER & NAVBAR
   -------------------------------------------------------------------------- */
.header-navbar.floating-nav {
  background: rgba(250, 248, 245, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(22, 21, 20, 0.06) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 8px 24px rgba(22, 21, 20, 0.04) !important;
  margin-top: 1rem !important;
}

.header-navbar .navbar-container {
  padding-inline: 1.5rem !important;
}

/* --------------------------------------------------------------------------
   8. SIDEBAR & NAVIGATION (AVRIL EDITORIAL)
   -------------------------------------------------------------------------- */
.main-menu.menu-light {
  background: var(--canvas-surface) !important;
  border-right: 1px solid var(--border-delicate) !important;
  box-shadow: 0 4px 24px rgba(22, 21, 20, 0.03) !important;
}

html[lang="ar"] .main-menu.menu-light,
html[data-textdirection="rtl"] .main-menu.menu-light {
  border-left: 1px solid var(--border-delicate) !important;
  border-right: none !important;
}

.main-menu.menu-light .navbar-header {
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid var(--surface-subtle);
}

.main-menu .navigation > li.nav-item {
  padding: 3px 0;
}

.main-menu .navigation > li.nav-item > a {
  border-radius: var(--radius-pill) !important;
  margin-inline: 14px !important;
  color: var(--ink-secondary) !important;
  padding: 10px 18px !important;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.main-menu .navigation > li.nav-item:not(.active) > a:hover {
  background-color: var(--surface-subtle) !important;
  color: var(--ink-primary) !important;
  transform: translateX(4px);
}

html[lang="ar"] .main-menu .navigation > li.nav-item:not(.active) > a:hover,
html[data-textdirection="rtl"] .main-menu .navigation > li.nav-item:not(.active) > a:hover {
  transform: translateX(-4px);
}

/* Active Item: Deep Obsidian Capsule with Box Shadow */
.main-menu .navigation > li.active > a,
.main-menu.menu-light .navigation > li.active > a {
  background: #333 !important;
  box-shadow: 2px 3px 5px #555 !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
}

.main-menu .navigation > li.active > a i,
.main-menu .navigation > li.active > a span,
.main-menu .navigation > li.active > a .feather {
  color: #ffffff !important;
}

.main-menu .navigation .navigation-header {
  color: var(--ink-tertiary) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 600;
  padding: 1.5rem 1.75rem 0.5rem !important;
}

/* --------------------------------------------------------------------------
   9. TABLES & DATA LISTS
   -------------------------------------------------------------------------- */
.table-responsive {
  border-radius: var(--radius-card);
}

.table,
.main-table {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--border-delicate) !important;
  background-color: var(--canvas-surface) !important;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th,
.main-table thead th {
  background-color: var(--surface-subtle) !important;
  color: var(--ink-primary) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--border-delicate) !important;
  border-top: none !important;
}

.table tbody td,
.main-table tbody td {
  padding: 1.1rem 1.25rem !important;
  color: var(--on-surface-variant) !important;
  border-bottom: 1px solid var(--surface-subtle) !important;
  vertical-align: middle !important;
}

.table tbody tr:last-child td,
.main-table tbody tr:last-child td {
  border-bottom: none !important;
}

.table tbody tr:hover,
.main-table tbody tr:hover {
  background-color: var(--surface-bright) !important;
}

/* --------------------------------------------------------------------------
   10. FLOATING MODALS & DIALOGS
   -------------------------------------------------------------------------- */
.modal-content {
  border-radius: var(--radius-modal) !important;
  border: 1px solid rgba(22, 21, 20, 0.06) !important;
  box-shadow: var(--shadow-modal) !important;
  background: var(--canvas-surface) !important;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--surface-subtle) !important;
  padding: 1.5rem 2rem !important;
  background-color: var(--canvas-surface) !important;
}

.modal-header .modal-title {
  font-family: var(--font-editorial);
  color: var(--ink-primary) !important;
  font-weight: 600;
  font-size: 1.25rem;
}

.modal-body {
  padding: 2rem !important;
  color: var(--ink-secondary);
}

.modal-footer {
  border-top: 1px solid var(--surface-subtle) !important;
  padding: 1.25rem 2rem !important;
  background-color: var(--surface-subtle) !important;
}

/* --------------------------------------------------------------------------
   11. DROPDOWNS & ACTION MENUS
   -------------------------------------------------------------------------- */
.dropdown-menu {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--border-delicate) !important;
  box-shadow: var(--shadow-ambient) !important;
  padding: 0.5rem !important;
  background: var(--canvas-surface) !important;
}

.dropdown-item {
  border-radius: var(--radius-pill) !important;
  padding: 0.6rem 1.2rem !important;
  color: var(--ink-primary) !important;
  font-size: 0.9rem !important;
  transition: all 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--accent-champagne-light) !important;
  color: var(--accent-bronze) !important;
}

/* --------------------------------------------------------------------------
   12. PAGINATION
   -------------------------------------------------------------------------- */
.pagination .page-item .page-link {
  border-radius: var(--radius-pill) !important;
  margin: 0 4px !important;
  border: 1px solid var(--border-delicate) !important;
  color: var(--ink-primary) !important;
  background-color: var(--canvas-surface) !important;
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pagination .page-item.active .page-link {
  background-color: var(--ink-primary) !important;
  border-color: var(--ink-primary) !important;
  color: var(--canvas-default) !important;
  box-shadow: 0 4px 12px rgba(22, 21, 20, 0.2) !important;
}

.pagination .page-item:not(.active) .page-link:hover {
  background-color: var(--accent-champagne-light) !important;
  border-color: var(--accent-champagne) !important;
  color: var(--accent-bronze) !important;
}