/* Custom Styles for Management App */

:root {
    /* Light Theme Colors */
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    
    /* Modern UI Colors */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    
    /* Dashboard Card Gradients */
    --dashboard-total-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --dashboard-completed-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --dashboard-urgent-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --dashboard-overdue-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --dashboard-devizier-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    
    /* Border Colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    
    /* Shadow Variables */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --shadow-xl: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
    
    /* Border Radius */
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --border-color: #404040;
    --border-light: #505050;
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
}

/* Font Awesome Icons - Ensure visibility */
.fas, .fa {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Dashboard Cards - Enhanced Styling - Unified */
.dashboard-card {
    background: var(--dashboard-total-gradient) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition-base) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 160px !important;
    padding: var(--space-lg) !important;
}

.dashboard-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Specific colors for each dashboard card */
.dashboard-card[onclick*="filterTasksDashboard('realizata')"] {
    background: var(--dashboard-completed-gradient) !important;
}

.dashboard-card:has(#urgentTasks) {
    background: var(--dashboard-urgent-gradient) !important;
}

.dashboard-card:has(#overdueTasks) {
    background: var(--dashboard-overdue-gradient) !important;
}

.dashboard-devizier {
    background: var(--dashboard-devizier-gradient) !important;
}

/* Alternative selectors for dashboard cards */
.dashboard-card:nth-child(1) {
    background: var(--dashboard-total-gradient) !important;
}

.dashboard-card:nth-child(2) {
    background: var(--dashboard-completed-gradient) !important;
}

.dashboard-card:nth-child(3) {
    background: var(--dashboard-urgent-gradient) !important;
}

.dashboard-card:nth-child(4) {
    background: var(--dashboard-overdue-gradient) !important;
}

/* Ensure text is white and visible */
.dashboard-card h3,
.dashboard-card p,
.dashboard-card i {
    color: white !important;
}

.dashboard-card .opacity-75 {
    opacity: 0.85 !important;
}

/* Specific dashboard card classes */
.dashboard-total {
    background: var(--dashboard-total-gradient) !important;
}

.dashboard-completed {
    background: var(--dashboard-completed-gradient) !important;
}

.dashboard-urgent {
    background: var(--dashboard-urgent-gradient) !important;
}

.dashboard-overdue {
    background: var(--dashboard-overdue-gradient) !important;
}

.dashboard-devizier {
    background: var(--dashboard-devizier-gradient) !important;
}

/* Modern Navbar Styles */
.navbar {
    background: var(--primary-gradient) !important;
    box-shadow: var(--shadow-md);
    border-bottom: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: var(--transition-normal);
}

.navbar-brand:hover {
    transform: translateY(-1px);
    text-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.navbar-nav .nav-link {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.1);
    transition: var(--transition-normal);
    z-index: -1;
}

.navbar-nav .nav-link:hover::before {
    left: 0;
}

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


.navbar-toggler {
    border: none;
    padding: 0.5rem;
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
}

.navbar-toggler:hover {
    background: rgba(255,255,255,0.1);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25);
}

/* Dark Mode Toggle */
.theme-toggle {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: var(--border-radius-md);
    padding: 0.5rem 1rem;
    transition: var(--transition-fast);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-toggle:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-1px);
}

/* Modern Button Styles - Unified */
.btn {
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-medium);
    padding: 0.55rem 1.4rem;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-sm);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: var(--transition-normal);
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
}

.btn-success {
    background: var(--success-gradient);
    color: white;
}

.btn-danger {
    background: var(--danger-gradient);
    color: white;
}

.btn-warning {
    background: var(--warning-gradient);
    color: white;
}

.btn-info {
    background: var(--secondary-gradient);
    color: white;
}

.btn-outline-primary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}

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

/* Modern Card Styles - Unified */
.card:not(.dashboard-card) {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    background: var(--surface-card);
    overflow: hidden;
}

.card:not(.dashboard-card):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.card-header i {
    font-size: var(--icon-size-base);
    color: var(--color-brand-500);
}

.card-body {
    background: var(--surface-card);
    color: var(--text-primary);
    padding: var(--space-lg);
}

/* Dashboard Cards - Styles removed to allow inline styles to work */

/* Modern Form Controls - Unified */
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(59, 130, 246, 0.8);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: var(--surface-card);
    outline: none;
}

.form-label {
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

/* Modern Table Styles */
.table {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

.table td {
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: var(--bg-secondary);
    transition: var(--transition-fast);
}

/* Modern Modal Styles */
.modal-content {
    background: var(--bg-primary);
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    color: var(--text-primary);
    z-index: 9999 !important; /* Much higher than sidebar (1040) and navbar (1030) */
    position: relative !important;
}

.modal-backdrop {
    z-index: 9998 !important; /* Just below modal content */
}

/* Force modal z-index for all modals */
.modal {
    z-index: 9999 !important;
}

.modal.show {
    z-index: 9999 !important;
}

/* Specific modal overrides */
#changePasswordModal,
#createTaskModal,
#createProjectModal,
#createAgendaTaskModal,
#createPrivateChatModal,
#executeTaskCommentModal,
#projectDetailsModal,
#projectFilesModal,
#uploadFileModal,
#addPaymentModal {
    z-index: 9999 !important;
}

#changePasswordModal .modal-content,
#createTaskModal .modal-content,
#createProjectModal .modal-content,
#createAgendaTaskModal .modal-content,
#createPrivateChatModal .modal-content,
#executeTaskCommentModal .modal-content,
#projectDetailsModal .project-details-dialog,
#projectDetailsModal .modal-content,
#projectFilesModal .modal-content,
#uploadFileModal .modal-content,
#addPaymentModal .modal-content {
    z-index: 9999 !important;
    position: relative !important;
}

.modal-header {
    background: var(--primary-gradient);
    color: white;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.modal-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

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

/* Modern Dropdown Styles */
.dropdown-menu {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
}

.dropdown-item {
    color: var(--text-primary);
    transition: var(--transition-fast);
}

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

.dropdown-divider {
    border-color: var(--border-color);
}

/* Devizier Tasks Section - Ensure proper display */
#devizierTasksList .fas,
#devizierTasksList .fa {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
}

#devizierTasksList .badge .fas,
#devizierTasksList .badge .fa {
    margin-right: 0.25rem !important;
    font-size: 0.875em !important;
}

/* Ensure devizier tasks section is visible and not covered by sidebar */
#devizierTasksSection-section {
    position: relative !important;
    z-index: 1050 !important; /* Higher than sidebar z-index: 1040 */
    background: #fff !important;
    margin-right: 420px !important; /* Space for sidebar */
}

#devizierTasksList {
    position: relative !important;
    z-index: 1051 !important;
    background: #fff !important;
}

/* Ensure badges with icons are properly displayed */
.badge .fas,
.badge .fa {
    display: inline-block !important;
    margin-right: 0.25rem !important;
}

body {
    background-color: var(--bg-secondary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    color: var(--text-primary);
    transition: var(--transition-normal);
}

/* Ensure proper viewport behavior */
html, body {
    height: 100%;
    width: 100%;
}

/* Modern Chat Styles */
.chat-container {
    height: calc(100vh - 80px);
    margin-top: 80px;
    display: flex;
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}

.chat-sidebar {
    width: 350px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: var(--transition-normal);
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.chat-header {
    background: var(--primary-gradient);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--bg-primary);
}

.chat-message {
    border-left: 4px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fff;
    margin-bottom: 8px;
    padding: 12px 16px 20px 16px;
    border-radius: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
    position: relative;
    animation: fadeInUp 0.4s ease-out;
    line-height: 1.5;
    font-size: 0.95rem;
    max-width: 85%;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.chat-message.own {
    background: linear-gradient(135deg, #e8f0f8 0%, #f0f5fa 100%);
    color: #2c3e50;
    margin-left: auto;
    margin-right: 0;
    padding: 12px 16px 20px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Reduce spa?ierea �ntre mesajele de la acela?i operator */
.chat-message.own + .chat-message.own {
    margin-top: 8px;
}

.chat-message.other + .chat-message.other {
    margin-top: 8px;
}

/* Mare?te spa?ierea �ntre mesajele de la operatori diferi?i */
.chat-message.own + .chat-message.other,
.chat-message.other + .chat-message.own {
    margin-top: 20px;
}
.chat-message.user-color-1 { background: linear-gradient(135deg, #f5f0f8 80%, #f8f5fa 100%); } /* pastel violet mai pal */
.chat-message.user-color-2 { background: linear-gradient(135deg, #f0f5fa 80%, #f5f8fb 100%); } /* albastru mai pal */
.chat-message.user-color-3 { background: linear-gradient(135deg, #e6ffe6 80%, #f0ffe6 100%); } /* pastel verde */
.chat-message.user-color-4 { background: linear-gradient(135deg, #fff0e6 80%, #fff8e6 100%); } /* pastel portocaliu */
.chat-message.user-color-5 { background: linear-gradient(135deg, #ffe6f0 80%, #ffe6f8 100%); } /* pastel roz */

.chat-message:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    background: #f8fafd;
}

.chat-message .message-content {
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
    letter-spacing: 0.1px;
    margin-bottom: 0;
}

.chat-attachment {
    display: flex !important;
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 0 0;
    box-shadow: none;
    transition: none;
}
.chat-attachment a {
    color: #6b8fb8;
    font-weight: 500;
    text-decoration: none;
    opacity: 1 !important;
    background: none !important;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.04rem;
    padding: 0;
    margin: 0;
}
.chat-attachment a:hover {
    text-decoration: underline;
    background: none !important;
}
.chat-attachment i.fas.fa-file-arrow-down {
    font-size: 1.3rem;
    color: #6b8fb8;
    margin-right: 8px;
}
.chat-attachment .flex-grow-1 {
    font-size: 1.04rem;
    color: #222;
    margin-left: 2px;
}
.chat-attachment .ms-auto i.fa-download {
    color: #6b8fb8;
    font-size: 1rem;
}

/* Modernizez ETi inputul de fiETier */
#chatFileInput {
    border-radius: 8px;
    background: #f4f6fb;
    border: 1.5px solid #d1d7e6;
    padding: 8px;
    font-size: 1rem;
}
#attachFileButton {
    border-radius: 8px;
    margin-left: 8px;
    font-weight: 500;
    background: linear-gradient(135deg, #e3e9f7 80%, #f4f6fb 100%);
    color: #6b8fb8;
    border: 1.5px solid #d1d7e6;
    transition: background 0.2s, color 0.2s;
}
#attachFileButton:hover {
    background: #e9ecef;
    color: #0d47a1;
}

/* Culori pastelate pentru alE>i utilizatori (max 5) */
.chat-message.user-color-1 { background-color: #f5f0f8; color: #222; } /* pastel violet mai pal */
.chat-message.user-color-2 { background-color: #f0f5fa; color: #222; } /* albastru mai pal */
.chat-message.user-color-3 { background-color: #e6ffe6; color: #222; } /* pastel verde */
.chat-message.user-color-4 { background-color: #fff0e6; color: #222; } /* pastel portocaliu */
.chat-message.user-color-5 { background-color: #ffe6f0; color: #222; } /* pastel roz */

.chat-message.other {
    background-color: #f4f6fb;
    color: #222;
}

/* Adauga o margine colorata �n st�nga pentru claritate */
/* Eliminat complet chenarul (border-left) pentru toate mesajele */

/* Timestamp styling - separate purple row below messages */
.message-time {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 4px;
    margin-bottom: 8px;
    text-align: center;
    background: transparent;
}

.chat-message.own + .message-time {
    margin-left: auto;
    margin-right: 0;
}

.chat-message.other + .message-time {
    margin-left: 0;
    margin-right: auto;
}

/* Responsive Sidebar */
@media (max-width: 1200px) {
    .chat-sidebar {
        position: fixed;
        left: -350px;
        top: 80px;
        height: calc(100vh - 80px);
        z-index: 1040;
        background: var(--bg-secondary);
        box-shadow: var(--shadow-lg);
    }
    
    .chat-sidebar.show {
        left: 0;
    }
    
    .chat-main {
        margin-left: 0;
    }
}

/* Mobile Chat Styles */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 60px);
        margin-top: 60px;
        border-radius: 0;
    }
    
    .chat-sidebar {
        width: 100%;
        position: absolute;
        top: 0;
        left: -100%;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s;
    }
    
    .chat-sidebar.show {
        left: 0;
    }
    
    .chat-messages {
        padding: 1rem;
    }
    
    .message-content {
        max-width: 85%;
    }
    
    .chat-input {
        padding: 1rem;
    }
    
    /* �mbunata?iri pentru mobil */
    .chat-message {
        margin-bottom: 1rem;
        padding: 1rem 1.25rem;
    }
    
    .message-content {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .message-sender {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        letter-spacing: 0.3px;
    }
    
    .message-time {
        font-size: 0.65rem;
        margin-top: 3px;
        letter-spacing: 0.1px;
        text-align: center;
    }
    
    /* Buton pentru toggle sidebar pe mobil */
    .btn-toggle-sidebar {
        display: block !important;
        background: none;
        border: none;
        color: white;
        font-size: 1.2rem;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .btn-toggle-sidebar:hover {
        background: rgba(255,255,255,0.1);
    }
    
    /* Overlay pentru sidebar pe mobil */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.show {
        display: block;
    }
    
    /* �mbunata?iri pentru input pe mobil */
    .chat-input .input-group {
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .chat-input .form-control {
        border: none;
        padding: 0.75rem 3.5rem 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .chat-input .btn-send {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        background: var(--primary-color);
        border: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .chat-input .btn-send:hover {
        transform: translateY(-50%) scale(1.1);
        background: #0056b3;
    }
    
    /* Badge pentru mesaje necitite pe mobil */
    .unread-badge {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        background: var(--danger-color);
        color: white;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 600;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    /* Status indicator pentru mesaje citite */
    .message-read-status {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-top: 0.25rem;
    }
    
    .chat-message.own .message-read-status {
        color: rgba(255,255,255,0.8);
    }
    
    /* Typing indicator pe mobil */
    .typing-indicator {
        padding: 0.5rem 1rem;
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.8rem;
        background: rgba(108, 117, 125, 0.1);
        border-radius: 12px;
        margin: 0.5rem 0;
    }
}

/* Offcanvas for Mobile */
.offcanvas {
    background: var(--bg-secondary);
    border: none;
    box-shadow: var(--shadow-xl);
}

.offcanvas-header {
    background: var(--primary-gradient);
    color: white;
    border-bottom: 1px solid var(--border-color);
}

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

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    .btn, .nav-link, .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve form controls touch targets */
    .form-control, .form-select {
        min-height: 44px;
    }
    
    /* Improve table touch targets */
    .table td, .table th {
        min-height: 44px;
        vertical-align: middle;
    }
}

/* Improve scrolling on mobile */
@media (max-width: 768px) {
    .card, .modal-content {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Improve sidebar scrolling */
    #right-sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* Improve container responsiveness */
.container-fluid {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Improve table responsiveness */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Improve image responsiveness */
img {
    max-width: 100%;
    height: auto;
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .card, .btn, .nav-link {
        transition: none;
    }
    
    /* Optimize shadows for mobile */
    .card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Reduce border radius for better touch experience */
    .btn, .form-control, .card {
        border-radius: 6px;
    }
}

/* Improve text readability on small screens */
@media (max-width: 576px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Improve text contrast */
    .text-muted {
        color: #6c757d !important;
    }
    
    /* Improve button text */
    .btn {
        font-weight: 500;
    }
}

/* Specific improvements for Process Progress section */

/* Laptop and desktop optimizations for new layout */
@media (min-width: 992px) {
    #processProgress .d-flex.justify-content-between {
        gap: 1rem;
    }
    
    #processProgress .text-center {
        flex: 1;
        min-width: 140px;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1.5rem !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
    }
    
    #processProgress .bg-primary:hover,
    #processProgress .bg-info:hover,
    #processProgress .bg-success:hover,
    #processProgress .bg-warning:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    #processProgress h3 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    #processProgress small {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    /* Improve sume section */
    #processProgress .bg-white.rounded {
        padding: 1.5rem !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #processProgress .d-flex.justify-content-between {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    #processProgress .d-flex.justify-content-between:last-child {
        border-bottom: none;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Compact layout for better readability */
    #processProgress .row {
        margin: 0;
    }
    
    #processProgress .col-12 {
        padding: 0;
    }
    
    /* Compact design */
    #processProgress .bg-white.rounded {
        padding: 1rem !important;
        margin-bottom: 0.75rem;
    }
    
    /* Make badges smaller and readable */
    #processProgress .badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
        min-width: 100px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        margin: 0 auto;
    }
    
    /* Compact text size */
    #processProgress h6 {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }
    
    /* Compact labels */
    #processProgress strong {
        font-size: 0.9rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Ensure no overflow */
    #processProgress .bg-white.rounded {
        overflow: hidden;
        word-wrap: break-word;
    }
    
    /* Make progress bars smaller */
    #processProgress .progress {
        height: 8px !important;
        margin-bottom: 0.25rem;
        border-radius: 4px;
    }
    
    /* Better spacing for compact layout */
    #processProgress .col-md-4 {
        padding: 0 0.75rem;
    }
    
    /* Prevent overlap on laptop */
    #processProgress .text-center {
        padding: 0.5rem;
    }
    
    #processProgress .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    /* Improve progress bars */
    #processProgress .progress {
        height: 15px !important;
        border-radius: 8px;
        background-color: #f8f9fa;
    }
    
    #processProgress .progress-bar {
        border-radius: 8px;
    }
    
    #processProgress .d-flex.justify-content-between small {
        font-size: 0.85rem;
        font-weight: 600;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991px) {
    #processProgress .text-center {
        flex: 1;
        min-width: 120px;
        margin-bottom: 1rem;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1.25rem !important;
        border-radius: 8px;
    }
    
    #processProgress h3 {
        font-size: 2rem;
        font-weight: 700;
    }
    
    #processProgress small {
        font-size: 0.85rem;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1.25rem !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #processProgress .progress {
        height: 12px !important;
    }
    
    /* Improve spacing for tablets */
    #processProgress .row {
        margin: 0 -0.5rem;
    }
    
    #processProgress .col-md-12 {
        padding: 0 0.5rem;
        margin-bottom: 1rem;
    }
    
    #processProgress .col-md-12:last-child {
        margin-bottom: 0;
    }
}

/* Mobile optimizations */
@media (max-width: 767px) {
    #processProgress .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #processProgress .text-center {
        flex: 1;
        min-width: 100px;
        margin-bottom: 0.75rem;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1rem !important;
        border-radius: 6px;
    }
    
    #processProgress h3 {
        font-size: 1.75rem;
        font-weight: 700;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1rem !important;
    }
    
    #processProgress .progress {
        height: 10px !important;
    }
    
    #processProgress .badge {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
}

/* Extra large screens (>1200px) */
@media (min-width: 1201px) {
    #processProgress .col-xl-3 {
        margin-bottom: 1.5rem;
    }
    
    #processProgress .border.rounded {
        padding: 2rem !important;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    #processProgress small {
        font-size: 1.1rem;
    }
    
    /* Improve table responsiveness for large screens */
    #processProgress .table-responsive {
        font-size: 1.1rem;
    }
    
    #processProgress .table td {
        padding: 1.25rem 1rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 1rem;
        padding: 0.625rem 1.25rem;
    }
    
    /* Improve progress bars for large screens */
    #processProgress .progress {
        height: 18px !important;
        margin-bottom: 1.25rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 1rem;
    }
    
    #processProgress small {
        font-size: 1.05rem;
    }
    
    /* Specific optimizations for sume and progress sections on large screens */
    #processProgress .col-12 {
        padding: 0;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1.5rem !important;
        max-width: 100%;
        overflow: hidden;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        min-width: 120px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        margin: 0 auto;
    }
    
    #processProgress h6 {
        font-size: 1rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    
    /* Labels for large screens */
    #processProgress strong {
        font-size: 0.9rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Progress bars for large screens */
    #processProgress .progress {
        height: 10px !important;
        margin-bottom: 0.5rem;
        border-radius: 5px;
    }
    
    /* Force no overflow */
    #processProgress .row {
        overflow: hidden;
    }
    
    #processProgress .col-12 {
        overflow: hidden;
    }
    
    /* Better spacing for large screens */
    #processProgress .col-md-4 {
        padding: 0 1rem;
    }
    
    /* Prevent overlap on large screens */
    #processProgress .text-center {
        padding: 0.75rem;
    }
    
    #processProgress .mb-3 {
        margin-bottom: 1.5rem !important;
    }
}

/* Laptop screens (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
    #processProgress .col-lg-4 {
        margin-bottom: 1rem;
    }
    
    #processProgress .border.rounded {
        padding: 1.5rem !important;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 1rem;
    }
    
    /* Improve table responsiveness for laptops */
    #processProgress .table-responsive {
        font-size: 1rem;
    }
    
    #processProgress .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Improve progress bars for laptops */
    #processProgress .progress {
        height: 15px !important;
        margin-bottom: 1rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 0.95rem;
    }
    
    /* Improve spacing for laptop layout */
    #processProgress .row {
        margin: 0 -0.5rem;
    }
    
    #processProgress .col-lg-4 {
        padding: 0 0.5rem;
    }
    
    #processProgress .col-lg-6 {
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    /* Improve progress cards layout */
    #processProgress .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    #processProgress .border.rounded {
        padding: 1rem !important;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Improve table responsiveness in process progress */
    #processProgress .table-responsive {
        font-size: 0.875rem;
    }
    
    #processProgress .table td {
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Improve progress bars */
    #processProgress .progress {
        height: 10px !important;
        margin-bottom: 0.5rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.25rem;
    }
    
    #processProgress small {
        font-size: 0.75rem;
    }
}

/* Tablet screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #processProgress .col-lg-6 {
        margin-bottom: 1.5rem;
    }
    
    #processProgress .border.rounded {
        padding: 1.5rem !important;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 1rem;
    }
    
    /* Improve table responsiveness for tablets */
    #processProgress .table-responsive {
        font-size: 1rem;
    }
    
    #processProgress .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Improve progress bars for tablets */
    #processProgress .progress {
        height: 15px !important;
        margin-bottom: 1rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    /* Extra small screen improvements for process progress */
    #processProgress .border.rounded {
        padding: 0.75rem !important;
        min-height: 70px;
    }
    
    #processProgress h4 {
        font-size: 1.25rem;
    }
    
    #processProgress .table {
        font-size: 0.8rem;
    }
    
    #processProgress .table td {
        padding: 0.375rem 0.25rem;
    }
    
    #processProgress .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* Improve progress section spacing */
    #processProgress .row {
        margin: 0;
    }
    
    #processProgress .col-lg-6,
    #processProgress .col-md-12 {
        padding: 0.5rem;
    }
}

/* Navigation */
.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

.nav-link {
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-1px);
}

/* Cards */
.card:not(.dashboard-card) {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:not(.dashboard-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
}

/* Stats Cards */
.card.bg-primary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning {
    background: linear-gradient(135deg, var(--primary-color), #0a58ca) !important;
}

.card.bg-success {
    background: linear-gradient(135deg, var(--success-color), #146c43) !important;
}

.card.bg-danger {
    background: linear-gradient(135deg, var(--danger-color), #b02a37) !important;
}

.card.bg-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffca2c) !important;
    color: #000 !important;
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #0a58ca);
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color), #146c43);
    border: none;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #b02a37);
    border: none;
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffca2c);
    border: none;
    color: #000;
}

/* Forms */
.form-control,
.form-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Task Items */
.task-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.task-item:hover {
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.task-priority-urgenta {
    border-left: 4px solid var(--danger-color);
}

.task-priority-normala {
    border-left: 4px solid var(--warning-color);
}

.task-priority-scazuta {
    border-left: 4px solid var(--success-color);
}

.task-status-realizata {
    opacity: 0.7;
    background-color: #f8f9fa;
}

.task-status-expirata {
    background-color: #fff5f5;
    border-color: var(--danger-color);
}

/* Project Items */
.project-item {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.project-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: #007bff;
}

.project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #007bff, #0056b3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-item:hover::before {
    opacity: 1;
}

.project-item .card-body {
    padding: 0;
}

.project-item .progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.project-item .progress-bar {
    border-radius: 4px;
    transition: width 0.6s ease;
}

.project-item .badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
}

.project-item .btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* Analytics Cards */
.analytics-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.analytics-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.analytics-card:hover::before {
    transform: rotate(45deg) scale(1.2);
}

/* Project Search and Filter */
.project-search-container {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.project-search-container .form-control {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.project-search-container .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.project-filter-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.project-filter-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Project Stats Cards */
.project-stats-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.project-stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.project-stats-card .card-body {
    padding: 1.5rem;
}

.project-stats-card h4 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.project-stats-card p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.project-stats-card i {
    font-size: 2.5rem;
    opacity: 0.8;
}

/* Project Analytics Table */
.analytics-table {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.analytics-table .table {
    margin-bottom: 0;
}

.analytics-table .table th {
    background: #f8f9fa;
    border: none;
    font-weight: 600;
    color: #495057;
}

.analytics-table .table td {
    border: none;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

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

/* Project Tabs */
.nav-tabs .nav-link {
    border: none;
    border-radius: 8px 8px 0 0;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: #007bff;
    background-color: #f8f9fa;
}

.nav-tabs .nav-link.active {
    color: #007bff;
    background-color: #fff;
    border-bottom: 3px solid #007bff;
}

/* Export Button */
.btn-export {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    color: white;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.btn-export:hover {
    background: linear-gradient(135deg, #218838, #1ea085);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40,167,69,0.3);
    color: white;
}

/* Analytics Charts */
.analytics-chart-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.analytics-chart-container canvas {
    max-height: 300px;
}

.progress {
    height: 8px;
    border-radius: 4px;
}

.progress-bar {
    border-radius: 4px;
}

/* Stage Items */
.stage-item {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.stage-item.completed {
    background-color: #d1edff;
    border-color: var(--success-color);
}

.stage-item.current {
    background-color: #fff3cd;
    border-color: var(--warning-color);
}

/* Chat - �mbunata?it */
.chat-room-item {
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
    border-radius: 12px;
    margin: 4px 6px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.chat-room-item:hover {
    background-color: #f8f9fa;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #dee2e6;
}

.chat-room-item.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-left: 6px solid #ffc107;
    transform: translateX(0);
    box-shadow: 0 6px 20px rgba(0,123,255,0.4);
    border: 2px solid rgba(255,255,255,0.2);
}

.chat-room-item.active:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 6px 16px rgba(0,123,255,0.4);
}

.chat-message {
    border-left: 4px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fff;
    margin-bottom: 8px;
    padding: 12px 16px 20px 16px;
    border-radius: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
    position: relative;
    animation: fadeInUp 0.4s ease-out;
    line-height: 1.5;
    font-size: 0.95rem;
    max-width: 85%;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.chat-message.own {
    background: linear-gradient(135deg, #e8f0f8 0%, #f0f5fa 100%);
    color: #2c3e50;
    margin-left: auto;
    margin-right: 0;
    padding: 12px 16px 20px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Reduce spa?ierea �ntre mesajele de la acela?i operator */
.chat-message.own + .chat-message.own {
    margin-top: 8px;
}

.chat-message.other + .chat-message.other {
    margin-top: 8px;
}

/* Mare?te spa?ierea �ntre mesajele de la operatori diferi?i */
.chat-message.own + .chat-message.other,
.chat-message.other + .chat-message.own {
    margin-top: 20px;
}
.chat-message.user-color-1 { background: linear-gradient(135deg, #f5f0f8 80%, #f8f5fa 100%); } /* pastel violet mai pal */
.chat-message.user-color-2 { background: linear-gradient(135deg, #e6f3ff 80%, #fff0f6 100%); }
.chat-message.user-color-3 { background: linear-gradient(135deg, #e6ffe6 80%, #f0fff4 100%); }
.chat-message.user-color-4 { background: linear-gradient(135deg, #fff0e6 80%, #f3f4fd 100%); }
.chat-message.user-color-5 { background: linear-gradient(135deg, #ffe6f0 80%, #fffde0 100%); }

.chat-message:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    background: #f8fafd;
}

.chat-message .message-content {
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
    letter-spacing: 0.1px;
    margin-bottom: 0;
}

.chat-attachment {
    display: flex !important;
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 0 0;
    box-shadow: none;
    transition: none;
}
.chat-attachment a {
    color: #6b8fb8;
    font-weight: 500;
    text-decoration: none;
    opacity: 1 !important;
    background: none !important;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.04rem;
    padding: 0;
    margin: 0;
}
.chat-attachment a:hover {
    text-decoration: underline;
    background: none !important;
}
.chat-attachment i.fas.fa-file-arrow-down {
    font-size: 1.3rem;
    color: #6b8fb8;
    margin-right: 8px;
}
.chat-attachment .flex-grow-1 {
    font-size: 1.04rem;
    color: #222;
    margin-left: 2px;
}
.chat-attachment .ms-auto i.fa-download {
    color: #6b8fb8;
    font-size: 1rem;
}

/* Modernizez ETi inputul de fiETier */
#chatFileInput {
    border-radius: 8px;
    background: #f4f6fb;
    border: 1.5px solid #d1d7e6;
    padding: 8px;
    font-size: 1rem;
}
#attachFileButton {
    border-radius: 8px;
    margin-left: 8px;
    font-weight: 500;
    background: linear-gradient(135deg, #e3e9f7 80%, #f4f6fb 100%);
    color: #6b8fb8;
    border: 1.5px solid #d1d7e6;
    transition: background 0.2s, color 0.2s;
}
#attachFileButton:hover {
    background: #e9ecef;
    color: #0d47a1;
}

/* Culori pastelate pentru alE>i utilizatori (max 5) */
.chat-message.user-color-1 { background-color: #f5f0f8; color: #222; } /* pastel violet mai pal */
.chat-message.user-color-2 { background-color: #e6f3ff; color: #222; } /* pastel pink */
.chat-message.user-color-3 { background-color: #e6ffe6; color: #222; } /* pastel green */
.chat-message.user-color-4 { background-color: #fff0e6; color: #222; } /* pastel purple */
.chat-message.user-color-5 { background-color: #ffe6f0; color: #222; } /* pastel yellow */

.chat-message.other {
    background-color: #f4f6fb;
    color: #222;
}

/* Adauga o margine colorata �n st�nga pentru claritate */
.chat-message {
    border-left: 6px solid transparent;
}
/* Eliminat complet border-left pentru toate culorile */

.chat-message-time {
    font-size: 0.55rem;
    color: #9ca3af;
    opacity: 0.7;
    position: absolute;
    bottom: 2px;
    left: 12px;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
    background: transparent;
}

.chat-message.own .chat-message-time {
    left: auto;
    right: 12px;
}

.chat-message.own + .message-time {
    text-align: center;
    width: 100%;
}

.chat-message.other + .message-time {
    text-align: center;
    width: 100%;
}

/* Responsive Sidebar */
@media (max-width: 1200px) {
    .chat-sidebar {
        position: fixed;
        left: -350px;
        top: 80px;
        height: calc(100vh - 80px);
        z-index: 1040;
        background: var(--bg-secondary);
        box-shadow: var(--shadow-lg);
    }
    
    .chat-sidebar.show {
        left: 0;
    }
    
    .chat-main {
        margin-left: 0;
    }
}

/* Mobile Chat Styles */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 60px);
        margin-top: 60px;
        border-radius: 0;
    }
    
    .chat-sidebar {
        width: 100%;
        position: absolute;
        top: 0;
        left: -100%;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s;
    }
    
    .chat-sidebar.show {
        left: 0;
    }
    
    .chat-messages {
        padding: 1rem;
    }
    
    .message-content {
        max-width: 85%;
    }
    
    .chat-input {
        padding: 1rem;
    }
    
    /* �mbunata?iri pentru mobil */
    .chat-message {
        margin-bottom: 1rem;
        padding: 1rem 1.25rem;
    }
    
    .message-content {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .message-sender {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        letter-spacing: 0.3px;
    }
    
    .message-time {
        font-size: 0.65rem;
        margin-top: 3px;
        letter-spacing: 0.1px;
        text-align: center;
    }
    
    /* Buton pentru toggle sidebar pe mobil */
    .btn-toggle-sidebar {
        display: block !important;
        background: none;
        border: none;
        color: white;
        font-size: 1.2rem;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .btn-toggle-sidebar:hover {
        background: rgba(255,255,255,0.1);
    }
    
    /* Overlay pentru sidebar pe mobil */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.show {
        display: block;
    }
    
    /* �mbunata?iri pentru input pe mobil */
    .chat-input .input-group {
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .chat-input .form-control {
        border: none;
        padding: 0.75rem 3.5rem 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .chat-input .btn-send {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        background: var(--primary-color);
        border: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .chat-input .btn-send:hover {
        transform: translateY(-50%) scale(1.1);
        background: #0056b3;
    }
    
    /* Badge pentru mesaje necitite pe mobil */
    .unread-badge {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        background: var(--danger-color);
        color: white;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 600;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    /* Status indicator pentru mesaje citite */
    .message-read-status {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-top: 0.25rem;
    }
    
    .chat-message.own .message-read-status {
        color: rgba(255,255,255,0.8);
    }
    
    /* Typing indicator pe mobil */
    .typing-indicator {
        padding: 0.5rem 1rem;
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.8rem;
        background: rgba(108, 117, 125, 0.1);
        border-radius: 12px;
        margin: 0.5rem 0;
    }
}

/* Offcanvas for Mobile */
.offcanvas {
    background: var(--bg-secondary);
    border: none;
    box-shadow: var(--shadow-xl);
}

.offcanvas-header {
    background: var(--primary-gradient);
    color: white;
    border-bottom: 1px solid var(--border-color);
}

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

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    .btn, .nav-link, .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve form controls touch targets */
    .form-control, .form-select {
        min-height: 44px;
    }
    
    /* Improve table touch targets */
    .table td, .table th {
        min-height: 44px;
        vertical-align: middle;
    }
}

/* Improve scrolling on mobile */
@media (max-width: 768px) {
    .card, .modal-content {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Improve sidebar scrolling */
    #right-sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* Improve container responsiveness */
.container-fluid {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Improve table responsiveness */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Improve image responsiveness */
img {
    max-width: 100%;
    height: auto;
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .card, .btn, .nav-link {
        transition: none;
    }
    
    /* Optimize shadows for mobile */
    .card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Reduce border radius for better touch experience */
    .btn, .form-control, .card {
        border-radius: 6px;
    }
}

/* Improve text readability on small screens */
@media (max-width: 576px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Improve text contrast */
    .text-muted {
        color: #6c757d !important;
    }
    
    /* Improve button text */
    .btn {
        font-weight: 500;
    }
}

/* Specific improvements for Process Progress section */

/* Laptop and desktop optimizations for new layout */
@media (min-width: 992px) {
    #processProgress .d-flex.justify-content-between {
        gap: 1rem;
    }
    
    #processProgress .text-center {
        flex: 1;
        min-width: 140px;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1.5rem !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
    }
    
    #processProgress .bg-primary:hover,
    #processProgress .bg-info:hover,
    #processProgress .bg-success:hover,
    #processProgress .bg-warning:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    #processProgress h3 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    #processProgress small {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    /* Improve sume section */
    #processProgress .bg-white.rounded {
        padding: 1.5rem !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #processProgress .d-flex.justify-content-between {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    #processProgress .d-flex.justify-content-between:last-child {
        border-bottom: none;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Compact layout for better readability */
    #processProgress .row {
        margin: 0;
    }
    
    #processProgress .col-12 {
        padding: 0;
    }
    
    /* Compact design */
    #processProgress .bg-white.rounded {
        padding: 1rem !important;
        margin-bottom: 0.75rem;
    }
    
    /* Make badges smaller and readable */
    #processProgress .badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
        min-width: 100px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        margin: 0 auto;
    }
    
    /* Compact text size */
    #processProgress h6 {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }
    
    /* Compact labels */
    #processProgress strong {
        font-size: 0.9rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Ensure no overflow */
    #processProgress .bg-white.rounded {
        overflow: hidden;
        word-wrap: break-word;
    }
    
    /* Make progress bars smaller */
    #processProgress .progress {
        height: 8px !important;
        margin-bottom: 0.25rem;
        border-radius: 4px;
    }
    
    /* Better spacing for compact layout */
    #processProgress .col-md-4 {
        padding: 0 0.75rem;
    }
    
    /* Prevent overlap on laptop */
    #processProgress .text-center {
        padding: 0.5rem;
    }
    
    #processProgress .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    /* Improve progress bars */
    #processProgress .progress {
        height: 15px !important;
        border-radius: 8px;
        background-color: #f8f9fa;
    }
    
    #processProgress .progress-bar {
        border-radius: 8px;
    }
    
    #processProgress .d-flex.justify-content-between small {
        font-size: 0.85rem;
        font-weight: 600;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991px) {
    #processProgress .text-center {
        flex: 1;
        min-width: 120px;
        margin-bottom: 1rem;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1.25rem !important;
        border-radius: 8px;
    }
    
    #processProgress h3 {
        font-size: 2rem;
        font-weight: 700;
    }
    
    #processProgress small {
        font-size: 0.85rem;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1.25rem !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #processProgress .progress {
        height: 12px !important;
    }
    
    /* Improve spacing for tablets */
    #processProgress .row {
        margin: 0 -0.5rem;
    }
    
    #processProgress .col-md-12 {
        padding: 0 0.5rem;
        margin-bottom: 1rem;
    }
    
    #processProgress .col-md-12:last-child {
        margin-bottom: 0;
    }
}

/* Mobile optimizations */
@media (max-width: 767px) {
    #processProgress .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #processProgress .text-center {
        flex: 1;
        min-width: 100px;
        margin-bottom: 0.75rem;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1rem !important;
        border-radius: 6px;
    }
    
    #processProgress h3 {
        font-size: 1.75rem;
        font-weight: 700;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1rem !important;
    }
    
    #processProgress .progress {
        height: 10px !important;
    }
    
    #processProgress .badge {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
}

/* Extra large screens (>1200px) */
@media (min-width: 1201px) {
    #processProgress .col-xl-3 {
        margin-bottom: 1.5rem;
    }
    
    #processProgress .border.rounded {
        padding: 2rem !important;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    #processProgress small {
        font-size: 1.1rem;
    }
    
    /* Improve table responsiveness for large screens */
    #processProgress .table-responsive {
        font-size: 1.1rem;
    }
    
    #processProgress .table td {
        padding: 1.25rem 1rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 1rem;
        padding: 0.625rem 1.25rem;
    }
    
    /* Improve progress bars for large screens */
    #processProgress .progress {
        height: 18px !important;
        margin-bottom: 1.25rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 1rem;
    }
    
    #processProgress small {
        font-size: 1.05rem;
    }
    
    /* Specific optimizations for sume and progress sections on large screens */
    #processProgress .col-12 {
        padding: 0;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1.5rem !important;
        max-width: 100%;
        overflow: hidden;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        min-width: 120px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        margin: 0 auto;
    }
    
    #processProgress h6 {
        font-size: 1rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    
    /* Labels for large screens */
    #processProgress strong {
        font-size: 0.9rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Progress bars for large screens */
    #processProgress .progress {
        height: 10px !important;
        margin-bottom: 0.5rem;
        border-radius: 5px;
    }
    
    /* Force no overflow */
    #processProgress .row {
        overflow: hidden;
    }
    
    #processProgress .col-12 {
        overflow: hidden;
    }
    
    /* Better spacing for large screens */
    #processProgress .col-md-4 {
        padding: 0 1rem;
    }
    
    /* Prevent overlap on large screens */
    #processProgress .text-center {
        padding: 0.75rem;
    }
    
    #processProgress .mb-3 {
        margin-bottom: 1.5rem !important;
    }
}

/* Laptop screens (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
    #processProgress .col-lg-4 {
        margin-bottom: 1rem;
    }
    
    #processProgress .border.rounded {
        padding: 1.5rem !important;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 1rem;
    }
    
    /* Improve table responsiveness for laptops */
    #processProgress .table-responsive {
        font-size: 1rem;
    }
    
    #processProgress .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Improve progress bars for laptops */
    #processProgress .progress {
        height: 15px !important;
        margin-bottom: 1rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 0.95rem;
    }
    
    /* Improve spacing for laptop layout */
    #processProgress .row {
        margin: 0 -0.5rem;
    }
    
    #processProgress .col-lg-4 {
        padding: 0 0.5rem;
    }
    
    #processProgress .col-lg-6 {
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    /* Improve progress cards layout */
    #processProgress .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    #processProgress .border.rounded {
        padding: 1rem !important;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Improve table responsiveness in process progress */
    #processProgress .table-responsive {
        font-size: 0.875rem;
    }
    
    #processProgress .table td {
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Improve progress bars */
    #processProgress .progress {
        height: 10px !important;
        margin-bottom: 0.5rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.25rem;
    }
    
    #processProgress small {
        font-size: 0.75rem;
    }
}

/* Tablet screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #processProgress .col-lg-6 {
        margin-bottom: 1.5rem;
    }
    
    #processProgress .border.rounded {
        padding: 1.5rem !important;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 1rem;
    }
    
    /* Improve table responsiveness for tablets */
    #processProgress .table-responsive {
        font-size: 1rem;
    }
    
    #processProgress .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Improve progress bars for tablets */
    #processProgress .progress {
        height: 15px !important;
        margin-bottom: 1rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    /* Extra small screen improvements for process progress */
    #processProgress .border.rounded {
        padding: 0.75rem !important;
        min-height: 70px;
    }
    
    #processProgress h4 {
        font-size: 1.25rem;
    }
    
    #processProgress .table {
        font-size: 0.8rem;
    }
    
    #processProgress .table td {
        padding: 0.375rem 0.25rem;
    }
    
    #processProgress .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* Improve progress section spacing */
    #processProgress .row {
        margin: 0;
    }
    
    #processProgress .col-lg-6,
    #processProgress .col-md-12 {
        padding: 0.5rem;
    }
}

/* Navigation */
.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

.nav-link {
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-1px);
}

/* Cards */
.card:not(.dashboard-card) {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:not(.dashboard-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
}

/* Stats Cards */
.card.bg-primary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning {
    background: linear-gradient(135deg, var(--primary-color), #0a58ca) !important;
}

.card.bg-success {
    background: linear-gradient(135deg, var(--success-color), #146c43) !important;
}

.card.bg-danger {
    background: linear-gradient(135deg, var(--danger-color), #b02a37) !important;
}

.card.bg-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffca2c) !important;
    color: #000 !important;
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #0a58ca);
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color), #146c43);
    border: none;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #b02a37);
    border: none;
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffca2c);
    border: none;
    color: #000;
}

/* Forms */
.form-control,
.form-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Task Items */
.task-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.task-item:hover {
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.task-priority-urgenta {
    border-left: 4px solid var(--danger-color);
}

.task-priority-normala {
    border-left: 4px solid var(--warning-color);
}

.task-priority-scazuta {
    border-left: 4px solid var(--success-color);
}

.task-status-realizata {
    opacity: 0.7;
    background-color: #f8f9fa;
}

.task-status-expirata {
    background-color: #fff5f5;
    border-color: var(--danger-color);
}

/* Project Items */
.project-item {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.project-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: #007bff;
}

.project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #007bff, #0056b3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-item:hover::before {
    opacity: 1;
}

.project-item .card-body {
    padding: 0;
}

.project-item .progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.project-item .progress-bar {
    border-radius: 4px;
    transition: width 0.6s ease;
}

.project-item .badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
}

.project-item .btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* Analytics Cards */
.analytics-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.analytics-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.analytics-card:hover::before {
    transform: rotate(45deg) scale(1.2);
}

/* Project Search and Filter */
.project-search-container {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.project-search-container .form-control {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.project-search-container .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.project-filter-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.project-filter-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Project Stats Cards */
.project-stats-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.project-stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.project-stats-card .card-body {
    padding: 1.5rem;
}

.project-stats-card h4 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.project-stats-card p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.project-stats-card i {
    font-size: 2.5rem;
    opacity: 0.8;
}

/* Project Analytics Table */
.analytics-table {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.analytics-table .table {
    margin-bottom: 0;
}

.analytics-table .table th {
    background: #f8f9fa;
    border: none;
    font-weight: 600;
    color: #495057;
}

.analytics-table .table td {
    border: none;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

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

/* Project Tabs */
.nav-tabs .nav-link {
    border: none;
    border-radius: 8px 8px 0 0;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: #007bff;
    background-color: #f8f9fa;
}

.nav-tabs .nav-link.active {
    color: #007bff;
    background-color: #fff;
    border-bottom: 3px solid #007bff;
}

/* Export Button */
.btn-export {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    color: white;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.btn-export:hover {
    background: linear-gradient(135deg, #218838, #1ea085);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40,167,69,0.3);
    color: white;
}

/* Analytics Charts */
.analytics-chart-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.analytics-chart-container canvas {
    max-height: 300px;
}

.progress {
    height: 8px;
    border-radius: 4px;
}

.progress-bar {
    border-radius: 4px;
}

/* Stage Items */
.stage-item {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.stage-item.completed {
    background-color: #d1edff;
    border-color: var(--success-color);
}

.stage-item.current {
    background-color: #fff3cd;
    border-color: var(--warning-color);
}

/* Chat - �mbunata?it */
.chat-room-item {
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
    border-radius: 12px;
    margin: 4px 6px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.chat-room-item:hover {
    background-color: #f8f9fa;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #dee2e6;
}

.chat-room-item.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-left: 6px solid #ffc107;
    transform: translateX(0);
    box-shadow: 0 6px 20px rgba(0,123,255,0.4);
    border: 2px solid rgba(255,255,255,0.2);
}

.chat-room-item.active:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 6px 16px rgba(0,123,255,0.4);
}

.chat-message {
    border-left: 4px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fff;
    margin-bottom: 8px;
    padding: 12px 16px 20px 16px;
    border-radius: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
    position: relative;
    animation: fadeInUp 0.4s ease-out;
    line-height: 1.5;
    font-size: 0.95rem;
    max-width: 85%;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.chat-message.own {
    background: linear-gradient(135deg, #e8f0f8 0%, #f0f5fa 100%);
    color: #2c3e50;
    margin-left: auto;
    margin-right: 0;
    padding: 12px 16px 20px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Reduce spa?ierea �ntre mesajele de la acela?i operator */
.chat-message.own + .chat-message.own {
    margin-top: 8px;
}

.chat-message.other + .chat-message.other {
    margin-top: 8px;
}

/* Mare?te spa?ierea �ntre mesajele de la operatori diferi?i */
.chat-message.own + .chat-message.other,
.chat-message.other + .chat-message.own {
    margin-top: 20px;
}
.chat-message.user-color-1 { background: linear-gradient(135deg, #f5f0f8 80%, #f8f5fa 100%); } /* pastel violet mai pal */
.chat-message.user-color-2 { background: linear-gradient(135deg, #e6f3ff 80%, #fff0f6 100%); }
.chat-message.user-color-3 { background: linear-gradient(135deg, #e6ffe6 80%, #f0fff4 100%); }
.chat-message.user-color-4 { background: linear-gradient(135deg, #fff0e6 80%, #f3f4fd 100%); }
.chat-message.user-color-5 { background: linear-gradient(135deg, #ffe6f0 80%, #fffde0 100%); }

.chat-message:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    background: #f8fafd;
}

.chat-message .message-content {
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
    letter-spacing: 0.1px;
    margin-bottom: 0;
}

.chat-attachment {
    display: flex !important;
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 0 0;
    box-shadow: none;
    transition: none;
}
.chat-attachment a {
    color: #6b8fb8;
    font-weight: 500;
    text-decoration: none;
    opacity: 1 !important;
    background: none !important;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.04rem;
    padding: 0;
    margin: 0;
}
.chat-attachment a:hover {
    text-decoration: underline;
    background: none !important;
}
.chat-attachment i.fas.fa-file-arrow-down {
    font-size: 1.3rem;
    color: #6b8fb8;
    margin-right: 8px;
}
.chat-attachment .flex-grow-1 {
    font-size: 1.04rem;
    color: #222;
    margin-left: 2px;
}
.chat-attachment .ms-auto i.fa-download {
    color: #6b8fb8;
    font-size: 1rem;
}

/* Modernizez ETi inputul de fiETier */
#chatFileInput {
    border-radius: 8px;
    background: #f4f6fb;
    border: 1.5px solid #d1d7e6;
    padding: 8px;
    font-size: 1rem;
}
#attachFileButton {
    border-radius: 8px;
    margin-left: 8px;
    font-weight: 500;
    background: linear-gradient(135deg, #e3e9f7 80%, #f4f6fb 100%);
    color: #6b8fb8;
    border: 1.5px solid #d1d7e6;
    transition: background 0.2s, color 0.2s;
}
#attachFileButton:hover {
    background: #e9ecef;
    color: #0d47a1;
}

/* Culori pastelate pentru alE>i utilizatori (max 5) */
.chat-message.user-color-1 { background-color: #f5f0f8; color: #222; } /* pastel violet mai pal */
.chat-message.user-color-2 { background-color: #e6f3ff; color: #222; } /* pastel pink */
.chat-message.user-color-3 { background-color: #e6ffe6; color: #222; } /* pastel green */
.chat-message.user-color-4 { background-color: #fff0e6; color: #222; } /* pastel purple */
.chat-message.user-color-5 { background-color: #ffe6f0; color: #222; } /* pastel yellow */

.chat-message.other {
    background-color: #f4f6fb;
    color: #222;
}

/* Adauga o margine colorata �n st�nga pentru claritate */
.chat-message {
    border-left: 6px solid transparent;
}
/* Eliminat complet border-left pentru toate culorile */

.chat-message-time {
    font-size: 0.55rem;
    color: #9ca3af;
    opacity: 0.7;
    position: absolute;
    bottom: 2px;
    left: 12px;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
    background: transparent;
}

.chat-message.own .chat-message-time {
    left: auto;
    right: 12px;
}

.chat-message.own + .message-time {
    text-align: center;
    width: 100%;
}

.chat-message.other + .message-time {
    text-align: center;
    width: 100%;
}

/* Responsive Sidebar */
@media (max-width: 1200px) {
    .chat-sidebar {
        position: fixed;
        left: -350px;
        top: 80px;
        height: calc(100vh - 80px);
        z-index: 1040;
        background: var(--bg-secondary);
        box-shadow: var(--shadow-lg);
    }
    
    .chat-sidebar.show {
        left: 0;
    }
    
    .chat-main {
        margin-left: 0;
    }
}

/* Mobile Chat Styles */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 60px);
        margin-top: 60px;
        border-radius: 0;
    }
    
    .chat-sidebar {
        width: 100%;
        position: absolute;
        top: 0;
        left: -100%;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s;
    }
    
    .chat-sidebar.show {
        left: 0;
    }
    
    .chat-messages {
        padding: 1rem;
    }
    
    .message-content {
        max-width: 85%;
    }
    
    .chat-input {
        padding: 1rem;
    }
    
    /* �mbunata?iri pentru mobil */
    .chat-message {
        margin-bottom: 1rem;
        padding: 1rem 1.25rem;
    }
    
    .message-content {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .message-sender {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        letter-spacing: 0.3px;
    }
    
    .message-time {
        font-size: 0.65rem;
        margin-top: 3px;
        letter-spacing: 0.1px;
        text-align: center;
    }
    
    /* Buton pentru toggle sidebar pe mobil */
    .btn-toggle-sidebar {
        display: block !important;
        background: none;
        border: none;
        color: white;
        font-size: 1.2rem;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .btn-toggle-sidebar:hover {
        background: rgba(255,255,255,0.1);
    }
    
    /* Overlay pentru sidebar pe mobil */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.show {
        display: block;
    }
    
    /* �mbunata?iri pentru input pe mobil */
    .chat-input .input-group {
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .chat-input .form-control {
        border: none;
        padding: 0.75rem 3.5rem 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .chat-input .btn-send {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        background: var(--primary-color);
        border: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .chat-input .btn-send:hover {
        transform: translateY(-50%) scale(1.1);
        background: #0056b3;
    }
    
    /* Badge pentru mesaje necitite pe mobil */
    .unread-badge {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        background: var(--danger-color);
        color: white;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 600;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    /* Status indicator pentru mesaje citite */
    .message-read-status {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-top: 0.25rem;
    }
    
    .chat-message.own .message-read-status {
        color: rgba(255,255,255,0.8);
    }
    
    /* Typing indicator pe mobil */
    .typing-indicator {
        padding: 0.5rem 1rem;
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.8rem;
        background: rgba(108, 117, 125, 0.1);
        border-radius: 12px;
        margin: 0.5rem 0;
    }
}

/* Offcanvas for Mobile */
.offcanvas {
    background: var(--bg-secondary);
    border: none;
    box-shadow: var(--shadow-xl);
}

.offcanvas-header {
    background: var(--primary-gradient);
    color: white;
    border-bottom: 1px solid var(--border-color);
}

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

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    .btn, .nav-link, .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve form controls touch targets */
    .form-control, .form-select {
        min-height: 44px;
    }
    
    /* Improve table touch targets */
    .table td, .table th {
        min-height: 44px;
        vertical-align: middle;
    }
}

/* Improve scrolling on mobile */
@media (max-width: 768px) {
    .card, .modal-content {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Improve sidebar scrolling */
    #right-sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* Improve container responsiveness */
.container-fluid {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Improve table responsiveness */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Improve image responsiveness */
img {
    max-width: 100%;
    height: auto;
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .card, .btn, .nav-link {
        transition: none;
    }
    
    /* Optimize shadows for mobile */
    .card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Reduce border radius for better touch experience */
    .btn, .form-control, .card {
        border-radius: 6px;
    }
}

/* Improve text readability on small screens */
@media (max-width: 576px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Improve text contrast */
    .text-muted {
        color: #6c757d !important;
    }
    
    /* Improve button text */
    .btn {
        font-weight: 500;
    }
}

/* Specific improvements for Process Progress section */

/* Laptop and desktop optimizations for new layout */
@media (min-width: 992px) {
    #processProgress .d-flex.justify-content-between {
        gap: 1rem;
    }
    
    #processProgress .text-center {
        flex: 1;
        min-width: 140px;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1.5rem !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
    }
    
    #processProgress .bg-primary:hover,
    #processProgress .bg-info:hover,
    #processProgress .bg-success:hover,
    #processProgress .bg-warning:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    #processProgress h3 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    #processProgress small {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    /* Improve sume section */
    #processProgress .bg-white.rounded {
        padding: 1.5rem !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #processProgress .d-flex.justify-content-between {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    #processProgress .d-flex.justify-content-between:last-child {
        border-bottom: none;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Compact layout for better readability */
    #processProgress .row {
        margin: 0;
    }
    
    #processProgress .col-12 {
        padding: 0;
    }
    
    /* Compact design */
    #processProgress .bg-white.rounded {
        padding: 1rem !important;
        margin-bottom: 0.75rem;
    }
    
    /* Make badges smaller and readable */
    #processProgress .badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
        min-width: 100px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        margin: 0 auto;
    }
    
    /* Compact text size */
    #processProgress h6 {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }
    
    /* Compact labels */
    #processProgress strong {
        font-size: 0.9rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Ensure no overflow */
    #processProgress .bg-white.rounded {
        overflow: hidden;
        word-wrap: break-word;
    }
    
    /* Make progress bars smaller */
    #processProgress .progress {
        height: 8px !important;
        margin-bottom: 0.25rem;
        border-radius: 4px;
    }
    
    /* Better spacing for compact layout */
    #processProgress .col-md-4 {
        padding: 0 0.75rem;
    }
    
    /* Prevent overlap on laptop */
    #processProgress .text-center {
        padding: 0.5rem;
    }
    
    #processProgress .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    /* Improve progress bars */
    #processProgress .progress {
        height: 15px !important;
        border-radius: 8px;
        background-color: #f8f9fa;
    }
    
    #processProgress .progress-bar {
        border-radius: 8px;
    }
    
    #processProgress .d-flex.justify-content-between small {
        font-size: 0.85rem;
        font-weight: 600;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991px) {
    #processProgress .text-center {
        flex: 1;
        min-width: 120px;
        margin-bottom: 1rem;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1.25rem !important;
        border-radius: 8px;
    }
    
    #processProgress h3 {
        font-size: 2rem;
        font-weight: 700;
    }
    
    #processProgress small {
        font-size: 0.85rem;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1.25rem !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #processProgress .progress {
        height: 12px !important;
    }
    
    /* Improve spacing for tablets */
    #processProgress .row {
        margin: 0 -0.5rem;
    }
    
    #processProgress .col-md-12 {
        padding: 0 0.5rem;
        margin-bottom: 1rem;
    }
    
    #processProgress .col-md-12:last-child {
        margin-bottom: 0;
    }
}

/* Mobile optimizations */
@media (max-width: 767px) {
    #processProgress .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #processProgress .text-center {
        flex: 1;
        min-width: 100px;
        margin-bottom: 0.75rem;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1rem !important;
        border-radius: 6px;
    }
    
    #processProgress h3 {
        font-size: 1.75rem;
        font-weight: 700;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1rem !important;
    }
    
    #processProgress .progress {
        height: 10px !important;
    }
    
    #processProgress .badge {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
}

/* Extra large screens (>1200px) */
@media (min-width: 1201px) {
    #processProgress .col-xl-3 {
        margin-bottom: 1.5rem;
    }
    
    #processProgress .border.rounded {
        padding: 2rem !important;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    #processProgress small {
        font-size: 1.1rem;
    }
    
    /* Improve table responsiveness for large screens */
    #processProgress .table-responsive {
        font-size: 1.1rem;
    }
    
    #processProgress .table td {
        padding: 1.25rem 1rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 1rem;
        padding: 0.625rem 1.25rem;
    }
    
    /* Improve progress bars for large screens */
    #processProgress .progress {
        height: 18px !important;
        margin-bottom: 1.25rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 1rem;
    }
    
    #processProgress small {
        font-size: 1.05rem;
    }
    
    /* Specific optimizations for sume and progress sections on large screens */
    #processProgress .col-12 {
        padding: 0;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1.5rem !important;
        max-width: 100%;
        overflow: hidden;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        min-width: 120px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        margin: 0 auto;
    }
    
    #processProgress h6 {
        font-size: 1rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    
    /* Labels for large screens */
    #processProgress strong {
        font-size: 0.9rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Progress bars for large screens */
    #processProgress .progress {
        height: 10px !important;
        margin-bottom: 0.5rem;
        border-radius: 5px;
    }
    
    /* Force no overflow */
    #processProgress .row {
        overflow: hidden;
    }
    
    #processProgress .col-12 {
        overflow: hidden;
    }
    
    /* Better spacing for large screens */
    #processProgress .col-md-4 {
        padding: 0 1rem;
    }
    
    /* Prevent overlap on large screens */
    #processProgress .text-center {
        padding: 0.75rem;
    }
    
    #processProgress .mb-3 {
        margin-bottom: 1.5rem !important;
    }
}

/* Laptop screens (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
    #processProgress .col-lg-4 {
        margin-bottom: 1rem;
    }
    
    #processProgress .border.rounded {
        padding: 1.5rem !important;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 1rem;
    }
    
    /* Improve table responsiveness for laptops */
    #processProgress .table-responsive {
        font-size: 1rem;
    }
    
    #processProgress .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Improve progress bars for laptops */
    #processProgress .progress {
        height: 15px !important;
        margin-bottom: 1rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 0.95rem;
    }
    
    /* Improve spacing for laptop layout */
    #processProgress .row {
        margin: 0 -0.5rem;
    }
    
    #processProgress .col-lg-4 {
        padding: 0 0.5rem;
    }
    
    #processProgress .col-lg-6 {
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    /* Improve progress cards layout */
    #processProgress .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    #processProgress .border.rounded {
        padding: 1rem !important;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Improve table responsiveness in process progress */
    #processProgress .table-responsive {
        font-size: 0.875rem;
    }
    
    #processProgress .table td {
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Improve progress bars */
    #processProgress .progress {
        height: 10px !important;
        margin-bottom: 0.5rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.25rem;
    }
    
    #processProgress small {
        font-size: 0.75rem;
    }
}

/* Tablet screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #processProgress .col-lg-6 {
        margin-bottom: 1.5rem;
    }
    
    #processProgress .border.rounded {
        padding: 1.5rem !important;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 1rem;
    }
    
    /* Improve table responsiveness for tablets */
    #processProgress .table-responsive {
        font-size: 1rem;
    }
    
    #processProgress .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Improve progress bars for tablets */
    #processProgress .progress {
        height: 15px !important;
        margin-bottom: 1rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    /* Extra small screen improvements for process progress */
    #processProgress .border.rounded {
        padding: 0.75rem !important;
        min-height: 70px;
    }
    
    #processProgress h4 {
        font-size: 1.25rem;
    }
    
    #processProgress .table {
        font-size: 0.8rem;
    }
    
    #processProgress .table td {
        padding: 0.375rem 0.25rem;
    }
    
    #processProgress .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* Improve progress section spacing */
    #processProgress .row {
        margin: 0;
    }
    
    #processProgress .col-lg-6,
    #processProgress .col-md-12 {
        padding: 0.5rem;
    }
}

/* Navigation */
.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

.nav-link {
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-1px);
}

/* Cards */
.card:not(.dashboard-card) {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:not(.dashboard-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
}

/* Stats Cards */
.card.bg-primary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning {
    background: linear-gradient(135deg, var(--primary-color), #0a58ca) !important;
}

.card.bg-success {
    background: linear-gradient(135deg, var(--success-color), #146c43) !important;
}

.card.bg-danger {
    background: linear-gradient(135deg, var(--danger-color), #b02a37) !important;
}

.card.bg-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffca2c) !important;
    color: #000 !important;
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #0a58ca);
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color), #146c43);
    border: none;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #b02a37);
    border: none;
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffca2c);
    border: none;
    color: #000;
}

/* Forms */
.form-control,
.form-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Task Items */
.task-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.task-item:hover {
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.task-priority-urgenta {
    border-left: 4px solid var(--danger-color);
}

.task-priority-normala {
    border-left: 4px solid var(--warning-color);
}

.task-priority-scazuta {
    border-left: 4px solid var(--success-color);
}

.task-status-realizata {
    opacity: 0.7;
    background-color: #f8f9fa;
}

.task-status-expirata {
    background-color: #fff5f5;
    border-color: var(--danger-color);
}

/* Project Items */
.project-item {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.project-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: #007bff;
}

.project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #007bff, #0056b3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-item:hover::before {
    opacity: 1;
}

.project-item .card-body {
    padding: 0;
}

.project-item .progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.project-item .progress-bar {
    border-radius: 4px;
    transition: width 0.6s ease;
}

.project-item .badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
}

.project-item .btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* Analytics Cards */
.analytics-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.analytics-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.analytics-card:hover::before {
    transform: rotate(45deg) scale(1.2);
}

/* Project Search and Filter */
.project-search-container {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.project-search-container .form-control {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.project-search-container .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.project-filter-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.project-filter-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Project Stats Cards */
.project-stats-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.project-stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.project-stats-card .card-body {
    padding: 1.5rem;
}

.project-stats-card h4 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.project-stats-card p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.project-stats-card i {
    font-size: 2.5rem;
    opacity: 0.8;
}

/* Project Analytics Table */
.analytics-table {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.analytics-table .table {
    margin-bottom: 0;
}

.analytics-table .table th {
    background: #f8f9fa;
    border: none;
    font-weight: 600;
    color: #495057;
}

.analytics-table .table td {
    border: none;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

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

/* Project Tabs */
.nav-tabs .nav-link {
    border: none;
    border-radius: 8px 8px 0 0;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: #007bff;
    background-color: #f8f9fa;
}

.nav-tabs .nav-link.active {
    color: #007bff;
    background-color: #fff;
    border-bottom: 3px solid #007bff;
}

/* Export Button */
.btn-export {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    color: white;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.btn-export:hover {
    background: linear-gradient(135deg, #218838, #1ea085);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40,167,69,0.3);
    color: white;
}

/* Analytics Charts */
.analytics-chart-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.analytics-chart-container canvas {
    max-height: 300px;
}

.progress {
    height: 8px;
    border-radius: 4px;
}

.progress-bar {
    border-radius: 4px;
}

/* Stage Items */
.stage-item {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.stage-item.completed {
    background-color: #d1edff;
    border-color: var(--success-color);
}

.stage-item.current {
    background-color: #fff3cd;
    border-color: var(--warning-color);
}

/* Chat - �mbunata?it */
.chat-room-item {
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
    border-radius: 12px;
    margin: 4px 6px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.chat-room-item:hover {
    background-color: #f8f9fa;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #dee2e6;
}

.chat-room-item.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-left: 6px solid #ffc107;
    transform: translateX(0);
    box-shadow: 0 6px 20px rgba(0,123,255,0.4);
    border: 2px solid rgba(255,255,255,0.2);
}

.chat-room-item.active:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 6px 16px rgba(0,123,255,0.4);
}

.chat-message {
    border-left: 4px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fff;
    margin-bottom: 8px;
    padding: 12px 16px 20px 16px;
    border-radius: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
    position: relative;
    animation: fadeInUp 0.4s ease-out;
    line-height: 1.5;
    font-size: 0.95rem;
    max-width: 85%;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.chat-message.own {
    background: linear-gradient(135deg, #e8f0f8 0%, #f0f5fa 100%);
    color: #2c3e50;
    margin-left: auto;
    margin-right: 0;
    padding: 12px 16px 20px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Reduce spa?ierea �ntre mesajele de la acela?i operator */
.chat-message.own + .chat-message.own {
    margin-top: 8px;
}

.chat-message.other + .chat-message.other {
    margin-top: 8px;
}

/* Mare?te spa?ierea �ntre mesajele de la operatori diferi?i */
.chat-message.own + .chat-message.other,
.chat-message.other + .chat-message.own {
    margin-top: 20px;
}
.chat-message.user-color-1 { background: linear-gradient(135deg, #f5f0f8 80%, #f8f5fa 100%); } /* pastel violet mai pal */
.chat-message.user-color-2 { background: linear-gradient(135deg, #e6f3ff 80%, #fff0f6 100%); }
.chat-message.user-color-3 { background: linear-gradient(135deg, #e6ffe6 80%, #f0fff4 100%); }
.chat-message.user-color-4 { background: linear-gradient(135deg, #fff0e6 80%, #f3f4fd 100%); }
.chat-message.user-color-5 { background: linear-gradient(135deg, #ffe6f0 80%, #fffde0 100%); }

.chat-message:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    background: #f8fafd;
}

.chat-message .message-content {
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
    letter-spacing: 0.1px;
    margin-bottom: 0;
}

.chat-attachment {
    display: flex !important;
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 0 0;
    box-shadow: none;
    transition: none;
}
.chat-attachment a {
    color: #6b8fb8;
    font-weight: 500;
    text-decoration: none;
    opacity: 1 !important;
    background: none !important;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.04rem;
    padding: 0;
    margin: 0;
}
.chat-attachment a:hover {
    text-decoration: underline;
    background: none !important;
}
.chat-attachment i.fas.fa-file-arrow-down {
    font-size: 1.3rem;
    color: #6b8fb8;
    margin-right: 8px;
}
.chat-attachment .flex-grow-1 {
    font-size: 1.04rem;
    color: #222;
    margin-left: 2px;
}
.chat-attachment .ms-auto i.fa-download {
    color: #6b8fb8;
    font-size: 1rem;
}

/* Modernizez ETi inputul de fiETier */
#chatFileInput {
    border-radius: 8px;
    background: #f4f6fb;
    border: 1.5px solid #d1d7e6;
    padding: 8px;
    font-size: 1rem;
}
#attachFileButton {
    border-radius: 8px;
    margin-left: 8px;
    font-weight: 500;
    background: linear-gradient(135deg, #e3e9f7 80%, #f4f6fb 100%);
    color: #6b8fb8;
    border: 1.5px solid #d1d7e6;
    transition: background 0.2s, color 0.2s;
}
#attachFileButton:hover {
    background: #e9ecef;
    color: #0d47a1;
}

/* Culori pastelate pentru alE>i utilizatori (max 5) */
.chat-message.user-color-1 { background-color: #f5f0f8; color: #222; } /* pastel violet mai pal */
.chat-message.user-color-2 { background-color: #e6f3ff; color: #222; } /* pastel pink */
.chat-message.user-color-3 { background-color: #e6ffe6; color: #222; } /* pastel green */
.chat-message.user-color-4 { background-color: #fff0e6; color: #222; } /* pastel purple */
.chat-message.user-color-5 { background-color: #ffe6f0; color: #222; } /* pastel yellow */

.chat-message.other {
    background-color: #f4f6fb;
    color: #222;
}

/* Adauga o margine colorata �n st�nga pentru claritate */
.chat-message {
    border-left: 6px solid transparent;
}
/* Eliminat complet border-left pentru toate culorile */

.chat-message-time {
    font-size: 0.55rem;
    color: #9ca3af;
    opacity: 0.7;
    position: absolute;
    bottom: 2px;
    left: 12px;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
    background: transparent;
}

.chat-message.own .chat-message-time {
    left: auto;
    right: 12px;
}

.chat-message.own + .message-time {
    text-align: center;
    width: 100%;
}

.chat-message.other + .message-time {
    text-align: center;
    width: 100%;
}

/* Responsive Sidebar */
@media (max-width: 1200px) {
    .chat-sidebar {
        position: fixed;
        left: -350px;
        top: 80px;
        height: calc(100vh - 80px);
        z-index: 1040;
        background: var(--bg-secondary);
        box-shadow: var(--shadow-lg);
    }
    
    .chat-sidebar.show {
        left: 0;
    }
    
    .chat-main {
        margin-left: 0;
    }
}

/* Mobile Chat Styles */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 60px);
        margin-top: 60px;
        border-radius: 0;
    }
    
    .chat-sidebar {
        width: 100%;
        position: absolute;
        top: 0;
        left: -100%;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s;
    }
    
    .chat-sidebar.show {
        left: 0;
    }
    
    .chat-messages {
        padding: 1rem;
    }
    
    .message-content {
        max-width: 85%;
    }
    
    .chat-input {
        padding: 1rem;
    }
    
    /* �mbunata?iri pentru mobil */
    .chat-message {
        margin-bottom: 1rem;
        padding: 1rem 1.25rem;
    }
    
    .message-content {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .message-sender {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        letter-spacing: 0.3px;
    }
    
    .message-time {
        font-size: 0.65rem;
        margin-top: 3px;
        letter-spacing: 0.1px;
        text-align: center;
    }
    
    /* Buton pentru toggle sidebar pe mobil */
    .btn-toggle-sidebar {
        display: block !important;
        background: none;
        border: none;
        color: white;
        font-size: 1.2rem;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .btn-toggle-sidebar:hover {
        background: rgba(255,255,255,0.1);
    }
    
    /* Overlay pentru sidebar pe mobil */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.show {
        display: block;
    }
    
    /* �mbunata?iri pentru input pe mobil */
    .chat-input .input-group {
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .chat-input .form-control {
        border: none;
        padding: 0.75rem 3.5rem 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .chat-input .btn-send {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        background: var(--primary-color);
        border: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .chat-input .btn-send:hover {
        transform: translateY(-50%) scale(1.1);
        background: #0056b3;
    }
    
    /* Badge pentru mesaje necitite pe mobil */
    .unread-badge {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        background: var(--danger-color);
        color: white;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 600;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    /* Status indicator pentru mesaje citite */
    .message-read-status {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-top: 0.25rem;
    }
    
    .chat-message.own .message-read-status {
        color: rgba(255,255,255,0.8);
    }
    
    /* Typing indicator pe mobil */
    .typing-indicator {
        padding: 0.5rem 1rem;
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.8rem;
        background: rgba(108, 117, 125, 0.1);
        border-radius: 12px;
        margin: 0.5rem 0;
    }
}

/* Offcanvas for Mobile */
.offcanvas {
    background: var(--bg-secondary);
    border: none;
    box-shadow: var(--shadow-xl);
}

.offcanvas-header {
    background: var(--primary-gradient);
    color: white;
    border-bottom: 1px solid var(--border-color);
}

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

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    .btn, .nav-link, .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve form controls touch targets */
    .form-control, .form-select {
        min-height: 44px;
    }
    
    /* Improve table touch targets */
    .table td, .table th {
        min-height: 44px;
        vertical-align: middle;
    }
}

/* Improve scrolling on mobile */
@media (max-width: 768px) {
    .card, .modal-content {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Improve sidebar scrolling */
    #right-sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* Improve container responsiveness */
.container-fluid {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Improve table responsiveness */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Improve image responsiveness */
img {
    max-width: 100%;
    height: auto;
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .card, .btn, .nav-link {
        transition: none;
    }
    
    /* Optimize shadows for mobile */
    .card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Reduce border radius for better touch experience */
    .btn, .form-control, .card {
        border-radius: 6px;
    }
}

/* Improve text readability on small screens */
@media (max-width: 576px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Improve text contrast */
    .text-muted {
        color: #6c757d !important;
    }
    
    /* Improve button text */
    .btn {
        font-weight: 500;
    }
}

/* Specific improvements for Process Progress section */

/* Laptop and desktop optimizations for new layout */
@media (min-width: 992px) {
    #processProgress .d-flex.justify-content-between {
        gap: 1rem;
    }
    
    #processProgress .text-center {
        flex: 1;
        min-width: 140px;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1.5rem !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
    }
    
    #processProgress .bg-primary:hover,
    #processProgress .bg-info:hover,
    #processProgress .bg-success:hover,
    #processProgress .bg-warning:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    #processProgress h3 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    #processProgress small {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    /* Improve sume section */
    #processProgress .bg-white.rounded {
        padding: 1.5rem !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #processProgress .d-flex.justify-content-between {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    #processProgress .d-flex.justify-content-between:last-child {
        border-bottom: none;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Compact layout for better readability */
    #processProgress .row {
        margin: 0;
    }
    
    #processProgress .col-12 {
        padding: 0;
    }
    
    /* Compact design */
    #processProgress .bg-white.rounded {
        padding: 1rem !important;
        margin-bottom: 0.75rem;
    }
    
    /* Make badges smaller and readable */
    #processProgress .badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
        min-width: 100px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        margin: 0 auto;
    }
    
    /* Compact text size */
    #processProgress h6 {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }
    
    /* Compact labels */
    #processProgress strong {
        font-size: 0.9rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Ensure no overflow */
    #processProgress .bg-white.rounded {
        overflow: hidden;
        word-wrap: break-word;
    }
    
    /* Make progress bars smaller */
    #processProgress .progress {
        height: 8px !important;
        margin-bottom: 0.25rem;
        border-radius: 4px;
    }
    
    /* Better spacing for compact layout */
    #processProgress .col-md-4 {
        padding: 0 0.75rem;
    }
    
    /* Prevent overlap on laptop */
    #processProgress .text-center {
        padding: 0.5rem;
    }
    
    #processProgress .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    /* Improve progress bars */
    #processProgress .progress {
        height: 15px !important;
        border-radius: 8px;
        background-color: #f8f9fa;
    }
    
    #processProgress .progress-bar {
        border-radius: 8px;
    }
    
    #processProgress .d-flex.justify-content-between small {
        font-size: 0.85rem;
        font-weight: 600;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991px) {
    #processProgress .text-center {
        flex: 1;
        min-width: 120px;
        margin-bottom: 1rem;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1.25rem !important;
        border-radius: 8px;
    }
    
    #processProgress h3 {
        font-size: 2rem;
        font-weight: 700;
    }
    
    #processProgress small {
        font-size: 0.85rem;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1.25rem !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #processProgress .progress {
        height: 12px !important;
    }
    
    /* Improve spacing for tablets */
    #processProgress .row {
        margin: 0 -0.5rem;
    }
    
    #processProgress .col-md-12 {
        padding: 0 0.5rem;
        margin-bottom: 1rem;
    }
    
    #processProgress .col-md-12:last-child {
        margin-bottom: 0;
    }
}

/* Mobile optimizations */
@media (max-width: 767px) {
    #processProgress .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #processProgress .text-center {
        flex: 1;
        min-width: 100px;
        margin-bottom: 0.75rem;
    }
    
    #processProgress .bg-primary,
    #processProgress .bg-info,
    #processProgress .bg-success,
    #processProgress .bg-warning {
        padding: 1rem !important;
        border-radius: 6px;
    }
    
    #processProgress h3 {
        font-size: 1.75rem;
        font-weight: 700;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1rem !important;
    }
    
    #processProgress .progress {
        height: 10px !important;
    }
    
    #processProgress .badge {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
}

/* Extra large screens (>1200px) */
@media (min-width: 1201px) {
    #processProgress .col-xl-3 {
        margin-bottom: 1.5rem;
    }
    
    #processProgress .border.rounded {
        padding: 2rem !important;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    #processProgress small {
        font-size: 1.1rem;
    }
    
    /* Improve table responsiveness for large screens */
    #processProgress .table-responsive {
        font-size: 1.1rem;
    }
    
    #processProgress .table td {
        padding: 1.25rem 1rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 1rem;
        padding: 0.625rem 1.25rem;
    }
    
    /* Improve progress bars for large screens */
    #processProgress .progress {
        height: 18px !important;
        margin-bottom: 1.25rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 1rem;
    }
    
    #processProgress small {
        font-size: 1.05rem;
    }
    
    /* Specific optimizations for sume and progress sections on large screens */
    #processProgress .col-12 {
        padding: 0;
    }
    
    #processProgress .bg-white.rounded {
        padding: 1.5rem !important;
        max-width: 100%;
        overflow: hidden;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        min-width: 120px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        margin: 0 auto;
    }
    
    #processProgress h6 {
        font-size: 1rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    
    /* Labels for large screens */
    #processProgress strong {
        font-size: 0.9rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Progress bars for large screens */
    #processProgress .progress {
        height: 10px !important;
        margin-bottom: 0.5rem;
        border-radius: 5px;
    }
    
    /* Force no overflow */
    #processProgress .row {
        overflow: hidden;
    }
    
    #processProgress .col-12 {
        overflow: hidden;
    }
    
    /* Better spacing for large screens */
    #processProgress .col-md-4 {
        padding: 0 1rem;
    }
    
    /* Prevent overlap on large screens */
    #processProgress .text-center {
        padding: 0.75rem;
    }
    
    #processProgress .mb-3 {
        margin-bottom: 1.5rem !important;
    }
}

/* Laptop screens (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
    #processProgress .col-lg-4 {
        margin-bottom: 1rem;
    }
    
    #processProgress .border.rounded {
        padding: 1.5rem !important;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 1rem;
    }
    
    /* Improve table responsiveness for laptops */
    #processProgress .table-responsive {
        font-size: 1rem;
    }
    
    #processProgress .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Improve progress bars for laptops */
    #processProgress .progress {
        height: 15px !important;
        margin-bottom: 1rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 0.95rem;
    }
    
    /* Improve spacing for laptop layout */
    #processProgress .row {
        margin: 0 -0.5rem;
    }
    
    #processProgress .col-lg-4 {
        padding: 0 0.5rem;
    }
    
    #processProgress .col-lg-6 {
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    /* Improve progress cards layout */
    #processProgress .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    #processProgress .border.rounded {
        padding: 1rem !important;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    #processProgress small {
        font-size: 0.8rem;
    }
    
    /* Improve table responsiveness in process progress */
    #processProgress .table-responsive {
        font-size: 0.875rem;
    }
    
    #processProgress .table td {
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Improve progress bars */
    #processProgress .progress {
        height: 10px !important;
        margin-bottom: 0.5rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.25rem;
    }
    
    #processProgress small {
        font-size: 0.75rem;
    }
}

/* Tablet screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #processProgress .col-lg-6 {
        margin-bottom: 1.5rem;
    }
    
    #processProgress .border.rounded {
        padding: 1.5rem !important;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #processProgress h4 {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 1rem;
    }
    
    /* Improve table responsiveness for tablets */
    #processProgress .table-responsive {
        font-size: 1rem;
    }
    
    #processProgress .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    #processProgress .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Improve progress bars for tablets */
    #processProgress .progress {
        height: 15px !important;
        margin-bottom: 1rem;
    }
    
    #processProgress .d-flex.justify-content-between {
        margin-bottom: 0.75rem;
    }
    
    #processProgress small {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    /* Extra small screen improvements for process progress */
    #processProgress .border.rounded {
        padding: 0.75rem !important;
        min-height: 70px;
    }
    
    #processProgress h4 {
        font-size: 1.25rem;
    }
    
    #processProgress .table {
        font-size: 0.8rem;
    }
    
    #processProgress .table td {
        padding: 0.375rem 0.25rem;
    }
    
    #processProgress .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* Improve progress section spacing */
    #processProgress .row {
        margin: 0;
    }
    
    #processProgress .col-lg-6,
    #processProgress .col-md-12 {
        padding: 0.5rem;
    }
}

/* Navigation */
.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

.nav-link {
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-1px);
}

/* Cards */
.card:not(.dashboard-card) {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:not(.dashboard-card):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
}

/* Stats Cards */
.card.bg-primary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning {
    background: linear-gradient(135deg, var(--primary-color), #0a58ca) !important;
}

.card.bg-success {
    background: linear-gradient(135deg, var(--success-color), #146c43) !important;
}

.card.bg-danger {
    background: linear-gradient(135deg, var(--danger-color), #b02a37) !important;
}

.card.bg-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffca2c) !important;
    color: #000 !important;
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #0a58ca);
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color), #146c43);
    border: none;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #b02a37);
    border: none;
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffca2c);
    border: none;
    color: #000;
}

/* Forms */
.form-control,
.form-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Task Items */
.task-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.task-item:hover {
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.task-priority-urgenta {
    border-left: 4px solid var(--danger-color);
}

.task-priority-normala {
    border-left: 4px solid var(--warning-color);
}

.task-priority-scazuta {
    border-left: 4px solid var(--success-color);
}

.task-status-realizata {
    opacity: 0.7;
    background-color: #f8f9fa;
}

.task-status-expirata {
    background-color: #fff5f5;
    border-color: var(--danger-color);
}

/* Project Items */
.project-item {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.project-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: #007bff;
}

.project-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #007bff, #0056b3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-item:hover::before {
    opacity: 1;
}

.project-item .card-body {
    padding: 0;
}

.project-item .progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.project-item .progress-bar {
    border-radius: 4px;
    transition: width 0.6s ease;
}

.project-item .badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
}

.project-item .btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* Analytics Cards */
.analytics-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.analytics-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.analytics-card:hover::before {
    transform: rotate(45deg) scale(1.2);
}

/* Project Search and Filter */
.project-search-container {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.project-search-container .form-control {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.project-search-container .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

.project-filter-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.project-filter-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Project Stats Cards */
.project-stats-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.project-stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.project-stats-card .card-body {
    padding: 1.5rem;
}

.project-stats-card h4 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.project-stats-card p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.project-stats-card i {
    font-size: 2.5rem;
    opacity: 0.8;
}

/* Project Analytics Table */
.analytics-table {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.analytics-table .table {
    margin-bottom: 0;
}

.analytics-table .table th {
    background: #f8f9fa;
    border: none;
    font-weight: 600;
    color: #495057;
}

.analytics-table .table td {
    border: none;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

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

/* Project Tabs */
.nav-tabs .nav-link {
    border: none;
    border-radius: 8px 8px 0 0;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: #007bff;
    background-color: #f8f9fa;
}

.nav-tabs .nav-link.active {
    color: #007bff;
    background-color: #fff;
    border-bottom: 3px solid #007bff;
}

/* Export Button */
.btn-export {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    color: white;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.btn-export:hover {
    background: linear-gradient(135deg, #218838, #1ea085);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40,167,69,0.3);
    color: white;
}

/* Analytics Charts */
.analytics-chart-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.analytics-chart-container canvas {
    max-height: 300px;
}

.progress {
    height: 8px;
    border-radius: 4px;
}

.progress-bar {
    border-radius: 4px;
}

/* Stage Items */
.stage-item {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.stage-item.completed {
    background-color: #d1edff;
    border-color: var(--success-color);
}

.stage-item.current {
    background-color: #fff3cd;
    border-color: var(--warning-color);
}

/* Chat - �mbunata?it */
.chat-room-item {
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
    border-radius: 12px;
    margin: 4px 6px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.chat-room-item:hover {
    background-color: #f8f9fa;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #dee2e6;
}

.chat-room-item.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-left: 6px solid #ffc107;
    transform: translateX(0);
    box-shadow: 0 6px 20px rgba(0,123,255,0.4);
    border: 2px solid rgba(255,255,255,0.2);
}

.chat-room-item.active:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 6px 16px rgba(0,123,255,0.4);
}

.chat-message {
    border-left: 4px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fff;
    margin-bottom: 8px;
    padding: 12px 16px 20px 16px;
    border-radius: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
    position: relative;
    animation: fadeInUp 0.4s ease-out;
    line-height: 1.5;
    font-size: 0.95rem;
    max-width: 85%;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.chat-message.own {
    background: linear-gradient(135deg, #e8f0f8 0%, #f0f5fa 100%);
    color: #2c3e50;
    margin-left: auto;
    margin-right: 0;
}

/* Reduce spa?ierea �ntre mesajele de la acela?i operator */
.chat-message.own + .chat-message.own {
    margin-top: 8px;
}

.chat-message.other + .chat-message.other {
    margin-top: 8px;
}

/* Mare?te spa?ierea �ntre mesajele de la operatori diferi?i */
.chat-message.own + .chat-message.other,
.chat-message.other + .chat-message.own {
    margin-top: 20px;
}
.chat-message.user-color-1 { background: linear-gradient(135deg, #f5f0f8 80%, #f8f5fa 100%); } /* pastel violet mai pal */
.chat-message.user-color-2 { background: linear-gradient(135deg, #e6f3ff 80%, #fff0f6 100%); }
.chat-message.user-color-3 { background: linear-gradient(135deg, #e6ffe6 80%, #f0fff4 100%); }
.chat-message.user-color-4 { background: linear-gradient(135deg, #fff0e6 80%, #f3f4fd 100%); }
.chat-message.user-color-5 { background: linear-gradient(135deg, #ffe6f0 80%, #fffde0 100%); }

.chat-message:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    background: #f8fafd;
}

.chat-message .message-content {
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
    letter-spacing: 0.1px;
    margin-bottom: 0;
}

.chat-attachment {
    display: flex !important;
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 0 0;
    box-shadow: none;
    transition: none;
}
.chat-attachment a {
    color: #6b8fb8;
    font-weight: 500;
    text-decoration: none;
    opacity: 1 !important;
    background: none !important;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.04rem;
    padding: 0;
    margin: 0;
}
.chat-attachment a:hover {
    text-decoration: underline;
    background: none !important;
}
.chat-attachment i.fas.fa-file-arrow-down {
    font-size: 1.3rem;
    color: #6b8fb8;
    margin-right: 8px;
}
.chat-attachment .flex-grow-1 {
    font-size: 1.04rem;
    color: #222;
    margin-left: 2px;
}
.chat-attachment .ms-auto i.fa-download {
    color: #6b8fb8;
    font-size: 1rem;
}

/* Modernizez ETi inputul de fiETier */
#chatFileInput {
    border-radius: 8px;
    background: #f4f6fb;
    border: 1.5px solid #d1d7e6;
    padding: 8px;
    font-size: 1rem;
}
#attachFileButton {
    border-radius: 8px;
    margin-left: 8px;
    font-weight: 500;
    background: linear-gradient(135deg, #e3e9f7 80%, #f4f6fb 100%);
    color: #6b8fb8;
    border: 1.5px solid #d1d7e6;
    transition: background 0.2s, color 0.2s;
}
#attachFileButton:hover {
    background: #e9ecef;
    color: #0d47a1;
}

/* Culori pastelate pentru alE>i utilizatori (max 5) */
.chat-message.user-color-1 { background-color: #f5f0f8; color: #222; } /* pastel violet mai pal */
.chat-message.user-color-2 { background-color: #e6f3ff; color: #222; } /* pastel pink */
.chat-message.user-color-3 { background-color: #e6ffe6; color: #222; } /* pastel green */
.chat-message.user-color-4 { background-color: #fff0e6; color: #222; } /* pastel purple */
.chat-message.user-color-5 { background-color: #ffe6f0; color: #222; } /* pastel yellow */

.chat-message.other {
    background-color: #f4f6fb;
    color: #222;
}

/* Adauga o margine colorata �n st�nga pentru claritate */
.chat-message {
    border-left: 6px solid transparent;
}
/* Eliminat complet border-left pentru toate culorile */

.chat-message-time {
    font-size: 0.55rem;
    color: #9ca3af;
    opacity: 0.7;
    position: absolute;
    bottom: 2px;
    left: 12px;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
    background: transparent;
}

.chat-message.own .chat-message-time {
    left: auto;
    right: 12px;
}

.chat-attachment {
    display: block !important;
    background: #f4f6fb;
    border: 1px solid #d1d7e6;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.chat-attachment a {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
    opacity: 1 !important;
    background: none !important;
}

.chat-attachment a:hover {
    text-decoration: underline;
    background: #e9ecef !important;
}

/* Badges */
.badge {
    border-radius: 6px;
    font-weight: 500;
}

.priority-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
}

.status-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
}

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

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

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

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

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

/* Responsive */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .task-item,
    .project-item {
        padding: 10px;
    }
    
    .chat-message {
        max-width: 85%;
    }
    
    .btn {
        font-size: 0.875rem;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Modal Enhancements */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
    border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0;
}

.modal-footer {
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 12px 12px;
}

/* Utility Classes */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

.border-start-primary {
    border-left: 3px solid var(--primary-color) !important;
}

.border-start-success {
    border-left: 3px solid var(--success-color) !important;
}

.border-start-danger {
    border-left: 3px solid var(--danger-color) !important;
}

.border-start-warning {
    border-left: 3px solid var(--warning-color) !important;
}

.chat-attachment-link {
    color: #1976d2;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
    font-size: 1.04rem;
    padding: 0;
    margin: 0 0 0 0;
    transition: color 0.2s;
}
.chat-attachment-link:hover {
    color: #0d47a1;
    text-decoration: underline;
}
.chat-attachment-link i.fas.fa-file-arrow-down {
    font-size: 1.2rem;
    color: #6b8fb8;
    margin-right: 8px;
}
.chat-attachment-link .flex-grow-1 {
    font-size: 1.04rem;
    color: #222;
    margin-left: 2px;
}
.chat-attachment-link .ms-auto i.fa-download {
    color: #6b8fb8;
    font-size: 1rem;
}

/* Sidebar dreapta pentru chat ETi notificari */
#right-sidebar {
    height: calc(100vh - 80px) !important;
    background: var(--bg-primary) !important;
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--border-color);
    border-radius: 0 0 0 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--transition-normal);
}

#sidebar-chat {
    height: 100% !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#main-sections-col {
    margin-right: 420px; /* rezerva spaE>iu pentru sidebar */
}

@media (max-width: 1200px) {
    #right-sidebar {
        min-width: 280px;
        max-width: 340px;
    }
    #main-sections-col {
        margin-right: 340px;
    }
}
@media (max-width: 992px) {
    #right-sidebar {
        display: none !important;
    }
    #main-sections-col {
        margin-right: 0;
    }
}

#sidebar-notifications {
    flex-shrink: 0;
    max-height: 200px;
    overflow-y: auto;
}

/* Chat Messages Area */
.chat-messages-container {
    background: #fff;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.chat-current-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 1rem;
}

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

.chat-messages-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bg-secondary);
}

.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
}

/* Message Input Area */
.chat-input-area {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-top: 1px solid rgba(255,255,255,0.2);
    padding: 1rem;
}

.message-input-container {
    max-width: 100%;
}

#messageInput {
    border-radius: 25px;
    border: 2px solid #e9ecef;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    min-height: 55px;
    max-height: 120px;
    resize: none;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    letter-spacing: 0.1px;
}

#messageInput:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25), 0 4px 12px rgba(0,0,0,0.1);
    background: white;
    transform: translateY(-1px);
}

#sendButton {
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
    font-size: 1.3rem;
}

#sendButton:hover {
    transform: scale(1.1);
    background: #0056b3;
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

#sendButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #6c757d;
    transform: scale(1);
    box-shadow: none;
}

.file-attachment-container {
    margin-top: 0.5rem;
}

#chatFileInput {
    border-radius: 15px;
    font-size: 0.8rem;
}

#attachFileButton {
    border-radius: 15px;
    padding: 0.25rem 0.5rem;
}

/* Chat UI improvements */
#chatMessages, .chat-message, .chat-room-item, #currentChatRoom {
    font-size: 0.8rem;
}
.chat-message .message-content {
    font-size: 0.9em;
    padding: 2px 0;
}
#messageInput {
    min-height: 40px;
    max-height: 80px;
    resize: none;
    overflow-y: auto;
    font-size: 0.85rem;
    padding: 6px 10px;
    line-height: 1.2;
}
.input-group > #messageInput {
    flex: 1 1 auto;
}
.input-group {
    align-items: flex-end;
}
#sendButton {
    height: 40px;
    width: 40px;
}

#sidebar-chat .card {
    border-radius: 12px !important;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.05);
    background: #fff;
    margin-bottom: 8px;
}

#sidebar-chat .card-body {
    min-height: 0; /* Important for flex child */
    flex: 1;
    display: flex;
    flex-direction: column;
}

#sidebar-chat .card:last-child {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex child */
}

#chatMessages {
    flex-grow: 1;
    overflow-y: auto;
    background: #f8fafd;
    border-radius: 8px;
    padding: 8px;
    min-height: 0;
    height: 100%;
    max-height: none; /* Remove max-height constraint */
}

#sidebar-chat .input-group {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
    margin-bottom: 0;
}

#sidebar-chat .card-footer {
    background: #fff;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 12px 12px;
    padding: 8px;
}

#sidebar-chat .card-header {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0 !important;
    padding: 8px 12px;
}

/* Chat room items styling */
.chat-room-item {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.8rem;
}

.chat-room-item:hover {
    background-color: #f8f9fa;
}

.chat-room-item.active {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.chat-room-item h6 {
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.chat-room-item .badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--danger-color);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@media (max-width: 1200px) {
    #right-sidebar, #sidebar-chat {
        min-width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
    
    /* Improve main content area */
    #main-sections-col {
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* Improve task items */
    .task-item .d-flex {
        flex-direction: column;
    }
    
    .task-item .text-end {
        text-align: left !important;
        margin-top: 0.5rem;
    }
    
    /* Improve buttons layout */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Improve cards */
    .card-body {
        padding: 1.25rem;
    }
    
    /* Improve form controls */
    .form-control,
    .form-select {
        font-size: 0.9rem;
    }
}

/* Chat Messages - �mbunata?it pentru lizibilitate */
.chat-message {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 18px;
    max-width: 70%;
    word-wrap: break-word;
    position: relative;
    animation: fadeIn 0.3s ease;
    line-height: 1.5;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: none;
}

.chat-message.own {
    margin-left: auto;
    background: linear-gradient(135deg, #e8f0f8 0%, #f0f5fa 100%);
    color: #2c3e50;
    max-width: 70%;
    border-radius: 18px 18px 4px 18px;
}

.chat-message.other {
    margin-right: auto;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 70%;
    border-radius: 18px 18px 18px 4px;
}

.chat-message .message-content {
    margin-bottom: 0.25rem;
    line-height: 1.4;
    font-size: 0.95rem;
    letter-spacing: 0.1px;
}

.chat-message .message-sender {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    opacity: 0.8;
}

.chat-message.own .message-sender {
    color: rgba(255,255,255,0.9);
}

.chat-message.other .message-sender {
    color: #6c757d;
}

.chat-message .message-time {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 0.25rem;
    text-align: right;
    font-style: italic;
}

.chat-message.own .message-time {
    color: rgba(255,255,255,0.8);
}

.chat-message.other .message-time {
    color: #6c757d;
}

.chat-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.chat-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.chat-header .conversation-title {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

/* Message Date Dividers */
.message-date-divider {
    position: relative;
    margin: 2rem 0;
}

.message-date-divider .badge {
    background: rgba(255,255,255,0.9) !important;
    color: #6c757d !important;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e9ecef;
}

/* Message Headers */
.message-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.message-sender {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
}

.chat-message.own .message-sender {
    color: rgba(255,255,255,0.9);
}

.message-time {
    font-size: 0.6rem;
    color: white;
    margin: 8px 0;
    text-align: center;
    background: transparent;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 400;
    letter-spacing: 0.1px;
    display: block;
    width: 100%;
    box-shadow: 0 2px 4px rgba(111, 66, 193, 0.2);
    word-wrap: break-word;
}

.chat-message.own .message-time {
    color: rgba(255,255,255,0.8);
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

/* Chat Attachments */
.chat-attachment {
    margin-top: 0.5rem;
}

.chat-attachment-link {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

.chat-message.own .chat-attachment-link {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: white;
}

.chat-message.other .chat-attachment-link {
    background: #f8f9fa;
    border-color: #e9ecef;
    color: #495057;
    font-size: 0.65rem !important;
    padding: 0 !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.chat-attachment-link:hover {
    background: rgba(255,255,255,0.2);
    text-decoration: none;
    transform: translateY(-1px);
}

.chat-message.other .chat-attachment-link:hover {
    background: #e9ecef;
    color: #495057;
}

/* Stiluri pentru previzualizări de imagini în chat – dimensiuni reduse ca să nu ocupe mult spațiu */
.chat-attachment-preview {
    margin-top: 6px;
    max-width: 100%;
    margin-bottom: 8px;
}

.chat-image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.chat-image-preview-link {
    position: relative;
    display: inline-block;
    border-radius: 6px;
    overflow: hidden;
    max-width: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-image-preview-link:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Buton de download în colțul din dreapta sus al imaginii */
.chat-download-btn-overlay {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.chat-download-btn-overlay:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.35);
}

.chat-download-btn-overlay i {
    font-size: 0.7rem;
}

.chat-attachment-image {
    max-width: 140px;
    width: auto;
    height: auto;
    max-height: 160px;
    display: block;
    border-radius: 6px;
    object-fit: contain;
    cursor: pointer;
}

/* Desktop: ecrane mari */
@media (min-width: 1920px) {
    .chat-attachment-image {
        max-width: 160px;
        max-height: 180px;
    }
}

/* Desktop: laptop */
@media (min-width: 992px) and (max-width: 1919px) {
    .chat-attachment-image {
        max-width: 130px;
        max-height: 150px;
    }
}

/* Tablete / ecrane mici */
@media (max-width: 991px) {
    .chat-attachment-image {
        max-width: 120px;
        max-height: 140px;
    }
}

@media (max-width: 576px) {
    .chat-attachment-image {
        max-width: 100px;
        max-height: 120px;
    }
}

.chat-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.chat-image-preview-link:hover .chat-image-overlay {
    opacity: 1;
}

.chat-image-overlay i.fas.fa-expand {
    font-size: 0.9rem;
    margin-right: 6px;
}

.chat-image-filename {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Stiluri pentru textul "A trimis fișierul" - doar pentru mesajele cu fișiere */
.chat-message:has(.chat-attachment) .message-text,
.chat-message .message-text:has(span[style*="font-size: 0.7rem"]) {
    font-size: 0.7rem !important;
    color: #6c757d !important;
    margin-bottom: 4px !important;
}

.chat-message .message-text span {
    font-size: 0.7rem !important;
    color: #6c757d !important;
}

/* Wrapper pentru attachment cu buton de ștergere */
.chat-attachment-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.chat-attachment-wrapper .btn-link.text-danger {
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    height: 30px !important;
    width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
    background: #fff5f5 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.chat-attachment-wrapper .btn-link.text-danger:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(220,38,38,0.2) !important;
}

.chat-attachment-wrapper .btn-link.text-danger i {
    font-size: 0.7rem !important;
}

/* Stiluri pentru wrapper-ul de fișiere non-imagine */
.chat-file-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    width: 100%;
}

/* Stiluri pentru chenarul fișierelor non-imagine */
.chat-attachment.mt-2,
.chat-message .chat-attachment.mt-2,
.chat-message.own .chat-attachment.mt-2,
.chat-message.other .chat-attachment.mt-2 {
    margin-top: 4px !important;
    margin-bottom: 3px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    width: auto !important;
    box-shadow: none !important;
}

.chat-attachment-link,
.chat-attachment-link.p-2,
.chat-attachment.mt-2 .chat-attachment-link,
.chat-message .chat-attachment-link {
    font-size: 0.65rem !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-decoration: none !important;
    gap: 4px !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #495057 !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

.chat-attachment-link i.fas.fa-file-arrow-down,
.chat-attachment.mt-2 .chat-attachment-link i.fas.fa-file-arrow-down {
    font-size: 0.7rem !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
    color: #6c757d !important;
}

.chat-attachment-link .chat-file-name,
.chat-attachment.mt-2 .chat-attachment-link .chat-file-name {
    font-size: 0.65rem !important;
    color: #495057 !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
    display: inline !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.chat-attachment-link .chat-file-external-icon,
.chat-attachment.mt-2 .chat-attachment-link .chat-file-external-icon {
    font-size: 0.6rem !important;
    color: #6c757d !important;
    flex-shrink: 0 !important;
    margin-left: 4px !important;
}

/* Suprascriu stilurile vechi pentru link-urile din chat-attachment.mt-2 */
.chat-attachment.mt-2 a:not(.chat-file-open-btn):not(.chat-file-download-btn),
.chat-attachment.mt-2 .chat-attachment-link:not(.chat-file-open-btn):not(.chat-file-download-btn) {
    color: #495057 !important;
    font-weight: normal !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.chat-attachment.mt-2 a:not(.chat-file-open-btn):not(.chat-file-download-btn):hover,
.chat-attachment.mt-2 .chat-attachment-link:not(.chat-file-open-btn):not(.chat-file-download-btn):hover {
    text-decoration: none !important;
    background: none !important;
    color: #495057 !important;
    transform: none !important;
}

/* Buton pentru deschidere fișier - design simplu fără chenar */
.chat-file-open-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #007bff !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.7rem !important;
    font-weight: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.chat-file-open-btn:hover {
    background: transparent !important;
    border: none !important;
    color: #0056b3 !important;
    text-decoration: underline !important;
    transform: none !important;
    box-shadow: none !important;
}

.chat-file-open-btn i {
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
    color: #007bff !important;
}

.chat-file-open-btn:hover i {
    color: #0056b3 !important;
}

.chat-file-open-btn .chat-file-name {
    font-size: 0.7rem !important;
    color: #007bff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.chat-file-open-btn:hover .chat-file-name {
    color: #0056b3 !important;
}

/* Buton pentru descărcare fișier - design simplu fără chenar */
.chat-file-download-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #28a745 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.chat-file-download-btn:hover {
    background: transparent !important;
    border: none !important;
    color: #218838 !important;
    transform: none !important;
    box-shadow: none !important;
    text-decoration: underline !important;
}

.chat-file-download-btn i {
    font-size: 0.75rem !important;
}

/* Wrapper pentru mesajele de chat cu buton de ștergere */
.chat-message-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.chat-message-wrapper.own {
    flex-direction: row-reverse !important;
}

/* Buton pentru ștergere mesaj - design simplu fără chenar */
.chat-file-delete-btn,
.chat-message-wrapper > .chat-file-delete-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #dc3545 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    align-self: center !important;
}

.chat-file-delete-btn:hover,
.chat-message-wrapper > .chat-file-delete-btn:hover {
    background: transparent !important;
    border: none !important;
    color: #c82333 !important;
    transform: none !important;
    box-shadow: none !important;
    text-decoration: underline !important;
}

.chat-file-delete-btn i,
.chat-message-wrapper > .chat-file-delete-btn i {
    font-size: 0.75rem !important;
}

.chat-attachment-fallback {
    padding: 6px 10px;
    background: #f8f9fa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}

.chat-attachment-fallback i.fas {
    color: #6b8fb8;
}

.chat-attachment-fallback .chat-attachment-download-btn {
    padding: 4px 8px;
    font-size: 0.7rem;
    line-height: 1.2;
    border-radius: 6px;
    margin-left: 8px;
}

.chat-attachment-fallback .chat-attachment-download-btn i {
    font-size: 0.7rem;
}

/* Edit Indicator */
.chat-message small.text-muted {
    font-size: 0.65rem;
    opacity: 0.6;
}

.chat-message.own small.text-muted {
    color: rgba(255,255,255,0.7) !important;
}

/* Typing Indicator */
.typing-indicator {
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,0.8);
    border-radius: 15px;
    max-width: 60%;
    margin-right: auto;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 2px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6c757d;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

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

@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Chat Navigation Improvements */
.chat-room-item {
    transition: all 0.3s ease;
}

.chat-room-item:hover {
    background: #f8f9fa;
    transform: translateX(3px);
}

.chat-room-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-left: 3px solid #fff;
    transform: translateX(0);
}

.chat-room-item.active:hover {
    transform: translateX(0);
}

/* Message Input Improvements */
#messageInput:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    outline: none;
}

#sendButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#sendButton:not(:disabled):hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* File Attachment Improvements */
.file-attachment-container {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    border: 1px dashed rgba(255,255,255,0.3);
}

.file-attachment-container:hover {
    border-color: white;
    background: rgba(255,255,255,0.15);
}

#chatFileInput {
    border-radius: 15px;
    font-size: 0.8rem;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.9);
}

#chatFileInput:focus {
    border-color: white;
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25);
    background: white;
}

#attachFileButton {
    border-radius: 15px;
    padding: 0.25rem 0.5rem;
    transition: all 0.3s ease;
    background: white;
    color: #667eea;
    border: 1px solid rgba(255,255,255,0.3);
}

#attachFileButton:hover {
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Responsive Design - Enhanced for all screen sizes */
@media (max-width: 768px) {
    .chat-content {
        flex-direction: column;
    }
    
    .chat-rooms-container {
        width: 100% !important;
        height: 200px;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
    }
    
    .chat-messages-container {
        height: calc(100% - 200px);
    }
    
    /* Improve table responsiveness */
    .table-responsive {
        font-size: 0.875rem;
    }
    
    /* Stack buttons vertically on small screens */
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .d-flex.justify-content-between > div {
        width: 100%;
    }
    
    /* Make cards more compact */
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    /* Improve form controls */
    .form-control,
    .form-select {
        font-size: 0.875rem;
    }
    
    /* Make badges smaller */
    .badge {
        font-size: 0.75rem;
    }
    
    /* Improve task items layout */
    .task-item .row {
        margin: 0;
    }
    
    .task-item .col-md-4 {
        margin-bottom: 0.5rem;
    }
    
    /* Make buttons more touch-friendly */
    .btn-sm {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Improve navbar on mobile */
    .navbar-brand {
        font-size: 1rem;
    }
    
    .navbar-nav {
        text-align: center;
    }
    
    /* Improve sidebar on mobile */
    #right-sidebar {
        position: fixed !important;
        top: 60px !important;
        right: -100% !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 60px) !important;
        z-index: 1050 !important;
        transition: right 0.3s ease;
    }
    
    #right-sidebar.show {
        right: 0 !important;
    }
    
    /* Improve main content area */
    #main-sections-col {
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* Improve task item layout */
    .task-item .d-flex {
        flex-direction: column;
    }
    
    .task-item .text-end {
        text-align: left !important;
        margin-top: 0.5rem;
    }
    
    /* Improve project cards */
    .project-item .card-body {
        padding: 0.75rem;
    }
    
    /* Improve buttons layout */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        margin-bottom: 0.25rem;
    }
}

#sidebar-notifications {
    flex-shrink: 0;
    max-height: 250px;
    overflow-y: auto;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}

/* Extra Small Screens (phones) */
@media (max-width: 576px) {
    /* Make everything more compact */
    .container-fluid {
        padding: 0.5rem;
    }
    
    .card:not(.dashboard-card) {
        margin-bottom: 0.75rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .card-header {
        padding: 0.5rem 0.75rem;
    }
    
    /* Improve navbar */
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    .navbar-brand {
        font-size: 0.9rem;
    }
    
    /* Improve buttons */
    .btn {
        font-size: 0.8rem;
        padding: 0.375rem 0.5rem;
    }
    
    .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Improve form controls */
    .form-control,
    .form-select {
        font-size: 0.8rem;
        padding: 0.375rem 0.5rem;
    }
    
    /* Improve tables */
    .table {
        font-size: 0.75rem;
    }
    
    .table td,
    .table th {
        padding: 0.375rem;
    }
    
    /* Improve badges */
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Improve task items */
    .task-item {
        padding: 0.5rem;
    }
    
    .task-item .row {
        margin: 0;
    }
    
    .task-item .col-md-4 {
        margin-bottom: 0.25rem;
    }
    
    /* Improve project cards */
    .project-item .card-body {
        padding: 0.5rem;
    }
    
    /* Improve modals */
    .modal-body {
        padding: 1rem;
    }
    
    .modal-header {
        padding: 0.75rem 1rem;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem;
    }
    
    /* Improve sidebar */
    #right-sidebar {
        top: 50px !important;
        height: calc(100vh - 50px) !important;
    }
    
    /* Improve main content */
    #main-sections-col {
        padding: 0.5rem;
    }
    
    /* Improve buttons layout */
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .d-flex.justify-content-between > div {
        width: 100%;
    }
    
    /* Improve text */
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.1rem;
    }
    
    p {
        font-size: 0.9rem;
    }
    
    /* Improve spacing */
    .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .p-3 {
        padding: 0.75rem !important;
    }
    
    .p-4 {
        padding: 1rem !important;
    }
}

/* Chat pentru Mobile */
@media (max-width: 768px) {
    #right-sidebar {
        display: none !important;
    }
    
    #chat-section {
        display: block !important;
    }
    
    #mobileChatMessages {
        height: 250px !important;
    }
    
    .chat-message {
        margin-bottom: 8px;
        padding: 10px 14px 6px 14px;
        border-radius: 14px;
        max-width: fit-content;
        display: inline-block;
        word-wrap: break-word;
        font-size: 0.9rem;
    }
    
    .chat-message.own {
        margin-left: auto;
        background-color: #007bff;
        color: white;
    }
    
    .chat-message.other {
        margin-right: auto;
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
    }
    
    .chat-message .message-content {
        font-size: 0.85rem;
        line-height: 1.3;
        padding: 6px 10px 4px 10px;
    }
    
    .message-sender {
        font-size: 0.7rem;
        margin-bottom: 0.2rem;
    }
    
    .message-time {
        font-size: 0.55rem;
        margin: 8px 0;
        text-align: center;
        background: transparent;
        color: white;
        padding: 5px 10px;
        border-radius: 6px;
        font-weight: 400;
        letter-spacing: 0.1px;
        display: block;
        width: 100%;
        box-shadow: 0 2px 4px rgba(111, 66, 193, 0.2);
        word-wrap: break-word;
    }
    
    /* Reduce spa?ierea �ntre mesajele de la acela?i operator pe mobile */
    .chat-message.own + .chat-message.own {
        margin-top: 4px;
    }
    
    .chat-message.other + .chat-message.other {
        margin-top: 4px;
    }
    
    /* Mare?te spa?ierea �ntre mesajele de la operatori diferi?i pe mobile */
    .chat-message.own + .chat-message.other,
    .chat-message.other + .chat-message.own {
        margin-top: 12px;
    }
    
    #mobileMessageInput {
        font-size: 16px; /* Previne zoom pe iOS */
    }
    
    .btn {
        min-height: 44px; /* Touch target mai mare */
    }
}

/* --- MODERN BUTTONS: COERENT DESIGN --- */
.btn-main {
    background: var(--primary-gradient) !important;
    color: #fff !important;
    font-weight: 600;
    border: none !important;
    border-radius: var(--border-radius-md) !important;
    padding: 0.75rem 1.5rem !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition-fast) !important;
}
.btn-main:hover, .btn-main:focus {
    background: var(--secondary-gradient) !important;
    color: #fff !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.btn-action {
    background: var(--success-gradient) !important;
    color: #fff !important;
    font-weight: 600;
    border: none !important;
    border-radius: var(--border-radius-md) !important;
    padding: 0.75rem 1.5rem !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition-fast) !important;
}
.btn-action:hover, .btn-action:focus {
    background: var(--warning-gradient) !important;
    color: #fff !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.btn-outline-main {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    font-weight: 600;
    border-radius: var(--border-radius-md) !important;
    padding: 0.75rem 1.5rem !important;
    transition: var(--transition-fast) !important;
}
.btn-outline-main:hover, .btn-outline-main:focus {
    background: var(--primary-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.btn-danger-main {
    background: var(--danger-gradient) !important;
    color: #fff !important;
    font-weight: 600;
    border: none !important;
    border-radius: var(--border-radius-md) !important;
    padding: 0.75rem 1.5rem !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition-fast) !important;
}
.btn-danger-main:hover, .btn-danger-main:focus {
    background: var(--danger-color) !important;
    color: #fff !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

/* Responsive: butoanele ocupa 100% pe mobil */
@media (max-width: 768px) {
    .btn-main, .btn-action, .btn-outline-main, .btn-danger-main {
        width: 100% !important;
        display: block !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Normalizez font-size ?i border-radius pentru toate butoanele */
.btn, .btn-main, .btn-action, .btn-outline-main, .btn-danger-main {
    font-size: 1rem !important;
    border-radius: var(--border-radius-md) !important;
}

.dashboard-card, .dashboard-total, .dashboard-completed, .dashboard-urgent, .dashboard-overdue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
}
.dashboard-completed {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}
.dashboard-urgent {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}
.dashboard-overdue {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
}

.dashboard-card *, .dashboard-total *, .dashboard-completed *, .dashboard-urgent *, .dashboard-overdue * {
    color: #fff !important;
    fill: #fff !important;
}

/* Stil pentru Progres Proiecte */
.card-header.bg-gradient-primary {
    background: linear-gradient(90deg, #0062E6 0%, #33AEFF 100%);
    color: white;
}
.project-progress .project-name {
    font-size: 1rem;
}
.progress-badge {
    font-size: 0.85rem;
    padding: 5px 10px;
    border-radius: 12px;
}
@media (max-width: 576px) {
    .progress {
        height: 10px;
    }
    .project-progress .project-name {
        font-size: 0.9rem;
    }
    .progress-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
}

/* Stiluri pentru butonul Receptionat din notificari */
#cabinetNotifications .alert {
    transition: opacity 0.3s ease;
}

#cabinetNotifications .btn-outline-success {
    border-color: #28a745;
    color: #28a745;
    background-color: transparent;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

#cabinetNotifications .btn-outline-success:hover {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

#cabinetNotifications .alert .d-flex {
    align-items: flex-start;
}

#cabinetNotifications .alert .flex-grow-1 {
    min-width: 0;
}

#cabinetNotifications .alert small {
    font-size: 0.75rem;
    opacity: 0.8;
}

@media (max-width: 576px) {
    #cabinetNotifications .alert .d-flex {
        flex-direction: column;
        align-items: stretch;
    }
    
    #cabinetNotifications .btn-outline-success {
        margin-top: 0.5rem;
        align-self: flex-end;
    }
}


/* Chat Bell Styles */
.chat-bell {
    background: var(--success-gradient) !important;
}

.chat-bell:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.chat-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.chat-item:hover {
    background-color: var(--bg-secondary);
}

.chat-item.unread {
    background-color: rgba(25, 135, 84, 0.05);
    border-left: 3px solid var(--success-color);
}

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

.chat-item .chat-message {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.chat-item .chat-time {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Notification badge styles - compatible with button shadows */
#taskCount, #chatCount {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    transform: none !important;
    background-color: #dc3545 !important;
    color: white !important;
    border-radius: 50% !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 0.7rem !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px !important;
    line-height: 1 !important;
    border: 2px solid var(--bg-primary, #ffffff) !important;
    z-index: 1002 !important;
    animation: badge-pulse 2s infinite !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    /* Override Bootstrap classes */
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
}


/* Ensure navbar doesn't clip notification badges */
.navbar {
    overflow: visible !important;
}

.navbar-nav {
    overflow: visible !important;
}

.nav-item {
    overflow: visible !important;
}


/* COMPLETE RESET for notification buttons - eliminate all background effects */
#taskBell, #chatBell {
    /* Completely eliminate all background properties */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: 0% 0% !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    background-size: auto !important;
    
    /* Reset positioning */
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    translate: none !important;
    
    /* Reset borders and outlines */
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    
    /* Reset spacing */
    margin: 0 !important;
    padding: 8px 12px !important;
    
    /* Reset other properties */
    overflow: visible !important;
    transition: box-shadow 0.2s ease !important;
    color: inherit !important;
    text-decoration: none !important;
    
    /* Ensure nav-link styling works correctly */
    display: inline-block !important;
    cursor: pointer !important;
    
    /* Force no background on any state */
    background-color: transparent !important;
    background: transparent !important;
    
    /* CRITICAL: Override Bootstrap nav-link pseudo-elements */
    position: relative !important;
}

/* CRITICAL: Disable the ::before pseudo-element that creates the sliding background */
#taskBell::before, #chatBell::before {
    display: none !important;
    content: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Clean notification button styles */
.notification-button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    position: relative !important;
    display: inline-block !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s ease !important;
    color: inherit !important;
    text-decoration: none !important;
    overflow: visible !important;
}

.notification-button::before {
    display: none !important;
    content: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

.notification-button:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    transform: none !important;
}

.notification-button:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    transform: none !important;
}

.notification-button:focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    outline: none !important;
    transform: none !important;
}

.notification-button[aria-expanded="true"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    transform: none !important;
}

/* Hover state - ONLY shadow change, NO background */
#taskBell:hover, #chatBell:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    position: relative !important;
    display: inline-block !important;
}

/* Active state - ONLY shadow change, NO background */
#taskBell:active, #chatBell:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    position: relative !important;
    display: inline-block !important;
}

/* Focus state - ONLY shadow change, NO background */
#taskBell:focus, #chatBell:focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    outline: none !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    position: relative !important;
    display: inline-block !important;
}

/* Expanded state - ONLY shadow change, NO background */
#taskBell[aria-expanded="true"], #chatBell[aria-expanded="true"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    position: relative !important;
    display: inline-block !important;
}

/* Override Bootstrap nav-link hover effects completely */
.nav-link:hover, .nav-link:focus, .nav-link:active {
    background-color: transparent !important;
    background: transparent !important;
}

/* Specific override for notification buttons */
#taskBell.nav-link, #chatBell.nav-link {
    background-color: transparent !important;
    background: transparent !important;
}

#taskBell.nav-link:hover, #chatBell.nav-link:hover,
#taskBell.nav-link:focus, #chatBell.nav-link:focus,
#taskBell.nav-link:active, #chatBell.nav-link:active {
    background-color: transparent !important;
    background: transparent !important;
}

/* CRITICAL: Override the general nav-link ::before pseudo-element for notification buttons */
#taskBell.nav-link::before, #chatBell.nav-link::before {
    display: none !important;
    content: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    left: -100% !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* CRITICAL: Override the general nav-link ::before hover effect for notification buttons */
#taskBell.nav-link:hover::before, #chatBell.nav-link:hover::before {
    display: none !important;
    content: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    left: -100% !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Notification Dropdown Styles */
#taskNotificationsDropdown, #chatNotificationsDropdown {
    background: white !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
    min-width: 320px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

#taskNotificationsDropdown .dropdown-header,
#chatNotificationsDropdown .dropdown-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    margin: -8px -8px 8px -8px !important;
    border-radius: 12px 12px 0 0 !important;
}

#taskNotificationsDropdown .dropdown-item,
#chatNotificationsDropdown .dropdown-item {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: all 0.2s ease !important;
}

#taskNotificationsDropdown .dropdown-item:hover,
#chatNotificationsDropdown .dropdown-item:hover {
    background: #f8f9fa !important;
    transform: translateX(4px) !important;
}

#taskNotificationsDropdown .dropdown-item:last-child,
#chatNotificationsDropdown .dropdown-item:last-child {
    border-bottom: none !important;
    border-radius: 0 0 12px 12px !important;
}


@keyframes badge-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Notification dropdown styles */
#taskNotificationsDropdown, #chatNotificationsDropdown {
    max-height: 400px;
    overflow-y: auto;
    min-width: 350px;
}

.notification-item {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.notification-item:hover {
    background-color: #f8f9fa;
}

.notification-item.unread {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.notification-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.notification-message {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.notification-time {
    color: #999;
    font-size: 0.8rem;
}

/* Dark mode notification styles */
[data-theme="dark"] .notification-item:hover {
    background-color: #3a3a3a;
}

[data-theme="dark"] .notification-item.unread {
    background-color: #1e3a5f;
    border-left: 3px solid #4a9eff;
}

[data-theme="dark"] .notification-message {
    color: #b0b0b0;
}

[data-theme="dark"] .notification-time {
    color: #888;
}

/* === STATISTICI PROIECTE - DESIGN NOU === */

/* Carduri de statistici moderne */
.stats-card {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    min-height: 90px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-color), var(--card-color-light));
    transition: all var(--transition-base);
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stats-card:hover::before {
    height: 4px;
}

/* Iconițe pentru statistici */
.stats-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: white;
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.stats-card:hover .stats-icon {
    transform: scale(1.05);
}

/* Conținutul statisticilor */
.stats-content {
    flex: 1;
}

.stats-content h3 {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-xxs) 0;
    color: var(--text-primary);
    line-height: 1.2;
}

.stats-content p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Culori pentru diferite tipuri de statistici */
.stats-total {
    --card-color: #667eea;
    --card-color-light: #764ba2;
}

.stats-total .stats-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stats-active {
    --card-color: #4facfe;
    --card-color-light: #00f2fe;
}

.stats-active .stats-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stats-completed {
    --card-color: #2ecc71;
    --card-color-light: #27ae60;
}

.stats-completed .stats-icon {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.stats-progress {
    --card-color: #a8edea;
    --card-color-light: #fed6e3;
}

.stats-progress .stats-icon {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #333;
}

.stats-financial {
    --card-color: #f39c12;
    --card-color-light: #e67e22;
}

.stats-financial .stats-icon {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.stats-executed {
    --card-color: #9b59b6;
    --card-color-light: #8e44ad;
}

.stats-executed .stats-icon {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.stats-remaining {
    --card-color: #e74c3c;
    --card-color-light: #c0392b;
}

.stats-remaining .stats-icon {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.stats-percentage {
    --card-color: #16a085;
    --card-color-light: #138d75;
}

.stats-percentage .stats-icon {
    background: linear-gradient(135deg, #16a085 0%, #138d75 100%);
}

/* Responsive design pentru mobile */
@media (max-width: 768px) {
    .stats-card {
        padding: var(--space-sm);
        min-height: 85px;
        gap: var(--space-xs);
    }
    
    .stats-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .stats-content h3 {
        font-size: 1.2rem;
    }
    
    .stats-content p {
        font-size: 0.7rem;
    }
}

/* Animații pentru încărcare */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stats-card {
    animation: fadeInUp 0.6s ease-out;
}

.stats-card:nth-child(1) { animation-delay: 0.1s; }
.stats-card:nth-child(2) { animation-delay: 0.2s; }
.stats-card:nth-child(3) { animation-delay: 0.3s; }
.stats-card:nth-child(4) { animation-delay: 0.4s; }

/* ============================================
   Acțiuni Rapide - Documente Nesemnate
   Secțiune ergonomică pentru butoane importante
   ============================================ */

/* Card pentru acțiuni rapide */
.card-header.bg-gradient-warning {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    border: none;
    border-radius: 12px 12px 0 0;
}

/* Butoane pentru documente nesemnate */
.btn-warning.btn-lg {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-warning.btn-lg::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-warning.btn-lg:hover::before {
    left: 100%;
}

.btn-warning.btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
}

.btn-warning.btn-lg:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.btn-warning.btn-lg i {
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .btn-warning.btn-lg {
        min-width: 100% !important;
        width: 100%;
        margin-bottom: 0.75rem;
    }
    
    .d-flex.flex-wrap.gap-3 {
        flex-direction: column;
    }
}

/* Dark theme adjustments */
[data-theme="dark"] .btn-warning.btn-lg {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

[data-theme="dark"] .btn-warning.btn-lg:hover {
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.5);
}

/* ============================================
   Fix pentru antetele de tabele - Text întunecat pe fundal deschis
   ============================================ */

/* Suprascrie stilul table-dark pentru a avea text întunecat pe fundal deschis */
.table-dark thead th,
table thead.table-dark th,
thead.table-dark th {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* Asigură că toate antetele de tabele au text întunecat */
table thead th,
.table thead th {
    color: #212529 !important;
    font-weight: 600 !important;
}

/* Pentru tabelele cu fundal deschis */
table thead th:not(.table-dark),
.table thead th:not(.table-dark) {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* Dark theme - păstrează textul alb pe fundal întunecat */
[data-theme="dark"] .table-dark thead th,
[data-theme="dark"] table thead.table-dark th,
[data-theme="dark"] thead.table-dark th {
    background-color: #212529 !important;
    color: #ffffff !important;
}

[data-theme="dark"] table thead th,
[data-theme="dark"] .table thead th {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
}

/* ========== Asistent AI – Enterprise layout (Desktop) ========== */
body.view-cabinet #chatToggleBtn { display: none !important; }

.ai-assistant-page { padding: 0; }
.ai-assistant-container {
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
    background: #f5f6f8;
    border-radius: 12px;
    overflow: hidden;
}

/* Sidebar – istoric conversații */
.ai-sidebar {
    width: 340px;
    min-width: 340px;
    max-width: 360px;
    display: none;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    flex-shrink: 0;
    overflow: hidden;
}
.ai-sidebar.ai-sidebar-visible { display: flex; }
.ai-sidebar-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.ai-sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px 0;
}
.ai-sidebar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ai-btn-ghost {
    font-size: 13px;
    color: #4b5563;
    border-color: #d1d5db;
}
.ai-btn-ghost:hover { color: #1f2937; border-color: #9ca3af; background: #f9fafb; }
.ai-search-input { font-size: 13px; }
.ai-conversations-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
}
.ai-conv-card {
    position: relative;
    padding: 12px 36px 12px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ai-conv-card:hover { background: #f9fafb; border-color: #d1d5db; }
.ai-conv-card-active { background: #eff6ff; border-color: #3b82f6; }
.ai-conv-card-title {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}
.ai-conv-card-meta {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
.ai-conv-card-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #9ca3af;
    background: none;
    border: none;
    opacity: 0.7;
}
.ai-conv-card-delete:hover { color: #dc3545; opacity: 1; }
.ai-conv-card-active .ai-conv-card-delete { color: #6b7280; }
.ai-conv-card-active .ai-conv-card-delete:hover { color: #dc3545; }

/* Main – chat */
.ai-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    overflow: hidden;
}
.ai-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #fff;
}
.ai-back-btn { display: none; }
.ai-main-header-left { display: flex; align-items: center; gap: 8px; }
.ai-main-title { font-size: 18px; font-weight: 600; color: #1f2937; margin: 0; }
.ai-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
}
.ai-status-text { font-size: 12px; color: #6b7280; }
.ai-header-history { font-size: 13px; }

.ai-quick-actions-wrap {
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.ai-quick-label { font-size: 12px; color: #6b7280; margin-right: 8px; }
.ai-quick-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ai-chip {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ai-chip:hover { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; }

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.ai-empty-state {
    margin: 0;
    padding: 24px 16px;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
}

/* Bule mesaje */
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-bubble {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
.ai-bubble-user {
    background: #3b82f6;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ai-bubble-assistant {
    background: #f3f4f6;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
}
.ai-bubble .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0;
}
.ai-bubble table {
    width: 100%;
    min-width: 200px;
    border-collapse: collapse;
    font-size: 13px;
}
.ai-bubble table th,
.ai-bubble table td {
    border: 1px solid #e5e7eb;
    padding: 6px 10px;
    text-align: left;
}
.ai-bubble table th { background: #f9fafb; font-weight: 600; }
.ai-bubble a { color: #3b82f6; text-decoration: none; }
.ai-bubble a:hover { text-decoration: underline; }

/* Composer – sticky jos */
.ai-composer-wrap {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}
.ai-composer { border-radius: 12px; overflow: hidden; border: 1px solid #d1d5db; }
.ai-chat-input {
    font-size: 14px;
    resize: none;
    border: none !important;
    min-height: 44px;
}
.ai-chat-input:focus { box-shadow: none; outline: none; }
.ai-send-btn { border-radius: 0; min-width: 48px; }
.ai-composer-hint { font-size: 11px; margin-top: 6px; display: block; }

/* Desktop: sidebar vizibil by default */
@media (min-width: 768px) {
    .ai-sidebar.ai-sidebar-visible { display: flex; }
}

/* AI Agent – Zonă Raport (cards, tabel, grafic) – responsive, mobile-first */
.ai-report-zone {
    min-height: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ai-report-zone .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ai-report-zone .card {
    min-width: 0;
}
@media (max-width: 576px) {
    .ai-report-zone {
        max-height: 280px;
        padding: 0.75rem !important;
    }
    .ai-report-zone .row.g-2 .col-6 { flex: 0 0 50%; max-width: 50%; }
}

/* Rentabilitate: listă proiecte – înălțime completă și scroll corect */
#rentabilitate-section .rentabilitate-row {
    min-height: calc(100vh - 180px);
}
#rentabilitate-section .rentabilitate-projects-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;        /* scroll în listă când sunt multe proiecte */
    -webkit-overflow-scrolling: touch;
}
#rentabilitate-section .card-body.p-0.flex-grow-1 {
    min-height: 0;
}