/* MindSpark Custom Theme - Professional Minimalist Design */
/* Philosophy: Clean, spacious, single accent color, clear hierarchy */

:root {
    /* Primary Colors - Refined Indigo */
    --ms-primary: #4f46e5;
    --ms-primary-light: #818cf8;
    --ms-primary-dark: #3730a3;
    --ms-primary-50: #eef2ff;
    --ms-primary-100: #e0e7ff;

    /* Secondary Colors - Slate (for text hierarchy) */
    --ms-secondary: #475569;
    --ms-secondary-light: #64748b;
    --ms-secondary-dark: #334155;

    /* Accent Colors - Vibrant for CTAs only */
    --ms-accent: #4f46e5;
    --ms-accent-light: #818cf8;
    --ms-accent-dark: #3730a3;

    /* AI/Tech Purple - Subtle */
    --ms-ai-purple: #7c3aed;
    --ms-ai-purple-light: #a78bfa;
    --ms-ai-purple-dark: #5b21b6;

    /* Semantic Colors */
    --ms-success: #10b981;
    --ms-warning: #f59e0b;
    --ms-error: #ef4444;
    --ms-info: #3b82f6;

    /* Backgrounds - More contrast */
    --ms-bg-primary: #f8fafc;
    --ms-bg-secondary: #ffffff;
    --ms-bg-dark: #1e293b;
    --ms-bg-darker: #0f172a;
    --ms-bg-card: #ffffff;

    /* Sidebar specific - LIGHTER for better readability */
    --ms-sidebar-bg: #1e293b;
    --ms-sidebar-hover: #334155;
    --ms-sidebar-active: #4f46e5;
    --ms-sidebar-text: #cbd5e1;
    --ms-sidebar-text-muted: #94a3b8;
    --ms-sidebar-text-active: #ffffff;

    /* Borders */
    --ms-border: #e2e8f0;
    --ms-border-light: #f1f5f9;

    /* Shadows - Refined */
    --ms-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ms-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --ms-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ms-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Gradients - Used sparingly */
    --ms-gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --ms-gradient-subtle: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--ms-bg-primary);
    color: var(--ms-secondary-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hero Gradient Background - Login/Landing only */
.ms-hero-bg {
    background: var(--ms-gradient-primary);
    position: relative;
    overflow: hidden;
}

.ms-hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);
}

/* Card Styles - Clean, minimal */
.ms-card {
    background: var(--ms-bg-card);
    border-radius: 12px;
    border: 1px solid var(--ms-border);
    box-shadow: var(--ms-shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

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

.ms-card-highlight {
    border-left: 3px solid var(--ms-primary);
}

/* Stat Cards - Clean with subtle background */
.ms-stat-card {
    background: var(--ms-bg-card);
    border-radius: 12px;
    border: 1px solid var(--ms-border);
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.ms-stat-card:hover {
    border-color: var(--ms-primary-100);
    box-shadow: var(--ms-shadow);
}

/* Stat Icons - Subtle colored backgrounds */
.ms-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.ms-stat-icon-primary {
    background: var(--ms-primary-50);
    color: var(--ms-primary);
}

.ms-stat-icon-secondary {
    background: #f0fdf4;
    color: var(--ms-success);
}

.ms-stat-icon-accent {
    background: #fef3c7;
    color: var(--ms-warning);
}

.ms-stat-icon-purple {
    background: #f5f3ff;
    color: var(--ms-ai-purple);
}

/* Progress Bar - Clean */
.ms-progress-container {
    background: var(--ms-border-light);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.ms-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--ms-primary);
    transition: width 0.4s ease-out;
}

/* ============================================
   SIDEBAR NAVIGATION - Professional Dark Theme
   ============================================ */
.ms-sidebar {
    background: var(--ms-sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.ms-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Allow flex children to shrink below content size */
}

.ms-sidebar-content .mud-navmenu {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ms-sidebar-user-card {
    flex-shrink: 0;
    padding: 12px;
    padding-bottom: 24px;
}

/* MudBlazor NavMenu Override for Dark Sidebar */
.ms-sidebar .mud-nav-link {
    color: var(--ms-sidebar-text) !important;
    border-radius: 8px;
    margin: 2px 8px;
    padding: 12px 14px;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    transition: all 0.15s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.ms-sidebar .mud-nav-link:hover {
    background: var(--ms-sidebar-hover) !important;
    color: var(--ms-sidebar-text-active) !important;
}

/* ACTIVE STATE - High visibility */
.ms-sidebar .mud-nav-link.active {
    background: var(--ms-sidebar-active) !important;
    color: var(--ms-sidebar-text-active) !important;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.5),
                0 4px 12px rgba(79, 70, 229, 0.25);
}

/* Icon styling in sidebar */
.ms-sidebar .mud-nav-link .mud-icon-root {
    color: inherit !important;
    opacity: 0.8;
    margin-right: 12px;
    font-size: 22px;
    flex-shrink: 0;
}

.ms-sidebar .mud-nav-link:hover .mud-icon-root,
.ms-sidebar .mud-nav-link.active .mud-icon-root {
    opacity: 1;
}

/* ============================================
   COLLAPSED DRAWER - Clean icon-only state
   ============================================ */
/* When drawer is closed/collapsed - center the nav links */
.ms-sidebar:not(.mud-drawer--open) .mud-nav-link {
    justify-content: center;
    padding: 14px 12px;
    margin: 4px 8px;
}

.ms-sidebar:not(.mud-drawer--open) .mud-nav-link .mud-icon-root {
    margin-right: 0;
    font-size: 24px;
}

/* Drawer header in collapsed state */
.ms-sidebar:not(.mud-drawer--open) .mud-drawer-header {
    justify-content: center;
    padding: 16px 8px;
}

/* Sidebar section dividers */
.ms-sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 20px;
}

/* Legacy custom nav item (for compatibility) */
.ms-nav-item {
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--ms-sidebar-text);
    transition: all 0.15s ease;
    margin: 2px 12px;
    font-weight: 500;
}

.ms-nav-item:hover {
    background: var(--ms-sidebar-hover);
    color: var(--ms-sidebar-text-active);
}

.ms-nav-item.active {
    background: var(--ms-sidebar-active);
    color: var(--ms-sidebar-text-active);
    font-weight: 600;
}

/* Avatar Styles */
.ms-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: white;
    letter-spacing: 0.02em;
}

.ms-avatar-gradient {
    background: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-ai-purple) 100%);
}

.ms-avatar-primary {
    background: var(--ms-primary);
}

.ms-avatar-muted {
    background: var(--ms-secondary-light);
}

/* ============================================
   CHAT STYLES - Clean & Modern
   ============================================ */
.ms-chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
}

.ms-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.ms-message {
    max-width: 75%;
    margin-bottom: 1rem;
    animation: fadeIn 0.25s ease-out;
}

.ms-message-user {
    margin-left: auto;
}

.ms-message-user .ms-message-bubble {
    background: var(--ms-primary);
    color: white;
    border-radius: 18px 18px 4px 18px;
}

.ms-message-assistant .ms-message-bubble {
    background: var(--ms-bg-primary);
    color: var(--ms-secondary-dark);
    border-radius: 18px 18px 18px 4px;
    border: 1px solid var(--ms-border);
}

.ms-message-other {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
    animation: fadeIn 0.25s ease-out;
}

.ms-message-other .ms-message-bubble {
    background: #f1f5f9;
    color: #1e293b;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid #e2e8f0;
}

.ms-message-bubble {
    padding: 14px 18px;
    line-height: 1.6;
    font-size: 0.9375rem;
}

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

/* AI Typing Indicator */
.ms-typing-indicator {
    display: flex;
    gap: 5px;
    padding: 14px 18px;
    background: var(--ms-bg-primary);
    border: 1px solid var(--ms-border);
    border-radius: 18px 18px 18px 4px;
    width: fit-content;
}

.ms-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ms-primary);
    animation: typingPulse 1.4s infinite ease-in-out;
}

.ms-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.ms-typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingPulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   BUTTONS - Clean, Professional
   ============================================ */

/* Primary Button - Solid color, no gradient */
.ms-btn-primary {
    background: var(--ms-primary) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 10px 20px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    letter-spacing: -0.01em;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2) !important;
}

.ms-btn-primary:hover {
    background: var(--ms-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
    transform: translateY(-1px);
}

.ms-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2) !important;
}

.ms-btn-primary:disabled {
    background: #94a3b8 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Secondary/Outline Button */
.ms-btn-secondary {
    background: transparent !important;
    border: 1.5px solid var(--ms-border) !important;
    color: var(--ms-secondary-dark) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 10px 20px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.ms-btn-secondary:hover {
    background: var(--ms-bg-primary) !important;
    border-color: var(--ms-secondary-light) !important;
}

/* Ghost/Text Button */
.ms-btn-ghost {
    background: transparent !important;
    border: none !important;
    color: var(--ms-secondary) !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.ms-btn-ghost:hover {
    background: var(--ms-bg-primary) !important;
    color: var(--ms-secondary-dark) !important;
}

/* Accent Button - For special CTAs */
.ms-btn-accent {
    background: var(--ms-ai-purple) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
}

.ms-btn-accent:hover {
    background: var(--ms-ai-purple-dark) !important;
}

/* Dialog/Modal Button Improvements */
.mud-dialog-actions .mud-button-root {
    min-height: 40px !important;
    padding: 8px 20px !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
}

.mud-dialog-actions .mud-button-text {
    color: var(--ms-secondary) !important;
}

.mud-dialog-actions .mud-button-text:hover {
    background: var(--ms-bg-primary) !important;
}

/* Logo */
.ms-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.ms-logo-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-ai-purple) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

/* Data Grid Customization - Base */
.ms-data-grid {
    border: 1px solid var(--ms-border);
    border-radius: 12px;
    overflow: hidden;
}

/* Chip Styles - Refined */
.ms-chip-active {
    background: #ecfdf5 !important;
    color: #059669 !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
}

.ms-chip-inactive {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
}

.ms-chip-pending {
    background: #fffbeb !important;
    color: #d97706 !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
}

.ms-chip-info {
    background: var(--ms-primary-50) !important;
    color: var(--ms-primary) !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
}

/* Empty State */
.ms-empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--ms-secondary-light);
}

.ms-empty-state-icon {
    font-size: 56px;
    color: var(--ms-border);
    margin-bottom: 1rem;
}

/* ============================================
   DIALOGS & MODALS - Professional Styling
   ============================================ */
.mud-dialog {
    border-radius: 16px !important;
    box-shadow: var(--ms-shadow-lg), 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}

.mud-dialog .mud-dialog-title {
    padding: 24px 24px 16px 24px !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--ms-secondary-dark) !important;
    border-bottom: 1px solid var(--ms-border-light);
}

.mud-dialog .mud-dialog-content {
    padding: 24px !important;
    color: var(--ms-secondary) !important;
}

.mud-dialog .mud-dialog-actions {
    padding: 16px 24px 24px 24px !important;
    gap: 12px;
}

/* Form Fields in Dialogs */
.mud-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ms-border) !important;
    border-radius: 8px !important;
}

.mud-dialog .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--ms-secondary-light) !important;
}

.mud-dialog .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--ms-primary) !important;
    border-width: 2px !important;
}

/* ============================================
   DATA GRID / TABLES - Clean & Readable
   ============================================ */
.ms-data-grid .mud-table-head {
    background: var(--ms-bg-primary) !important;
}

.ms-data-grid .mud-table-head th {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--ms-secondary-light) !important;
    padding: 14px 16px !important;
}

.ms-data-grid .mud-table-body td {
    padding: 16px !important;
    font-size: 0.875rem !important;
    color: var(--ms-secondary-dark) !important;
    border-bottom: 1px solid var(--ms-border-light) !important;
}

.ms-data-grid .mud-table-row:hover {
    background: var(--ms-bg-primary) !important;
}

/* ============================================
   TYPOGRAPHY HELPERS
   ============================================ */
.ms-text-primary {
    color: var(--ms-secondary-dark) !important;
}

.ms-text-secondary {
    color: var(--ms-secondary-light) !important;
}

.ms-text-muted {
    color: #94a3b8 !important;
}

.ms-text-accent {
    color: var(--ms-primary) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .ms-sidebar {
        position: fixed;
        left: -100%;
        transition: left 0.3s ease;
        z-index: 1000;
    }

    .ms-sidebar.open {
        left: 0;
    }

    .mud-dialog {
        margin: 16px !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* ============================================
   SESSION LIST - INLINE RENAME
   ============================================ */
.ms-session-item .ms-session-edit-btn {
    opacity: 0;
    transition: opacity 0.15s;
}

.ms-session-item:hover .ms-session-edit-btn {
    opacity: 0.5;
}

.ms-session-item .ms-session-edit-btn:hover {
    opacity: 1 !important;
}