:root {
  /* Light mode colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #9ca3af;
  --border-color: #dee2e6;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.125);
  --navbar-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --navbar-border: rgba(102, 126, 234, 0.2);
  --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);
  --purple-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

[data-theme="dark"] {
  /* Dark mode colors */
  --bg-primary: #1a1d24;
  --bg-secondary: #16181d;
  --bg-tertiary: #23262d;
  --text-primary: #f8f9fa;
  --text-secondary: #e9ecef;
  --text-muted: #9ca3af;
  --border-color: rgba(255, 255, 255, 0.1);
  --card-bg: #1a1d24;
  --card-border: rgba(255, 255, 255, 0.08);
  --navbar-bg: linear-gradient(135deg, #23262d 0%, #2a2e36 100%);
  --navbar-border: rgba(102, 126, 234, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --purple-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Apply theme variables */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

/* Light mode specific adjustments */
[data-theme="light"] .navbar-dark .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .navbar-dark .navbar-nav .nav-link:hover {
  color: #667eea !important;
}

[data-theme="light"] .navbar-brand img {
  filter: invert(1);
}

/* Light mode burger menu icon - dark color */
[data-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

[data-theme="light"] .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.3) !important;
}

/* Light mode for login page logo */
[data-theme="light"] .card-header img[src*="logo_ocp_full_light"] {
  filter: invert(1);
}

[data-theme="light"] .text-muted {
  color: #6c757d !important;
}

/* Light mode dashboard cards - white background with dark text */
/* Exclude current-week-card which has custom styling */
[data-theme="light"] .dashboard-card:not(.current-week-card) {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.125) !important;
  color: #212529 !important;
}

[data-theme="light"] .section-description {
  color: #6c757d !important;
}

/* Light mode for buttons and badges */
[data-theme="light"] .btn-outline-secondary {
  border-color: #6c757d;
  color: #6c757d;
}

[data-theme="light"] .btn-outline-secondary:hover {
  background-color: #6c757d;
  color: #ffffff;
}

/* Light mode - remove shadows from non-card elements */
[data-theme="light"] .shadow-sm:not(.card) {
  box-shadow: none !important;
  border: 1px solid #c5d9f7 !important;
}

/* Light mode cards */
[data-theme="light"] .card {
  border: none !important;
  border-radius: 0.5rem !important;
  overflow: visible !important;
  box-shadow: 0 0 0 1px #c5d9f7 !important;
}

[data-theme="light"] .card > .card-body:last-child {
  border-radius: 0 0 0.5rem 0.5rem !important;
}

[data-theme="light"] .card > .card-body:first-child {
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

[data-theme="light"] .card > .card-body:only-child {
  border-radius: 0.5rem !important;
}

[data-theme="light"] .card > .card-header:first-child {
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

[data-theme="dark"] .card {
  border: none !important;
  border-radius: 0.5rem !important;
  overflow: visible !important;
  box-shadow: 0 0 0 1px #3d5a80 !important;
}

[data-theme="dark"] .card > .card-body:last-child {
  border-radius: 0 0 0.5rem 0.5rem !important;
}

[data-theme="dark"] .card > .card-body:first-child {
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

[data-theme="dark"] .card > .card-body:only-child {
  border-radius: 0.5rem !important;
}

[data-theme="dark"] .card > .card-header:first-child {
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

/* Allow dropdowns to appear above other content */
.autocomplete-wrapper {
  position: relative;
  z-index: auto;
}

.autocomplete-dropdown,
.dropdown-menu {
  z-index: 1050 !important;
  position: absolute !important;
}

/* Ensure card bodies don't clip dropdowns */
.card-body {
  overflow: visible !important;
}

/* Light mode for tables */
[data-theme="light"] .table {
  color: #212529;
}

[data-theme="light"] .table-secondary th {
  color: #212529 !important;
}

[data-theme="light"] thead th {
  color: #212529 !important;
}

/* Light mode for forms - nearly white background with visible border */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: #fcfcfd !important;
  color: #212529 !important;
  border: 1px solid #c5ccd6 !important;
  border-radius: 0.375rem !important;
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #667eea !important;
  background-color: #ffffff !important;
  color: #212529 !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Dark mode for forms - distinct background from card */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #2a2d33 !important;
  color: #f8f9fa !important;
  border-color: #3d4149 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #667eea !important;
  background-color: #2a2d33 !important;
  color: #f8f9fa !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

[data-theme="light"] .form-label,
[data-theme="light"] label {
  color: #212529 !important;
}

/* Better spacing between form rows */
.card-body .row.g-3 {
  row-gap: 1.25rem !important;
}

.card-body form .row + .row {
  margin-top: 0.75rem !important;
}

/* Form labels spacing */
.form-label {
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
}

[data-theme="light"] .input-group-text {
  background-color: #e9ecef !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

/* Light mode for modals - don't override z-index, let Bootstrap handle it */
[data-theme="light"] .modal-content {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: rgba(0, 0, 0, 0.125);
}

[data-theme="light"] .modal-header {
  background-color: #e8f0fe !important;
  border-bottom: 2px solid #c5d9f7 !important;
}

[data-theme="light"] .modal-header .modal-title {
  color: #1a365d !important;
}

[data-theme="dark"] .modal-header {
  background-color: #1e2a3a !important;
  border-bottom: 2px solid #2d4a6f !important;
}

[data-theme="dark"] .modal-header .modal-title {
  color: #e2e8f0 !important;
}

[data-theme="light"] .modal-header .modal-title {
  color: #212529 !important;
}

[data-theme="light"] .modal-header .btn-close {
  filter: none;
}

[data-theme="light"] .modal-body {
  background-color: #ffffff !important;
  color: #212529 !important;
}

[data-theme="light"] .modal-footer {
  background-color: #ffffff !important;
  border-top-color: #dee2e6;
}

/* Light mode dropdown */
[data-theme="light"] .autocomplete-dropdown {
  background: #ffffff;
  border-color: #dee2e6;
}

[data-theme="light"] .autocomplete-item {
  color: #212529;
  border-bottom-color: #dee2e6;
}

[data-theme="light"] .autocomplete-item:hover {
  background: rgba(102, 126, 234, 0.1);
}

/* Light mode for homepage sections */
[data-theme="light"] .section-title {
  color: #212529 !important;
}

/* Category sections with gradient backgrounds keep light text */
[data-theme="light"] .category-section .section-title {
  color: inherit !important;
}

[data-theme="light"] .hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff !important;
}

/* Quick access cards - modern cards in light theme */
[data-theme="light"] .card-title {
  color: #212529 !important;
}

[data-theme="light"] .card-description {
  color: #6c757d !important;
}

/* Modern cards in quick access use light theme */
[data-theme="light"] .modern-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.125) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .modern-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(102, 126, 234, 0.3) !important;
}

[data-theme="light"] .modern-card .card-title {
  color: #212529 !important;
}

[data-theme="light"] .modern-card .card-description {
  color: #6c757d !important;
}

[data-theme="light"] .card-image-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .card-content {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%) !important;
}

/* Light mode card headers - light blue */
[data-theme="light"] .card:not(.current-week-card):not(.top-projects-analytics-card):not(.expertise-card) .card-header {
  background-color: #e8f0fe !important;
  color: #1a365d !important;
  border-bottom: 1px solid #c5d9f7 !important;
}

[data-theme="light"] .card:not(.current-week-card):not(.top-projects-analytics-card):not(.expertise-card) .card-header .card-title {
  color: #1a365d !important;
}

/* Dark mode card headers - blue tint */
[data-theme="dark"] .card:not(.current-week-card):not(.top-projects-analytics-card):not(.expertise-card) .card-header {
  background-color: #1e3a5f !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid #3d5a80 !important;
}

[data-theme="dark"] .card:not(.current-week-card):not(.top-projects-analytics-card):not(.expertise-card) .card-header .card-title {
  color: #e2e8f0 !important;
}

/* Don't override card-body for cards with custom styling */
[data-theme="light"] .card:not(.current-week-card):not(.top-projects-analytics-card) .card-body {
  background-color: #ffffff !important;
  color: #212529 !important;
}

[data-theme="light"] .card:not(.current-week-card):not(.top-projects-analytics-card) .card-footer {
  background-color: #f8f9fa !important;
  border-top-color: #dee2e6 !important;
}

[data-theme="light"] .text-light {
  color: #6c757d !important;
}

/* Search and filter blocks in explore pages */
[data-theme="light"] .search-block,
[data-theme="light"] .filter-block {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.125) !important;
}

/* Light mode for badges */
[data-theme="light"] .badge.bg-secondary {
  background-color: #6c757d !important;
  color: #ffffff !important;
}

[data-theme="light"] .badge.bg-info {
  background-color: #0dcaf0 !important;
  color: #ffffff !important;
}

[data-theme="light"] .badge.bg-success {
  background-color: #198754 !important;
  color: #ffffff !important;
}

[data-theme="light"] .badge.bg-warning {
  background-color: #ffc107 !important;
  color: #000000 !important;
}

/* Project badges - used across explore pages */
.project-badge {
  background-color: #3d4451;
  color: #d1d5db;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.3em 0.55em;
}

[data-theme="light"] .project-badge {
  background-color: #e5e7eb;
  color: #374151;
}

/* Light mode for list groups */
[data-theme="light"] .list-group-item {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

[data-theme="light"] .list-group-item-action:hover {
  background-color: #f8f9fa !important;
}

[data-theme="light"] .list-group-item a {
  color: #212529 !important;
}

[data-theme="light"] .list-group-item a:hover {
  color: #667eea !important;
}

[data-theme="light"] .list-group-item strong,
[data-theme="light"] .list-group-item span,
[data-theme="light"] .list-group-item p {
  color: #212529 !important;
}

/* Light mode for buttons in explore/configure pages */
[data-theme="light"] .btn-dark {
  background-color: #212529 !important;
  border-color: #212529 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-dark:hover {
  background-color: #424649 !important;
  border-color: #373b3e !important;
}

/* Light mode for navigation pills/tabs */
[data-theme="light"] .nav-pills .nav-link {
  color: #495057 !important;
}

[data-theme="light"] .nav-pills .nav-link:hover {
  color: #667eea !important;
  background-color: rgba(102, 126, 234, 0.1) !important;
}

[data-theme="light"] .nav-pills .nav-link.active {
  background-color: #667eea !important;
  color: #ffffff !important;
}

/* Light mode for borders and dividers */
[data-theme="light"] hr {
  border-color: #dee2e6 !important;
  opacity: 1;
}

/* Light mode for headers - default to dark, but not inside gradient cards */
[data-theme="light"] body h1,
[data-theme="light"] body h2,
[data-theme="light"] body h3,
[data-theme="light"] body h4,
[data-theme="light"] body h5,
[data-theme="light"] body h6 {
  color: #212529;
}

/* Keep original colors for gradient cards - no override needed */

/* Light mode for data display elements */
[data-theme="light"] .data-row,
[data-theme="light"] .info-row {
  color: #212529 !important;
}

[data-theme="light"] .data-row:nth-child(even),
[data-theme="light"] .info-row:nth-child(even) {
  background: #f8f9fa !important;
}

/* Light mode for dashboard elements - white cards with dark text */
/* Don't apply to gradient cards */
[data-theme="light"] .dashboard-card:not(.current-week-card) h6 {
  color: #212529 !important;
}

[data-theme="light"] .dashboard-card:not(.current-week-card) .card-body {
  color: #212529 !important;
}

[data-theme="light"] .dashboard-card:not(.current-week-card) .dashboard-icon {
  color: #667eea !important;
}

/* Ensure gradient cards text stays white in light mode */
[data-theme="light"] .current-week-card,
[data-theme="light"] .current-week-card *,
[data-theme="light"] .current-week-card h6,
[data-theme="light"] .current-week-card .card-body,
[data-theme="light"] .current-week-card .dashboard-icon,
[data-theme="light"] .current-week-card .week-id,
[data-theme="light"] .current-week-card .week-dates,
[data-theme="light"] .current-week-card .welcome-text,
[data-theme="light"] .current-week-card .welcome-name {
  color: #ffffff !important;
}

/* Light mode for top-projects card - lighter gray */
[data-theme="light"] .top-projects-analytics-card {
  background: #f7fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #2d3748 !important;
}

[data-theme="light"] .top-projects-analytics-card h5,
[data-theme="light"] .top-projects-analytics-card .card-body {
  color: #2d3748 !important;
}

[data-theme="light"] .top-projects-analytics-card .dashboard-icon {
  color: #718096 !important;
}

[data-theme="light"] .top-projects-header {
  color: #718096 !important;
}

[data-theme="light"] .top-project-item {
  background: rgba(0,0,0,0.05) !important;
}

[data-theme="light"] .top-project-item.clickable:hover {
  background: rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .top-project-rank {
  color: #f7fafc !important;
  background: #718096 !important;
}

[data-theme="light"] .top-project-name {
  color: #2d3748 !important;
}

[data-theme="light"] .top-project-time {
  color: #718096 !important;
}

[data-theme="light"] .chart-modal-header,
[data-theme="light"] .chart-modal-header *,
[data-theme="light"] .chart-modal-header h5,
[data-theme="light"] .chart-modal-header .dashboard-icon {
  color: #212529 !important;
}

/* Light mode for project progress elements - dark text on white cards */
[data-theme="light"] .progress-project-name,
[data-theme="light"] .ended-project-name {
  color: #212529 !important;
}

[data-theme="light"] .progress-remaining {
  color: #667eea !important;
}

[data-theme="light"] .progress-remaining.urgent {
  color: #ff8c00 !important;
}

[data-theme="light"] .progress-remaining.overdue {
  color: #c70039 !important;
}

[data-theme="light"] .progress-date,
[data-theme="light"] .ended-project-date {
  color: #6c757d !important;
}

/* Progress bar labels */
.progress-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  gap: 0.5rem;
}

.progress-left-info {
  display: flex;
  align-items: center;
}

.progress-right-info {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.progress-icon {
  font-size: 0.75rem;
  opacity: 0.6;
}

.progress-elapsed {
  color: #9ca3af;
  font-weight: 500;
}

.progress-remaining {
  color: #8b9df7;
  font-weight: 500;
}

.progress-remaining.urgent {
  color: #ff8c00;
}

.progress-remaining.overdue {
  color: #c70039;
}

.progress-remaining.ongoing-indefinite {
  color: #9ca3af;
  font-style: italic;
}

/* Progress bars */
.progress-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  overflow: hidden;
}


.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-bar-fill.urgent {
  background: linear-gradient(90deg, #ff8c00 0%, #ff6347 100%);
}

.progress-bar-fill.overdue {
  background: linear-gradient(90deg, #c70039 0%, #900c3f 100%);
}

.progress-bar-fill.striped {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.1) 4px,
    rgba(255,255,255,0.1) 8px
  );
  animation: stripe-scroll 1.5s linear infinite;
}

.progress-bar-fill.striped:not(.urgent):not(.overdue) {
  background-color: #667eea;
}

.progress-bar-fill.striped.urgent {
  background-color: #ff8c00;
}

.progress-bar-fill.striped.overdue {
  background-color: #c70039;
}

@keyframes stripe-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 22.6px 0; }
}

[data-theme="light"] .progress-elapsed {
  color: #6c757d;
}

[data-theme="light"] .progress-remaining {
  color: #667eea;
}

[data-theme="light"] .progress-remaining.urgent {
  color: #ff8c00;
}

[data-theme="light"] .progress-remaining.ongoing-indefinite {
  color: #6c757d;
}

[data-theme="light"] .progress-bar-container {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Light mode for progress items */
[data-theme="light"] .progress-item {
  background: transparent;
}

[data-theme="light"] .progress-item:hover {
  background: transparent;
}

[data-theme="light"] .ended-project-item {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ended-project-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Light mode for comments - dark text on white cards */
[data-theme="light"] .comment-week {
  color: #667eea !important;
}

[data-theme="light"] .comment-dates {
  color: #6c757d !important;
}

[data-theme="light"] .comment-text {
  color: #212529 !important;
}

[data-theme="light"] .comment-item {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .comment-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .comment-header-clickable:hover {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .comment-toggle-icon {
  color: #667eea !important;
}

/* Navigation tabs - profile-nav style for all pages */
.profile-nav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 1.5rem;
}

.profile-nav-link {
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  color: #e9ecef;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  border-radius: 6px 6px 0 0;
  background-color: transparent;
}

.profile-nav-link:hover {
  color: #667eea;
  border-bottom-color: #667eea;
  background-color: rgba(102, 126, 234, 0.1);
}

.profile-nav-link.active {
  color: #667eea;
  border-bottom-color: #667eea;
  background-color: rgba(102, 126, 234, 0.15);
  font-weight: 600;
}

/* Disabled navigation tabs */
.profile-nav-link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  color: #6c757d !important;
}

.profile-nav-link.disabled:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Light mode for profile pages */
[data-theme="light"] .profile-nav {
  border-bottom-color: #dee2e6;
  background-color: transparent;
}

[data-theme="light"] .profile-nav-link {
  color: #495057 !important;
  background-color: transparent;
}

[data-theme="light"] .profile-nav-link:hover {
  color: #667eea !important;
  border-bottom-color: #667eea !important;
  background-color: rgba(102, 126, 234, 0.08);
}

[data-theme="light"] .profile-nav-link.active {
  color: #667eea !important;
  border-bottom-color: #667eea !important;
  background-color: rgba(102, 126, 234, 0.12);
  font-weight: 600;
}

/* Disabled tabs - light mode */
[data-theme="light"] .profile-nav-link.disabled {
  color: #adb5bd !important;
  opacity: 0.6;
}

[data-theme="light"] .profile-nav-link.disabled:hover {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Profile page cards */
[data-theme="light"] .profile-card,
[data-theme="light"] .project-card {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.125) !important;
  color: #212529 !important;
}

/* Light mode for profile name link */
[data-theme="light"] .profile-name-link {
  color: #212529 !important;
}

[data-theme="light"] .profile-name-link:hover {
  color: #667eea !important;
}

/* Week badges and date displays */
[data-theme="light"] .date-range {
  color: #6c757d !important;
}

/* Time and customer displays */
[data-theme="light"] .time-value {
  color: #212529 !important;
}

[data-theme="light"] .time-unit {
  color: #6c757d !important;
}

[data-theme="light"] .customer-name {
  color: #212529 !important;
}

[data-theme="light"] .customer-icon {
  color: #667eea !important;
}

/* Dividers */
[data-theme="light"] .divider-text {
  color: #667eea !important;
}

/* Progress info */
[data-theme="light"] .progress-info {
  color: #6c757d !important;
}

/* Light mode for project modal */
[data-theme="light"] .project-card-modal {
  background-color: #ffffff;
}

[data-theme="light"] .project-card-modal .card-title {
  color: #212529 !important;
}

[data-theme="light"] .task-list-modal li {
  color: #212529 !important;
}

/* Chart modal - gradient header stays as-is, body gets light theme */
[data-theme="light"] .chart-modal-content {
  background-color: #ffffff;
}

[data-theme="light"] .chart-modal-body {
  color: #212529;
}

/* Light mode for Chart.js canvas text */
[data-theme="light"] canvas {
  color: #212529;
}

[data-theme="light"] .chart-container,
[data-theme="light"] .chart-container-modal {
  color: #212529;
}

/* Light mode for chart controls */
[data-theme="light"] #period-selector,
[data-theme="light"] #project-selector,
[data-theme="light"] #period-selector-modal,
[data-theme="light"] #project-selector-modal {
  background: #ffffff !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

[data-theme="light"] #period-selector:focus,
[data-theme="light"] #project-selector:focus,
[data-theme="light"] #period-selector-modal:focus,
[data-theme="light"] #project-selector-modal:focus {
  background: #ffffff !important;
  color: #212529 !important;
  border-color: #667eea !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

[data-theme="light"] #period-selector option,
[data-theme="light"] #project-selector option,
[data-theme="light"] #period-selector-modal option,
[data-theme="light"] #project-selector-modal option {
  background: #ffffff;
  color: #212529;
}

/* Light mode for alerts */
[data-theme="light"] .alert {
  color: #212529;
}

[data-theme="light"] .alert-info {
  background-color: #cff4fc;
  border-color: #b6effb;
  color: #055160;
}

[data-theme="light"] .alert-warning {
  background-color: #fff3cd;
  border-color: #ffecb5;
  color: #664d03;
}

[data-theme="light"] .alert-danger {
  background-color: #f8d7da;
  border-color: #f5c2c7;
  color: #842029;
}

[data-theme="light"] .alert-success {
  background-color: #d1e7dd;
  border-color: #badbcc;
  color: #0f5132;
}

/* Light mode for code blocks */
[data-theme="light"] pre,
[data-theme="light"] code {
  background-color: #f8f9fa;
  color: #212529;
  border-color: #dee2e6;
}

/* Light mode for breadcrumbs */
[data-theme="light"] .breadcrumb {
  background-color: #e9ecef;
}

[data-theme="light"] .breadcrumb-item,
[data-theme="light"] .breadcrumb-item a {
  color: #495057;
}

[data-theme="light"] .breadcrumb-item.active {
  color: #6c757d;
}

/* Autocomplete/Combobox Styles */
.autocomplete-wrapper {
  position: relative;
}

.input-with-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-dropdown .form-control.with-dropdown-icon {
  padding-right: 2.5rem;
}

.input-with-dropdown .form-control-lg.with-dropdown-icon {
  padding-right: 3rem;
}

.dropdown-toggle-icon {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  background: transparent;
  border: none;
  color: #6c757d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.form-control-lg + .dropdown-toggle-icon,
.input-with-dropdown:has(.form-control-lg) .dropdown-toggle-icon {
  width: 3rem;
}

.dropdown-toggle-icon:hover {
  color: #667eea;
}

.dropdown-toggle-icon:focus {
  outline: none;
  color: #667eea;
}

.dropdown-toggle-icon i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.dropdown-toggle-icon.open i {
  transform: rotate(180deg);
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1e1e1e;
  border: 1px solid #343a40;
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: -1px;
}

.autocomplete-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  color: #f8f9fa;
  position: relative;
}

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

.autocomplete-item:hover,
.autocomplete-item.focused {
  background: rgba(102, 126, 234, 0.15);
  color: #8b9df7;
}

.autocomplete-item i {
  color: #667eea;
}

/* Light theme for autocomplete */
[data-theme="light"] .autocomplete-dropdown {
  background: white;
  border-color: #dee2e6;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

[data-theme="light"] .autocomplete-item {
  color: #212529;
  border-bottom-color: #f0f0f0;
}

[data-theme="light"] .autocomplete-item:hover,
[data-theme="light"] .autocomplete-item.focused {
  background: rgba(102, 126, 234, 0.12);
  color: #667eea;
}

[data-theme="light"] .dropdown-toggle-icon {
  color: #6c757d;
}

[data-theme="light"] .dropdown-toggle-icon:hover,
[data-theme="light"] .dropdown-toggle-icon:focus {
  color: #667eea;
}

/* Table Cell Styles (from profile) */
.date-cell {
  min-width: 140px;
}

.date-display {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.week-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #667eea;
  text-decoration: underline;
  text-decoration-color: #667eea;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: help;
}

[data-theme="light"] .week-badge {
  color: #667eea;
  text-decoration-color: #667eea;
}

/* Hide the date range by default */
.date-display .date-range {
  display: none;
}

.date-range {
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.3;
}

.time-cell {
  min-width: 100px;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.time-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f8f9fa;
}

.time-unit {
  font-size: 0.85rem;
  color: #9ca3af;
  font-weight: 500;
}

.rd-cell {
  min-width: 90px;
}

.rd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  width: fit-content;
}

.rd-badge.has-rd {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.rd-badge.has-rd i {
  color: #ffc107;
}

.customer-cell {
  min-width: 150px;
}

.customer-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-icon {
  color: #667eea;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.customer-name {
  font-size: 0.9rem;
  color: #e9ecef;
  font-weight: 500;
}

/* Light theme for table cells */
[data-theme="light"] .time-value {
  color: #212529;
}

[data-theme="light"] .customer-name {
  color: #212529;
}

[data-theme="light"] .date-range {
  color: #6c757d;
}

[data-theme="light"] .time-unit {
  color: #6c757d;
}

/* Responsive navigation tabs */
@media (max-width: 768px) {
  .profile-nav {
    gap: 0.25rem;
  }

  .profile-nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* Smooth transition for all theme changes */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Exclude form inputs from transitions for immediate visual feedback */
input[type="radio"],
input[type="checkbox"],
.form-check-input {
  transition: none !important;
}

/* Ensure navbar stays sticky and visible but below modals */
.navbar.sticky-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
}

body, html {
  overflow-x: hidden;
}

.container-fluid {
  position: relative;
  /* z-index removed to prevent stacking context issues with modals */
}

/* PrimeVue disabled inputs - global override for light theme */
[data-theme="light"] .p-inputnumber.p-disabled,
[data-theme="light"] .p-inputnumber.p-disabled input,
[data-theme="light"] .p-inputnumber.p-disabled .p-inputnumber-input,
[data-theme="light"] .p-textarea.p-disabled,
[data-theme="light"] .p-textarea:disabled,
[data-theme="light"] textarea.p-disabled,
[data-theme="light"] textarea:disabled,
[data-theme="light"] textarea[disabled],
[data-theme="light"] input:disabled {
  background-color: #f8f9fa !important;
  color: #adb5bd !important;
  border-color: #dee2e6 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Additional specificity for textarea elements - light mode */
[data-theme="light"] .p-textarea.p-disabled.p-textarea,
[data-theme="light"] .imputations-table textarea:disabled,
[data-theme="light"] .imputations-table .p-textarea:disabled {
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
  color: #adb5bd !important;
}

[data-theme="light"] .p-inputnumber.p-disabled .p-inputnumber-button,
[data-theme="light"] .p-inputnumber.p-disabled button {
  background-color: #e9ecef !important;
  color: #adb5bd !important;
  border-color: #dee2e6 !important;
}

/* PrimeVue disabled inputs - global override for dark theme */
[data-theme="dark"] .p-inputnumber.p-disabled,
[data-theme="dark"] .p-inputnumber.p-disabled input,
[data-theme="dark"] .p-inputnumber.p-disabled .p-inputnumber-input,
[data-theme="dark"] .p-textarea.p-disabled,
[data-theme="dark"] .p-textarea:disabled,
[data-theme="dark"] textarea.p-disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] textarea[disabled],
[data-theme="dark"] input:disabled {
  background-color: #2a2a2a !important;
  color: #6c757d !important;
  border-color: #3a3a3a !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Additional specificity for textarea elements - dark mode */
[data-theme="dark"] .p-textarea.p-disabled.p-textarea,
[data-theme="dark"] .imputations-table textarea:disabled,
[data-theme="dark"] .imputations-table .p-textarea:disabled {
  background-color: #2a2a2a !important;
  background: #2a2a2a !important;
  color: #6c757d !important;
}

[data-theme="dark"] .p-inputnumber.p-disabled .p-inputnumber-button,
[data-theme="dark"] .p-inputnumber.p-disabled button {
  background-color: #1f1f1f !important;
  color: #6c757d !important;
  border-color: #3a3a3a !important;
}

/* Dark mode table headers - reduce contrast */
[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary > th,
[data-theme="dark"] .table-secondary > td,
[data-theme="dark"] tr.table-secondary > th,
[data-theme="dark"] tr.table-secondary > td,
[data-theme="dark"] tfoot.table-secondary > tr > th,
[data-theme="dark"] tfoot.table-secondary > tr > td,
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td,
[data-theme="dark"] tr.table-light > th,
[data-theme="dark"] tr.table-light > td,
[data-theme="dark"] .table-dark,
[data-theme="dark"] .table-dark > th,
[data-theme="dark"] .table-dark > td,
[data-theme="dark"] tr.table-dark > th,
[data-theme="dark"] tr.table-dark > td {
  --bs-table-bg: #2a2e38 !important;
  --bs-table-color: #c9cdd4 !important;
  background-color: #2a2e38 !important;
  color: #c9cdd4 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Table responsive - horizontal scroll only when needed */
.table-responsive {
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Global Draft Banner - Shows pending changes notification on all pages
   ═══════════════════════════════════════════════════════════════════════════ */
.global-draft-banner {
  position: sticky;
  top: 56px;
  z-index: 1019;
  background-color: rgb(127, 29, 29);
  border-bottom: 1px solid rgba(239, 68, 68, 0.5);
  padding: 0.75rem 1rem;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}

.global-draft-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(254, 202, 202);
  font-weight: 500;
}

.global-draft-link {
  margin-left: 1rem;
  color: rgb(254, 202, 202) !important;
  text-decoration: underline;
  opacity: 0.9;
  cursor: pointer;
}

.global-draft-link:hover {
  opacity: 1;
  color: #ffffff !important;
}

/* Light theme adjustments for global draft banner */
[data-theme="light"] .global-draft-banner {
  background-color: rgb(254, 226, 226);
  border-bottom-color: rgba(239, 68, 68, 0.4);
}

[data-theme="light"] .global-draft-content {
  color: rgb(127, 29, 29);
}

[data-theme="light"] .global-draft-link {
  color: rgb(127, 29, 29) !important;
}

[data-theme="light"] .global-draft-link:hover {
  color: rgb(80, 20, 20) !important;
}