/* Include all the modern styles from the previous design */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: #f5f7fa;
    color: #2c3e50;
    line-height: 1.6;
}

/* Header Styles */
.dashboard-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 2rem; /* Reduced padding */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-content {
    max-width: 1800px; /* Using the wider max-width already present below */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping for login info and multiple buttons */
}

.header-title h1 {
    font-size: 1.5rem; /* Reduced font size */
    font-weight: 600;
    margin-bottom: 0.25rem; /* Reduced margin */
}

.header-subtitle {
    opacity: 0.9;
    font-size: 0.9rem; /* Reduced font size */
}

.header-actions {
    display: flex;
    gap: 0.75rem; /* Reduced gap */
    align-items: center; /* Align items including login info */
}

.header-actions .login-area {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Reduced gap */
    background: rgba(255,255,255,0.1);
    padding: 0.4rem 0.8rem; /* Reduced padding */
    border-radius: 0.5rem;
    backdrop-filter: blur(5px);
}
.header-actions .login-area span {
    font-weight: 500;
    font-size: 0.9rem; /* Adjusted font size */
}
.header-actions .login-area a,
.header-actions .login-area button {
    color: white;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0.2rem 0.4rem; /* Reduced padding */
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.9rem; /* Adjusted font size */
}
.header-actions .login-area a:hover,
.header-actions .login-area button:hover {
    background: rgba(255,255,255,0.2);
}

/* General button styles */
.btn {
    padding: 0.6rem 1.2rem; /* Reduced padding */
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9rem; /* Reduced font size */
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: rgba(255,255,255,0.2);
    color: white;
    backdrop-filter: blur(10px);
}

.btn-primary:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

.btn-action { /* More prominent action button, e.g., Add Member */
    background-color: #667eea;
    color: white;
    padding: 0.75rem 1.5rem;
}
.btn-action:hover {
    background-color: #5a6fcf;
}

/* Contextual Button Colors */
.btn-secondary {
    background-color: #6c757d; /* Grey */
    color: white;
}
.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-success {
    background-color: #28a745; /* Green */
    color: white;
}
.btn-success:hover {
    background-color: #218838;
}

.btn-danger {
    background-color: #dc3545; /* Red */
    color: white;
}
.btn-danger:hover {
    background-color: #c82333;
}

.btn-warning {
    background-color: #ffc107; /* Yellow */
    color: #212529; /* Dark text for yellow */
}
.btn-warning:hover {
    background-color: #e0a800;
}

.btn-info {
    background-color: #17a2b8; /* Teal/Info Blue */
    color: white;
}
.btn-info:hover {
    background-color: #138496;
}

/* Ensure these override any too-generic .btn styles if necessary, especially for background and color */
.btn.btn-secondary, .btn.btn-success, .btn.btn-danger, .btn.btn-warning, .btn.btn-info {
    /* No !important needed if base .btn doesn't force background/color */
}


/* Dashboard Stats */
.dashboard-stats {
    max-width: 1400px;
    margin: -2rem auto 2rem; /* Pulls up into header space */
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    position: relative; /* To ensure it's above filter bar if overlapping */
    z-index: 10;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon.blue { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
.stat-icon.green { background: linear-gradient(135deg, #11998e, #38ef7d); color: white; }
.stat-icon.orange { background: linear-gradient(135deg, #f2994a, #f2c94c); color: white; }
.stat-icon.red { background: linear-gradient(135deg, #eb3349, #f45c43); color: white; }

.stat-details h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.stat-label {
    color: #718096;
    font-size: 0.9rem;
}

/* Filter Bar / Action Bar */
.filter-bar, .action-bar { /* Combined for similar layout needs */
    max-width: 1400px;
    margin: 2rem auto; /* Give space from stats or header */
    padding: 0 2rem;
    display: flex;
    justify-content: space-between; /* Align items, e.g., search left, buttons right */
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Specific for filter-bar from my_team_view */
.filter-bar .search-box {
    flex: 1;
    min-width: 300px;
    position: relative;
}
.filter-bar .search-box input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.filter-bar .search-box input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}
.filter-bar .search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #718096;
}
.filter-bar .filter-dropdown {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.filter-bar .filter-dropdown:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}


/* Team Grid (from my_team_view) */
.team-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 2rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 2rem;
}

/* Team Member Card (from my_team_view) & User Project Card (from my_projects_view) */
.team-card, .user-project-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.team-card:hover { /* Only apply hover to team-card for now */
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.card-header, .user-card-header { /* Combined from my_team_view and my_projects_view */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.5rem;
    color: white;
    position: relative;
    overflow: hidden;
}
.card-header::before { /* Decorative element from my_team_view */
    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);
}

.member-info, .user-info { /* Combined */
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1; /* For .card-header::before */
}

.member-avatar, .user-avatar { /* Combined */
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 600;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255,255,255,0.3);
}

.member-details h3, .user-details h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.member-role, .user-details .user-role, .user-details .user-email { opacity: 0.9; font-size: 0.9rem; }

.member-badge { /* Specific to my_team_view */
    position: absolute; top: 1rem; right: 1rem;
    background: rgba(255,255,255,0.2);
    padding: 0.25rem 0.75rem; border-radius: 1rem;
    font-size: 0.8rem; backdrop-filter: blur(10px);
}

/* Progress Ring Section (from my_team_view) */
.progress-section {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.progress-ring { position: relative; width: 80px; height: 80px; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring-circle { fill: none; stroke-width: 8; }
.progress-ring-bg { stroke: #e2e8f0; }
.progress-ring-fill { stroke: #38ef7d; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.progress-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem; font-weight: 600;
}
.task-stats { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.stat-item i { width: 20px; text-align: center; }

/* Projects Section (shared layout for tasks in my_team_view and my_projects_view) */
.projects-section { padding: 1.5rem; }
.projects-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.projects-title { font-size: 1.1rem; font-weight: 600; color: #2d3748; }
.view-toggle { display: flex; gap: 0.5rem; } /* From my_team_view, can be reused or adapted */
.toggle-btn {
    padding: 0.25rem 0.5rem; border: 1px solid #e2e8f0; background: white;
    border-radius: 0.25rem; cursor: pointer; transition: all 0.3s ease;
}
.toggle-btn.active { background: #667eea; color: white; border-color: #667eea; }

/* Task List (shared layout from my_team_view and my_projects_view) */
.project-item { margin-bottom: 1rem; }
.project-header {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem;
    background: #f7fafc; border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease;
}
.project-header:hover { background: #edf2f7; }
.project-toggle-icon { color: #718096; transition: transform 0.3s ease; }
.project-header.expanded .project-toggle-icon { transform: rotate(90deg); }
.project-name { flex: 1; font-weight: 500; }
.task-count {
    background: #e2e8f0; padding: 0.25rem 0.5rem; border-radius: 1rem;
    font-size: 0.8rem; color: #4a5568;
}
.task-list { margin-top: 0.5rem; margin-left: 1.5rem; display: none; } /* Hidden by default */
.task-list.show { display: block; }
.task-item {
    padding: 0.75rem; background: white; border: 1px solid #e2e8f0;
    border-radius: 0.5rem; margin-bottom: 0.5rem; transition: all 0.3s ease;
}
.task-item:hover { border-color: #cbd5e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.task-name { font-weight: 500; color: #2d3748; }
.task-progress { display: flex; align-items: center; gap: 0.5rem; }
.progress-bar { width: 60px; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #38ef7d; transition: width 0.3s ease; }
.progress-label { font-size: 0.8rem; color: #718096; }
.task-meta { display: flex; gap: 1rem; font-size: 0.85rem; color: #718096; flex-wrap: wrap; } /* Added flex-wrap */
.task-meta span { display: flex; align-items: center; gap: 0.25rem; }

/* Status Colors (General) */
.status-active { color: #38ef7d !important; } /* Use important if needed to override other styles */
.status-overdue { color: #f45c43 !important; }
.status-upcoming { color: #667eea !important; }


/* Table Styles (from project_members.php) */
.table-container {
    max-width: 1400px;
    margin: 0 auto 2rem;
    padding: 0 2rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow-x: auto; /* For responsive tables */
}
#membersTable { /* Can be generalized if other tables need this style */
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
#membersTable th, #membersTable td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}
#membersTable th {
    font-weight: 600;
    color: #4a5568;
    background-color: #f7fafc;
}
#membersTable tr:last-child td { border-bottom: none; }
#membersTable tr:hover { background-color: #f7fafc; }
#membersTable .action-button { /* Generalize if needed */
    padding: 0.5rem 1rem; border: none; border-radius: 0.5rem;
    font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease;
    margin-right: 0.5rem; color: white;
}
#membersTable .edit-button { background-color: #3498db; } /* Blue */
#membersTable .edit-button:hover { background-color: #2980b9; }
#membersTable .delete-button { background-color: #e74c3c; } /* Red */
#membersTable .delete-button:hover { background-color: #c0392b; }
#membersTable input[type="checkbox"] { width: 1.2em; height: 1.2em; cursor: pointer; }


/* Login notification & No Data Messages (General) */
.login-notification-container { max-width: 1400px; margin: 2rem auto; padding: 0 2rem; }
.login-notification, .no-data-message { /* Combined for similar styling */
    padding: 2rem; background: white; border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center;
    margin: 3rem auto; /* Default margin for no-data */
}
.login-notification h2, .no-data-message h2 {
    font-size: 1.5rem; margin-bottom: 0.5rem; color: #2d3748;
}
.login-notification p, .no-data-message p { margin-bottom: 1rem; color: #718096; }
.no-data-message { padding: 3rem 1rem; } /* Specific padding for no-data */
.no-data-message h2 { margin-bottom: 1rem; color: #4a5568; }


/* Popup Styles (from project_members.php, can be generalized) */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: none; /* Hidden by default */
    align-items: center; justify-content: center; z-index: 1000;
}
.popup-overlay.show { display: flex; }
.popup-content {
    background: white; padding: 2rem; border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    width: 90%; max-width: 500px; /* Default max-width */
    position: relative;
}
.popup-content h1, .popup-content h2 { /* For About popups and Form popups */
    margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; color: #2d3748;
}
.popup-content p, .popup-content li { margin-bottom: 0.75rem; line-height: 1.6; }
.popup-content ol, .popup-content ul { margin-left: 1.5rem; margin-bottom: 1rem; }
.popup-content label {
    display: block; margin-bottom: 0.5rem; font-weight: 500; color: #4a5568;
}
.popup-content input[type="text"],
.popup-content input[type="email"],
.popup-content input[type="password"], /* Added for completeness */
.popup-content textarea { /* Added for completeness */
    width: 100%; padding: 0.75rem 1rem; border: 1px solid #e2e8f0;
    border-radius: 0.5rem; font-size: 1rem; margin-bottom: 1rem;
    transition: border-color 0.3s ease;
}
.popup-content input[type="text"]:focus,
.popup-content input[type="email"]:focus,
.popup-content input[type="password"]:focus,
.popup-content textarea:focus {
    outline: none; border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}
.popup-buttons {
    display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem;
}
.popup-buttons .btn { padding: 0.6rem 1.2rem; } /* Slightly smaller for popups */
.popup-buttons .btn-secondary { background: #e2e8f0; color: #4a5568; }
.popup-buttons .btn-secondary:hover { background: #cbd5e0; }

/* Ensure primary action buttons in popups are visible in light mode */
/* Default styling for .btn in .popup-buttons if not otherwise specified (e.g., not .btn-secondary) */
.popup-buttons .btn:not(.btn-secondary):not(.btn-danger) {
    background-color: #667eea; /* Theme's primary action color */
    color: white;
}
.popup-buttons .btn:not(.btn-secondary):not(.btn-danger):hover {
    background-color: #5a6fcf; /* Darker shade on hover */
}

.popup-close-btn {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    font-size: 1.5rem; color: #718096; cursor: pointer;
}
.popup-close-btn:hover { color: #2d3748; }

/* Export menu (from my_team_view) */
.export-menu { position: relative; }
.export-dropdown {
    position: absolute; top: 100%; right: 0; background: white;
    border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 0.5rem; min-width: 150px; display: none; z-index: 100;
}
.export-dropdown.show { display: block; }
.export-option {
    padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer;
    transition: background 0.3s ease; display: flex; align-items: center; gap: 0.5rem;
}
.export-option:hover { background: #f7fafc; }


/* Floating Action Buttons (Theme Toggle, About, etc.) */
.floating-actions {
    position: fixed; bottom: 20px; right: 20px;
    display: flex; flex-direction: column; gap: 0.5rem; z-index: 999;
}
.floating-actions .btn { /* This is the FAB style */
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; width: 50px; height: 50px; padding: 0;
    font-size: 1.25rem; /* Icon size */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    background: #667eea; /* Default FAB background */
    color: white; /* Default FAB icon color */
}
.floating-actions .btn:hover {
    background: #5a6fcf; /* Darken on hover */
    transform: translateY(-1px);
}
/* Specific override for .btn-primary when used as a FAB, if needed */
/* .floating-actions .btn.btn-primary { ... } */

/* Loading Animation */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}
.loading { animation: pulse 1.5s ease-in-out infinite; }


/* Dark Mode */
body.dark-mode { background-color: #1a202c; color: #e2e8f0; }
body.dark-mode .dashboard-header { background: linear-gradient(135deg, #4c51bf 0%, #805ad5 100%); }

body.dark-mode .stat-card,
body.dark-mode .team-card,
body.dark-mode .user-project-card,
body.dark-mode .filter-bar .filter-dropdown,
body.dark-mode .table-container,
body.dark-mode .login-notification,
body.dark-mode .no-data-message {
    background: #2d3748;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

body.dark-mode .filter-bar .search-box input {
    background: #2d3748; border-color: #4a5568; color: #e2e8f0;
}
body.dark-mode .filter-bar .search-box input::placeholder { color: #a0aec0; }
body.dark-mode .filter-bar .search-box i { color: #a0aec0; }


body.dark-mode .stat-label,
body.dark-mode .task-meta,
body.dark-mode .progress-label,
body.dark-mode .login-notification p,
body.dark-mode .no-data-message p {
    color: #a0aec0;
}

body.dark-mode .projects-title,
body.dark-mode .task-name,
body.dark-mode .login-notification h2,
body.dark-mode .no-data-message h2,
body.dark-mode .member-details h3, /* Ensure these are covered */
body.dark-mode .user-details h3 {
    color: #e2e8f0;
}
body.dark-mode .member-role,
body.dark-mode .user-details .user-role,
body.dark-mode .user-details .user-email {
    color: #cbd5e0; /* Slightly lighter for secondary text */
}


body.dark-mode .project-header { background: #374151; }
body.dark-mode .project-header:hover { background: #4a5568; }
body.dark-mode .task-item { background: #374151; border-color: #4a5568; }
body.dark-mode .task-count { background: #4a5568; color: #e2e8f0; }
body.dark-mode .progress-bar { background: #4a5568; } /* BG of the progress bar itself */
/* .progress-ring-bg is already set, dark mode might need a specific version if #e2e8f0 is too light */
body.dark-mode .progress-ring-bg { stroke: #4a5568; }


body.dark-mode #membersTable th {
    background-color: #374151; color: #e2e8f0; border-bottom-color: #4a5568;
}
body.dark-mode #membersTable td { border-bottom-color: #4a5568; }
body.dark-mode #membersTable tr:hover { background-color: #374151; }
body.dark-mode #membersTable .action-button.edit-button { background-color: #4299e1; }
body.dark-mode #membersTable .action-button.edit-button:hover { background-color: #3182ce; }
body.dark-mode #membersTable .action-button.delete-button { background-color: #f56565; }
body.dark-mode #membersTable .action-button.delete-button:hover { background-color: #e53e3e; }


body.dark-mode .popup-content { background: #2d3748; }
body.dark-mode .popup-content h1, body.dark-mode .popup-content h2,
body.dark-mode .popup-content label,
body.dark-mode .popup-close-btn:hover {
    color: #e2e8f0;
}
body.dark-mode .popup-content input[type="text"],
body.dark-mode .popup-content input[type="email"],
body.dark-mode .popup-content input[type="password"],
body.dark-mode .popup-content textarea {
    background: #1a202c; border-color: #4a5568; color: #e2e8f0;
}
body.dark-mode .popup-content input[type="text"]:focus,
body.dark-mode .popup-content input[type="email"]:focus,
body.dark-mode .popup-content input[type="password"]:focus,
body.dark-mode .popup-content textarea:focus {
    border-color: #63b3ed; box-shadow: 0 0 0 3px rgba(99,179,237,0.2);
}
body.dark-mode .popup-buttons .btn-secondary { background: #4a5568; color: #e2e8f0; }
body.dark-mode .popup-buttons .btn-secondary:hover { background: #718096; }
body.dark-mode .popup-close-btn { color: #a0aec0; }


body.dark-mode .export-dropdown { background: #2d3748; }
body.dark-mode .export-option:hover { background: #374151; }

body.dark-mode .floating-actions .btn {
    background: #4c51bf; /* Dark mode FAB background */
}
body.dark-mode .floating-actions .btn:hover {
    background: #4347a5; /* Darken on hover */
}

/* Dark Mode Status Colors */
body.dark-mode .status-active { color: #38ef7d !important; } /* Keep bright green */
body.dark-mode .status-overdue { color: #f56565 !important; } /* Lighter red for dark mode */
body.dark-mode .status-upcoming { color: #63b3ed !important; } /* Lighter blue for dark mode */


/* Responsive */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .header-actions { /* Stack buttons under title on mobile */
        flex-direction: column;
        width: 100%;
    }
    .header-actions .login-area {
        justify-content: center; /* Center login info if it's separate */
    }

    .dashboard-stats {
        margin-top: 1rem;
        grid-template-columns: 1fr; /* Stack stat cards */
    }
    .filter-bar, .action-bar {
        flex-direction: column;
        align-items: stretch; /* Full width buttons/inputs on mobile */
    }
    .filter-bar .search-box, .action-bar .btn { /* Ensure search and action buttons take full width */
        min-width: 100%;
        width: 100%;
    }
    .action-bar .btn { /* Center text in full-width buttons */
        justify-content: center;
    }

    .team-grid {
        grid-template-columns: 1fr; /* Stack team cards */
    }
    .popup-content {
        width: 95%; /* More screen width for popups on mobile */
        padding: 1.5rem;
    }
    .task-meta {
        flex-direction: column; /* Stack task meta items for better readability */
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Styles for Resource Timeline Chart - specific to resources.php */
#resourceTimelineContainer {
    position: relative; /* Keep relative for SVG positioning */
    width: 100%;
    /* height will be managed by JS or specific page style if needed, or use calc if header is fixed height */
    min-height: 400px; /* Example minimum height */
    border: 1px solid #e2e8f0; /* Match theme border */
    overflow: auto;
    background-color: #fff; /* Default background */
    margin-top: 1rem; /* Space from controls */
}

body.dark-mode #resourceTimelineContainer {
    background-color: #2d3748; /* Dark theme background */
    border-color: #4a5568; /* Dark theme border */
}

/* SVG elements within resourceTimelineContainer */
/* Styling for the timeline header background rect, using class from resources.php JS */
#resourceTimelineContainer .header-background {
    fill: #f7fafc;
    stroke: #e2e8f0; /* Light border for light mode */
    stroke-width: 1;
}
body.dark-mode #resourceTimelineContainer .header-background {
    fill: #2d3748; /* Darker background for dark mode, distinct from chart rows */
    stroke: #4a5568; /* Darker border for dark mode */
}

/* Styling for the date text in the timeline header, using class from resources.php JS */
#resourceTimelineContainer .date-label {
    font-size: 10px; /* Keep small for fitting more dates */
    text-anchor: middle;
    fill: #2c3e50; /* Dark text for light mode */
}
body.dark-mode #resourceTimelineContainer .date-label {
    fill: #e2e8f0; /* Light text for dark mode */
}


#resourceTimelineContainer .resource-row-band { /* Renamed for clarity, applied by JS */
    /* fill is set dynamically by JS based on dark mode and row index */
}

/* Widen containers for better use of space on large screens */
.dashboard-header .header-content,
.dashboard-stats,
.filter-bar, /* If used on pages that need to be wider */
.action-bar, /* If used on pages that need to be wider */
.team-container, /* For My Team View */
.my-projects-container .user-project-card, /* For My Projects View */
.table-container, /* For Project Members table */
.page-controls, /* For controls on pages like Resources, Kanban */
.timeline-main-container /* New class for Resources page timeline wrapper */ {
    max-width: 1800px; /* Increased from 1400px */
}

/* Media query for even wider screens if desired, e.g., > 1920px */
@media (min-width: 1921px) {
    .dashboard-header .header-content,
    .dashboard-stats,
    .filter-bar,
    .action-bar,
    .team-container,
    .my-projects-container .user-project-card,
    .table-container,
    .page-controls,
    .timeline-main-container {
        max-width: 90vw; /* Example: use viewport width */
    }
}


#resourceTimelineContainer .task-bar { /* Base task bar style */
    fill: #667eea; /* Theme primary color */
    cursor: pointer;
    transition: fill 0.2s ease;
}
#resourceTimelineContainer .task-bar:hover {
    fill: #5a6fcf; /* Darker shade of primary */
}
#resourceTimelineContainer .task-bar.overdue {
    fill: #f45c43; /* Theme overdue color */
}
#resourceTimelineContainer .task-bar.overdue:hover {
    fill: #e03c28; /* Darker overdue */
}

body.dark-mode #resourceTimelineContainer .task-bar {
    fill: #7f9cf5; /* Lighter primary for dark mode */
}
body.dark-mode #resourceTimelineContainer .task-bar:hover {
    fill: #6b8 Gyne; /* Slightly darker light primary */
}
body.dark-mode #resourceTimelineContainer .task-bar.overdue {
    fill: #f56565; /* Lighter red for dark mode */
}
body.dark-mode #resourceTimelineContainer .task-bar.overdue:hover {
    fill: #dd5454; /* Slightly darker light red */
}


#resourceTimelineContainer .task-label {
    font-size: 10px; /* Smaller font for fitting in bars */
    fill: white; /* Default label color */
    pointer-events: none;
    text-anchor: middle; /* Center text in bar if possible */
}
/* No specific dark mode for task-label as it's on colored bars, white usually works. */

#resourceTimelineContainer .resource-label-text { /* Applied by JS */
    font-size: 12px;
    text-anchor: end;
    fill: #2c3e50; /* Theme text color */
}
body.dark-mode #resourceTimelineContainer .resource-label-text {
    fill: #e2e8f0; /* Dark mode text color */
}

/* REMOVE OLD .time-axis-header-bg and .time-axis-label as they are replaced by .header-background and .date-label */
/*
#resourceTimelineContainer .time-axis-header-bg {
    fill: #f7fafc;
    stroke: #e2e8f0;
    stroke-width: 1;
}
body.dark-mode #resourceTimelineContainer .time-axis-header-bg {
    fill: #374151;
    stroke: #4a5568;
}

#resourceTimelineContainer .time-axis-label {
    font-size: 10px;
    text-anchor: middle;
    fill: #2c3e50;
}
body.dark-mode #resourceTimelineContainer .time-axis-label {
    fill: #e2e8f0;
}
*/

#resourceTimelineContainer .grid-line { /* Applied by JS */
    stroke: #e2e8f0; /* Light grid lines */
    stroke-width: 1;
}
body.dark-mode #resourceTimelineContainer .grid-line {
    stroke: #4a5568; /* Dark grid lines */
}

/* Tooltip for resource chart (and potentially Kanban) */
#tooltip { /* General tooltip style, can be shared */
    position: fixed; /* Use fixed if it needs to escape containers */
    background: #2d3748; /* Dark background for good contrast */
    color: white;
    padding: 15px; /* Increased uniform padding */
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-size: 0.9rem;
    max-width: 800px; /* Increased from 300px to match script.js expectation */
    display: none; /* Hidden by default */
    z-index: 1001; /* Above most elements */
    pointer-events: none; /* Tooltip should not capture mouse events */
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden; /* Prevent content from escaping */
}

#tooltip strong {
    font-weight: 600;
}

body.dark-mode #tooltip { /* Already dark, but can ensure consistency */
    background: #1a202c;
    border: 1px solid #4a5568;
}

/* Styling for the dedicated notes content wrapper */
.tooltip-notes-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word; /* Changed from break-all to break-word */
    padding-left: 5px;
    max-width: 100%; /* Ensure it doesn't exceed parent */
    overflow-x: auto; /* Allow horizontal scroll for very long content */
}

/* Long unbreakable content (like URLs) */
.tooltip-notes-content a,
.tooltip-notes-content .long-text {
    word-break: break-all; /* Only break-all for links */
    display: inline-block;
    max-width: 100%;
}

/* More specific styling for lists within the new notes content wrapper */
.tooltip-notes-content ul, 
.tooltip-notes-content ol {
    padding-left: 25px; /* Reduced from 35px which was in styles.css */
    margin-left: 10px; /* Added margin to push away from edge */
    list-style-position: outside;
}

.tooltip-notes-content li {
    margin-bottom: 4px;
    padding-left: 5px; /* Small padding for better readability */
    margin-left: 0; /* Reset any default margin */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Kanban Board Specific Styles - to be themed */
#kanbanBoard {
    display: flex;
    justify-content: space-around; /* Or space-between */
    gap: 1.5rem; /* Spacing between columns */
    padding: 0 2rem 2rem; /* Match container padding */
    max-width: 1400px;
    margin: 1rem auto; /* Spacing from controls */
    align-items: flex-start; /* Align columns at the top */
}

.kanban-column {
    flex: 1;
    min-width: 280px; /* Minimum width for a column */
    max-width: 400px; /* Maximum width for a column */
    background-color: #f0f2f5; /* Light greyish background for columns */
    border-radius: 0.75rem; /* Rounded corners for columns */
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}
.kanban-column h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}
.kanban-tasks { /* Container for task cards within a column */
    flex-grow: 1; /* Allow it to take available space */
    min-height: 100px; /* Minimum height to show it's a drop zone */
    overflow-y: auto; /* Scroll if many tasks */
    padding: 0.25rem; /* Small padding around tasks */
}

.task-card { /* Individual task card */
    background-color: white;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: grab; /* Indicate draggable */
    transition: box-shadow 0.2s ease;
}
.task-card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.task-card .task-card-title {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #2d3748;
}
.task-card .task-card-meta {
    font-size: 0.85rem;
    color: #718096;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.task-card .task-card-meta .task-due-date,
.task-card .task-card-meta .task-resource {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.task-card .task-card-progress {
    margin-top: 0.75rem;
}
.task-card .progress-bar-kanban { /* Specific progress bar for kanban cards */
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}
.task-card .progress-fill-kanban {
    height: 100%;
    background-color: #38ef7d; /* Green for progress */
    border-radius: 4px;
    transition: width 0.3s ease;
}


/* Dark Mode for Kanban */
body.dark-mode #kanbanBoard {
    /* Container is fine, column colors change */
}
body.dark-mode .kanban-column {
    background-color: #2d3748; /* Darker column background */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
body.dark-mode .kanban-column h2 {
    color: #e2e8f0; /* Light text for heading */
    border-bottom-color: #4a5568; /* Darker border */
}
body.dark-mode .task-card {
    background-color: #374151; /* Darker card background */
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
body.dark-mode .task-card .task-card-title {
    color: #e2e8f0; /* Light text for title */
}
body.dark-mode .task-card .task-card-meta {
    color: #a0aec0; /* Lighter grey for meta */
}
body.dark-mode .task-card .progress-bar-kanban {
    background-color: #4a5568; /* Darker progress bar background */
}
/* .progress-fill-kanban can remain green, or use a lighter green if preferred */
body.dark-mode .task-card .progress-fill-kanban {
     background-color: #38ef7d;
}

/* Generic control styling for resource/kanban pages if not covered by filter-bar/action-bar */
.page-controls {
    max-width: 1400px;
    margin: 1rem auto;
    padding: 0 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.page-controls label {
    margin-right: 0.5rem;
    font-weight: 500;
}
.page-controls select, .page-controls button:not(.btn-primary):not(.floating-actions .btn) { /* Style non-primary buttons and selects */
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.page-controls select:focus, .page-controls button:not(.btn-primary):focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}
.page-controls button:not(.btn-primary):hover {
    background-color: #f7fafc;
}

body.dark-mode .page-controls label {
    color: #e2e8f0;
}
body.dark-mode .page-controls select,
body.dark-mode .page-controls button:not(.btn-primary):not(.floating-actions .btn) {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}
body.dark-mode .page-controls select:focus,
body.dark-mode .page-controls button:not(.btn-primary):focus {
    border-color: #63b3ed;
    box-shadow: 0 0 0 3px rgba(99,179,237,0.2);
}
body.dark-mode .page-controls button:not(.btn-primary):hover {
    background-color: #374151;
}

/* Ensure Font Awesome icons are styled correctly if used outside of .btn */
.fas, .far, .fal, .fab { /* Base Font Awesome classes */
    line-height: inherit; /* Prevent line-height issues */
}