/* Gradient themes: IDs 50–52 (dark), 53–55 (light) */

:root[data-theme-mode="dark"].style-50,
:root[data-theme-mode="dark"].gradient-theme.style-50 {
  --color-white: #0F0A1E;
  --color-black: #F8FAFC;
  --color-body-bg: #0F0A1E;
  --color-card-bg: #1A1530;
  --color-heading: #F1F5F9;
  --color-body: #CBD5E1;
  --color-placeholder: #94A3B8;
  --color-text-muted: #8B9CB5;
  --color-border: #2E2648;
  --primary-rgb: 139, 92, 246;
  --secondary-rgb: 56, 189, 248;
  --warning-rgb: 251, 191, 36;
  --danger-rgb: 244, 63, 94;
  --gradient-hero: linear-gradient(135deg, #4c1d95 0%, #6d28d9 35%, #2563eb 100%);
  --gradient-btn: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
  --gradient-btn-hover: linear-gradient(135deg, #6d28d9 0%, #2563eb 100%);
  --gradient-btn-pill: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
  --gradient-btn-pill-text: #312e81;
}

:root[data-theme-mode="dark"].style-51,
:root[data-theme-mode="dark"].gradient-theme.style-51 {
  --color-white: #0A1220;
  --color-black: #F8FAFC;
  --color-body-bg: #0A1428;
  --color-card-bg: #12203C;
  --color-heading: #F1F5F9;
  --color-body: #CBD5E1;
  --color-placeholder: #8FA3BF;
  --color-text-muted: #7B92B0;
  --color-border: #2A3F66;
  --primary-rgb: 30, 58, 138;
  --secondary-rgb: 193, 39, 45;
  --warning-rgb: 245, 158, 11;
  --danger-rgb: 193, 39, 45;
  --gradient-hero: linear-gradient(135deg, #0e1f3d 0%, #1e3a8a 40%, #991b1b 100%);
  --gradient-btn: linear-gradient(135deg, #1e40af 0%, #b91c1c 100%);
  --gradient-btn-hover: linear-gradient(135deg, #1d4ed8 0%, #dc2626 100%);
  --gradient-btn-pill: linear-gradient(135deg, #ffffff 0%, #fee2e2 100%);
  --gradient-btn-pill-text: #0e1f3d;
}

:root[data-theme-mode="dark"].style-52,
:root[data-theme-mode="dark"].gradient-theme.style-52 {
  --color-white: #140A08;
  --color-black: #FFF7ED;
  --color-body-bg: #1A0F0C;
  --color-card-bg: #261612;
  --color-heading: #FFEDD5;
  --color-body: #FED7AA;
  --color-placeholder: #C4A484;
  --color-text-muted: #A88B6E;
  --color-border: #4A2C22;
  --primary-rgb: 234, 88, 12;
  --secondary-rgb: 239, 68, 68;
  --warning-rgb: 251, 191, 36;
  --danger-rgb: 220, 38, 38;
  --gradient-hero: linear-gradient(135deg, #7f1d1d 0%, #c2410c 45%, #ea580c 100%);
  --gradient-btn: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
  --gradient-btn-hover: linear-gradient(135deg, #b91c1c 0%, #ea580c 100%);
  --gradient-btn-pill: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  --gradient-btn-pill-text: #7c2d12;
}

:root[data-theme-mode="light"].style-53,
:root[data-theme-mode="light"].gradient-theme.style-53 {
  --color-white: #FFFFFF;
  --color-black: #1E1B4B;
  --color-body-bg: #FFF7ED;
  --color-card-bg: #FFFFFF;
  --color-heading: #7C2D12;
  --color-body: #44403C;
  --color-placeholder: #78716C;
  --color-text-muted: #78716C;
  --color-border: #FED7AA;
  --primary-rgb: 249, 115, 22;
  --secondary-rgb: 236, 72, 153;
  --warning-rgb: 245, 158, 11;
  --danger-rgb: 220, 38, 38;
  --gradient-hero: linear-gradient(135deg, #fb923c 0%, #f472b6 50%, #60a5fa 100%);
  --gradient-btn: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  --gradient-btn-hover: linear-gradient(135deg, #ea580c 0%, #db2777 100%);
  --gradient-btn-pill: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);
  --gradient-btn-pill-text: #9a3412;
}

:root[data-theme-mode="light"].style-54,
:root[data-theme-mode="light"].gradient-theme.style-54 {
  --color-white: #FFFFFF;
  --color-black: #0C4A6E;
  --color-body-bg: #F0F9FF;
  --color-card-bg: #FFFFFF;
  --color-heading: #0C4A6E;
  --color-body: #334155;
  --color-placeholder: #64748B;
  --color-text-muted: #64748B;
  --color-border: #BAE6FD;
  --primary-rgb: 14, 165, 233;
  --secondary-rgb: 6, 182, 212;
  --warning-rgb: 245, 158, 11;
  --danger-rgb: 220, 38, 38;
  --gradient-hero: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #3b82f6 100%);
  --gradient-btn: linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
  --gradient-btn-hover: linear-gradient(135deg, #0e7490 0%, #1d4ed8 100%);
  --gradient-btn-pill: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%);
  --gradient-btn-pill-text: #0c4a6e;
}

:root[data-theme-mode="light"].style-55,
:root[data-theme-mode="light"].gradient-theme.style-55 {
  --color-white: #FFFFFF;
  --color-black: #14532D;
  --color-body-bg: #F0FDF4;
  --color-card-bg: #FFFFFF;
  --color-heading: #14532D;
  --color-body: #334155;
  --color-placeholder: #64748B;
  --color-text-muted: #64748B;
  --color-border: #BBF7D0;
  --primary-rgb: 16, 185, 129;
  --secondary-rgb: 20, 184, 166;
  --warning-rgb: 245, 158, 11;
  --danger-rgb: 220, 38, 38;
  --gradient-hero: linear-gradient(135deg, #34d399 0%, #2dd4bf 50%, #38bdf8 100%);
  --gradient-btn: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
  --gradient-btn-hover: linear-gradient(135deg, #059669 0%, #0d9488 100%);
  --gradient-btn-pill: linear-gradient(135deg, #ffffff 0%, #d1fae5 100%);
  --gradient-btn-pill-text: #14532d;
}

/* Dashboard welcome banner */
.gradient-theme .dashboard-welcome-card {
  background: var(--gradient-hero) !important;
  border: none !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
  overflow: hidden;
  position: relative;
}

.gradient-theme .dashboard-welcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18) 0%, transparent 45%);
  pointer-events: none;
}

.gradient-theme .dashboard-welcome-card .card-body {
  position: relative;
  z-index: 1;
}

.gradient-theme .dashboard-welcome-card .card-title,
.gradient-theme .dashboard-welcome-card .card-text,
.gradient-theme .dashboard-welcome-card p,
.gradient-theme .dashboard-welcome-card b {
  color: #ffffff !important;
}

/* Gradient buttons */
.gradient-theme .btn-primary,
.gradient-theme .btn-success,
.gradient-theme .btn-info {
  background: var(--gradient-btn) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.gradient-theme .btn-primary:hover,
.gradient-theme .btn-success:hover,
.gradient-theme .btn-info:hover {
  background: var(--gradient-btn-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
  filter: brightness(1.05);
}

.gradient-theme .btn-gradient-pill {
  background: var(--gradient-btn-pill) !important;
  color: var(--gradient-btn-pill-text) !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gradient-theme .btn-gradient-pill:hover {
  color: var(--gradient-btn-pill-text) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  filter: brightness(1.03);
}

.gradient-theme .text-bg-primary.dashboard-welcome-card {
  background: var(--gradient-hero) !important;
}

/* Solid fallback when gradient theme is not active */
html:not(.gradient-theme) .dashboard-welcome-card.text-bg-primary {
  background-color: var(--color-primary) !important;
}