/*
 * ePass Admin — Theme Variables
 * Override brand colors here. All values cascade through the entire UI.
 *
 * LIGHT MODE  →  :root { }
 * DARK  MODE  →  [data-bs-theme=dark] { }
 */

/* ─────────────────────────────────────────────
   LIGHT MODE
───────────────────────────────────────────── */
:root {
	
  --bs-white:                    #fff;

  /* ── Brand purple scale (header / nav chrome) ── */
  --bs-brand-purple:             #4060d4;  /* icon / accent — vivid mid-tone */
  --bs-brand-purple-light:       #a8b8e8;  /* subtle tint */
  --bs-brand-purple-muted:       #6b82c4;  /* nav link text */
  --bs-brand-purple-dark:        #091240;  /* deep accent */
  --bs-brand-purple-deeper:      #0d1a55;  /* search bg / border */
  --bs-brand-purple-base:        #132475;  /* header bg / toolbar bg */
  --bs-brand-purple-border:      #1a2f8f;  /* header bottom border */
  --bs-brand-purple-placeholder: #7a90cc;  /* search placeholder */
  
  /* ── Brand palette ── */
  --bs-primary:              #F85E9F;
  --bs-primary-rgb:          248,94,159;
  --bs-primary-active:       #e63d87;
  --bs-primary-light:        #FEF0F7;
  --bs-primary-inverse:      #FFFFFF;
  --bs-primary-text-emphasis:#7a1040;
  --bs-primary-bg-subtle:    #fdd5e8;
  --bs-primary-border-subtle:#fbabcf;

  --bs-secondary:            #DBDFE9;
  --bs-secondary-rgb:        219,223,233;
  --bs-secondary-active:     #C4C8D2;
  --bs-secondary-light:      #F9F9F9;
  --bs-secondary-inverse:    #4B5675;
  --bs-secondary-text-emphasis:#58595d;
  --bs-secondary-bg-subtle:  #f8f9fb;
  --bs-secondary-border-subtle:#f1f2f6;

  --bs-success:              #2C9AFF;
  --bs-success-rgb:          44,154,255;
  --bs-success-active:       #2884EF;
  --bs-success-light:        #F1FAFF;
  --bs-success-inverse:      #FFFFFF;
  --bs-success-text-emphasis:#123e66;
  --bs-success-bg-subtle:    #d5ebff;
  --bs-success-border-subtle:#abd7ff;

  --bs-info:                 #7239EA;
  --bs-info-rgb:             114,57,234;
  --bs-info-active:          #5014D0;
  --bs-info-light:           #F8F5FF;
  --bs-info-inverse:         #FFFFFF;
  --bs-info-text-emphasis:   #2e175e;
  --bs-info-bg-subtle:       #e3d7fb;
  --bs-info-border-subtle:   #c7b0f7;

  --bs-warning:              #E78B2F;
  --bs-warning-2:              #f6c000;
  --bs-warning-rgb:          231,139,47;
  --bs-warning-active:       #CE7317;
  --bs-warning-light:        #FFF8EE;
  --bs-warning-inverse:      #FFFFFF;
  --bs-warning-text-emphasis:#5c3813;
  --bs-warning-bg-subtle:    #fae8d5;
  --bs-warning-border-subtle:#f5d1ac;

  --bs-danger:               #F1416C;
  --bs-danger-rgb:           241,65,108;
  --bs-danger-active:        #D9214E;
  --bs-danger-light:         #FFF5F8;
  --bs-danger-inverse:       #FFFFFF;
  --bs-danger-text-emphasis: #601a2b;
  --bs-danger-bg-subtle:     #fcd9e2;
  --bs-danger-border-subtle: #f9b3c4;

  --bs-dark:                 #071437;
  --bs-dark-rgb:             7,20,55;
  --bs-dark-active:          #071437;
  --bs-dark-light:           #D9DBE9;
  --bs-dark-inverse:         #FFFFFF;
  --bs-dark-text-emphasis:   #4B5675;
  --bs-dark-bg-subtle:       #B5B5C3;
  --bs-dark-border-subtle:   #99A1B7;

  --bs-light:                #F9F9F9;
  --bs-light-rgb:            249,249,249;
  --bs-light-active:         #F1F1F2;
  --bs-light-inverse:        #4B5675;
  --bs-light-text-emphasis:  #4B5675;
  --bs-light-bg-subtle:      #fcfcfc;
  --bs-light-border-subtle:  #F1F1F2;

  /* ── Gray scale ── */
  --bs-gray-100:             #F9F9F9;
  --bs-gray-200:             #F1F1F2;
  --bs-gray-300:             #DBDFE9;
  --bs-gray-400:             #B5B5C3;
  --bs-gray-500:             #99A1B7;
  --bs-gray-600:             #78829D;
  --bs-gray-700:             #4B5675;
  --bs-gray-800:             #252F4A;
  --bs-gray-900:             #071437;

  /* ── Body / Page ── */
  --bs-body-color:           #071437;
  --bs-body-color-rgb:       7,20,55;
  --bs-body-bg:              #ffffff;
  --bs-body-bg-rgb:          255,255,255;
  --bs-heading-color:        #071437;
  --bs-text-muted:           #99A1B7;

  /* ── Links ── */
  --bs-link-color:           #F85E9F;
  --bs-link-color-rgb:       248,94,159;
  --bs-link-hover-color:     #e63d87;
  --bs-link-hover-color-rgb: 230,61,135;

  /* ── Borders ── */
  --bs-border-color:         #F1F1F2;
  --bs-border-dashed-color:  #DBDFE9;

  /* ── Components ── */
  --bs-component-active-bg:  #F85E9F;
  --bs-component-active-color:#FFFFFF;
  --bs-component-hover-color:#F85E9F;
  --bs-component-hover-bg:   #F9F9F9;
  --bs-component-checked-bg: #F85E9F;
  --bs-component-checked-color:#FFFFFF;

  /* ── Inputs ── */
  --bs-input-color:          var(--bs-gray-700);
  --bs-input-bg:             var(--bs-body-bg);
  --bs-input-solid-color:    var(--bs-gray-700);
  --bs-input-solid-bg:       var(--bs-gray-100);
  --bs-input-solid-bg-focus: var(--bs-gray-200);
  --bs-input-solid-placeholder-color: var(--bs-gray-500);

  /* ── Symbols ── */
  --bs-symbol-label-color:   #3F4254;
  --bs-symbol-label-bg:      #F9F9F9;
  --bs-symbol-border-color:  rgba(0, 0, 0, 0.08);

  /* ── Scrollbar ── */
  --bs-scrollbar-color:      #DBDFE9;
  --bs-scrollbar-hover-color:#B5B5C3;

  /* ── Menus ── */
  --bs-menu-dropdown-bg-color:#ffffff;
  --bs-menu-heading-color:   #B5B5C3;
  --bs-menu-link-color-hover:#F85E9F;
  --bs-menu-link-color-show: #F85E9F;
  --bs-menu-link-color-here: #F85E9F;
  --bs-menu-link-color-active:#F85E9F;
  --bs-menu-link-bg-color-hover:  #F9F9F9;
  --bs-menu-link-bg-color-show:   #F9F9F9;
  --bs-menu-link-bg-color-here:   #F9F9F9;
  --bs-menu-link-bg-color-active: #F9F9F9;

  /* ── Dropdown / Drawer ── */
  --bs-dropdown-bg:          #ffffff;
  --bs-drawer-bg-color:      #ffffff;
  --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.4);

  /* ── App shell ── */
  --bs-app-bg-color:                  #F4F6FA;
  --bs-app-blank-bg-color:            #ffffff;
  --bs-app-header-base-bg-color:      var(--bs-brand-purple-base);
  --bs-app-header-base-border-bottom: 1px solid var(--bs-brand-purple-border);
  --bs-app-header-sticky-bg-color:    var(--bs-brand-purple-base);
  --bs-app-header-search-bg-color:    var(--bs-brand-purple-deeper);
  --bs-app-header-search-icon-color:  var(--bs-brand-purple);
  --bs-app-header-search-placeholder-color: var(--bs-brand-purple-placeholder);
  --bs-app-header-search-border-color:var(--bs-brand-purple-deeper);
  --bs-app-toolbar-base-bg-color:     var(--bs-brand-purple-base);
  --bs-app-toolbar-bg-color:          var(--bs-brand-purple-base);

  /* ── Rating ── */
  --bs-rating-color-default: #B5B5C3;
  --bs-rating-color-active:  #FFAD0F;

  /* ── Scrolltop ── */
  --bs-scrolltop-bg-color:       #F85E9F;
  --bs-scrolltop-bg-color-hover: #F85E9F;
  --bs-scrolltop-icon-color:     #FFFFFF;
  --bs-scrolltop-icon-color-hover:#FFFFFF;

  /* ── Ribbon ── */
  --bs-ribbon-label-bg:          #F85E9F;
  --bs-ribbon-label-border-color:#c4296e;
}

/* ─────────────────────────────────────────────
   DARK MODE
───────────────────────────────────────────── */
[data-bs-theme=dark] {
  /* ── Brand palette ── */
  --bs-primary:              #F85E9F;
  --bs-primary-rgb:          248,94,159;
  --bs-primary-active:       #e63d87;
  --bs-primary-light:        #3a1525;
  --bs-primary-inverse:      #FFFFFF;
  --bs-primary-text-emphasis:#f9a8cc;
  --bs-primary-bg-subtle:    #2e0a16;
  --bs-primary-border-subtle:#922f5f;

  --bs-secondary:            #323248;
  --bs-secondary-rgb:        50,50,72;
  --bs-secondary-active:     #474761;
  --bs-secondary-light:      #1b1b29;
  --bs-secondary-inverse:    #92929F;
  --bs-secondary-text-emphasis:#e9ecf2;
  --bs-secondary-bg-subtle:  #2c2d2f;
  --bs-secondary-border-subtle:#83868c;

  --bs-success:              #2C9AFF;
  --bs-success-rgb:          44,154,255;
  --bs-success-active:       #2884EF;
  --bs-success-light:        #212E48;
  --bs-success-inverse:      #FFFFFF;
  --bs-success-text-emphasis:#80c2ff;
  --bs-success-bg-subtle:    #091f33;
  --bs-success-border-subtle:#1a5c99;

  --bs-info:                 #7239EA;
  --bs-info-rgb:             114,57,234;
  --bs-info-active:          #5014D0;
  --bs-info-light:           #2F264F;
  --bs-info-inverse:         #FFFFFF;
  --bs-info-text-emphasis:   #aa88f2;
  --bs-info-bg-subtle:       #170b2f;
  --bs-info-border-subtle:   #44228c;

  --bs-warning:              #E78B2F;
  --bs-warning-rgb:          231,139,47;
  --bs-warning-active:       #CE7317;
  --bs-warning-light:        #392F28;
  --bs-warning-inverse:      #FFFFFF;
  --bs-warning-text-emphasis:#f1b982;
  --bs-warning-bg-subtle:    #2e1c09;
  --bs-warning-border-subtle:#8b531c;

  --bs-danger:               #F1416C;
  --bs-danger-rgb:           241,65,108;
  --bs-danger-active:        #D9214E;
  --bs-danger-light:         #3A2434;
  --bs-danger-inverse:       #FFFFFF;
  --bs-danger-text-emphasis: #f78da7;
  --bs-danger-bg-subtle:     #300d16;
  --bs-danger-border-subtle: #912741;

  --bs-dark:                 #FFFFFF;
  --bs-dark-rgb:             255,255,255;
  --bs-dark-active:          white;
  --bs-dark-light:           #2B2B40;
  --bs-dark-inverse:         #1b1b29;
  --bs-dark-text-emphasis:   #DBDFE9;
  --bs-dark-bg-subtle:       #131825;
  --bs-dark-border-subtle:   #252F4A;

  --bs-light:                #2B2B40;
  --bs-light-rgb:            43,43,64;
  --bs-light-active:         #323248;
  --bs-light-inverse:        #78829D;
  --bs-light-text-emphasis:  #F9F9F9;
  --bs-light-bg-subtle:      #252F4A;
  --bs-light-border-subtle:  #4B5675;

  /* ── Gray scale ── */
  --bs-gray-100:             #1b1b29;
  --bs-gray-100-rgb:         27,27,41;
  --bs-gray-200:             #2B2B40;
  --bs-gray-200-rgb:         43,43,64;
  --bs-gray-300:             #323248;
  --bs-gray-300-rgb:         50,50,72;
  --bs-gray-400:             #474761;
  --bs-gray-400-rgb:         71,71,97;
  --bs-gray-500:             #565674;
  --bs-gray-500-rgb:         86,86,116;
  --bs-gray-600:             #6D6D80;
  --bs-gray-600-rgb:         109,109,128;
  --bs-gray-700:             #92929F;
  --bs-gray-700-rgb:         146,146,159;
  --bs-gray-800:             #CDCDDE;
  --bs-gray-800-rgb:         205,205,222;
  --bs-gray-900:             #FFFFFF;
  --bs-gray-900-rgb:         255,255,255;

  /* ── Body / Page ── */
  --bs-body-color:           #FFFFFF;
  --bs-body-color-rgb:       255,255,255;
  --bs-body-bg:              #1e1e2d;
  --bs-body-bg-rgb:          30,30,45;
  --bs-heading-color:        #FFFFFF;
  --bs-text-muted:           #565674;

  /* ── Links ── */
  --bs-link-color:           #F85E9F;
  --bs-link-color-rgb:       248,94,159;
  --bs-link-hover-color:     #73d7a1;
  --bs-link-hover-color-rgb: 115,215,161;

  /* ── Borders ── */
  --bs-border-color:         #2B2B40;
  --bs-border-dashed-color:  #323248;

  /* ── Components ── */
  --bs-component-active-bg:  #F85E9F;
  --bs-component-active-color:#FFFFFF;
  --bs-component-hover-color:#F85E9F;
  --bs-component-hover-bg:   #1b1b29;
  --bs-component-checked-bg: #F85E9F;
  --bs-component-checked-color:#FFFFFF;

  /* ── Inputs ── */
  --bs-input-color:          var(--bs-gray-700);
  --bs-input-bg:             var(--bs-body-bg);
  --bs-input-solid-color:    var(--bs-gray-700);
  --bs-input-solid-bg:       var(--bs-gray-100);
  --bs-input-solid-bg-focus: var(--bs-gray-200);
  --bs-input-solid-placeholder-color: var(--bs-gray-500);

  /* ── Symbols ── */
  --bs-symbol-label-color:   #CDCDDE;
  --bs-symbol-label-bg:      #1b1b29;
  --bs-symbol-border-color:  rgba(255, 255, 255, 0.5);

  /* ── Scrollbar ── */
  --bs-scrollbar-color:      #2B2B40;
  --bs-scrollbar-hover-color:#323248;

  /* ── Menus ── */
  --bs-menu-dropdown-bg-color:#1e1e2d;
  --bs-menu-heading-color:   #565674;
  --bs-menu-link-color-hover:#F85E9F;
  --bs-menu-link-color-show: #F85E9F;
  --bs-menu-link-color-here: #F85E9F;
  --bs-menu-link-color-active:#F85E9F;
  --bs-menu-link-bg-color-hover:  #1b1b29;
  --bs-menu-link-bg-color-show:   #1b1b29;
  --bs-menu-link-bg-color-here:   #1b1b29;
  --bs-menu-link-bg-color-active: #1b1b29;

  /* ── Dropdown / Drawer ── */
  --bs-dropdown-bg:          #1e1e2d;
  --bs-drawer-bg-color:      #1e1e2d;
  --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.4);

  /* ── App shell ── */
  --bs-app-bg-color:                  #151521;
  --bs-app-blank-bg-color:            #151521;
  --bs-app-header-base-bg-color:      #1b1b29;
  --bs-app-header-base-border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  --bs-app-header-sticky-bg-color:    #1b1b29;
  --bs-app-header-search-bg-color:    #1b1b29;
  --bs-app-header-search-icon-color:  #565674;
  --bs-app-header-search-placeholder-color: #565674;
  --bs-app-header-search-border-color:#323248;
  --bs-app-toolbar-base-bg-color:     #0D0D1D;
  --bs-app-toolbar-bg-color:          #0D0D1D;

  /* ── Rating ── */
  --bs-rating-color-default: #474761;
  --bs-rating-color-active:  #FFAD0F;

  /* ── Scrolltop ── */
  --bs-scrolltop-bg-color:       #F85E9F;
  --bs-scrolltop-bg-color-hover: #F85E9F;
  --bs-scrolltop-icon-color:     #FFFFFF;
  --bs-scrolltop-icon-color-hover:#FFFFFF;

  /* ── Ribbon ── */
  --bs-ribbon-label-bg:          #F85E9F;
  --bs-ribbon-label-border-color:#c4296e;
}

/* ─────────────────────────────────────────────
   STRUCTURAL OVERRIDES
   (applied regardless of theme mode)
───────────────────────────────────────────── */

/* Ensure header renders above toolbar so the active nav ::after line is visible */
.app-header {
  position: relative;
  z-index: 3;
}

[data-bs-theme=light]{
	--bs-app-header-search-bg-color:    var(--bs-brand-purple-deeper);
	--bs-app-header-search-icon-color:  var(--bs-brand-purple);
	--bs-app-header-search-placeholder-color: var(--bs-brand-purple-placeholder);
	--bs-app-header-search-border-color:var(--bs-brand-purple-deeper);
	--bs-app-toolbar-bg-color:          var(--bs-brand-purple-base);
}
[data-bs-theme=dark]{
	--bs-app-header-search-bg-color:#1b1b29;
	--bs-app-header-search-icon-color:#565674;
	--bs-app-header-search-placeholder-color:#565674;
	--bs-app-header-search-border-color:#323248;
	--bs-app-toolbar-bg-color:#0D0D1D
}