/* ============================================================
   THEME VARIABLES ARCHITECTURE
   Themeable Rewards App - Light/Dark Themes + Brand Variants
   ============================================================ */

/* ============================================================
   ROOT: BASE LIGHT THEME (DEFAULT)
   ============================================================ */
:root {
  /* Global Semantic Colors */
  --app-bg-primary: #F8F9FA;
  --app-text-primary: #212529;
  --app-card-bg: #FFFFFF;
  --app-border-soft: #ECECEC;
  --app-accent: #4EB7B4;

  /* Semantic Utility Colors */
  --app-bg-secondary: #F0F2F5;
  --app-text-secondary: #6C757D;
  --app-border-medium: #DEE2E6;
  --app-shadow-light: rgba(0, 0, 0, 0.05);
  --app-shadow-medium: rgba(0, 0, 0, 0.1);

  /* Status Colors */
  --app-success: #28A745;
  --app-warning: #FFC107;
  --app-error: #DC3545;
  --app-info: #17A2B8;

  /* Brand: FNB eBucks (Default) */
  --brand-primary: #4EB7B4;
  --brand-soft-bg: #E8F7F6;
  --brand-pastel-bg: #E8F7F6;
  --brand-text: #2C6B69;
  --brand-pastel-text: #2C6B69;
  --brand-light: #A8DDDB;
  --brand-dark: #2C5B58;
}

/* ============================================================
   DARK THEME
   Toggle with: data-theme="dark" on body or html element
   ============================================================ */
[data-theme="dark"],
[data-theme="dark"] body {
  --app-bg-primary: #1A1D20;
  --app-text-primary: #F8F9FA;
  --app-card-bg: #24282C;
  --app-border-soft: #343A40;
  --app-accent: #56C7C4;

  /* Semantic Utility Colors */
  --app-bg-secondary: #2D3139;
  --app-text-secondary: #ADB5BD;
  --app-border-medium: #495057;
  --app-shadow-light: rgba(0, 0, 0, 0.2);
  --app-shadow-medium: rgba(0, 0, 0, 0.4);

  /* Status Colors (Dark Theme Variants) */
  --app-success: #51CF66;
  --app-warning: #FFD43B;
  --app-error: #FF6B6B;
  --app-info: #4ECDC4;

  /* Brand: FNB eBucks (Dark Mode) */
  --brand-primary: #56C7C4;
  --brand-soft-bg: #1E3C3A;
  --brand-pastel-bg: #1E3C3A;
  --brand-text: #A8DDDB;
  --brand-pastel-text: #A8DDDB;
  --brand-light: #7FD9D6;
  --brand-dark: #34A39E;
}

/* ============================================================
   BRAND VARIANT: FNB eBUCKS
   Override with: data-brand="fnb-ebucks" on body or html element
   ============================================================ */
[data-brand="fnb-ebucks"],
[data-brand="fnb-ebucks"] body {
  --brand-primary: #4EB7B4;
  --brand-soft-bg: #E8F7F6;
  --brand-pastel-bg: #E8F7F6;
  --brand-text: #2C6B69;
  --brand-pastel-text: #2C6B69;
  --brand-light: #A8DDDB;
  --brand-dark: #2C5B58;
}

/* ============================================================
   BRAND VARIANT: NEDBANK GREENBACKS
   Override with: data-brand="nedbank-greenbacks" on body or html element
   ============================================================ */
[data-brand="nedbank-greenbacks"],
[data-brand="nedbank-greenbacks"] body {
  --brand-primary: #7FA99B;
  --brand-soft-bg: #EBF2EE;
  --brand-pastel-bg: #EBF2EE;
  --brand-text: #3D564E;
  --brand-pastel-text: #3D564E;
  --brand-light: #B8D4CB;
  --brand-dark: #5A7B6E;
}

   COMBINED: DARK THEME + FNB EBUCKS VARIANT
   ============================================================ */
[data-theme="dark"][data-brand="fnb-ebucks"],
[data-theme="dark"][data-brand="fnb-ebucks"] body {
  --brand-primary: #56C7C4;
  --brand-soft-bg: #1E3C3A;
  --brand-pastel-bg: #1E3C3A;
  --brand-text: #A8DDDB;
  --brand-pastel-text: #A8DDDB;
  --brand-light: #7FD9D6;
  --brand-dark: #34A39E;
}

/* ============================================================
   COMBINED: DARK THEME + NEDBANK GREENBACKS VARIANT
   ============================================================ */
[data-theme="dark"][data-brand="nedbank-greenbacks"],
[data-theme="dark"][data-brand="nedbank-greenbacks"] body {
  --brand-primary: #9BC4B3;
  --brand-soft-bg: #1F3329;
  --brand-pastel-bg: #1F3329;
  --brand-text: #C5D9CF;
  --brand-pastel-text: #C5D9CF;
  --brand-light: #B8D4CB;
  --brand-dark: #6B8F7E;
}

/* ============================================================
   COMPONENT UTILITY CLASSES
   ============================================================ */

/* Background Utilities */
.bg-app-primary {
  background-color: var(--app-bg-primary);
}

.bg-app-secondary {
  background-color: var(--app-bg-secondary);
}

.bg-app-card {
  background-color: var(--app-card-bg);
}

.bg-brand-soft {
  background-color: var(--brand-soft-bg);
}

/* Text Utilities */
.text-app-primary {
  color: var(--app-text-primary);
}

.text-app-secondary {
  color: var(--app-text-secondary);
}

.text-brand-primary {
  color: var(--brand-primary);
}

.text-brand {
  color: var(--brand-text);
}

/* Border Utilities */
.border-app-soft {
  border-color: var(--app-border-soft);
}

.border-app-medium {
  border-color: var(--app-border-medium);
}

.border-brand {
  border-color: var(--brand-primary);
}

/* Shadow Utilities */
.shadow-app-light {
  box-shadow: 0 2px 4px var(--app-shadow-light);
}

.shadow-app-medium {
  box-shadow: 0 4px 12px var(--app-shadow-medium);
}

/* Card Component */
.app-card {
  background-color: var(--app-card-bg);
  border: 1px solid var(--app-border-soft);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px var(--app-shadow-light);
  transition: all 0.2s ease;
}

.app-card:hover {
  box-shadow: 0 4px 12px var(--app-shadow-medium);
}

/* Brand Accent Button */
.btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-brand:hover,
.btn-brand:active {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #FFFFFF;
}

/* Brand Accent - Soft Variant */
.btn-brand-soft {
  background-color: var(--brand-soft-bg);
  border-color: var(--brand-primary);
  color: var(--brand-text);
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-brand-soft:hover,
.btn-brand-soft:active {
  background-color: var(--brand-primary);
  color: #FFFFFF;
}

/* Badge - Brand */
.badge-brand {
  background-color: var(--brand-soft-bg);
  color: var(--brand-text);
  border: 1px solid var(--brand-primary);
  font-weight: 600;
}

/* Progress Bar - Brand */
.progress-bar-brand {
  background-color: var(--brand-primary);
}

/* ============================================================
   THEME TRANSITION ANIMATION
   Smooth theme switching (optional)
   ============================================================ */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Disable transitions for performance-critical animations */
.no-theme-transition {
  transition: none !important;
}

/* ============================================================
   FORM CONTROLS WITH THEME SUPPORT
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
  background-color: var(--app-card-bg);
  color: var(--app-text-primary);
  border: 1px solid var(--app-border-medium);
  transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  background-color: var(--app-card-bg);
  color: var(--app-text-primary);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-soft-bg);
  outline: none;
}

/* ============================================================
   TOGGLE SWITCH - BRAND THEMED
   ============================================================ */

.form-check-input {
  background-color: var(--app-border-soft);
  border: 1px solid var(--app-border-medium);
  transition: all 0.2s ease;
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-check-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.25rem var(--brand-soft-bg);
}

/* ============================================================
   PREMIUM TOOLTIPS
   Bootstrap 5 Tooltip Enhancements
   ============================================================ */

/* Custom tooltip container styling */
.tooltip.premium-tooltip {
  z-index: 1060;
}

/* Tooltip background and arrow */
.tooltip.premium-tooltip .tooltip-inner {
  background-color: rgba(46, 107, 105, 0.95); /* Dark teal with slight transparency */
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.625rem 0.875rem;
  border-radius: 0.375rem;
  max-width: 280px;
  word-wrap: break-word;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(78, 183, 180, 0.3);
}

/* Arrow styling */
.tooltip.premium-tooltip .tooltip-arrow::before {
  border-top-color: rgba(46, 107, 105, 0.95);
}

.tooltip.premium-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: rgba(46, 107, 105, 0.95);
}

.tooltip.premium-tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: rgba(46, 107, 105, 0.95);
}

.tooltip.premium-tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: rgba(46, 107, 105, 0.95);
}

/* Light theme tooltip */
[data-theme="light"] .tooltip.premium-tooltip .tooltip-inner {
  background-color: #2C6B69;
  color: #FFFFFF;
  border-color: rgba(78, 183, 180, 0.4);
}

[data-theme="light"] .tooltip.premium-tooltip .tooltip-arrow::before {
  border-top-color: #2C6B69;
}

[data-theme="light"] .tooltip.premium-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #2C6B69;
}

[data-theme="light"] .tooltip.premium-tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #2C6B69;
}

[data-theme="light"] .tooltip.premium-tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #2C6B69;
}

/* Dark theme tooltip */
[data-theme="dark"] .tooltip.premium-tooltip .tooltip-inner {
  background-color: #56C7C4;
  color: #1A1D20;
  border-color: rgba(86, 199, 196, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .tooltip.premium-tooltip .tooltip-arrow::before {
  border-top-color: #56C7C4;
}

[data-theme="dark"] .tooltip.premium-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #56C7C4;
}

[data-theme="dark"] .tooltip.premium-tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #56C7C4;
}

[data-theme="dark"] .tooltip.premium-tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #56C7C4;
}

/* Info icon styling */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.info-icon:hover {
  background-color: rgba(78, 183, 180, 0.1);
  transform: scale(1.1);
}

[data-theme="dark"] .info-icon:hover {
  background-color: rgba(86, 199, 196, 0.15);
}

/* ============================================================
   PREMIUM PILL-CONTAINER & CAPSULE TRACKER
   Integrated segmented selector with smooth transitions
   ============================================================ */

.tier-pill-container {
  display: flex;
  gap: 0.5rem;
  padding: 0.375rem;
  background-color: #EFEFEF;
  border-radius: 50px;
  width: fit-content;
  flex-wrap: nowrap;
  align-items: center;
  transition: all 0.2s ease;
}

[data-theme="dark"] .tier-pill-container {
  background-color: #2D3748;
}

/* Individual tier capsule button */
.tier-capsule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  border: none;
  background-color: transparent;
  color: #A0A9B8;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 1;
  min-width: 120px;
  position: relative;
}

.tier-capsule:hover {
  color: #6C757D;
  background-color: rgba(78, 183, 180, 0.05);
}

/* Active tier capsule state */
.tier-capsule.active {
  background-color: #E8F7F6;
  color: #2C6B69;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(78, 183, 180, 0.15);
}

.tier-capsule.active:hover {
  background-color: #E0F3F1;
  box-shadow: 0 4px 12px rgba(78, 183, 180, 0.2);
}

/* Dark theme capsule styling */
[data-theme="dark"] .tier-capsule {
  color: #8892A1;
}

[data-theme="dark"] .tier-capsule:hover {
  color: #B0BEC5;
  background-color: rgba(86, 199, 196, 0.08);
}

[data-theme="dark"] .tier-capsule.active {
  background: linear-gradient(135deg, rgba(86, 199, 196, 0.15), rgba(86, 199, 196, 0.1));
  color: #56C7C4;
  box-shadow: 0 2px 12px rgba(86, 199, 196, 0.2);
  border: 1px solid rgba(86, 199, 196, 0.3);
}

[data-theme="dark"] .tier-capsule.active:hover {
  background: linear-gradient(135deg, rgba(86, 199, 196, 0.2), rgba(86, 199, 196, 0.15));
  box-shadow: 0 4px 16px rgba(86, 199, 196, 0.3);
}

/* Emoji icon spacing */
.tier-capsule .tier-emoji {
  font-size: 1.1rem;
  line-height: 1;
}

/* Responsive behavior */
@media (max-width: 768px) {
  .tier-pill-container {
    gap: 0.25rem;
    padding: 0.25rem;
  }

  .tier-capsule {
    padding: 0.5rem 0.875rem;
    font-size: 0.9rem;
    min-width: 100px;
    flex: 1;
  }

  .tier-capsule .tier-emoji {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .tier-pill-container {
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: 30px;
  }

  .tier-capsule {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    min-width: 80px;
    border-radius: 30px;
  }
}