/* Custom styles for Limitless Lifestyle */

/* CSS Custom Properties - must be at :root level */
:root {
  --brand-gold: #ffd700;
  --brand-teal-1: #0d1b2a;
  --brand-teal-2: #153746;
  --brand-teal-3: #1e4a5d;
  --hero-gradient: linear-gradient(
    135deg,
    var(--brand-teal-1) 0%,
    var(--brand-teal-2) 50%,
    var(--brand-teal-3) 100%
  );
  --hero-border: 2px solid var(--brand-gold);
  --hero-radius: 20px;
  --hero-shadow: 0 25px 50px rgba(0,0,0,.5), 0 0 50px rgba(255,215,0,.10);
}

/* Avoid stray 1px seams on dark layout due to device pixel rounding */
html, body {
  background-color: #0f1419;
}

/* Dashboard: unify widget header/title/subtitle styling globally */
.dashboard-widget .widget-header {
  position: relative;
  display: flex;
  align-items: center !important;
  justify-content: center !important; /* override any bootstrap justify-* */
  text-align: center;
}

/* If any bootstrap justify-* class leaks into header, normalize back to centered */
.dashboard-widget .widget-header.justify-content-between,
.dashboard-widget .widget-header.justify-content-start,
.dashboard-widget .widget-header.justify-content-end,
.dashboard-widget .widget-header.justify-content-around,
.dashboard-widget .widget-header.justify-content-evenly {
  justify-content: center !important;
}

/* Keep controls accessible but don't affect centering */
.dashboard-widget .widget-header .widget-controls {
  position: absolute;
  top: .35rem;
  left: .35rem; /* keep on the left for consistency */
  display: flex;
  gap: .35rem;
}

/* Title: allow existing <h6> or .widget-title */
.dashboard-widget .widget-header h6,
.dashboard-widget .widget-title {
  margin: 0;
  font-weight: 600;
  letter-spacing: .5px;
  width: 100%;
  text-align: center;
}

/* Subtitle: opt-in via .widget-subtitle if present */
.dashboard-widget .widget-subtitle {
  margin: .2rem 0 0 0;
  font-size: .9rem;
  color: #b0b3b8;
  text-align: center;
  display: block;
}

/* Footer quick actions layout */
.footer-quick-actions {
  gap: .5rem .5rem;
}


/* Cards */
.limitless.gl-new-layout .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 20px !important;
}

.limitless.gl-new-layout .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Stat cards with golden styling */
.limitless.gl-new-layout .stat-card {
    border-radius: 20px !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.limitless.gl-new-layout .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(255, 215, 0, 0.3) !important;
}

/* Brand styling */
.limitless.gl-new-layout .navbar-brand {
    font-size: 1.5rem;
    letter-spacing: -0.5px;
}

/* Form enhancements */
.limitless.gl-new-layout .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.limitless.gl-new-layout .input-group-text {
    background-color: var(--bs-light);
    border-color: var(--bs-border-color);
}

/* Button enhancements */
.limitless.gl-new-layout .btn {
    border-radius: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    transition: all 0.15s ease-in-out;
}

.limitless.gl-new-layout .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}

/* Utility classes */
.limitless.gl-new-layout .fa-10x {
    font-size: 10em;
}

/* Analytics Overview Metric Cards */
.metric-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.2);
}

.metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 0.5rem;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.metric-label {
    font-size: 0.9rem;
    color: #b0b3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Dark theme adjustments */
.limitless.gl-new-layout  .card {
    background-color: var(--bs-dark);
    border: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-gray-800) !important;
}

/* Footer */
.limitless.gl-new-layout footer {
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* Animation classes */
.limitless.gl-new-layout .fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fa-10x {
        font-size: 6em;
    }
}

/* Loading state */
.limitless.gl-new-layout .btn.loading {
    position: relative;
    color: transparent;
}

.limitless.gl-new-layout .btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===========================
   Nutri-aiQ Widget Styles
   =========================== */

.limitless.gl-new-layout .nutri-card {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15),
    rgba(21, 55, 70, 0.15),
    rgba(255, 215, 0, 0.08)
  );
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.1);
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.limitless.gl-new-layout .nutri-card::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.limitless.gl-new-layout .nutri-card > .nutri-card-inner {
  position: relative;
  z-index: 1;
}

/* Buttons */
.limitless.gl-new-layout #nutritionQuickAnalyzeBtn,
.limitless.gl-new-layout #quickAnalyzeBtn,
#analyzeMealBtn,
#analyzePhotoBtnn {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #153746;
  font-weight: 700;
  border-radius: 15px;
  padding: 0.6rem 1.2rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  border: none;
  transition: all 0.3s ease;
}

.limitless.gl-new-layout #nutritionQuickAnalyzeBtn:hover,
.limitless.gl-new-layout #quickAnalyzeBtn:hover,
#analyzeMealBtn:hover,
#analyzePhotoBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

/* Secondary button (Photo upload) */
.limitless.gl-new-layout #nutritionQuickPhotoBtn,
.limitless.gl-new-layout #quickPhotoBtn,
#photoUploadBtn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffd700;
  border: 2px solid #ffd700;
  border-radius: 15px;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.limitless.gl-new-layout #nutritionQuickPhotoBtn:hover,
.limitless.gl-new-layout #quickPhotoBtn:hover,
#photoUploadBtn:hover {
  background: rgba(255, 215, 0, 0.1);
}

/* Textarea */
.limitless.gl-new-layout #nutritionQuickMealInput,
.limitless.gl-new-layout #quickMealInput,
#mealInput,
#photoDescription {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  color: white;
  font-size: 0.9rem;
  min-height: 80px;
  resize: vertical;
  backdrop-filter: blur(10px);
  padding-right: 40px;
}

/* Results */
#nutritionQuickNutritionResults,
#quickNutritionResults,
#analysisResults {
  margin-top: 1rem;
  color: white;
}

.nutri-results {
  background: linear-gradient(
    135deg,
    rgba(21, 55, 70, 0.4),
    rgba(42, 157, 143, 0.2)
  );
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: white;
}

/* Saved Meals Section */
.nutri-saved-meals-list,
.nutri-saved-meals-dropdown {
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

/* Hero styling moved to section_header.html component */
/* All hero-related CSS is now consolidated in the component file */

/* Consistent readable width + side padding in page body */
.limitless.gl-new-layout main.container,
.limitless.gl-new-layout main.container-fluid {
  max-width: 1200px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Golden panels */
.limitless.gl-new-layout .golden-card,
.limitless.gl-new-layout .section-card {
  background: rgba(21,55,70,.35);
  border: 1px solid rgba(255,215,0,.40);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Optional golden section header strip */
.limitless.gl-new-layout .golden-header {
  background: linear-gradient(135deg,#ffd700 0%,#ffed4a 100%);
  color: #153746;
  font-weight: 600;
  padding: .75rem 1rem;
  border-bottom: 2px solid #ffd700;
  border-radius: 12px 12px 0 0;
}

/* Inputs that match the theme */
.limitless.gl-new-layout .golden-input.form-control,
textarea.golden-input {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,215,0,.35);
  border-radius: 8px;
}

/* Buttons */
.limitless.gl-new-layout .btn-golden {
  background: #ffd700;
  color: #153746;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255,215,0,.4);
}
.limitless.gl-new-layout .btn-golden:hover { background:#ffed4a; }

/* ===== Tokens (already have color vars; ensure these exist) ===== */
:root{
  --brand-gold:#ffd700;
  --brand-teal-1:#0d1b2a;
  --brand-teal-2:#153746;
  --brand-teal-3:#1e4a5d;
  --hero-gradient:linear-gradient(135deg,var(--brand-teal-1) 0%,var(--brand-teal-2) 50%,var(--brand-teal-3) 100%);
  --card-glass: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  --card-glass-hover: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.08));
}

/* ===== Brand lockup ===== */
.limitless.gl-new-layout .limitless.gl-new-layout-text{font-family:'Lexend Deca',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:600}
.limitless.gl-new-layout-text .limit{color:#fff}
.limitless.gl-new-layout-text .less{color:var(--brand-gold)}

/* Removed legacy pill navigation overrides (now centralized in components/nav_pills.css) */

/* Hero styling moved to section_header.html component */

/* ===== Layout utilities ===== */
.limitless.gl-new-layout .page-shell{max-width:1200px;margin-inline:auto;padding-inline:1rem}  /* apply to page content wrapper */
@media (min-width:1400px){ .page-shell{max-width:1280px} }

/* ===== Glass card with gold accent (use for sections everywhere) ===== */
.limitless.gl-new-layout .glass-card{
  background:var(--card-glass);
  border:1px solid rgba(255,215,0,.30);
  border-radius:20px;
  padding:2rem;
  margin-bottom:2rem;
  backdrop-filter:blur(15px);
  box-shadow:0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(255,215,0,.15);
  transition:all .3s ease;
  position:relative;overflow:hidden;
}
.limitless.gl-new-layout .glass-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#ffd700 0%, #ffed4a 50%, #ffd700 100%);
}
.limitless.gl-new-layout .glass-card:hover{
  background:var(--card-glass-hover);
  border-color:rgba(255,215,0,.5);
  box-shadow:0 12px 40px rgba(0,0,0,.15), 0 4px 16px rgba(255,215,0,.25);
  transform:translateY(-2px);
}

/* ===== Buttons ===== */
.limitless.gl-new-layout .btn-golden{
  background:linear-gradient(135deg,#ffd700,#ffed4e);
  color:#153746; border:none; font-weight:600;
  padding:.75rem 1.5rem; border-radius:25px; transition:all .3s ease;
}
.limitless.gl-new-layout .btn-golden:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(255,215,0,.4);color:#153746}
.limitless.gl-new-layout .btn-outline-golden{
  background:transparent;border:2px solid var(--brand-gold);color:var(--brand-gold);
  padding:.5rem 1rem;border-radius:20px;font-weight:500;transition:all .3s ease;
}
.limitless.gl-new-layout .btn-outline-golden:hover{background:var(--brand-gold);color:#153746}

/* ===== Inputs (gold theme) ===== */
.limitless.gl-new-layout .input-golden,
.limitless.gl-new-layout .form-control.input-golden,
.limitless.gl-new-layout .form-select.input-golden{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,215,0,.30);
  border-radius:12px; color:#fff;
  padding:.75rem 1rem; transition:all .3s ease;
}
.limitless.gl-new-layout .input-golden:focus,
.limitless.gl-new-layout .form-control.input-golden:focus,
.limitless.gl-new-layout .form-select.input-golden:focus{
  background:rgba(255,255,255,.15);
  border-color:#ffd700;
  box-shadow:0 0 0 .2rem rgba(255,215,0,.25);
  color:#fff; outline:none;
}

/* Sliders */
.limitless.gl-new-layout .form-range,
input[type="range"]{
  height:8px;border-radius:4px;background:rgba(255,255,255,.10);accent-color:#ffd700;
}
.limitless.gl-new-layout .form-range::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#ffd700;border:2px solid #153746;box-shadow:0 2px 6px rgba(255,215,0,.3) }
.limitless.gl-new-layout .form-range::-moz-range-thumb,
input[type="range"]::-moz-range-thumb{ width:24px;height:24px;border-radius:50%;background:#ffd700;border:2px solid #153746;box-shadow:0 2px 6px rgba(255,215,0,.3) }

/* ===== Gold pills (scoped so it won't hit every .nav-pills) ===== */
.limitless.gl-new-layout .pills-golden .nav-link{
  background:rgba(255,215,0,.20) !important; color:#ffd700 !important;
  border:1px solid rgba(255,215,0,.40) !important;
  padding:.6rem 1.2rem !important; border-radius:25px !important; font-weight:600 !important;
  transition:all .3s ease !important; margin-right:.5rem !important; margin-bottom:.5rem !important;
}
.limitless.gl-new-layout .pills-golden .nav-link:hover{
  background:rgba(255,215,0,.30) !important; transform:translateY(-2px);
  box-shadow:0 4px 15px rgba(255,215,0,.2);
}
.limitless.gl-new-layout .pills-golden .nav-link.active{
  background:linear-gradient(135deg,#ffd700,#ffed4e) !important; color:#153746 !important; border:none !important;
}

/* ===== Quick utilities ===== */
.limitless.gl-new-layout .border-gold{ border:1px solid rgba(255,215,0,.30) !important }
.limitless.gl-new-layout .glow-gold{ box-shadow:0 0 0 .2rem rgba(255,215,0,.25) !important }

/* Section widget styling - Simplified Premium Look */
.limitless.gl-new-layout .section-widget {
  background: linear-gradient(135deg, rgba(21, 55, 70, 0.4), rgba(21, 55, 70, 0.2));
  border: 3px solid rgba(255, 215, 0, 0.6) !important;
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.25);
  position: relative;
  overflow: hidden;
}

/* Widget header styling - Enhanced with centering and bold text */
.limitless.gl-new-layout .section-widget h5 {
  color: #ffd700 !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
}

/* Widget subheading styling - Apply globally to section widgets */
.section-widget .widget-subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* Optional: Style the icons consistently too */
.limitless.gl-new-layout .section-widget h5 i.section-icon {
  margin-right: 0.5rem;
}

/* Widget header layout - replaces Bootstrap flexbox div */
.limitless.gl-new-layout .section-widget > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Icon spacing in widget headers */
.limitless.gl-new-layout .section-widget h5 i.section-icon {
  margin-right: 1rem;
}

/* Nutrition widget micro-typography */
.nutrition-targets-widget .macro-label {
  color: rgba(255,255,255,0.55);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.1;
  margin-top: 2px;
}
.nutrition-targets-widget .macro-percent {
  color: rgba(255,255,255,0.4);
  font-size: 0.55rem;
  letter-spacing: .5px;
  margin-top: 2px;
}

/* Vertical Nutrition Stack */
.nutrition-targets-widget .nutrition-stack .nt-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 14px;
  padding: 14px 16px 10px;
  position: relative;
}
.nutrition-targets-widget .nutrition-stack .nt-block:not(:last-child){
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.4);
}
.nutrition-targets-widget .nt-block-title{
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(255,215,0,0.85);
  margin-bottom: .4rem;
}
.nutrition-targets-widget .nt-targets{background:linear-gradient(135deg,rgba(255,215,0,0.07),rgba(255,215,0,0.03));}
.nutrition-targets-widget .nt-current{background:linear-gradient(135deg,rgba(42,157,143,0.18),rgba(42,157,143,0.05));}
.nutrition-targets-widget .nt-fasting{background:linear-gradient(135deg,rgba(156,39,176,0.18),rgba(156,39,176,0.05));border:1px solid rgba(156,39,176,0.45);}

/* Nutrition Widget Standardization Utilities */
.nutrition-widget-body { padding:1.25rem 1.25rem 1rem; }
.widget-shell-gold { background: rgba(21,55,70,0.35); border:1px solid rgba(255,215,0,0.35); border-radius:20px; }
.widget-title-gold { color:#ffd700; font-weight:600; letter-spacing:.5px; }
.macro-calories { color:#ffd700; }
.macro-protein { color:#dc3545; }
.macro-carbs { color:#007bff; }
.macro-fats { color:#28a745; }
.macro-fasting { color:#d26ce8; }
.no-targets-icon { font-size:2rem; opacity:0.3; }


/* Consistent dashboard widget vertical spacing */
.dashboard-widget{margin-bottom:2.25rem !important;}

/* Nutrition widget overrides: ensure vertical stacking & full width */
.nutrition-targets-widget .card-body{display:block !important;}
.nutrition-targets-widget .widget-header{width:100%; margin-bottom:1rem;}
.nutrition-targets-widget #nutritionTargetWidget{width:100%;}
.nutrition-targets-widget .widget-controls{display:flex; align-items:center;}
.nutrition-targets-widget .widget-header h6{flex:1;}

.limitless.gl-new-layout html[data-bs-theme="dark"] body .section-widget h5 {
  color: #ffd700 !important;
}

/* Toast Notification System - On-Brand Golden Styling */
.toast {
    background: rgba(255, 215, 0, 0.15);
    border: 2px solid rgba(255, 215, 0, 0.7);
    backdrop-filter: blur(10px);
    color: #1a1a1a !important;
}

.toast .toast-body {
    color: #1a1a1a !important;
    font-weight: 500;
}

.toast .btn-close {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}

/* =============================================================
   Golden Header Neutralization (Weekly Check-in alignment)
   ---------------------------------------------------------
   The previous definition earlier in this file applies a gold
   gradient to every .golden-header. We now want headers to be
   neutral by default (transparent / inherit card background)
   and only show the gold fill when explicitly requested.
   Add .golden-header--gradient to re-enable the legacy look.
   ============================================================= */
.limitless.gl-new-layout .golden-header {
  background: transparent !important;
  border-bottom: none !important;
  color: #153746; /* dark text for readability */
}

/* Opt-in variant (use class="golden-header golden-header--gradient") */
.limitless.gl-new-layout .golden-header.golden-header--gradient {
  background: linear-gradient(135deg,#ffd700 0%,#ffed4a 100%) !important;
  border-bottom: 2px solid #ffd700 !important;
  color: #153746 !important;
}

body > main > div > div > div > div.golden-card > div.golden-header {
  background: #153746 !important;
}

/* ===== Admin Dashboard Card Color Variants ===== */
.card-teal {
  background: rgba(42, 157, 143, 0.1) !important;
  border: 1px solid #2a9d8f !important;
  border-radius: 15px !important;
}

.card-gold {
  background: rgba(255, 215, 0, 0.1) !important;
  border: 1px solid #ffd700 !important;
  border-radius: 15px !important;
}

.card-orange {
  background: rgba(226, 112, 45, 0.1) !important;
  border: 1px solid #e2702d !important;
  border-radius: 15px !important;
}

.card-dark {
  background: rgba(21, 55, 70, 0.3) !important;
  border: 1px solid #153746 !important;
  border-radius: 15px !important;
}

/* Icon color utilities for cards */
.icon-teal { color: #2a9d8f !important; }
.icon-gold { color: #ffd700 !important; }
.icon-orange { color: #e2702d !important; }
.icon-white { color: #fff !important; }

/* Text color utilities for cards */
.text-teal { color: #2a9d8f !important; }
.text-gold { color: #ffd700 !important; }
.text-orange { color: #e2702d !important; }
.text-red { color: #dc3545 !important; }
.text-gray { color: #6c757d !important; }

/* Additional card variants */
.card-red {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid #dc3545 !important;
  border-radius: 15px !important;
}

.card-gray {
  background: rgba(108, 117, 125, 0.1) !important;
  border: 1px solid #6c757d !important;
  border-radius: 15px !important;
}

/* Icon color utilities */
.icon-red { color: #dc3545 !important; }
.icon-gray { color: #6c757d !important; }