/* Pulse AI Intranet Styles - Clean Professional Design */
:root {
    /* Bootstrap primary color override - RGB values for #2196F3 */
    --bs-primary-rgb: 33, 150, 243;
    --bs-primary: #2196F3;
    
    --pulse-primary: #2196F3;
    --pulse-primary-light: #2196F3;
    --pulse-primary-dark: #2196F3;
    --pulse-secondary: #2196F3;
    --pulse-gray-50: #f9fafb;
    --pulse-gray-100: #f3f4f6;
    --pulse-gray-200: #e5e7eb;
    --pulse-gray-300: #d1d5db;
    --pulse-gray-500: #6b7280;
    --pulse-gray-600: #4b5563;
    --pulse-gray-700: #374151;
    --pulse-gray-800: #1f2937;
    
    /* Light mode colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --border-color: #e5e7eb;
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    --code-bg: #f5f5f5;
}

/* Dark mode colors - Dark gray theme with subtle dark purple accent */
.dark-mode {
    --pulse-primary: #2196F3;
    --pulse-primary-light: #2196F3;
    --pulse-primary-dark: #2196F3;
    --pulse-secondary: #818cf8;
    --pulse-gray-50: #0a0a0a;
    --pulse-gray-100: #0f0f0f;
    --pulse-gray-200: #151515;
    --pulse-gray-300: #1f1f1f;
    --pulse-gray-500: #94a3b8;
    --pulse-gray-600: #cbd5e1;
    --pulse-gray-700: #334155;
    --pulse-gray-800: #f1f5f9;
    
    /* Dark mode specific - Darker gray backgrounds to match purple saturation */
    --bg-primary: #0a0a0a;
    --bg-secondary: #0f0f0f;
    --bg-tertiary: #151515;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #94a3b8;
    --border-color: #1f1f1f;
    --card-bg: #121212;
    --card-border: #181818;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --hover-bg: #181818;
    --active-bg: #1f1f1f;
    --code-bg: #2a2a2a;
    
    /* Dark blue accent color - very subtle */
    --gradient-dark-purple: #0f1f3f;
}

html {
    background-color: var(--bg-secondary);
    min-height: 100vh;
    transition: background-color 0.3s ease;
}

.dark-mode html {
    background: radial-gradient(ellipse 150% 100% at bottom center, var(--gradient-dark-purple) 0%, var(--bg-secondary) 20%, var(--bg-primary) 70%);
    background-attachment: fixed;
}

body {
    background-color: var(--bg-secondary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
}

.dark-mode body {
    background: radial-gradient(ellipse 150% 100% at bottom center, var(--gradient-dark-purple) 0%, var(--bg-secondary) 20%, var(--bg-primary) 70%);
    background-attachment: fixed;
}

#root {
    background-color: var(--bg-secondary);
    min-height: 100vh;
    transition: background-color 0.3s ease;
}

.dark-mode #root {
    background: radial-gradient(ellipse 150% 100% at bottom center, var(--gradient-dark-purple) 0%, var(--bg-secondary) 25%, var(--bg-primary) 75%);
    background-attachment: fixed;
}

.app-wrapper {
    background-color: var(--bg-secondary);
    min-height: 100vh;
    transition: background-color 0.3s ease;
}

.dark-mode .app-wrapper {
    background: radial-gradient(ellipse 150% 100% at bottom center, var(--gradient-dark-purple) 0%, var(--bg-secondary) 25%, var(--bg-primary) 75%);
    background-attachment: fixed;
}

/* Navigation */
.navbar {
    background-color: var(--pulse-primary) !important;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 0;
}

.navbar-brand {
    color: white !important;
    font-weight: 600;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 60px;
    margin-right: 1rem;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-nav .nav-link.active {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-nav .nav-link .material-icons {
    font-size: 18px;
}

/* Cards */
.card {
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px var(--shadow);
    background-color: var(--card-bg);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card-header {
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.card-body {
    padding: 1.5rem;
    background-color: transparent;
    color: var(--text-primary);
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

.dark-mode .card-body {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.dark-mode .card-body.p-0 {
    background-color: transparent !important;
}

/* Stat Cards */

/* Buttons */
.btn {
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn-primary {
    background-color: var(--pulse-primary) !important;
    color: white !important;
    border-color: var(--pulse-primary) !important;
}

.btn-primary:hover {
    background-color: var(--pulse-primary) !important;
    border-color: var(--pulse-primary) !important;
    transform: translateY(-1px);
    opacity: 0.9;
}

.btn-outline-primary {
    border: 1px solid var(--pulse-primary) !important;
    color: var(--pulse-primary) !important;
    background-color: transparent;
}

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

.btn .material-icons {
    font-size: 18px;
    /* Margin handled by global icon spacing standard */
}

/* Forms */
.form-control {
    border: 1px solid var(--pulse-gray-300);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    border-color: var(--pulse-primary);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.input-group-text {
    background-color: var(--pulse-gray-50);
    border: 1px solid var(--pulse-gray-300);
    color: var(--pulse-gray-600);
}

/* Activity */
.activity-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--pulse-gray-100);
}

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

.activity-avatar {
    width: 40px;
    height: 40px;
    background-color: var(--pulse-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-avatar .material-icons {
    font-size: 20px;
}

/* Loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-content {
    text-align: center;
    color: var(--pulse-gray-600);
}

.loading-spinner {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.loading-spinner span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pulse-primary);
    animation: loading-dots 1.4s infinite;
}

.loading-spinner span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-spinner span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loading-dots {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-12px);
        opacity: 1;
    }
}

/* Material Icons */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    margin-right: 0.5rem;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Content sections */
.content-section {
    animation: fadeIn 0.3s ease-in;
}

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

/* Responsive */
@media (max-width: 768px) {
    .container-fluid {
        padding: 1rem;
    }
    
    .stat-card {
        padding: 1.5rem 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Remove bubbly elements */
/* Global button border-radius and text alignment - applies to all buttons */
.btn,
.btn-sm,
.btn-lg,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
button.btn,
input[type="button"].btn,
input[type="submit"].btn,
a.btn {
    border-radius: 50px !important;
    text-align: center !important;
    justify-content: center !important;
}

.card,
.badge {
    border-radius: 8px !important;
}

/* Ensure clean spacing */
.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

.row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.col, .col-* {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Enhanced Table Styling */
.table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: visible !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: transparent;
    width: 100%;
    font-size: 0.875rem;
    position: relative;
}

.table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    opacity: 0.75;
    border-radius: 8px;
    z-index: -1;
}

.table > * {
    position: relative;
    z-index: 1;
}

.table tbody {
    position: relative;
    z-index: auto;
}

.table th {
    border-top: none;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
    padding: 0.875rem 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    z-index: 1;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.table td {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #e9ecef;
    border-bottom: none;
    background: transparent;
    position: relative;
    z-index: 0;
    text-align: left;
    font-size: 0.875rem;
}

.table tbody tr td:last-child {
    z-index: auto;
}

.table tbody tr {
    transition: all 0.2s ease;
    position: relative;
    z-index: 0;
}

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

/* Prevent row hover effects from affecting dropdown */
.table tbody tr .action-dropdown,
.table tbody tr .action-dropdown-menu {
    transition: none;
}

/* Keep dropdown stable when row is hovered */
.table tbody tr:hover .action-dropdown-menu {
    position: absolute;
}

/* Better alignment for table content */
.table td .d-flex {
    align-items: center;
}

.table td .material-icons {
    vertical-align: top;
    font-size: 1.125rem;
}

.table td:first-child .material-icons {
    vertical-align: top;
    margin-top: 0.125rem;
}

.table td .btn-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.table td .btn-group .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0.875rem;
}

.table td .btn-group .btn .material-icons {
    font-size: 1rem;
    margin: 0;
}

/* File type badges */
.badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
}

.badge.bg-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    color: white;
}

/* Action buttons */
.btn-group-sm .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 6px;
    margin: 0 2px;
    transition: all 0.2s ease;
}

.btn-group-sm .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

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

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

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

/* Search and filter controls */
.input-group-text {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: #ced4da;
    font-size: 0.875rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.form-control,
.form-select {
    font-size: 0.875rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pulse-primary);
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Empty state */
#emptyDocumentsState {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    margin: 1rem;
}

.dark-mode #emptyDocumentsState {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Card styling */
.card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 12px;
}

.card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    border-radius: 12px 12px 0 0 !important;
}

.dark-mode .card-header {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Responsive table adjustments */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.875rem;
        border-radius: 8px;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
    }
    
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        margin: 0 1px;
    }
    
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    .material-icons {
        font-size: 1rem;
    }
}

/* CSS Variables */
:root {
    --pulse-primary: #2196F3;
    --pulse-primary-light: #2196F3;
    --pulse-primary-dark: #2196F3;
    --pulse-secondary: #10b981;
    --pulse-gray-50: #f9fafb;
    --pulse-gray-100: #f3f4f6;
    --pulse-gray-200: #e5e7eb;
    --pulse-gray-300: #d1d5db;
    --pulse-gray-600: #4b5563;
    --pulse-gray-800: #1f2937;
}

/* Base Styles */
body {
    background-color: var(--pulse-gray-50);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

/* Header */
.main-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-bottom: none;
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header-container {
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo-section {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.logo-link {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.logo-link:hover {
    opacity: 0.8;
}

.logo-section img {
    height: 38px; /* 20% smaller than 48px */
}

/* Desktop Footer - Hidden on mobile */
.desktop-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 0;
    z-index: 1030;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.desktop-footer .footer-container {
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.desktop-footer .pulse-ai-footer-logo {
    position: static;
    opacity: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* Mobile Footer - Full width container */
.mobile-footer {
    display: none;
}

/* Pulse AI Footer Logo - Lower Left Corner */
.pulse-ai-footer-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.pulse-ai-footer-logo:hover {
    opacity: 1;
}

.pulse-ai-footer-logo img {
    height: 50px; /* Larger logo */
    width: auto;
    margin-right: 0.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.pulse-ai-footer-logo .copyright {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    opacity: 0.7;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pulse-primary);
}

.intranet-badge {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    color: #ffffff;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: fit-content;
    min-height: 2.5rem;
}

.intranet-badge .badge-logo {
    height: 20px;
    width: auto;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.user-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-info {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: fit-content;
    min-height: 2.5rem;
}

.user-info .material-icons {
    font-size: 18px;
}

/* Header-specific button styles */
.main-header .btn-outline-primary {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    height: fit-content;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.main-header .btn-outline-primary .material-icons {
    font-size: 20px;
    line-height: 1;
}

.main-header .btn-outline-primary:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

/* Offcanvas Menu */
.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.offcanvas-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.offcanvas-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.offcanvas-menu.open {
    right: 0;
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--pulse-gray-200);
    background: linear-gradient(135deg, #2196F3 0%, #2196F3 100%);
    color: white;
}

.offcanvas-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.offcanvas-close {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 6px;
    padding: 0.5rem;
    min-width: 44px; /* Minimum touch target size */
    min-height: 44px; /* Minimum touch target size */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.offcanvas-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.offcanvas-close .material-icons {
    font-size: 24px;
}

.offcanvas-body {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    min-height: 0;
}

.offcanvas-footer {
    border-top: 1px solid var(--pulse-gray-200);
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)); /* Safe area for mobile browsers */
    background: var(--pulse-gray-50);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0; /* Prevent footer from shrinking */
}

.offcanvas-user-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 6px;
    border: 1px solid var(--pulse-gray-200);
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.offcanvas-user-section:hover {
    background: var(--pulse-gray-50);
}

.offcanvas-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.offcanvas-user-info .material-icons {
    font-size: 24px;
    color: var(--pulse-primary);
}

.offcanvas-user-details {
    flex: 1;
    min-width: 0;
}

.offcanvas-user-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--pulse-gray-800);
    margin-bottom: 0.25rem;
}

.offcanvas-user-role {
    font-size: 0.75rem;
    color: var(--pulse-gray-600);
    text-transform: capitalize;
}

.offcanvas-settings-toggle {
    background: transparent;
    border: none;
    color: var(--pulse-gray-600);
    cursor: pointer;
    padding: 0.5rem; /* Increased for better touch target */
    min-width: 44px; /* Minimum touch target size */
    min-height: 44px; /* Minimum touch target size */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.offcanvas-settings-toggle:hover {
    background: var(--pulse-gray-100);
    color: var(--pulse-primary);
}

.offcanvas-settings-toggle .material-icons {
    font-size: 20px;
}

.offcanvas-settings {
    background: white;
    border-radius: 6px;
    border: 1px solid var(--pulse-gray-200);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.offcanvas-settings-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.offcanvas-settings-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pulse-gray-600);
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--pulse-gray-200);
}

.offcanvas-settings-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem; /* Increased padding for better touch target */
    min-height: 48px; /* Minimum touch target size */
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--pulse-gray-800);
    font-size: 0.9375rem; /* Slightly larger font */
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.offcanvas-settings-item:hover {
    background: var(--pulse-gray-100);
    color: var(--pulse-primary);
}

.offcanvas-settings-item .material-icons {
    font-size: 20px;
    color: var(--pulse-primary);
}

.offcanvas-settings-item:hover .material-icons {
    color: var(--pulse-primary);
}

.offcanvas-logout-item {
    color: #dc2626 !important;
    margin-top: 0.5rem;
    border-top: 1px solid var(--pulse-gray-200);
    padding-top: 1rem;
}

.offcanvas-logout-item:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.offcanvas-logout-item .material-icons {
    color: #dc2626 !important;
}

.offcanvas-logout-item:hover .material-icons {
    color: #dc2626 !important;
}

.dark-mode .offcanvas-logout-item {
    border-top-color: var(--pulse-gray-600);
    color: #f87171 !important;
}

.dark-mode .offcanvas-logout-item:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #f87171 !important;
}

.dark-mode .offcanvas-logout-item .material-icons {
    color: #f87171 !important;
}

.dark-mode .offcanvas-logout-item:hover .material-icons {
    color: #f87171 !important;
}

/* Action buttons container */
.offcanvas-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.offcanvas-admin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem; /* Increased padding for better touch target */
    min-height: 48px; /* Minimum touch target size (iOS recommendation) */
    background: var(--pulse-gray-200);
    color: var(--pulse-gray-800);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem; /* Slightly larger font */
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.offcanvas-admin-btn:hover,
.offcanvas-admin-btn:active {
    background: var(--pulse-gray-300);
    transform: translateY(-1px);
}

.offcanvas-admin-btn:active {
    transform: translateY(0);
    opacity: 0.9;
}

.offcanvas-admin-btn .material-icons {
    font-size: 22px;
}

.offcanvas-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem; /* Increased padding for better touch target */
    min-height: 48px; /* Minimum touch target size (iOS recommendation) */
    background: var(--pulse-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem; /* Slightly larger font */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.offcanvas-logout:hover,
.offcanvas-logout:active {
    background: #2196F3;
    transform: translateY(-1px);
}

.offcanvas-logout:active {
    transform: translateY(0);
    opacity: 0.9;
}

.offcanvas-logout .material-icons {
    font-size: 22px;
}

.offcanvas-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offcanvas-nav-item {
    border-bottom: 1px solid var(--pulse-gray-100);
}

.offcanvas-nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.5rem; /* Increased vertical padding for better touch target */
    min-height: 48px; /* Minimum touch target size */
    color: var(--pulse-gray-700);
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}

.offcanvas-nav-link:hover {
    background-color: var(--pulse-gray-50);
    color: var(--pulse-primary);
}

.offcanvas-nav-link.active {
    background-color: var(--pulse-gray-50);
    color: var(--pulse-primary);
    border-left: 3px solid var(--pulse-primary);
}

.offcanvas-nav-link .material-icons {
    font-size: 24px;
    color: var(--pulse-gray-500);
}

.offcanvas-nav-link:active {
    background-color: var(--pulse-gray-100);
    opacity: 0.8;
}

.offcanvas-nav-link.active .material-icons,
.offcanvas-nav-link:hover .material-icons {
    color: var(--pulse-primary);
}

/* Mobile-specific improvements for offcanvas menu */
@media (max-width: 768px) {
    .offcanvas-menu {
        width: 100%;
        max-width: 100%;
    }
    
    .offcanvas-footer {
        padding-bottom: calc(1rem + max(env(safe-area-inset-bottom), 20px)); /* Extra padding for mobile browsers */
    }
    
    .offcanvas-action-buttons {
        gap: 1rem; /* More spacing between buttons on mobile */
    }
    
    .offcanvas-admin-btn,
    .offcanvas-logout {
        padding: 1.125rem 1rem; /* Slightly more padding on mobile */
        font-size: 1rem; /* Larger font on mobile */
    }
    
    .offcanvas-nav-link {
        padding: 1.25rem 1.5rem; /* More vertical padding on mobile */
    }
    
    .offcanvas-user-section {
        padding: 1rem; /* More padding on mobile */
    }
}

@media (max-width: 480px) {
    .offcanvas-header {
        padding: 1.25rem 1rem; /* Slightly less padding on very small screens */
    }
    
    .offcanvas-footer {
        padding: 1rem;
        padding-bottom: calc(1rem + max(env(safe-area-inset-bottom), 24px)); /* Even more bottom padding */
    }
    
    .offcanvas-admin-btn,
    .offcanvas-logout {
        min-height: 52px; /* Larger touch target on very small screens */
        font-size: 1.0625rem; /* Slightly larger font */
    }
}

/* Navigation - Hidden (using offcanvas menu instead) */
.main-nav {
    display: none;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.nav-tabs {
    border: none;
    margin: 0;
}

.nav-tabs .nav-link {
    border: none;
    color: var(--pulse-gray-600);
    font-weight: 500;
    padding: 1rem 1.5rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.nav-tabs .nav-link:hover {
    color: var(--pulse-primary);
    background-color: var(--pulse-gray-50);
    text-decoration: none;
}

.nav-tabs .nav-link.active {
    color: var(--pulse-primary);
    background-color: var(--pulse-gray-50);
    border-bottom: 2px solid var(--pulse-primary);
    text-decoration: none;
}

.nav-tabs .nav-link .material-icons,
.nav-tabs .nav-link span {
    text-decoration: none;
}

/* Admin Panel Tabs - Dark Mode Support */
.admin-tabs {
    border-bottom: none;
    gap: 8px;
}

.admin-tabs .admin-tab {
    transition: all 0.2s ease;
    position: relative;
    border: none;
    background: transparent;
    color: var(--pulse-gray-600);
    border-radius: 20px;
    padding: 8px 16px;
    text-decoration: none;
}

.admin-tabs .admin-tab:hover {
    color: var(--pulse-primary);
    background: rgba(33, 150, 243, 0.1);
    transform: translateY(-1px);
    text-decoration: none;
}

.admin-tabs .admin-tab.active {
    color: #ffffff;
    background: var(--pulse-primary);
    border-bottom: none;
    font-weight: 600;
    text-decoration: none;
}

.admin-tabs .admin-tab .material-icons {
    font-size: 1.25rem;
    vertical-align: middle;
    text-decoration: none;
}

.admin-tabs .admin-tab span {
    text-decoration: none;
}

/* Dark Mode Admin Tabs */
.dark-mode .admin-tabs {
    border-bottom: none;
}

.dark-mode .admin-tabs .admin-tab {
    color: var(--pulse-gray-300);
    background-color: transparent;
    text-decoration: none;
}

.dark-mode .admin-tabs .admin-tab:hover {
    color: var(--pulse-primary);
    background-color: rgba(33, 150, 243, 0.2);
    text-decoration: none;
}

.dark-mode .admin-tabs .admin-tab.active {
    color: #ffffff;
    background-color: var(--pulse-primary);
    border-bottom: none;
    text-decoration: none;
}

.dark-mode .admin-tabs .admin-tab .material-icons,
.dark-mode .admin-tabs .admin-tab span {
    text-decoration: none;
}

/* Content */
.main-content {
    padding: 2rem 0;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 100px; /* Space for desktop footer */
    background-color: transparent;
    transition: background-color 0.3s ease;
    min-height: calc(100vh - 80px);
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

/* Cards */
.card {
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px var(--shadow);
    background: transparent;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-bg);
    opacity: 0.75;
    border-radius: 8px;
    z-index: -1;
}

.card > * {
    position: relative;
    z-index: 1;
}

.card-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Stats */
/* Clean KPI Stats Cards */
.stat-card {
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px var(--shadow);
    height: 100%;
    color: var(--text-primary);
    position: relative;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-bg);
    opacity: 0.75;
    border-radius: 12px;
    z-index: -1;
}

.stat-card > * {
    position: relative;
    z-index: 1;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--pulse-gray-300);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--pulse-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--pulse-gray-600);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* Buttons */
.btn {
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
}

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

.btn-primary:hover {
    background-color: #2196F3;
    border-color: #2196F3;
}

.btn-outline-primary {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.btn-outline-primary:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

/* File Upload */
.upload-area {
    border: 2px dashed var(--pulse-gray-300);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    background: var(--pulse-gray-50);
    transition: all 0.2s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: var(--pulse-primary);
    background: rgba(33, 150, 243, 0.05);
}

.upload-area.dragover {
    border-color: var(--pulse-primary);
    background: rgba(33, 150, 243, 0.1);
}

.file-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--pulse-gray-200);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--card-bg);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.file-icon {
    width: 40px;
    height: 40px;
    background: var(--pulse-gray-100);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 500;
    color: var(--pulse-gray-800);
    margin-bottom: 0.25rem;
}

.file-meta {
    font-size: 0.75rem;
    color: var(--pulse-gray-600);
}

/* Loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.loading-spinner span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pulse-primary);
    animation: loading-dots 1.4s infinite;
}

.loading-spinner span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-spinner span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Preview Modal */
.modal {
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.modal-dialog {
    z-index: 1050 !important;
}

.modal-content {
    z-index: 1050 !important;
}

.modal-xl {
    max-width: 90vw;
}

#previewContent {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#previewContent img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#previewContent iframe {
    width: 100%;
    height: 70vh;
    border: none;
    border-radius: 8px;
}

.preview-error {
    color: var(--pulse-gray-600);
    font-size: 1.1rem;
}

.preview-error .material-icons {
    font-size: 3rem;
    color: var(--pulse-gray-400);
    margin-bottom: 1rem;
}

/* Login Page Styles */
.login-page {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #0f1419;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Cosmic Animated Background with Starry Night Image */
.login-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    background: #0a0e1a;
    background-image: url('/logos/starry-night.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Shooting Star Animation */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8),
                0 0 12px rgba(255, 255, 255, 0.6),
                0 0 18px rgba(255, 255, 255, 0.4);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transform-origin: center bottom;
}


.login-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}

.login-logo-section {
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.login-pulse-logo {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.login-nucleus-logo {
    max-width: 224px; /* 80% of previous 280px */
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.login-logo-section img {
    max-width: 275px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.login-logo-section h1 {
    display: none; /* Hide the text */
}

.login-logo-section p {
    color: var(--pulse-gray-600);
    font-size: 0.9rem;
    margin: 0.75rem 0 0 0;
    font-weight: 400;
}

.login-form-group {
    margin-bottom: 1.75rem;
}

.login-form-label {
    display: block;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    letter-spacing: 0.025em;
}

.login-form-control {
    width: 100%;
    padding: 1rem 1.25rem; /* Increased padding for better sizing */
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    box-sizing: border-box;
}

.login-form-control:focus {
    outline: none;
    border-color: rgba(33, 150, 243, 0.6);
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    color: rgba(255, 255, 255, 1);
}

.login-form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.btn-login {
    width: 100%;
    background: linear-gradient(135deg, var(--pulse-primary) 0%, #2196F3 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem 1.25rem; /* Match input field padding */
    font-size: 0.95rem; /* Match input field font size */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    letter-spacing: 0.025em;
}

.btn-login:hover {
    background: linear-gradient(135deg, #2196F3 0%, #2196F3 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(33, 150, 243, 0.3);
}

.btn-login:disabled {
    background: var(--pulse-gray-300);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.login-error-message {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    display: none;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
}

.login-bypass-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}

.btn-bypass {
    background-color: transparent;
    color: var(--pulse-gray-600);
    border: 1px solid var(--pulse-gray-300);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-bypass:hover {
    background-color: var(--pulse-gray-50);
    color: var(--pulse-gray-800);
    text-decoration: none;
}

.login-loading-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .main-content {
        padding: 1.5rem 1.5rem;
        max-width: 100%;
        margin: 0 auto;
    }

    .header-container,
    .nav-container {
        width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .header-content {
        flex-direction: row;
        gap: 0;
        justify-content: space-between;
        align-items: center;
    }
    
    .logo-section {
        flex: 1;
        min-width: 0;
    }
    
    .header-actions {
        flex-shrink: 0;
    }
    
    .nav-tabs .nav-link {
        padding: 0.75rem 1rem;
    }
    
    /* Better card padding on mobile */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-header {
        padding: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Better spacing for stat cards */
    .stat-card {
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
    }
    
    /* Better container spacing */
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Better button spacing */
    .btn {
        padding: 0.625rem 1.25rem;
    }
    
    .login-container {
        padding: 2rem;
        margin: 1rem;
        max-width: 90%;
    }
    
    .login-logo-section img {
        max-width: 180px; /* 80% of previous mobile size, scaled proportionally */
        height: auto;
    }
    
    .login-logo-section h1 {
        font-size: 1.5rem;
    }
    
    .login-form-control,
    .btn-login {
        padding: 0.875rem 1rem; /* Slightly smaller padding on mobile */
        font-size: 0.9rem;
    }
}



/* DD Circle - Deal Desk Identifier */
.dd-badge-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pulse-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dd-text {
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1;
    text-align: center;
}

/* Hover effect for DD circle */
.dd-badge-circle:hover {
    background: #2196F3;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* ============================================
   ATOM AI ASSISTANT - Enhanced Branding & Formatting
   ============================================ */

/* Atom Response Card - Main Container */
.atom-response-card {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 20px;
}

/* Atom Response Header */
.atom-response-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--pulse-gray-100);
}

.dark-mode .atom-response-header {
    border-bottom-color: var(--border-color);
}

.atom-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pulse-primary) 0%, #2196F3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(33, 150, 243, 0.3);
}

.atom-avatar .material-icons {
    font-size: 28px;
}

.atom-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.atom-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pulse-primary);
    margin: 0;
}

.atom-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--pulse-gray-600);
    background: var(--pulse-gray-100);
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
}

.dark-mode .atom-badge {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

/* Atom Response Content */
.atom-response-content {
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Atom Headings - Simple document style */
.atom-heading {
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 8px;
    color: var(--text-primary);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.atom-heading-h3 {
    font-size: 1.25rem;
    margin-top: 24px;
    margin-bottom: 10px;
}

.atom-heading-h4 {
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 8px;
}

.atom-heading-h5 {
    font-size: 1rem;
    margin-top: 16px;
    margin-bottom: 6px;
    font-weight: 600;
}

.dark-mode .atom-heading {
    color: var(--text-primary);
}

/* Atom Paragraphs - Simple document style */
.atom-paragraph {
    margin-bottom: 12px;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Atom Lists - Simple document style */
.atom-list {
    padding-left: 20px;
    margin: 12px 0;
    list-style: disc;
}

.atom-list-item {
    margin-bottom: 6px;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.atom-list-numbered {
    list-style: decimal;
}

/* Atom Deal Blocks */
.atom-deal-block {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 16px;
    margin: 0px;
}

.dark-mode .atom-deal-block {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);
    border-color: rgba(33, 150, 243, 0.3);
}

.atom-deal-item {
    background: white;
    border: 1px solid var(--pulse-gray-200);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.atom-deal-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.dark-mode .atom-deal-item {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

.atom-deal-company {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--pulse-primary);
    display: block;
    margin-bottom: 6px;
}

.atom-deal-value {
    color: #059669;
    font-weight: 600;
    margin-right: 12px;
}

.atom-deal-stage {
    margin-right: 12px;
}

.atom-stage-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--pulse-primary);
    color: white;
    margin-left: 4px;
}

.atom-deal-salesperson,
.atom-deal-contact {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-right: 12px;
}

/* Atom Statistics */
.atom-stat-item {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dark-mode .atom-stat-item {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(252, 211, 77, 0.05) 100%);
    border-color: rgba(252, 211, 77, 0.3);
}

.atom-stat-stage {
    font-weight: 700;
    color: var(--pulse-primary);
    font-size: 1rem;
}

.atom-stat-count {
    color: var(--text-secondary);
    font-weight: 500;
}

.atom-stat-value {
    color: #059669;
    font-weight: 700;
    font-size: 1.05rem;
}

/* Atom Deal Statistics Cards */
.atom-deal-stats-container {
    margin: 24px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
}

.dark-mode .atom-deal-stats-container {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);
    border-color: rgba(33, 150, 243, 0.3);
}

.atom-deal-stats-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pulse-primary);
    margin-bottom: 20px;
}

.atom-deal-stats-title .material-icons {
    font-size: 24px;
}

.atom-deal-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.atom-deal-stat-card {
    background: white;
    border: 1px solid var(--pulse-gray-200);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dark-mode .atom-deal-stat-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.atom-deal-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--pulse-primary);
}

.dark-mode .atom-deal-stat-card:hover {
    box-shadow: 0 4px 12px var(--shadow-lg);
}

.atom-deal-stat-won {
    border-left: 4px solid #10b981;
}

.atom-deal-stat-lost {
    border-left: 4px solid #ef4444;
}

.atom-deal-stat-engaged {
    border-left: 4px solid #3b82f6;
}

.atom-deal-stat-proposal {
    border-left: 4px solid #f59e0b;
}

.atom-deal-stat-outreach {
    border-left: 4px solid #8b5cf6;
}

.atom-deal-stat-header {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pulse-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pulse-gray-200);
}

.dark-mode .atom-deal-stat-header {
    border-bottom-color: var(--border-color);
}

.atom-deal-stat-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.atom-deal-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.atom-deal-stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.atom-deal-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pulse-primary);
}

.atom-deal-stat-value.atom-currency {
    color: #059669;
    font-family: 'Courier New', monospace;
}

/* Atom Contact Cards - Dashboard Style */
.atom-contact-cards-container {
    margin: 24px 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.dark-mode .atom-contact-cards-container {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.atom-contact-cards-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.375rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    padding: 1.25rem 1.75rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.dark-mode .atom-contact-cards-title {
    background: #111827;
    border-bottom-color: #374151;
    color: #f9fafb;
}

.atom-contact-cards-title .material-icons {
    font-size: 1.5rem;
    color: #3b82f6;
    flex-shrink: 0;
}

.dark-mode .atom-contact-cards-title .material-icons {
    color: #60a5fa;
}

.atom-contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    background: #ffffff;
}

.dark-mode .atom-contact-cards-grid {
    background: #1f2937;
}

.atom-contact-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #3b82f6;
    border-radius: 0;
    padding: 0;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-mode .atom-contact-card {
    background: #1f2937;
    border-color: #374151;
    border-left-color: #3b82f6;
}

.atom-contact-card:hover {
    border-left-color: #2563eb;
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.dark-mode .atom-contact-card:hover {
    background: #111827;
    border-color: #4b5563;
    border-left-color: #60a5fa;
}

/* Stage-based border colors */
.atom-contact-card.atom-contact-won {
    border-left-color: #10b981; /* Green */
}

.atom-contact-card.atom-contact-won:hover {
    border-left-color: #059669;
}

.atom-contact-card.atom-contact-lost {
    border-left-color: #ef4444; /* Red */
}

.atom-contact-card.atom-contact-lost:hover {
    border-left-color: #dc2626;
}

.atom-contact-card.atom-contact-proposal {
    border-left-color: #8b5cf6; /* Purple */
}

.atom-contact-card.atom-contact-proposal:hover {
    border-left-color: #7c3aed;
}

.atom-contact-card.atom-contact-engaged {
    border-left-color: #3b82f6; /* Blue */
}

.atom-contact-card.atom-contact-engaged:hover {
    border-left-color: #2563eb;
}

.atom-contact-card.atom-contact-outreach {
    border-left-color: #f59e0b; /* Orange */
}

.atom-contact-card.atom-contact-outreach:hover {
    border-left-color: #d97706;
}

.atom-contact-card-header {
    background: #f9fafb;
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.dark-mode .atom-contact-card-header {
    background: #111827;
    border-bottom-color: #374151;
}

.atom-contact-card-header .material-icons {
    font-size: 1.5rem;
    color: #3b82f6;
    flex-shrink: 0;
}

.dark-mode .atom-contact-card-header .material-icons {
    color: #60a5fa;
}

.atom-contact-company {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    flex: 1;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.dark-mode .atom-contact-company {
    color: #f9fafb;
}

.atom-contact-card-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #ffffff;
}

.dark-mode .atom-contact-card-body {
    background: #1f2937;
}

.atom-contact-field {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.atom-contact-field:last-child {
    border-bottom: none;
}

.dark-mode .atom-contact-field {
    border-bottom-color: #374151;
}

.atom-contact-icon {
    font-size: 1.125rem;
    color: #6b7280;
    flex-shrink: 0;
    margin-top: 2px;
}

.dark-mode .atom-contact-icon {
    color: #9ca3af;
}

.atom-contact-field-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.atom-contact-label {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
}

.dark-mode .atom-contact-label {
    color: #9ca3af;
}

.atom-contact-value {
    font-size: 0.875rem;
    color: #111827;
    font-weight: 400;
    word-break: break-word;
    line-height: 1.5;
}

.dark-mode .atom-contact-value {
    color: #e5e7eb;
}

.atom-contact-link {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.15s ease;
    font-weight: 500;
}

.atom-contact-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.dark-mode .atom-contact-link {
    color: #60a5fa;
}

.dark-mode .atom-contact-link:hover {
    color: #93c5fd;
}

.atom-contact-stage {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.dark-mode .atom-contact-stage {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.atom-contact-currency {
    color: #059669;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}

.dark-mode .atom-contact-currency {
    color: #34d399;
}

.atom-contact-notes {
    margin-top: 0;
}

.atom-contact-notes .atom-contact-value {
    font-style: italic;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.6;
}

.dark-mode .atom-contact-notes .atom-contact-value {
    color: #9ca3af;
}

/* Responsive design for contact cards */
@media (max-width: 768px) {
    .atom-contact-cards-container {
        margin: 16px 0;
    }
    
    .atom-contact-cards-title {
        padding: 1rem 1.125rem;
        font-size: 1.125rem;
    }
    
    .atom-contact-cards-title .material-icons {
        font-size: 1.375rem;
    }
    
    .atom-contact-cards-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        padding: 1rem 1.125rem;
    }
    
    .atom-contact-card-header {
        padding: 0.75rem 1rem;
    }
    
    .atom-contact-card-body {
        padding: 0.875rem 1rem;
    }
    
    .atom-contact-company {
        font-size: 0.8125rem;
    }
    
    .atom-contact-field {
        padding: 0.625rem 0;
    }
    
    .atom-contact-label {
        font-size: 0.8125rem;
    }
    
    .atom-contact-value {
        font-size: 0.8125rem;
    }
}

/* Atom Links */
.atom-link {
    color: var(--pulse-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin: 0 2px;
}

.atom-link:hover {
    background: rgba(33, 150, 243, 0.1);
    text-decoration: none;
    transform: translateY(-1px);
}

.atom-link-icon {
    font-size: 16px;
    opacity: 0.8;
}

.atom-link-file {
    color: #dc2626;
}

.atom-link-file:hover {
    background: rgba(220, 38, 38, 0.1);
}

.atom-link-demo {
    color: #059669;
}

.atom-link-demo:hover {
    background: rgba(5, 150, 105, 0.1);
}

/* Atom Text Formatting */
.atom-strong {
    color: var(--pulse-primary);
    font-weight: 700;
}

.atom-em {
    color: var(--text-secondary);
    font-style: italic;
}

.atom-code {
    background: var(--code-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Courier New', monospace;
    color: #dc2626;
    border: 1px solid var(--pulse-gray-200);
}

.dark-mode .atom-code {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: #f87171;
}

/* Atom Currency & Numbers */
.atom-currency {
    color: #059669;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.atom-percentage {
    color: var(--pulse-primary);
    font-weight: 600;
}

/* Atom Info Lines */
.atom-info-line {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* Chatbot Specific Styles - Atom Avatar in Chat */
.atom-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--pulse-primary) 0%, #2196F3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
}

.atom-avatar-small .material-icons {
    font-size: 18px;
}

.atom-chat-content {
    flex: 1;
}

/* Enhanced AI Response Content (backward compatibility) */
.ai-response-content {
    line-height: 1.7;
    font-size: 0.95rem;
}

/* LinkedIn AI Assistant Card */
#linkedin-section .ai-assist-card .card-body {
    background: var(--pulse-gray-50);
}

#linkedin-section .ai-assist-card {
    border-color: var(--pulse-gray-200);
}

#linkedin-section .ai-assist-card .form-text {
    color: var(--pulse-gray-600);
}

/* Tighten input-group joints for AI select/input + button */
#linkedin-section .ai-assist-card .input-group .form-select,
#linkedin-section .ai-assist-card .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#linkedin-section .ai-assist-card .input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px; /* collapse double border */
}

.ai-response-content code {
    background-color: #f1f5f9;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #2196F3;
}

.ai-response-content strong {
    color: var(--pulse-primary);
    font-weight: 600;
}

.ai-response-content em {
    color: var(--pulse-gray-600);
    font-style: italic;
}

.ai-response-content h3 {
    color: var(--pulse-primary);
    font-weight: 600;
    font-size: 1.1rem;
}

.ai-response-content h4 {
    color: var(--pulse-primary);
    font-weight: 600;
    font-size: 1rem;
}

.ai-response-content h5 {
    color: var(--pulse-gray-800);
    font-weight: 600;
    font-size: 0.95rem;
}

.ai-response-content ul {
    padding-left: 1.5rem;
}

.ai-response-content li {
    margin-bottom: 0.25rem;
}

.ai-response-content a {
    color: var(--pulse-primary);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.ai-response-content a:hover {
    text-decoration: none;
    color: #2196F3;
}

#aiQueryInput {
    font-size: 1rem;
    padding: 0.75rem;
}

#aiQueryInput:focus {
    border-color: var(--pulse-primary);
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

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

/* AI Loading Animation */
.ai-loading {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.ai-loading span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pulse-primary);
    animation: loading-dots 1.4s infinite;
}

.ai-loading span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-loading span:nth-child(3) {
    animation-delay: 0.4s;
}

/* AI Assistant Mobile Styles */
@media (max-width: 768px) {
    .ai-response-content {
        font-size: 0.9rem;
    }
    
    #aiQueryInput {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
}

/* Action Dropdown Menu Styles */
.action-dropdown {
    position: relative;
    display: inline-block;
    z-index: 1000;
}

.action-dropdown.menu-open {
    z-index: 999999 !important;
    position: relative;
}

.action-dropdown.menu-open .action-dropdown-menu {
    z-index: 999999 !important;
}

/* Lower z-index of other action dropdowns when one is open in table */
.table.has-open-dropdown .action-dropdown:not(.menu-open) {
    z-index: 0 !important;
}

.action-dropdown-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: all 0.2s ease;
    color: var(--pulse-gray-600);
}

.action-dropdown-toggle:hover {
    background-color: var(--pulse-gray-100);
    color: var(--pulse-gray-800);
    transform: scale(1.05);
}

.action-dropdown-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.action-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--pulse-gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}

.action-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 999999 !important;
}

.action-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--pulse-gray-700);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.action-dropdown-item:hover {
    background-color: var(--pulse-gray-50);
    color: var(--pulse-gray-900);
}

.action-dropdown-item .material-icons {
    font-size: 1.125rem;
    color: var(--pulse-primary);
    transition: color 0.2s ease;
    /* Margin handled by global icon spacing standard */
}

.action-dropdown-item:hover .material-icons {
    color: var(--pulse-primary);
}

/* Specific action item colors */
.action-dropdown-item.preview:hover .material-icons {
    color: var(--pulse-primary);
}

.action-dropdown-item.download:hover .material-icons {
    color: var(--pulse-primary);
}

.action-dropdown-item.edit:hover .material-icons {
    color: var(--pulse-primary);
}

.action-dropdown-item.delete:hover .material-icons {
    color: #dc2626;
}

/* Action Menu - Reusable vertical ellipse menu */
.action-menu {
    position: relative;
    display: inline-block;
    z-index: 1000;
}

.action-menu.menu-open {
    z-index: 999999 !important;
    position: relative;
}

.action-menu.menu-open .action-menu-dropdown {
    z-index: 999999 !important;
}

.action-menu-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: all 0.2s ease;
    color: var(--pulse-primary);
}

.action-menu-toggle:hover {
    background-color: var(--pulse-gray-100);
    color: var(--pulse-primary);
    transform: scale(1.05);
}

.action-menu-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.action-menu-toggle .material-icons {
    font-size: 20px;
    color: var(--pulse-primary);
}

.action-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--pulse-gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}


.action-menu-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 999999 !important;
}

.action-menu-dropdown[style*="position: fixed"] {
    z-index: 999999 !important;
}

.action-menu-dropdown.dropdown-top {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
}

.action-menu-dropdown.table-dropdown.show {
    position: fixed !important;
    z-index: 999999 !important;
}

.action-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--pulse-gray-700);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.action-menu-item:hover {
    background-color: var(--pulse-gray-50);
    color: var(--pulse-gray-900);
}

.action-menu-item .material-icons {
    font-size: 1.125rem;
    color: var(--pulse-primary);
    transition: color 0.2s ease;
    /* Margin handled by global icon spacing standard */
}

.action-menu-item:hover .material-icons {
    color: var(--pulse-primary);
}

.action-menu-item.delete:hover {
    background-color: #fee2e2;
    color: #dc2626;
}

.action-menu-item.delete:hover .material-icons {
    color: #dc2626;
}

/* Dropdown arrow */
.action-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid var(--pulse-gray-200);
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
    z-index: -1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .action-dropdown-menu {
        min-width: 140px;
        right: -10px;
    }
    
    .action-dropdown-item {
        padding: 0.625rem 0.875rem;
        font-size: 0.8rem;
    }
    
    .action-dropdown-item .material-icons {
        font-size: 1rem;
    }
    
    /* Ensure dropdown doesn't get cut off on mobile */
    .action-dropdown {
        position: relative;
        z-index: 1000;
    }
    
    .action-dropdown-menu {
        position: fixed;
        top: auto;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: 200px;
        margin: 0 auto;
        z-index: 10000 !important;
    }
    
    .action-dropdown-menu.show {
        z-index: 999999 !important;
    }
    
    .action-dropdown.menu-open {
        z-index: 999999 !important;
    }
    
    .action-menu {
        z-index: 1000;
    }
    
    .action-menu.menu-open {
        z-index: 999999 !important;
    }
    
    .action-menu-dropdown {
        position: fixed;
        top: auto;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: 200px;
        margin: 0 auto;
        z-index: 999999 !important;
    }
    
    .action-menu-dropdown.show {
        z-index: 999999 !important;
    }
    
    .action-menu.menu-open .action-menu-dropdown {
        z-index: 999999 !important;
    }
    
    .action-dropdown-menu::before {
        display: none;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .action-dropdown-toggle {
        width: 32px;
        height: 32px;
        padding: 0.375rem;
    }
    
    .action-dropdown-toggle .material-icons {
        font-size: 1.125rem;
    }
}

/* Links and Demos Card Layout Improvements */
.links-demos-card {
    border: 1px solid var(--pulse-gray-200);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    transition: all 0.2s ease;
}

.links-demos-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--pulse-gray-300);
}

/* Card layout fixes for links and demos */
.card.h-100 {
    overflow: visible;
}

.card-body {
    overflow: visible;
}

.card-body .d-flex {
    min-width: 0;
}

.card-body .flex-grow-1 {
    min-width: 0;
    overflow: hidden;
}

/* Ensure buttons don't break out */
.card-body .d-flex.align-items-center {
    flex-shrink: 0;
    min-width: fit-content;
}

/* Fix for action dropdown being clipped in tables - CRITICAL FIX */
#documents-section {
    overflow: visible !important;
}

#documents-section .row {
    overflow: visible !important;
}

#documents-section .col-12 {
    overflow: visible !important;
}

#documents-section .card {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

#documents-section .card-header {
    overflow: visible !important;
}

#documents-section .card-body {
    overflow: visible !important;
}

#documents-section .card-body.p-0 {
    overflow: visible !important;
}

.table-responsive {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

#documents-section .table-responsive {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Prevent table and its elements from clipping */
#documents-section .table {
    overflow: visible !important;
}

/* Table overflow fixes for dropdown menus */
.table-responsive {
    overflow: visible !important;
    position: relative;
}

.table-responsive .table {
    overflow: visible !important;
}

/* Ensure parent containers don't clip dropdowns */
.card .table-responsive,
.card-body .table-responsive {
    overflow: visible !important;
}

.table thead,
.table tbody,
.table tr {
    overflow: visible !important;
}

.table tbody tr td {
    overflow: visible !important;
}

.table tbody tr {
    overflow: visible !important;
}

#documents-section .table thead,
#documents-section .table tbody,
#documents-section .table tr {
    overflow: visible !important;
}

#documents-section .table tbody tr td {
    overflow: visible !important;
}

#documents-section .table tbody tr {
    overflow: visible !important;
}

/* Only the actions column needs to overflow */
.table tbody tr td:last-child {
    overflow: visible !important;
    position: relative;
    z-index: 0;
}

/* Position dropdown container - default z-index */
.table tbody tr td:last-child .action-dropdown,
.table tbody tr td:last-child .action-menu {
    position: relative !important;
    z-index: 1;
}

/* When a dropdown is open, it gets highest z-index */
.table tbody tr td:last-child .action-dropdown.menu-open,
.table tbody tr td:last-child .action-menu.menu-open {
    z-index: 999999 !important;
    position: relative !important;
}

.table tbody tr td:last-child .action-dropdown.menu-open .action-dropdown-menu,
.table tbody tr td:last-child .action-menu.menu-open .action-menu-dropdown {
    z-index: 999999 !important;
}

/* Lower z-index of other action buttons when one is open */
.table.has-open-dropdown .action-dropdown:not(.menu-open),
.table.has-open-dropdown .action-menu:not(.menu-open) {
    z-index: 0 !important;
}

.table.has-open-dropdown .action-dropdown:not(.menu-open) .action-dropdown-toggle,
.table.has-open-dropdown .action-menu:not(.menu-open) .action-menu-toggle {
    z-index: 0 !important;
    position: relative;
}

/* Lower z-index of table rows when dropdown is open - using class-based approach */
.table.has-open-dropdown tbody tr.dropdown-inactive {
    z-index: 0 !important;
    position: relative;
}

/* Ensure the row with open dropdown has high z-index */
.table.has-open-dropdown tbody tr.dropdown-active {
    z-index: 999998 !important;
    position: relative;
}

/* Also lower z-index of action buttons in inactive rows */
.table.has-open-dropdown tbody tr.dropdown-inactive .action-dropdown,
.table.has-open-dropdown tbody tr.dropdown-inactive .action-menu {
    z-index: 0 !important;
}

.table.has-open-dropdown tbody tr.dropdown-inactive .action-dropdown-toggle,
.table.has-open-dropdown tbody tr.dropdown-inactive .action-menu-toggle {
    z-index: 0 !important;
}

/* Table dropdown menu - same as regular dropdown but with higher z-index */
.table tbody tr td:last-child .action-dropdown-menu,
.table tbody tr td:last-child .action-menu-dropdown {
    position: absolute !important;
    top: calc(100% + 0.25rem) !important;
    right: 0 !important;
    z-index: 1 !important;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.table tbody tr td:last-child .action-dropdown-menu.show,
.table tbody tr td:last-child .action-menu-dropdown.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 999999 !important;
    position: absolute !important;
}

/* Ensure dropdown menu appears above all table content when open */
.table.has-open-dropdown tbody tr.dropdown-active td:last-child .action-dropdown-menu.show,
.table.has-open-dropdown tbody tr.dropdown-active td:last-child .action-menu-dropdown.show {
    z-index: 999999 !important;
    position: absolute !important;
}

/* Keep normal table cells without overflow expansion */
.table td {
    vertical-align: middle;
}

/* Prevent table structure from expanding unnecessarily */
.table {
    margin-bottom: 0;
}

.table tbody tr {
    height: auto;
}

/* Grid container adjustments */
.row.g-3 {
    overflow: visible;
}

/* New Folder Creation UI */
#newFolderInputGroup,
#editNewFolderInputGroup {
    animation: slideDown 0.2s ease-out;
}

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

/* Small buttons with proper spacing */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-sm .material-icons {
    vertical-align: middle;
}

/* Remove margin-right on material icons when they're by themselves (only child) */
/* These rules are now handled by the global icon spacing standard above */

#linksList, #demosList {
    overflow: visible;
}

.links-demos-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.links-demos-content {
    display: flex;
    align-items: flex-start;
    flex-grow: 1;
}

.links-demos-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.links-demos-notes {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pulse-gray-100);
}

.links-demos-notes .bg-light {
    background-color: var(--pulse-gray-50) !important;
    border: 1px solid var(--pulse-gray-200);
    border-radius: 6px;
    padding: 0.75rem;
}

/* Responsive adjustments for links and demos */
@media (max-width: 768px) {
    .links-demos-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .links-demos-actions {
        align-self: flex-end;
    }
    
    .links-demos-content {
        width: 100%;
    }
    
    .dd-badge-circle {
        width: 32px;
        height: 32px;
        margin-right: 0.75rem;
    }
    
    .dd-text {
        font-size: 0.7rem;
    }
    
    /* Mobile grid adjustments */
    .row.g-3 .col-md-6 {
        margin-bottom: 1rem;
    }
    
    /* Ensure cards stack properly on mobile */
    .card.h-100 {
        height: auto !important;
    }
}

/* Extra small screens - single column */
@media (max-width: 576px) {
    .row.g-3 .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Document Action Buttons - App Style */
.document-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid var(--pulse-primary);
    color: var(--pulse-primary);
    background-color: transparent;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background-color: var(--pulse-primary);
    color: white;
}

.action-btn .material-icons {
    font-size: 18px;
}

/* Comprehensive Button Alignment - All App Buttons */
.btn {
    font-weight: 500;
    border-radius: 50px;
    transition: all 0.2s ease;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    justify-content: center;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Primary Buttons */
.btn-primary {
    background-color: var(--pulse-primary) !important;
    border-color: var(--pulse-primary) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: var(--pulse-primary) !important;
    border-color: var(--pulse-primary) !important;
    color: #fff !important;
    opacity: 0.9;
}

.btn-primary:focus {
    background-color: var(--pulse-primary) !important;
    border-color: var(--pulse-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Outline Primary Buttons */
.btn-outline-primary {
    color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    background-color: transparent;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
}

.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--pulse-primary) !important;
    border-color: var(--pulse-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Secondary Buttons */
.btn-secondary {
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    color: #fff;
}

.btn-secondary:hover {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.btn-secondary:focus {
    background-color: #2196F3;
    border-color: #2196F3;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Outline Secondary Buttons */
.btn-outline-secondary {
    color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    background-color: transparent;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
}

.btn-outline-secondary:focus {
    color: #fff;
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Success Buttons */
.btn-success {
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    color: #fff;
}

.btn-success:hover {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.btn-success:focus {
    background-color: #2196F3;
    border-color: #2196F3;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Outline Success Buttons */
.btn-outline-success {
    color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    background-color: transparent;
}

.btn-outline-success:hover {
    color: #fff;
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
}

.btn-outline-success:focus {
    color: #fff;
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Outline Success Buttons */
.btn-outline-success {
    color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    background-color: transparent;
}

.btn-outline-success:hover {
    color: #fff;
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
}

.btn-outline-success:focus {
    color: #fff;
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Danger Buttons */
.btn-danger {
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    color: #fff;
}

.btn-danger:hover {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.btn-danger:focus {
    background-color: #2196F3;
    border-color: #2196F3;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Outline Danger Buttons */
.btn-outline-danger {
    color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    background-color: transparent;
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
}

.btn-outline-danger:focus {
    color: #fff;
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

/* Small Button Adjustments */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.btn-sm:hover {
    transform: translateY(-0.5px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Document Creator Layout - Two Column */
#document-creator-section .row {
    min-height: 600px;
}

/* Date Input Styling */
#dynamicFieldsForm input[type="date"] {
    position: relative;
}

#dynamicFieldsForm input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

#dynamicFieldsForm input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: var(--pulse-gray-100);
    border-radius: 4px;
}

/* Firefox date input styling */
#dynamicFieldsForm input[type="date"]::-moz-calendar-picker-indicator {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") no-repeat center;
    background-size: 16px;
    border: none;
    cursor: pointer;
    height: 20px;
    width: 20px;
}

#document-creator-section .col-lg-4,
#document-creator-section .col-lg-8 {
    display: flex;
    flex-direction: column;
}

#document-creator-section .card.h-100 {
    height: 100%;
    min-height: 600px;
}

#document-creator-section .card-body.d-flex {
    flex: 1;
}

#emptyPreviewState {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#documentPreview {
    overflow-y: auto;
    max-height: 500px;
}

/* Responsive adjustments for document creator */
@media (max-width: 991px) {
    #document-creator-section .col-lg-4,
    #document-creator-section .col-lg-8 {
        flex-direction: column;
    }
    
    #document-creator-section .card.h-100 {
        min-height: 400px;
    }
}

@media (max-width: 767px) {
    #document-creator-section .row {
        min-height: auto;
    }
    
    #document-creator-section .card.h-100 {
        min-height: 300px;
    }
}

/* Document Preview Specific Styles - Force Override Bootstrap */
#documentPreview {
    font-family: 'Montserrat', 'Calibri', 'Arial', sans-serif !important;
    line-height: 1.8 !important;
    font-size: 14px !important;
    white-space: normal !important;
    background: white !important;
    max-height: 600px !important;
    overflow-y: auto !important;
}

#documentPreview .document-content {
    font-family: 'Montserrat', 'Calibri', 'Arial', sans-serif !important;
    line-height: 1.8 !important;
    font-size: 14px !important;
    padding: 20px !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
}

#documentPreview p {
    margin: 12px 0 !important;
    display: block !important;
}

#documentPreview .document-content h2 {
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 40px 0 20px 0 !important;
    color: #333 !important;
    border-bottom: 3px solid #636fe8 !important;
    padding-bottom: 10px !important;
    display: block !important;
    text-align: center !important;
}

#documentPreview .document-content h3 {
    font-size: 18px !important;
    font-weight: bold !important;
    margin: 35px 0 10px 0 !important;
    color: #333 !important;
    border-bottom: 2px solid #636fe8 !important;
    padding-bottom: 6px !important;
    display: block !important;
}

#documentPreview strong {
    font-weight: bold !important;
    display: inline !important;
}

#documentPreview em {
    font-style: italic !important;
    display: inline !important;
}

#documentPreview .document-content div[style*="margin-top: 20px"] {
    margin-top: 20px !important;
    display: block !important;
    height: 20px !important;
}

#documentPreview .document-content ul {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 20px !important;
    list-style-type: disc !important;
}

#documentPreview .document-content ol {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

#documentPreview .document-content li {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 20px !important;
    list-style-type: disc !important;
}

/* Override Bootstrap styles */
/* Bootstrap .text-primary override to use new blue */
.text-primary {
    --bs-text-opacity: 1;
    color: #2196F3 !important;
}

#documentPreview .document-content * {
    box-sizing: border-box !important;
}

#documentPreview .document-content br {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure proper spacing for numbered lists */
#documentPreview .document-content strong {
    font-weight: bold !important;
    display: inline !important;
}

/* Force spacing divs to be visible */
#documentPreview .document-content div {
    min-height: 1px !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .document-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .action-btn {
        justify-content: center;
        padding: 10px 16px;
    }
}

/* Quill Editor Styles */
#documentPreviewEditor {
    background: white;
}

#documentPreviewEditor .ql-editor,
#documentPreviewReadOnly {
    min-height: 400px;
    font-family: 'Montserrat', 'Calibri', 'Arial', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #333 !important;
}

/* Force logo sizing for both editor and preview */
#documentPreviewEditor .ql-editor img[src*="pulse-ai-logo"],
#documentPreviewReadOnly img[src*="pulse-ai-logo"] {
    max-width: 200px !important;
    height: 60px !important;
    width: auto !important;
    display: block !important;
    margin: 10px auto 20px auto !important;
}

/* Style content in both editor and preview */
#documentPreviewEditor .ql-editor p,
#documentPreviewReadOnly p {
    margin: 12px 0 !important;
}

/* Hide empty paragraphs with just line breaks */
#documentPreviewEditor .ql-editor p:empty,
#documentPreviewReadOnly p:empty,
#documentPreviewEditor .ql-editor p:has(> br:only-child),
#documentPreviewReadOnly p:has(> br:only-child) {
    display: none !important;
}

#documentPreviewEditor .ql-editor strong,
#documentPreviewReadOnly strong {
    font-weight: 600 !important;
}

#documentPreviewEditor .ql-editor h2,
#documentPreviewReadOnly h2 {
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 30px 0 0 0 !important;
    color: #333 !important;
    border-bottom: 3px solid #636fe8 !important;
    padding-bottom: 10px !important;
}

#documentPreviewEditor .ql-editor h3,
#documentPreviewReadOnly h3 {
    font-size: 18px !important;
    font-weight: bold !important;
    margin: 20px 0 0 0 !important;
    color: #333 !important;
    border-bottom: 2px solid #636fe8 !important;
    padding-bottom: 6px !important;
}

#documentPreviewEditor .ql-editor ul,
#documentPreviewEditor .ql-editor ol,
#documentPreviewReadOnly ul,
#documentPreviewReadOnly ol {
    padding-left: 30px !important;
    margin: 15px 0 !important;
}

#documentPreviewEditor .ql-editor li,
#documentPreviewReadOnly li {
    margin: 8px 0 !important;
}

#documentPreviewEditor .ql-toolbar {
    border: 1px solid #ddd;
    border-radius: 8px 8px 0 0;
}

#documentPreviewEditor .ql-container {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

#documentPreviewEditor .ql-editor p {
    margin: 12px 0;
}

#documentPreviewEditor .ql-editor h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 30px 0 15px 0;
    color: #333;
    border-bottom: 3px solid #636fe8;
    padding-bottom: 10px;
}

#documentPreviewEditor .ql-editor h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0 10px 0;
    color: #333;
    border-bottom: 2px solid #636fe8;
    padding-bottom: 6px;
}

#documentPreviewEditor .ql-editor strong {
    font-weight: bold;
}

#documentPreviewEditor .ql-editor ul {
    padding-left: 30px;
    margin: 15px 0;
}

#documentPreviewEditor .ql-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0;
}

#documentPreviewEditor .ql-editor table td,
#documentPreviewEditor .ql-editor table th {
    border: 1px solid #ddd;
    padding: 8px;
}

#documentPreviewEditor .ql-editor table th {
    background-color: #495057;
    color: white;
    font-weight: 600;
}

/* LinkedIn author toggle button set */
#linkedin-section .btn-group [id="linkedinToggleMe"],
#linkedin-section .btn-group [id="linkedinToggleOrg"] {
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--pulse-primary);
	color: var(--pulse-primary);
	background: #fff;
	min-width: 120px;
	text-align: center;
}

#linkedin-section .btn-group [id="linkedinToggleMe"].active,
#linkedin-section .btn-group [id="linkedinToggleOrg"].active {
	background: var(--pulse-primary);
	color: #fff;
	box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

#linkedin-section .btn-group [id="linkedinToggleMe"]:hover,
#linkedin-section .btn-group [id="linkedinToggleOrg"]:hover {
	background: rgba(30,58,138,0.06);
	color: var(--pulse-primary);
	transform: translateY(-1px);
}

#linkedin-section .btn-group {
	gap: 8px;
}

/* Ensure focus states are visible */
#linkedin-section .btn-group [id="linkedinToggleMe"]:focus,
#linkedin-section .btn-group [id="linkedinToggleOrg"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

.dark-mode .stat-card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--text-primary);
    overflow: visible;
}

.dark-mode .stat-card::before {
    background: var(--card-bg);
    opacity: 0.75;
}

.dark-mode .stat-card:hover {
    box-shadow: 0 4px 12px var(--shadow-lg);
    border-color: var(--border-color);
}

.dark-mode .form-control,
.dark-mode .login-form-control,
.dark-mode .form-select,
.dark-mode input[type="text"],
.dark-mode input[type="search"] {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.dark-mode .form-control.border-start-0 {
    border-left-color: var(--border-color) !important;
}

.dark-mode .input-group-text.border-end-0 {
    border-right-color: var(--border-color) !important;
}

.dark-mode .input-group {
    border-radius: 6px;
    overflow: hidden;
}

.dark-mode .input-group .input-group-text {
    border-right: none;
}

.dark-mode .input-group .form-control.border-start-0 {
    border-left: none;
}

.dark-mode .form-control:focus,
.dark-mode .login-form-control:focus,
.dark-mode .form-select:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(33, 150, 243, 0.6) !important;
    color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15) !important;
}

.dark-mode .form-control::placeholder,
.dark-mode .form-select option {
    color: var(--text-tertiary) !important;
}

.dark-mode .login-form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.dark-mode .form-select option {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .input-group-text {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .input-group-text .material-icons {
    color: var(--text-secondary) !important;
}

.dark-mode .bg-light,
.dark-mode .input-group-text.bg-light {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .table {
    color: var(--text-primary);
    background: transparent;
}

.dark-mode .table::before {
    background: var(--card-bg);
    opacity: 0.75;
}

.dark-mode .table thead th,
.dark-mode .table-light th,
.dark-mode .table-light thead th,
.dark-mode .table thead,
.dark-mode .table thead tr {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .table th {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .table thead th {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .table tbody td {
    border-color: var(--border-color);
    color: var(--text-primary);
    background-color: transparent;
    position: relative;
    z-index: 1;
}

.dark-mode .table tbody tr:hover {
    background-color: var(--hover-bg);
}

.dark-mode .table tbody tr {
    background-color: transparent;
    position: relative;
    z-index: 1;
}

.dark-mode .modal-content {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}

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

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

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

/* Enhanced Offcanvas Menu for Dark Mode */
.dark-mode .offcanvas-menu {
    background: var(--card-bg);
    box-shadow: -2px 0 10px var(--shadow-lg);
    border-left: 1px solid var(--border-color);
}

.dark-mode .offcanvas-header {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--card-bg) 100%);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.dark-mode .offcanvas-header h3 {
    color: var(--text-primary);
}

.dark-mode .offcanvas-close {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.dark-mode .offcanvas-close:hover {
    background: var(--hover-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .offcanvas-nav-item {
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .offcanvas-nav-link {
    color: var(--text-secondary);
    border-bottom: none;
    transition: all 0.2s ease;
}

.dark-mode .offcanvas-nav-link:hover {
    background-color: var(--hover-bg);
    color: var(--pulse-primary-light);
    border-left: 3px solid var(--pulse-primary);
    padding-left: calc(1.5rem - 3px);
    font-weight: 500;
}

.dark-mode .offcanvas-nav-link.active {
    background-color: var(--hover-bg);
    color: var(--pulse-primary-light);
    border-left: 3px solid var(--pulse-primary);
    padding-left: calc(1.5rem - 3px);
    font-weight: 600;
}

.dark-mode .offcanvas-nav-link .material-icons {
    color: var(--pulse-primary);
    font-size: 22px;
    transition: color 0.2s ease;
}

.dark-mode .offcanvas-nav-link.active .material-icons,
.dark-mode .offcanvas-nav-link:hover .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .offcanvas-body {
    background-color: var(--card-bg);
}

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

.dark-mode .offcanvas-user-section {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .offcanvas-user-name {
    color: var(--text-primary);
}

.dark-mode .offcanvas-user-role {
    color: var(--text-tertiary);
}

.dark-mode .offcanvas-user-info .material-icons {
    color: var(--pulse-primary-light);
}

.dark-mode .offcanvas-settings-toggle {
    color: var(--text-tertiary);
}

.dark-mode .offcanvas-settings-toggle:hover {
    background: var(--hover-bg);
    color: var(--pulse-primary-light);
}

.dark-mode .offcanvas-settings {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .offcanvas-settings-title {
    color: var(--text-tertiary);
    border-bottom-color: var(--border-color);
}

.dark-mode .offcanvas-settings-item {
    color: var(--text-primary);
}

.dark-mode .offcanvas-settings-item:hover {
    background: var(--hover-bg);
    color: var(--pulse-primary-light);
}

.dark-mode .offcanvas-settings-item .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .offcanvas-settings-item:hover .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .offcanvas-admin-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.dark-mode .offcanvas-admin-btn:hover {
    background: var(--hover-bg);
    border-color: var(--pulse-primary);
    color: var(--pulse-primary-light);
}

.dark-mode .offcanvas-admin-btn .material-icons {
    color: var(--text-secondary);
}

.dark-mode .offcanvas-admin-btn:hover .material-icons {
    color: var(--pulse-primary-light);
}

.dark-mode .offcanvas-logout {
    background: var(--pulse-primary);
    color: white;
}

.dark-mode .offcanvas-logout:hover {
    background: var(--pulse-primary-light);
}

.dark-mode .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-lg);
}

.dark-mode .badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.dark-mode .badge.bg-secondary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .badge.bg-info {
    background-color: rgba(33, 150, 243, 0.2) !important;
    color: var(--pulse-primary-light) !important;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.dark-mode .badge.bg-primary {
    background-color: var(--pulse-primary) !important;
    color: #ffffff !important;
}

.dark-mode .dropdown-item {
    color: var(--text-primary);
}

.dark-mode .dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.dark-mode .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .list-group-item:hover {
    background-color: var(--bg-tertiary);
}

.dark-mode .badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.dark-mode .text-muted {
    color: var(--text-tertiary) !important;
}

.dark-mode .loading-overlay {
    background-color: rgba(15, 23, 42, 0.95);
}

.dark-mode .loading-content {
    color: var(--text-primary);
}

.dark-mode .file-item,
.dark-mode .link-item,
.dark-mode .demo-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .file-item:hover,
.dark-mode .link-item:hover,
.dark-mode .demo-item:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--pulse-primary);
}

.dark-mode .upload-area {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.dark-mode .upload-area:hover {
    background-color: var(--bg-primary);
    border-color: var(--pulse-primary);
}

.dark-mode .preview-container {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: var(--text-primary);
}

.dark-mode p, .dark-mode span, .dark-mode div {
    color: var(--text-primary);
}

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

.dark-mode .section-title {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* Dark mode gradient accents for cards and sections - subtle purple only */
.dark-mode .card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: visible;
}

.dark-mode .card::before {
    background: radial-gradient(circle at center, rgba(26, 10, 46, 0.05) 0%, var(--card-bg) 70%);
    opacity: 0.75;
}

.dark-mode .card-header {
    background: radial-gradient(circle at center, rgba(26, 10, 46, 0.08) 0%, var(--bg-tertiary) 80%);
    border-bottom-color: rgba(26, 10, 46, 0.2);
    border-radius: 8px 8px 0 0;
    overflow: visible;
}

.dark-mode .card-body {
    overflow: visible;
    border-radius: 0 0 8px 8px;
}

/* Fix nested cards border clipping */
.card-body .card {
    overflow: visible;
    border-radius: 8px;
}

.card-body .card .card-body {
    overflow: visible;
    border-radius: 8px;
}

.dark-mode .card-body .card {
    overflow: visible;
    border-radius: 8px;
}

.dark-mode .card-body .card .card-body {
    overflow: visible;
    border-radius: 8px;
}

/* Login page dark mode */
.dark-mode .login-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.dark-mode .login-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.dark-mode .login-logo-section h1 {
    color: var(--text-primary);
}

/* Navigation dark mode */
.dark-mode .main-nav {
    background: var(--card-bg);
    border-bottom-color: var(--border-color);
}

/* Enhanced Button Styling - High contrast blue */
.dark-mode .btn-primary {
    background-color: var(--pulse-primary);
    border-color: var(--pulse-primary);
    color: #ffffff;
    box-shadow: none;
    font-weight: 600;
}

.dark-mode .btn-primary:hover {
    background-color: var(--pulse-primary-light);
    border-color: var(--pulse-primary-light);
    box-shadow: none;
    transform: translateY(-1px);
    color: #ffffff;
}

.dark-mode .btn-outline-primary {
    border-color: var(--border-color);
    color: var(--text-primary);
    background-color: transparent;
}

.dark-mode .btn-outline-primary:hover {
    background-color: var(--hover-bg);
    border-color: var(--pulse-primary);
    color: var(--pulse-primary-light);
    font-weight: 500;
}

.dark-mode .btn-outline-danger {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--pulse-primary) !important;
    color: var(--pulse-primary-light) !important;
}

.dark-mode .btn-outline-danger:hover {
    background-color: var(--hover-bg) !important;
    border-color: var(--pulse-primary) !important;
    color: var(--pulse-primary-light) !important;
    font-weight: 500;
}

.dark-mode .btn-outline-danger:focus {
    background-color: var(--hover-bg) !important;
    border-color: var(--pulse-primary) !important;
    color: var(--pulse-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
}

.dark-mode .btn-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .btn-secondary:hover {
    background-color: var(--hover-bg);
    border-color: var(--border-color);
}

.dark-mode .btn-outline-secondary {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--pulse-primary) !important;
    color: var(--pulse-primary-light) !important;
}

.dark-mode .btn-outline-secondary:hover {
    background-color: var(--hover-bg) !important;
    border-color: var(--pulse-primary) !important;
    color: var(--pulse-primary-light) !important;
    font-weight: 500;
}

.dark-mode .btn-outline-secondary:focus {
    background-color: var(--hover-bg) !important;
    border-color: var(--pulse-primary) !important;
    color: var(--pulse-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
}

/* Enhanced Input Fields */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="search"],
.dark-mode textarea,
.dark-mode select {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="search"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    background-color: transparent;
    border-color: var(--pulse-primary);
    color: var(--text-primary);
    box-shadow: none !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-tertiary);
}

/* Enhanced Action Buttons */
.dark-mode .action-btn {
    border-color: var(--border-color);
    color: var(--text-primary);
    background-color: var(--card-bg);
}

.dark-mode .action-btn:hover {
    background-color: var(--hover-bg);
    border-color: var(--pulse-primary);
    color: var(--pulse-primary-light);
    box-shadow: none;
    font-weight: 500;
}

/* Enhanced File/Link/Demo Items */
.dark-mode .file-item,
.dark-mode .link-item,
.dark-mode .demo-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
    box-shadow: 0 1px 3px var(--shadow);
}

.dark-mode .file-item:hover,
.dark-mode .link-item:hover,
.dark-mode .demo-item:hover {
    background-color: var(--hover-bg);
    border-color: var(--pulse-primary);
    box-shadow: 0 1px 3px var(--shadow);
    transform: translateY(-1px);
}

.dark-mode .file-item:hover .file-name,
.dark-mode .link-item:hover .link-title,
.dark-mode .demo-item:hover .demo-title {
    color: var(--pulse-primary-light);
}

/* Enhanced Stat Cards */
.dark-mode .stat-card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--text-primary);
    box-shadow: 0 1px 3px var(--shadow);
    overflow: visible;
}

.dark-mode .stat-card::before {
    background: var(--card-bg);
    opacity: 0.75;
}

.dark-mode .stat-card:hover {
    box-shadow: 0 2px 6px var(--shadow);
    border-color: var(--pulse-primary);
    transform: translateY(-1px);
    background-color: var(--hover-bg);
}

.dark-mode .stat-card .stat-value,
.dark-mode .stat-card .stat-number {
    color: var(--pulse-primary-light);
    font-weight: 700;
}

.dark-mode .stat-card .stat-label {
    color: var(--text-secondary);
}

/* Enhanced Dropdowns */
.dark-mode .action-dropdown-toggle {
    background-color: transparent;
    border: none;
    color: var(--text-tertiary);
}

.dark-mode .action-dropdown-toggle:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.dark-mode .action-dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark-mode .action-dropdown-menu::before {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: none;
    border-right: none;
}

.dark-mode .action-dropdown-item {
    color: var(--text-primary);
    background: transparent;
}

.dark-mode .action-dropdown-item:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.dark-mode .action-dropdown-item .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .action-dropdown-item:hover .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .action-dropdown-item.preview:hover .material-icons,
.dark-mode .action-dropdown-item.download:hover .material-icons,
.dark-mode .action-dropdown-item.edit:hover .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .action-dropdown-item.delete:hover {
    background-color: rgba(220, 38, 38, 0.1);
    color: #f87171;
}

.dark-mode .action-dropdown-item.delete:hover .material-icons {
    color: #f87171;
}

.dark-mode .action-menu-toggle {
    background-color: transparent;
    color: var(--text-tertiary);
}

.dark-mode .action-menu-toggle:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.dark-mode .action-menu-dropdown {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark-mode .action-menu-item {
    color: var(--text-primary);
    background: transparent;
}

.dark-mode .action-menu-item:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.dark-mode .action-menu-item .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .action-menu-item:hover .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .action-menu-item.delete:hover {
    background-color: rgba(220, 38, 38, 0.1);
    color: #f87171;
}

.dark-mode .action-menu-item.delete:hover .material-icons {
    color: #f87171;
}

/* Enhanced Activity Items */
.dark-mode .activity-item {
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .activity-item:hover {
    background-color: var(--bg-tertiary);
}

/* Enhanced File Meta Information */
.dark-mode .file-name {
    color: var(--text-primary);
}

.dark-mode .file-meta {
    color: var(--text-secondary);
}

/* Enhanced Links - High contrast */
.dark-mode a {
    color: var(--pulse-primary-light);
    font-weight: 500;
}

.dark-mode a:hover {
    color: var(--pulse-primary);
    text-decoration: none;
}

.dark-mode .nav-tabs .nav-link,
.dark-mode .nav-tabs .nav-link:hover,
.dark-mode .nav-tabs .nav-link.active {
    text-decoration: none;
}

/* Enhanced Separators and Borders */
.dark-mode hr {
    border-color: var(--border-color);
}

.dark-mode .border,
.dark-mode .border-top,
.dark-mode .border-bottom,
.dark-mode .border-left,
.dark-mode .border-right {
    border-color: var(--border-color) !important;
}

/* Enhanced Code Blocks */
.dark-mode code,
.dark-mode pre {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* LinkedIn Recent Posts - Gradient Fade */
.post-content-fade {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.dark-mode .post-content-fade {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--card-bg));
}

/* Enhanced LinkedIn Section */
.dark-mode #linkedin-section .btn-group [id="linkedinToggleMe"],
.dark-mode #linkedin-section .btn-group [id="linkedinToggleOrg"] {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode #linkedin-section .btn-group [id="linkedinToggleMe"].active,
.dark-mode #linkedin-section .btn-group [id="linkedinToggleOrg"].active {
    background: var(--pulse-primary);
    color: #ffffff;
    box-shadow: none;
}

.dark-mode #linkedin-section .btn-group [id="linkedinToggleMe"]:hover,
.dark-mode #linkedin-section .btn-group [id="linkedinToggleOrg"]:hover {
    background: var(--hover-bg);
    border-color: var(--pulse-primary);
    color: var(--pulse-primary-light);
}

/* Enhanced Document Preview */
.dark-mode #documentPreviewEditor .ql-editor {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.dark-mode #documentPreviewEditor .ql-editor table td,
.dark-mode #documentPreviewEditor .ql-editor table th {
    border-color: var(--border-color);
}

.dark-mode #documentPreviewEditor .ql-editor table th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.dark-mode #documentPreviewEditor .ql-editor h2,
.dark-mode #documentPreviewEditor .ql-editor h3 {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* Enhanced Scrollbars */
.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

/* Enhanced Focus States */
.dark-mode *:focus {
    outline-color: var(--pulse-primary);
}

.dark-mode *:focus-visible {
    outline-offset: 2px;
    box-shadow: none;
}

/* Enhanced Selection */
.dark-mode ::selection {
    background-color: var(--pulse-primary);
    color: #ffffff;
}

.dark-mode ::-moz-selection {
    background-color: var(--pulse-primary);
    color: #ffffff;
}

/* Enhanced Loading Spinner */
.dark-mode .loading-spinner span {
    background: #2196F3; /* Blue for dark mode */
}

/* Enhanced Error Messages */
.dark-mode .alert-danger,
.dark-mode .login-error-message {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* Enhanced Success Messages */
.dark-mode .alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

/* Enhanced Info Messages */
.dark-mode .alert-info {
    background-color: rgba(33, 150, 243, 0.15);
    border-color: rgba(33, 150, 243, 0.4);
    color: var(--pulse-primary-light);
}

/* Enhanced Warning Messages */
.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffd54f;
}

.dark-mode .alert-warning small,
.dark-mode .alert-warning .small {
    color: #ffd54f !important;
}

.dark-mode .alert-warning strong {
    color: #ffd54f !important;
}

/* Enhanced Tooltips */
.dark-mode [data-tooltip],
.dark-mode [title] {
    color: var(--text-primary);
}

/* Enhanced Empty States */
.dark-mode .empty-state {
    color: var(--text-secondary);
}

.dark-mode .empty-state-icon {
    color: var(--text-tertiary);
}

/* Ensure transitions are smooth */
.dark-mode * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Chatbot Styles */
.chatbot-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pulse-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1031;
    transition: all 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Desktop footer chatbot wrapper */
.desktop-footer .chatbot-toggle-btn {
    position: static;
    bottom: auto;
    right: auto;
    margin-left: auto;
}

.chatbot-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.chatbot-toggle-btn:active {
    transform: scale(0.95);
}

.chatbot-toggle-btn .material-icons {
    font-size: 28px;
}

.chatbot-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 400px;
    max-width: calc(100vw - 48px);
    height: 600px;
    max-height: calc(100vh - 48px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 1001;
    overflow: hidden;
}

.dark-mode .chatbot-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.chatbot-container:focus-visible {
    outline: 2px solid #e801ca;
    outline-offset: 2px;
}

.chatbot-header {
    background: var(--pulse-primary);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.chatbot-header h6 {
    color: white;
    font-weight: 600;
}

.chatbot-header .btn-link {
    color: white;
    opacity: 0.9;
    text-decoration: none !important;
    border: none !important;
}

.chatbot-header .btn-link:hover {
    opacity: 1;
    text-decoration: none !important;
    border: none !important;
}

.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    min-height: 0; /* Allows flex child to shrink below content size */
    scroll-behavior: smooth;
    flex-shrink: 1; /* Allow messages area to shrink if needed */
}

.chatbot-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.chatbot-welcome .material-icons {
    font-size: 48px;
    color: var(--pulse-primary);
    opacity: 0.7;
}

.chatbot-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: fadeIn 0.3s ease;
}

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

.chatbot-message-user {
    align-self: flex-end;
}

.chatbot-message-ai {
    align-self: flex-start;
}

.chatbot-message-content {
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
    line-height: 1.5;
}

.chatbot-message-user .chatbot-message-content {
    background: var(--pulse-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.chatbot-message-ai .chatbot-message-content {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.dark-mode .chatbot-message-ai .chatbot-message-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.chatbot-message-ai-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.chatbot-message-ai .chatbot-message-ai-wrapper .chatbot-message-content {
    flex: 1;
    max-width: calc(100% - 40px);
}

.chatbot-message-content a {
    color: var(--pulse-primary);
    text-decoration: none;
}

.chatbot-message-user .chatbot-message-content a {
    color: white;
    opacity: 0.9;
}

.chatbot-message-content strong {
    font-weight: 600;
}

.chatbot-message-content code {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.dark-mode .chatbot-message-content code {
    background: rgba(255, 255, 255, 0.1);
}

.chatbot-typing {
    display: flex;
    gap: 4px;
    padding: 8px 0;
}

.chatbot-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    animation: typing 1.4s infinite;
}

.chatbot-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.chatbot-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.chatbot-input-container {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-primary);
    position: relative;
    z-index: 1002;
}

.chatbot-input-container .input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chatbot-input-container .form-control {
    flex: 1;
    border-radius: 24px;
    border: 1px solid var(--border-color) !important;
    padding: 10px 16px;
    outline: none;
    box-shadow: none;
    font-size: 16px; /* Prevents zoom on iOS */
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
}

.chatbot-input-container .form-control:focus {
    border: 1px solid var(--pulse-primary) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    outline: none;
}

.chatbot-input-container .btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chatbot-input-container .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    /* Hide desktop footer on mobile/tablet */
    .desktop-footer {
        display: none !important;
    }
    
    /* Show mobile footer on mobile/tablet */
    .mobile-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        padding: 0.75rem 0;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
        z-index: 1030;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Hide floating chatbot button on mobile/tablet (it's in the footer) */
    .chatbot-toggle-btn:not(.mobile-chatbot-wrapper .chatbot-toggle-btn) {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Additional mobile-specific adjustments */
    
    .mobile-footer .footer-container {
        width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .mobile-footer .pulse-ai-footer-logo {
        position: static;
        opacity: 1;
        background: none;
        padding: 0;
        border: none;
        box-shadow: none;
        flex: 1;
    }
    
    .mobile-footer .pulse-ai-footer-logo img {
        height: 40px; /* Larger logo on mobile */
        margin-right: 0.375rem;
    }
    
    .mobile-footer .pulse-ai-footer-logo .copyright {
        font-size: 0.55rem;
    }
    
    .mobile-chatbot-wrapper {
        display: flex !important;
        align-items: center;
        flex-shrink: 0;
    }
    
    .mobile-chatbot-wrapper .chatbot-toggle-btn {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        margin-left: 0.75rem;
        display: flex !important;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mobile-chatbot-wrapper .chatbot-toggle-btn .material-icons {
        font-size: 24px;
        display: inline-block !important;
    }
    
    .chatbot-container {
        width: 100vw;
        height: 100dvh; /* Use dynamic viewport height for mobile browsers */
        max-width: 100vw;
        max-height: 100dvh;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Support for devices with safe areas (notches, etc.) */
    @supports (padding: max(0px)) {
        .chatbot-container {
            height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
            top: env(safe-area-inset-top);
            left: env(safe-area-inset-left);
            right: env(safe-area-inset-right);
            bottom: env(safe-area-inset-bottom);
        }
    }
    
    .chatbot-header {
        padding: 12px 16px;
        border-radius: 0;
    }
    
    .chatbot-messages {
        padding: 16px;
        gap: 12px;
    }
    
    .chatbot-input-container {
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        border-radius: 0;
        background: var(--bg-primary);
        border-top: 2px solid var(--border-color);
        position: relative;
        z-index: 1002;
        flex-shrink: 0;
        flex-grow: 0;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: fit-content;
        margin-top: auto; /* Push to bottom of flex container */
    }
    
    .chatbot-input-container .input-group {
        display: flex !important;
        gap: 10px;
        align-items: center;
        width: 100%;
        visibility: visible !important;
    }
    
    .chatbot-input-container .form-control {
        font-size: 16px; /* Prevents zoom on iOS when focusing */
        padding: 14px 18px;
        border: 2px solid var(--border-color) !important;
        border-radius: 28px;
        background: var(--card-bg);
        min-height: 56px;
        flex: 1;
        -webkit-appearance: none;
        appearance: none;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .chatbot-input-container .form-control:focus {
        border: 2px solid var(--pulse-primary) !important;
        box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
        outline: none;
    }
    
    .chatbot-input-container .btn {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        flex-shrink: 0;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .chatbot-input-container .btn .material-icons {
        font-size: 24px;
        display: inline-block !important;
    }
    
    .chatbot-message {
        max-width: 90%;
    }
    
    .chatbot-message-content {
        padding: 10px 14px;
        font-size: 0.95rem;
    }
    
    .chatbot-welcome {
        padding: 30px 16px;
    }
    
    .chatbot-welcome .material-icons {
        font-size: 40px;
    }
    
    .chatbot-toggle-btn {
        width: 52px;
        height: 52px;
        bottom: 20px;
        right: 20px;
    }
    
    .chatbot-toggle-btn .material-icons {
        font-size: 26px;
    }
    
    /* Add bottom padding to main content to account for mobile footer */
    .main-content {
        padding-bottom: 80px;
    }
}

/* Tablet optimizations (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Ensure mobile footer is visible on tablet */
    .mobile-footer {
        display: block !important;
    }
    
    .desktop-footer {
        display: none !important;
    }
    
    .mobile-chatbot-wrapper {
        display: flex !important;
        align-items: center;
        flex-shrink: 0;
    }
    
    .mobile-chatbot-wrapper .chatbot-toggle-btn {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        display: flex !important;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    
    .chatbot-container {
        width: 450px;
        max-width: calc(100vw - 48px);
        height: 650px;
        max-height: calc(100vh - 48px);
    }
    
    .chatbot-messages {
        padding: 18px;
    }
    
    .chatbot-message {
        max-width: 80%;
    }
    
    .chatbot-input-container {
        padding: 16px 20px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        border-top: 2px solid var(--border-color);
        background: var(--bg-primary);
        position: relative;
        z-index: 1002;
        flex-shrink: 0;
        display: flex !important;
    }
    
    .chatbot-input-container .input-group {
        display: flex !important;
    }
    
    .chatbot-input-container .form-control {
        font-size: 16px;
        padding: 12px 18px;
        border: 2px solid var(--border-color) !important;
        border-radius: 26px;
        min-height: 52px;
        display: block !important;
    }
    
    .chatbot-input-container .form-control:focus {
        border: 2px solid var(--pulse-primary) !important;
        box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
    }
    
    .chatbot-input-container .btn {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        display: flex !important;
    }
    
    .chatbot-input-container .btn .material-icons {
        font-size: 22px;
    }
}

/* Fix dropdown menu z-index in tables */
.table-responsive .dropdown,
.table .dropdown {
    position: relative;
}

.table-responsive .dropdown-menu,
.table .dropdown-menu {
    z-index: 1050;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 0.125rem;
}

/* Admin panel dropdown z-index fix - similar to document center */
.table tbody tr td:last-child {
    overflow: visible !important;
    position: relative;
    z-index: 0;
}

.table tbody tr td:last-child .dropdown {
    position: relative !important;
    z-index: 1;
}

.table tbody tr td:last-child .dropdown.menu-open {
    z-index: 999999 !important;
    position: relative !important;
}

.table tbody tr td:last-child .dropdown.menu-open .dropdown-menu {
    z-index: 999999 !important;
}

.table.has-open-dropdown .dropdown:not(.menu-open) {
    z-index: 0 !important;
}

.table.has-open-dropdown tbody tr.dropdown-inactive {
    z-index: 0 !important;
    position: relative;
}

.table.has-open-dropdown tbody tr.dropdown-active {
    z-index: 999998 !important;
    position: relative;
}

.table.has-open-dropdown tbody tr.dropdown-inactive .dropdown {
    z-index: 0 !important;
}

/* Remove text decoration from all links, but keep color */
a {
    text-decoration: none !important;
    color: var(--pulse-primary) !important;
}

a:hover {
    text-decoration: none !important;
    color: var(--pulse-primary) !important;
    opacity: 0.9;
}

/* ============================================
   GLOBAL ICON SPACING STANDARD
   ============================================
   Icons by themselves: 0 margin-right
   Icons with text: 0.5rem margin-right
   ============================================ */

/* Base rule: All material-icons - margin-right removed, can be added back selectively */
.material-icons {
}

/* All icons in buttons - margin-right removed */
button .material-icons,
.btn .material-icons {
}

/* Menu items - icons - margin-right removed */
.action-menu-item .material-icons,
.action-dropdown-item .material-icons,
.dropdown-item .material-icons,
.offcanvas-settings-item .material-icons,
.offcanvas-nav-link .material-icons,
.nav-link .material-icons {
}

/* Ensure dropdown items display icons and text properly - match action-menu-item styling exactly */
.dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important; /* Match action-menu-item gap */
    padding: 0.75rem 1rem !important; /* Match action-menu-item padding */
    color: var(--pulse-gray-700) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    background: none !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
}

.dropdown-item:hover {
    background-color: var(--pulse-gray-50) !important;
    color: var(--pulse-gray-900) !important;
}

.dropdown-item .material-icons {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important; /* Remove margin, use gap instead */
    font-size: 1.125rem !important;
    color: var(--pulse-primary) !important;
    transition: color 0.2s ease !important;
}

.dropdown-item:hover .material-icons {
    color: var(--pulse-primary) !important;
}

.dropdown-item.text-danger:hover {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}

.dropdown-item.text-danger:hover .material-icons {
    color: #dc2626 !important;
}

/* Dark mode styles for dropdown items - match action-dropdown-item */
.dark-mode .dropdown-item {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.dark-mode .dropdown-item:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .dropdown-item .material-icons {
    color: var(--pulse-primary) !important;
}

.dark-mode .dropdown-item:hover .material-icons {
    color: var(--pulse-primary) !important;
}

.dark-mode .dropdown-item.text-danger:hover {
    background-color: rgba(220, 38, 38, 0.1) !important;
    color: #f87171 !important;
}

.dark-mode .dropdown-item.text-danger:hover .material-icons {
    color: #f87171 !important;
}

/* Standalone icons (only child) - no margin */
button .material-icons:only-child,
.btn .material-icons:only-child,
.action-menu-toggle .material-icons:only-child,
.action-dropdown-toggle .material-icons:only-child {
    margin-right: 0 !important;
}

/* Admin Action Dropdown - Match ActionDropdown style */
.admin-action-dropdown {
    position: relative;
    display: inline-block;
    z-index: 1000;
}

.admin-action-dropdown:has(.admin-action-menu.show) {
    z-index: 999999 !important;
}

.admin-action-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
    transition: all 0.2s ease;
    color: var(--pulse-gray-600);
}

.admin-action-toggle:hover {
    background-color: var(--pulse-gray-100);
    color: var(--pulse-gray-800);
    transform: scale(1.05);
}

.admin-action-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.admin-action-toggle .material-icons {
    font-size: 20px;
    margin: 0;
}

.dark-mode .admin-action-toggle {
    color: var(--pulse-gray-400);
}

.dark-mode .admin-action-toggle:hover {
    background-color: var(--pulse-gray-700);
    color: var(--pulse-gray-200);
}

.admin-action-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--pulse-gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}

.admin-action-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 999999 !important;
}

.dark-mode .admin-action-menu {
    background: var(--pulse-gray-800);
    border-color: var(--pulse-gray-600);
}

.admin-action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--pulse-gray-700);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.admin-action-item:hover {
    background-color: var(--pulse-gray-50);
    color: var(--pulse-gray-900);
}

.dark-mode .admin-action-item {
    color: var(--pulse-gray-200);
}

.dark-mode .admin-action-item:hover {
    background-color: var(--pulse-gray-700);
    color: var(--pulse-gray-100);
}

.admin-action-item .material-icons {
    font-size: 1.125rem;
    color: var(--pulse-primary);
    transition: color 0.2s ease;
    margin: 0;
}

.admin-action-item:hover .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .admin-action-item .material-icons {
    color: var(--pulse-primary);
}

.dark-mode .admin-action-item:hover .material-icons {
    color: var(--pulse-primary);
}

.admin-action-item.delete:hover .material-icons {
    color: #dc2626;
}

.dark-mode .admin-action-item.delete:hover .material-icons {
    color: #f87171;
}

.admin-action-item.delete:hover {
    color: #dc2626;
}

.dark-mode .admin-action-item.delete:hover {
    color: #f87171;
}

/* Fix z-index for document cards */
.document-card {
    position: relative;
    z-index: 1;
}

.document-card:has(.action-dropdown.menu-open) {
    z-index: 999998 !important;
}

.document-card .action-dropdown.menu-open {
    z-index: 999999 !important;
    position: relative;
}

.document-card .action-dropdown-menu.show {
    z-index: 999999 !important;
}

/* Override any inline styles or Bootstrap utilities for consistency */
.material-icons.me-2:not(:only-child),
.material-icons.me-3:not(:only-child),
.material-icons.me-4:not(:only-child) {
    margin-right: 0.5rem !important;
}

/* Icons in buttons - margin-right removed */
.btn .material-icons {
    margin-right: .25rem !important;
}

/* Blog Publish Destinations - Dark Mode Support */
.blog-publish-destinations {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.dark-mode .blog-publish-destinations {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.dark-mode .blog-publish-destinations .form-label {
    color: var(--text-primary);
}

.dark-mode .blog-publish-destinations .form-check-label {
    color: var(--text-secondary);
}

.dark-mode .blog-publish-destinations .text-muted {
    color: var(--text-tertiary) !important;
}

/* Remove any extra spacing/gaps inside buttons with icons */
.btn:has(.material-icons:not(:only-child)) {
    gap: 0 !important;
}

/* Admin Panel - Mobile/Tablet Card Views */
/* Hide card view on desktop, show table */
@media (min-width: 1025px) {
    .admin-card-view {
        display: none !important;
    }
    .admin-table-view {
        display: block !important;
    }
}

/* Admin Module Access Table - Dark Mode */
.dark-mode .admin-table-module-header {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .admin-table-user-header,
.dark-mode .admin-table-user-cell {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .admin-table-view .table thead th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .admin-table-view .table tbody td {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .admin-table-view .table tbody tr:hover td {
    background-color: var(--hover-bg) !important;
}

.dark-mode .admin-table-view .table tbody tr:hover .admin-table-user-cell {
    background-color: var(--hover-bg) !important;
}

/* Fix checkmark centering */
.admin-module-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.admin-module-check .material-icons {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Show card view on mobile/tablet, hide table */
@media (max-width: 1024px) {
    .admin-card-view {
        display: block !important;
    }
    .admin-table-view {
        display: none !important;
    }
}

/* Admin User Cards */
.admin-user-card {
    border: 1px solid var(--pulse-gray-200);
    border-radius: 8px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.admin-user-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.dark-mode .admin-user-card {
    border-color: var(--pulse-gray-600);
    background: var(--pulse-gray-800);
    color: var(--pulse-gray-100);
}

.dark-mode .admin-user-card .card-body {
    background: transparent;
}

.dark-mode .admin-user-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    border-color: var(--pulse-gray-500);
    background: var(--pulse-gray-700);
}

.admin-card-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pulse-gray-200);
}

.dark-mode .admin-card-details {
    border-top-color: var(--pulse-gray-600);
}

.admin-card-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.admin-card-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--pulse-gray-600);
    font-weight: 500;
}

.admin-card-label .material-icons {
    font-size: 1rem;
}

.dark-mode .admin-card-label {
    color: var(--pulse-gray-400);
}

.admin-card-value {
    font-size: 0.875rem;
    color: var(--pulse-gray-800);
    text-align: right;
    flex: 1;
}

.dark-mode .admin-card-value {
    color: var(--pulse-gray-200);
}

/* Admin Module Cards */
.admin-module-card {
    border: 1px solid var(--pulse-gray-200);
    border-radius: 8px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.admin-module-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.dark-mode .admin-module-card {
    border-color: var(--pulse-gray-600);
    background: var(--pulse-gray-800);
    color: var(--pulse-gray-100);
}

.dark-mode .admin-module-card .card-body {
    background: transparent;
}

.dark-mode .admin-module-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    border-color: var(--pulse-gray-500);
    background: var(--pulse-gray-700);
}

.admin-module-access-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--pulse-gray-200);
}

.dark-mode .admin-module-access-grid {
    border-top-color: var(--pulse-gray-600);
}

.admin-module-item {
    padding: 0;
    background: transparent;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}

.dark-mode .admin-module-item {
    background: transparent;
    border: none;
}

.dark-mode .admin-module-item:hover {
    background: transparent;
    border-color: transparent;
}

.admin-module-item .admin-card-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--pulse-gray-600);
    font-weight: 500;
    flex: 1;
}

.dark-mode .admin-module-item .admin-card-label {
    color: var(--pulse-gray-400);
}

.admin-module-icon {
    font-size: 1rem !important;
    margin-right: 0;
    color: var(--pulse-gray-600);
}

.dark-mode .admin-module-icon {
    color: var(--pulse-gray-400);
}

.admin-module-item .badge {
    margin-left: auto;
    flex-shrink: 0;
}

/* Documents - Mobile/Tablet Card Views */
/* Hide card view on desktop, show table */
@media (min-width: 1025px) {
    .documents-card-view {
        display: none !important;
    }
    .documents-table-view {
        display: block !important;
    }
}

/* Show card view on mobile/tablet, hide table */
@media (max-width: 1024px) {
    .documents-card-view {
        display: block !important;
    }
    .documents-table-view {
        display: none !important;
    }
}

/* Document Cards */
.document-card {
    border: 1px solid var(--pulse-gray-200);
    border-radius: 8px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.document-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.dark-mode .document-card {
    border-color: var(--pulse-gray-600);
    background: var(--pulse-gray-800);
    color: var(--pulse-gray-100);
}

.dark-mode .document-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    border-color: var(--pulse-gray-500);
    background: var(--pulse-gray-700);
}

.document-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pulse-gray-900);
    margin-bottom: 0.25rem;
}

.dark-mode .document-card .card-title {
    color: var(--pulse-gray-100);
}

.document-card .card-text {
    font-size: 0.875rem;
    color: var(--pulse-gray-600);
}

.dark-mode .document-card .card-text {
    color: var(--pulse-gray-400);
}

/* Touch-friendly improvements for mobile */
@media (max-width: 1024px) {
    .admin-user-card,
    .admin-module-card,
    .document-card {
        margin-bottom: 0;
    }
    
    .admin-card-detail-item,
    .admin-module-item {
        min-height: 44px; /* Minimum touch target */
        display: flex;
        align-items: center;
    }
    
    .document-card .card-body {
        padding: 1rem;
    }
}

/* Blog Posts Mobile/Tablet View */
/* Blog table: keep Actions column and menu container from breaking */
.blog-posts-table-view .table thead th:last-child,
.blog-posts-table-view .table tbody tr td:last-child {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.blog-posts-table-view .table tbody tr td:last-child .action-menu {
    display: inline-block;
    vertical-align: middle;
}

/* Hide card view on desktop, show table */
@media (min-width: 1025px) {
    .blog-posts-card-view {
        display: none !important;
    }
    .blog-posts-table-view {
        display: block !important;
    }
}

/* Show card view on mobile/tablet, hide table */
@media (max-width: 1024px) {
    .blog-posts-card-view {
        display: block !important;
    }
    .blog-posts-table-view {
        display: none !important;
    }
}

/* Blog Creator Mobile Button Styles */
/* All blog creator icons - margin-right removed */
.blog-view-icon,
.blog-create-icon,
.blog-ai-icon,
.blog-preview-icon,
.marketing-back-icon {
}

/* Hide text and remove icon margin on mobile only (≤576px) */
/* Note: blog-view-text (Manage Posts button) stays visible on all screen sizes */
@media (max-width: 576px) {
    .blog-create-text,
    .blog-ai-text,
    .blog-preview-text,
    .marketing-back-text {
        display: none !important;
    }
    
    /* Margin-right removed for all icon-only buttons on mobile */
    /* Can be added back selectively if needed */
    
    /* Ensure 50/50 split for view buttons */
    .blog-view-buttons {
        max-width: 100% !important;
    }
    .blog-view-buttons .btn {
        flex: 1 1 50%;
        min-width: 0;
    }
}

/* LinkedIn Generate Button - Hide text on mobile/tablet */
@media (max-width: 768px) {
    .linkedin-generate-text {
        display: none !important;
    }
}

/* Blog Creator Filter Spacing - Mobile/Tablet */
@media (max-width: 1024px) {
    .blog-filters-row {
        margin-bottom: 1rem !important;
    }
    
    .blog-filter-col {
        margin-bottom: 0.75rem;
    }
    
    .blog-filter-col:last-child {
        margin-bottom: 0;
    }
    
    .blog-posts-count {
        display: block;
        text-align: left !important;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
}

@media (max-width: 768px) {
    .blog-filters-row {
        margin-bottom: 1rem !important;
    }
    
    .blog-filter-col {
        margin-bottom: 1rem;
    }
    
    .blog-filter-col:last-child {
        margin-bottom: 0;
    }
    
    .blog-posts-count {
        display: block;
        text-align: left !important;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }
}

@media (max-width: 768px) {
    .admin-user-card .card-body,
    .admin-module-card .card-body {
        padding: 1rem;
    }
    
    .admin-card-details {
        gap: 0;
    }
    
    .admin-module-access-grid {
        gap: 0;
    }
    
    .document-card .card-body {
        padding: 1rem;
    }
}

/* Documents Header and Filters - Responsive */
.documents-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.documents-header-title {
    flex-shrink: 0;
}

.documents-filters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.documents-search-group {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.documents-filter-select {
    min-width: 140px;
    flex: 0 0 auto;
    font-size: 0.875rem;
    width: auto;
}

/* Desktop: Keep filters inline, not full width */
@media (min-width: 1025px) {
    .documents-filters {
        flex-direction: row;
        width: auto;
    }
    
    .documents-filter-select {
        width: auto;
        max-width: 200px;
    }
}

/* Mobile optimizations for filters */
@media (max-width: 1024px) {
    .documents-header-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .documents-header-title {
        margin-bottom: 0.5rem;
    }
    
    .documents-filters {
        width: 100%;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .documents-search-group {
        width: 100%;
        max-width: 100%;
    }
    
    .documents-filter-select {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .documents-filters {
        gap: 0.5rem;
    }
    
    .documents-search-group {
        min-width: 100%;
    }
    
    .documents-filter-select {
        min-width: 100%;
    }
}

/* Dark mode improvements for card headers and filters */
.dark-mode .documents-header-container {
    color: var(--pulse-gray-100);
}

.dark-mode .documents-search-group .input-group-text {
    background: var(--pulse-gray-700) !important;
    border-color: var(--pulse-gray-600) !important;
    color: var(--pulse-gray-200);
}

.dark-mode .documents-search-group .form-control {
    background: var(--pulse-gray-800) !important;
    border-color: var(--pulse-gray-600) !important;
    color: var(--pulse-gray-100) !important;
}

.dark-mode .documents-search-group .form-control::placeholder {
    color: var(--pulse-gray-500) !important;
}

.dark-mode .documents-filter-select {
    background: var(--pulse-gray-800) !important;
    border-color: var(--pulse-gray-600) !important;
    color: var(--pulse-gray-100) !important;
}

.dark-mode .documents-filter-select option {
    background: var(--pulse-gray-800);
    color: var(--pulse-gray-100);
}

/* Additional dark mode card improvements */
.dark-mode .admin-user-card .card-body,
.dark-mode .admin-module-card .card-body,
.dark-mode .document-card .card-body {
    color: var(--pulse-gray-100);
}

.dark-mode .admin-user-card .card-title,
.dark-mode .admin-module-card .card-title {
    color: var(--pulse-gray-100);
}

.dark-mode .admin-user-card .card-text,
.dark-mode .admin-module-card .card-text {
    color: var(--pulse-gray-300);
}

/* Dashboard KPI Grid - 2x2 layout */
/* Document Creator Preview Styling */
.document-preview {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.document-preview h1,
.document-preview h2,
.document-preview h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #333;
}

.document-preview h1 {
    font-size: 28px;
    border-bottom: 3px solid #636fe8;
    padding-bottom: 10px;
}

.document-preview h2 {
    font-size: 24px;
    border-bottom: 3px solid #636fe8;
    padding-bottom: 10px;
}

.document-preview h3 {
    font-size: 18px;
    border-bottom: 2px solid #636fe8;
    padding-bottom: 6px;
}

.document-preview p {
    margin-bottom: 12px;
    line-height: 1.6;
}

.document-preview ul,
.document-preview ol {
    margin-bottom: 16px;
    padding-left: 30px;
}

.document-preview li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.document-preview strong {
    font-weight: 600;
}

.document-preview em {
    font-style: italic;
}

.dark-mode .document-preview {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .document-preview h1,
.dark-mode .document-preview h2,
.dark-mode .document-preview h3 {
    color: var(--text-primary);
    border-bottom-color: var(--pulse-primary);
}

.dark-mode .document-preview pre,
.dark-mode .document-preview code {
    background-color: var(--code-bg) !important;
    color: var(--text-primary) !important;
}

/* Quill Editor Styles for Admin Welcome Messages */
.welcome-message-editor-wrapper {
    background-color: var(--card-bg, #ffffff);
}

.dark-mode .welcome-message-editor-wrapper {
    background-color: var(--card-bg) !important;
}

.dark-mode .ql-toolbar {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .ql-toolbar .ql-stroke {
    stroke: var(--text-primary) !important;
}

.dark-mode .ql-toolbar .ql-fill {
    fill: var(--text-primary) !important;
}

.dark-mode .ql-toolbar button:hover,
.dark-mode .ql-toolbar button.ql-active {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .ql-container {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .ql-editor {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .ql-editor.ql-blank::before {
    color: var(--text-tertiary) !important;
}

.dark-mode .ql-snow .ql-picker {
    color: var(--text-primary) !important;
}

.dark-mode .ql-snow .ql-picker-options {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .ql-snow .ql-picker-item:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

.dashboard-kpis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dashboard-kpis-grid .stat-card {
    padding: 1.25rem 1rem;
    min-height: 100px;
}

.dashboard-kpis-grid .stat-number {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.dashboard-kpis-grid .stat-label {
    font-size: 0.8rem;
}

.dashboard-kpis-grid .clickable-stat-card {
    transition: all 0.2s ease;
}

.dashboard-kpis-grid .clickable-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    border-color: var(--pulse-primary);
}

.dark-mode .dashboard-kpis-grid .clickable-stat-card:hover {
    box-shadow: 0 6px 16px var(--shadow-lg);
    border-color: var(--pulse-primary);
    background-color: var(--hover-bg);
}

/* Admin Stats Table - Clean Design */
.admin-stats-table {
    background-color: transparent;
}

.admin-stats-row {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-color) !important;
}

.admin-stats-row:last-child {
    border-bottom: none !important;
}

.admin-stats-row:hover {
    background-color: var(--bg-tertiary);
}

.dark-mode .admin-stats-row:hover {
    background-color: var(--bg-secondary);
}

.admin-stats-row td {
    padding: 0.875rem 0.5rem !important;
    vertical-align: middle;
}

.admin-stats-icon {
    font-size: 1.125rem !important;
    color: var(--pulse-primary) !important;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.admin-stats-label {
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    vertical-align: middle;
}

.admin-stats-count {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    vertical-align: middle;
}

.admin-stats-row:hover .admin-stats-icon {
    transform: scale(1.1);
}

/* File Upload Drag and Drop Zone */
.file-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--card-bg);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-drop-zone:hover {
    border-color: var(--pulse-primary);
    background-color: var(--hover-bg);
}

.file-drop-zone.dragging {
    border-color: var(--pulse-primary);
    background-color: var(--hover-bg);
    border-style: solid;
    transform: scale(1.02);
}

.drop-zone-content {
    pointer-events: none;
}

.file-drop-zone .btn {
    pointer-events: all;
}

.file-list {
    max-height: 400px;
    overflow-y: auto;
}

.file-item {
    background-color: var(--card-bg);
    transition: all 0.2s ease;
}

.file-item:hover {
    background-color: var(--hover-bg);
}

.file-item.border-success {
    background-color: rgba(40, 167, 69, 0.1);
}

.file-item.border-danger {
    background-color: rgba(220, 53, 69, 0.1);
}

.dark-mode .file-drop-zone {
    border-color: var(--border-color);
    background-color: var(--card-bg);
}

.dark-mode .file-drop-zone:hover,
.dark-mode .file-drop-zone.dragging {
    border-color: var(--pulse-primary);
    background-color: var(--hover-bg);
}

.dark-mode .file-item.border-success {
    background-color: rgba(40, 167, 69, 0.15);
}

.dark-mode .file-item.border-danger {
    background-color: rgba(220, 53, 69, 0.15);
}

/* Welcome Message Section */
.welcome-message-section {
    width: 100%;
}

.welcome-message-item {
    margin-bottom: 1.5rem;
}

.welcome-message-item:last-child {
    margin-bottom: 0;
}

.welcome-message-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.welcome-message-content {
    color: var(--text-secondary);
    line-height: 1.6;
}

.welcome-message-content p {
    margin-bottom: 0.75rem;
}

.welcome-message-content p:last-child {
    margin-bottom: 0;
}

.welcome-message-image {
    border-radius: 8px;
    overflow: hidden;
}

.recent-wins-section {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.recent-wins-section h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.recent-win-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.recent-win-item:last-child {
    border-bottom: none;
}

.recent-win-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Responsive adjustments for mobile/tablet */
@media (max-width: 767.98px) {
    .dashboard-kpis-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    
    .dashboard-kpis-grid .stat-card {
        padding: 1rem 0.75rem;
        min-height: 90px;
    }
    
    .dashboard-kpis-grid .stat-number {
        font-size: 1.75rem;
    }
    
    .dashboard-kpis-grid .stat-label {
        font-size: 0.75rem;
    }
    
    .welcome-message-title {
        font-size: 1.25rem;
    }
    
    .welcome-message-content {
        font-size: 0.9rem;
    }
}

/* Dark mode adjustments */
.dark-mode .welcome-message-title {
    color: var(--text-primary);
}

.dark-mode .welcome-message-content {
    color: var(--text-secondary);
}

.dark-mode .recent-wins-section {
    border-top-color: var(--border-color);
}

.dark-mode .recent-win-item {
    border-bottom-color: var(--border-color);
}

.dark-mode .recent-win-item strong {
    color: var(--text-primary);
}

/* Notification Badge */
.notification-toggle {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #dc3545;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    border: 2px solid var(--card-bg);
}

.dark-mode .notification-badge {
    border-color: var(--card-bg);
}

/* Image preview with transparent background support */
.image-preview-container-preview {
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 0;
    overflow: hidden;
}

.dark-mode .image-preview-container-preview {
    background-image: linear-gradient(45deg, #2a2a2a 25%, transparent 25%), 
                      linear-gradient(-45deg, #2a2a2a 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #2a2a2a 75%), 
                      linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
    background-color: #1a1a1a;
}

/* Image Error Alert Styling */
.image-error-alert {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    border-radius: 0.375rem;
}

.image-error-alert > span {
    flex: 1;
    margin-right: 0.5rem;
    line-height: 1.5;
}

.image-error-alert .btn-close {
    flex-shrink: 0;
    margin-left: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.5rem;
    opacity: 0.8;
    filter: brightness(0) invert(1);
    align-self: center;
}

.image-error-alert .btn-close:hover {
    opacity: 1;
}

/* Dark mode adjustments for image error alert */
.dark-mode .image-error-alert {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: #ffd54f !important;
}

.dark-mode .image-error-alert .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.dark-mode .image-error-alert .btn-close:hover {
    opacity: 1;
}

/* Light mode adjustments for image error alert */
.image-error-alert {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.image-error-alert .btn-close {
    filter: brightness(0) saturate(100%) invert(25%) sepia(95%) saturate(1352%) hue-rotate(358deg) brightness(95%) contrast(87%);
}

/* Notification Item Styles */
.notification-item {
    transition: background-color 0.2s ease;
}

.notification-item:hover {
    background-color: var(--bg-tertiary);
}

.notification-item.unread {
    background-color: var(--bg-tertiary);
    border-left: 3px solid var(--pulse-primary);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon .material-icons {
    font-size: 1.5rem;
}

.notification-actions {
    display: flex;
    gap: 0.25rem;
}

.notification-actions .btn-link {
    padding: 0.25rem;
    text-decoration: none;
}

.notification-actions .btn-link:hover {
    text-decoration: none;
}

/* Dark mode notification adjustments */
.dark-mode .notification-item.unread {
    background-color: var(--bg-tertiary);
    border-left-color: var(--pulse-primary);
}

.dark-mode .notification-icon {
    background-color: var(--bg-secondary);
}

/* ============================================
   ATOM Search Interface Styles
   ============================================ */

/* ATOM Search Container */
.atom-search-container {
    width: 100%;
}

.atom-search-wrapper {
    max-width: 100%;
    position: relative;
}

/* ATOM Search Box - Google-like design */
.atom-search-box {
    display: flex;
    align-items: center;
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 8px var(--shadow);
    transition: all 0.3s ease;
    position: relative;
}

.atom-search-box:focus-within {
    border-color: var(--pulse-primary);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
}

.atom-search-icon {
    display: flex;
    align-items: center;
    color: var(--pulse-primary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.atom-search-icon .material-icons {
    font-size: 1.5rem;
}

.atom-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--text-primary);
    padding: 0.25rem 0;
}

.atom-search-input::placeholder {
    color: var(--text-tertiary);
}

.atom-search-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.atom-listening-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: 16px;
    color: #dc3545;
}

.atom-pulse {
    width: 8px;
    height: 8px;
    background-color: #dc3545;
    border-radius: 50%;
    animation: atom-pulse-animation 1.5s ease-in-out infinite;
}

@keyframes atom-pulse-animation {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.atom-voice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.atom-voice-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--pulse-primary);
}

.atom-voice-btn.active {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.atom-voice-btn .material-icons {
    font-size: 1.25rem;
}

.atom-suggestions-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.atom-suggestions-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--pulse-primary);
}

.atom-suggestions-btn.active {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.atom-suggestions-btn .material-icons {
    font-size: 1.25rem;
}

.atom-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.atom-search-btn:hover:not(:disabled) {
    background-color: var(--bg-tertiary);
    color: var(--pulse-primary);
}

.atom-search-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.atom-search-btn .material-icons {
    font-size: 1.25rem;
}

/* Suggested Questions - Accordion below search bar */
.atom-suggestions-accordion {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    animation: atom-suggestions-slide-down 0.3s ease;
}

@keyframes atom-suggestions-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.atom-suggestions-accordion-body {
    padding: 1rem 1.25rem;
}

@keyframes atom-suggestions-expand {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

.atom-suggested-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.atom-suggested-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.atom-suggested-item:hover {
    background-color: var(--pulse-primary);
    color: white;
    border-color: var(--pulse-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--shadow);
}

.atom-suggested-item .material-icons {
    font-size: 1rem;
    flex-shrink: 0;
}

/* ATOM Results Offcanvas */
.atom-results-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: atom-backdrop-fade-in 0.3s ease forwards;
}

@keyframes atom-backdrop-fade-in {
    to {
        opacity: 1;
    }
}

.atom-results-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background-color: var(--card-bg);
    box-shadow: 2px 0 12px var(--shadow-lg);
    z-index: 1041;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.atom-results-offcanvas.show {
    transform: translateX(0);
}

.atom-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-tertiary);
}

.atom-results-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.atom-results-title .material-icons {
    color: var(--pulse-primary);
    font-size: 1.5rem;
}

.atom-results-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.atom-results-close:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.atom-results-close .material-icons {
    font-size: 1.25rem;
}

.atom-results-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Loading State */
.atom-results-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.atom-loading-spinner {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.atom-loading-spinner span {
    width: 8px;
    height: 8px;
    background-color: var(--pulse-primary);
    border-radius: 50%;
    animation: atom-bounce 1.4s ease-in-out infinite both;
}

.atom-loading-spinner span:nth-child(1) {
    animation-delay: -0.32s;
}

.atom-loading-spinner span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes atom-bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Result Cards */
.atom-result-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.atom-result-card:hover {
    box-shadow: 0 4px 8px var(--shadow);
}

.atom-query-card {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0.02) 100%);
    border-color: rgba(33, 150, 243, 0.2);
}

.atom-response-card {
    border-color: rgba(33, 150, 243, 0.3);
}

.atom-error-card {
    border-color: rgba(220, 53, 69, 0.3);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.02) 100%);
}

.atom-action-card {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(40, 167, 69, 0.02) 100%);
    border-color: rgba(40, 167, 69, 0.2);
}

.atom-quick-actions-card {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 193, 7, 0.02) 100%);
    border-color: rgba(255, 193, 7, 0.2);
}

.atom-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.atom-card-header .material-icons {
    font-size: 1.25rem;
    color: var(--pulse-primary);
}

.atom-error-card .atom-card-header .material-icons {
    color: #dc3545;
}

.atom-action-card .atom-card-header .material-icons {
    color: #28a745;
}

.atom-quick-actions-card .atom-card-header .material-icons {
    color: #ffc107;
}

.atom-card-body {
    padding: 1.5rem;
    color: var(--text-primary);
    background-color: var(--card-bg);
}

.dark-mode .atom-card-body {
    background-color: var(--card-bg);
    color: #e5e7eb;
}

.atom-query-text {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.atom-response-content {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 0.9375rem;
}

.atom-response-content .atom-heading {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.atom-response-content .atom-heading-h2 {
    font-size: 1.375rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.atom-response-content .atom-heading-h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
}

.atom-response-content .atom-heading-h4 {
    font-size: 1.125rem;
    color: var(--pulse-primary);
}

.atom-response-content .atom-heading-h5 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pulse-primary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.atom-response-content .atom-paragraph {
    margin: 0.75rem 0;
    line-height: 1.7;
}

.atom-response-content .atom-list {
    margin: 1rem 0;
    padding-left: 1.75rem;
    list-style-type: disc;
}

.atom-response-content .atom-list-numbered {
    list-style-type: decimal;
}

.atom-response-content .atom-list-item {
    margin: 0.5rem 0;
    line-height: 1.6;
    padding-left: 0.25rem;
}

.atom-response-content .atom-list-item .atom-strong {
    font-weight: 600;
    color: var(--text-primary);
}

.atom-response-content .atom-strong {
    font-weight: 600;
    color: var(--text-primary);
}

.atom-response-content .atom-em {
    font-style: italic;
    color: var(--text-secondary);
}

.atom-response-content .atom-code {
    background-color: var(--bg-tertiary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
    color: var(--pulse-primary);
    border: 1px solid var(--border-color);
}

/* Badges and Visual Indicators */
.atom-response-content .atom-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0.125rem 0.25rem;
}

.atom-response-content .atom-badge-currency {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.1) 100%);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.atom-response-content .atom-badge-percentage {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.1) 100%);
    color: var(--pulse-primary);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.atom-response-content .atom-badge-status {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.15) 0%, rgba(108, 117, 125, 0.1) 100%);
    color: var(--text-primary);
    border: 1px solid rgba(108, 117, 125, 0.3);
    text-transform: capitalize;
}

.atom-response-content .atom-badge-count {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.1) 100%);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.atom-response-content .atom-badge-value {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.1) 100%);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.atom-response-content .atom-status-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

/* Metrics - Enhanced for slide layout */
.atom-response-content .atom-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid var(--pulse-primary);
    transition: all 0.2s ease;
}

.atom-response-content .atom-metric:hover {
    background: var(--bg-secondary);
    transform: translateX(4px);
}

.atom-response-content .atom-metric-label {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
    font-size: 0.95rem;
}

.atom-response-content .atom-metric-value {
    font-weight: 600;
    color: var(--pulse-primary);
    font-size: 1.05rem;
}

/* Cards and Tiles - Enhanced formatting */
.atom-response-content .atom-heading-h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    padding: 1rem 0;
    color: var(--text-primary);
    border-bottom: 3px solid var(--pulse-primary);
    width: 100%;
}

.atom-response-content .atom-heading-h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.25rem 0;
    padding: 0.75rem 0;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    width: 100%;
}

.atom-response-content .atom-heading-h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);
    border-left: 4px solid var(--pulse-primary);
    border-radius: 8px;
    color: var(--text-primary);
    width: 100%;
}

.atom-response-content .atom-heading-h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.875rem;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--pulse-primary);
    border-radius: 6px;
    color: var(--text-primary);
    width: 100%;
}

/* Slide-like Container */
.atom-response-content .atom-slide-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Slide Sections */
.atom-response-content .atom-slide-section {
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.atom-response-content .atom-slide-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Slide Grid - Card Layout */
.atom-response-content .atom-slide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    width: 100%;
}

@media (min-width: 768px) {
    .atom-response-content .atom-slide-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 1200px) {
    .atom-response-content .atom-slide-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
    }
}

/* Slide Cards */
.atom-response-content .atom-slide-card {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.atom-response-content .atom-slide-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--pulse-primary) 0%, var(--pulse-primary-dark) 100%);
    transition: width 0.3s ease;
}

.atom-response-content .atom-slide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.15);
    border-color: var(--pulse-primary);
}

.atom-response-content .atom-slide-card:hover::before {
    width: 6px;
}

.atom-response-content .atom-slide-card p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-primary);
}

.atom-response-content .atom-slide-card .atom-strong {
    display: block;
    font-size: 1.1em;
    margin-bottom: 0.5rem;
    color: var(--pulse-primary);
}

/* Enhanced list formatting for cards/tiles (legacy support) */
.atom-response-content .atom-list-item {
    padding: 0.75rem;
    margin: 0.5rem 0;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--pulse-primary);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.atom-response-content .atom-list-item:hover {
    background: var(--bg-secondary);
    transform: translateX(4px);
}

/* Currency and Percentage (legacy support) */
.atom-response-content .atom-currency {
    font-weight: 600;
    color: #28a745;
}

.atom-response-content .atom-percentage {
    font-weight: 600;
    color: var(--pulse-primary);
}

.atom-response-content .atom-link {
    color: var(--pulse-primary);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.atom-response-content .atom-link:hover {
    text-decoration: underline;
    color: var(--pulse-primary-dark);
}

.atom-response-content .atom-link-icon {
    font-size: 0.875rem;
    vertical-align: middle;
}

.atom-response-content a {
    color: var(--pulse-primary);
    text-decoration: none;
    font-weight: 500;
}

.atom-response-content a:hover {
    text-decoration: underline;
}

.atom-action-description {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.atom-view-full-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
}

.atom-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.atom-quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.atom-quick-action-btn:hover {
    background-color: var(--pulse-primary);
    color: white;
    border-color: var(--pulse-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--shadow);
}

.atom-quick-action-btn .material-icons {
    font-size: 1.125rem;
}

/* Follow-up Questions Card */
.atom-followup-card {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(156, 39, 176, 0.02) 100%);
    border-color: rgba(156, 39, 176, 0.2);
}

.atom-followup-card .atom-card-header .material-icons {
    color: #9c27b0;
}

.atom-followup-questions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.atom-followup-question-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.atom-followup-question-btn:hover {
    background-color: #9c27b0;
    color: white;
    border-color: #9c27b0;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.atom-followup-question-btn .material-icons {
    font-size: 1.125rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.atom-followup-question-btn:hover .material-icons {
    transform: translateX(2px);
}

.atom-followup-question-text {
    flex: 1;
    line-height: 1.5;
}

/* Inline Follow-up Questions */
.atom-inline-followup {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.atom-inline-followup-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.atom-inline-followup-header .material-icons {
    font-size: 1.25rem;
    color: #9c27b0;
}

.atom-inline-followup-questions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.atom-inline-followup-question-btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.atom-inline-followup-question-btn:hover {
    background-color: #9c27b0;
    color: white;
    border-color: #9c27b0;
    transform: translateX(4px);
    box-shadow: 0 2px 6px rgba(156, 39, 176, 0.3);
}

.atom-inline-followup-question-btn .material-icons {
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.atom-inline-followup-question-btn:hover .material-icons {
    transform: translateX(2px);
}

.atom-inline-followup-question-text {
    flex: 1;
    line-height: 1.4;
}

/* Dark mode for follow-up questions */
.dark-mode .atom-followup-question-btn {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: #e5e7eb;
}

.dark-mode .atom-followup-question-btn:hover {
    background-color: #9c27b0;
    color: white;
    border-color: #9c27b0;
}

.dark-mode .atom-inline-followup-question-btn {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: #e5e7eb;
}

.dark-mode .atom-inline-followup-question-btn:hover {
    background-color: #9c27b0;
    color: white;
    border-color: #9c27b0;
}

.dark-mode .atom-inline-followup {
    border-top-color: var(--border-color);
}

.dark-mode .atom-inline-followup-header {
    color: #f9fafb;
}

/* Full Results Page */
.atom-full-results-page {
    min-height: 100vh;
    padding: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    background: #f8f9fa;
    position: relative;
    box-sizing: border-box;
}

/* When performance-dashboard is inside atom-full-results-page, don't break out again */
.atom-full-results-page .performance-dashboard {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 1.5rem 2rem;
}

.dark-mode .atom-full-results-page {
    background: #111827;
}

.atom-full-results-container {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 2rem;
}

.atom-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

@media (max-width: 768px) {
    .atom-full-results-page {
        padding: 0;
    }
    
    .atom-full-results-container {
        padding: 1rem 1.25rem;
    }
    
    .atom-full-results-container h1 {
        font-size: 1.25rem;
    }
    
    .atom-full-results-container .text-muted {
        font-size: 0.875rem;
    }
    
    .atom-actions-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    
    .atom-result-card {
        margin-bottom: 0.875rem;
    }
    
    .atom-card-header {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
    
    .atom-card-body {
        padding: 1rem;
    }
    
    .atom-view-full-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .atom-action-description {
        font-size: 0.8125rem;
        margin-bottom: 0.75rem !important;
    }
}

.atom-full-response-content {
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 1rem;
}

.atom-full-response-content h1,
.atom-full-response-content h2,
.atom-full-response-content h3,
.atom-full-response-content h4 {
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.atom-full-response-content h1 {
    font-size: 2rem;
}

.atom-full-response-content h2 {
    font-size: 1.5rem;
}

.atom-full-response-content h3 {
    font-size: 1.25rem;
}

.atom-full-response-content h4 {
    font-size: 1.125rem;
}

/* Inline Results - Plain Text Style */
.atom-inline-results {
    margin-top: 1.5rem;
}

.atom-inline-content-plain {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 0.9375rem;
    max-width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Plain text inline content - no formatting */

.atom-inline-error {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(220, 53, 69, 0.1);
    border-left: 3px solid #dc3545;
    border-radius: 4px;
    color: #dc3545;
}

.atom-inline-error .material-icons {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.atom-inline-error p {
    margin: 0;
    line-height: 1.5;
}

.atom-inline-dashboard-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(33, 150, 243, 0.1);
    border-left: 3px solid var(--pulse-primary);
    border-radius: 6px;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.atom-inline-dashboard-notice .material-icons:first-child {
    font-size: 1.5rem;
    color: var(--pulse-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.atom-inline-dashboard-notice > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.atom-inline-dashboard-notice p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.atom-inline-link-btn {
    background: none;
    border: none;
    color: var(--pulse-primary);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}

.atom-inline-link-btn:hover {
    color: var(--pulse-primary-dark);
}

.atom-inline-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.atom-inline-view-full-btn {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    background: var(--pulse-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    width: auto;
    margin: 0 auto;
}

.atom-inline-view-full-btn:hover {
    background: var(--pulse-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

/* Dark mode for plain text inline results */
.dark-mode .atom-inline-content-plain {
    color: #e5e7eb;
}

.dark-mode .atom-inline-dashboard-notice {
    background: rgba(33, 150, 243, 0.15);
    border-left-color: #60a5fa;
}

.dark-mode .atom-inline-error {
    background: rgba(220, 53, 69, 0.15);
}

.atom-full-response-content ul,
.atom-full-response-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.atom-full-response-content li {
    margin: 0.75rem 0;
}

.atom-full-response-content a {
    color: var(--pulse-primary);
    text-decoration: none;
    font-weight: 500;
}

.atom-full-response-content a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .atom-results-offcanvas {
        width: 100%;
        max-width: 100vw;
    }

    .atom-search-box {
        padding: 0.625rem 0.875rem;
    }

    .atom-search-input {
        font-size: 0.9375rem;
    }

    .atom-suggestions-accordion {
        margin-top: 0.375rem;
        border-radius: 8px;
    }

    .atom-suggestions-accordion-body {
        padding: 0.875rem 1rem;
    }

    .atom-suggested-list {
        gap: 0.375rem;
        justify-content: center;
    }

    .atom-suggested-item {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    .atom-full-results-page {
        padding: 0;
    }
    
    .atom-full-results-container {
        padding: 1rem 1.25rem;
    }
    
    .atom-full-results-container h1 {
        font-size: 1.25rem;
    }
    
    .atom-full-results-container .text-muted {
        font-size: 0.875rem;
    }
    
    .atom-actions-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    
    .atom-result-card {
        margin-bottom: 0.875rem;
    }
    
    .atom-card-header {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
    
    .atom-card-body {
        padding: 1rem;
    }
    
    .atom-view-full-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .atom-action-description {
        font-size: 0.8125rem;
        margin-bottom: 0.75rem !important;
    }
    
    .atom-full-results-container .d-flex {
        flex-direction: column;
        gap: 1rem;
    }
    
    .atom-full-results-container .btn {
        width: 100%;
        justify-content: center;
    }
    
    .atom-full-response-content {
        font-size: 0.9375rem;
    }
    
    .atom-full-response-content h1 {
        font-size: 1.5rem;
    }
    
    .atom-full-response-content h2 {
        font-size: 1.25rem;
    }
    
    .atom-full-response-content h3 {
        font-size: 1.125rem;
    }
    
    .atom-full-response-content h4 {
        font-size: 1rem;
    }
}

/* Dark Mode Adjustments */
.dark-mode .atom-search-box {
    background-color: transparent;
    border-color: var(--border-color);
}

.dark-mode .atom-search-box:focus-within {
    border-color: var(--pulse-primary);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.dark-mode .atom-search-box:focus-visible {
    box-shadow: none;
}

.dark-mode .atom-suggested-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-mode .atom-result-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .atom-card-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: #f9fafb;
}

.dark-mode .atom-card-body {
    background-color: var(--card-bg);
    color: #e5e7eb;
}

.dark-mode .atom-result-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .atom-action-card {
    border-color: rgba(33, 150, 243, 0.3);
}

.dark-mode .atom-action-card .atom-card-header {
    background-color: #111827;
    border-bottom-color: #374151;
}

.dark-mode .atom-action-description {
    color: #9ca3af;
}

.dark-mode .atom-view-full-btn {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

.dark-mode .atom-view-full-btn:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

.dark-mode .atom-full-response-content {
    color: #e5e7eb;
}

.dark-mode .atom-full-response-content h1,
.dark-mode .atom-full-response-content h2,
.dark-mode .atom-full-response-content h3,
.dark-mode .atom-full-response-content h4 {
    color: #f9fafb;
}

.dark-mode .atom-full-response-content a {
    color: #60a5fa;
}

.dark-mode .atom-full-response-content a:hover {
    color: #93c5fd;
}

/* Insights Section */
.atom-dashboard-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.atom-dashboard-insight-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    transition: all 0.2s ease;
}

.atom-dashboard-insight-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.atom-dashboard-insight-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.atom-dashboard-insight-icon .material-icons {
    font-size: 20px;
}

.atom-dashboard-insight-content {
    flex: 1;
}

.atom-dashboard-insight-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.5rem 0;
}

.atom-dashboard-insight-text {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}

.atom-dashboard-insight-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #3b82f6;
    font-weight: 500;
    cursor: pointer;
}

.atom-dashboard-insight-action:hover {
    color: #2563eb;
}

.atom-dashboard-insight-action .material-icons {
    font-size: 16px;
}

/* Knowledge Section */
.atom-dashboard-knowledge {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.atom-dashboard-knowledge-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.atom-dashboard-knowledge-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.atom-dashboard-knowledge-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.atom-dashboard-knowledge-header .material-icons {
    font-size: 24px;
    color: #3b82f6;
}

.atom-dashboard-knowledge-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.atom-dashboard-knowledge-content {
    color: #374151;
}

.atom-dashboard-knowledge-summary {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
    color: #4b5563;
}

.atom-dashboard-knowledge-details {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    color: #6b7280;
}

.atom-dashboard-knowledge-sources {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.atom-dashboard-knowledge-sources-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}

.atom-dashboard-knowledge-sources ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.atom-dashboard-knowledge-sources li {
    font-size: 0.8125rem;
    color: #3b82f6;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.atom-dashboard-knowledge-sources li:before {
    content: "•";
    color: #9ca3af;
    font-weight: bold;
}

/* Dark Mode for Insights and Knowledge */
.dark-mode .atom-dashboard-insight-card {
    background: #1f2937;
    border-color: #374151;
    border-left-color: #3b82f6;
}

.dark-mode .atom-dashboard-insight-title {
    color: #f9fafb;
}

.dark-mode .atom-dashboard-insight-text {
    color: #9ca3af;
}

.dark-mode .atom-dashboard-knowledge-card {
    background: #1f2937;
    border-color: #374151;
}

.dark-mode .atom-dashboard-knowledge-card:hover {
    border-color: #3b82f6;
}

.dark-mode .atom-dashboard-knowledge-header {
    border-bottom-color: #374151;
}

.dark-mode .atom-dashboard-knowledge-title {
    color: #f9fafb;
}

.dark-mode .atom-dashboard-knowledge-summary {
    color: #d1d5db;
}

.dark-mode .atom-dashboard-knowledge-details {
    color: #9ca3af;
}

.dark-mode .atom-dashboard-knowledge-sources {
    border-top-color: #374151;
}

.dark-mode .atom-dashboard-knowledge-sources-label {
    color: #9ca3af;
}

.dark-mode .atom-dashboard-knowledge-sources li {
    color: #60a5fa;
}

/* Mobile Responsive for Insights and Knowledge */
@media (max-width: 768px) {
    .atom-dashboard-insights {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    
    .atom-dashboard-insight-card {
        padding: 1rem;
    }
    
    .atom-dashboard-knowledge {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .atom-dashboard-knowledge-card {
        padding: 1.25rem;
    }
}

/* Slide-like Container */
.atom-response-content .atom-slide-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Slide Sections */
.atom-response-content .atom-slide-section {
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.atom-response-content .atom-slide-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Slide Grid - Card Layout */
.atom-response-content .atom-slide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    width: 100%;
}

@media (min-width: 768px) {
    .atom-response-content .atom-slide-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 1200px) {
    .atom-response-content .atom-slide-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
    }
}

/* Slide Cards */
.atom-response-content .atom-slide-card {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.atom-response-content .atom-slide-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--pulse-primary) 0%, var(--pulse-primary-dark) 100%);
    transition: width 0.3s ease;
}

.atom-response-content .atom-slide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.15);
    border-color: var(--pulse-primary);
}

.atom-response-content .atom-slide-card:hover::before {
    width: 6px;
}

.atom-response-content .atom-slide-card p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-primary);
}

.atom-response-content .atom-slide-card .atom-strong {
    display: block;
    font-size: 1.1em;
    margin-bottom: 0.5rem;
    color: var(--pulse-primary);
}

/* Sub-items for indented list items */
.atom-response-content .atom-slide-card-sub {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--pulse-gray-200);
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.02) 0%, rgba(33, 150, 243, 0.01) 100%);
    font-size: 0.95em;
}

.dark-mode .atom-response-content .atom-slide-card-sub {
    border-left-color: var(--border-color);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
}

/* Dark mode adjustments for slide layout */
.dark-mode .atom-response-content .atom-slide-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .atom-response-content .atom-slide-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.25);
}

.dark-mode .atom-response-content .atom-metric {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--pulse-primary);
}

/* ATOM Dashboard Styles - Professional BI Report Layout */
.performance-dashboard {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 1.5rem 2rem;
    background: #f8f9fa;
    min-height: calc(100vh - 200px);
    box-sizing: border-box;
}

.dark-mode .performance-dashboard {
    background: #111827;
}

/* When inside atom-full-results-page, inherit background */
.atom-full-results-page .performance-dashboard {
    background: transparent;
}

.dark-mode .atom-full-results-page .performance-dashboard {
    background: transparent;
}

.atom-dashboard-report {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 0;
    margin: 0 auto 1.5rem;
    max-width: 100%;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Report Header */
.atom-dashboard-report-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 1.25rem 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.atom-dashboard-report-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.atom-dashboard-report-title .material-icons {
    font-size: 1.5rem;
    color: #3b82f6;
    flex-shrink: 0;
}

.atom-dashboard-report-date {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Section Styling */
.atom-dashboard-section {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.atom-dashboard-section:last-child {
    border-bottom: none;
}

.atom-dashboard-section:first-of-type {
    padding-top: 1.5rem;
}

.atom-dashboard-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.atom-dashboard-section-title .material-icons {
    font-size: 1.125rem;
    color: #3b82f6;
}

/* KPI Cards Grid */
.atom-dashboard-kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.atom-dashboard-kpi-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #3b82f6;
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    border-radius: 0;
    transition: all 0.15s ease;
    position: relative;
    min-height: 100px;
}

.atom-dashboard-kpi-card:hover {
    border-left-color: #2563eb;
    background: #f9fafb;
    border-color: #d1d5db;
}

.atom-dashboard-kpi-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.atom-dashboard-kpi-icon {
    font-size: 1.5rem;
    color: #3b82f6;
}

.atom-dashboard-kpi-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.atom-dashboard-kpi-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.02em;
    margin-top: 0.125rem;
}

.atom-dashboard-kpi-subtitle {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
    font-weight: 400;
}

/* Charts Grid */
/* Charts Grid - 12 Column System (Full width or 50/50) */
.atom-dashboard-charts-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    margin-top: 0.75rem;
    width: 100%;
    max-width: 100%;
}

/* Default: items span full width (12 columns) */
.atom-dashboard-charts-grid > * {
    grid-column: span 12;
}

/* 6-column span (50% width) */
.atom-dashboard-chart-span-6 {
    grid-column: span 6;
}

/* 12-column span (100% width) */
.atom-dashboard-chart-span-12 {
    grid-column: span 12;
}

@media (max-width: 1400px) {
    .atom-dashboard-charts-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }
    
    .atom-dashboard-chart-span-6 {
        grid-column: span 6;
    }
    
    .atom-dashboard-chart-span-12 {
        grid-column: span 6;
    }
}

@media (max-width: 1200px) {
    .atom-dashboard-kpis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .atom-dashboard-kpis-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }
    
    .atom-dashboard-charts-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }
    
    .atom-dashboard-chart-span-6 {
        grid-column: span 6;
    }
    
    .atom-dashboard-chart-span-12 {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .performance-dashboard {
        padding: 0.875rem 1rem;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    
    .atom-dashboard-report {
        margin-bottom: 1rem;
    }
    
    .atom-dashboard-report-header {
        padding: 1rem 1.125rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
    }
    
    .atom-dashboard-report-title {
        font-size: 1.125rem;
    }
    
    .atom-dashboard-report-title .material-icons {
        font-size: 1.375rem;
    }
    
    .atom-dashboard-report-date {
        font-size: 0.75rem;
    }
    
    .atom-dashboard-section {
        padding: 1rem 1.125rem;
    }
    
    .atom-dashboard-section-title {
        font-size: 0.8125rem;
        margin-bottom: 0.875rem;
        padding-bottom: 0.375rem;
    }
    
    .atom-dashboard-kpis-grid {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
    
    .atom-dashboard-kpi-card {
        padding: 0.875rem 1rem;
        min-height: 90px;
    }
    
    .atom-dashboard-kpi-icon {
        font-size: 1.25rem;
    }
    
    .atom-dashboard-kpi-label {
        font-size: 0.8125rem;
    }
    
    .atom-dashboard-kpi-value {
        font-size: 1.5rem;
    }
    
    .atom-dashboard-kpi-subtitle {
        font-size: 0.6875rem;
    }
    
    .atom-dashboard-charts-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        margin-top: 0.5rem;
    }
    
    .atom-dashboard-chart-span-6,
    .atom-dashboard-chart-span-12 {
        grid-column: span 1;
    }
    
    .atom-dashboard-panel-header {
        padding: 0.75rem 1rem;
    }
    
    .atom-dashboard-panel-title {
        font-size: 0.8125rem;
    }
    
    .atom-dashboard-panel-subtitle {
        font-size: 0.8125rem;
        margin-top: 0.125rem;
    }
    
    .atom-dashboard-panel-content {
        padding: 0.875rem 1rem;
        min-height: 240px;
    }
    
    .atom-dashboard-pie-container {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .atom-dashboard-pie-legend {
        min-width: 100%;
        padding-top: 0.75rem;
    }
    
    .atom-dashboard-legend-item {
        padding: 0.5rem 0.625rem;
        gap: 0.625rem;
    }
    
    .atom-dashboard-legend-color {
        width: 12px;
        height: 12px;
    }
    
    .atom-dashboard-legend-label,
    .atom-dashboard-legend-value {
        font-size: 0.75rem;
    }
}

/* Report Panel */
.atom-dashboard-report-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    overflow: hidden;
    transition: border-color 0.15s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.atom-dashboard-report-panel:hover {
    border-color: #d1d5db;
}

.atom-dashboard-panel-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.875rem 1.25rem;
    position: relative;
}

.atom-dashboard-panel-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.atom-dashboard-panel-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
    font-weight: 400;
}

.atom-dashboard-panel-content {
    padding: 1rem 1.25rem;
    background: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    overflow-x: auto;
}

/* Pie Chart Container */
.atom-dashboard-pie-container {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    justify-content: center;
}

@media (max-width: 768px) {
    .atom-dashboard-pie-container {
        flex-direction: column;
        align-items: center;
    }
}

.atom-dashboard-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 220px;
    padding-top: 0.5rem;
}

.atom-dashboard-legend-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    transition: background-color 0.15s ease;
}

.atom-dashboard-legend-item:hover {
    background-color: #f9fafb;
}

.atom-dashboard-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.atom-dashboard-legend-label {
    font-size: 0.8125rem;
    color: #374151;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.atom-dashboard-legend-value {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Tables */
.atom-dashboard-tables-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.atom-dashboard-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
}

.atom-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: #ffffff;
}

.atom-dashboard-table thead {
    background: #f9fafb;
}

.atom-dashboard-table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.atom-dashboard-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: #111827;
    font-size: 0.875rem;
}

.atom-dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

.atom-dashboard-table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.atom-dashboard-table tbody tr {
    transition: background-color 0.15s ease;
}

.atom-dashboard-table tbody tr:hover {
    background-color: #f3f4f6;
}

.atom-dashboard-table tbody tr:hover td {
    background-color: #f3f4f6;
}

/* Dark mode adjustments */
.dark-mode .atom-dashboard-report {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .atom-dashboard-report-header {
    background: #111827;
    border-bottom-color: #374151;
}

.dark-mode .atom-dashboard-report-title {
    color: #f9fafb;
}

.dark-mode .atom-dashboard-report-title .material-icons {
    color: #60a5fa;
}

.dark-mode .atom-dashboard-report-date {
    color: #9ca3af;
}

.dark-mode .atom-dashboard-section {
    background: #1f2937;
    border-bottom-color: #374151;
}

.dark-mode .atom-dashboard-section-title {
    color: #f9fafb;
    border-bottom-color: #3b82f6;
}

.dark-mode .atom-dashboard-kpi-card {
    background: #1f2937;
    border-color: #374151;
    border-left-color: #3b82f6;
}

.dark-mode .atom-dashboard-kpi-card:hover {
    background: #111827;
    border-color: #4b5563;
    border-left-color: #60a5fa;
}

.dark-mode .atom-dashboard-kpi-icon {
    color: #60a5fa;
}

.dark-mode .atom-dashboard-kpi-label {
    color: #9ca3af;
}

.dark-mode .atom-dashboard-kpi-value {
    color: #f9fafb;
}

.dark-mode .atom-dashboard-kpi-subtitle {
    color: #6b7280;
}

.dark-mode .atom-dashboard-report-panel {
    background: #1f2937;
    border-color: #374151;
}

.dark-mode .atom-dashboard-report-panel:hover {
    border-color: #4b5563;
}

.dark-mode .atom-dashboard-panel-header {
    background: #111827;
    border-bottom-color: #374151;
}

.dark-mode .atom-dashboard-panel-title {
    color: #f9fafb;
}

.dark-mode .atom-dashboard-panel-subtitle {
    color: #9ca3af;
}

.dark-mode .atom-dashboard-panel-content {
    background: #1f2937;
}

.dark-mode .atom-dashboard-legend-label {
    color: #d1d5db;
}

.dark-mode .atom-dashboard-legend-value {
    color: #9ca3af;
}

.dark-mode .atom-dashboard-table-wrapper {
    border-color: #374151;
    background: #1f2937;
}

.dark-mode .atom-dashboard-table {
    background: #1f2937;
}

.dark-mode .atom-dashboard-table thead {
    background: #111827;
    border-bottom: 2px solid #374151;
}

.dark-mode .atom-dashboard-table th {
    color: #f9fafb;
    border-bottom-color: #374151;
    background: #111827;
    font-weight: 600;
}

.dark-mode .atom-dashboard-table td {
    color: #e5e7eb;
    border-bottom-color: #374151;
    background: #1f2937;
}

.dark-mode .atom-dashboard-table tbody tr {
    transition: background-color 0.15s ease;
}

.dark-mode .atom-dashboard-table tbody tr:hover {
    background-color: #111827;
}

.dark-mode .atom-dashboard-table tbody tr:hover td {
    background-color: #111827;
    color: #f9fafb;
}

.dark-mode .atom-dashboard-table tbody tr:nth-child(even) {
    background: #111827;
}

.dark-mode .atom-dashboard-table tbody tr:nth-child(even):hover {
    background-color: #1a1f2e;
}

.dark-mode .atom-dashboard-table tbody tr:nth-child(even):hover td {
    background-color: #1a1f2e;
}

.dark-mode .atom-dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

/* Heatmap Styles */
.atom-heatmap-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.atom-heatmap-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-width: fit-content;
}

.atom-heatmap-y-labels {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.75rem;
    justify-content: space-around;
    min-width: 60px;
    flex-shrink: 0;
}

.atom-heatmap-y-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
    text-align: right;
    padding: 0.5rem 0;
}

.atom-heatmap-cells {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: fit-content;
    overflow-x: visible;
}

.atom-heatmap-row {
    display: flex;
    gap: 0.5rem;
    min-width: fit-content;
}

.atom-heatmap-cell {
    flex: 1;
    min-width: 45px;
    width: 45px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.atom-heatmap-cell:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.atom-heatmap-x-labels {
    display: flex;
    gap: 0.5rem;
    padding-left: calc(60px + 0.5rem);
    margin-top: 0.5rem;
    grid-column: 2;
    min-width: fit-content;
}

.atom-heatmap-x-label {
    flex: 1;
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
    text-align: center;
    min-width: 45px;
    width: 45px;
    flex-shrink: 0;
}

.atom-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.atom-heatmap-legend-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.atom-heatmap-legend-gradient {
    display: flex;
    gap: 2px;
    height: 20px;
}

.atom-heatmap-legend-cell {
    width: 20px;
    height: 100%;
    border-radius: 2px;
}

/* World Map Styles */
.atom-worldmap-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.atom-worldmap-svg {
    width: 100%;
    height: auto;
    min-height: 350px;
    background: #f9fafb;
    border-radius: 0;
}

.atom-worldmap-point {
    cursor: pointer;
    transition: r 0.2s ease, opacity 0.2s ease;
}

.atom-worldmap-point:hover {
    opacity: 1;
    r: 3;
}

.atom-worldmap-label {
    pointer-events: none;
    font-weight: 500;
}

.atom-worldmap-legend {
    margin-top: 1rem;
}

.atom-worldmap-legend-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.atom-worldmap-legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.atom-worldmap-legend-item:hover {
    background-color: #f9fafb;
}

.atom-worldmap-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.atom-worldmap-legend-name {
    flex: 1;
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

.atom-worldmap-legend-value {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 600;
}

/* Dark mode for heatmap and world map */
.dark-mode .atom-heatmap-y-label,
.dark-mode .atom-heatmap-x-label {
    color: #9ca3af;
}

.dark-mode .atom-heatmap-legend-label {
    color: #9ca3af;
}

.dark-mode .atom-heatmap-legend {
    border-top-color: #374151;
}

.dark-mode .atom-heatmap-cell {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .atom-worldmap-svg {
    background: #1f2937;
}

.dark-mode .atom-worldmap-label {
    fill: #d1d5db;
}

.dark-mode .atom-worldmap-point {
    stroke: #374151;
}

.dark-mode .atom-worldmap-legend-item:hover {
    background-color: #111827;
}

.dark-mode .atom-worldmap-legend-name {
    color: #d1d5db;
}

.dark-mode .atom-worldmap-legend-value {
    color: #9ca3af;
}

.dark-mode .atom-worldmap-legend-dot {
    border-color: #374151;
}

/* Skeleton Loading Styles */
.skeleton-box {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.dark-mode .skeleton-box {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

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