/* =========================================================================
   MANIBHADRA GOLD & AASHI ORNAMENT — CENTRAL THEME CONFIGURATION
   Central Source of Truth for Project Color Theme
   Primary Theme Color: #5C6859 (Sage / Forest Olive Slate)
   Main Background Color: #FDEAEA (Warm Soft Rose / Ivory Blush)
   Any change made here updates the whole project across Superadmin, Admin, Staff, and Customer portals.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  /* --- Fonts --- */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-nav:     'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-btn:     'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-number:  'Inter', 'Poppins', -apple-system, system-ui, sans-serif;

  /* --- Brand Core Primary (#5C6859 - "else all") --- */
  --primary:           #5C6859;
  --primary-hover:     #4d584a;
  --primary-dark:      #3d473b;
  --primary-darker:    #2d352b;
  --primary-light:     #788674;
  --primary-subtle:    rgba(92, 104, 89, 0.08);
  --primary-muted:     rgba(92, 104, 89, 0.14);
  --primary-border:    rgba(92, 104, 89, 0.22);
  --primary-border2:   rgba(92, 104, 89, 0.42);
  --primary-glow:      rgba(92, 104, 89, 0.20);
  --primary-glow-lg:   rgba(92, 104, 89, 0.35);

  /* --- Secondary & Accents --- */
  --secondary:         #82917f;
  --secondary-hover:   #71806e;
  --secondary-light:   #f6ecec;
  --secondary-dark:    #475244;
  --secondary-subtle:  rgba(92, 104, 89, 0.15);
  --secondary-border:  rgba(92, 104, 89, 0.35);

  /* --- Main Background (#FDEAEA - "main bg color") & Surfaces --- */
  --bg:                #FDEAEA;
  --bg-2:              #fae0e0;
  --bg-sand:           #FDEAEA;
  --bg-card:           #ffffff;
  --bg-card-2:         #fff8f8;
  --bg-glass:          rgba(255, 255, 255, 0.94);
  --bg-glass-2:        rgba(253, 234, 234, 0.96);
  --cream:             #FDEAEA;
  --portal-bg:         #FDEAEA;
  --portal-card-bg:    #ffffff;
  --sidebar-bg:        #ffffff;
  --sidebar-border:    rgba(92, 104, 89, 0.15);
  --sidebar-width:     260px;
  --header-height:     64px;

  /* --- Neutrals & Text --- */
  --text:              #232822;
  --text-dark:         #1a2019;
  --text-sm:           #424c40;
  --text-dim:          #5b6658;
  --text-muted:        #6a7567;
  --text-placeholder:  #949e92;
  --text-inverse:      #ffffff;
  --dark:              #232822;

  /* --- Gradients --- */
  --primary-gradient:        linear-gradient(135deg, #5C6859 0%, #3d473b 100%);
  --secondary-gradient:      linear-gradient(135deg, #82917f 0%, #5C6859 100%);
  --brand-gradient:          linear-gradient(135deg, #5C6859 0%, #788674 100%);
  --brand-gradient-subtle:   linear-gradient(135deg, rgba(92, 104, 89, 0.08) 0%, rgba(253, 234, 234, 0.45) 100%);
  --header-gradient:         linear-gradient(135deg, #5C6859 0%, #3d473b 100%);
  --admin-header-bg:         linear-gradient(135deg, #5C6859 0%, #3d473b 100%);
  --card-gradient:           linear-gradient(180deg, #ffffff 0%, #fdf7f7 100%);

  /* --- Legacy Aliases for Full Compatibility --- */
  --gold:              var(--primary);
  --gold-light:        #788674;
  --gold-dark:         var(--primary-dark);
  --gold-vivid:        var(--primary);
  --gold-border:       var(--primary-border);
  --gold-border2:      var(--primary-border2);
  --gold-glow:         var(--primary-glow);
  --gold-glow2:        var(--primary-glow-lg);
  --champagne:         #FDEAEA;
  --portal-btn:        var(--primary);
  --portal-btn-hover:  var(--primary-hover);
  --portal-gold:       var(--primary);
  --portal-gold-light: #788674;
  --portal-text:       var(--text);
  --portal-border:     var(--primary-border);
  --theme-color:       var(--primary);
  --theme-dark:        var(--primary-dark);
  --theme-light:       #788674;
  --btn-dark:          var(--primary);
  --btn-dark-hover:    var(--primary-hover);
  --rose:              var(--primary);
  --rose-light:        #FDEAEA;

  /* --- Status Indicators --- */
  --success:           #16a34a;
  --success-bg:        #f0fdf4;
  --success-border:    #bbf7d0;
  --warning:           #d97706;
  --warning-bg:        #fffbeb;
  --warning-border:    #fde68a;
  --danger:            #dc2626;
  --danger-bg:         #fef2f2;
  --danger-border:     #fecaca;
  --info:              #0284c7;
  --info-bg:           #f0f9ff;
  --info-border:       #bae6fd;

  /* --- Radii & Shadows --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow:      0 4px 20px rgba(92, 104, 89, 0.08);
  --shadow-sm:   0 2px 8px rgba(92, 104, 89, 0.06);
  --shadow-md:   0 6px 20px rgba(92, 104, 89, 0.10);
  --shadow-lg:   0 12px 40px rgba(92, 104, 89, 0.15);
  --shadow-gold: 0 0 24px rgba(92, 104, 89, 0.22);
  --shadow-card: 0 2px 14px rgba(35, 40, 34, 0.05), 0 0 0 1px rgba(92, 104, 89, 0.14);

  --tr:  0.22s ease;
  --tr2: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   Global Root Base Overrides
   ========================================================================= */
html, body {
  background-color: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-body);
}

/* Admin Shell & Backgrounds */
.admin-shell, .staff-shell, .portal-shell {
  background-color: var(--bg) !important;
}

.admin-main, .staff-main {
  background-color: var(--bg) !important;
}

/* Central Header Top Bars */
.admin-header, .site-header, .order-header {
  background: var(--header-gradient) !important;
  color: #ffffff !important;
}

.header-brand-text, .admin-header h1, .order-header-title {
  color: #ffffff !important;
}

/* Primary Buttons */
.btn-primary, .btn-save, .portal-btn, button.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover, .btn-save:hover, .portal-btn:hover, button.btn-primary:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #ffffff !important;
}

/* Active Nav Links in Sidebar */
.admin-sidebar .nav-item.active,
.sidebar-nav .nav-item.active {
  background: rgba(92, 104, 89, 0.12) !important;
  color: var(--primary) !important;
  border-left: 3px solid var(--primary) !important;
  font-weight: 600 !important;
}

.admin-sidebar .nav-item.active .nav-icon,
.sidebar-nav .nav-item.active .nav-icon {
  stroke: var(--primary) !important;
  color: var(--primary) !important;
}

.nav-badge, .badge-count {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* Card Headers */
.card-header, .sheet-title-header {
  border-bottom: 1px solid rgba(92, 104, 89, 0.15);
}

/* Staff Hero Banner */
.staff-hero-banner {
  background: linear-gradient(135deg, rgba(92, 104, 89, 0.10) 0%, rgba(253, 234, 234, 0.40) 100%) !important;
  border: 1.5px solid rgba(92, 104, 89, 0.25) !important;
  box-shadow: 0 4px 20px rgba(92, 104, 89, 0.08) !important;
}

/* Form Controls Focus */
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(92, 104, 89, 0.18) !important;
}

/* Tabs & Pills */
.nav-tab.active, .tab-btn.active, .company-tab.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* Selection & Focus */
::selection {
  background: var(--primary-light);
  color: #ffffff;
}
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* =========================================================================
   LOGIN & MAIN INDEX PAGE THEME CONTROLS (Central Theme #5C6859 & #FDEAEA)
   ========================================================================= */
.login-wrapper {
  background: radial-gradient(circle at 15% 15%, rgba(253, 234, 234, 0.95) 0%, rgba(92, 104, 89, 0.12) 40%, var(--bg, #FDEAEA) 100%) !important;
}

.login-card {
  border: 1.5px solid rgba(92, 104, 89, 0.22) !important;
  box-shadow: 0 20px 60px -10px rgba(92, 104, 89, 0.20), 0 0 0 1px rgba(92, 104, 89, 0.18) !important;
}

.login-form-panel {
  background: #ffffff !important;
  border-right: 1px solid rgba(92, 104, 89, 0.18) !important;
}

.login-info-panel {
  background: linear-gradient(160deg, rgba(253, 234, 234, 0.85) 0%, rgba(92, 104, 89, 0.10) 100%) !important;
}

.brand-pill-container {
  border: 1.5px solid rgba(92, 104, 89, 0.22) !important;
  box-shadow: 0 4px 18px rgba(92, 104, 89, 0.10) !important;
}

.brand-pill-container .brand-v-divider {
  background: linear-gradient(180deg, rgba(92, 104, 89, 0.2), rgba(92, 104, 89, 0.6), rgba(92, 104, 89, 0.2)) !important;
}

.login-input-control {
  background: #ffffff !important;
  border: 1.5px solid rgba(92, 104, 89, 0.25) !important;
}

.login-input-control:focus {
  border-color: var(--primary, #5C6859) !important;
  box-shadow: 0 0 0 3.5px rgba(92, 104, 89, 0.18) !important;
}

.login-btn-submit {
  background: linear-gradient(135deg, #5C6859 0%, #3d473b 100%) !important;
  box-shadow: 0 6px 20px rgba(92, 104, 89, 0.32) !important;
}

.login-btn-submit:hover {
  background: linear-gradient(135deg, #4d584a 0%, #2d352b 100%) !important;
  box-shadow: 0 8px 26px rgba(92, 104, 89, 0.42) !important;
}

.login-company-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(92, 104, 89, 0.22) !important;
  box-shadow: 0 2px 10px rgba(92, 104, 89, 0.06) !important;
}

.login-company-card:hover {
  border-color: var(--primary, #5C6859) !important;
  box-shadow: 0 4px 16px rgba(92, 104, 89, 0.16) !important;
}

.co-eyebrow {
  color: var(--primary, #5C6859) !important;
}

.co-karat-badge {
  background: rgba(92, 104, 89, 0.12) !important;
  color: var(--primary-dark, #3d473b) !important;
  border: 1px solid rgba(92, 104, 89, 0.25) !important;
}

.contact-link {
  color: var(--primary-dark, #3d473b) !important;
}

.contact-link:hover {
  color: var(--primary, #5C6859) !important;
}