/* ============================================
   UI ENHANCEMENTS - Premium UtakWest Style
   ============================================ */

/* ============================================
   DARK MODE VARIABLES - Premium Slate Palette
   ============================================ */

:root {
    /* Light Mode Variables */
    --bg-primary-light: #ffffff;
    --bg-secondary-light: #f8f9fa;
    --text-primary-light: #1E293B;
    --text-secondary-light: #475569;
    --text-on-white-light: #1E293B;
    --border-light: #e2e8f0;
    --shadow-light: rgba(0, 0, 0, 0.1);

    /* Brand Colors - UtakWest */
    --higherself-blue: #31B2E0;
    --primary-dark: #2a9ec8;
    --primary-light: #5BC4E8;
    --lavender: #B19CD9;
    --accent-purple: #9B59B6;

    /* Premium Dark Mode Variables - Slate Palette */
    --bg-primary-dark: #020617;        /* Slate 950 - Main background */
    --bg-secondary-dark: #0F172A;      /* Slate 900 - Secondary background */
    --bg-tertiary-dark: #1E293B;       /* Slate 800 - Card background */
    --bg-hover-dark: #334155;          /* Slate 700 - Hover state */

    /* Premium dark mode text - WCAG AA compliant */
    --text-primary-dark: #F1F5F9;      /* Slate 100 - Primary text */
    --text-secondary-dark: #CBD5E1;    /* Slate 300 - Secondary text */
    --text-tertiary-dark: #94A3B8;     /* Slate 400 - Tertiary text */
    --text-on-white-dark: #1E293B;     /* Text on white stays dark */

    --border-dark: #334155;            /* Slate 700 */
    --shadow-dark: rgba(0, 0, 0, 0.4);

    /* Premium Glow Effects */
    --glow-primary: 0 8px 20px rgba(49, 178, 224, 0.25);
    --glow-purple: 0 8px 20px rgba(155, 89, 182, 0.25);
}

/* Light Mode (Default) */
body {
    --bg-primary: var(--bg-primary-light);
    --bg-secondary: var(--bg-secondary-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-on-white: var(--text-on-white-light);
    --border-color: var(--border-light);
    --shadow-color: var(--shadow-light);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode - Enhanced Contrast */
body.dark-mode {
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-tertiary: var(--bg-tertiary-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-tertiary: var(--text-tertiary-dark);
    --text-on-white: var(--text-on-white-dark);
    --border-color: var(--border-dark);
    --shadow-color: var(--shadow-dark);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Light mode cards - Enhanced borders and shadows */
.card,
.metric-card,
.agent-card,
.feature-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

/* Light mode card hover effects */
.agent-card:hover,
.metric-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Dark mode cards - Premium Slate Style */
body.dark-mode .card,
body.dark-mode .metric-card,
body.dark-mode .agent-card,
body.dark-mode .feature-card,
body.dark-mode .glass-card:not(.dark-bg) {
    background-color: var(--bg-tertiary-dark);
    color: var(--text-primary-dark);
    border-color: rgba(51, 65, 85, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(51, 65, 85, 0.5);
    transition: all 0.3s ease-in-out;
}

/* Dark mode card hover - Premium Glow Effect */
body.dark-mode .agent-card:hover,
body.dark-mode .metric-card:hover,
body.dark-mode .card:hover {
    border-color: var(--higherself-blue);
    box-shadow: var(--glow-primary);
    transform: translateY(-4px);
}

body.dark-mode .card *:not(.badge):not(.btn),
body.dark-mode .metric-card *:not(.badge):not(.btn),
body.dark-mode .agent-card *:not(.badge):not(.btn),
body.dark-mode .feature-card *:not(.badge):not(.btn) {
    color: var(--text-primary);
}

/* Card headers in dark mode */
body.dark-mode .card-header {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

/* Ensure all text elements are light in dark mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary-dark);
}

body.dark-mode p,
body.dark-mode span:not(.badge),
body.dark-mode div:not(.btn),
body.dark-mode label,
body.dark-mode li {
    color: var(--text-primary-dark);
}

/* Secondary text in dark mode */
body.dark-mode .text-secondary,
body.dark-mode .agent-role,
body.dark-mode .agent-description,
body.dark-mode .metric-label,
body.dark-mode .stat-label {
    color: var(--text-secondary-dark) !important;
}

/* Primary emphasized text in dark mode */
body.dark-mode .section-title,
body.dark-mode .agent-name,
body.dark-mode .metric-value,
body.dark-mode .stat-value {
    color: var(--text-primary-dark) !important;
}

/* Agent taglines and personality badges in dark mode */
body.dark-mode .agent-tagline,
body.dark-mode .agent-personality {
    background: rgba(49, 178, 224, 0.2);
    color: var(--text-primary-dark) !important;
    border: 1px solid rgba(49, 178, 224, 0.4);
}

/* Light mode - ensure dark text on light backgrounds */
body:not(.dark-mode) .card,
body:not(.dark-mode) .card-body,
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .modal-body {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* Light mode - glass cards with proper contrast */
body:not(.dark-mode) .glass-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a1a !important;
}

body:not(.dark-mode) .glass-card *:not(.badge):not(.btn):not(.status-dot):not(i) {
    color: #1a1a1a !important;
}

body:not(.dark-mode) .glass-card .text-muted,
body:not(.dark-mode) .glass-card .metric-label,
body:not(.dark-mode) .glass-card .stat-label,
body:not(.dark-mode) .glass-card .agent-role,
body:not(.dark-mode) .glass-card .team-agent-role {
    color: #4a5568 !important;
}

/* Light mode - metric cards */
body:not(.dark-mode) .metric-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body:not(.dark-mode) .metric-card .metric-value,
body:not(.dark-mode) .metric-card .metric-label {
    color: #1a1a1a !important;
}

body:not(.dark-mode) .metric-card .metric-icon i {
    color: #31B2E0 !important;
}

/* Light mode - chart cards */
body:not(.dark-mode) .chart-card {
    background: rgba(255, 255, 255, 0.95) !important;
}

body:not(.dark-mode) .chart-card .chart-title,
body:not(.dark-mode) .chart-card .chart-value {
    color: #1a1a1a !important;
}

body:not(.dark-mode) .chart-card .chart-title i {
    color: #31B2E0 !important;
}

/* Light mode - team agent cards */
body:not(.dark-mode) .team-agent-card {
    background: rgba(255, 255, 255, 0.95) !important;
}

body:not(.dark-mode) .team-agent-card .team-agent-name,
body:not(.dark-mode) .team-agent-card .stat-value {
    color: #1a1a1a !important;
}

body:not(.dark-mode) .team-agent-card .team-agent-role,
body:not(.dark-mode) .team-agent-card .stat-label {
    color: #4a5568 !important;
}

/* Light mode - section titles */
body:not(.dark-mode) .section-title,
body:not(.dark-mode) .terminal-heading {
    color: #1a1a1a !important;
}

body:not(.dark-mode) .section-title i {
    color: #31B2E0 !important;
}

/* Light mode - workflow cards */
body:not(.dark-mode) .workflow-card,
body:not(.dark-mode) .workflow-template-card {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a1a !important;
}

body:not(.dark-mode) .workflow-card h5,
body:not(.dark-mode) .workflow-template-card .template-name {
    color: #1a1a1a !important;
}

body:not(.dark-mode) .workflow-template-card .template-description,
body:not(.dark-mode) .workflow-template-card .template-category,
body:not(.dark-mode) .workflow-template-card .detail-label,
body:not(.dark-mode) .workflow-template-card .detail-value,
body:not(.dark-mode) .workflow-template-card .requirement-tag {
    color: #1a1a1a !important;
}

body:not(.dark-mode) .workflow-template-card .template-category {
    color: #4a5568 !important;
    opacity: 0.9;
}

/* Light mode - Build with Grace button proper padding */
.btn-grace {
    padding: 0.5rem 1rem !important;
    gap: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Light mode - businesses page fix */
body:not(.dark-mode) .businesses-list,
body:not(.dark-mode) #businessesTable,
body:not(.dark-mode) #businessesList {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

body:not(.dark-mode) .table {
    color: #1a1a1a !important;
}

body:not(.dark-mode) .table thead th {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    border-color: #e2e8f0 !important;
}

body:not(.dark-mode) .table tbody td {
    color: #1a1a1a !important;
    border-color: #e2e8f0 !important;
}

body:not(.dark-mode) .card-header h5 {
    color: #1a1a1a !important;
}

/* Light mode - improve text-muted contrast */
body:not(.dark-mode) .text-muted {
    color: #4a5568 !important;
}

/* Dark mode - table styling */
body.dark-mode .table {
    color: #f7fafc !important;
    background: transparent;
}

body.dark-mode .table thead th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f7fafc !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .table tbody td {
    color: #f7fafc !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .text-muted {
    color: #cbd5e0 !important;
}

/* Light mode - chat button spacing fix */
.chat-input-container .input-actions {
    gap: 1.5rem !important;
}

.btn-send {
    margin-left: 1rem !important;
}

/* Light mode - page headers */
body:not(.dark-mode) .page-header .section-title,
body:not(.dark-mode) .page-header .section-subtitle {
    color: #1a1a1a !important;
}

body:not(.dark-mode) .card h1,
body:not(.dark-mode) .card h2,
body:not(.dark-mode) .card h3,
body:not(.dark-mode) .card h4,
body:not(.dark-mode) .card h5,
body:not(.dark-mode) .card h6,
body:not(.dark-mode) .card p,
body:not(.dark-mode) .modal-body h1,
body:not(.dark-mode) .modal-body h2,
body:not(.dark-mode) .modal-body h3,
body:not(.dark-mode) .modal-body h4,
body:not(.dark-mode) .modal-body h5,
body:not(.dark-mode) .modal-body h6,
body:not(.dark-mode) .modal-body p {
    color: #1a1a1a;
}

/* Bootstrap text-muted override for dark mode */
body.dark-mode .text-muted {
    color: var(--text-secondary-dark) !important;
}

/* Card titles in dark mode */
body.dark-mode .card h5,
body.dark-mode .card-body h5 {
    color: var(--text-primary-dark) !important;
}

/* Quick Actions cards - Dark background with white text in dark mode */
body.dark-mode .card.quick-action {
    background-color: var(--bg-secondary-dark) !important;
    color: var(--text-primary-dark) !important;
}

body.dark-mode .card.quick-action h5 {
    color: var(--text-primary-dark) !important;
}

body.dark-mode .card.quick-action .text-muted {
    color: var(--text-secondary-dark) !important;
}

body.dark-mode .card.quick-action i {
    color: #ffffff !important;
}

/* ============================================
   METRIC CHANGE INDICATORS - Enhanced Contrast
   ============================================ */

/* Light mode - darker green for better contrast */
.metric-change.positive {
    color: #059669;
}

.metric-change.negative {
    color: #dc2626;
}

/* Dark mode - brighter colors with sufficient contrast */
body.dark-mode .metric-change.positive {
    color: #64d4a8;
    opacity: 1;
}

body.dark-mode .metric-change.negative {
    color: #f87171;
    opacity: 1;
}

body.dark-mode .metric-change {
    color: var(--text-secondary-dark);
}

/* ============================================
   ICON COLOR MODES - Light & Dark
   ============================================ */

/* Light Mode Icons - Default */
.feature-icon i,
.metric-icon i {
    color: inherit;
}

/* Agent icons should always be white on their gradient backgrounds */
.agent-icon i {
    color: #ffffff !important;
}

/* Dark Mode Icons - Ensure visibility */
body.dark-mode .feature-icon i {
    color: #4ECDC4 !important;
}

/* Metric icons should be white in dark mode */
body.dark-mode .metric-icon i {
    color: #ffffff !important;
}

/* Metric labels should be white in dark mode */
body.dark-mode .metric-label {
    color: var(--text-primary-dark) !important;
}

/* Agent icons maintain their gradient backgrounds but ensure icon color is white */
body.dark-mode .agent-icon i {
    color: #ffffff !important;
}

/* Quick Actions card icons - Add background frame for better visibility */
.card-body > div[style*="font-size: 3rem"] {
    background: rgba(49, 178, 224, 0.1);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

body.dark-mode .card-body > div[style*="font-size: 3rem"] {
    background: rgba(49, 178, 224, 0.15);
    border: 2px solid rgba(49, 178, 224, 0.4);
}

body.dark-mode .card.quick-action .card-body > div[style*="font-size: 3rem"] i {
    color: #ffffff !important;
}

/* Agent list page - icons in cards */
body.dark-mode .card-body i.fas,
body.dark-mode .card-body i.far,
body.dark-mode .card-body i.fab {
    color: #4ECDC4 !important;
}

/* Quick Actions cards - enhanced brightness */
body.dark-mode .card .card-body i {
    filter: brightness(1.3);
}

/* Navigation icons in dark mode */
body.dark-mode .nav-link i,
body.dark-mode .navbar-brand i {
    color: var(--text-primary-dark);
}

/* Button icons in dark mode - inherit button text color */
body.dark-mode .btn i {
    color: inherit;
}

/* Status indicator icons - keep their semantic colors */
body.dark-mode .status-indicator {
    /* Let the status-specific colors show through */
}

/* Status badges in dark mode - Enhanced visibility */
body.dark-mode .agent-status.active {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
    border: 1px solid #34d399;
}

body.dark-mode .agent-status.inactive {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    border: 1px solid #f87171;
}

/* Agent status badges keep their semantic colors in dark mode */
body.dark-mode .agent-status {
    /* Color is set by status-specific classes below */
}

/* Ensure agent taglines stay centered */
.agent-tagline,
.agent-personality {
    display: block;
    text-align: center;
    width: 100%;
}

/* ============================================
   HERO SECTION DARK MODE
   ============================================ */

/* Hero section in dark mode - light text on dark background */
body.dark-mode .hero {
    background: linear-gradient(135deg, rgba(26, 29, 35, 0.95), rgba(37, 41, 48, 0.95)),
                url('hero-bg.jpg') center/cover;
}

body.dark-mode .hero h1,
body.dark-mode .hero p {
    color: var(--text-primary-dark) !important;
}

body.dark-mode .hero .btn-light {
    background-color: #31B2E0;
    color: #ffffff;
    border-color: #31B2E0;
}

body.dark-mode .hero .btn-light:hover {
    background-color: #2a9ec7;
    color: #ffffff;
    border-color: #2a9ec7;
}

body.dark-mode .hero .btn-outline-light {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

body.dark-mode .hero .btn-outline-light:hover {
    background-color: #ffffff;
    color: #1a1d23;
}

/* Grace Fields lavender icon in both modes */
.grace-icon,
.fa-spa {
    color: var(--lavender);
}

body.dark-mode .grace-icon,
body.dark-mode .fa-spa {
    color: #B19CD9;
}

/* Ensure Font Awesome icons are visible in all contexts */
.fas, .far, .fab, .fal {
    transition: color 0.3s ease, filter 0.3s ease;
}

/* Dark mode - specific icon contexts for better visibility */
body.dark-mode .card i,
body.dark-mode .metric-card i,
body.dark-mode .feature-card i,
body.dark-mode .workflow-card i {
    color: #ffffff;
}

/* Dark mode - ensure all card body text is white */
body.dark-mode .card-body,
body.dark-mode .card-body p,
body.dark-mode .card-body h1,
body.dark-mode .card-body h2,
body.dark-mode .card-body h3,
body.dark-mode .card-body h4,
body.dark-mode .card-body h5,
body.dark-mode .card-body h6 {
    color: var(--text-primary-dark) !important;
}

/* Dark mode - workflow template icons and text */
body.dark-mode .template-icon {
    color: #ffffff !important;
}

body.dark-mode .template-icon i {
    color: #ffffff !important;
}

/* Dark mode - ensure all headings are white */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary-dark) !important;
}

/* Dark mode - ensure paragraph text is visible */
body.dark-mode p {
    color: var(--text-secondary-dark);
}

/* Dark mode - ensure list items are visible */
body.dark-mode li {
    color: var(--text-secondary-dark);
}

/* ============================================
   MODAL DARK MODE STYLING
   ============================================ */

/* Bootstrap Modal dark mode */
body.dark-mode .modal-content {
    background-color: var(--bg-secondary-dark);
    color: var(--text-primary-dark);
    border: 1px solid var(--border-dark);
}

body.dark-mode .modal-header {
    background-color: var(--bg-tertiary-dark);
    border-bottom-color: var(--border-dark);
}

body.dark-mode .modal-header .modal-title {
    color: var(--text-primary-dark);
}

body.dark-mode .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .modal-body {
    background-color: var(--bg-secondary-dark);
    color: var(--text-primary-dark);
}

body.dark-mode .modal-footer {
    background-color: var(--bg-tertiary-dark);
    border-top-color: var(--border-dark);
}

/* Ensure modal text elements are light in dark mode */
body.dark-mode .modal-body h1,
body.dark-mode .modal-body h2,
body.dark-mode .modal-body h3,
body.dark-mode .modal-body h4,
body.dark-mode .modal-body h5,
body.dark-mode .modal-body h6 {
    color: var(--text-primary-dark);
}

body.dark-mode .modal-body p,
body.dark-mode .modal-body span:not(.badge),
body.dark-mode .modal-body div:not(.btn),
body.dark-mode .modal-body label,
body.dark-mode .modal-body li {
    color: var(--text-primary-dark);
}

/* Modal list items */
body.dark-mode .modal-body ul li {
    color: var(--text-secondary-dark);
}

/* ============================================
   WORKFLOWS PAGE DARK MODE
   ============================================ */

/* Workflows page text in dark mode */
body.dark-mode .container-custom h1,
body.dark-mode .container-custom h2,
body.dark-mode .container-custom h3,
body.dark-mode .container-custom h4,
body.dark-mode .container-custom h5,
body.dark-mode .container-custom h6,
body.dark-mode .container-custom p,
body.dark-mode .container-custom label {
    color: var(--text-primary-dark) !important;
}

/* Workflow stats text in dark mode */
body.dark-mode .workflow-stats,
body.dark-mode .workflow-stat-item {
    color: var(--text-primary-dark) !important;
}

/* Form inputs in dark mode */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--bg-tertiary-dark);
    color: var(--text-primary-dark);
    border-color: var(--border-dark);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--bg-tertiary-dark);
    color: var(--text-primary-dark);
    border-color: var(--higherself-blue);
}

/* Form inputs in light mode - add visible borders */
body:not(.dark-mode) .form-control,
body:not(.dark-mode) .form-select {
    border: 1px solid #ced4da;
    background-color: #ffffff;
}

body:not(.dark-mode) .form-control:focus,
body:not(.dark-mode) .form-select:focus {
    border-color: #31B2E0;
    box-shadow: 0 0 0 0.2rem rgba(49, 178, 224, 0.25);
}

/* Workflow template icons - add circular backgrounds */
.card-body > div[style*="font-size: 2.5rem"] {
    background: rgba(49, 178, 224, 0.1);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

body.dark-mode .card-body > div[style*="font-size: 2.5rem"] {
    background: rgba(49, 178, 224, 0.15);
    border: 2px solid rgba(49, 178, 224, 0.3);
    color: #ffffff !important;
}

body.dark-mode .card-body > div[style*="font-size: 2.5rem"] i {
    color: #ffffff !important;
}

/* More specific selector for workflow template icons */
body.dark-mode .card-body > div[style*="color:"] i,
body.dark-mode .card-body > div[style*="color"] i {
    color: #ffffff !important;
}

/* Button text visibility in both modes */
.btn {
    font-weight: 500;
}

/* Primary buttons - always visible */
.btn-primary {
    background-color: var(--higherself-blue);
    border-color: var(--higherself-blue);
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #2a9ec7;
    border-color: #2a9ec7;
    color: #ffffff !important;
}

/* Outline buttons in light mode */
body:not(.dark-mode) .btn-outline-primary {
    color: var(--higherself-blue);
    border-color: var(--higherself-blue);
    background-color: transparent;
}

body:not(.dark-mode) .btn-outline-primary:hover {
    background-color: var(--higherself-blue);
    border-color: var(--higherself-blue);
    color: #ffffff !important;
}

/* Outline buttons in dark mode */
body.dark-mode .btn-outline-primary {
    color: #ffffff;
    border-color: var(--higherself-blue);
    background-color: transparent;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: var(--higherself-blue);
    border-color: var(--higherself-blue);
    color: #ffffff !important;
}

/* Danger buttons */
.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

body.dark-mode .btn-outline-danger {
    color: #ff6b6b;
    border-color: #ff6b6b;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff !important;
}

/* Small buttons - ensure minimum touch target */
.btn-sm {
    min-height: 32px;
    padding: 0.375rem 0.75rem;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Mobile navigation - prevent layout shift */
@media (max-width: 991.98px) {
    /* Navbar collapse should overlay, not push content */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-primary);
        z-index: 1050;
        padding: 2rem;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    body.dark-mode .navbar-collapse {
        background: var(--bg-primary-dark);
    }

    .navbar-collapse.show {
        transform: translateX(0);
    }

    .navbar-collapse.collapsing {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    /* Navigation items in mobile */
    .navbar-nav {
        width: 100%;
        padding-top: 3rem;
    }

    .navbar-nav .nav-item {
        margin-bottom: 1rem;
    }

    .navbar-nav .nav-link {
        font-size: 1.25rem;
        padding: 1rem;
        border-radius: 5px;
        text-align: center;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background: rgba(49, 178, 224, 0.1);
    }

    /* Theme toggle in mobile menu */
    .navbar-nav .theme-toggle {
        margin: 1rem auto;
        display: block;
        width: fit-content;
    }

    /* Close button for mobile menu */
    .navbar-toggler {
        z-index: 1051;
    }

    /* Button groups center on mobile */
    .d-grid,
    .btn-group {
        justify-content: center;
    }

    /* Action buttons stack vertically on mobile */
    .action-item {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .action-item .btn {
        width: 100%;
    }
}

/* Minimum touch targets for mobile */
@media (max-width: 767.98px) {
    .btn,
    .nav-link,
    .card {
        min-height: 44px;
        min-width: 44px;
    }

    /* Agent cards and workflow cards */
    .agent-card,
    .card {
        margin-bottom: 1rem;
    }

    /* Button groups on mobile */
    .btn-group-vertical .btn,
    .d-flex .btn {
        margin-bottom: 0.5rem;
    }

    /* Center button groups */
    .text-end {
        text-align: center !important;
    }

    .text-end .btn {
        margin: 0.25rem;
    }
}

/* Card body in dark mode */
body.dark-mode .card-body {
    color: var(--text-primary);
}

/* Form controls in dark mode */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .form-control::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-secondary);
}

/* Labels in dark mode */
body.dark-mode .form-label,
body.dark-mode label {
    color: var(--text-primary);
}

/* Dark Mode Toggle Button */
/* Dark mode toggle - now in sidebar, hide floating version */
.dark-mode-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.dark-mode-toggle i {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(49, 178, 224, 0.6);
}

.dark-mode-toggle:hover i {
    transform: rotate(20deg);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

.dark-mode-toggle:focus {
    outline: 3px solid rgba(49, 178, 224, 0.5);
    outline-offset: 3px;
}

/* Ensure dark mode toggle is visible in dark mode */
body.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #4ECDC4 0%, #31B2E0 100%);
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

body.dark-mode .dark-mode-toggle:hover {
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.6);
}

/* ============================================
   ENHANCED GLASSMORPHISM SYSTEM
   WCAG AA Compliant - 4.5:1 contrast ratio
   ============================================ */

/* Base Glass Card - For interactive cards and modules */
.glass-card {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(200, 200, 200, 0.3);
    border-left: none;
    border-right: none;
    border-radius: 5px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    transition: all 0.3s ease;
    color: #1a1a1a;
}

.glass-card h1, .glass-card h2, .glass-card h3,
.glass-card h4, .glass-card h5, .glass-card h6,
.glass-card p, .glass-card span, .glass-card label {
    color: #1a1a1a;
}

.glass-card .text-muted {
    color: #4a5568 !important;
}

body.dark-mode .glass-card {
    background: rgba(26, 29, 35, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    color: #f7fafc;
}

body.dark-mode .glass-card h1, body.dark-mode .glass-card h2,
body.dark-mode .glass-card h3, body.dark-mode .glass-card h4,
body.dark-mode .glass-card h5, body.dark-mode .glass-card h6,
body.dark-mode .glass-card p, body.dark-mode .glass-card span,
body.dark-mode .glass-card label {
    color: #f7fafc;
}

body.dark-mode .glass-card .text-muted {
    color: #a0aec0 !important;
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2);
}

body.dark-mode .glass-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Glass Panel - For sidebars, nav sections, secondary containers */
.glass-panel {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(200, 200, 200, 0.25);
    border-left: none;
    border-right: none;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(31, 38, 135, 0.1);
    transition: all 0.3s ease;
    color: #1a1a1a;
}

body.dark-mode .glass-panel {
    background: rgba(26, 29, 35, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: #f7fafc;
}

/* Glass Modal - For modals and dialogs */
.glass-modal {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    box-shadow:
        0 20px 60px rgba(31, 38, 135, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    transition: all 0.3s ease;
    color: #1a1a1a;
}

body.dark-mode .glass-modal {
    background: rgba(26, 29, 35, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    color: #f7fafc;
}

/* Glass Overlay - For backdrop overlays */
.glass-overlay {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

body.dark-mode .glass-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* Glass Button - For CTA buttons with glass effect */
.glass-button {
    background: rgba(49, 178, 224, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(49, 178, 224, 0.4);
    border-radius: 5px;
    color: #0d7ea8;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
}

.glass-button:hover {
    background: rgba(49, 178, 224, 0.3);
    border-color: rgba(49, 178, 224, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(49, 178, 224, 0.3);
}

body.dark-mode .glass-button {
    background: rgba(49, 178, 224, 0.25);
    border-color: rgba(49, 178, 224, 0.5);
    color: #7dd3fc;
}

body.dark-mode .glass-button:hover {
    background: rgba(49, 178, 224, 0.4);
    box-shadow: 0 8px 24px rgba(49, 178, 224, 0.4);
}

/* Glass CTA Section - For call-to-action sections */
.glass-cta {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(240, 250, 255, 0.92) 100%
    );
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(49, 178, 224, 0.3);
    border-bottom: 1px solid rgba(78, 205, 196, 0.3);
    border-left: none;
    border-right: none;
    border-radius: 5px;
    box-shadow: 0 8px 32px rgba(49, 178, 224, 0.12);
    padding: 2rem;
    transition: all 0.3s ease;
    color: #1a1a1a;
}

.glass-cta h1, .glass-cta h2, .glass-cta h3,
.glass-cta h4, .glass-cta h5, .glass-cta h6 {
    color: #1a1a1a;
}

.glass-cta p, .glass-cta .text-muted {
    color: #4a5568 !important;
}

.glass-cta:hover {
    box-shadow: 0 12px 40px rgba(49, 178, 224, 0.2);
    transform: translateY(-2px);
}

body.dark-mode .glass-cta {
    background: linear-gradient(
        135deg,
        rgba(26, 29, 35, 0.95) 0%,
        rgba(30, 40, 50, 0.95) 100%
    );
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #f7fafc;
}

body.dark-mode .glass-cta h1, body.dark-mode .glass-cta h2,
body.dark-mode .glass-cta h3, body.dark-mode .glass-cta h4,
body.dark-mode .glass-cta h5, body.dark-mode .glass-cta h6 {
    color: #f7fafc;
}

body.dark-mode .glass-cta p, body.dark-mode .glass-cta .text-muted {
    color: #a0aec0 !important;
}

/* Glass Input - For form fields with glass effect */
.glass-input {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(200, 200, 200, 0.5);
    border-radius: 5px;
    padding: 0.75rem 1rem;
    color: #1a1a1a;
    transition: all 0.3s ease;
    min-height: 44px;
}

.glass-input::placeholder {
    color: #6b7280;
}

.glass-input:focus {
    outline: none;
    border-color: rgba(49, 178, 224, 0.6);
    box-shadow: 0 0 0 3px rgba(49, 178, 224, 0.2);
}

body.dark-mode .glass-input {
    background: rgba(26, 29, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f7fafc;
}

body.dark-mode .glass-input::placeholder {
    color: #9ca3af;
}

/* Glass Agent Card - Enhanced for interactive agent displays */
.agent-card.glass-effect {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(200, 200, 200, 0.3);
    border-left: none;
    border-right: none;
}

/* Agent Card Text - Light Mode */
.agent-card.glass-effect .agent-name {
    color: #1a1a1a;
    font-weight: 600;
}

.agent-card.glass-effect .agent-role {
    color: #2d3748;
}

.agent-card.glass-effect .agent-tagline {
    color: #4a5568;
    font-style: italic;
}

.agent-card.glass-effect .agent-description {
    color: #4a5568;
}

.agent-card.glass-effect .agent-icon {
    color: #31B2E0;
}

body.dark-mode .agent-card.glass-effect {
    background: rgba(26, 29, 35, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Agent Card Text - Dark Mode */
body.dark-mode .agent-card.glass-effect .agent-name {
    color: #f7fafc;
}

body.dark-mode .agent-card.glass-effect .agent-role {
    color: #e2e8f0;
}

body.dark-mode .agent-card.glass-effect .agent-tagline {
    color: #a0aec0;
}

body.dark-mode .agent-card.glass-effect .agent-description {
    color: #a0aec0;
}

body.dark-mode .agent-card.glass-effect .agent-icon {
    color: #7dd3fc;
}

/* Glass Metric Card - For KPI and metric displays */
.metric-card.glass-effect {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(200, 200, 200, 0.3);
    border-left: none;
    border-right: none;
}

/* Metric Card Text - Light Mode */
.metric-card.glass-effect .metric-value {
    color: #1a1a1a;
    font-weight: 700;
}

.metric-card.glass-effect .metric-label {
    color: #4a5568;
}

.metric-card.glass-effect .metric-change {
    color: #2d3748;
}

.metric-card.glass-effect .metric-change.positive {
    color: #059669;
}

.metric-card.glass-effect .metric-change.negative {
    color: #dc2626;
}

.metric-card.glass-effect .metric-icon {
    color: #31B2E0;
}

body.dark-mode .metric-card.glass-effect {
    background: rgba(26, 29, 35, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Metric Card Text - Dark Mode */
body.dark-mode .metric-card.glass-effect .metric-value {
    color: #f7fafc;
}

body.dark-mode .metric-card.glass-effect .metric-label {
    color: #a0aec0;
}

body.dark-mode .metric-card.glass-effect .metric-change {
    color: #e2e8f0;
}

body.dark-mode .metric-card.glass-effect .metric-change.positive {
    color: #34d399;
}

body.dark-mode .metric-card.glass-effect .metric-change.negative {
    color: #f87171;
}

body.dark-mode .metric-card.glass-effect .metric-icon {
    color: #7dd3fc;
}

/* Icon visibility enhancements */
.glass-effect i.fas,
.glass-effect i.far,
.glass-effect i.fab,
.glass-card i.fas,
.glass-card i.far,
.glass-card i.fab,
.glass-cta i.fas,
.glass-cta i.far,
.glass-cta i.fab {
    color: #31B2E0;
}

body.dark-mode .glass-effect i.fas,
body.dark-mode .glass-effect i.far,
body.dark-mode .glass-effect i.fab,
body.dark-mode .glass-card i.fas,
body.dark-mode .glass-card i.far,
body.dark-mode .glass-card i.fab,
body.dark-mode .glass-cta i.fas,
body.dark-mode .glass-cta i.far,
body.dark-mode .glass-cta i.fab {
    color: #7dd3fc;
}

/* Accessibility: Disable backdrop-filter for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .glass-card,
    .glass-panel,
    .glass-modal,
    .glass-overlay,
    .glass-button,
    .glass-cta,
    .glass-input,
    .agent-card.glass-effect,
    .metric-card.glass-effect {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Command Palette */
.command-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

.command-palette-overlay.active {
    display: flex;
}

.command-palette {
    width: 90%;
    max-width: 600px;
    background: var(--bg-primary);
    border-radius: 5px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideDown 0.3s ease;
}

.command-palette-input {
    width: 100%;
    padding: 1.5rem;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    font-size: 1.1rem;
    color: var(--text-primary);
    outline: none;
}

.command-palette-input::placeholder {
    color: var(--text-secondary);
}

.command-palette-results {
    max-height: 400px;
    overflow-y: auto;
}

.command-item {
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.command-item:hover,
.command-item.selected {
    background: var(--bg-secondary);
}

.command-item-icon {
    font-size: 1.5rem;
    width: 32px;
    text-align: center;
}

.command-item-content {
    flex: 1;
}

.command-item-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.command-item-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.command-item-shortcut {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 5px;
    color: var(--text-secondary);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
}

.toast {
    min-width: 300px;
    max-width: 500px;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 1rem;
    pointer-events: all;
    animation: toastSlideIn 0.3s ease;
    transition: all 0.3s ease;
}

.toast.removing {
    animation: toastSlideOut 0.3s ease;
}

.toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #1a1a1a;  /* WCAG AA compliant */
}

.toast-message {
    font-size: 0.9rem;
    color: #4a5568;  /* WCAG AA compliant */
}

.toast-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #4a5568;
    padding: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
}

.toast-close:focus {
    outline: 2px solid #31B2E0;
    outline-offset: 2px;
}

/* Toast Types */
.toast.success {
    border-left: 4px solid #10b981;
}

.toast.success .toast-icon {
    color: #10b981;
}

.toast.error {
    border-left: 4px solid #ef4444;
}

.toast.error .toast-icon {
    color: #ef4444;
}

.toast.warning {
    border-left: 4px solid #f59e0b;
}

.toast.warning .toast-icon {
    color: #f59e0b;
}

.toast.info {
    border-left: 4px solid #3b82f6;
}

.toast.info .toast-icon {
    color: #3b82f6;
}

/* Dark Mode Toast */
body.dark-mode .toast {
    background: var(--bg-secondary-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .toast-title {
    color: var(--text-primary-dark);
}

body.dark-mode .toast-message {
    color: var(--text-secondary-dark);
}

body.dark-mode .toast-close {
    color: var(--text-secondary-dark);
}

body.dark-mode .toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary-dark);
}

/* Enhanced Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ================================================
   Reduced Motion Support (WCAG 2.1 Level AAA)
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Disable glassmorphism blur effects for performance */
    .glass-card,
    .command-palette-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Remove hover transforms */
    .hover-lift:hover,
    .hover-scale:hover {
        transform: none !important;
    }

    /* Keep toast notifications visible but remove animations */
    .toast {
        animation: none !important;
    }

    /* Disable Command Palette animations */
    .command-palette-overlay,
    .command-palette {
        animation: none !important;
    }
}

/* Loading States */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        var(--bg-secondary) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
    border-radius: 5px;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-card {
    height: 200px;
    border-radius: 5px;
}

/* Smooth Page Transitions */
.page-transition {
    animation: pageSlideIn 0.4s ease;
}

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

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Focus States */
*:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    border-radius: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .toast-container {
        top: 1rem;
        right: 1rem;
        left: 1rem;
    }

    .toast {
        min-width: auto;
        width: 100%;
    }

    .dark-mode-toggle {
        bottom: 1rem;
        right: 1rem;
        width: 50px;
        height: 50px;
    }

    .command-palette {
        width: 95%;
    }
}



/* ============================================
   REAL-TIME STATUS INDICATORS
   ============================================ */

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.5rem;
    position: relative;
    animation: pulse 2s ease-in-out infinite;
}

.status-indicator::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    opacity: 0.3;
    animation: ripple 2s ease-out infinite;
}

/* Status Colors */
.status-indicator.status-healthy,
.status-indicator.status-online,
.status-indicator.status-active {
    background-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.status-indicator.status-healthy::before,
.status-indicator.status-online::before,
.status-indicator.status-active::before {
    background-color: #10b981;
}

.status-indicator.status-degraded,
.status-indicator.status-warning,
.status-indicator.status-busy {
    background-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.status-indicator.status-degraded::before,
.status-indicator.status-warning::before,
.status-indicator.status-busy::before {
    background-color: #f59e0b;
}

.status-indicator.status-offline,
.status-indicator.status-error,
.status-indicator.status-inactive {
    background-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.status-indicator.status-offline::before,
.status-indicator.status-error::before,
.status-indicator.status-inactive::before {
    background-color: #ef4444;
}

.status-indicator.status-polling,
.status-indicator.status-idle {
    background-color: #6b7280;
    box-shadow: 0 0 8px rgba(107, 114, 128, 0.6);
}

.status-indicator.status-polling::before,
.status-indicator.status-idle::before {
    background-color: #6b7280;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Agent Status Badges */
.agent-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.agent-status.status-active {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.agent-status.status-busy {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.agent-status.status-inactive {
    background-color: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.agent-status.status-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Metric Update Animation */
.metric-updated {
    animation: metricPulse 1s ease-out;
}

@keyframes metricPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        color: var(--higherself-blue);
    }
    100% {
        transform: scale(1);
    }
}

/* ============================================
   ENHANCED TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
}

/* Toast Positions */
.toast-top-right {
    top: 1rem;
    right: 1rem;
}

.toast-top-left {
    top: 1rem;
    left: 1rem;
}

.toast-bottom-right {
    bottom: 1rem;
    right: 1rem;
}

.toast-bottom-left {
    bottom: 1rem;
    left: 1rem;
}

.toast-top-center {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.toast-bottom-center {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

/* Enhanced Toast Styles */
.toast {
    pointer-events: auto;
    min-width: 300px;
    max-width: 500px;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    animation: toastSlideIn 0.3s ease-out;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toast.removing {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Toast Types */
.toast-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
    color: white;
}

.toast-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
    color: white;
}

.toast-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95));
    color: white;
}

.toast-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
    color: white;
}

.toast-loading {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.95), rgba(75, 85, 99, 0.95));
    color: white;
}

.toast-grace {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.95), rgba(177, 156, 217, 0.95));
    color: white;
}

.toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toast-icon i {
    display: block;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.toast-message {
    font-size: 0.875rem;
    opacity: 0.9;
    line-height: 1.4;
}

.toast-action {
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toast-action:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.toast-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-close:hover {
    opacity: 1;
}

/* Dark Mode Toast Adjustments */
body.dark-mode .toast {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}