/* Quick Dashboard CSS - Updated for exact color matching */
/* ========================================
   REWARDS HUB - CUSTOM STYLES
   ======================================== */

   .report_hub {
    /* CSS Variables - Design System */
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    --surface-color: #ffffff;
    --border-color: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #6b7280;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.report_hub {
    background-color: #f9fafb;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.report_hub .bg-surface {
    background-color: var(--surface-color);
}

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

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

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

.report_hub .text-accent-dark {
    color: #4f46e5;
}

/* ========================================
   CARD COMPONENTS
   ======================================== */

.report_hub .card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
}

.report_hub .card:hover {
    box-shadow: var(--shadow-md);
}

.report_hub .card-header {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
}

.report_hub .card-body {
    padding: 1.5rem;
}

/* ========================================
   DASHBOARD SPECIFIC STYLES
   ======================================== */

/* Metric Cards */
.report_hub .metric-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    transition: all 0.2s ease-in-out;
}

.report_hub .metric-card:hover {
    box-shadow: var(--shadow-md);
}

.report_hub .metric-card .icon {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
}

.report_hub .metric-card .icon.blue { color: #2563eb; }
.report_hub .metric-card .icon.green { color: #059669; }
.report_hub .metric-card .icon.purple { color: #7c3aed; }
.report_hub .metric-card .icon.orange { color: #ea580c; }
.report_hub .metric-card .icon.indigo { color: #4338ca; }

.report_hub .metric-card .metric-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.report_hub .metric-card .metric-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Dark Theme Styles for Metric Cards */
[data-bs-theme=dark] .report_hub .metric-card {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .report_hub .metric-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme=dark] .report_hub .metric-card .icon {
    filter: brightness(0) saturate(100%) invert(61%) sepia(31%) saturate(328%) hue-rotate(177deg) brightness(87%) contrast(84%) !important;
}

[data-bs-theme=dark] .report_hub .metric-card .metric-label {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme=dark] .report_hub .metric-card .metric-value {
    color: var(--bs-body-color) !important;
}

/* Client Cards */
.report_hub .client-card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--surface-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.report_hub .client-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.report_hub .avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    color: white;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    box-shadow: var(--shadow-sm);
}

/* ========================================
   TIER BADGES
   ======================================== */

.report_hub .tier-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.report_hub .tier-be-you-tiful {
    background-color: #fdf2f8;
    color: #be185d;
}

.report_hub .tier-fab-you-lous {
    background-color: #f3e8ff;
    color: #7c3aed;
}

.report_hub .tier-spectac-you-lar {
    background-color: #fef3c7;
    color: #d97706;
}

.report_hub .tier-st-you-pendous {
    background: linear-gradient(135deg, #f3e8ff 0%, #fdf2f8 100%);
    color: #7c3aed;
}

/* ========================================
   TRANSACTION STYLES
   ======================================== */

.report_hub .points-positive {
    color: var(--success-color);
    font-weight: 600;
}

.report_hub .points-negative {
    color: var(--danger-color);
    font-weight: 600;
}

.report_hub .transaction-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.report_hub .dot-earned { background-color: var(--success-color); }
.report_hub .dot-redeemed { background-color: var(--info-color); }
.report_hub .dot-cashback { background-color: var(--secondary-color); }
.report_hub .dot-bonus { background-color: var(--warning-color); }

.report_hub .transaction-item {
    background-color: #f8fafc;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s ease;
    border: 1px solid #e2e8f0;
}

.report_hub .transaction-item:hover {
    background-color: #f1f5f9;
}

/* ========================================
   TABLE STYLES
   ======================================== */

.report_hub .table {
    border-radius: 0.5rem;
    overflow: hidden;
}

.report_hub .table th {
    background-color: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
}

.report_hub .table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.report_hub .table tbody tr:hover {
    background-color: #f8fafc;
}

/* ========================================
   PAGINATION STYLES
   ======================================== */

.report_hub .pagination {
    margin: 0;
    gap: 0.25rem;
}

.report_hub .pagination .page-link {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.report_hub .pagination .page-link:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.report_hub .pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.report_hub .pagination .page-item.disabled .page-link {
    background-color: #f8fafc;
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.report_hub .btn {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.report_hub .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.report_hub .btn-primary:hover {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

.report_hub .btn-outline {
    color: var(--text-secondary);
    border-color: var(--border-color);
    background-color: transparent;
}

.report_hub .btn-outline:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.report_hub .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

/* ========================================
   FORM STYLES
   ======================================== */

.report_hub .form-control {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.report_hub .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.report_hub .form-label {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.report_hub .form-text {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.report_hub .form-switch .form-check-input {
    width: 3rem;
    height: 1.5rem;
    margin-top: 0;
    border-radius: 1rem;
    border: 2px solid var(--border-color);
    transition: all 0.2s ease;
}

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

.report_hub .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ========================================
   MODAL STYLES
   ======================================== */

.report_hub .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.report_hub .modal-content {
    border: none;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
}

.report_hub .modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
}

.report_hub .modal-body {
    padding: 1.5rem;
}

.report_hub .modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1.5rem;
}

/* ========================================
   TOAST STYLES
   ======================================== */

.report_hub .toast {
    border: none;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
}

.report_hub .toast-header {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}

/* ========================================
   SETUP PAGE SPECIFIC STYLES
   ======================================== */

/* Tab Navigation */
.report_hub .nav-tabs {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    background-color: #f8fafc;
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
}

.report_hub .nav-tabs .nav-item {
    margin: 0;
}

.report_hub .nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    padding: 0.75rem 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: transparent;
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
}

.report_hub .nav-tabs .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(99, 102, 241, 0.05);
}

.report_hub .nav-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: white;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.report_hub .nav-tabs .nav-link i {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Tab Content */
.report_hub .tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

.report_hub .tab-pane {
    display: none;
}

.report_hub .tab-pane.active {
    display: block;
}

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

/* Tier Configuration */
.report_hub .tier-config-item {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--surface-color);
}

/* AI Suggestions */
.report_hub .ai-suggestion {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.report_hub .ai-suggestion h4 {
    color: #1e40af;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.report_hub .ai-suggestion p {
    color: #1e40af;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

/* Preview Box */
.report_hub .preview-box {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.report_hub .preview-box h4 {
    color: #1e40af;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.report_hub .preview-box .text-sm {
    color: #1e40af;
    font-size: 0.875rem;
}

/* Integration Items */
.report_hub .integration-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.report_hub .integration-item:last-child {
    border-bottom: none;
}

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

.report_hub .badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
}

.report_hub .text-muted {
    color: var(--text-muted) !important;
}

.report_hub .fw-medium {
    font-weight: 500 !important;
}

.report_hub .fw-semibold {
    font-weight: 600 !important;
}

.report_hub .fw-bold {
    font-weight: 700 !important;
}

.report_hub .shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.report_hub .shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.report_hub .border-0 {
    border: 0 !important;
}

.report_hub .rounded-lg {
    border-radius: 0.5rem !important;
}

.report_hub .rounded-xl {
    border-radius: 0.75rem !important;
}

.report_hub .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.125rem;
}

/* ========================================
   LOADING ANIMATIONS
   ======================================== */

.report_hub .loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

.giftcard-item .btn-primary{border-radius: 0.375rem !important;}

@media (max-width: 768px) {
    .report_hub .nav-tabs {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem;
        padding: 0.25rem;
    }
    
    .report_hub .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .report_hub .nav-tabs .nav-link i {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    .report_hub .metric-card {
        padding: 1rem;
    }
    
    .report_hub .metric-card .metric-value {
        font-size: 1.5rem;
    }
    
    .report_hub .card-header,
    .report_hub .card-body {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .report_hub .nav-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .report_hub .table th,
    .report_hub .table td {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .report_hub .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
} 

/* Quick Dashboard Root Styles */
.form-control.is-invalid, .form-control.is-invalid:focus{
    border-color: var(--bs-form-invalid-border-color)!important;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)!important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23db380a'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23db380a' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + 4px) center!important;
    background-size: calc(.75em + 8px) calc(.75em + 8px);
    padding-right: calc(1.5em + 16px);
}
.quick-dashboard {
    /* Primary Colors */
    --primary-500: #6366F1;
    --primary-600: #4F46E5;
    
    /* Background Colors */
    --content-bg: #F8F9FE;
    --white: #FFFFFF;
    
    /* Text Colors */
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    
    /* Border Colors */
    --gray-200: #E5E7EB;
    
    /* Loyalty Tier Colors */
    --st-you-pendous-bg: #F5F3FF;
    --st-you-pendous-text: #7C3AED;
    --spectac-you-lar-bg: #FEF9C3;
    --spectac-you-lar-text: #CA8A04;
    --fab-you-lous-bg: #FCE7F3;
    --fab-you-lous-text: #DB2777;
    --be-you-tiful-bg: #FFE4E6;
    --be-you-tiful-text: #E11D48;
    
    /* Icon Background Colors */
    --indigo-100: #E0E7FF;
    --indigo-500: #6366F1;
    --green-100: #D1FAE5;
    --green-500: #10B981;
    --emerald-100: #D1FAE5;
    --emerald-500: #10B981;
    --purple-100: #F3E8FF;
    --purple-500: #8B5CF6;
    --orange-100: #FED7AA;
    --orange-500: #F97316;
    --sky-100: #E0F2FE;
    --sky-500: #0EA5E9;
    --blue-100: #DBEAFE;
    --blue-500: #3B82F6;
    --yellow-100: #FEF3C7;
    --yellow-500: #F59E0B;
    --success-100: #D1FAE5;
    --success-500: #10B981;
    --warning-100: #FEF3C7;
    --warning-500: #F59E0B;
    
    /* Shadow */
    --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Bootstrap Primary Colors */
    --bs-primary: #0ea5e9;
    --bs-primary-rgb: 14, 165, 233;
    --bs-primary-50: #f0f9ff;
    --bs-primary-100: #e0f2fe;
    --bs-primary-200: #bae6fd;
    --bs-primary-300: #7dd3fc;
    --bs-primary-400: #38bdf8;
    --bs-primary-500: #0ea5e9;
    --bs-primary-600: #0284c7;
    --bs-primary-700: #0369a1;
    --bs-primary-800: #075985;
    --bs-primary-900: #0c4a6e;
    --sidebar-bg: #1a1a2e;
    --sidebar-hover: #242444;
    --sidebar-active: #16213e;
    
    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Colors */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-light: #d1d5db;
    --text-white: #ffffff;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-light: #f3f4f6;
    --bg-dark: #1f2937;
    
    --border-color: #e5e7eb;
    --border-color-light: #f3f4f6;
    --border-color-dark: #d1d5db;
    
    /* Status colors */
    --success: #22c55e;
    --success-light: #dcfce7;
    --warning: #f59e42;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;
    
    /* Additional colors for services */
    --purple: #8b5cf6;
    --purple-light: #f3f4f6;
    --green: #10b981;
    --green-light: #ecfdf5;
    --pink: #ec4899;
    --pink-light: #fdf2f8;
    --orange: #f97316;
    --orange-light: #fff7ed;
    
    /* Loyalty level colors */
    --bronze: #cd7f32;
    --bronze-light: #fef7f0;
    --silver: #c0c0c0;
    --silver-light: #f8f9fa;
    --gold: #ffd700;
    --gold-light: #fffbf0;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border radius */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Additional old root variables */
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;
    --purple-light: #f3f4f6;
    --green-light: #ecfdf5;
    --pink-light: #fdf2f8;
    --orange-light: #fff7ed;
    --bronze-light: #fef7f0;
    --silver-light: #f8f9fa;
    --gold-light: #fffbf0;

    /* Base Styles */

    background-color: var(--content-bg);
    overflow-x: hidden;
}
.quick-dashboard  {
    font-size: 0.865rem;
}
/* Scrollbar */
.quick-dashboard ::-webkit-scrollbar {
    display: none;
}

/* Background Colors */
.quick-dashboard .bg-contentBg {
    background-color: var(--content-bg) !important;
}

.quick-dashboard .bg-white {
    background-color: var(--white) !important;
}

/* Text Colors */
.quick-dashboard .text-primary-600 {
    color: var(--primary-600) !important;
}

.quick-dashboard .text-gray-500 {
    color: var(--gray-500) !important;
}

.quick-dashboard .text-gray-600 {
    color: var(--gray-600) !important;
}

.quick-dashboard .text-gray-700 {
    color: var(--gray-700) !important;
}

.quick-dashboard .text-gray-800 {
    color: var(--gray-800) !important;
}

.quick-dashboard .text-gray-900 {
    color: var(--gray-900) !important;
}

.quick-dashboard .text-muted {
    color: var(--gray-500) !important;
}

.quick-dashboard .text-dark {
    color: var(--gray-800) !important;
}

/* Border Colors */
.quick-dashboard .border-gray-200 {
    border-color: var(--gray-200) !important;
}

.quick-dashboard .border-primary-600 {
    border-color: var(--primary-600) !important;
}

/* Loyalty Tier Background Colors */
.quick-dashboard .bg-st-you-pendous-bg {
    background-color: var(--st-you-pendous-bg) !important;
}

.quick-dashboard .bg-spectac-you-lar-bg {
    background-color: var(--spectac-you-lar-bg) !important;
}

.quick-dashboard .bg-fab-you-lous-bg {
    background-color: var(--fab-you-lous-bg) !important;
}

.quick-dashboard .bg-be-you-tiful-bg {
    background-color: var(--be-you-tiful-bg) !important;
}

/* Loyalty Tier Text Colors */
.quick-dashboard .text-st-you-pendous-text {
    color: var(--st-you-pendous-text) !important;
}

.quick-dashboard .text-spectac-you-lar-text {
    color: var(--spectac-you-lar-text) !important;
}

.quick-dashboard .text-fab-you-lous-text {
    color: var(--fab-you-lous-text) !important;
}

.quick-dashboard .text-be-you-tiful-text {
    color: var(--be-you-tiful-text) !important;
}

/* Icon Background Colors */
.quick-dashboard .bg-indigo-100 {
    background-color: var(--indigo-100) !important;
}

.quick-dashboard .bg-indigo-500 {
    background-color: var(--indigo-500) !important;
}

.quick-dashboard .text-indigo-500 {
    color: var(--indigo-500) !important;
}

.quick-dashboard .bg-green-100 {
    background-color: var(--green-100) !important;
}

.quick-dashboard .bg-green-500 {
    background-color: var(--green-500) !important;
}

.quick-dashboard .text-green-500 {
    color: var(--green-500) !important;
}

.quick-dashboard .bg-emerald-100 {
    background-color: var(--emerald-100) !important;
}

.quick-dashboard .bg-emerald-500 {
    background-color: var(--emerald-500) !important;
}

.quick-dashboard .text-emerald-500 {
    color: var(--emerald-500) !important;
}

.quick-dashboard .bg-purple-100 {
    background-color: var(--purple-100) !important;
}

.quick-dashboard .bg-purple-500 {
    background-color: var(--purple-500) !important;
}

.quick-dashboard .text-purple-500 {
    color: var(--purple-500) !important;
}

.quick-dashboard .bg-orange-100 {
    background-color: var(--orange-100) !important;
}

.quick-dashboard .bg-orange-500 {
    background-color: var(--orange-500) !important;
}

.quick-dashboard .text-orange-500 {
    color: var(--orange-500) !important;
}

.quick-dashboard .bg-sky-100 {
    background-color: var(--sky-100) !important;
}

.quick-dashboard .bg-sky-500 {
    background-color: var(--sky-500) !important;
}

.quick-dashboard .text-sky-500 {
    color: var(--sky-500) !important;
}

.quick-dashboard .bg-blue-100 {
    background-color: var(--blue-100) !important;
}

.quick-dashboard .bg-blue-500 {
    background-color: var(--blue-500) !important;
}

.quick-dashboard .text-blue-500 {
    color: var(--blue-500) !important;
}

.quick-dashboard .bg-yellow-100 {
    background-color: var(--yellow-100) !important;
}

.quick-dashboard .bg-yellow-500 {
    background-color: var(--yellow-500) !important;
}

.quick-dashboard .text-yellow-500 {
    color: var(--yellow-500) !important;
}

.quick-dashboard .bg-success-100 {
    background-color: var(--success-100) !important;
}

.quick-dashboard .bg-success-500 {
    background-color: var(--success-500) !important;
}

.quick-dashboard .text-success {
    color: var(--success-500) !important;
}

.quick-dashboard .bg-warning-100 {
    background-color: var(--warning-100) !important;
}

.quick-dashboard .bg-warning-500 {
    background-color: var(--warning-500) !important;
}

.quick-dashboard .text-warning {
    color: var(--warning-500) !important;
}

/* Additional old CSS classes */
.quick-dashboard .bg-danger {
    background-color: var(--danger) !important;
}

.quick-dashboard .text-danger {
    color: var(--danger) !important;
}

.quick-dashboard .bg-danger-light {
    background-color: var(--danger-light) !important;
}

.quick-dashboard .bg-info {
    background-color: var(--info) !important;
}

.quick-dashboard .text-info {
    color: var(--info) !important;
}

.quick-dashboard .bg-info-light {
    background-color: var(--info-light) !important;
}

.quick-dashboard .bg-purple-light {
    background-color: var(--purple-light) !important;
}

.quick-dashboard .bg-green-light {
    background-color: var(--green-light) !important;
}

.quick-dashboard .bg-pink-light {
    background-color: var(--pink-light) !important;
}

.quick-dashboard .bg-orange-light {
    background-color: var(--orange-light) !important;
}

.quick-dashboard .bg-bronze-light {
    background-color: var(--bronze-light) !important;
}

.quick-dashboard .bg-silver-light {
    background-color: var(--silver-light) !important;
}

.quick-dashboard .bg-gold-light {
    background-color: var(--gold-light) !important;
}

/* Additional Colors for Appointments */
.quick-dashboard .bg-purple {
    background-color: var(--purple-500) !important;
}

.quick-dashboard .text-purple {
    color: var(--purple-500) !important;
}

.quick-dashboard .bg-green {
    background-color: var(--green-500) !important;
}

.quick-dashboard .text-green {
    color: var(--green-500) !important;
}

.quick-dashboard .bg-pink {
    background-color: var(--fab-you-lous-text) !important;
}

.quick-dashboard .text-pink {
    color: var(--fab-you-lous-text) !important;
}

.quick-dashboard .bg-orange {
    background-color: var(--orange-500) !important;
}

.quick-dashboard .text-orange {
    color: var(--orange-500) !important;
}

.quick-dashboard .bg-bronze {
    background-color: #cd7f32 !important;
}

.quick-dashboard .text-bronze {
    color: #cd7f32 !important;
}

.quick-dashboard .bg-silver {
    background-color: #c0c0c0 !important;
}

.quick-dashboard .text-silver {
    color: #c0c0c0 !important;
}

.quick-dashboard .bg-gold {
    background-color: #ffd700 !important;
}

.quick-dashboard .text-gold {
    color: #ffd700 !important;
}

/* Shadows */
.quick-dashboard .shadow-subtle {
    box-shadow: var(--shadow-subtle) !important;
}

.quick-dashboard .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Font Weights */
.quick-dashboard .fw-light {
    font-weight: var(--font-light) !important;
}

.quick-dashboard .fw-normal {
    font-weight: var(--font-normal) !important;
}

.quick-dashboard .fw-medium {
    font-weight: var(--font-medium) !important;
}

.quick-dashboard .fw-semibold {
    font-weight: var(--font-semibold) !important;
}

.quick-dashboard .fw-bold {
    font-weight: var(--font-bold) !important;
}

.quick-dashboard .fw-extrabold {
    font-weight: var(--font-extrabold) !important;
}

/* Main content */
.quick-dashboard .main-content-quick-dashboard {
    margin-left: 16rem;
    background-color: var(--content-bg);
}

.quick-dashboard .main-content-full {
    margin-left: 0;
    background-color: var(--content-bg);
}

.quick-dashboard .header {
    background-color: var(--white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.quick-dashboard .dashboard-content {
    background-color: var(--content-bg);
    padding: 1.5rem;
}

.quick-dashboard .stats-card {
    background-color: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.quick-dashboard .stats-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.quick-dashboard .card-custom {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 0.5rem;
}

.quick-dashboard .stats-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar Styles */
.quick-dashboard .sidebar {
    width: 16rem;
    background-color: var(--sidebar-bg);
    color: white;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1030;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: width 0.3s ease;
}

.quick-dashboard .sidebar.collapsed {
    width: 4rem !important;
}

.quick-dashboard .sidebar-menu-item {
    color: #d1d5db;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    padding: 0.625rem 1rem;
    margin: 0 0.5rem;
    border-radius: 0.375rem;
}

.quick-dashboard .sidebar-menu-item:hover {
    background-color: var(--sidebar-hover);
    color: white;
}

.quick-dashboard .sidebar-menu-item.active {
    background-color: var(--bs-primary);
    color: white;
}

.quick-dashboard .sidebar-submenu {
    background-color: transparent;
    border: none;
    color: #9ca3af;
    font-size: 0.875rem;
    padding: 0.375rem 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.quick-dashboard .sidebar-submenu:hover {
    color: white;
    background-color: transparent;
}

/* Main content */
.quick-dashboard .main-content {
    margin-left: 16rem;
    transition: margin-left 0.3s ease;
}

.quick-dashboard .main-content.expanded {
    margin-left: 4rem;
}

/* Main content quick dashboard specific styles */
.quick-dashboard .main-content-quick-dashboard {
    margin-left: 16rem;
    transition: margin-left 0.3s ease;
    background-color: var(--content-bg);
}

.quick-dashboard .main-content-quick-dashboard.expanded {
    margin-left: 4rem;
}

.quick-dashboard .main-content-quick-dashboard .header {
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.quick-dashboard .main-content-quick-dashboard .dashboard-content {
    background-color: var(--content-bg);
    padding: 1.5rem;
}

.quick-dashboard .main-content-quick-dashboard .stats-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.quick-dashboard .main-content-quick-dashboard .stats-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.quick-dashboard .main-content-quick-dashboard .chart-container {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quick-dashboard .main-content-quick-dashboard .quick-link-item {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.quick-dashboard .main-content-quick-dashboard .quick-link-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quick-dashboard .main-content-quick-dashboard .activity-item {
    border-bottom: 1px solid #f3f4f6;
    padding: 0.75rem 0;
}

.quick-dashboard .main-content-quick-dashboard .activity-item:last-child {
    border-bottom: none;
}

.quick-dashboard .main-content-quick-dashboard .product-item {
    background-color: #f9fafb;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s ease;
}

.quick-dashboard .main-content-quick-dashboard .product-item:hover {
    background-color: #f3f4f6;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .quick-dashboard .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .quick-dashboard .sidebar.show {
        transform: translateX(0);
    }
    
    .quick-dashboard .main-content-quick-dashboard {
        margin-left: 0;
    }
}

/* Font Awesome Icon Preservation */
.quick-dashboard .fa, .quick-dashboard .fas, .quick-dashboard .far, .quick-dashboard .fal, .quick-dashboard .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
}  
.quick-dashboard #client-tier-distribution .text-xs.fw-semibold.me-3.px-2.py-1.rounded {font-size: 12px !important;}

/* Custom Appointments Page Styles */
.quick-dashboard .appointments-nav-tab {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border: none;
    background: none;
    color: #6c757d;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.quick-dashboard .appointments-nav-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
    font-weight: 600;
}

.quick-dashboard .appointments-nav-tab:hover {
    color: #6366f1;
    background-color: rgba(99, 102, 241, 0.05);
}

.quick-dashboard .filter-tag {
    background-color: #f8f9fa;
    color: #495057;
    padding: 0.375rem 0.75rem;
    border-radius: 50px;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e9ecef;
}

.quick-dashboard .filter-tag .remove-btn {
    background: none;
    border: none;
    color: #6c757d;
    padding: 0;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.quick-dashboard .filter-tag .remove-btn:hover {
    background-color: #e9ecef;
    color: #495057;
}

.quick-dashboard .stats-card-custom {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.quick-dashboard .stats-card-custom:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.quick-dashboard .stats-icon-circle {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.quick-dashboard .stats-icon-circle.blue {
    background-color: #dbeafe;
    color: #2563eb;
}

.quick-dashboard .stats-icon-circle.green {
    background-color: #dcfce7;
    color: #16a34a;
}

.quick-dashboard .stats-icon-circle.amber {
    background-color: #fef3c7;
    color: #d97706;
}

.quick-dashboard .stats-icon-circle.purple {
    background-color: #e9d5ff;
    color: #9333ea;
}

.quick-dashboard .stats-icon-circle.orange {
    background-color: #fed7aa;
    color: #ea580c;
}

.quick-dashboard .stats-icon-circle.red {
    background-color: #fecaca;
    color: #dc2626;
}

.quick-dashboard .appointment-table-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.quick-dashboard .appointment-table-header th {
    padding: 1rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-dashboard .appointment-table-header th:hover {
    background-color: #e9ecef;
}

.quick-dashboard .appointment-table-header .sort-icon {
    margin-left: 0.5rem;
    font-size: 0.625rem;
    opacity: 0.7;
}

.quick-dashboard .appointment-table-row {
    border-bottom: 1px solid #f1f3f4;
    transition: all 0.2s ease;
}

.quick-dashboard .appointment-table-row:hover {
    background-color: #f8f9fa;
}

.quick-dashboard .appointment-table-row td {
    padding: 1rem 1.5rem;
    vertical-align: middle;
}

.quick-dashboard .client-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quick-dashboard .client-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.quick-dashboard .client-details h6 {
    font-weight: 600;
    color: #6366f1;
    margin-bottom: 0.25rem;
    cursor: pointer;
}

.quick-dashboard .client-details p {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.125rem;
}

.quick-dashboard .vip-badge {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.quick-dashboard .member-badge {
    background-color: #6366f1;
    color: white;
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}
.quick-dashboard .btn-link {
    text-decoration: none;
}
.quick-dashboard .service-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
}

.quick-dashboard .service-badge.blue {
    background-color: #dbeafe;
    color: #1e40af;
}

.quick-dashboard .service-badge.purple {
    background-color: #e9d5ff;
    color: #7c3aed;
}

.quick-dashboard .service-badge.green {
    background-color: #dcfce7;
    color: #15803d;
}

.quick-dashboard .service-badge.pink {
    background-color: #fce7f3;
    color: #be185d;
}

.quick-dashboard .service-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
}

.quick-dashboard .staff-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-dashboard .staff-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.quick-dashboard .staff-name {
    font-size: 0.875rem;
    color: #212529;
    font-weight: 500;
}

.quick-dashboard .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
}

.quick-dashboard .status-badge.upcoming {
    background-color: #fef3c7;
    color: #d97706;
}

.quick-dashboard .status-badge.checked-in {
    background-color: #e9d5ff;
    color: #7c3aed;
}

.quick-dashboard .status-badge.no-show {
    background-color: #fed7aa;
    color: #ea580c;
}

.quick-dashboard .status-time {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.quick-dashboard .action-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-dashboard .action-btn {
    background: none;
    border: none;
    padding: 0.375rem;
    border-radius: 4px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.quick-dashboard .action-btn:hover {
    background-color: #f8f9fa;
    color: #495057;
}

.quick-dashboard .action-btn.edit {
    color: #6c757d;
}

.quick-dashboard .action-btn.complete {
    color: #16a34a;
}

.quick-dashboard .action-btn.cancel {
    color: #dc2626;
}

.quick-dashboard .action-btn.chat {
    color: #6366f1;
}

.quick-dashboard .action-btn.schedule {
    color: #6366f1;
}

.quick-dashboard .action-btn.sms {
    color: #8b5cf6;
}

.quick-dashboard .action-btn.more {
    color: #6c757d;
}

.quick-dashboard .search-input-custom {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    font-size: 0.875rem;
    width: 320px;
    transition: all 0.2s ease;
}

.quick-dashboard .search-input-custom:focus {
    background-color: white;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}

.quick-dashboard .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 0.875rem;
}

.quick-dashboard .btn-export {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #495057;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.quick-dashboard .btn-export:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #212529;
}

.quick-dashboard .btn-new-appointment {
    background-color: #6366f1;
    border: 1px solid #6366f1;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.quick-dashboard .btn-new-appointment:hover {
    background-color: #5855eb;
    border-color: #5855eb;
    color: white;
}

.quick-dashboard .form-select-custom {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #495057;
    transition: all 0.2s ease;
}

.quick-dashboard .form-select-custom:focus {
    background-color: white;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}

.quick-dashboard .dropdown-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 0.75rem;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quick-dashboard .appointments-nav-tab {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .quick-dashboard .stats-card-custom {
        padding: 1rem;
    }
    
    .quick-dashboard .search-input-custom {
        width: 100%;
        max-width: 280px;
    }
    
    .quick-dashboard .appointment-table-row td {
        padding: 0.75rem 1rem;
    }
}

/* Custom Gift Card Page Styles */
.quick-dashboard .giftcard-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #0d9488 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

.quick-dashboard .giftcard-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #0d9488 100%);
    padding: 4rem 0;
}

.quick-dashboard .giftcard-feature {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
}

.quick-dashboard .giftcard-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #e9ecef;
}

.quick-dashboard .giftcard-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.quick-dashboard .giftcard-custom {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    color: white;
}

.quick-dashboard .giftcard-custom:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.quick-dashboard .giftcard-category {
    background-color: #f8f9fa;
    color: #495057;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
    cursor: pointer;
}

.quick-dashboard .giftcard-category:hover {
    background-color: #e9ecef;
    color: #212529;
}

.quick-dashboard .giftcard-step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.quick-dashboard .btn-brand-teal {
    background-color: #0d9488;
    border-color: #0d9488;
    color: white;
}

.quick-dashboard .btn-brand-teal:hover {
    background-color: #0f766e;
    border-color: #0f766e;
    color: white;
}

.quick-dashboard .text-brand-teal {
    color: #0d9488 !important;
}

.quick-dashboard .text-brand-dark-blue {
    color: #1e3a8a !important;
}

/* Custom Team Page Styles */
.quick-dashboard .team-stats-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.quick-dashboard .team-stats-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.quick-dashboard .team-stats-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.quick-dashboard .team-member-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.quick-dashboard .team-member-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.quick-dashboard .team-member-header {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    text-align: center;
}

.quick-dashboard .team-member-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quick-dashboard .team-member-status {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid white;
}

.quick-dashboard .team-member-status.online {
    background-color: #10b981;
}

.quick-dashboard .team-member-status.offline {
    background-color: #6b7280;
}

.quick-dashboard .team-member-status.busy {
    background-color: #f59e0b;
}

.quick-dashboard .team-member-body {
    padding: 1.5rem;
}

.quick-dashboard .team-member-actions {
    display: flex;
    gap: 0.5rem;
}

.quick-dashboard .bg-primary-100 {
    background-color: #dbeafe !important;
}

.quick-dashboard .bg-success-100 {
    background-color: #dcfce7 !important;
}

.quick-dashboard .bg-warning-100 {
    background-color: #fef3c7 !important;
}

.quick-dashboard .bg-info-100 {
    background-color: #dbeafe !important;
}

.quick-dashboard .bg-purple-100 {
    background-color: #e9d5ff !important;
}

.quick-dashboard .bg-orange-100 {
    background-color: #fed7aa !important;
}

.quick-dashboard .bg-pink-100 {
    background-color: #fce7f3 !important;
}

.quick-dashboard .bg-green-100 {
    background-color: #dcfce7 !important;
}

.quick-dashboard .bg-red-100 {
    background-color: #fecaca !important;
}

.quick-dashboard .bg-blue-100 {
    background-color: #dbeafe !important;
}

.quick-dashboard .text-primary {
    color: #2563eb !important;
}

.quick-dashboard .text-success {
    color: #16a34a !important;
}

.quick-dashboard .text-warning {
    color: #d97706 !important;
}

.quick-dashboard .text-info {
    color: #2563eb !important;
}

.quick-dashboard .text-purple {
    color: #7c3aed !important;
}

.quick-dashboard .text-orange {
    color: #ea580c !important;
}

.quick-dashboard .text-pink {
    color: #be185d !important;
}

.quick-dashboard .text-green {
    color: #15803d !important;
}

.quick-dashboard .text-red {
    color: #dc2626 !important;
}

.quick-dashboard .text-blue {
    color: #1e40af !important;
}

/* Responsive adjustments for gift card and team pages */
@media (max-width: 768px) {
    .quick-dashboard .giftcard-feature {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .quick-dashboard .team-member-card {
        margin-bottom: 1rem;
    }
    
    .quick-dashboard .team-stats-card {
        margin-bottom: 1rem;
    }
}

/* Custom Reputation Management Page Styles */
.quick-dashboard .repman-sidebar {
    background-color: #1a1a2e;
    color: white;
    width: 16rem;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.quick-dashboard .repman-menu-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    color: #cbd5e1;
    border-radius: 0.375rem;
    margin: 0 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.quick-dashboard .repman-menu-item:hover {
    background-color: #242444;
    color: white;
}

.quick-dashboard .repman-menu-item.active {
    background-color: #2563eb;
    color: white;
}

.quick-dashboard .repman-submenu {
    display: block;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.quick-dashboard .repman-submenu:hover {
    color: white;
}

.quick-dashboard .repman-submenu.active {
    color: white;
    background-color: #242444;
    border-radius: 0.375rem;
    padding-left: 0.5rem;
    margin-right: 0.5rem;
}

.quick-dashboard .repman-stats-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.quick-dashboard .repman-stats-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.quick-dashboard .repman-stats-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Additional color utilities for repman page */
.quick-dashboard .bg-danger-100 {
    background-color: #fee2e2 !important;
}

.quick-dashboard .text-danger {
    color: #dc2626 !important;
}

.quick-dashboard .bg-warning-100 {
    background-color: #fef3c7 !important;
}

.quick-dashboard .text-warning {
    color: #d97706 !important;
}

.quick-dashboard .bg-info-100 {
    background-color: #dbeafe !important;
}

.quick-dashboard .text-info {
    color: #2563eb !important;
}

.quick-dashboard .bg-success-100 {
    background-color: #dcfce7 !important;
}

.quick-dashboard .text-success {
    color: #16a34a !important;
}

.quick-dashboard .bg-primary-100 {
    background-color: #dbeafe !important;
}

.quick-dashboard .text-primary {
    color: #2563eb !important;
}

/* Responsive adjustments for repman page */
@media (max-width: 768px) {
    .quick-dashboard .repman-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .quick-dashboard .repman-sidebar.show {
        transform: translateX(0);
    }
    
    .quick-dashboard .repman-stats-card {
        margin-bottom: 1rem;
    }
}

/* ========================================
   ADDITIONAL COLOR CLASSES FOR REPUTATION PAGE
   ======================================== */

/* Green color variations */
.quick-dashboard .bg-green-400 {
    background-color: #4ade80 !important;
}

.quick-dashboard .bg-green-500 {
    background-color: #22c55e !important;
}

.quick-dashboard .text-green-800 {
    color: #166534 !important;
}

/* Yellow color variations */
.quick-dashboard .bg-yellow-400 {
    background-color: #facc15 !important;
}

.quick-dashboard .text-yellow-400 {
    color: #facc15 !important;
}

/* Orange color variations */
.quick-dashboard .bg-orange-400 {
    background-color: #fb923c !important;
}

.quick-dashboard .text-orange-400 {
    color: #fb923c !important;
}

/* Red color variations */
.quick-dashboard .bg-red-500 {
    background-color: #ef4444 !important;
}

.quick-dashboard .text-red-500 {
    color: #ef4444 !important;
}

/* Amber color variations */
.quick-dashboard .text-amber-500 {
    color: #f59e0b !important;
}

.quick-dashboard .text-amber-600 {
    color: #d97706 !important;
}

/* Blue color variations */
.quick-dashboard .text-blue-600 {
    color: #2563eb !important;
}

.quick-dashboard .text-blue-800 {
    color: #1e40af !important;
}

/* Pink color variations */
.quick-dashboard .text-pink-600 {
    color: #db2777 !important;
}

/* Red color variations for badges */
.quick-dashboard .text-red-600 {
    color: #dc2626 !important;
}

.quick-dashboard .text-red-800 {
    color: #991b1b !important;
}

/* Progress bar specific colors */
.quick-dashboard .progress {
    background-color: #f3f4f6 !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}

.quick-dashboard .progress-bar {
    border-radius: 9999px !important;
    transition: width 0.6s ease !important;
}

/* Custom height utilities */
.quick-dashboard .h-3 {
    height: 0.75rem !important;
}

.quick-dashboard .w-100 {
    width: 100% !important;
}

/* Custom padding utilities */
.quick-dashboard .p-1-5 {
    padding: 0.375rem !important;
}

/* Custom margin utilities */
.quick-dashboard .space-y-4 > * + * {
    margin-top: 1rem !important;
}

/* Custom border radius */
.quick-dashboard .rounded-pill {
    border-radius: 9999px !important;
}
/* Font Awesome Icon Preservation */
.quick-dashboard .fa, .quick-dashboard .fas, .quick-dashboard .far, .quick-dashboard .fal, .quick-dashboard .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
}  

/* ========================================
   CUSTOM GIFTCARD PAGE
   ======================================== */

/* Upload Your Own Section - Custom Design */
.quick-dashboard .giftcard-custom {
    background: linear-gradient(135deg, #9333ea 0%, #4f46e5 100%) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    text-align: center !important;
}

.quick-dashboard .giftcard-custom:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px) !important;
}

.quick-dashboard .giftcard-custom .h-48 {
    height: 12rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.quick-dashboard .giftcard-custom .h-48 i {
    font-size: 4rem !important;
    margin-bottom: 1rem !important;
    opacity: 0.8 !important;
    color: white !important;
}

.quick-dashboard .giftcard-custom .h-48 p {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 0 !important;
}

.quick-dashboard .giftcard-custom .p-4 {
    padding: 1rem 0.2rem !important;
    background: transparent !important;
}

.quick-dashboard .giftcard-custom .p-4 h3 {
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    color: white !important;
    margin-bottom: 0.25rem !important;
}

.quick-dashboard .giftcard-custom .p-4 p {
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 0.75rem !important;
}

.quick-dashboard .giftcard-custom .p-4 .text-white {
    color: white !important;
    font-weight: 700 !important;
}

.quick-dashboard .giftcard-custom .p-4 .btn-light {
    background-color: white !important;
    color: #9333ea !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.quick-dashboard .giftcard-custom .p-4 .btn-light:hover {
    background-color: #f8fafc !important;
    transform: translateY(-1px) !important;
}

/* General Gift Card Section - Custom Design */
.quick-dashboard .giftcard-general {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    text-align: center !important;
}

.quick-dashboard .giftcard-general:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px) !important;
}

.quick-dashboard .giftcard-general .h-48 {
    height: 12rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
}

.quick-dashboard .giftcard-general .h-48 i {
    font-size: 4rem !important;
    margin-bottom: 1rem !important;
    color: white !important;
}

.quick-dashboard .giftcard-general .h-48 p {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 0 !important;
}

.quick-dashboard .giftcard-general .p-4 {
    padding: 1rem !important;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
}

.quick-dashboard .giftcard-general .p-4 h3 {
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    color: white !important;
    margin-bottom: 0.25rem !important;
}

.quick-dashboard .giftcard-general .p-4 p {
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 0.75rem !important;
}

.quick-dashboard .giftcard-general .p-4 .text-white {
    color: white !important;
    font-weight: 700 !important;
}

.quick-dashboard .giftcard-general .p-4 .btn-light {
    background-color: white !important;
    color: #ea580c !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.quick-dashboard .giftcard-general .p-4 .btn-light:hover {
    background-color: #fff7ed !important;
    transform: translateY(-1px) !important;
}

/* Digital Gift Card Preview Section */
.quick-dashboard .bg-gradient-to-br {
    background: linear-gradient(135deg, #0d9488 0%, #2563eb 100%) !important;
    border-radius: 0.5rem !important;
    padding: 1.5rem !important;
    color: white !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.quick-dashboard .bg-gradient-to-br .w-12 {
    width: 3rem !important;
    height: 3rem !important;
    background-color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 0.75rem auto !important;
}

.quick-dashboard .bg-gradient-to-br .w-12 i {
    color: #0d9488 !important;
    font-size: 1.25rem !important;
}

.quick-dashboard .bg-gradient-to-br h4 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
    color: white !important;
}

.quick-dashboard .bg-gradient-to-br p {
    font-size: 0.875rem !important;
    opacity: 0.9 !important;
    margin-bottom: 1rem !important;
    color: white !important;
}
.quick-dashboard .bg-gradient-to-br .bg-white.rounded-circle {
    background-color: rgba(255, 255, 255, 1) !important;
    border-radius: 50% !important;
}
.quick-dashboard .bg-gradient-to-br .bg-white {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
}

.quick-dashboard .bg-gradient-to-br .bg-white p:first-child {
    font-size: 0.75rem !important;
    margin-bottom: 0.25rem !important;
    color: white !important;
}

.quick-dashboard .bg-gradient-to-br .bg-white p:last-child {
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
    font-style: italic !important;
    color: white !important;
    margin: 0 !important;
}

.quick-dashboard .bg-gradient-to-br .border-top {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding-top: 0.75rem !important;
}

.quick-dashboard .bg-gradient-to-br .border-top p:first-child {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
}

.quick-dashboard .bg-gradient-to-br .border-top p:last-child {
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
    color: white !important;
    margin: 0 !important;
}

/* Hero Section Updates */
.quick-dashboard .giftcard-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #0d9488 100%) !important;
    padding: 4rem 0 !important;
}

.quick-dashboard .giftcard-hero .display-4 {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    color: white !important;
}

.quick-dashboard .giftcard-hero .fs-5 {
    font-size: 1.25rem !important;
    margin-bottom: 2rem !important;
    opacity: 0.9 !important;
    color: white !important;
}

.quick-dashboard .giftcard-hero .giftcard-feature {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.quick-dashboard .giftcard-hero .giftcard-feature i {
    font-size: 1.25rem !important;
    color: #facc15 !important;
}

.quick-dashboard .giftcard-hero .giftcard-feature span {
    color: white !important;
    font-weight: 500 !important;
}

/* Purchase Form Updates */
.quick-dashboard .bg-white.rounded.shadow-lg {
    background-color: white !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 2rem !important;
}

.quick-dashboard .bg-white.rounded.shadow-lg h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1e3a8a !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
}

.quick-dashboard .bg-white.rounded.shadow-lg .form-control,
.quick-dashboard .bg-white.rounded.shadow-lg .form-select {
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}
.bootstrap-timepicker-widget table td input {
    width: 32px!important;
}
/* .quick-dashboard .bg-white.rounded.shadow-lg .form-control:focus,
.quick-dashboard .bg-white.rounded.shadow-lg .form-select:focus {
    outline: none !important;
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1) !important;
} */

.quick-dashboard .bg-white.rounded.shadow-lg .form-label {
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.quick-dashboard .bg-white.rounded.shadow-lg .btn-purple {
    background-color: #9333ea !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.quick-dashboard .bg-white.rounded.shadow-lg .btn-purple:hover {
    background-color: #7c3aed !important;
    transform: translateY(-1px) !important;
}

.quick-dashboard .bg-white.rounded.shadow-lg .btn-success {
    background-color: #059669 !important;
    color: white !important;
    border: none !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    transition: all 0.2s ease !important;
}

.quick-dashboard .bg-white.rounded.shadow-lg .btn-success:hover {
    background-color: #047857 !important;
    transform: translateY(-1px) !important;
}

/* Order Summary Updates */
.quick-dashboard .bg-light.rounded {
    background-color: #f9fafb !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
}

.quick-dashboard .bg-light.rounded .fw-semibold {
    font-weight: 600 !important;
}

.quick-dashboard .bg-light.rounded .fs-5 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quick-dashboard .giftcard-hero .giftcard-feature {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }
    
    .quick-dashboard .giftcard-custom .h-48 i,
    .quick-dashboard .giftcard-general .h-48 i {
        font-size: 3rem !important;
    }
    
    .quick-dashboard .giftcard-custom .h-48 p,
    .quick-dashboard .giftcard-general .h-48 p {
        font-size: 1rem !important;
    }
} 

.form-control.is-invalid, .form-select.is-invalid{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23db380a'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23db380a' stroke='none'/%3E%3C/svg%3E") !important;
    background-position: right calc(.375em + 4px) center !important;
    background-size: calc(.75em + 8px) calc(.75em + 8px) !important;}