/* ============================================
   100ARCHITECTS MANAGEMENT DASHBOARD
   Brand Colors & Design System
   ============================================ */

/* PERFORMANCE: Font fallback to prevent invisible icons during font loading
   Shows a small circle placeholder while FontAwesome loads */
.nav-item i.fas::before,
.nav-item i.far::before,
.nav-item i.fab::before {
  /* Ensure icon elements have visible dimensions even before font loads */
  display: inline-block;
  min-width: 1em;
  min-height: 1em;
}

/* Loading state indicator for FontAwesome icons */
.fa-loading-placeholder::before {
  content: '\25CF'; /* Unicode circle as fallback */
  opacity: 0.3;
}

:root {
  /* Primary Brand Colors - Bold & Saturated */
  --color-red: #FF3B3B;
  --color-orange: #FF7B2C;
  --color-yellow: #FFDD00;
  --color-blue: #0066FF;
  --color-pink: #FF3399;
  --color-green: #7DFF5C;
  --color-purple: #6B33FF;
  --color-turquoise: #00D1D1;
  
  /* Neutral Palette */
  --color-white: #FFFFFF;
  --color-light-gray: #F5F5F7;
  --color-mid-gray: #E0E0E0;
  --color-dark-gray: #8C8C8C;
  --color-charcoal: #2D2D2D;
  --color-black: #000000;
  
  /* Semantic Colors */
  --color-success: var(--color-green);
  --color-warning: var(--color-orange);
  --color-error: var(--color-red);
  --color-info: var(--color-blue);
  
  /* Light Theme (Default) */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-light-gray);
  --bg-tertiary: #FAFAFA;
  --text-primary: var(--color-charcoal);
  --text-secondary: var(--color-dark-gray);
  --border-color: var(--color-mid-gray);
  --shadow-color: rgba(0, 0, 0, 0.08);
  --sidebar-bg: #000000;
  --sidebar-text: var(--color-white);
  
  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 50%;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Layout */
  --sidebar-width-expanded: 200px;
  --sidebar-width-collapsed: 60px;
  --sidebar-width: var(--sidebar-width-collapsed);
  --header-height: 60px;
}

/* Dark/Night Theme */
[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1E1E1E;
  --bg-tertiary: #252525;
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A0;
  --border-color: #333333;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --sidebar-bg: #0A0A0A;
}

/* ============================================
   BASE STYLES
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

.app-container {
  display: flex;
  min-height: 100vh;
}

/* ============================================
   LOGIN OVERLAY - Animated reveal to sidebar
   Stage 1: Full screen black background with login popup
   Stage 2: Slides left to reveal dashboard, becomes expanded sidebar
   Stage 3: (existing) Sidebar collapses after 1 second
   ============================================ */

/* Full screen overlay using sidebar's black color */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--sidebar-bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Animation: slide from full width to sidebar width */
  transition: width 800ms ease-in-out;
  will-change: width;
}

/* When authenticated - slide to become sidebar width */
.login-overlay.authenticated {
  width: var(--sidebar-width-expanded);
  /* Keep centered - popup uses fixed positioning to stay in place */
  overflow: hidden;
}

/* After animation complete - hide completely */
.login-overlay.hidden {
  display: none !important;
}

/* Login popup container - uses fixed positioning to stay centered during animation */
.login-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  padding: 3rem;
  width: calc(100% - 2rem);
  max-width: 420px;
  opacity: 1;
  transition: opacity 250ms ease-out, transform 250ms ease-out;
  z-index: 10001;
}

/* Fade out popup on successful login - stays centered while fading */
.login-overlay.authenticated .login-popup {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  pointer-events: none;
}

/* Logo section */
.login-logo-section {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo-section .login-logo-big {
  max-width: 200px;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.login-logo-section h1 {
  color: #000000;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  white-space: nowrap;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Form groups */
.login-form-group {
  margin-bottom: 1.5rem;
}

.login-form-group label {
  display: block;
  color: #374151;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.login-input-wrapper {
  position: relative;
}

.login-input-wrapper i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
}

.login-form-group input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s;
}

.login-form-group input:focus {
  outline: none;
  border-color: #199ACC;
  box-shadow: 0 0 0 3px rgba(25, 154, 204, 0.1);
}

/* Error message */
.login-error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  display: none;
}

.login-error-message.show {
  display: block;
}

/* Submit button */
.login-submit-btn {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #199ACC 0%, #0f7db8 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.login-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(25, 154, 204, 0.3);
}

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

.login-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Loading spinner */
.login-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: loginSpin 0.8s linear infinite;
}

.login-submit-btn.loading .login-spinner {
  display: block;
}

.login-submit-btn.loading .btn-text {
  display: none;
}

@keyframes loginSpin {
  to { transform: rotate(360deg); }
}

/* Footer */
.login-footer {
  text-align: center;
  margin-top: 2rem;
  color: #9ca3af;
  font-size: 0.8rem;
}

/* Disable interaction during animation */
body.login-animating {
  pointer-events: none;
}

body.login-animating .login-overlay {
  pointer-events: auto;
}

/* Dark theme adjustments for login */
[data-theme="dark"] .login-popup {
  background: rgba(30, 30, 30, 0.95);
}

[data-theme="dark"] .login-logo-section h1 {
  color: #ffffff;
}

[data-theme="dark"] .login-logo-section .login-logo-big {
  filter: invert(1);
}

[data-theme="dark"] .login-form-group label {
  color: #e0e0e0;
}

[data-theme="dark"] .login-form-group input {
  background: #252525;
  border-color: #333333;
  color: #ffffff;
}

[data-theme="dark"] .login-form-group input::placeholder {
  color: #666666;
}

[data-theme="dark"] .login-footer {
  color: #666666;
}

/* ============================================
   SIDEBAR NAVIGATION - COLLAPSIBLE
   Collapsed by default, expands on hover
   ============================================ */

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-width-collapsed);
  height: 100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Expanded state on hover */
.sidebar:hover {
  width: var(--sidebar-width-expanded);
}

/* ============================================
   ENTRANCE ANIMATION - Sidebar starts expanded, then collapses
   Mirrors ALL .sidebar:hover styles for .sidebar.entrance-expanded
   ============================================ */

/* Sidebar expanded width */
.sidebar.entrance-expanded {
  width: var(--sidebar-width-expanded);
}

/* Main content shifts */
.sidebar.entrance-expanded ~ .main-content {
  margin-left: var(--sidebar-width-expanded);
}

/* Logo container height */
.sidebar.entrance-expanded .logo-container {
  min-height: 100px;
}

/* Logo crossfade */
.sidebar.entrance-expanded .logo-short {
  opacity: 0;
}

.sidebar.entrance-expanded .logo-full {
  opacity: 1;
}

/* Nav menu padding */
.sidebar.entrance-expanded .nav-menu {
  padding-top: 40px;
}

/* Nav items - gap between icon and text */
.sidebar.entrance-expanded .nav-item {
  gap: 12px;
}

/* Hide short labels */
.sidebar.entrance-expanded .nav-item .nav-label-short {
  opacity: 0;
  visibility: hidden;
}

/* Show full labels */
.sidebar.entrance-expanded .nav-item .nav-label-full {
  opacity: 1;
  width: auto;
  margin-left: 0;
}

/* Save button text */
.sidebar.entrance-expanded .save-button span {
  opacity: 1;
  width: auto;
}

/* Theme toggle text */
.sidebar.entrance-expanded .theme-toggle span {
  opacity: 1;
  width: auto;
}

/* Back to today button text (if visible) */
.sidebar.entrance-expanded .back-to-today-btn span {
  opacity: 1;
  width: auto;
}

/* Ensure smooth transitions for all child elements */
.sidebar * {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Custom scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Rainbow accent line removed - clean sidebar */

.logo-container {
  padding: var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Smooth height transition for logo switch */
  transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded logo container - taller (increased by 15% for smoother flow) */
.sidebar:hover .logo-container {
  min-height: 100px;
}

/* Short logo "100" - shown when collapsed */
.logo-short {
  width: 36px;
  height: auto;
  object-fit: contain;
  position: absolute;
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Full logo "100architects" - hidden when collapsed */
.logo-full {
  width: 160px;
  height: auto;
  object-fit: contain;
  position: absolute;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* When sidebar expands: crossfade logos */
.sidebar:hover .logo-short {
  opacity: 0;
}

.sidebar:hover .logo-full {
  opacity: 1;
}

/* Keep legacy text logo styles for backward compatibility */
.logo {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.logo-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-red);
  line-height: 1;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: -0.5px;
}

/* Remove old tagline - no longer needed */
.logo-tagline {
  display: none;
  font-size: 0.55rem;
  color: var(--color-dark-gray);
  margin-top: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  max-width: 0;
  transition: opacity 0.3s ease, max-width 0.3s ease;
}

/* Show tagline on hover */
.sidebar:hover .logo-tagline {
  opacity: 1;
  max-width: 200px;
}

.nav-menu {
  list-style: none;
  padding: var(--spacing-md) 0;
  flex-shrink: 0;
  /* Smooth transition when sidebar expands */
  transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When sidebar is unveiled/expanded, push tabs down */
.sidebar:hover .nav-menu {
  padding-top: 40px;
}

.nav-item {
  display: flex;
  flex-direction: row; /* Always row layout */
  align-items: center;
  /* FIXED padding - icon always at same position from left */
  padding: 14px 0 14px 18px; /* 18px from left edge = icon center at ~30px */
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  min-height: 52px;
  gap: 0; /* No gap in collapsed */
}

/* Icon container - FIXED width and position */
.nav-item i {
  font-size: 1.1rem;
  width: 24px;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Short label - positioned below icon in collapsed state */
.nav-item .nav-label-short {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  font-size: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  text-align: center;
  white-space: nowrap;
}

/* Full label - hidden in collapsed state */
.nav-item .nav-label-full {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  width: 0;
  margin-left: 0;
  transition: opacity 0.2s ease, margin-left 0.2s ease;
}

/* EXPANDED STATE - icon stays in same position, text appears */
.sidebar:hover .nav-item {
  gap: 12px; /* Space between icon and text */
}

.sidebar:hover .nav-item .nav-label-short {
  opacity: 0;
  visibility: hidden;
}

.sidebar:hover .nav-item .nav-label-full {
  opacity: 1;
  width: auto;
  margin-left: 0;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
}

.nav-item.active {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #199ACC;
  border-radius: 0 2px 2px 0;
}

.nav-item.active i {
  color: #199ACC;
}

/* Restricted tab styling - dimmed to indicate no access */
.nav-item.restricted {
  opacity: 0.4;
  pointer-events: none; /* Disable clicking */
  cursor: not-allowed;
}

.nav-item.restricted:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

/* Show lock icon on restricted tabs when sidebar is expanded */
.sidebar:hover .nav-item.restricted .nav-label-full::after,
.sidebar.entrance-expanded .nav-item.restricted .nav-label-full::after {
  content: ' 🔒';
  font-size: 10px;
  opacity: 0.7;
}

/* Disabled tab styling - visible but clearly disabled */
.nav-item.perm-disabled-tab {
  opacity: 0.65;
  pointer-events: auto; /* Keep clickable to show toast */
  cursor: not-allowed;
}

.nav-item.perm-disabled-tab:hover {
  background: transparent !important;
  cursor: not-allowed;
}

.nav-item.perm-disabled-tab::before {
  display: none !important; /* No active indicator */
}

.nav-item.perm-disabled-tab i {
  color: #9ca3af !important; /* Light grey icon */
}

.nav-item.perm-disabled-tab span {
  color: #9ca3af !important; /* Light grey text */
}

/* ============================================
   READ-ONLY MODE STYLES
   Applied to sections where user has view-only access
   ============================================ */

/* Read-only section - no fixed badge, uses inline badge instead */
.read-only-mode {
  position: relative;
}

/* View Only badge - inline next to section title */
.view-only-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(107, 51, 255, 0.9);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 12px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(107, 51, 255, 0.3);
}

/* Read-only helper text */
.readonly-helper {
  color: var(--text-muted, #888);
  font-size: 0.85em;
}

.readonly-helper em {
  font-style: italic;
}

/* Disabled controls in read-only mode */
.perm-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.perm-disabled:hover {
  cursor: not-allowed !important;
}

/* Disabled drag-drop in read-only mode */
.perm-no-drag {
  cursor: default !important;
}

.perm-no-drop {
  pointer-events: none;
  opacity: 0.7;
}

.perm-no-drop::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  cursor: not-allowed;
}

/* Style adjustments for read-only tables */
.read-only-mode .editable-cell,
.read-only-mode input[type="text"],
.read-only-mode input[type="number"],
.read-only-mode input[type="date"],
.read-only-mode textarea,
.read-only-mode select:not(.filter-select):not([id*="Filter"]):not([id*="Year"]) {
  background: var(--bg-tertiary) !important;
  cursor: default !important;
}

/* Hide action buttons in read-only mode */
.read-only-mode .delete-btn,
.read-only-mode .remove-btn,
.read-only-mode .save-btn:not(.perm-exempt),
.read-only-mode .add-btn:not(.perm-exempt),
.read-only-mode .edit-btn:not(.perm-exempt) {
  display: none !important;
}

/* Keep filter/navigation controls visible and functional */
.read-only-mode .filter-select,
.read-only-mode .month-nav-btn,
.read-only-mode .nav-btn,
.read-only-mode .collapse-btn,
.read-only-mode .expand-btn,
.read-only-mode [id*="Filter"],
.read-only-mode [id*="Search"],
.read-only-mode .search-input {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--spacing-sm) 0 var(--spacing-sm) 18px; /* Same left padding as nav items */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--sidebar-bg);
}

/* Footer padding doesn't change on hover - icons stay aligned */

/* Save Button - Icon aligned with nav items */
.save-button {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align left */
  gap: 12px;
  width: calc(100% - 10px); /* Account for right margin */
  padding: var(--spacing-sm) 0; /* No horizontal padding, use parent's */
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: var(--spacing-sm);
}

.save-button i {
  width: 24px;
  min-width: 24px;
  text-align: center;
}

.save-button span {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.sidebar:hover .save-button span {
  opacity: 1;
  width: auto;
}

.save-button.saved {
  background: rgba(125, 255, 92, 0.15);
  color: var(--color-green);
  cursor: default;
}

.save-button.saved i {
  color: var(--color-green);
}

.save-button.unsaved {
  background: linear-gradient(135deg, var(--color-red), var(--color-orange));
  color: var(--color-white);
  animation: pulse-save 2s infinite;
}

.save-button.unsaved:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(255, 59, 59, 0.4);
}

.save-button.saving {
  background: rgba(255, 221, 0, 0.2);
  color: var(--color-yellow);
  cursor: wait;
}

.save-button.saving i {
  animation: spin 1s linear infinite;
}

@keyframes pulse-save {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align left */
  gap: 12px;
  padding: var(--spacing-sm) 0; /* No horizontal padding */
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  margin-bottom: var(--spacing-sm);
}

.theme-toggle i {
  width: 24px;
  min-width: 24px;
  text-align: center;
  color: var(--color-yellow);
}

.theme-toggle span {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.sidebar:hover .theme-toggle span {
  opacity: 1;
  width: auto;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Logout button */
.logout-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: var(--spacing-sm) 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  margin-top: var(--spacing-sm);
}

.logout-btn i {
  width: 24px;
  min-width: 24px;
  text-align: center;
  color: #ef4444;
}

.logout-btn span {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.sidebar:hover .logout-btn span {
  opacity: 1;
  width: auto;
}

.sidebar.entrance-expanded .logout-btn span {
  opacity: 1;
  width: auto;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-red), var(--color-orange));
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar i {
  color: var(--color-white);
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-white);
}

.user-role {
  font-size: 0.75rem;
  color: var(--color-dark-gray);
}

/* ============================================
   MOBILE HEADER
   ============================================ */

.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--sidebar-bg);
  z-index: 999;
  padding: 0 var(--spacing-md);
  align-items: center;
  gap: var(--spacing-md);
}

.mobile-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    var(--color-red), var(--color-orange), var(--color-yellow), 
    var(--color-green), var(--color-blue), var(--color-purple)
  );
}

.menu-toggle {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--spacing-sm);
}

.mobile-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

/* Official Logo Image - Mobile */
.logo-image-mobile {
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* Legacy text logo styles for backward compatibility */
.mobile-logo .logo-number {
  font-size: 1.8rem;
}

.mobile-logo .logo-text {
  font-size: 1rem;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  backdrop-filter: blur(4px);
}

/* ============================================
   MAIN CONTENT AREA - SQUEEZE EFFECT
   When sidebar expands, content compresses smoothly
   ============================================ */

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width-collapsed);
  width: calc(100% - var(--sidebar-width-collapsed));
  padding: var(--spacing-xl);
  min-height: 100vh;
  background: var(--bg-secondary);
  /* Smooth squeeze transition - same timing as sidebar */
  transition: 
    margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SQUEEZE EFFECT: When sidebar hovers, content compresses */
.sidebar:hover ~ .main-content {
  margin-left: var(--sidebar-width-expanded);
  width: calc(100% - var(--sidebar-width-expanded));
}

.content-section {
  display: none;
  animation: fadeIn 0.3s ease;
}

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

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

.section-header {
  margin-bottom: var(--spacing-xl);
}

.section-header h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.section-header h1 i {
  margin-right: var(--spacing-sm);
  color: #199ACC;
}

.section-header .highlight {
  color: #199ACC;
}

/* Home personalized greeting - ensure single line with ellipsis on overflow */
.section-header h1.home-greeting {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Username in greeting - brand blue to match "100architects" */
.section-header h1.home-greeting .greet-name {
  color: #199ACC;
  font-weight: 600;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
}

/* ============================================
   HOME SECTION - STATS CARDS
   ============================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

/* Clickable stat cards */
.stat-card.clickable {
  cursor: pointer;
}

.stat-card.clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--shadow-color);
}

.stat-card.clickable:active {
  transform: translateY(-2px);
}

.stat-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow-color);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--shadow-color);
}

.stat-card .stat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--accent, var(--color-red));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card .stat-icon i {
  font-size: 1.5rem;
  color: var(--color-white);
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.stat-decoration {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: var(--accent, var(--color-red));
  opacity: 0.1;
}

/* ============================================
   QUICK ACTIONS
   ============================================ */

.quick-actions {
  margin-bottom: var(--spacing-2xl);
}

.quick-actions h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
}

.quick-actions h2 i {
  color: var(--color-yellow);
  margin-right: var(--spacing-sm);
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-md);
}

.action-btn {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.action-btn i {
  font-size: 1.5rem;
  color: var(--color-red);
}

.action-btn span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.action-btn:hover {
  border-color: var(--color-red);
  background: rgba(255, 59, 59, 0.05);
  transform: translateY(-2px);
}

/* ============================================
   RECENT PROJECTS
   ============================================ */

.recent-section h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
}

.recent-section h2 i {
  color: var(--color-blue);
  margin-right: var(--spacing-sm);
}

.recent-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.project-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px var(--shadow-color);
  transition: all var(--transition-fast);
  border-left: 4px solid var(--color-red);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--shadow-color);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.project-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.project-status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

.project-status.built {
  background: rgba(125, 255, 92, 0.2);
  color: #4CAF50;
}

.project-status.unbuilt {
  background: rgba(0, 102, 255, 0.2);
  color: var(--color-blue);
}

.project-status.under-construction {
  background: rgba(255, 123, 44, 0.2);
  color: var(--color-orange);
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.project-meta span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.project-meta span i {
  width: 20px;
  margin-right: var(--spacing-sm);
  color: var(--color-dark-gray);
}

/* ============================================
   TOOLS SECTION
   ============================================ */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.tool-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: 0 4px 20px var(--shadow-color);
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tool-color, var(--color-red));
}

.tool-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px var(--shadow-color);
}

.tool-card:hover .tool-icon {
  transform: scale(1.1);
}

.tool-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: var(--tool-color, var(--color-red));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  transition: transform var(--transition-fast);
}

.tool-icon i {
  font-size: 1.8rem;
  color: var(--color-white);
}

.tool-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.tool-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.tools-coming-soon {
  margin-top: var(--spacing-xl);
}

.coming-soon-card {
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.1), rgba(107, 51, 255, 0.1));
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  text-align: center;
}

.coming-soon-card i {
  font-size: 3rem;
  color: var(--color-purple);
  margin-bottom: var(--spacing-md);
}

.coming-soon-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.coming-soon-card p {
  color: var(--text-secondary);
}

/* Coming Soon Placeholder - Full Section */
.coming-soon-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.05), rgba(107, 51, 255, 0.08));
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-xl);
  text-align: center;
}

.coming-soon-placeholder i {
  font-size: 4rem;
  color: var(--color-purple);
  margin-bottom: var(--spacing-lg);
  opacity: 0.6;
}

.coming-soon-placeholder p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ============================================
   PROYECTOS SECTION
   ============================================ */

.filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.filter-group {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.filter-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.filter-btn:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

.filter-btn.active {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.search-box {
  position: relative;
}

.search-box i {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.search-box input {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-2xl);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  width: 250px;
  transition: border-color var(--transition-fast);
  font-family: var(--font-body);
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-blue);
}

.projects-table-container {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow-color);
}

.projects-table {
  width: 100%;
  border-collapse: collapse;
}

.projects-table th,
.projects-table td {
  padding: var(--spacing-md);
  text-align: left;
}

.projects-table th {
  background: var(--bg-tertiary);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
}

.projects-table td {
  font-size: 0.9rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.projects-table tr:last-child td {
  border-bottom: none;
}

.projects-table tr:hover td {
  background: var(--bg-tertiary);
}

.projects-table .project-name {
  font-weight: 600;
  color: var(--text-primary);
}

.projects-table .project-location {
  color: var(--text-secondary);
}

.projects-table .project-category {
  font-size: 0.8rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  display: inline-block;
}

.projects-table .action-icons {
  display: flex;
  gap: var(--spacing-sm);
}

.projects-table .action-icons button {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.projects-table .action-icons button:hover {
  color: var(--color-red);
}

/* ============================================
   MAPAS SECTION
   ============================================ */

.map-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
}

.world-map {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px var(--shadow-color);
  position: relative;
}

.map-svg {
  width: 100%;
  height: auto;
  min-height: 400px;
}

.map-svg .continents {
  fill: var(--bg-tertiary);
  stroke: var(--border-color);
  stroke-width: 1;
}

[data-theme="dark"] .map-svg .continents {
  fill: var(--bg-tertiary);
  stroke: var(--border-color);
}

.map-marker {
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.map-marker:hover {
  transform: scale(1.3);
}

.map-marker.built circle {
  fill: var(--color-green);
}

.map-marker.unbuilt circle {
  fill: var(--color-blue);
}

.map-marker.under-construction circle {
  fill: var(--color-orange);
}

.map-marker circle {
  stroke: var(--color-white);
  stroke-width: 2;
}

.map-marker .pulse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.6;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { r: 8; opacity: 0.6; }
  100% { r: 20; opacity: 0; }
}

.map-legend {
  display: flex;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
}

.legend-dot.built {
  background: var(--color-green);
}

.legend-dot.unbuilt {
  background: var(--color-blue);
}

.legend-dot.under-construction {
  background: var(--color-orange);
}

.region-projects {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px var(--shadow-color);
}

.region-projects h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.region-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.region-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.region-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.region-header:hover {
  background: var(--bg-secondary);
}

.region-header span {
  font-weight: 500;
  color: var(--text-primary);
}

.region-header .count {
  background: var(--color-red);
  color: var(--color-white);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.region-content {
  padding: var(--spacing-md);
  display: none;
}

.region-item.open .region-content {
  display: block;
}

.region-project {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.region-project::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-red);
  flex-shrink: 0;
}

/* ============================================
   PROJECTS MATRIX (EDITABLE)
   ============================================ */

.project-stats-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.project-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--spacing-lg);
  border-right: 1px solid var(--border-color);
}

.project-stat:last-of-type {
  border-right: none;
}

.project-stat .stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-red);
  font-family: var(--font-display);
}

.project-stat .stat-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-add-project {
  margin-left: auto;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: #199ACC;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: all var(--transition-fast);
}

.btn-add-project:hover {
  background: #1589b5;
  transform: translateY(-1px);
}

/* Phase Filter Pills */
.phase-filters {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.phase-pill {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.phase-pill:hover {
  border-color: var(--color-red);
}

.phase-pill.active {
  background: var(--color-charcoal);
  color: white;
  border-color: var(--color-charcoal);
}

/* Phase Colors - Updated Funnel: PRE → CD → SD → DD → WD → Construction → Completed */
.phase-pill.pre { --pill-color: #FF3399; }      /* Pre-Concept - Pink */
.phase-pill.cd { --pill-color: #FF3B3B; }       /* Concept Design - Red */
.phase-pill.sd { --pill-color: #FF7B2C; }       /* Schematic Design - Orange */
.phase-pill.dd { --pill-color: #FFDD00; }       /* Design Development - Yellow */
.phase-pill.wd { --pill-color: #0066FF; }       /* Working Documents - Blue */
.phase-pill.construction { --pill-color: #6B33FF; } /* Under Construction - Purple */
.phase-pill.completed { --pill-color: #7DFF5C; } /* Completed - Green */
.phase-pill.terminated { --pill-color: #8C8C8C; } /* Terminated - Gray */

.phase-pill.pre.active { background: #FF3399; border-color: #FF3399; }
.phase-pill.cd.active { background: #FF3B3B; border-color: #FF3B3B; }
.phase-pill.sd.active { background: #FF7B2C; border-color: #FF7B2C; }
.phase-pill.dd.active { background: #FFDD00; border-color: #FFDD00; color: #333; }
.phase-pill.wd.active { background: #0066FF; border-color: #0066FF; }
.phase-pill.construction.active { background: #6B33FF; border-color: #6B33FF; }
.phase-pill.completed.active { background: #7DFF5C; border-color: #7DFF5C; color: #333; }
.phase-pill.terminated.active { background: #8C8C8C; border-color: #8C8C8C; }

/* Status Filter Pills */
.phase-pill.status-active-pill { --pill-color: #7DFF5C; }
.phase-pill.status-standby-pill { --pill-color: #FF3B3B; }
.phase-pill.status-ontrack-pill { --pill-color: #6B33FF; }
.phase-pill.status-awaiting-pill { --pill-color: #FF7B2C; }
.phase-pill.status-completed-pill { --pill-color: #D4AF37; }
.phase-pill.status-terminated-pill { --pill-color: #505050; }
.phase-pill.status-active-pill.active { background: #22a355; border-color: #22a355; }
.phase-pill.status-standby-pill.active { background: #FF3B3B; border-color: #FF3B3B; }
.phase-pill.status-ontrack-pill.active { background: #6B33FF; border-color: #6B33FF; }
.phase-pill.status-awaiting-pill.active { background: #FF7B2C; border-color: #FF7B2C; }
.phase-pill.status-completed-pill.active { background: #D4AF37; border-color: #D4AF37; }
.phase-pill.status-terminated-pill.active { background: #505050; border-color: #505050; }

/* Filter Group Labels */
.filter-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: center;
  margin-right: var(--spacing-xs);
}

.filter-divider {
  color: var(--border-color);
  align-self: center;
  margin: 0 var(--spacing-sm);
}

/* Active/Standby Stats */
.project-stat.active-stat .stat-number { color: #22a355; }
.project-stat.standby-stat .stat-number { color: #FF7B2C; }

/* Phase Pipeline Visual */
.phase-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  min-width: 80px;
  transition: all var(--transition-fast);
}

.pipeline-stage .stage-count {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-display);
}

.pipeline-stage .stage-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.pipeline-stage.pre { background: rgba(255, 51, 153, 0.1); }
.pipeline-stage.pre .stage-count { color: #FF3399; }

.pipeline-stage.cd { background: rgba(255, 59, 59, 0.1); }
.pipeline-stage.cd .stage-count { color: #FF3B3B; }

.pipeline-stage.sd { background: rgba(255, 123, 44, 0.1); }
.pipeline-stage.sd .stage-count { color: #FF7B2C; }

.pipeline-stage.dd { background: rgba(255, 221, 0, 0.1); }
.pipeline-stage.dd .stage-count { color: #d4b800; }

.pipeline-stage.wd { background: rgba(0, 102, 255, 0.1); }
.pipeline-stage.wd .stage-count { color: #0066FF; }

.pipeline-stage.construction { background: rgba(107, 51, 255, 0.1); }
.pipeline-stage.construction .stage-count { color: #6B33FF; }

.pipeline-stage.completed { background: rgba(125, 255, 92, 0.1); }
.pipeline-stage.completed .stage-count { color: #22a355; }

.pipeline-arrow {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* Status Column Styling */
.col-status { width: 8%; }

.status-select {
  font-weight: 600;
  width: 100%;
  max-width: 100%;
  padding: 4px 6px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
}

.status-select.status-active {
  background: rgba(34, 163, 85, 0.15);
  border-color: #22a355;
  color: #22a355;
}

.status-select.status-standby {
  background: rgba(255, 59, 59, 0.15);
  border-color: #FF3B3B;
  color: #FF3B3B;
}

.status-select.status-ontrack {
  background: rgba(107, 51, 255, 0.15);
  border-color: #6B33FF;
  color: #6B33FF;
}

.status-select.status-awaiting {
  background: rgba(255, 123, 44, 0.15);
  border-color: #FF7B2C;
  color: #FF7B2C;
}

.status-select.status-completed {
  background: rgba(212, 175, 55, 0.15);
  border-color: #D4AF37;
  color: #D4AF37;
}

.status-select.status-terminated {
  background: rgba(80, 80, 80, 0.15);
  border-color: #505050;
  color: #505050;
}

/* Row styling based on status */
.projects-matrix tbody tr.status-standby {
  opacity: 0.7;
  background: rgba(255, 59, 59, 0.05);
}

.projects-matrix tbody tr.status-standby:hover,
.projects-matrix tbody tr.status-standby.dropdown-open {
  opacity: 1;
}

.projects-matrix tbody tr.status-ontrack {
  background: rgba(107, 51, 255, 0.03);
}

.projects-matrix tbody tr.status-awaiting {
  background: rgba(255, 123, 44, 0.05);
}

.projects-matrix tbody tr.status-completed {
  background: rgba(212, 175, 55, 0.05);
}

.projects-matrix tbody tr.status-terminated {
  opacity: 0.6;
  background: rgba(80, 80, 80, 0.08);
}

.projects-matrix tbody tr.status-terminated:hover,
.projects-matrix tbody tr.status-terminated.dropdown-open {
  opacity: 1;
}

/* Phase Select Styling - Updated Colors */
.phase-select {
  font-weight: 600;
  min-width: 100px;
}

.phase-select.phase-pre { color: #FF3399; }
.phase-select.phase-cd { color: #FF3B3B; }
.phase-select.phase-sd { color: #FF7B2C; }
.phase-select.phase-dd { color: #d4b800; }
.phase-select.phase-wd { color: #0066FF; }
.phase-select.phase-construction { color: #6B33FF; }
.phase-select.phase-completed { color: #22a355; }
.phase-select.phase-terminated { color: #8C8C8C; }

/* Office Select Styling */
.office-select {
  font-weight: 600;
  width: 100%;
  max-width: 100%;
  padding: 4px 6px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
}

.office-select.office-not-signed {
  background: rgba(255, 59, 59, 0.1);
  border-color: rgba(255, 59, 59, 0.3);
  color: #FF3B3B;
  font-style: italic;
}

.office-select.office-shanghai {
  background: rgba(0, 102, 255, 0.1);
  border-color: rgba(0, 102, 255, 0.3);
  color: #0066FF;
}

.office-select.office-dubai {
  background: rgba(255, 123, 44, 0.1);
  border-color: rgba(255, 123, 44, 0.3);
  color: #FF7B2C;
}

.office-select.office-riyadh {
  background: rgba(107, 51, 255, 0.1);
  border-color: rgba(107, 51, 255, 0.3);
  color: #6B33FF;
}

/* Projects Matrix Table */
.projects-matrix-container {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  overflow-x: auto;
  overflow-y: visible;
  box-shadow: 0 2px 8px var(--shadow-color);
  max-width: 100%;
}

.projects-matrix {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.projects-matrix thead {
  background: var(--color-charcoal);
  color: white;
}

.projects-matrix th {
  padding: 10px 6px;
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.projects-matrix tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

.projects-matrix tbody tr:hover {
  background: var(--bg-tertiary);
}

.projects-matrix td {
  padding: 10px 4px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Matrix Inputs */
.matrix-input,
.matrix-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.85rem;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.matrix-input:hover,
.matrix-select:hover {
  background: var(--bg-secondary);
}

.matrix-input:focus,
.matrix-select:focus {
  outline: none;
  border-color: var(--color-red);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.1);
}

.matrix-input::placeholder {
  color: var(--text-secondary);
  font-style: italic;
}

.name-input {
  font-weight: 600;
  color: var(--text-primary);
}

.date-input {
  min-width: 100px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #000;
}

/* Phase Select Option Colors */
.phase-select option[value="PRE"] { color: #FF3399; }
.phase-select option[value="CD"] { color: #FF3B3B; }
.phase-select option[value="SD"] { color: #FF7B2C; }
.phase-select option[value="DD"] { color: #d4b800; }
.phase-select option[value="WD"] { color: #0066FF; }
.phase-select option[value="Construction"] { color: #6B33FF; }
.phase-select option[value="Completed"] { color: #22a355; }
.phase-select option[value="Terminated"] { color: #8C8C8C; }

/* Currency Select - Separate column */
.currency-select {
  width: 100%;
  padding: 4px 4px;
  font-size: 0.85rem;
  text-align: center;
  font-weight: 600;
}

/* Value Input - Separate column */
.value-input {
  width: 100%;
  text-align: right;
  font-size: 0.85rem;
}

/* Action Buttons */
.delete-btn {
  color: var(--color-red);
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.projects-matrix tbody tr:hover .delete-btn {
  opacity: 1;
}

/* Projects Total */
.projects-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-lg);
}

.projects-total span:first-child {
  font-weight: 500;
  color: var(--text-secondary);
}

.projects-total .total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-red);
  font-family: var(--font-display);
}

/* Column widths - ALIGNED GRID */
.projects-matrix { table-layout: fixed; width: 100%; }
.projects-matrix th, .projects-matrix td { 
  padding: 6px 4px; 
  vertical-align: middle;
  box-sizing: border-box;
}

.col-drag { width: 18px; padding: 0 !important; }
.col-status { width: 85px; text-align: center; vertical-align: middle; }
.col-name { width: 18%; vertical-align: middle; }
.col-alias { width: 6%; vertical-align: middle; }
.col-phase-bar { width: 11%; vertical-align: middle; }
.col-location { width: 5%; vertical-align: middle; }
.col-category { width: 7%; vertical-align: middle; }
.col-typology { width: 6%; vertical-align: middle; }
.col-office { width: 5%; text-align: center; vertical-align: middle; }
.col-m2 { width: 5%; text-align: center; vertical-align: middle; }

/* Ensure M2 header and content have identical box model */
.projects-matrix th.col-m2,
.projects-matrix td.col-m2 {
  padding: 6px 4px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
}
.col-signed-date { width: 7%; text-align: center; vertical-align: middle; }
.col-delivery { width: 8%; text-align: center; vertical-align: middle; }
.col-value-multi { 
  width: 11%; 
  text-align: center;
  vertical-align: middle;
}

/* Ensure VALUE header and content have identical box model */
.projects-matrix th.col-value-multi {
  padding: 6px 4px;
  text-align: center;
}

.projects-matrix td.col-value-multi {
  padding: 6px 4px;
  text-align: left;
}

/* Clickable row for expand - darker grey background for better contrast */
.project-row.clickable-row {
  cursor: pointer;
  transition: background-color 0.15s;
  background-color: rgba(0, 0, 0, 0.03);
}

.project-row.clickable-row:nth-child(4n+1) {
  background-color: rgba(0, 0, 0, 0.06);
}

.project-row.clickable-row:hover {
  background-color: rgba(255, 123, 44, 0.12);
}

.project-row.expanded {
  background-color: rgba(255, 123, 44, 0.15);
}

/* Projects Tab Read-Only Mode */
/* When user has view-only permission, disable all interactive elements */
.projects-readonly .project-row.clickable-row {
  cursor: default;
}

.projects-readonly .project-row.clickable-row:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.projects-readonly .project-row.clickable-row:nth-child(4n+1):hover {
  background-color: rgba(0, 0, 0, 0.06);
}

/* Hide editor/timeline rows in read-only mode */
.projects-readonly .project-timeline-row {
  display: none !important;
}

/* Disable all controls in projects read-only mode */
.projects-readonly .status-dropdown,
.projects-readonly .phase-dropdown-wrapper,
.projects-readonly .phase-dropdown-trigger,
.projects-readonly .phase-bar-segment,
.projects-readonly input,
.projects-readonly select,
.projects-readonly textarea,
.projects-readonly .ef-tracking-toggle,
.projects-readonly .drag-handle {
  pointer-events: none !important;
  cursor: default !important;
}

.projects-readonly .status-dropdown,
.projects-readonly .phase-dropdown-wrapper {
  opacity: 0.8;
}

/* Hide Add Project and action buttons */
.projects-readonly #addProjectBtn,
.projects-readonly .project-actions-btn,
.projects-readonly .delete-project-btn {
  display: none;
}

/* ============================================
   Project Cost Tab Read-Only Mode
   ============================================ */
/* When user has view-only permission, disable expand/collapse and editing */
.projectcost-readonly .cost-project-header,
.projectcost-readonly .cost-phase-header,
.projectcost-readonly .cost-week-header,
.projectcost-readonly .cost-day-header {
  cursor: default !important;
  pointer-events: none !important;
}

/* Remove expand/collapse arrows visual affordance */
.projectcost-readonly .cost-project-header::before,
.projectcost-readonly .cost-phase-header::before,
.projectcost-readonly .cost-week-header::before,
.projectcost-readonly .cost-day-header::before {
  opacity: 0.4;
}

/* Disable any interactive controls in Project Cost */
.projectcost-readonly input,
.projectcost-readonly select,
.projectcost-readonly textarea,
.projectcost-readonly button:not(.filter-select):not([id*="Filter"]) {
  pointer-events: none !important;
  cursor: default !important;
}

/* Hide edit-related buttons */
.projectcost-readonly .add-member-btn,
.projectcost-readonly .edit-hours-btn,
.projectcost-readonly .delete-record-btn {
  display: none !important;
}

/* Keep expanded elements collapsed in read-only mode */
.projectcost-readonly .cost-project-content,
.projectcost-readonly .cost-phase-content,
.projectcost-readonly .cost-week-content,
.projectcost-readonly .cost-day-content {
  display: none !important;
}

/* ============================================
   Resources Tab Read-Only Mode
   ============================================ */
/* When user has view-only permission, disable all drag/drop and editing */
.resources-readonly .team-pool-item,
.resources-readonly .gantt-member-v3 {
  cursor: default !important;
  pointer-events: auto; /* Keep visible but not draggable */
  user-select: none;
}

.resources-readonly .team-pool-item:hover,
.resources-readonly .gantt-member-v3:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Disable drop zones */
.resources-readonly .leader-drop-zone-v3,
.resources-readonly .support-drop-zone-v3,
.resources-readonly .drop-zone {
  pointer-events: none !important;
  cursor: default !important;
}

/* Hide drag affordance/indicators */
.resources-readonly .team-pool-item::before,
.resources-readonly .gantt-member-v3::before {
  display: none !important;
}

/* Hide remove buttons in Resources */
.resources-readonly .remove-btn-v3,
.resources-readonly .remove-assignment-btn {
  display: none !important;
}

/* Disable any interactive controls */
.resources-readonly input:not(.filter-input):not(.search-input):not([type="search"]),
.resources-readonly select:not(.filter-select) {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.7;
}

/* Visual indicator that items are not draggable */
.resources-readonly .perm-no-drag {
  opacity: 0.9;
  filter: grayscale(10%);
}

/* Status badge in main row - FULL TEXT, vertically centered */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

.status-badge.status-active { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.status-badge.status-ontrack { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.status-badge.status-awaiting { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.status-badge.status-standby { background: rgba(156, 163, 175, 0.15); color: #6b7280; }
.status-badge.status-completed { background: rgba(168, 85, 247, 0.15); color: #9333ea; }
.status-badge.status-terminated { background: rgba(239, 68, 68, 0.15); color: #dc2626; }

/* Tracking indicator - now shown only in expanded mode next to toggle */
.tracking-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: 0.6rem;
  color: #22c55e;
}

/* === COLLAPSED ROW TYPOGRAPHY (PROJECT NAME → NEXT DELIVERY) ===
 * All columns use identical: color #000, font-size 0.72rem, font-weight 500, vertical-align middle
 * VALUE column excluded - keeps smaller colored font
 */

/* Name display in main row */
.name-display {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #000;
  overflow: hidden;
}

.crm-link-icon {
  color: #22a355;
  font-size: 0.6rem;
  flex-shrink: 0;
}

.project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: #000;
}

/* Linked CRM project name - locked and non-editable */
.col-name.linked-crm {
  background: rgba(34, 163, 85, 0.05);
}

/* Display-only cells - unified black text, consistent font size/weight */
.location-display, .typology-display, .alias-display, .category-display {
  font-size: 0.72rem;
  font-weight: 500;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Category display - hard clip without ellipsis */
.category-display {
  text-overflow: clip;
}

/* Office display - same typography, subtle background only */
.office-display {
  font-size: 0.72rem;
  font-weight: 500;
  color: #000;
  padding: 2px 4px;
  border-radius: 3px;
}

.office-display.office-shanghai { background: rgba(239, 68, 68, 0.08); }
.office-display.office-dubai { background: rgba(168, 85, 247, 0.08); }
.office-display.office-riyadh { background: rgba(34, 197, 94, 0.08); }
.office-display.office-not-signed { background: rgba(156, 163, 175, 0.08); }

/* M2 display - unified typography */
.m2-display {
  font-size: 0.72rem;
  font-weight: 500;
  color: #000;
  font-family: var(--font-mono);
  text-align: center;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Date display - unified typography */
.date-display {
  font-size: 0.72rem;
  font-weight: 500;
  color: #000;
}

/* Multi-value display (RMB / AED / USD) - Exactly 3 lines, left-aligned within column */
.value-multi-display {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-mono);
  text-align: left;
  padding-left: 4px;
}

/* Each line: label + value inline, all starting at same left edge */
.value-multi-display .val-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0;
  margin: 0;
}

.value-multi-display .val-label {
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.8;
}

.value-multi-display .val-num {
  font-size: 0.6rem;
  font-weight: 600;
}

/* Currency colors */
.value-multi-display .val-rmb .val-label,
.value-multi-display .val-rmb .val-num { color: #dc2626; }

.value-multi-display .val-aed .val-label,
.value-multi-display .val-aed .val-num { color: var(--color-purple); }

.value-multi-display .val-usd .val-label,
.value-multi-display .val-usd .val-num { color: #22a355; }

/* Editable cell in main row (Phase dropdown, Next Delivery) */
.editable-cell {
  cursor: default;
}

/* Legacy column widths (for other tables) */
.col-currency { width: 4%; text-align: center; padding: 10px 4px !important; }
.col-value { width: 6%; text-align: right; padding-left: 0 !important; }
.col-actions { width: 24px; max-width: 24px; text-align: center; padding: 0 !important; }
.col-cost-tracking { width: 24px; max-width: 24px; text-align: center; padding: 10px 2px !important; }

/* ============================================ */
/* NEW PROJECT SUMMARY ROW STYLES               */
/* ============================================ */

/* Summary row columns */
.col-status-summary { width: 50px; text-align: center; }
.col-cost-tracking-summary { width: 36px; text-align: center; }
.col-name-summary { width: 25%; min-width: 180px; }
.col-phase-summary { width: 60px; text-align: center; }
.col-location-summary { width: 15%; }
.col-category-summary { width: 12%; }
.col-office-summary { width: 60px; text-align: center; }
.col-value-summary { width: 12%; text-align: right; }
.col-expand-indicator { width: 30px; text-align: center; }

/* Header row */
.projects-header-row th {
  padding: 10px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
}

/* Summary row - clickable */
.project-summary-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.project-summary-row:hover {
  background: var(--bg-tertiary);
}

.project-summary-row.expanded {
  background: var(--bg-tertiary);
  border-bottom: none;
}

.project-summary-row td {
  padding: 10px 8px;
  vertical-align: middle;
}

/* Linked to CRM indicator */
.project-summary-row.linked-to-crm {
  border-left: 3px solid #22a355;
}

/* Status badge */
.status-badge {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-badge.status-active { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.status-badge.status-ontrack { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.status-badge.status-awaiting { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.status-badge.status-completed { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.status-badge.status-terminated { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.status-badge.status-standby { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

/* Phase badge */
.phase-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}

.phase-badge.phase-pre { background: rgba(168, 85, 247, 0.15); color: #9333ea; }
.phase-badge.phase-cd { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.phase-badge.phase-sd { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.phase-badge.phase-dd { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.phase-badge.phase-wd { background: rgba(236, 72, 153, 0.15); color: #db2777; }
.phase-badge.phase-construction { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.phase-badge.phase-completed { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

/* Office badge */
.office-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
}

.office-badge.office-shanghai { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.office-badge.office-dubai { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.office-badge.office-not-signed { background: rgba(107, 114, 128, 0.1); color: #6b7280; }

/* Name display */
.name-display {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-name-text {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-link-icon {
  color: #22a355;
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* Location and category text */
.location-text, .category-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Value text */
.value-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* Expand indicator */
.expand-indicator {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.expand-indicator.rotated {
  transform: rotate(180deg);
}

/* ============================================ */
/* EXPANDED ROW STYLES                          */
/* ============================================ */

.project-expanded-row {
  background: var(--bg-secondary);
}

.project-expanded-row td {
  padding: 0;
}

.project-expanded-container {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
}

/* Expanded Grid - 4 columns */
.project-expanded-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 16px;
  margin-bottom: 20px;
}

/* Expanded field */
.expanded-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.expanded-field label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.expanded-field label i {
  color: #f59e0b;
  font-size: 0.55rem;
}

.expanded-field.readonly label {
  color: #22a355;
}

/* Input and select styles */
.expanded-input, .expanded-select {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.8rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.expanded-input:focus, .expanded-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 123, 44, 0.1);
}

.expanded-input:disabled, .expanded-select:disabled {
  background: var(--bg-tertiary);
  cursor: not-allowed;
}

/* Read-only field value */
.field-value.readonly {
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Double-width field for currency + value */
.expanded-field-double {
  grid-column: span 1;
}

.currency-value-group {
  display: flex;
  gap: 8px;
}

.currency-value-group .currency-select {
  width: 90px;
  flex-shrink: 0;
}

.currency-value-group .value-input {
  flex: 1;
  text-align: right;
  font-family: var(--font-mono);
}

/* Computed values display */
.expanded-field-computed .computed-values {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.computed-rmb {
  font-size: 0.75rem;
  font-weight: 600;
  color: #dc2626;
  font-family: var(--font-mono);
}

.computed-aed {
  font-size: 0.7rem;
  color: var(--color-purple);
  font-family: var(--font-mono);
}

/* Phases section inside expanded */
.project-phases-section {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  margin-top: 8px;
}

.project-phases-section .phases-header {
  margin-bottom: 12px;
}

.project-phases-section .phases-header h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-phases-section .phases-header h4 i {
  color: var(--accent-primary);
}

/* Expanded footer */
.expanded-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--border-color);
}

.expanded-footer-right {
  display: flex;
  gap: 10px;
}

.btn-cancel-expanded {
  padding: 10px 20px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.btn-cancel-expanded:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-save-expanded {
  padding: 10px 24px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.btn-save-expanded:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .project-expanded-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .project-expanded-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Cost Tracking Toggle */
.cost-tracking-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  cursor: pointer;
}

.cost-tracking-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cost-tracking-toggle .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-tertiary);
  transition: 0.3s;
  border-radius: 18px;
  border: 1px solid var(--border-color);
}

.cost-tracking-toggle .toggle-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-muted);
  transition: 0.3s;
  border-radius: 50%;
}

.cost-tracking-toggle input:checked + .toggle-slider {
  background-color: var(--color-green);
  border-color: var(--color-green);
}

.cost-tracking-toggle input:checked + .toggle-slider:before {
  transform: translateX(14px);
  background-color: white;
}

.cost-tracking-toggle:hover .toggle-slider {
  border-color: var(--text-secondary);
}

/* Right-align M2 inputs */
.col-m2 .matrix-input {
  text-align: right;
}

/* Drag Handle */
.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 100%;
  color: var(--text-secondary);
  cursor: grab;
  font-size: 14px;
  letter-spacing: 1px;
  user-select: none;
  opacity: 0.4;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.drag-handle:hover {
  opacity: 1;
  color: var(--text-primary);
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle.disabled {
  cursor: not-allowed;
  opacity: 0.15;
}

.drag-handle.disabled:hover {
  opacity: 0.15;
  color: var(--text-secondary);
}

/* Dragging state */
.projects-matrix tbody tr.project-row.dragging {
  background: var(--bg-tertiary) !important;
  opacity: 0.7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Drag over indicators */
.projects-matrix tbody tr.project-row.drag-over-top {
  border-top: 3px solid var(--color-blue) !important;
}

.projects-matrix tbody tr.project-row.drag-over-bottom {
  border-bottom: 3px solid var(--color-blue) !important;
}

/* Phase Bar Cell */
.projects-matrix td.col-phase-bar {
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  position: relative;
  overflow: visible;
}

/* Ensure phase elements stay within their row's stacking context */
.projects-matrix tbody tr {
  position: relative;
  z-index: 1;
}

/* When dropdown is open, raise the row's stacking context */
.projects-matrix tbody tr:has(.phase-dropdown-menu.open) {
  z-index: 100;
}

/* Phase Progress Bar Container */
.phase-progress-container {
  position: relative;
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
}

/* Background track showing all phases */
.phase-track {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

/* Filled progress bar */
.phase-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease, background 0.3s ease;
}

/* Phase label on top of bar */
.phase-bar-label {
  position: absolute;
  top: -2px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 3px;
  background: inherit;
  color: white;
  white-space: nowrap;
  transform: translateX(-50%);
  /* No z-index - stays within its table cell stacking context */
}

/* Phase colors for bar fill */
.phase-bar-fill.phase-pre { background: #FF3399; }
.phase-bar-fill.phase-cd { background: #FF3B3B; }
.phase-bar-fill.phase-sd { background: #FF7B2C; }
.phase-bar-fill.phase-dd { background: #FFDD00; }
.phase-bar-fill.phase-wd { background: #0066FF; }
.phase-bar-fill.phase-cp { background: #888888; }
.phase-bar-fill.phase-cm { background: #BBBBBB; }

/* Phase label colors */
.phase-bar-label.phase-pre { background: #FF3399; }
.phase-bar-label.phase-cd { background: #FF3B3B; }
.phase-bar-label.phase-sd { background: #FF7B2C; }
.phase-bar-label.phase-dd { background: #FFDD00; color: #333; }
.phase-bar-label.phase-wd { background: #0066FF; }
.phase-bar-label.phase-cp { background: #888888; }
.phase-bar-label.phase-cm { background: #BBBBBB; color: #333; }

/* Phase dropdown menu */
.phase-dropdown-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.phase-dropdown-trigger {
  cursor: pointer;
}

.phase-dropdown-menu {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  padding: var(--spacing-sm);
  display: none;
  min-width: 200px;
}

[data-theme="dark"] .phase-dropdown-menu {
  background: #1a1a1a;
}

.phase-dropdown-menu.open {
  display: block;
}

.phase-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.phase-dropdown-item:hover {
  background: var(--bg-tertiary);
}

.phase-dropdown-item.active {
  background: var(--bg-secondary);
  font-weight: 600;
}

.phase-dropdown-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.phase-dropdown-dot.pre { background: #FF3399; }
.phase-dropdown-dot.cd { background: #FF3B3B; }
.phase-dropdown-dot.sd { background: #FF7B2C; }
.phase-dropdown-dot.dd { background: #FFDD00; }
.phase-dropdown-dot.wd { background: #0066FF; }
.phase-dropdown-dot.cp { background: #888888; }
.phase-dropdown-dot.cm { background: #BBBBBB; }

/* ============================================
   PROJECTS TAB STATUS DROPDOWN
   (Uses same styling as Resources Matrix)
   ============================================ */

/* Projects Matrix status column */
.projects-matrix .col-status {
  padding: var(--spacing-xs);
  text-align: center;
}

/* Projects Matrix uses same .status-dropdown as Resources Matrix */
.projects-matrix .status-dropdown {
  width: 100%;
  max-width: 70px;
  padding: 4px 12px 4px 6px;
  font-size: 0.65rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  transition: all 0.15s ease;
}

/* ============================================
   TEAM SECTION
   ============================================ */

.team-stats-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.team-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--spacing-lg);
  border-right: 1px solid var(--border-color);
}

.team-stat:last-of-type {
  border-right: none;
}

.team-stat .stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-blue);
  font-family: var(--font-display);
}

.team-stat .stat-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-add-team {
  margin-left: auto;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: #199ACC;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: all var(--transition-fast);
}

.btn-add-team:hover {
  background: #1589b5;
  transform: translateY(-1px);
}

/* Studio Filter Pills */
.studio-filters {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.studio-filters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.studio-filters-row .studio-filters {
  margin-bottom: 0;
}

.studio-filters-row .btn-add-team {
  margin-left: auto;
}

.studio-pill {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.studio-pill:hover {
  border-color: var(--color-blue);
}

.studio-pill.active {
  background: var(--color-charcoal);
  color: white;
  border-color: var(--color-charcoal);
}

/* All studio filters use same black style when active - no colored backgrounds */

/* Team Matrix */
.team-matrix-container {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow-color);
}

.team-matrix {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.team-matrix thead {
  background: var(--color-charcoal);
  color: white;
}

.team-matrix th {
  padding: 6px 4px;
  text-align: left;
  font-weight: 600;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: normal;
  line-height: 1.3;
  vertical-align: middle;
}

.team-matrix tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

.team-matrix tbody tr:hover {
  background: var(--bg-tertiary);
}

.team-matrix td {
  padding: 4px 3px;
  vertical-align: middle;
  font-size: 0.75rem;
}

/* Team table inputs - more compact */
.team-matrix .team-input,
.team-matrix .team-select {
  font-size: 0.7rem !important;
  padding: 3px 4px !important;
}

/* Role select - allow text wrapping */
.team-matrix .col-role select {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.2;
}

/* Department label styling */
.team-matrix .dept-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-block;
}

.team-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-red), var(--color-orange));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.7rem;
}

/* Studio-specific avatar colors */
.team-avatar.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
}

.team-avatar.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B);
}

.team-avatar.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF);
}

/* Studio header row - replaces the main table header for each studio */
.studio-header-row {
  background: var(--color-charcoal) !important;
}

.studio-header-row th {
  padding: var(--spacing-sm) var(--spacing-md) !important;
  color: var(--color-white) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none !important;
  text-align: left;
  vertical-align: middle;
}

.studio-header-row .studio-name-header {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: visible;
  min-width: 70px;
}

/* Studio-specific header row background colors */
.studio-header-row.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
}

.studio-header-row.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B) !important;
}

.studio-header-row.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF) !important;
}

/* Studio name text - white for contrast on colored backgrounds */
.studio-header-row.studio-shanghai .studio-name-header,
.studio-header-row.studio-dubai .studio-name-header,
.studio-header-row.studio-riyadh .studio-name-header {
  color: var(--color-white);
}

/* Team Editable Inputs */
.team-input,
.team-select {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.85rem;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.team-input:hover,
.team-select:hover {
  background: var(--bg-secondary);
}

.team-input:focus,
.team-select:focus {
  outline: none;
  border-color: var(--color-blue);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.team-input::placeholder {
  color: var(--text-secondary);
  font-style: italic;
}

.name-input {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.email-input {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.team-select {
  cursor: pointer;
  min-width: 100px;
}

.seniority-select {
  font-weight: 600;
  text-transform: capitalize;
}

.studio-select {
  font-weight: 600;
}

/* Salary Input Group */
.salary-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.salary-input-group .currency-select {
  width: auto;
  min-width: 60px;
  padding: var(--spacing-sm) var(--spacing-xs);
}

/* Salary input base style - width controlled by column */

.hours-input {
  width: 60px;
  text-align: center;
}

.team-name {
  font-weight: 600;
  color: var(--text-primary);
}

.team-email {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.seniority-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.seniority-badge.principal { background: #FFE4E4; color: #FF3B3B; }
.seniority-badge.director { background: #FFF0E4; color: #FF7B2C; }
.seniority-badge.senior { background: #E4F0FF; color: #0066FF; }
.seniority-badge.mid { background: #E4FFE4; color: #22a355; }
.seniority-badge.junior { background: #F0F0F0; color: #666; }

.studio-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.studio-badge.shanghai { background: #FFE4E4; color: #FF3B3B; }
.studio-badge.dubai { background: #FFFCE4; color: #AA9500; }

.salary-value {
  font-weight: 600;
  font-family: var(--font-display);
}

.hourly-rate {
  color: var(--color-blue);
  font-weight: 600;
}

/* Team column widths - COMPACT layout with Department column
   Added: Department column
   Tightened: All columns for space efficiency
   Reduced padding throughout for denser layout */
.team-matrix .col-avatar,
.team-matrix th.col-avatar,
.team-matrix td.col-avatar { width: 40px; min-width: 40px; padding: 4px 2px 4px 12px !important; }

.team-matrix .col-name,
.team-matrix th.col-name,
.team-matrix td.col-name { width: 10%; padding: 4px 3px !important; }

/* Hide NAME header on smaller screens to prevent collision with studio header */
@media (max-width: 1500px) {
  .team-matrix .studio-header-row th.col-name {
    visibility: hidden;
  }
}

.team-matrix .col-emp-status,
.team-matrix th.col-emp-status,
.team-matrix td.col-emp-status { width: 55px; min-width: 55px; max-width: 55px; padding: 0 2px !important; text-align: center; }

.team-matrix .col-role,
.team-matrix th.col-role,
.team-matrix td.col-role { width: 9%; padding: 4px 3px !important; }

/* Department column - auto-assigned from role */
.team-matrix .col-department,
.team-matrix th.col-department,
.team-matrix td.col-department { width: 6%; padding: 4px 3px !important; text-align: center; }

.team-matrix .col-seniority,
.team-matrix th.col-seniority,
.team-matrix td.col-seniority { width: 6%; padding: 4px 3px !important; }

.team-matrix .col-studio,
.team-matrix th.col-studio,
.team-matrix td.col-studio { width: 6%; padding: 4px 3px !important; }

/* Currency column removed - currency is now automatic based on studio */

.team-matrix .col-salary,
.team-matrix th.col-salary,
.team-matrix td.col-salary { width: 5%; padding: 4px 6px 4px 3px !important; }

.team-matrix .col-insurance,
.team-matrix th.col-insurance,
.team-matrix td.col-insurance { width: 6%; padding: 4px 3px 4px 8px !important; }

.team-matrix .col-total-cost,
.team-matrix th.col-total-cost,
.team-matrix td.col-total-cost { width: 6%; padding: 4px 3px !important; }

/* Converted total column - right-aligned with reduced right padding for balance */
.team-matrix .col-total-converted,
.team-matrix th.col-total-converted,
.team-matrix td.col-total-converted { width: 5%; padding: 4px 6px 4px 3px !important; text-align: right; }

/* HOURS/WEEK column - centered between TOTAL and HOURLY columns */
.team-matrix .col-hours,
.team-matrix th.col-hours,
.team-matrix td.col-hours { 
  width: 5%; 
  padding: 4px 4px !important; 
  text-align: center;
}

/* Primary hourly rate column */
.team-matrix .col-rate,
.team-matrix th.col-rate,
.team-matrix td.col-rate { width: 5%; padding: 4px 3px !important; }

/* Converted hourly rate column */
.team-matrix .col-rate-converted,
.team-matrix th.col-rate-converted,
.team-matrix td.col-rate-converted { width: 5%; padding: 4px 3px !important; text-align: right; }

.team-matrix .col-actions,
.team-matrix th.col-actions,
.team-matrix td.col-actions { width: 3%; padding: 4px 2px !important; }

/* Salary, Insurance, Total Cost and converted columns - right aligned for numbers */
.team-matrix th.col-salary,
.team-matrix th.col-insurance,
.team-matrix th.col-total-cost,
.team-matrix th.col-total-converted,
.team-matrix th.col-rate,
.team-matrix th.col-rate-converted,
.team-matrix td.col-salary,
.team-matrix td.col-insurance,
.team-matrix td.col-total-cost,
.team-matrix td.col-total-converted,
.team-matrix td.col-rate,
.team-matrix td.col-rate-converted {
  text-align: right;
}

/* Converted value styling - read-only, slightly dimmer */
.team-matrix .converted-value {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Insurance input styling */
.insurance-input {
  width: 100%;
  text-align: right;
  font-weight: 600;
}

/* Total cost input styling */
.total-cost-input {
  width: 100%;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
}

/* Salary input right-aligned */
.col-salary .salary-input {
  width: 100%;
  text-align: right;
  font-weight: 600;
}

/* Team table header text - compact */
.team-matrix th {
  font-size: 0.7rem;
  white-space: nowrap;
}

/* ============================================
   PROFITABILITY SECTION
   ============================================ */

.profitability-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.profit-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  box-shadow: 0 2px 8px var(--shadow-color);
  position: relative;
  overflow: hidden;
}

.profit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.profit-card.total-revenue::before { background: var(--color-blue); }
.profit-card.total-costs::before { background: var(--color-orange); }
.profit-card.total-profit::before { background: var(--color-green); }
.profit-card.profit-margin::before { background: var(--color-purple); }

.profit-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.total-revenue .profit-icon { background: rgba(0, 102, 255, 0.1); color: var(--color-blue); }
.total-costs .profit-icon { background: rgba(255, 123, 44, 0.1); color: var(--color-orange); }
.total-profit .profit-icon { background: rgba(125, 255, 92, 0.1); color: #22a355; }
.profit-margin .profit-icon { background: rgba(107, 51, 255, 0.1); color: var(--color-purple); }

.profit-content {
  display: flex;
  flex-direction: column;
}

.profit-value {
  font-size: 1.75rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
}

.profit-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Profitability Table */
.profitability-section {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.profitability-section h2 {
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
  color: var(--text-primary);
}

.profitability-table-container {
  overflow-x: auto;
}

.profitability-table {
  width: 100%;
  border-collapse: collapse;
}

.profitability-table th {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
}

.profitability-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.profitability-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.profit-positive {
  color: #22a355;
  font-weight: 600;
}

.profit-negative {
  color: var(--color-red);
  font-weight: 600;
}

.margin-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.margin-badge.high { background: #E4FFE4; color: #22a355; }
.margin-badge.medium { background: #FFF0E4; color: #FF7B2C; }
.margin-badge.low { background: #FFE4E4; color: #FF3B3B; }

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.profitable { background: #22a355; }
.status-dot.break-even { background: #FFDD00; }
.status-dot.loss { background: #FF3B3B; }

/* Profitability Chart */
.profitability-chart-section {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.profitability-chart-section h2 {
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
  color: var(--text-primary);
}

.chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.chart-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.chart-label {
  width: 120px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-bar-container {
  flex: 1;
  height: 30px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.chart-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--spacing-sm);
}

.chart-bar-fill.positive { background: linear-gradient(90deg, #22a355, #7DFF5C); }
.chart-bar-fill.negative { background: linear-gradient(90deg, #FF3B3B, #FF7B2C); }

.chart-bar-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

/* ============================================
   COMING SOON SECTIONS (CRM, POA)
   ============================================ */

.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px var(--shadow-color);
  max-width: 600px;
  margin: var(--spacing-2xl) auto;
}

.coming-soon-icon {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-orange), var(--color-yellow));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-xl);
  animation: pulse-icon 2s ease-in-out infinite;
}

.coming-soon-icon i {
  font-size: 2.5rem;
  color: white;
}

@keyframes pulse-icon {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 123, 44, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px 10px rgba(255, 123, 44, 0); }
}

.coming-soon-container h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.coming-soon-container > p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: var(--spacing-xl);
  max-width: 400px;
}

.coming-soon-features {
  list-style: none;
  text-align: left;
  width: 100%;
  max-width: 400px;
}

.coming-soon-features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border-color);
}

.coming-soon-features li:last-child {
  border-bottom: none;
}

.coming-soon-features li i {
  color: var(--color-green);
  font-size: 0.85rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1200px) {
  .projects-matrix-container {
    overflow-x: auto;
  }
  
  .projects-matrix {
    min-width: 900px;
  }
}

@media (max-width: 1024px) {
  .project-stats-bar {
    justify-content: center;
  }
  
  .btn-add-project {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    margin-top: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .sidebar-overlay.active {
    display: block;
  }
  
  .mobile-header {
    display: flex;
  }
  
  .main-content {
    margin-left: 0;
    padding: var(--spacing-md);
    padding-top: calc(var(--header-height) + var(--spacing-md));
  }
  
  .section-header h1 {
    font-size: 1.5rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
  
  .stat-card {
    padding: var(--spacing-md);
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
  
  .filters-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box input {
    width: 100%;
  }
  
  .projects-table {
    font-size: 0.8rem;
  }
  
  .projects-table th,
  .projects-table td {
    padding: var(--spacing-sm);
  }
  
  /* Hide some columns on mobile */
  .projects-table th:nth-child(3),
  .projects-table td:nth-child(3),
  .projects-table th:nth-child(4),
  .projects-table td:nth-child(4) {
    display: none;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .recent-projects {
    grid-template-columns: 1fr;
  }
  
  .tools-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   ANIMATIONS & EFFECTS
   ============================================ */

/* Glow effect for night mode */
[data-theme="dark"] .stat-card:hover {
  box-shadow: 0 0 30px rgba(255, 59, 59, 0.2);
}

[data-theme="dark"] .tool-card:hover {
  box-shadow: 0 0 30px var(--shadow-color), 0 0 60px rgba(255, 59, 59, 0.1);
}

[data-theme="dark"] .nav-item.active::before {
  box-shadow: 0 0 20px var(--color-red);
}

/* Tooltip */
.tooltip {
  position: absolute;
  background: var(--color-charcoal);
  color: var(--color-white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tooltip.visible {
  opacity: 1;
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Scroll styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-dark-gray);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-red);
}

/* ============================================
   RECURSOS SECTION - Resource Management
   ============================================ */

.resource-stats,
.cost-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

/* ============================================
   PROJECTS SECTION - Phase Pipeline (simple boxes with arrows)
   ============================================ */

.phase-pipeline-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xl);
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* Phase box - fixed height to match stat-card.mini, equal width, always single line */
.phase-box {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  height: auto;
  min-height: 76px;
  text-align: center;
  box-shadow: 0 4px 20px var(--shadow-color);
}

.phase-box .phase-number {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  color: var(--text-primary);
}

/* Full name - visible on wide screens */
.phase-box .phase-name-full {
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.2px;
  margin-top: 4px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Short name (initials) - hidden by default, shown on narrow screens */
.phase-box .phase-name-short {
  display: none;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.3px;
  margin-top: 4px;
  color: var(--text-secondary);
}

/* Phase colors - light backgrounds with colored text */
.phase-box.pre {
  background: rgba(255, 51, 153, 0.1);
  color: #FF3399;
}

.phase-box.cd {
  background: rgba(255, 59, 59, 0.1);
  color: #FF3B3B;
}

.phase-box.sd {
  background: rgba(255, 123, 44, 0.1);
  color: #FF7B2C;
}

.phase-box.dd {
  background: rgba(255, 221, 0, 0.15);
  color: #D4B800;
}

.phase-box.wd {
  background: rgba(0, 102, 255, 0.1);
  color: #0066FF;
}

.phase-box.construction {
  background: rgba(136, 136, 136, 0.15);
  color: #888888;
}

.phase-box.completed {
  background: rgba(187, 187, 187, 0.2);
  color: #999999;
}

/* Arrow between boxes - bold and visible */
.phase-pipeline-row .phase-arrow {
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Responsive - switch to initials on narrow screens */
@media (max-width: 1100px) {
  .phase-box .phase-name-full {
    display: none;
  }
  
  .phase-box .phase-name-short {
    display: block;
  }
}

@media (max-width: 768px) {
  .project-filters-row {
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }
  
  .project-filters-row .filter-dropdowns {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    width: 100%;
  }
  
  .project-filters-row .btn-add-project {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .phase-pipeline-row .phase-arrow {
    font-size: 0.9rem;
  }
  
  .phase-box .phase-number {
    font-size: 1.2rem;
  }
  
  .phase-box {
    min-height: 65px;
    padding: var(--spacing-sm);
  }
}

/* Project Filters Row - aligned with Add Project button (like Team tab) */
.project-filters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.project-filters-row .filter-dropdowns {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-wrap: nowrap;
}

.project-filters-row .filter-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.project-filters-row .filter-dropdown label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.project-filters-row .filter-select {
  padding: 4px 8px;
  padding-right: 22px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  min-width: 90px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.project-filters-row .filter-select:hover {
  border-color: var(--color-red);
}

.project-filters-row .filter-select:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.15);
}

.project-filters-row .phase-filters {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
}

.project-filters-row .btn-add-project {
  margin-left: auto;
  flex-shrink: 0;
}

/* Filter group labels */
.filter-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-divider {
  color: var(--border-color);
  margin: 0 var(--spacing-xs);
}

.stat-card.mini {
  padding: var(--spacing-md);
}

.stat-card.mini .stat-icon {
  width: 44px;
  height: 44px;
}

.stat-card.mini .stat-icon i {
  font-size: 1.2rem;
}

.stat-card.mini .stat-value {
  font-size: 1.5rem;
}

.stat-card.mini .stat-label {
  font-size: 0.75rem;
}

/* Week Selector */
.week-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px var(--shadow-color);
}

.week-nav {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.week-nav:hover {
  border-color: var(--color-red);
  color: var(--color-red);
  background: rgba(255, 59, 59, 0.1);
}

.current-week {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Utilization Section */
.utilization-section,
.assignment-section,
.cost-breakdown-section,
.expenses-section,
.trips-section {
  margin-bottom: var(--spacing-2xl);
}

/* Add top margin to utilization section for spacing from matrix above */
.utilization-section {
  margin-top: var(--spacing-xl);
}

.utilization-section h2,
.assignment-section h2,
.cost-breakdown-section h2,
.expenses-section h2,
.trips-section h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
}

.utilization-section h2 i,
.assignment-section h2 i,
.cost-breakdown-section h2 i,
.expenses-section h2 i,
.trips-section h2 i {
  margin-right: var(--spacing-sm);
  color: var(--color-orange);
}

/* ============================================
   WEEKLY TEAM UTILIZATION TABLE
   Clean, dense, readable table layout
   ============================================ */

/* Card wrapper - starts with black header row */
.utilization-table-wrapper {
  background: var(--bg-primary);
  border-radius: 0 0 8px 8px; /* Rounded bottom only - title bar above */
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  border-top: none;
}

.utilization-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  table-layout: fixed;
}

.utilization-table thead {
  background: #000000;
  position: sticky;
  top: 0;
  z-index: 10;
}

.utilization-table thead th {
  padding: 4px 6px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.55rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  border-bottom: 2px solid #333333;
  white-space: normal;
  vertical-align: middle;
  line-height: 1.15;
}

/* Two-line header styling (compact) */
.utilization-table thead th .header-line1 {
  display: block;
  font-size: 0.55rem;
  margin: 0;
  padding: 0;
  line-height: 1.15;
}

.utilization-table thead th .header-line2 {
  display: block;
  font-size: 0.5rem;
  opacity: 0.8;
  margin: 0;
  padding: 0;
  line-height: 1.15;
  white-space: nowrap;
}

/* Employee Name column */
.utilization-table thead th.col-name {
  width: 120px;
  min-width: 100px;
  max-width: 140px;
}

/* Position column - reduced width */
.utilization-table thead th.col-position {
  width: 120px;
  min-width: 100px;
  max-width: 140px;
}

/* Department column - reduced width */
.utilization-table thead th.col-department {
  width: 75px;
  min-width: 65px;
  max-width: 90px;
  text-align: center;
}

/* Hourly Rate columns - compact */
.utilization-table thead th.col-hourly-rmb,
.utilization-table thead th.col-hourly-aed {
  width: 65px;
  min-width: 55px;
  max-width: 75px;
  text-align: right;
}

/* Unassigned Hours columns - 2 lines with date */
.utilization-table thead th.col-unassigned-today {
  width: 130px;
  min-width: 110px;
  max-width: 150px;
  text-align: center;
}

.utilization-table thead th.col-unassigned-week {
  width: 180px;
  min-width: 160px;
  max-width: 200px;
  text-align: center;
}

.utilization-table thead th.col-unassigned-month {
  width: 140px;
  min-width: 120px;
  max-width: 160px;
  text-align: center;
}

/* Cost columns */
.utilization-table thead th.col-rmb,
.utilization-table thead th.col-aed,
.utilization-table thead th.col-usd {
  width: 60px;
  min-width: 50px;
  text-align: right;
}

.utilization-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

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

/* Studio header rows - now with aligned totals columns */
.utilization-studio-row {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.utilization-studio-row td {
  padding: 6px 8px !important;
  vertical-align: middle;
}

/* Studio name cell spans conceptually but aligns with Name column */
.utilization-studio-row td.studio-name-cell {
  white-space: nowrap;
}

/* Studio totals in unassigned columns - displayed in aligned cells */
.utilization-studio-row td.studio-total {
  text-align: center;
  font-weight: 700;
  font-size: 0.75rem;
}

.utilization-studio-row.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
}

.utilization-studio-row.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B) !important;
}

.utilization-studio-row.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF) !important;
}

/* Disable ALL hover/interaction effects on studio header bars */
.utilization-studio-row,
.utilization-studio-row:hover,
.utilization-studio-row:focus,
.utilization-studio-row:active {
  cursor: default !important;
  pointer-events: none;
}

.utilization-studio-row.studio-shanghai,
.utilization-studio-row.studio-shanghai:hover {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
  opacity: 1 !important;
  transition: none !important;
}

.utilization-studio-row.studio-dubai,
.utilization-studio-row.studio-dubai:hover {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B) !important;
  opacity: 1 !important;
  transition: none !important;
}

.utilization-studio-row.studio-riyadh,
.utilization-studio-row.studio-riyadh:hover {
  background: linear-gradient(135deg, #6B33FF, #9966FF) !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ============================================
   GRAND TOTAL ROW - All Design Studios Combined
   Neutral dark color, distinct from studio rows
   ============================================ */
.utilization-grand-total-row {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, #2D3748, #4A5568) !important;
  border-top: 2px solid #1A202C;
}

.utilization-grand-total-row td {
  padding: 8px 10px !important;
  vertical-align: middle;
}

.utilization-grand-total-row td.grand-total-label {
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.8rem;
}

.utilization-grand-total-row td.grand-total {
  text-align: center;
  font-weight: 800;
  font-size: 0.8rem;
}

/* Disable hover effects on grand total row */
.utilization-grand-total-row,
.utilization-grand-total-row:hover,
.utilization-grand-total-row:focus,
.utilization-grand-total-row:active {
  background: linear-gradient(135deg, #2D3748, #4A5568) !important;
  cursor: default !important;
  pointer-events: none;
  opacity: 1 !important;
  transition: none !important;
}

/* Employee data rows */
.utilization-employee-row td {
  padding: 6px 8px;
  vertical-align: middle;
  font-size: 0.7rem;
}

/* Employee Name column - primary, bold, explicit width */
.utilization-employee-row td.col-name {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  width: 120px;
  min-width: 100px;
  max-width: 140px;
}

/* Position column - reduced width */
.utilization-employee-row td.col-position {
  text-align: left;
  color: var(--text-secondary);
  font-size: 0.6rem;
  width: 120px;
  min-width: 100px;
  max-width: 140px;
  white-space: normal;
  word-wrap: break-word;
}

/* Department column - reduced width */
.utilization-employee-row td.col-department {
  text-align: center;
  width: 75px;
  min-width: 65px;
  max-width: 90px;
}

.utilization-employee-row td.col-department .dept-label {
  font-size: 0.5rem;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-block;
  white-space: nowrap;
}

.utilization-employee-row td.col-hourly-rmb,
.utilization-employee-row td.col-hourly-aed {
  text-align: right;
  color: var(--text-primary);
  font-weight: 500;
  width: 65px;
  min-width: 55px;
  max-width: 75px;
}

.utilization-employee-row td.col-unassigned-today {
  text-align: center;
  color: var(--text-secondary);
  width: 130px;
  min-width: 110px;
  max-width: 150px;
}

.utilization-employee-row td.col-unassigned-week {
  text-align: center;
  color: var(--text-secondary);
  width: 180px;
  min-width: 160px;
  max-width: 200px;
}

.utilization-employee-row td.col-unassigned-month {
  text-align: center;
  color: var(--text-secondary);
  width: 140px;
  min-width: 120px;
  max-width: 160px;
}

.utilization-employee-row td.col-rmb,
.utilization-employee-row td.col-aed,
.utilization-employee-row td.col-usd {
  text-align: right;
  color: var(--text-secondary);
  width: 60px;
  min-width: 50px;
}

/* Employee cell with name and role - DEPRECATED, kept for backward compatibility */
.employee-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.employee-cell .employee-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.8rem;
}

.employee-cell .employee-role {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

/* Zebra striping for employee rows */
.utilization-employee-row:nth-child(even) {
  background: var(--bg-tertiary);
}

.utilization-employee-row:nth-child(even):hover {
  background: var(--bg-secondary);
}

/* Member circle - kept for Design Pool and other components */
.member-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.65rem;
  color: white;
  flex-shrink: 0;
}

/* Assignment Matrix */
.assignment-matrix-container {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow-color);
}

.assignment-matrix {
  width: 100%;
  border-collapse: collapse;
}

.assignment-matrix th,
.assignment-matrix td {
  padding: var(--spacing-md);
  text-align: left;
}

.assignment-matrix th {
  background: var(--bg-tertiary);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
}

.assignment-matrix td {
  font-size: 0.9rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.assignment-matrix tr:last-child td {
  border-bottom: none;
}

.assignment-matrix tr:hover td {
  background: var(--bg-tertiary);
}

.assignment-member {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.assignment-member .mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-red), var(--color-orange));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-white);
}

.tasks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.task-tag {
  font-size: 0.7rem;
  padding: 2px 6px;
  background: rgba(0, 102, 255, 0.1);
  color: var(--color-blue);
  border-radius: var(--radius-sm);
}

.hours-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(125, 255, 92, 0.1);
  color: #4CAF50;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
}

.action-btn-small {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn-small:hover {
  background: var(--color-red);
  color: var(--color-white);
}

/* ============================================
   COSTOS SECTION - Cost Management
   ============================================ */

.cost-table-container {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  box-shadow: 0 4px 20px var(--shadow-color);
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.cost-table th,
.cost-table td {
  padding: var(--spacing-md);
  text-align: left;
}

.cost-table th {
  background: var(--bg-tertiary);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.cost-table td {
  font-size: 0.85rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.cost-table tr:last-child td {
  border-bottom: none;
}

.cost-table tr:hover td {
  background: var(--bg-tertiary);
}

.cost-value {
  font-family: var(--font-display);
  font-weight: 600;
}

.cost-value.labor {
  color: var(--color-red);
}

.cost-value.expenses {
  color: var(--color-orange);
}

.cost-value.trips {
  color: var(--color-blue);
}

.cost-value.total {
  color: var(--color-purple);
}

.budget-bar {
  width: 100px;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.budget-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--transition-normal);
}

.budget-fill.low {
  background: var(--color-green);
}

.budget-fill.medium {
  background: var(--color-orange);
}

.budget-fill.high {
  background: var(--color-red);
}

/* Expenses Grid */
.expenses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.expense-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px var(--shadow-color);
  border-left: 4px solid var(--expense-color, var(--color-red));
}

.expense-card h4 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.expense-card .amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--expense-color, var(--color-red));
  margin-bottom: var(--spacing-xs);
}

.expense-card .period {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Trips List */
.trips-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.trip-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px var(--shadow-color);
  display: flex;
  gap: var(--spacing-md);
}

.trip-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-blue), var(--color-turquoise));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trip-icon i {
  font-size: 1.3rem;
  color: var(--color-white);
}

.trip-details {
  flex: 1;
}

.trip-details h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.trip-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.trip-meta span i {
  width: 16px;
  margin-right: 4px;
}

.trip-cost {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-blue);
  white-space: nowrap;
}

/* Team Preview on Home */
.team-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

.team-preview-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  box-shadow: 0 4px 20px var(--shadow-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.team-preview-card .member-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.8rem;
}

.team-preview-info {
  flex: 1;
}

.team-preview-info h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.team-preview-info span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.team-preview-hours {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-green);
}

/* ============================================
   MODAL STYLES
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease;
}

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

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--color-red);
  color: var(--color-white);
}

.modal-body {
  padding: var(--spacing-lg);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-blue);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.btn-secondary {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  border-color: var(--color-dark-gray);
}

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

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

/* ============================================
   COMPACT HOUR ALLOCATION MODAL
   ============================================ */

.compact-hour-modal {
  max-width: 340px;
  padding: 0;
  overflow: hidden;
}

/* Header with member circle + name */
.compact-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.member-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-identity .member-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: white;
  flex-shrink: 0;
}

.member-identity .member-circle.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
}

.member-identity .member-circle.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B);
}

.member-identity .member-circle.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF);
}

.member-identity .member-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.compact-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.compact-close:hover {
  background: var(--color-red);
  color: white;
}

/* Modal body */
.compact-modal-body {
  padding: 12px 16px;
}

/* Section labels */
.section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

/* Current assignments section */
.assignments-section {
  margin-bottom: 12px;
}

.assignments-section h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.assignments-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* No assignments message */
.no-assignments {
  text-align: center;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-style: italic;
  background: var(--bg-secondary);
  border-radius: 6px;
}

/* Assignment row - project with editable hours */
.assignment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border-left: 3px solid var(--color-blue);
}

.assignment-row .project-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.assignment-row .hour-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.assignment-row .hour-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.assignment-row .hour-btn:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.assignment-row .hour-display {
  width: 40px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-blue);
}

/* New assignment section */
.new-assignment-section {
  margin-bottom: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
}

.new-assignment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255, 165, 0, 0.1);
  border-radius: 6px;
  border-left: 3px solid var(--color-orange);
}

.new-assignment-row .project-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.new-assignment-row .hour-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.new-assignment-row .hour-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--color-orange);
  background: var(--bg-primary);
  color: var(--color-orange);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.new-assignment-row .hour-btn:hover {
  background: var(--color-orange);
  color: white;
}

.new-assignment-row .hour-input {
  width: 44px;
  height: 28px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  border: 2px solid var(--color-orange);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--color-orange);
}

.new-assignment-row .hour-input:focus {
  outline: none;
  background: rgba(255, 165, 0, 0.1);
}

/* Total bar */
.total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  margin-bottom: 8px;
}

.total-bar span:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.total-bar .total-value {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.total-bar .total-value.over-limit {
  color: var(--color-red);
}

/* Warning */
.hour-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 59, 59, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(255, 59, 59, 0.2);
  color: var(--color-red);
  font-size: 0.75rem;
}

.hour-warning i {
  font-size: 0.85rem;
}

/* Footer */
.compact-modal-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.btn-cancel {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-cancel:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.btn-confirm {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: var(--color-orange);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-confirm:hover {
  background: #E69500;
}

.btn-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   RESOURCE DETAIL POPUP
   ============================================ */

.resource-detail-modal {
  max-width: 480px;
  padding: 0;
  overflow: hidden;
}

.resource-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border-bottom: 1px solid var(--border-color);
}

.resource-detail-header h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.resource-detail-body {
  padding: 16px 20px;
  max-height: 400px;
  overflow-y: auto;
}

.resource-detail-footer {
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

/* Detail list items */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.detail-item:hover {
  background: var(--bg-tertiary);
  transform: translateX(4px);
}

.detail-item .member-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  color: white;
  flex-shrink: 0;
}

.detail-item .member-circle.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
}

.detail-item .member-circle.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B);
}

.detail-item .member-circle.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF);
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
  min-width: 0;
}

.detail-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Hours display in available hours popup */
.hours-item {
  align-items: center;
}

.hours-item .detail-info {
  flex-direction: column;
  gap: 4px;
}

.hours-item .detail-info.flex-grow {
  flex-grow: 1;
}

.mini-utilization-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.mini-bar-fill.bar-low {
  background: linear-gradient(90deg, #10B981, #34D399);
}

.mini-bar-fill.bar-medium {
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.mini-bar-fill.bar-high {
  background: linear-gradient(90deg, #EF4444, #F87171);
}

.mini-bar-fill.bar-full {
  background: linear-gradient(90deg, #7C3AED, #A78BFA);
}

.hours-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}

.hours-available {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.hours-available.has-hours {
  color: #10B981;
}

.hours-available.no-hours {
  color: var(--text-secondary);
}

.hours-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Project items in detail popup */
.project-item {
  position: relative;
}

.project-phase-badge {
  width: 40px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.65rem;
  color: white;
  flex-shrink: 0;
}

.assign-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-blue);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  opacity: 0;
}

.detail-item:hover .assign-btn {
  opacity: 1;
}

.assign-btn:hover {
  background: var(--color-red);
  transform: scale(1.1);
}

/* Overdue items */
.detail-item.overdue {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.detail-item.overdue:hover {
  background: rgba(239, 68, 68, 0.15);
}

.overdue-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EF4444, #F87171);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.overdue-meta {
  color: #EF4444 !important;
}

/* Empty state */
.detail-empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-secondary);
}

.detail-empty i {
  font-size: 2.5rem;
  color: #10B981;
  margin-bottom: 12px;
}

.detail-empty p {
  font-size: 0.9rem;
  margin: 0;
}

/* Total bar */
.detail-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-top: 12px;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.detail-total strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #10B981;
}

/* Clickable stat cards */
.stat-card.clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.stat-card.clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.stat-card.clickable:active {
  transform: translateY(-2px);
}

/* ============================================
   ADDITIONAL RESPONSIVE STYLES
   ============================================ */

/* ============================================
   DRAG & DROP ASSIGNMENT INTERFACE
   ============================================ */

.section-hint {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  font-style: italic;
}

.drag-drop-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-xl);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: 0 4px 20px var(--shadow-color);
  min-height: 500px;
}

/* Team Members Pool - Left Side */
.team-pool {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  position: sticky;
  top: var(--spacing-lg);
  height: fit-content;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.team-pool h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.team-pool h3 i {
  color: var(--color-orange);
}

.team-pool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

/* Draggable Team Member Circle */
.team-circle {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-red), var(--color-orange));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-white);
  cursor: grab;
  transition: all var(--transition-fast);
  user-select: none;
  position: relative;
  box-shadow: 0 3px 10px rgba(255, 59, 59, 0.3);
}

.team-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 20px rgba(255, 59, 59, 0.4);
}

.team-circle:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.team-circle.dragging {
  opacity: 0.5;
  transform: scale(0.9);
}

.team-circle[data-studio="Shanghai"] {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
  box-shadow: 0 3px 10px rgba(25, 154, 204, 0.3);
}

.team-circle[data-studio="Shanghai"]:hover {
  box-shadow: 0 5px 20px rgba(25, 154, 204, 0.4);
}

.team-circle[data-studio="Dubai"] {
  background: linear-gradient(135deg, var(--color-orange), #FFAA00);
  box-shadow: 0 3px 10px rgba(255, 123, 44, 0.3);
}

.team-circle[data-studio="Dubai"]:hover {
  box-shadow: 0 5px 20px rgba(255, 123, 44, 0.4);
}

.team-circle[data-studio="Riyadh"] {
  background: linear-gradient(135deg, var(--color-purple), #9966FF);
  box-shadow: 0 3px 10px rgba(107, 51, 255, 0.3);
}

.team-circle[data-studio="Riyadh"]:hover {
  box-shadow: 0 5px 20px rgba(107, 51, 255, 0.4);
}

.team-circle-tooltip {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-charcoal);
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.team-circle:hover .team-circle-tooltip {
  opacity: 1;
}

/* Projects Pool - Right Side */
.projects-pool {
  flex: 1;
}

.projects-pool h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.projects-pool h3 i {
  color: var(--color-blue);
}

.projects-drop-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Project Row - Drop Zone */
.project-drop-row {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-lg);
  transition: all var(--transition-fast);
  border: 2px dashed transparent;
  min-height: 70px;
}

.project-drop-row:hover {
  background: var(--bg-tertiary);
}

.project-drop-row.drag-over {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.1);
  transform: scale(1.01);
}

.project-drop-row.drag-over .drop-zone {
  background: rgba(255, 123, 44, 0.2);
  border-color: var(--color-orange);
}

/* Project Info */
.project-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-info .project-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.project-info .project-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.project-info .project-meta i {
  margin-right: 4px;
}

.project-info .delivery-date {
  color: var(--color-blue);
  font-weight: 500;
}

.project-info .project-phase {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.project-info .project-phase.phase-pre { background: rgba(255, 51, 153, 0.15); color: #FF3399; }
.project-info .project-phase.phase-cd { background: rgba(255, 59, 59, 0.15); color: #FF3B3B; }
.project-info .project-phase.phase-sd { background: rgba(255, 123, 44, 0.15); color: #FF7B2C; }
.project-info .project-phase.phase-dd { background: rgba(212, 184, 0, 0.15); color: #d4b800; }
.project-info .project-phase.phase-wd { background: rgba(0, 102, 255, 0.15); color: #0066FF; }
.project-info .project-phase.phase-construction { background: rgba(107, 51, 255, 0.15); color: #6B33FF; }
.project-info .project-phase.phase-completed { background: rgba(34, 163, 85, 0.15); color: #22a355; }

/* Drop Zone for Team Members */
.drop-zone {
  min-width: 200px;
  min-height: 50px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--bg-tertiary);
  transition: all var(--transition-fast);
}

.drop-zone.empty::before {
  content: 'Drop team here';
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-style: italic;
}

.drop-zone:not(.empty)::before {
  display: none;
}

/* Assigned Team Member in Drop Zone */
.assigned-member {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-red), var(--color-orange));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--color-white);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.assigned-member:hover {
  transform: scale(1.1);
}

.assigned-member[data-studio="Shanghai"] {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
}

.assigned-member[data-studio="Dubai"] {
  background: linear-gradient(135deg, var(--color-orange), #FFAA00);
}

.assigned-member[data-studio="Riyadh"] {
  background: linear-gradient(135deg, var(--color-purple), #9966FF);
}

.assigned-member .remove-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: var(--color-white);
  border: none;
  font-size: 0.6rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.assigned-member:hover .remove-btn {
  display: flex;
}

/* Hours Allocated Display */
.hours-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.hours-display .total-hours {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.hours-display .hours-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--text-secondary);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.empty-state p {
  font-size: 0.9rem;
}

/* Toast Notifications */
.toast-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  background: var(--color-charcoal);
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.9rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-notification.toast-success {
  background: #22a355;
}

.toast-notification.toast-error {
  background: var(--color-red);
}

.toast-notification.toast-warning {
  background: var(--color-orange);
}

.toast-notification.toast-info {
  background: var(--color-blue);
}

/* ============================================
   DRAG & DROP V2 - Redesigned Layout
   ============================================ */

.drag-drop-container-v2 {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--spacing-md);
  background: transparent; /* No shared background */
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  align-items: stretch; /* Both columns stretch to same height */
  /* Smooth transition for squeeze effect */
  transition: grid-template-columns 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Projects Pool - Left Side */
.projects-pool-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Project Row Header */
.project-row-header {
  display: grid;
  grid-template-columns: 180px 70px 1fr 70px;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-charcoal);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
}

.project-row-header > div {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.header-project { }
.header-leader { text-align: center; }
.header-support { text-align: center; }
.header-hours { text-align: right; }

/* Compact Project Row */
.project-row-v2 {
  display: grid;
  grid-template-columns: 180px 70px 1fr 70px;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: all var(--transition-fast);
  min-height: 54px;
}

.project-row-v2:hover {
  background: var(--bg-tertiary);
}

.project-row-v2.drag-over {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.08);
}

.project-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.project-name-v2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-meta-v2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.project-phase-v2 {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.project-phase-v2.phase-pre { background: rgba(255, 51, 153, 0.15); color: #FF3399; }
.project-phase-v2.phase-cd { background: rgba(255, 59, 59, 0.15); color: #FF3B3B; }
.project-phase-v2.phase-sd { background: rgba(255, 123, 44, 0.15); color: #FF7B2C; }
.project-phase-v2.phase-dd { background: rgba(212, 184, 0, 0.15); color: #d4b800; }
.project-phase-v2.phase-wd { background: rgba(0, 102, 255, 0.15); color: #0066FF; }
.project-phase-v2.phase-construction { background: rgba(107, 51, 255, 0.15); color: #6B33FF; }
.project-phase-v2.phase-completed { background: rgba(34, 163, 85, 0.15); color: #22a355; }

.project-date-v2 {
  font-size: 0.7rem;
  color: var(--color-blue);
}

.project-date-v2 i {
  margin-right: 2px;
  font-size: 0.6rem;
}

.project-location-v2 {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.project-location-v2 i {
  margin-right: 3px;
  font-size: 0.6rem;
}

/* Drop Zone - Project Leader */
.drop-zone-leader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  min-height: 44px;
  min-width: 50px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  transition: all var(--transition-fast);
}

.drop-zone-leader.empty::before {
  content: '—';
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.drop-zone-leader:not(.empty)::before {
  display: none;
}

.project-row-v2.drag-over .drop-zone-leader {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.15);
}

/* Drop Zone - Support Team */
.drop-zone-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-xs) var(--spacing-sm);
  min-height: 44px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  transition: all var(--transition-fast);
}

.drop-zone-support.empty::before {
  content: 'Drop support team here';
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-style: italic;
  width: 100%;
  text-align: center;
}

.drop-zone-support:not(.empty)::before {
  display: none;
}

.project-row-v2.drag-over .drop-zone-support {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.15);
}

/* Drop Zone V2 (legacy) */
.drop-zone-v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-xs) var(--spacing-sm);
  min-height: 44px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  transition: all var(--transition-fast);
}

.drop-zone-v2.empty::before {
  content: 'Drop team here';
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-style: italic;
  width: 100%;
  text-align: center;
}

.drop-zone-v2:not(.empty)::before {
  display: none;
}

.project-row-v2.drag-over .drop-zone-v2 {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.15);
}

/* Assigned Member V2 */
.assigned-member-v2 {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6rem;
  color: var(--color-white);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.assigned-member-v2.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
}

.assigned-member-v2.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B);
}

.assigned-member-v2.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF);
}

.assigned-member-v2:hover {
  transform: scale(1.15);
}

.assigned-member-v2 .remove-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: var(--color-white);
  border: none;
  font-size: 0.5rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.assigned-member-v2:hover .remove-btn {
  display: flex;
}

/* Hours V2 */
.hours-v2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.hours-v2 .hours-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.hours-v2 .hours-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

/* Team Pool V2 - Right Side Vertical List - NARROWER & TALLER */
.team-pool-v2 {
  background: var(--bg-primary); /* Own card background */
  border-radius: var(--radius-lg);
  padding: 16px; /* Compact padding */
  min-height: calc(100vh - 220px); /* Taller - fill more screen */
  max-height: calc(100vh - 140px); /* More visible items */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  grid-column: 2;
  box-shadow: 0 4px 20px var(--shadow-color); /* Match gantt shadow */
  align-self: start; /* Align to top, don't stretch */
  position: sticky;
  top: 10px; /* Stay in view when scrolling */
}

.team-pool-v2 h3 {
  font-family: var(--font-display);
  font-size: 0.95rem; /* Match gantt-title-v3 */
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  padding-bottom: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  border-bottom: 2px solid var(--border-color); /* Match gantt header */
  min-height: 36px; /* Match gantt header min-height */
  box-sizing: content-box; /* Border not included in height */
  flex-shrink: 0;
}

.team-pool-v2 h3 i {
  color: var(--color-orange);
}

.team-pool-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Studio Divider in Team Pool */
.team-pool-studio-divider {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--spacing-sm) var(--spacing-xs);
  margin-top: var(--spacing-sm);
  color: var(--color-white);
  border-radius: var(--radius-sm);
}

.team-pool-studio-divider:first-child {
  margin-top: 0;
}

/* Shanghai Blue: #1AA0D0 - Soft gradient to slightly lighter */
.team-pool-studio-divider.studio-shanghai {
  background: linear-gradient(90deg, #1AA0D0 0%, #3BB8E0 100%);
}

/* Dubai Red: #FF4C4C - Soft gradient to slightly lighter */
.team-pool-studio-divider.studio-dubai {
  background: linear-gradient(90deg, #FF4C4C 0%, #FF7070 100%);
}

.team-pool-studio-divider.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF);
}

/* Team Pool Item - Compact Vertical List Style */
.team-pool-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: all var(--transition-fast);
  background: var(--bg-primary);
  border: 1px solid transparent;
}

.team-pool-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
  transform: translateX(-2px);
}

.team-pool-item:active {
  cursor: grabbing;
}

.team-pool-item.dragging {
  opacity: 0.5;
}

.team-pool-item.leadership {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.team-pool-item.leadership:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.1) 100%);
  border-color: rgba(255, 215, 0, 0.5);
}

.team-pool-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--color-white);
  flex-shrink: 0;
}

/* Shanghai Blue: #1AA0D0 - SOLID COLOR (no gradient) */
.team-pool-avatar.studio-shanghai {
  background: #1AA0D0;
}

/* Dubai Red: #FF4C4C - SOLID COLOR (no gradient) */
.team-pool-avatar.studio-dubai {
  background: #FF4C4C;
}

.team-pool-avatar.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF);
}

.team-pool-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.team-pool-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.team-pool-role {
  font-size: 0.6rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  .drag-drop-container {
    grid-template-columns: 1fr;
  }
  
  .drag-drop-container-v2 {
    grid-template-columns: 1fr;
  }
  
  .team-pool-v2 {
    position: relative;
    top: 0;
    max-height: none;
    order: -1;
  }
  
  .team-pool {
    position: relative;
    top: 0;
    max-height: none;
  }
}

/* Utilization table responsive - no horizontal scroll needed */
@media (max-width: 768px) {
  .resource-stats,
  .cost-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .utilization-table thead th {
    padding: 8px 10px;
    font-size: 0.6rem;
  }
  
  .utilization-employee-row td {
    padding: 8px 10px;
  }
  
  .assignment-matrix-container {
    overflow-x: auto;
  }
  
  .assignment-matrix {
    min-width: 600px;
  }
  
  .cost-table {
    min-width: 700px;
  }
  
  .expenses-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .trips-list {
    grid-template-columns: 1fr;
  }
  
  .team-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .resource-stats,
  .cost-stats {
    grid-template-columns: 1fr;
  }
  
  .expenses-grid {
    grid-template-columns: 1fr;
  }
  
  .week-selector {
    flex-direction: column;
    gap: var(--spacing-md);
  }
}

/* ============================================
   GANTT CHART TIMELINE VIEW
   Weekly Assignment Matrix with 4-Week Timeline
   ============================================ */

.gantt-container {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px var(--shadow-color);
  overflow-x: auto;
}

/* Gantt Header with Week Navigation */
.gantt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.gantt-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.gantt-title i {
  color: var(--color-orange);
}

.gantt-week-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.gantt-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.gantt-nav-btn:hover {
  border-color: var(--color-red);
  color: var(--color-red);
  background: rgba(255, 59, 59, 0.1);
}

.gantt-current-period {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 200px;
  text-align: center;
}

/* Gantt Grid Layout */
.gantt-grid {
  display: grid;
  grid-template-columns: 180px 70px minmax(600px, 1fr) 200px 60px;
  gap: 0;
  min-width: 900px;
}

/* Gantt Header Row */
.gantt-header-row {
  display: contents;
}

.gantt-header-cell {
  background: var(--color-charcoal);
  color: var(--color-white);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gantt-header-cell:first-child {
  border-radius: var(--radius-md) 0 0 0;
}

.gantt-header-cell:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

.gantt-header-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-charcoal);
  padding: 0;
}

/* Week Column Headers */
.gantt-week-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-charcoal);
}

.gantt-week-header.current-week {
  background: var(--color-red);
}

.gantt-week-num {
  font-size: 0.9rem;
  font-weight: 700;
}

.gantt-week-dates {
  font-size: 0.6rem;
  font-weight: 400;
  opacity: 0.8;
}

/* Day Numbers Row (1-5 for Mon-Fri) */
.gantt-day-numbers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  padding-top: 2px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.gantt-day-num {
  font-size: 0.55rem;
  text-align: center;
  opacity: 0.7;
}

/* Gantt Project Row */
.gantt-row {
  display: contents;
}

.gantt-row:hover > div {
  background: var(--bg-tertiary);
}

.gantt-cell {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
}

/* Project Info Cell */
.gantt-project-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.gantt-project-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.gantt-project-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.gantt-project-phase {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.gantt-project-phase.phase-pre { background: rgba(255, 51, 153, 0.15); color: #FF3399; }
.gantt-project-phase.phase-cd { background: rgba(255, 59, 59, 0.15); color: #FF3B3B; }
.gantt-project-phase.phase-sd { background: rgba(255, 123, 44, 0.15); color: #FF7B2C; }
.gantt-project-phase.phase-dd { background: rgba(212, 184, 0, 0.15); color: #d4b800; }
.gantt-project-phase.phase-wd { background: rgba(0, 102, 255, 0.15); color: #0066FF; }
.gantt-project-phase.phase-construction { background: rgba(107, 51, 255, 0.15); color: #6B33FF; }
.gantt-project-phase.phase-completed { background: rgba(34, 163, 85, 0.15); color: #22a355; }

.gantt-project-location {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.gantt-project-location i {
  margin-right: 2px;
  font-size: 0.55rem;
}

/* Leader Cell */
.gantt-leader-cell {
  justify-content: center;
}

.gantt-leader-drop {
  width: 44px;
  height: 44px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  transition: all var(--transition-fast);
}

.gantt-leader-drop.empty::before {
  content: '—';
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.gantt-leader-drop:not(.empty)::before {
  display: none;
}

.gantt-leader-drop.drag-over {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.15);
}

/* Timeline Cell with Week Bars */
.gantt-timeline-cell {
  padding: var(--spacing-xs);
  position: relative;
}

.gantt-timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  height: 100%;
  min-height: 52px;
  position: relative;
}

/* Week Column in Timeline */
.gantt-week-col {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  position: relative;
  min-height: 44px;
  border: 2px dashed transparent;
  transition: all var(--transition-fast);
}

.gantt-week-col.current {
  background: rgba(255, 59, 59, 0.08);
  border-color: rgba(255, 59, 59, 0.3);
}

.gantt-week-col.drag-over {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.15);
}

.gantt-week-col.empty::before {
  content: '';
}

/* Delivery Date Marker */
.gantt-delivery-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-red);
  border-radius: 2px;
  z-index: 10;
  box-shadow: 0 0 8px rgba(255, 59, 59, 0.5);
}

.gantt-delivery-marker::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--color-red);
}

.gantt-delivery-marker::after {
  content: attr(data-date);
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--color-red);
  white-space: nowrap;
  background: var(--bg-primary);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Team Member in Gantt */
.gantt-member {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.55rem;
  color: var(--color-white);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.gantt-member.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
}

.gantt-member.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B);
}

.gantt-member.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF);
}

.gantt-member:hover {
  transform: scale(1.15);
  z-index: 5;
}

.gantt-member .remove-btn {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: var(--color-white);
  border: none;
  font-size: 0.45rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.gantt-member:hover .remove-btn {
  display: flex;
}

/* Support Team Cell */
.gantt-support-cell {
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  min-height: 44px;
  justify-content: flex-start;
  transition: all var(--transition-fast);
}

.gantt-support-cell.empty::before {
  content: 'Drop support team here';
  color: var(--text-secondary);
  font-size: 0.65rem;
  font-style: italic;
  width: 100%;
  text-align: center;
}

.gantt-support-cell:not(.empty)::before {
  display: none;
}

.gantt-support-cell.drag-over {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.15);
}

/* Hours Cell */
.gantt-hours-cell {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding-right: var(--spacing-md);
}

.gantt-hours-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.gantt-hours-label {
  font-size: 0.6rem;
  color: var(--text-secondary);
}

/* Team Pool for Gantt (Right Side) */
.gantt-team-pool {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  height: fit-content;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  position: sticky;
  top: var(--spacing-lg);
  width: 260px;
  flex-shrink: 0;
}

.gantt-team-pool h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.gantt-team-pool h3 i {
  color: var(--color-orange);
}

/* Gantt + Team Pool Container */
.gantt-wrapper {
  display: flex;
  gap: var(--spacing-lg);
}

.gantt-main {
  flex: 1;
  overflow-x: auto;
}

/* No date indicator */
.gantt-no-date {
  font-size: 0.6rem;
  color: var(--color-red);
  font-style: italic;
  padding: 2px 6px;
  background: rgba(255, 59, 59, 0.1);
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 1200px) {
  .gantt-wrapper {
    flex-direction: column;
  }
  
  .gantt-team-pool {
    width: 100%;
    max-height: none;
    position: relative;
    top: 0;
    order: -1;
  }
  
  .gantt-grid {
    grid-template-columns: 160px 60px minmax(500px, 1fr) 160px 50px;
  }
}

@media (max-width: 900px) {
  .gantt-grid {
    grid-template-columns: 140px 50px minmax(400px, 1fr) 120px 45px;
    min-width: 700px;
  }
  
  .gantt-member {
    width: 24px;
    height: 24px;
    font-size: 0.5rem;
  }
}

/* ============================================
   GANTT V3 - FIXED LAYOUT
   Team Assignment SEPARATE from Timeline
   Layout: [Project | Leader | Support] | [Gantt 4-weeks] | [Hours]
   ============================================ */

.gantt-container-v3 {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 20px; /* Fixed padding for alignment */
  box-shadow: 0 4px 20px var(--shadow-color);
  overflow-x: auto;
  /* Smooth transition for squeeze effect */
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header with Navigation - ALIGNED with Team header */
.gantt-header-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
  height: 36px; /* Fixed height to prevent jumping when buttons appear/disappear */
  box-sizing: content-box; /* Border not included in height */
}

.gantt-title-v3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-display);
  font-size: 0.95rem; /* Match Team title */
  font-weight: 600;
  color: var(--text-primary);
}

.gantt-title-v3 i {
  color: var(--color-orange);
}

.gantt-week-nav-v3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.gantt-nav-btn-v3 {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.gantt-nav-btn-v3:hover {
  border-color: var(--color-red);
  color: var(--color-red);
  background: rgba(255, 59, 59, 0.1);
}

.gantt-current-period-v3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 180px;
  text-align: center;
}

/* Grid Layout - 5 Columns */
.gantt-grid-v3 {
  display: flex;
  flex-direction: column;
  min-width: 1000px;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Week navigation sliding animations */
.gantt-grid-v3.gantt-sliding {
  opacity: 0.5;
}
.gantt-grid-v3.gantt-sliding.slide-left {
  transform: translateX(-20px);
}
.gantt-grid-v3.gantt-sliding.slide-right {
  transform: translateX(20px);
}
.gantt-grid-v3.gantt-slide-in {
  animation: ganttSlideIn 0.3s ease-out;
}
.gantt-grid-v3.gantt-slide-in.from-right {
  animation: ganttSlideFromRight 0.3s ease-out;
}
.gantt-grid-v3.gantt-slide-in.from-left {
  animation: ganttSlideFromLeft 0.3s ease-out;
}

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

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

/* Header Row - LAYOUT MATCHING PRODUCTION */
/* Columns: Project | Status | Leader | Support | Timeline | Daily Hours | Breakdown | Cost | Total */
.gantt-header-row-v3 {
  display: grid;
  grid-template-columns: 120px 40px 60px 240px 1fr 42px 60px 55px 60px 60px;
  gap: 2px;
  background: var(--color-charcoal);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: 2px;
}

.gantt-header-row-v3 > div {
  background: var(--color-charcoal);
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
}

.gantt-header-row-v3 .gantt-col-project {
  border-radius: var(--radius-md) 0 0 0;
}

.gantt-header-row-v3 .gantt-col-hours {
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.gantt-header-row-v3 .gantt-col-breakdown {
  justify-content: center;
  font-size: 0.6rem;
}

.gantt-header-row-v3 .gantt-col-cost {
  justify-content: center;
  font-size: 0.6rem;
}

.gantt-header-row-v3 .gantt-col-total {
  justify-content: center;
  font-size: 0.6rem;
  background: var(--color-red);
}

.gantt-header-row-v3 .gantt-col-total-aed {
  border-radius: 0 var(--radius-md) 0 0;
  justify-content: center;
  font-size: 0.6rem;
  background: var(--color-purple);
}

.gantt-header-row-v3 .gantt-col-status {
  justify-content: center;
  font-size: 0.6rem;
}

.gantt-header-row-v3 .gantt-col-leader {
  justify-content: center;
}

.gantt-header-row-v3 .gantt-col-support {
  justify-content: center;
  font-size: 0.65rem;
  white-space: nowrap;
}

/* Timeline Header */
.gantt-timeline-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  width: 100%;
}

.gantt-week-col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xs);
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
}

.gantt-week-col-header.current-week {
  background: var(--color-red);
}

.gantt-week-col-header .week-num {
  font-size: 0.7rem;
  font-weight: 700;
}

/* Week range in ONE LINE: "Dec 8 - Dec 14" */
.gantt-week-col-header .week-range-single {
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.95;
}

/* 7 day numbers row - aligned with week cells below */
.gantt-week-col-header .week-days {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  font-size: 0.5rem;
  font-weight: 500;
  margin-top: 3px;
  width: calc(100% + 2 * var(--spacing-xs));
  margin-left: calc(-1 * var(--spacing-xs));
  margin-right: calc(-1 * var(--spacing-xs));
  padding: 0;
}

.gantt-week-col-header .week-days span {
  width: calc(100% / 7);
  flex: 0 0 calc(100% / 7);
  text-align: center;
  min-width: 12px;
  box-sizing: border-box;
}

/* Weekend days (Sat/Sun) - green text for non-working days */
.gantt-week-col-header .week-days span.weekend {
  color: #22a355;
  font-weight: 600;
}

/* Weekend in current week (red bg) - green text still visible */
.gantt-week-col-header.current-week .week-days span.weekend {
  color: #7DFF5C;
  font-weight: 600;
}

/* Today's date - just bold, NO box or background */
.gantt-week-col-header .week-days span.today {
  font-weight: 800;
}

/* Today in current week (red bg) - white bold, no box */
.gantt-week-col-header.current-week .week-days span.today {
  color: white;
  font-weight: 800;
}

/* Project Row - LAYOUT MATCHING PRODUCTION */
/* Columns: Project | Status | Leader | Support | Timeline | Daily Hours | Breakdown | Cost | Total RMB | Total AED */
.gantt-row-v3 {
  display: grid;
  grid-template-columns: 120px 40px 60px 240px 1fr 42px 60px 55px 60px 60px;
  gap: 2px;
  margin-bottom: 6px; /* More space between rows */
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.gantt-row-v3:hover {
  background: var(--bg-tertiary);
}

.gantt-row-v3.drag-over {
  background: rgba(255, 123, 44, 0.08);
  box-shadow: 0 0 0 2px var(--color-orange);
}

/* Column Cells - FIXED HEIGHT for all rows (+15% = 60px) */
.gantt-row-v3 > div {
  padding: var(--spacing-sm) var(--spacing-sm);
  display: flex;
  align-items: center;
  height: 60px; /* 15% more height for breathing room */
  min-height: 60px;
  max-height: 60px;
}

/* Project Column - 3-line layout with breathing room */
.gantt-row-v3 .gantt-col-project {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px; /* More space between lines */
  padding: 6px 10px;
  overflow: hidden;
}

.project-name-v3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* Never overflow column */
  width: 100%;
  line-height: 1.2;
}

.project-meta-v3 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap; /* Keep phase and date on same line */
  width: 100%;
}

.project-phase-v3 {
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.55rem;
  text-transform: uppercase;
  flex-shrink: 0;
}

.project-phase-v3.phase-pre { background: rgba(255, 51, 153, 0.15); color: #FF3399; }
.project-phase-v3.phase-cd { background: rgba(255, 59, 59, 0.15); color: #FF3B3B; }
.project-phase-v3.phase-sd { background: rgba(255, 123, 44, 0.15); color: #FF7B2C; }
.project-phase-v3.phase-dd { background: rgba(212, 184, 0, 0.15); color: #d4b800; }
.project-phase-v3.phase-wd { background: rgba(0, 102, 255, 0.15); color: #0066FF; }
.project-phase-v3.phase-construction { background: rgba(107, 51, 255, 0.15); color: #6B33FF; }
.project-phase-v3.phase-completed { background: rgba(34, 163, 85, 0.15); color: #22a355; }

.project-date-v3 {
  font-size: 0.6rem;
  color: var(--color-blue);
  white-space: nowrap;
}

.project-date-v3 i {
  margin-right: 2px;
  font-size: 0.5rem;
}

.gantt-no-date-v3 {
  font-size: 0.55rem;
  color: var(--color-red);
  font-style: italic;
  white-space: nowrap;
}

/* Clickable delivery date text - same picker as marker */
.clickable-delivery-date {
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 3px;
  padding: 1px 3px;
  margin: -1px -3px;
}

.clickable-delivery-date:hover {
  background: rgba(25, 154, 204, 0.15);
  text-decoration: underline;
}

.gantt-no-date-v3.clickable-delivery-date:hover {
  background: rgba(255, 59, 59, 0.15);
}

.project-location-v3 {
  font-size: 0.6rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.project-location-v3 i {
  margin-right: 2px;
  font-size: 0.5rem;
}

/* Status Column - Dropdown */
.gantt-row-v3 .gantt-col-status {
  justify-content: center;
  padding: var(--spacing-xs);
}

.status-dropdown {
  width: 100%;
  max-width: 38px;
  padding: 3px 2px;
  font-size: 0.55rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1px center;
  padding-right: 8px;
  transition: all 0.15s ease;
}

/* Default: grayscale dropdown */
.status-dropdown {
  background-color: #e5e7eb;
  color: #374151;
}

/* Dropdown options: all grayscale */
.status-dropdown option {
  background-color: #f3f4f6;
  color: #374151;
}

/* Status colors - SOFT PASTEL (matches Labor Cost tab) */
/* ACTIVE → soft green */
.status-dropdown.status-active {
  background: rgba(125, 255, 92, 0.15);
  color: #5cb85c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
}

/* ON TRACK → soft blue */
.status-dropdown.status-on-track {
  background: rgba(0, 102, 255, 0.15);
  color: #0066FF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%230066FF' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
}

/* AWAITING → soft orange */
.status-dropdown.status-awaiting {
  background: rgba(255, 165, 0, 0.15);
  color: #FF7B2C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23FF7B2C' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
}

/* STAND BY → soft grey */
.status-dropdown.status-standby {
  background: rgba(150, 150, 150, 0.15);
  color: #888;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23888' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
}

/* COMPLETED → soft green (same as Labor Cost) */
.status-dropdown.status-completed {
  background: rgba(34, 163, 85, 0.15);
  color: #22a355;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%2322a355' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
}

/* TERMINATED → soft red */
.status-dropdown.status-terminated {
  background: rgba(255, 59, 59, 0.15);
  color: #FF3B3B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23FF3B3B' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
}

/* OTHER → soft grey */
.status-dropdown.status-other {
  background: rgba(150, 150, 150, 0.15);
  color: #888;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23888' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
}

/* Inactive project row styling */
.gantt-row-v3.project-inactive {
  opacity: 0.6;
}

.gantt-row-v3.project-inactive .leader-drop-zone-v3,
.gantt-row-v3.project-inactive .support-drop-zone-v3 {
  background: var(--bg-tertiary);
  border-style: dotted;
  cursor: not-allowed;
}

.gantt-row-v3.project-inactive .leader-drop-zone-v3.disabled,
.gantt-row-v3.project-inactive .support-drop-zone-v3.disabled {
  pointer-events: none;
}

/* Show All Projects button active state */
.gantt-nav-btn-v3.active {
  background: var(--color-orange);
  color: white;
}

/* Leader Column - COMPACT */
.gantt-row-v3 .gantt-col-leader {
  justify-content: center;
  padding: var(--spacing-xs);
}

.leader-drop-zone-v3 {
  width: 46px;
  height: 46px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  transition: all var(--transition-fast);
}

.leader-drop-zone-v3.empty .drop-hint {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

.leader-drop-zone-v3.drag-over {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.15);
}

/* Support Column - COMPACT with horizontal scroll for 4+ members */
.gantt-row-v3 .gantt-col-support {
  justify-content: flex-start;
  padding: var(--spacing-xs);
  overflow: visible;
}

.support-drop-zone-v3 {
  width: 100%;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  overflow: hidden;
  overflow-x: auto;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 5px 8px;
  background: var(--bg-tertiary);
  transition: all var(--transition-fast);
  /* Scrollbar styling for support drop zone */
  scrollbar-width: thin;
  scrollbar-color: var(--color-orange) var(--bg-secondary);
}

.support-drop-zone-v3::-webkit-scrollbar {
  height: 4px;
}

.support-drop-zone-v3::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 2px;
}

.support-drop-zone-v3::-webkit-scrollbar-thumb {
  background: var(--color-orange);
  border-radius: 2px;
}

.support-drop-zone-v3::-webkit-scrollbar-thumb:hover {
  background: var(--color-red);
}

.support-drop-zone-v3.empty .drop-hint {
  color: var(--text-secondary);
  font-size: 0.55rem;
  font-style: italic;
  width: 100%;
  text-align: center;
}

.support-drop-zone-v3.drag-over {
  border-color: var(--color-orange);
  background: rgba(255, 123, 44, 0.15);
}

/* Team Member Badge - 32px like production */
/* Double-click to view/edit hour allocation */
.gantt-member-v3 {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--color-white);
  cursor: grab;
  position: relative;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

/* Hint on hover that double-click shows allocation */
.gantt-member-v3:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gantt-member-v3:active,
.gantt-member-v3.dragging {
  cursor: grabbing;
}

.gantt-member-v3.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
}

.gantt-member-v3.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B);
}

.gantt-member-v3.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF);
}

.gantt-member-v3:hover {
  transform: scale(1.15);
  z-index: 5;
}

.remove-btn-v3 {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: var(--color-white);
  border: none;
  font-size: 0.5rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Hide remove button when dragging to prevent interference */
.gantt-member-v3.dragging .remove-btn-v3 {
  display: none !important;
}

.gantt-member-v3:hover .remove-btn-v3 {
  display: flex;
}

/* Timeline Column */
.gantt-row-v3 .gantt-col-timeline {
  padding: var(--spacing-xs);
}

/* Wrapper to contain both the duration bar and the grid */
.gantt-timeline-wrapper {
  position: relative;
  width: 100%;
  min-height: 56px;
}

.gantt-timeline-v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  min-height: 52px;
}

/* Week Cell - VISUAL ONLY, NO DRAG-DROP */
.gantt-week-cell-v3 {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  position: relative;
  min-height: 44px;
  border: 1px solid var(--border-color);
}

.gantt-week-cell-v3.current-week {
  background: rgba(255, 59, 59, 0.08);
  border-color: rgba(255, 59, 59, 0.3);
}

/* Duration Bar - Visual Project Timeline */
/* Bar is positioned absolutely within .gantt-timeline-wrapper */
.duration-bar-v3 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 14px;
  border-radius: 7px;
  opacity: 0.85;
  z-index: 10;
  pointer-events: none;
}

.duration-bar-v3.phase-pre { background: linear-gradient(90deg, #FF3399, #FF66B2); }
.duration-bar-v3.phase-cd { background: linear-gradient(90deg, #FF3B3B, #FF6B6B); }
.duration-bar-v3.phase-sd { background: linear-gradient(90deg, #FF7B2C, #FFAA66); }
.duration-bar-v3.phase-dd { background: linear-gradient(90deg, #d4b800, #FFDD55); }
.duration-bar-v3.phase-wd { background: linear-gradient(90deg, #0066FF, #66A3FF); }
.duration-bar-v3.phase-construction { background: linear-gradient(90deg, #6B33FF, #9966FF); }
.duration-bar-v3.phase-completed { background: linear-gradient(90deg, #22a355, #66D98A); }

/* Phase-segmented bar container for Resources timeline */
.phase-bar-container-v3 {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 14px;
  background: transparent;
  border-radius: 7px;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
}

.phase-segment-v3 {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 7px;
  opacity: 0.85;
  z-index: 6;
  pointer-events: none;
}

/* Delivery Marker V3 */
.gantt-delivery-marker-v3 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gantt-delivery-marker-v3:hover {
  transform: scale(1.2);
}

.gantt-delivery-marker-v3:hover .marker-flag {
  filter: brightness(1.2);
}

/* Delivery Date Picker Popup */
.delivery-date-picker {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 240px;
  overflow: hidden;
  animation: pickerSlideIn 0.2s ease-out;
}

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

.delivery-picker-header {
  background: var(--color-charcoal);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

/* Hide header for .no-header variant - cleaner minimal look */
.delivery-date-picker.no-header .delivery-picker-header {
  display: none;
}

.delivery-picker-title {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.delivery-picker-project {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.delivery-picker-body {
  padding: 16px;
}

/* Project name label inside body (for no-header variant) */
.delivery-picker-project-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.delivery-picker-body label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.delivery-picker-body input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
}

.delivery-picker-body input[type="date"]:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.2);
}

.delivery-picker-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.delivery-picker-cancel,
.delivery-picker-save {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delivery-picker-cancel {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.delivery-picker-cancel:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.delivery-picker-save {
  background: var(--color-red);
  color: white;
}

.delivery-picker-save:hover {
  background: #e53535;
  transform: translateY(-1px);
}

/* Notification animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.gantt-delivery-marker-v3 .marker-flag {
  width: 0;
  height: 0;
  border-left: 8px solid var(--color-red);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.gantt-delivery-marker-v3 .marker-line {
  width: 3px;
  flex: 1;
  background: var(--color-red);
  box-shadow: 0 0 8px rgba(255, 59, 59, 0.5);
}

.gantt-delivery-marker-v3::after {
  content: attr(data-date);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--color-red);
  white-space: nowrap;
  background: var(--bg-primary);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Daily Hours Column */
.gantt-row-v3 .gantt-col-hours {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--spacing-xs);
}

.hours-value-v3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.hours-label-v3 {
  font-size: 0.55rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Seniority Breakdown Column - ALIGNED with Cost column */
.gantt-row-v3 .gantt-col-breakdown {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 4px 6px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 14px;
  line-height: 14px;
}

.breakdown-item .level {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 0.5rem;
  min-width: 22px;
}

.breakdown-item .hrs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6rem;
  text-align: right;
}

.breakdown-item.senior .hrs { color: #e85d04; }
.breakdown-item.mid .hrs { color: #0066FF; }
.breakdown-item.junior .hrs { color: #047857; }  /* Darker green for legibility */

/* Cost Column - ALIGNED with Breakdown column */
.gantt-row-v3 .gantt-col-cost {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 4px 6px;
}

.cost-item {
  height: 14px;
  line-height: 14px;
  font-size: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-align: right;
}

.cost-item.senior { color: #e85d04; }
.cost-item.mid { color: #0066FF; }
.cost-item.junior { color: #047857; }

/* Total Column (RMB) */
.gantt-row-v3 .gantt-col-total {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: rgba(255, 59, 59, 0.05);
  border-left: 2px solid rgba(255, 59, 59, 0.2);
}

.total-cost-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-red);
}

/* Total AED Column */
.gantt-row-v3 .gantt-col-total-aed {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: rgba(139, 92, 246, 0.05);
  border-left: 2px solid rgba(139, 92, 246, 0.2);
}

.total-cost-value-aed {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--color-purple);
}

/* Footer Row - Grand Totals - Same height as project rows */
.gantt-footer-row {
  display: grid;
  grid-template-columns: 120px 60px 280px 1fr 42px 60px 55px 60px 60px;
  gap: 2px;
  margin-top: 12px; /* Space between chart and totals */
  padding: 0 4px;
  border: none;
  background: #e5e7eb; /* Lighter grey */
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gantt-footer-row > div {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  height: 60px; /* Same height as project rows */
  min-height: 60px;
  max-height: 60px;
}

.gantt-footer-row .footer-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--color-charcoal); /* Black instead of red */
  font-weight: 700; /* Bold */
  text-transform: uppercase;
}

.gantt-footer-row .footer-hours {
  justify-content: center;
}

.gantt-footer-row .footer-hours .hours-value-v3 {
  font-size: 0.85rem;
  color: var(--color-charcoal); /* Black instead of red */
  font-weight: 700;
}

.gantt-footer-row .footer-breakdown {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.gantt-footer-row .footer-cost {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.gantt-footer-row .footer-total {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent; /* No red box */
  border-radius: 0;
}

.grand-total-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-charcoal); /* Black bold instead of white on red */
}

.gantt-footer-row .footer-total-aed {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
}

.grand-total-value-aed {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-purple);
}

/* Today Line in Current Week */
.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #22c55e;
  z-index: 8;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  pointer-events: none; /* Allow mouse events to pass through to day cells */
}

/* Today indicator in header - NO BOX, just bold */
/* Removed green border - user requested no box */

/* Responsive */
@media (max-width: 1200px) {
  .gantt-header-row-v3,
  .gantt-row-v3,
  .gantt-footer-row {
    grid-template-columns: 100px 55px 220px 1fr 38px 52px 48px 55px;
  }
  
  .gantt-grid-v3 {
    min-width: 900px;
  }
  
  .gantt-member-v3 {
    width: 28px;
    height: 28px;
    font-size: 0.6rem;
  }
}

@media (max-width: 900px) {
  .gantt-header-row-v3,
  .gantt-row-v3,
  .gantt-footer-row {
    grid-template-columns: 90px 50px 180px 1fr 35px 48px 45px 50px;
  }
  
  .gantt-grid-v3 {
    min-width: 850px;
  }
  
  .gantt-member-v3 {
    width: 26px;
    height: 26px;
    font-size: 0.55rem;
  }
  
  .leader-drop-zone-v3,
  .support-drop-zone-v3 {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
  }
  
  .breakdown-item, .cost-item {
    font-size: 0.5rem;
  }
  
  .total-cost-value, .grand-total-value {
    font-size: 0.65rem;
  }
}

/* ============================================
   PROJECT PHASES EDITOR (Projects Tab)
   ============================================ */

/* Timeline row that expands under project row */
.project-timeline-row {
  background: var(--bg-secondary);
}

.project-timeline-row > td {
  padding: 0 !important;
  border-top: 1px dashed var(--border-color);
}

.project-timeline-container {
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--card-bg) 100%);
  overflow: visible;
}

.timeline-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
}

.timeline-error {
  text-align: center;
  padding: 20px;
  color: #ef4444;
}

/* Phase Editor Container */
.phase-editor {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.phase-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.phase-editor-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.phase-editor-header h4 i {
  color: var(--accent-primary);
}

.phase-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Visual Timeline Bar */
.phase-timeline-visual {
  margin-bottom: 20px;
}

.timeline-bar-container {
  position: relative;
}

.timeline-bar {
  position: relative;
  height: 24px;
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.timeline-segment {
  position: absolute;
  top: 4px;
  height: 16px;
  border-radius: 8px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.timeline-segment:hover {
  opacity: 1;
}

.timeline-today-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 10;
}

.timeline-today-marker .today-line {
  width: 2px;
  height: 100%;
  background: var(--accent-primary);
}

.timeline-dates {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.timeline-placeholder {
  text-align: center;
  padding: 12px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-style: italic;
}

/* Phase List */
.phase-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.no-phases-message {
  text-align: center;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.no-phases-message i {
  margin-right: 8px;
  color: var(--accent-warning);
}

/* Phase Row */
.phase-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  transition: background 0.2s;
}

.phase-row:hover {
  background: var(--bg-hover);
}

.phase-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.phase-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  min-width: 120px;
}

.phase-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.date-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.date-field label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.phase-date-input {
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.8rem;
  width: 130px;
}

.phase-date-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.1);
}

.date-arrow {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.phase-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.phase-status.status-planned {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.phase-status.status-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.phase-status.status-completed {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.btn-remove-phase {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s;
}

.btn-remove-phase:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Add Phase Row */
.add-phase-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.add-phase-select {
  flex: 1;
  padding: 8px 12px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
}

.add-phase-select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.btn-add-phase {
  padding: 8px 16px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-add-phase:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* ============================================ */
/* EXPANDED FIELD ROW - Compact CRM-aligned    */
/* ============================================ */

.expanded-field-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  overflow-y: visible;
  align-items: flex-end;
  /* Ensure USD field is visible */
  min-width: 0;
}

.ef-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.ef-field label {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-tertiary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}

.ef-field label i {
  font-size: 0.5rem;
  color: #f59e0b;
}

.ef-field.readonly label {
  color: #22a355;
}

.ef-field.readonly label i {
  color: #22a355;
}

/* Field widths - COMPACT for single row (reduced to fit USD) */
.ef-tracking { min-width: 55px; max-width: 70px; }

/* Tracking icon in label */
.tracking-active-icon {
  color: #22c55e;
  font-size: 0.55rem;
  margin-left: 2px;
}

/* Tracking toggle row - aligns toggle with other input fields */
.ef-tracking-row {
  display: flex;
  align-items: center;
  height: 28px; /* Match input field height */
}
.ef-name-wide { min-width: 150px; max-width: 220px; flex: 2; }
.ef-alias { min-width: 60px; max-width: 85px; }
.ef-office { min-width: 70px; max-width: 85px; }
.ef-location { min-width: 70px; max-width: 95px; }
.ef-category { min-width: 75px; max-width: 95px; }
.ef-typology { min-width: 80px; max-width: 100px; }
.ef-date { min-width: 90px; max-width: 100px; }
.ef-m2 { min-width: 45px; max-width: 58px; }
.ef-payment { min-width: 90px; max-width: 115px; }
.ef-fee-rmb { min-width: 55px; max-width: 68px; }
.ef-fee-aed { min-width: 55px; max-width: 68px; }
.ef-fee-usd { min-width: 55px; max-width: 68px; }

/* Tracking toggle in expanded row */
.ef-tracking-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.ef-tracking-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider-sm {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 20px;
  transition: 0.3s;
}

.toggle-slider-sm:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

.ef-tracking-toggle input:checked + .toggle-slider-sm {
  background-color: #22c55e;
}

.ef-tracking-toggle input:checked + .toggle-slider-sm:before {
  transform: translateX(16px);
}

/* USD fee field styling */
.ef-fee-usd .ef-fee-val {
  color: #22a355;
}

/* Inputs and selects */
.ef-input, .ef-select {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.75rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 100%;
  height: 28px;
  box-sizing: border-box;
}

.ef-input:focus, .ef-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(255, 123, 44, 0.15);
}

.ef-date-input {
  font-size: 0.7rem;
}

.ef-number {
  text-align: right;
  font-family: var(--font-mono);
}

/* Read-only value display */
.ef-value {
  padding: 5px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  height: 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ef-field.readonly .ef-value {
  background: rgba(34, 163, 85, 0.05);
  border-color: rgba(34, 163, 85, 0.2);
}

/* Fee value display - compact and read-only */
.ef-fee-val {
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-mono);
  text-align: right;
  justify-content: flex-end;
}

.ef-fee-rmb .ef-fee-val {
  color: #dc2626;
}

.ef-fee-aed .ef-fee-val {
  color: var(--color-purple);
}

/* Compact selects */
.ef-select {
  font-size: 0.7rem;
  padding: 4px 6px;
}

/* Responsive: Allow horizontal scroll on smaller screens */
@media (max-width: 1400px) {
  .expanded-field-row {
    padding: 8px 8px;
    gap: 4px;
  }
  
  .ef-name { min-width: 90px; max-width: 120px; }
  .ef-alias { min-width: 50px; max-width: 70px; }
  .ef-location { min-width: 60px; max-width: 80px; }
  .ef-category { min-width: 65px; max-width: 80px; }
  .ef-typology { min-width: 70px; max-width: 90px; }
  .ef-payment { min-width: 75px; max-width: 95px; }
  .ef-fee-rmb, .ef-fee-aed { min-width: 55px; max-width: 70px; }
  .ef-input, .ef-select { font-size: 0.65rem; padding: 3px 5px; }
}

/* Phase Editor Footer */
.phase-editor-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.btn-save-phases {
  padding: 10px 20px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-save-phases:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Expand button in actions column */
.expand-btn {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
}

.expand-btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--accent-primary) !important;
}

.expand-btn i {
  transition: transform 0.2s;
}

.project-row.expanded .expand-btn i {
  transform: rotate(180deg);
}

/* ============================================
   NEW 7-SEGMENT PHASE TIMELINE EDITOR
   ============================================ */

/* Timeline Bar Container */
.phase-timeline-bar-container {
  margin-bottom: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 12px;
}

/* Two-bar layout */
.timeline-bar-section {
  margin-bottom: 16px;
}

.timeline-bar-section:last-child {
  margin-bottom: 0;
}

.timeline-bar-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding-left: 4px;
}

/* Equal Segments Layout (Default - Before Apply) */
.phase-timeline-equal {
  display: flex;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  gap: 2px;
}

.phase-segment-equal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.phase-segment-equal:hover {
  opacity: 1 !important;
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.phase-segment-equal .segment-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.phase-segment-equal .segment-date-hint {
  font-size: 0.5rem;
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
}

.phase-segment-equal.cancelled {
  background: #d1d5db !important;
  opacity: 0.6 !important;
}

.phase-segment-equal.cancelled .segment-label {
  color: #6b7280;
  text-shadow: none;
}

/* Phases with dates set - solid color, full opacity, checkmark indicator */
.phase-segment-equal.has-data {
  opacity: 1 !important;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25);
}

.phase-segment-equal.has-data::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.5rem;
  color: rgba(255,255,255,0.8);
}

/* Phases without dates - lighter/faded appearance */
.phase-segment-equal:not(.has-data):not(.cancelled) {
  opacity: 0.4 !important;
}

/* Date Markers Row */
.phase-date-markers {
  display: flex;
  margin-top: 6px;
}

.date-marker {
  font-size: 0.6rem;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* Completed Goal Segment */
.phase-segment-goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  border-radius: 4px;
  cursor: default;
  border-left: 2px dashed #9ca3af;
}

.phase-segment-goal i {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-bottom: 2px;
}

.phase-segment-goal .segment-label {
  font-size: 0.55rem;
  font-weight: 700;
  color: #9ca3af;
}

.phase-segment-goal.completed {
  background: linear-gradient(135deg, #22a355 0%, #16a34a 100%);
}

.phase-segment-goal.completed i,
.phase-segment-goal.completed .segment-label {
  color: white;
}

/* Goal label in date row */
.date-label-top.completed-goal .goal-label {
  font-size: 0.55rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
}

/* Proportional Timeline Wrapper (for markers) */
.phase-timeline-proportional-wrapper {
  position: relative;
  margin-top: 4px;
}

/* Proportional Timeline (After Apply) */
.phase-timeline-proportional {
  display: flex;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-tertiary);
}

/* Today Marker - Green solid line with circle on top */
.timeline-today-marker {
  position: absolute;
  top: -6px; /* Circle sits on top of timeline */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.timeline-today-marker .today-circle {
  width: 12px;
  height: 12px;
  background: #22a355;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.timeline-today-marker .today-line {
  width: 2px;
  height: 32px; /* Height of timeline bar */
  background: #22a355;
  flex-shrink: 0;
}

.timeline-today-marker .today-label-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  white-space: nowrap;
  height: 14px; /* Fixed height to fit in gap */
}

.timeline-today-marker .today-text {
  font-size: 0.55rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

.timeline-today-marker .today-date {
  font-size: 0.55rem;
  font-weight: 600;
  color: #ef4444;
  line-height: 1;
}

/* Delivery Date Marker - Grey solid line with circle on top */
.timeline-delivery-marker {
  position: absolute;
  top: -6px; /* Circle sits on top of timeline */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9;
  pointer-events: none;
}

.timeline-delivery-marker .delivery-circle {
  width: 12px;
  height: 12px;
  background: #6b7280;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.timeline-delivery-marker .delivery-line {
  width: 2px;
  height: 32px; /* Same height as timeline bar */
  background: #6b7280;
  flex-shrink: 0;
}

.timeline-delivery-marker .delivery-label-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  white-space: nowrap;
  height: 14px; /* Fixed height to fit in gap */
}

.timeline-delivery-marker .delivery-text {
  font-size: 0.55rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

.timeline-delivery-marker .delivery-date {
  font-size: 0.55rem;
  font-weight: 600;
  color: #ef4444;
  line-height: 1;
}

/* No timeline hint */
.no-timeline-hint {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8rem;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.no-timeline-hint i {
  margin-right: 6px;
}

.phase-segment-proportional {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 24px;
}

.phase-segment-proportional:hover {
  opacity: 0.85;
  transform: scaleY(1.1);
  z-index: 2;
}

.phase-segment-proportional.current {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent-primary);
}

.phase-segment-proportional.future {
  opacity: 0.7;
}

.phase-segment-proportional.cancelled {
  opacity: 0.5;
}

.phase-segment-proportional .segment-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Gap Segment */
.phase-segment-gap {
  background: #d1d5db;
  min-width: 4px;
}

/* Date Range Display */
.phase-date-range {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.65rem;
  color: var(--text-secondary);
}

/* Phase Details List */
.phase-details-list {
  margin-bottom: 12px;
  max-height: 150px;
  overflow-y: auto;
}

.no-phases-hint {
  text-align: center;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.no-phases-hint i {
  margin-right: 6px;
  color: var(--accent-warning);
}

.phase-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  margin-bottom: 4px;
}

.phase-detail-row.future {
  opacity: 0.6;
}

.phase-detail-row.cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}

.phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.phase-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 120px;
}

.phase-dates-display {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-left: auto;
}

/* Phase Editor needs relative positioning for popup */
.phase-editor {
  position: relative;
}

/* Phase Edit Popup Overlay - blocks background completely */
.phase-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  z-index: 99998;
  display: none;
  cursor: pointer;
}

.phase-popup-overlay.active {
  display: block;
}

/* Phase Edit Popup */
.phase-edit-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.4);
  z-index: 99999;
  width: 300px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.phase-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.phase-popup-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 10px;
}

.popup-phase-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.phase-popup-close {
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s;
  font-size: 1rem;
}

.phase-popup-close:hover {
  background: #fee2e2;
  color: #ef4444;
}

.phase-popup-body {
  padding: 20px;
  background: #ffffff;
}

.popup-field {
  margin-bottom: 16px;
}

.popup-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.popup-date-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.popup-date-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Duration Display in Popup */
.popup-duration-display {
  margin-top: 8px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.duration-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: center;
  font-style: italic;
}

.duration-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.duration-label {
  font-size: 0.7rem;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 600;
}

.duration-value {
  font-size: 0.8rem;
  color: #374151;
  font-weight: 500;
}

.duration-bar-visual {
  margin-bottom: 8px;
}

.duration-weeks-container {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  align-items: center;
}

.duration-week-block {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.85;
}

.duration-more {
  font-size: 0.65rem;
  color: #6b7280;
  margin-left: 4px;
}

.duration-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.duration-dates {
  font-size: 0.7rem;
  color: #6b7280;
}

.duration-total {
  font-size: 0.8rem;
}

/* Removed checkbox-field - using buttons now */

.phase-popup-footer {
  padding: 14px 20px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.btn-popup-cancel-phase {
  padding: 8px 14px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-popup-cancel-phase:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.btn-popup-reactivate {
  padding: 8px 14px;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-popup-reactivate:hover {
  background: #dcfce7;
  border-color: #86efac;
}

.btn-popup-apply {
  padding: 10px 24px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  margin-left: auto;
}

.btn-popup-apply:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

/* Apply Button - GREEN */
.btn-apply-phases {
  padding: 12px 28px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.btn-apply-phases:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

/* Delete Project Button - RED, positioned left */
.btn-delete-project {
  padding: 10px 20px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  margin-right: auto; /* Push to left */
}

.btn-delete-project:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* Phase bar row - expand removed, uses full width */
.phase-bar-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Legacy: phase-expand-btn removed from UI */

/* Date labels on TOP of segments */
.phase-date-labels-top {
  display: flex;
  margin-bottom: 4px;
}

.date-label-top {
  text-align: center;
  font-size: 0.65rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  padding: 0 2px;
}

.date-label-top .date-range {
  display: inline-block;
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.6rem;
  color: var(--text-primary);
}

/* Current phase highlight */
.phase-segment-equal.current {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent-primary);
  z-index: 2;
}

/* Phase Editor Footer - Updated */
.phase-editor-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  gap: 8px;
}

/* ============================================ */
/* PROJECT COSTS TAB STYLES                     */
/* (Now renamed to Labor Cost)                  */
/* ============================================ */

/* Project Cost Container */
.project-cost-container {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

/* ============================================ */
/* LABOR COST TABLE HEADER & COLUMNS            */
/* ============================================ */

/* Fixed table header - dark background, single line */
.labor-cost-table-header {
  display: flex;
  align-items: center;
  background: #1a1a1a;
  color: #ffffff;
  padding: 14px 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2px solid #333;
  white-space: nowrap; /* Prevent header text wrapping */
}

[data-theme="dark"] .labor-cost-table-header {
  background: #0a0a0a;
  border-bottom-color: #444;
}

/* Table body container */
.labor-cost-table-body {
  max-height: none; /* No fixed height - container handles scrolling */
}

/* Column definitions - shared between header and rows */
.labor-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  white-space: nowrap; /* Prevent wrapping in all columns */
}

.labor-col-expand {
  width: 36px;
  justify-content: center;
}

.labor-col-name {
  flex: 1;
  min-width: 160px;
  padding-right: 16px;
}

.labor-col-status {
  width: 72px;
  justify-content: center;
  padding: 0 8px;
}

.labor-col-phase {
  width: 64px;
  min-width: 64px; /* Fixed width - must contain badge with padding */
  justify-content: center;
  padding: 0 12px;
  margin-right: 16px; /* Explicit gap after PHASE column */
}

.labor-col-today-hours {
  width: 88px;
  justify-content: flex-end;
  padding: 0 16px 0 0; /* Left padding removed - gap handled by PHASE margin */
}

.labor-col-today-cost {
  width: 96px;
  justify-content: flex-end;
  padding: 0 24px 0 8px; /* Extra right padding to separate from H. This Month */
}

.labor-col-month-hours {
  width: 108px;
  justify-content: flex-end;
  padding: 0 16px 0 12px; /* Extra left padding for separation */
}

.labor-col-total-hours {
  width: 96px;
  justify-content: flex-end;
  padding: 0 16px 0 8px;
}

.labor-col-total-cost {
  width: 96px;
  justify-content: flex-end;
  padding-left: 8px;
}

/* TOTAL AED column - secondary display column */
.labor-col-total-aed {
  width: 96px;
  justify-content: flex-end;
  padding-left: 8px;
  color: #6b7280; /* Slightly lighter grey - subordinate to RMB */
}

/* Row styling for table layout */
.labor-table-row {
  display: flex;
  align-items: center;
  padding: 12px 20px !important;
  gap: 0 !important;
}

/* Numeric columns in rows - right aligned */
.labor-table-row .labor-col-today-hours,
.labor-table-row .labor-col-today-cost,
.labor-table-row .labor-col-month-hours,
.labor-table-row .labor-col-total-hours,
.labor-table-row .labor-col-total-cost,
.labor-table-row .labor-col-total-aed {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
}

/* TOTAL AED secondary styling - lighter color */
.labor-table-row .labor-col-total-aed {
  color: #6b7280;
}

/* Not tracked styling */
.cost-not-tracked {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.7rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Ensure project name doesn't overflow */
.labor-table-row .cost-project-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================ */
/* EXPANDED ROW ALIGNMENT                       */
/* Aligns Phase/Week/Day/Employee hours & cost  */
/* under TOTAL HOURS and TOTAL COST columns     */
/* ============================================ */

/* Expanded row layout - two sections */
.labor-expanded-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Left section: expand icon + name/label */
.labor-expanded-left {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 0; /* Allow text truncation */
}

/* Right section: hours + cost aligned to columns */
.labor-expanded-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
}

/* Hours column - matches TOTAL HOURS width */
.labor-expanded-hours {
  width: 96px;
  text-align: right;
  padding: 0 16px 0 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* Cost column - matches TOTAL COST width */
.labor-expanded-cost {
  width: 96px;
  text-align: right;
  padding-left: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* AED column - matches TOTAL AED width (secondary display) */
.labor-expanded-aed {
  width: 96px;
  text-align: right;
  padding-left: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  color: #6b7280; /* Slightly lighter grey - subordinate to RMB */
}

/* Project Row */
.cost-project-row {
  border-bottom: 1px solid var(--border-color);
}

.cost-project-row:last-child {
  border-bottom: none;
}

.cost-project-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  transition: background 0.2s;
  gap: var(--spacing-md);
}

.cost-project-header:hover {
  background: var(--bg-tertiary);
}

.cost-expand-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.cost-project-row.expanded > .cost-project-header .cost-expand-icon {
  transform: rotate(90deg);
}

.cost-project-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  flex: 1;
}

.cost-project-phase {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.cost-project-phase.phase-pre { background: rgba(255, 51, 153, 0.15); color: #FF3399; }
.cost-project-phase.phase-cd { background: rgba(255, 59, 59, 0.15); color: #FF3B3B; }
.cost-project-phase.phase-sd { background: rgba(255, 123, 44, 0.15); color: #FF7B2C; }
.cost-project-phase.phase-dd { background: rgba(255, 221, 0, 0.15); color: #d4b800; }
.cost-project-phase.phase-wd { background: rgba(0, 102, 255, 0.15); color: #0066FF; }
.cost-project-phase.phase-construction { background: rgba(107, 51, 255, 0.15); color: #6B33FF; }
.cost-project-phase.phase-completed { background: rgba(34, 163, 85, 0.15); color: #22a355; }

/* Status badge in cost rows */
.cost-project-status {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cost-project-status.status-active { background: rgba(125, 255, 92, 0.15); color: #5cb85c; }
.cost-project-status.status-standby { background: rgba(150, 150, 150, 0.15); color: #888; }
.cost-project-status.status-completed { background: rgba(34, 163, 85, 0.15); color: #22a355; }
.cost-project-status.status-terminated { background: rgba(255, 59, 59, 0.15); color: #FF3B3B; }
.cost-project-status.status-on-track { background: rgba(0, 102, 255, 0.15); color: #0066FF; }
.cost-project-status.status-awaiting-approval { background: rgba(255, 165, 0, 0.15); color: #FF7B2C; }

/* Tracked projects - highlighted darker background */
.cost-project-row.cost-project-tracked {
  background: rgba(25, 154, 204, 0.08);
  border-left: 3px solid #199ACC;
}

.cost-project-row.cost-project-tracked > .cost-project-header:hover {
  background: rgba(25, 154, 204, 0.12);
}

/* No members message */
.cost-no-members {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85rem;
}

/* Project info container - holds name and phase */
.cost-project-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
}

/* Cost amount container - holds label and value */
.cost-project-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 140px;
}

.cost-amount-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cost-amount-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: #199ACC;
}

/* Placeholder for expand icon (untracked projects) */
.cost-expand-placeholder {
  visibility: hidden;
}

/* Static header (no hover effect for untracked) */
.cost-project-header-static {
  cursor: default;
}

.cost-project-header-static:hover {
  background: transparent;
}

/* Members line for untracked projects */
.cost-project-members {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-lg) var(--spacing-sm);
  padding-left: calc(var(--spacing-lg) + 40px);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.cost-project-members i {
  font-size: 0.75rem;
}

/* Team content for untracked projects (expandable) */
.cost-project-team-content {
  display: none;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-left: calc(var(--spacing-lg) + 40px);
  background: var(--bg-tertiary);
}

.cost-project-untracked.expanded > .cost-project-team-content {
  display: block;
}

.cost-project-untracked.expanded > .cost-project-header .cost-expand-icon {
  transform: rotate(90deg);
}

/* Team circles container */
.cost-team-circles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* Individual member circle */
.cost-member-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
}

.cost-member-circle .circle-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #199ACC, #0066FF);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-display);
}

/* Studio colors for cost member circles */
.cost-member-circle.studio-shanghai .circle-initials {
  background: #3CACC6;
}

.cost-member-circle.studio-dubai .circle-initials {
  background: linear-gradient(135deg, #FF7B2C, #FF3B3B);
}

.cost-member-circle.studio-riyadh .circle-initials {
  background: linear-gradient(135deg, #6B33FF, #9955FF);
}

.cost-member-circle .circle-name {
  font-size: 0.75rem;
  color: var(--text-secondary);
  max-width: 60px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Legacy total (keep for backward compat) */
.cost-project-total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: #199ACC;
  min-width: 120px;
  text-align: right;
}

/* Phase Content (Project → Phase hierarchy) */
.cost-phase-content {
  display: none;
  background: var(--bg-tertiary);
}

.cost-project-row.expanded > .cost-phase-content {
  display: block;
}

.cost-phase-row {
  border-bottom: 1px solid var(--border-color);
}

.cost-phase-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  padding-left: calc(var(--spacing-lg) + 40px);
  padding-right: 20px; /* Align with header padding */
  cursor: pointer;
  transition: background 0.2s;
}

.cost-phase-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.cost-phase-row.expanded > .cost-phase-header .cost-expand-icon {
  transform: rotate(90deg);
}

.cost-phase-name {
  font-weight: 600;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.cost-phase-name i {
  margin-right: 4px;
}

/* Phase color coding */
.cost-phase-name.phase-pre { background: rgba(153, 153, 153, 0.2); color: #999; }
.cost-phase-name.phase-cd { background: rgba(255, 59, 59, 0.15); color: #FF3B3B; }
.cost-phase-name.phase-sd { background: rgba(255, 123, 44, 0.15); color: #FF7B2C; }
.cost-phase-name.phase-dd { background: rgba(255, 221, 0, 0.15); color: #FFDD00; }
.cost-phase-name.phase-wd { background: rgba(125, 255, 92, 0.15); color: #7DFF5C; }
.cost-phase-name.phase-construction { background: rgba(0, 102, 255, 0.15); color: #0066FF; }
.cost-phase-name.phase-completed { background: rgba(34, 197, 94, 0.15); color: #22c55e; }

.cost-phase-total {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 100px;
  text-align: right;
}

/* Week Content */
.cost-week-content {
  display: none;
  background: var(--bg-secondary);
}

.cost-phase-row.expanded > .cost-week-content {
  display: block;
}

/* Legacy month support (keep for backwards compatibility) */
.cost-month-content { display: none; background: var(--bg-tertiary); }
.cost-project-row.expanded > .cost-month-content { display: block; }
.cost-month-row { border-bottom: 1px solid var(--border-color); }
.cost-month-row.expanded > .cost-week-content { display: block; }

.cost-week-row {
  border-bottom: 1px solid var(--border-color);
}

.cost-week-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  padding-left: calc(var(--spacing-lg) + 80px);
  padding-right: 20px; /* Align with header padding */
  cursor: pointer;
  transition: background 0.2s;
}

.cost-week-header:hover {
  background: var(--bg-tertiary);
}

.cost-week-row.expanded > .cost-week-header .cost-expand-icon {
  transform: rotate(90deg);
}

.cost-week-name {
  font-weight: 500;
  flex: 1;
  font-size: 0.9rem;
}

.cost-week-total {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 90px;
  text-align: right;
  font-size: 0.9rem;
}

/* Day Content */
.cost-day-content {
  display: none;
  background: var(--bg-tertiary);
}

.cost-week-row.expanded > .cost-day-content {
  display: block;
}

.cost-day-row {
  border-bottom: 1px solid var(--border-color);
}

.cost-day-row:last-child {
  border-bottom: none;
}

.cost-day-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  padding-left: calc(var(--spacing-lg) + 120px);
  padding-right: 20px; /* Align with header padding */
  cursor: pointer;
  transition: background 0.2s;
}

.cost-day-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.cost-day-row.expanded > .cost-day-header .cost-expand-icon {
  transform: rotate(90deg);
}

.cost-day-name {
  font-weight: 500;
  flex: 1;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.cost-day-label {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.cost-day-total {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 80px;
  text-align: right;
  font-size: 0.85rem;
}

.cost-today-badge {
  background: #199ACC;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Member Content */
.cost-member-content {
  display: none;
  background: var(--bg-secondary);
  padding: var(--spacing-sm) 0;
  padding-left: calc(var(--spacing-lg) + 160px);
}

.cost-day-row.expanded > .cost-member-content {
  display: block;
}

.cost-member-row {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-right: 20px; /* Align with header padding */
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-xs);
  cursor: pointer;
  transition: background 0.2s;
}

.cost-member-row:hover {
  background: var(--bg-tertiary);
}

.cost-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  color: white;
}

.cost-member-avatar.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
}

.cost-member-avatar.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B);
}

.cost-member-avatar.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF);
}

.cost-member-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.85rem;
}

.cost-member-hours {
  color: var(--text-secondary);
  font-size: 0.8rem;
  min-width: 50px;
}

.cost-member-cost {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  min-width: 80px;
  text-align: right;
}

.cost-edit-hint {
  color: var(--text-secondary);
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.cost-member-row:hover .cost-edit-hint {
  opacity: 1;
}

/* Add Member Button */
.cost-add-member-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: var(--spacing-sm);
}

.cost-add-member-btn:hover {
  border-color: #199ACC;
  color: #199ACC;
  background: rgba(25, 154, 204, 0.1);
}

/* Empty State for Project Costs */
.cost-empty-state {
  text-align: center;
  padding: var(--spacing-xl) * 2;
  color: var(--text-secondary);
}

.cost-empty-state i {
  font-size: 3rem;
  margin-bottom: var(--spacing-lg);
  color: var(--border-color);
}

.cost-empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.cost-empty-state p {
  font-size: 0.9rem;
  max-width: 400px;
  margin: 0 auto var(--spacing-lg);
}

.cost-generate-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.cost-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: #199ACC;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.cost-generate-btn:hover {
  background: #1589b5;
}

.cost-generate-btn.secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.cost-generate-btn.secondary:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.cost-empty-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Work Record Modal Styles */
.work-record-modal {
  max-width: 450px;
}

.work-record-modal .modal-subheader {
  background: var(--bg-tertiary);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.work-record-modal .modal-member-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.work-record-modal .modal-member-info .cost-member-avatar {
  width: 48px;
  height: 48px;
  font-size: 0.9rem;
}

.work-record-modal .modal-member-details h4 {
  font-weight: 600;
  margin-bottom: 2px;
}

.work-record-modal .modal-member-details p {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.hours-input-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.hour-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hour-btn:hover {
  border-color: #199ACC;
  color: #199ACC;
}

.hour-input {
  width: 80px;
  padding: var(--spacing-sm);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-align: center;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.hour-input:focus {
  outline: none;
  border-color: #199ACC;
}

.hours-hint {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.cost-preview {
  background: var(--bg-tertiary);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cost-preview label {
  margin-bottom: 0;
  font-weight: 500;
}

.cost-preview .cost-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #199ACC;
}

.remove-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: rgba(255, 59, 59, 0.1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: var(--spacing-md);
}

.remove-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-red);
}

.remove-checkbox span {
  color: var(--color-red);
  font-weight: 500;
  font-size: 0.9rem;
}

.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: #199ACC;
}

/* Add Expense Button */
.btn-add-expense {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: #199ACC;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: var(--spacing-lg);
}

.btn-add-expense:hover {
  background: #1589b5;
}

/* ============================================
   TIME TRAVEL - Historical View Mode
   ============================================ */

/* Time travel mode container - subtle background change only */
.gantt-container-v3.time-travel-mode {
  position: relative;
}

/* Subtle grey background for timeline area in time travel mode - exclude footer */
.gantt-container-v3.time-travel-mode .gantt-row-v3 .gantt-col-timeline {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}

/* Footer timeline should stay clean/transparent in time travel mode */
.gantt-container-v3.time-travel-mode .gantt-footer-row .gantt-col-timeline {
  background: transparent;
}

.gantt-container-v3.time-travel-mode .gantt-timeline-header {
  background: rgba(0, 0, 0, 0.02);
}

/* Time travel selection mode - highlight timeline for clicking */
.gantt-container-v3.time-travel-selection-mode .gantt-col-timeline {
  background: rgba(255, 123, 44, 0.08);
  cursor: pointer;
}

.gantt-container-v3.time-travel-selection-mode .gantt-day-cell:hover {
  background: rgba(255, 123, 44, 0.2);
}

/* Day cells for hover/click interaction */
.gantt-day-cell {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s ease;
}

.gantt-day-cell:hover {
  background: rgba(255, 123, 44, 0.1);
}

/* Selected date line (replaces today line in time travel mode) */
.gantt-selected-date-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-orange);
  z-index: 10;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(255, 123, 44, 0.5);
  pointer-events: none; /* Allow mouse events to pass through to day cells */
}

.gantt-selected-date-line::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: var(--color-orange);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 123, 44, 0.6);
}

/* Time travel indicator in header */
.time-travel-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 4px 12px;
  background: rgba(255, 123, 44, 0.2);
  color: var(--color-orange);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  animation: pulse-indicator 2s infinite;
}

.time-travel-indicator i {
  font-size: 0.7rem;
}

@keyframes pulse-indicator {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Back to Today button in nav */
.back-to-today-nav {
  background: linear-gradient(135deg, var(--color-orange), var(--color-red)) !important;
  color: white !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  font-size: 0.75rem;
  animation: pulse-back 2s infinite;
  margin-right: 12px;
}

.back-to-today-nav:hover {
  transform: scale(1.05);
}

@keyframes pulse-back {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25, 154, 204, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(25, 154, 204, 0); }
}

/* Time Travel button styles - ensure text fits */
.time-travel-btn {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  font-size: 0.8rem;
  margin-right: 12px;
  transition: all 0.2s ease;
  border: 1px solid var(--border-color) !important;
  white-space: nowrap;
  min-width: fit-content;
}

.time-travel-btn:hover {
  background: var(--color-turquoise) !important;
  color: white !important;
  border-color: var(--color-turquoise) !important;
}

/* Time Travel selecting mode - Cyan color */
.time-travel-btn.selecting {
  background: var(--color-turquoise) !important;
  color: white !important;
  border-color: var(--color-turquoise) !important;
  animation: pulse-selecting 1s infinite;
  padding: 8px 16px !important;
}

.time-travel-btn.selecting i {
  margin-right: 8px;
}

/* Show Inactive button - circular eye icon, always visible */
.gantt-nav-btn-v3.show-inactive-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.2s ease;
}

.gantt-nav-btn-v3.show-inactive-btn:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  transform: scale(1.05);
}

.gantt-nav-btn-v3.show-inactive-btn.active {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: white !important;
  border-color: transparent !important;
}

.gantt-nav-btn-v3.show-inactive-btn.active:hover {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
}

/* Back to Future button - circular, Shanghai Blue color, icon only */
.gantt-nav-btn-v3.back-to-future-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
  color: white !important;
  border: none !important;
  margin-right: 4px;
  transition: all 0.2s ease;
}

.gantt-nav-btn-v3.back-to-future-btn:hover {
  background: linear-gradient(135deg, #1585AD, #24A5C8) !important;
  transform: scale(1.05);
}

.time-travel-btn.active {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
  color: white !important;
  border: none !important;
  padding: 6px 14px !important;
  min-width: fit-content !important;
  width: auto !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  box-sizing: border-box;
}

.time-travel-btn.active:hover {
  background: linear-gradient(135deg, #1585AD, #24A5C8) !important;
  transform: scale(1.02);
}

@keyframes pulse-selecting {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Apply Changes button in time travel mode */
/* States: disabled (grey) -> has-changes (orange) -> applied (green) -> disabled (grey) */
.apply-changes-btn {
  padding: 8px 18px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  font-size: 0.8rem;
  margin-right: 8px;
  border: none !important;
  white-space: nowrap;
  min-width: fit-content;
  transition: all 0.3s ease;
}

/* Default disabled state - light grey, not clickable */
.apply-changes-btn.disabled {
  background: #9ca3af !important;
  color: #e5e7eb !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Has changes state - orange, clickable */
.apply-changes-btn.has-changes {
  background: var(--color-orange) !important;
  color: white !important;
  cursor: pointer;
  opacity: 1;
}

.apply-changes-btn.has-changes:hover {
  background: #e05a00 !important;
  transform: scale(1.02);
}

/* Applied/Saved state - Green with checkmark */
.apply-changes-btn.applied {
  background: var(--color-green) !important;
  color: white !important;
  cursor: default;
  opacity: 1;
}

.apply-changes-btn.applied i {
  margin-left: 6px;
}

/* Back to Future button in sidebar - Shanghai Blue */
.back-to-future-btn,
.back-to-today-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: calc(100% - 10px);
  padding: var(--spacing-sm) 0 var(--spacing-sm) 18px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: var(--spacing-sm) 0;
  animation: pulse-back 2s infinite;
}

.back-to-today-btn i {
  width: 24px;
  min-width: 24px;
  text-align: center;
}

.back-to-today-btn span {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.sidebar:hover .back-to-today-btn span {
  opacity: 1;
  width: auto;
}

.back-to-today-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(25, 154, 204, 0.4);
}

/* Clickable day numbers in timeline */
.gantt-week-col-header .week-days span.clickable-day {
  cursor: pointer;
  transition: all 0.2s ease;
}

.gantt-week-col-header .week-days span.clickable-day:hover {
  background: rgba(255, 123, 44, 0.3);
  border-radius: 2px;
  transform: scale(1.2);
}

/* Selected day indicator */
.gantt-week-col-header .week-days span.selected-day {
  background: var(--color-orange);
  color: white;
  border-radius: 3px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(255, 123, 44, 0.4);
}

/* Historical date indicator in footer */
.historical-date-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 123, 44, 0.15);
  color: var(--color-orange);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
}

.historical-date-indicator i {
  font-size: 0.6rem;
}

/* Cost Tooltip - Compact, smooth, stays visible while moving */
.cost-tooltip {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.15s ease, left 0.05s ease, top 0.05s ease;
}

.cost-tooltip-date {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.cost-tooltip-amount {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 4px;
}

/* Rate Tooltip - For team pool member hover */
.rate-tooltip {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.15s ease, left 0.05s ease, top 0.05s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rate-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.7rem;
}

.rate-tooltip-label {
  color: var(--text-secondary);
  font-weight: 400;
}

.rate-tooltip-value {
  color: var(--text-primary);
  font-weight: 600;
}

/* Selected date vertical line across all projects */
.gantt-timeline-v3 .selected-day-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-orange);
  z-index: 20;
  opacity: 0.8;
  box-shadow: 0 0 8px rgba(255, 123, 44, 0.5);
}

/* Info notification style */
.notification-info {
  background: var(--color-blue) !important;
}

.notification-warning {
  background: var(--color-orange) !important;
}

/* Team Pool date indicator when time traveling */
.pool-date-indicator {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(255, 123, 44, 0.2);
  color: var(--color-orange);
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 500;
}

/* ============================================
   EMPLOYEE STATUS DROPDOWN (Team Tab)
   Same styling as project status in Resources
   ============================================ */

.emp-status-dropdown {
  width: 100%;
  max-width: 65px;
  padding: 4px 6px;
  font-size: 0.65rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  padding-right: 12px;
  transition: all 0.15s ease;
}

/* Default: grayscale dropdown */
.emp-status-dropdown {
  background-color: #e5e7eb;
  color: #374151;
}

/* Dropdown options: all grayscale */
.emp-status-dropdown option {
  background-color: #f3f4f6;
  color: #374151;
}

/* ACTIVE status: ALWAYS green (same as project status) */
.emp-status-dropdown.emp-status-active {
  background-color: #22c55e;
  color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
}

/* On Unpaid Leave: Purple/Blue tint */
.emp-status-dropdown.emp-status-unpaid-leave {
  background-color: #8b5cf6;
  color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
}

/* Maternity Leave: Pink tint */
.emp-status-dropdown.emp-status-maternity-leave {
  background-color: #ec4899;
  color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
}

/* Other statuses: grayscale by default, color only on hover */
.emp-status-dropdown.emp-status-inactive:hover,
.emp-status-dropdown.emp-status-inactive:focus {
  background-color: #6b7280;
  color: white;
}

.emp-status-dropdown.emp-status-terminated:hover,
.emp-status-dropdown.emp-status-terminated:focus {
  background-color: #ef4444;
  color: white;
}

.emp-status-dropdown.emp-status-resigned:hover,
.emp-status-dropdown.emp-status-resigned:focus {
  background-color: #f59e0b;
  color: white;
}

.emp-status-dropdown.emp-status-completed:hover,
.emp-status-dropdown.emp-status-completed:focus {
  background-color: #8b5cf6;
  color: white;
}

.emp-status-dropdown.emp-status-other:hover,
.emp-status-dropdown.emp-status-other:focus {
  background-color: #9ca3af;
  color: white;
}

/* Inactive employee row styling (non-Active status) */
.team-matrix tr.employee-inactive {
  opacity: 0.6;
}

.team-matrix tr.employee-inactive:hover {
  opacity: 0.85;
}

/* Former employee row (Terminated, Resigned, Completed) - hidden by default */
.team-matrix tr.employee-former {
  display: none;
}

/* Show former employees when toggle is active */
.team-matrix.show-former tr.employee-former {
  display: table-row;
  opacity: 0.5;
}

.team-matrix.show-former tr.employee-former:hover {
  opacity: 0.75;
}

/* Team actions row (eye button + add button) */
.team-actions-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Eye button for showing former employees */
.team-eye-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  font-size: 0.85rem;
}

.team-eye-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Active state - green like Resources eye button */
.team-eye-btn.active {
  background: #22c55e;
  color: white;
}

.team-eye-btn.active:hover {
  background: #16a34a;
}

/* ==========================================
   TEAM EXPANDED ROW STYLES
   ========================================== */

/* Main row expanded state */
.team-matrix tr[data-id].expanded {
  background-color: rgba(255, 123, 44, 0.12);
}

.team-matrix tr[data-id].expanded:hover {
  background-color: rgba(255, 123, 44, 0.15);
}

/* Expand button */
.team-matrix .expand-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}

.team-matrix .expand-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.team-matrix tr.expanded .expand-btn {
  color: var(--accent-primary);
}

/* Expanded row container */
.team-expanded-row {
  background: var(--bg-secondary);
}

.team-expanded-row td {
  padding: 0 !important;
  border-bottom: 2px solid var(--border-color);
}

/* Container - COMPACT version */
.team-expanded-container {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
}

.team-expanded-container.compact {
  padding: 10px 16px;
}

/* Grid layout for expanded content */
.team-expanded-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
}

.compact .team-expanded-grid {
  gap: 12px;
}

/* Section styling - COMPACT */
.team-expanded-grid .expanded-section {
  flex: 1;
  min-width: 200px;
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border-color);
}

.compact .team-expanded-grid .expanded-section {
  padding: 8px 10px;
  border-radius: 6px;
  min-width: 180px;
}

.team-expanded-grid .expanded-section h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.compact .team-expanded-grid .expanded-section h4 {
  font-size: 0.65rem;
  margin: 0 0 6px 0;
  gap: 4px;
}

.team-expanded-grid .expanded-section h4 i {
  color: var(--accent-primary);
  font-size: 0.7rem;
}

.compact .team-expanded-grid .expanded-section h4 i {
  font-size: 0.6rem;
}

/* Field row - COMPACT: no wrap */
.expanded-field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.compact .expanded-field-row {
  gap: 8px;
  flex-wrap: nowrap;
}

.team-expanded-grid .expanded-field {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compact .team-expanded-grid .expanded-field {
  min-width: 70px;
  gap: 2px;
}

.team-expanded-grid .expanded-field label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
}

.compact .team-expanded-grid .expanded-field label {
  font-size: 0.58rem;
  letter-spacing: 0.2px;
}

/* Inputs in expanded row - COMPACT */
.team-expanded-input {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.8rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.compact .team-expanded-input {
  padding: 5px 6px;
  font-size: 0.72rem;
  border-radius: 4px;
}

.team-expanded-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 123, 44, 0.1);
}

/* Readonly field value - COMPACT */
.team-expanded-grid .field-value.readonly {
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 500;
}

.compact .team-expanded-grid .field-value.readonly {
  padding: 5px 6px;
  font-size: 0.72rem;
  border-radius: 4px;
}

/* Duration display */
.duration-display {
  font-family: var(--font-display);
  color: var(--color-blue) !important;
}

/* Ongoing badge - COMPACT */
.ongoing-badge {
  display: inline-block;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.compact .ongoing-badge {
  padding: 5px 8px;
  font-size: 0.65rem;
  border-radius: 4px;
}

/* End date wrapper */
.end-date-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Actions section - New layout: Delete (left), Cancel + Save (right) */
.team-expanded-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compact .team-expanded-actions {
  margin-top: 10px;
  padding-top: 10px;
}

.team-actions-right {
  display: flex;
  gap: 8px;
}

/* Delete button - Red, far left */
.btn-team-delete {
  padding: 6px 14px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-team-delete:hover {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

/* Cancel button - Grey */
.btn-team-cancel {
  padding: 6px 14px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-team-cancel:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Save button - Green, far right */
.btn-team-save {
  padding: 6px 14px;
  background: #22c55e;
  color: white;
  border: 1px solid #22c55e;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-team-save:hover {
  background: #16a34a;
  border-color: #16a34a;
}

/* Dark theme */
[data-theme="dark"] .team-expanded-row {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .team-expanded-grid .expanded-section {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .team-expanded-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .ongoing-badge {
  background: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .btn-team-cancel {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================
   CRM SECTION STYLES
   ========================================== */

/* CRM Mode Toggle - Pipeline vs History (in filters row) */
.crm-mode-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.crm-mode-toggle-group label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.crm-mode-toggle {
  display: flex;
  background: #ffffff;
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .crm-mode-toggle {
  background: var(--bg-card);
}

.crm-mode-toggle .mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.crm-mode-toggle .mode-btn:hover {
  color: var(--text-primary);
  background: rgba(25, 154, 204, 0.08);
}

.crm-mode-toggle .mode-btn.active {
  background: #199ACC;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(25, 154, 204, 0.35);
}

/* Clear Filter Button */
.crm-clear-filter-btn {
  display: none; /* Hidden by default */
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: #EF4444;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.crm-clear-filter-btn:hover {
  background: #DC2626;
}

.crm-clear-filter-btn.visible {
  display: flex;
}

/* W/L Year Filter - Special styling for History mode */
.crm-wl-year-filter {
  transition: all 0.3s ease;
}

.crm-wl-year-filter label {
  color: #F59E0B !important;
  font-weight: 700;
}

.crm-wl-year-filter select {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.crm-wl-year-filter select:focus {
  border-color: #F59E0B;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* Two Cards Row - Side by Side */
.crm-cards-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Card 1: Pipeline Card (Left) - 1/3 width */
.crm-pipeline-card {
  flex: 1;
  min-width: 280px;
  max-width: 33%;
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden; /* Prevent content from overflowing */
}

[data-theme="dark"] .crm-pipeline-card {
  background: var(--bg-card);
}

.crm-pipeline-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* Card 2: Monthly Chart Card (Right) - 2/3 width */
.crm-chart-card {
  flex: 2;
  min-width: 60%;
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .crm-chart-card {
  background: var(--bg-card);
}

/* Chart Header with Currency Toggle */
.crm-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.crm-chart-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0;
  text-transform: uppercase;
}

/* Currency Toggle Inside Chart Card */
.crm-chart-currency-toggle {
  display: flex;
  background: #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.crm-chart-currency-toggle .currency-option {
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}

.crm-chart-currency-toggle .currency-option.active {
  background: #199ACC;
  color: white;
}

.crm-chart-currency-toggle .currency-option:hover:not(.active) {
  background: #e0e0e0;
}

[data-theme="dark"] .crm-chart-currency-toggle {
  background: #333;
  border-color: #444;
}

[data-theme="dark"] .crm-chart-currency-toggle .currency-option {
  color: #aaa;
}

[data-theme="dark"] .crm-chart-currency-toggle .currency-option:hover:not(.active) {
  background: #444;
}

/* Chart Legend */
.crm-chart-legend {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666666;
}

.legend-line {
  width: 24px;
  height: 3px;
  border-radius: 2px;
}

/* Current year - solid line */
.legend-2025 {
  background: #199ACC;
}

/* Past years - dashed lines using background gradient */
.legend-2024 {
  background: repeating-linear-gradient(
    90deg,
    #84CC16 0px,
    #84CC16 4px,
    transparent 4px,
    transparent 8px
  );
}

.legend-2023 {
  background: repeating-linear-gradient(
    90deg,
    #8B5CF6 0px,
    #8B5CF6 4px,
    transparent 4px,
    transparent 8px
  );
}

.legend-2022 {
  background: repeating-linear-gradient(
    90deg,
    #F97316 0px,
    #F97316 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Legend total value styling */
.legend-total {
  color: #199ACC;
  font-weight: 700;
  margin-left: 4px;
}

.crm-monthly-chart {
  height: 280px;
  position: relative;
}

/* Taller chart variant */
.chart-tall {
  height: 100%;
}

/* Chart with Y-axis Layout */
.chart-with-axis {
  display: flex;
  height: 100%;
  gap: 8px;
}

.chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0 25px 0;
  min-width: 60px;
}

.y-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #666666;
  text-align: left;
  padding-left: 0;
}

.chart-main-area {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.line-chart-svg {
  flex: 1;
  width: 100%;
  border-left: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.chart-points-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 25px;
  pointer-events: none;
}

.data-point {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #199ACC;
  border: 2px solid white;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.data-point:hover {
  transform: translate(-50%, 50%) scale(1.5);
}

/* 2025 points - blue */
.data-point-2025 {
  background: #199ACC;
}

/* 2024 points - green */
.data-point-2024 {
  background: #84CC16;
}

/* 2023 points - purple */
.data-point-2023 {
  background: #8B5CF6;
}

/* 2022 points - orange */
.data-point-2022 {
  background: #F97316;
}

.chart-x-axis {
  display: flex;
  justify-content: space-between;
  height: 25px;
  align-items: center;
  padding-top: 5px;
}

.x-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: #666666;
  text-align: center;
  flex: 1;
}

/* Responsive: Stack on mobile */
@media (max-width: 992px) {
  .crm-cards-row {
    flex-direction: column;
  }
}

/* Card 2: CRM Table Card */
.crm-table-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: visible; /* Changed from hidden to allow sticky behavior */
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Scrollable Table Wrapper with Sticky Header */
.crm-table-wrapper {
  max-height: calc(100vh - 150px); /* Show ~11 rows, filters visible */
  min-height: 500px;
  overflow-y: auto;
  overflow-x: auto;
  position: relative; /* Required for sticky positioning context */
}

[data-theme="dark"] .crm-table-card {
  background: var(--bg-card);
}

/* CRM Table Header - Official Teams Style Color */
.crm-table-header {
  background: #199ACC;
}

.crm-table-header tr th {
  color: #ffffff !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  padding: 0.85rem 0.75rem;
  border-bottom: none;
}

/* CRM Filters Row - On Background (not card) */
.crm-filters-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  align-items: flex-end;
}

.crm-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.crm-filter-group label {
  font-size: 0.6rem;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.crm-filter-select {
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.7rem;
  min-width: auto;
  width: auto;
  cursor: pointer;
}

.crm-filter-select:hover {
  border-color: var(--accent-primary);
}

/* Currency Toggle */
.crm-currency-toggle {
  margin-left: auto;
}

.currency-toggle-btn {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.currency-option {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-primary);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.currency-option.active {
  background: var(--accent-primary);
  color: white;
}

.currency-option:hover:not(.active) {
  background: var(--bg-secondary);
}

/* Add Lead Button */
.crm-add-lead-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* CRM Search Bar */
.crm-search-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-left: auto;
}

.crm-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.crm-search-input-wrapper i {
  position: absolute;
  left: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.7rem;
  pointer-events: none;
}

.crm-search-input {
  padding: 0.35rem 0.5rem 0.35rem 1.6rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.7rem;
  min-width: 120px;
  width: 120px;
}

.crm-search-input:hover {
  border-color: var(--accent-primary);
}

.crm-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(25, 154, 204, 0.2);
}

.crm-search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Legacy - keep for compatibility */
.crm-funnel-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .crm-funnel-container {
  background: var(--bg-card);
}

.crm-funnel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* Funnel Chart - Inverted Pyramid */
.crm-funnel-chart {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align to left */
  padding: 0;
  height: 280px; /* Match chart height */
  overflow: hidden;
}

.funnel-pyramid {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align to left */
  justify-content: space-between; /* Spread bars evenly */
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0;
}

/* Funnel Level Row - contains label + bar container */
.funnel-level-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Label on LEFT side - fixed width column */
.funnel-label-left {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6B7280;
  width: 28px; /* Fixed width for alignment */
  min-width: 28px;
  text-align: right;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Container for the bar - takes all remaining space */
.funnel-bar-container {
  flex: 1;
  min-width: 0; /* Allow shrinking */
  padding-right: 8px; /* Space from card edge */
}

/* Legacy support */
.funnel-level {
  transition: width 0.3s ease;
  flex-shrink: 1;
  flex-grow: 0;
}

/* Legacy - keep for compatibility */
.funnel-label-outside {
  font-size: 0.72rem;
  font-weight: 600;
  color: #4B5563;
  white-space: nowrap;
  margin-left: 10px;
  flex-shrink: 0;
}

.funnel-bar {
  height: 30px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the count */
  padding: 0 0.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  min-width: 40px; /* Minimum width for count display */
}

.funnel-bar:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.funnel-bar .funnel-bar-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.funnel-bar .funnel-bar-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Funnel Results - Won/Lost side by side */
.funnel-results {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  width: 30%;
}

.funnel-result {
  flex: 1;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s;
}

.funnel-result:hover {
  transform: scale(1.05);
}

.funnel-result .result-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

.funnel-result .result-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
}

.funnel-result.won {
  background: linear-gradient(135deg, #22C55E, #16A34A);
}

.funnel-result.lost {
  background: linear-gradient(135deg, #6B7280, #4B5563);
}

/* Funnel Stage Colors - Cool to Hot gradient */
.funnel-bar.stage-l { background: linear-gradient(90deg, #3B82F6, #2563EB); }
.funnel-bar.stage-ql { background: linear-gradient(90deg, #14B8A6, #0D9488); }
.funnel-bar.stage-qo { background: linear-gradient(90deg, #EAB308, #CA8A04); }
.funnel-bar.stage-pp { background: linear-gradient(90deg, #F97316, #EA580C); }
.funnel-bar.stage-n { background: linear-gradient(90deg, #EF4444, #DC2626); }
.funnel-bar.stage-won { background: linear-gradient(90deg, #22C55E, #16A34A); }
.funnel-bar.stage-lost { background: linear-gradient(90deg, #6B7280, #4B5563); }

/* Clickable Funnel Bars */
.funnel-bar.clickable {
  cursor: pointer;
  user-select: none;
}

.funnel-bar.clickable:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  filter: brightness(1.08);
}

.funnel-bar.clickable:active {
  transform: scale(0.98);
}

/* Active Bar Selection */
.funnel-bar.active-bar {
  box-shadow: 0 0 0 3px #199ACC, 0 4px 16px rgba(25, 154, 204, 0.4);
  transform: scale(1.02);
}

.funnel-bar.active-bar::after {
  content: '✓';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  background: #199ACC;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.funnel-bar-container {
  position: relative;
}

/* Clear Filter Button */
.funnel-clear-filter {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.1);
  text-align: center;
}

.clear-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.clear-filter-btn:hover {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
}

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

.clear-filter-btn i {
  font-size: 0.7rem;
}

/* Funnel Stats */
.crm-funnel-stats {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.funnel-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.funnel-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.funnel-stat-value {
  font-size: 1.2rem;
  font-weight: 400;
  color: #666666;
}

/* CRM Table */
.crm-table-container {
  background: var(--bg-card);
  border-radius: 8px;
  overflow: visible;
}

.crm-table {
  width: 100%;
  border-collapse: collapse;
}

.crm-table thead {
  background: #199ACC;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Sticky Header - follows you when scrolling within wrapper */
.crm-table thead th {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #199ACC;
  /* Shadow to show header is floating */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.crm-table th {
  padding: 0.5rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  border-bottom: none;
  white-space: nowrap;
}

.crm-table td {
  padding: 0.4rem 0.3rem;
  font-size: 0.7rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid #e5e7eb;
  vertical-align: middle;
}

.crm-table td:last-child {
  border-right: none;
}

/* Zebra stripes - alternating row colors */
.crm-table tbody tr.crm-row-main:nth-child(4n+1),
.crm-table tbody tr.crm-row-main:nth-child(4n+2) {
  background: #ffffff;
}

.crm-table tbody tr.crm-row-main:nth-child(4n+3),
.crm-table tbody tr.crm-row-main:nth-child(4n) {
  background: #f9fafb;
}

.crm-table tbody tr.crm-row-main:hover {
  background: #f0f7ff !important;
}

/* Keep blue highlight when lead row is expanded */
.crm-table tbody tr.crm-row-main.expanded {
  background: #f0f7ff !important;
}

[data-theme="dark"] .crm-table tbody tr.crm-row-main.expanded {
  background: #1e3a5f !important;
}

/* CRM Table Column Widths - With Country, Category, and USD */
.crm-table .col-code { width: 48px; font-size: 0.6rem; }
.crm-table .col-client { width: 50px; }
.crm-table .col-opportunity { width: 5%; white-space: normal; word-wrap: break-word; }
.crm-table .col-country { width: 40px; }
.crm-table .col-location { width: 45px; }
.crm-table .col-category { width: 58px; }
.crm-table .col-typology { width: 48px; }
.crm-table .col-m2 { width: 3%; text-align: right; }
.crm-table .col-stage { width: 75px; }
.crm-table .col-status { width: 40px; text-align: center; }
.crm-table .col-probability { width: 22px; text-align: center; }

/* Status badges for CRM list view (10th column) */
.crm-status {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.crm-status.won {
  background: #DEF7EC;
  color: #03543F;
}
.crm-status.lost {
  background: #FDE8E8;
  color: #9B1C1C;
}
.crm-status.na {
  background: #F3F4F6;
  color: #6B7280;
}
.crm-status.wait {
  background: #FEF3C7;
  color: #92400E;
}
/* Problem 3: On Going = Blue, Closed = Grey (same as N/A) */
.crm-status.on-going {
  background: #DBEAFE;
  color: #1E40AF;
}
.crm-status.closed {
  background: #F3F4F6;
  color: #6B7280;
}
.crm-table .col-fee-rmb { width: 52px; text-align: right; padding: 4px 2px !important; }
.crm-table .col-fee-aed { width: 48px; text-align: right; padding: 4px 2px !important; }
.crm-table .col-fee-usd { width: 48px; text-align: right; padding: 4px 2px !important; }

/* Base currency highlighting - bold for the source/locked currency */
.crm-table .fee-base { font-weight: 700; }
.crm-table .fee-converted { font-weight: 400; opacity: 0.85; }
.crm-table .col-office { width: 50px; padding: 4px 4px !important; }
.crm-table .col-incharge { width: 45px; padding: 4px 2px !important; white-space: nowrap; }
.crm-table .col-wldate { width: 62px; text-align: center; font-size: 0.65rem; padding: 4px 2px !important; white-space: nowrap; }

/* Stage Funnel Indicator in Main Table */
.crm-stage-funnel {
  display: flex;
  align-items: center;
  gap: 2px;
}

.crm-stage-funnel .stage-pill {
  width: 12px;
  height: 10px;
  border-radius: 3px;
  background: var(--border-color);
  transition: background 0.2s;
}

.crm-stage-funnel .stage-pill.active.l { background: #3B82F6; }
.crm-stage-funnel .stage-pill.active.ql { background: #14B8A6; }
.crm-stage-funnel .stage-pill.active.qo { background: #EAB308; }
.crm-stage-funnel .stage-pill.active.pp { background: #F97316; }
.crm-stage-funnel .stage-pill.active.n { background: #EF4444; }
.crm-stage-funnel .stage-pill.active.won { background: #22C55E; }
.crm-stage-funnel .stage-pill.active.lost { background: #6B7280; }

.crm-stage-funnel .stage-label {
  margin-left: 4px;
}
.crm-stage-funnel .stage-label.won { color: #22C55E; font-weight: 700; }
.crm-stage-funnel .stage-label.lost { color: #6B7280; font-weight: 700; }

/* Stage Badge */
.crm-stage-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.crm-stage-badge.stage-lead { background: #DBEAFE; color: #1D4ED8; }
.crm-stage-badge.stage-ql { background: #CCFBF1; color: #0D9488; }
.crm-stage-badge.stage-qo { background: #FEF3C7; color: #B45309; }
.crm-stage-badge.stage-pp { background: #FFEDD5; color: #C2410C; }
.crm-stage-badge.stage-n { background: #FEE2E2; color: #DC2626; }
.crm-stage-badge.stage-won { background: #DCFCE7; color: #16A34A; }
.crm-stage-badge.stage-lost { background: #F3F4F6; color: #6B7280; }

/* Probability Badge */
.crm-probability {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--bg-secondary);
}

.crm-probability.high { background: #DCFCE7; color: #16A34A; }
.crm-probability.medium { background: #FEF3C7; color: #B45309; }
.crm-probability.low { background: #F3F4F6; color: #6B7280; }

/* Fee Display */
.crm-fee {
  font-weight: 600;
  font-family: 'SF Mono', monospace;
}

/* Action Buttons */
.crm-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.crm-action-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.crm-action-btn.expand-btn i {
  transition: transform 0.2s ease;
}

.crm-action-btn.expand-btn.expanded i {
  transform: rotate(180deg);
}

/* Expanded Row Details */
.crm-row-details {
  display: none;
}

.crm-row-details.show {
  display: table-row;
}

.crm-row-details > td {
  background: var(--bg-card) !important;
  border-bottom: 2px solid var(--border-color);
  padding: 4px 8px !important;
  position: relative;
}

.crm-details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.crm-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.crm-detail-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.crm-detail-value {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}

/* Details Container - compact single line */
.crm-details-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}

/* Edit button positioned at right end of details row */
.crm-detail-edit {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.crm-edit-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: #6B7280 !important;
  color: white !important;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
}

.crm-edit-btn:hover {
  background: #4B5563 !important;
}

.crm-edit-btn.editing {
  background: #10B981 !important;
  width: auto;
  padding: 0 0.75rem;
}

.crm-edit-btn.editing:hover {
  background: #059669 !important;
}

/* Editable fields in edit mode */
.crm-detail-value.editable {
  background: white;
  border: 1px solid #199ACC;
  border-radius: 3px;
  padding: 2px 4px;
  outline: none;
  min-width: 60px;
}

.crm-detail-value.editable:focus {
  box-shadow: 0 0 0 2px rgba(25, 154, 204, 0.2);
}

.crm-row-details.editing .crm-detail-item {
  background: #F0F9FF;
  border-color: #BAE6FD;
}

/* Main row editing */
.crm-row-main.editing {
  background: #F0F9FF;
}

.crm-row-main td.editable {
  background: white;
  border: 1px solid #199ACC;
  border-radius: 3px;
  outline: none;
}

.crm-row-main td.editable:focus {
  box-shadow: 0 0 0 2px rgba(25, 154, 204, 0.2);
}

/* Funnel Stage Indicators in Row */
.crm-funnel-indicators {
  display: flex;
  gap: 2px;
  margin-top: 0.5rem;
}

.funnel-indicator {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-color);
}

.funnel-indicator.active.l { background: #3B82F6; }
.funnel-indicator.active.ql { background: #14B8A6; }
.funnel-indicator.active.qo { background: #EAB308; }
.funnel-indicator.active.pp { background: #F97316; }
.funnel-indicator.active.n { background: #EF4444; }

/* Table Footer */
.crm-table-footer {
  padding: 0.8rem 1rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 1200px) {
  .crm-details-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .crm-filters-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .crm-filter-select {
    width: 100%;
  }
  
  .crm-currency-toggle {
    margin-left: 0;
  }
  
  .crm-details-grid {
    grid-template-columns: 1fr;
  }
  
  .crm-funnel-stats {
    flex-direction: column;
    gap: 1rem;
  }
}

/* CRM Edit Form Styles */
.crm-row-details.editing td {
  background: var(--bg-primary);
}

/* New Lead Edit Row - proper table row behavior */
.crm-edit-row {
  display: table-row; /* Force table-row display */
  background: var(--bg-primary);
}

.crm-edit-row td {
  padding: 0;
  background: #F8FAFC;
  border-bottom: 2px solid var(--accent-blue);
}

.crm-edit-form {
  padding: 0.75rem 1rem;
}

.crm-edit-header {
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
}

.crm-edit-header h4 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.crm-edit-header h4 i {
  color: var(--accent-blue);
  margin-right: 0.5rem;
}

.crm-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.crm-edit-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.crm-edit-group.full-width {
  grid-column: 1 / -1;
}

.crm-edit-group label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.crm-edit-group input,
.crm-edit-group select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.7rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.crm-edit-group input:focus,
.crm-edit-group select:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

.crm-edit-group input[type="number"] {
  -moz-appearance: textfield;
}

.crm-edit-group input[type="number"]::-webkit-outer-spin-button,
.crm-edit-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.crm-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

.crm-edit-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.crm-edit-actions .btn-secondary {
  background: #E5E7EB;
  color: #374151;
  border: 1px solid #D1D5DB;
}

.crm-edit-actions .btn-secondary:hover {
  background: #D1D5DB;
  color: #1F2937;
}

.crm-edit-actions .btn-primary {
  background: #199ACC;
  color: white;
  border: none;
  box-shadow: 0 2px 4px rgba(25, 154, 204, 0.3);
}

.crm-edit-actions .btn-primary:hover {
  background: #1480A9;
  box-shadow: 0 3px 6px rgba(25, 154, 204, 0.4);
}

.crm-edit-actions .btn-danger {
  display: inline-flex !important;
  background: #DC2626 !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
  margin-right: auto; /* Push delete button to the left */
}

.crm-edit-actions .btn-danger:hover {
  background: #B91C1C !important;
  box-shadow: 0 3px 6px rgba(220, 38, 38, 0.4);
}

/* Delete Confirmation Modal */
.crm-delete-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.crm-delete-modal {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

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

.crm-delete-modal-icon {
  width: 60px;
  height: 60px;
  background: #FEE2E2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.crm-delete-modal-icon i {
  font-size: 1.75rem;
  color: #DC2626;
}

.crm-delete-modal h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1F2937;
}

.crm-delete-modal p {
  margin: 0 0 0.5rem;
  color: #4B5563;
  font-size: 0.95rem;
}

.crm-delete-modal .crm-delete-warning {
  color: #DC2626;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.crm-delete-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.crm-delete-modal-actions .btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.crm-delete-modal-actions .btn-secondary {
  background: #E5E7EB;
  color: #374151;
  border: 1px solid #D1D5DB;
}

.crm-delete-modal-actions .btn-secondary:hover {
  background: #D1D5DB;
}

.crm-delete-modal-actions .btn-danger {
  background: #DC2626;
  color: white;
  border: none;
}

.crm-delete-modal-actions .btn-danger:hover {
  background: #B91C1C;
}

/* Dark mode support for delete modal */
[data-theme="dark"] .crm-delete-modal {
  background: var(--bg-card);
}

[data-theme="dark"] .crm-delete-modal h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .crm-delete-modal p {
  color: var(--text-secondary);
}

/* Edit button styling */
.crm-action-btn.edit-btn {
  background: transparent;
  color: var(--text-secondary);
  border: none;
}

.crm-action-btn.edit-btn:hover {
  color: var(--accent-blue);
  background: rgba(0, 102, 255, 0.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .crm-edit-grid {
    grid-template-columns: 1fr;
  }
  
  .crm-edit-actions {
    flex-direction: column;
  }
  
  .crm-edit-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* CRM Details Row - Compact Single Row Layout */
.crm-row-main {
  cursor: pointer;
  transition: background 0.15s;
}

.crm-row-main:hover {
  background: var(--bg-secondary);
}

.crm-details-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.4rem;
  padding: 0;
}

.crm-details-single-line {
  grid-template-columns: repeat(10, 1fr);
}

.crm-row-details .crm-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 3px 6px;
}

.crm-row-details .crm-detail-item.auto {
  background: #F1F5F9;
  border-color: #CBD5E1;
  min-width: 50px;
}

.crm-row-details .crm-detail-item.wide {
  min-width: 120px;
  flex: 1;
  max-width: 200px;
}

.crm-row-details .crm-detail-item.suspended {
  background: #FEF2F2;
  border-color: #FECACA;
  border-width: 1px;
}

.crm-row-details .crm-detail-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
  line-height: 1.1;
}

.crm-row-details .crm-detail-value {
  font-size: 0.7rem;
  font-weight: 500;
  color: #1E293B;
  white-space: nowrap;
  line-height: 1.2;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-row-details .crm-detail-item.suspended .crm-detail-value {
  color: #DC2626;
  font-size: 0.7rem;
  font-weight: 500;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions Column - Stacked buttons */
.crm-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Edit button below expand - dark grey, hidden until expanded */
.crm-action-btn.edit-btn-below {
  display: none;
  background: #4B5563;
  color: white;
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: background 0.2s;
}

.crm-action-btn.edit-btn-below.visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.crm-action-btn.edit-btn-below:hover {
  background: #374151;
}

.crm-action-btn.edit-btn-hidden {
  display: none;
  background: var(--accent-blue);
  color: white;
  border-radius: 4px;
  width: 28px;
  height: 28px;
}

.crm-action-btn.edit-btn-hidden.visible {
  display: inline-flex;
}

.crm-action-btn.edit-btn-hidden:hover {
  background: #0052cc;
}

.crm-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: var(--accent-blue);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.crm-edit-btn:hover {
  background: #0052cc;
}

/* Details Content Container */
.crm-details-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Details Actions - Edit button at bottom */
.crm-details-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  margin-top: 4px;
}

.crm-edit-btn i {
  font-size: 0.7rem;
}

/* Hide old grid styles */
.crm-details-grid {
  display: none;
}

/* Mobile responsive for details row */
@media (max-width: 768px) {
  .crm-details-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .crm-row-details .crm-detail-item {
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
  }
  
  .crm-row-details .crm-detail-label {
    min-width: 100px;
  }
  
  .crm-detail-actions {
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .crm-edit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== CRM Edit Mode Inputs ===== */
.crm-edit-input,
.crm-edit-select,
.crm-edit-date,
.crm-edit-currency {
  width: 100%;
  padding: 4px 6px;
  font-size: 0.7rem;
  border: 1px solid var(--accent-blue);
  border-radius: 3px;
  background: #EFF6FF;
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
}

.crm-edit-input:focus,
.crm-edit-select:focus,
.crm-edit-date:focus,
.crm-edit-currency:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.crm-edit-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 4px center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 20px;
  cursor: pointer;
}

.crm-edit-date {
  cursor: pointer;
}

.crm-edit-currency {
  text-align: right;
}

/* Editable value container styling */
.crm-detail-value.editing {
  padding: 0;
  min-height: 22px;
}

/* Dark theme adjustments */
[data-theme="dark"] .crm-edit-input,
[data-theme="dark"] .crm-edit-select,
[data-theme="dark"] .crm-edit-date,
[data-theme="dark"] .crm-edit-currency {
  background: #1E3A5F;
  border-color: #3B82F6;
  color: white;
}

[data-theme="dark"] .crm-details-auto {
  background: #1E293B;
}

[data-theme="dark"] .crm-details-auto .crm-detail-label {
  color: #94A3B8;
}

[data-theme="dark"] .crm-details-auto .crm-detail-value {
  color: #E2E8F0;
}

/* ==========================================
   UNIFIED CRM LEAD GRID - 9 Columns x 3 Rows
   Fixed layout for both View and Edit modes
   ========================================== */

.crm-unified-container {
  padding: 0.75rem 1rem;
  background: transparent;
  cursor: pointer;
}

/* Hint for double-click - positioned in top right */
.crm-unified-container::after {
  content: 'Double-click to edit';
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 0.6rem;
  color: #9ca3af;
  opacity: 0.7;
  pointer-events: none;
}

.crm-row-details.editing .crm-unified-container::after {
  display: none;
}

.crm-row-details.editing .crm-unified-container {
  cursor: default;
  background: transparent;
}

[data-theme="dark"] .crm-unified-container::after {
  color: #6b7280;
}

/* Fixed 9-column, 3-row grid */
.unified-grid {
  display: grid;
  /* Column 1: narrow (60px), Column 2: widest (180px), Columns 3-9: equal (1fr each, min 100px) */
  grid-template-columns: 60px 180px repeat(7, minmax(100px, 1fr));
  grid-template-rows: repeat(4, auto);
  gap: 0.5rem 0.75rem;
  width: 100%;
}

/* Column positioning */
.unified-col {
  display: flex;
  flex-direction: column;
}

/* Column 1 - System fields (narrow) */
.unified-col.col-1 {
  min-width: 60px;
  max-width: 60px;
}

/* Column 2 - Names/descriptions (widest) */
.unified-col.col-2 {
  min-width: 180px;
}

/* Create controls styling - no longer used but kept for reference */
/* POA and Create Project are now in separate grid cells like other fields */

/* Individual field container */
.unified-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.unified-field.readonly {
  opacity: 0.85;
}

/* Labels */
.unified-label {
  font-size: 0.55rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .unified-label {
  color: #9ca3af;
}

/* Values in view mode */
.unified-value {
  font-size: 0.7rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.25rem 0;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
}

/* System status styling */
.unified-status {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.unified-status.win {
  background: #dcfce7;
  color: #166534;
}

.unified-status.lost {
  background: #fee2e2;
  color: #dc2626;
}

.unified-status.wait {
  background: #fef3c7;
  color: #92400e;
}

.unified-status.na {
  background: #f3f4f6;
  color: #6b7280;
}

/* New CRM Status classes (Problem 3) */
.unified-status.on-going {
  background: #dbeafe;
  color: #1d4ed8;
}

.unified-status.closed {
  background: #e5e7eb;
  color: #4b5563;
}

.unified-status.won {
  background: #dcfce7;
  color: #166534;
}

/* CRM Status select in edit mode */
.crm-status-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
}

.crm-status-locked {
  background: #f3f4f6 !important;
  color: #6b7280;
  cursor: not-allowed;
}

[data-theme="dark"] .unified-status.on-going {
  background: #1e40af;
  color: #dbeafe;
}

[data-theme="dark"] .unified-status.closed {
  background: #374151;
  color: #e5e7eb;
}

[data-theme="dark"] .unified-status.win {
  background: #166534;
  color: #dcfce7;
}

[data-theme="dark"] .unified-status.lost {
  background: #7f1d1d;
  color: #fecaca;
}

[data-theme="dark"] .unified-status.wait {
  background: #78350f;
  color: #fef3c7;
}

[data-theme="dark"] .unified-status.na {
  background: #374151;
  color: #9ca3af;
}

/* Input fields in edit mode */
.unified-input {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.7rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.unified-input:focus {
  outline: none;
  border-color: #199ACC;
  box-shadow: 0 0 0 2px rgba(25, 154, 204, 0.2);
}

.unified-input:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: default;
}

/* View mode - light grey background to show not editable */
.unified-input.view-mode {
  background: #f8f9fa;
  color: var(--text-primary);
  cursor: default;
  border-color: #e5e7eb;
}

.unified-input.view-mode:disabled {
  background: #f8f9fa;
  color: var(--text-primary);
  opacity: 1;
  -webkit-text-fill-color: var(--text-primary);
}

[data-theme="dark"] .unified-input:disabled {
  background: #374151;
  color: #9ca3af;
}

[data-theme="dark"] .unified-input.view-mode,
[data-theme="dark"] .unified-input.view-mode:disabled {
  background: #2d3748;
  color: var(--text-primary);
  border-color: #4a5568;
  -webkit-text-fill-color: var(--text-primary);
}

/* Select dropdown styling */
select.unified-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  padding-right: 1.5rem;
}

/* Number input styling */
input[type="number"].unified-input {
  -moz-appearance: textfield;
}

input[type="number"].unified-input::-webkit-outer-spin-button,
input[type="number"].unified-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Date input styling */
input[type="date"].unified-input {
  padding-right: 0.3rem;
}

/* Placeholder styling for Optional Name field */
.unified-input::placeholder {
  color: #c0c0c0;
  font-style: italic;
  opacity: 1;
}

[data-theme="dark"] .unified-input::placeholder {
  color: #666;
}

/* Action buttons for edit mode */
.unified-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.unified-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.unified-actions .btn-danger {
  background: #DC2626;
  color: white;
  margin-right: auto;
}

.unified-actions .btn-danger:hover {
  background: #B91C1C;
}

.unified-actions .btn-secondary {
  background: #E5E7EB;
  color: #374151;
  border: 1px solid #D1D5DB;
}

.unified-actions .btn-secondary:hover {
  background: #D1D5DB;
}

.unified-actions .btn-primary {
  background: #199ACC;
  color: white;
  box-shadow: 0 2px 4px rgba(25, 154, 204, 0.3);
}

.unified-actions .btn-primary:hover {
  background: #1480A9;
}

/* Hint text for view mode */
.unified-actions-hint {
  font-size: 0.65rem;
  color: #9ca3af;
  font-style: italic;
  display: flex;
  align-items: center;
}

[data-theme="dark"] .unified-actions-hint {
  color: #6b7280;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .unified-grid {
    grid-template-columns: 55px 160px repeat(7, minmax(85px, 1fr));
    gap: 0.4rem 0.5rem;
  }
  
  .unified-label {
    font-size: 0.5rem;
  }
  
  .unified-value,
  .unified-input {
    font-size: 0.65rem;
  }
}

@media (max-width: 1200px) {
  .unified-grid {
    grid-template-columns: 50px 140px repeat(7, minmax(75px, 1fr));
    gap: 0.35rem 0.4rem;
  }
}


/* ==========================================
   POA (Preliminary Offer Agreement) Matrix Styles
   ========================================== */

/* POA Filters Row */
.poa-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
  margin-bottom: 1rem;
  align-items: flex-end;
}

.poa-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.poa-filter-group label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="dark"] .poa-filter-group label {
  color: var(--text-primary);
}

.poa-filter-select {
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.8rem;
  min-width: 130px;
  cursor: pointer;
}

.poa-filter-select:hover {
  border-color: var(--accent-primary);
}

/* POA Search Bar - Aligned in filter row */
.poa-search-group {
  flex: 0 0 auto;
}

.poa-search-group .poa-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.poa-search-group .poa-search-input-wrapper i {
  position: absolute;
  left: 0.6rem;
  color: var(--text-secondary);
  font-size: 0.7rem;
  pointer-events: none;
}

.poa-filter-search {
  padding: 0.4rem 0.6rem 0.4rem 1.8rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.75rem;
  min-width: 150px;
  width: 150px;
  height: 32px;
}

.poa-filter-search:hover {
  border-color: var(--accent-primary);
}

.poa-filter-search:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(25, 154, 204, 0.2);
}

.poa-filter-search::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
  font-size: 0.7rem;
}

.poa-matrix-wrapper {
  padding: 0;
  border-radius: 0 0 12px 12px;
}

.poa-matrix-container {
  background: var(--card-bg);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.poa-matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--accent-blue) 0%, #1e40af 100%);
  color: white;
}

.poa-title {
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.poa-title i {
  font-size: 1.5rem;
}

.poa-legend {
  display: flex;
  gap: 16px;
  font-size: 0.75rem;
}

.poa-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.poa-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.poa-status-dot.not-started { background: #94a3b8; }
.poa-status-dot.in-progress { background: #3b82f6; }
.poa-status-dot.overdue { background: #ef4444; }
.poa-status-dot.completed { background: #22c55e; }

/* Office Sections */
.poa-office-section {
  border-bottom: 1px solid var(--border-color);
}

.poa-office-section:last-child {
  border-bottom: none;
}

.poa-office-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

.poa-office-header.shanghai {
  background: linear-gradient(90deg, #fef3c7 0%, transparent 100%);
  color: #92400e;
}

.poa-office-header.dubai {
  background: linear-gradient(90deg, #dbeafe 0%, transparent 100%);
  color: #1e40af;
}

.poa-office-header.completed {
  background: linear-gradient(90deg, #dcfce7 0%, transparent 100%);
  color: #166534;
}

.poa-office-count {
  font-weight: 400;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-left: auto;
}

/* POA Grid */
.poa-grid {
  width: 100%;
}

.poa-grid-header {
  display: grid;
  grid-template-columns: 300px 100px 1fr 200px;
  gap: 0;
  background: #f8fafc;
  border-bottom: 2px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

[data-theme="dark"] .poa-grid-header {
  background: #1e293b;
  color: #94a3b8;
}

.poa-grid-header > div {
  padding: 10px 12px;
  border-right: 1px solid var(--border-color);
}

.poa-grid-header > div:last-child {
  border-right: none;
}

.poa-col-project {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poa-col-status {
  text-align: center;
}

.poa-col-timeline {
  padding: 0 !important;
}

.poa-col-team {
  text-align: center;
}

/* Timeline Header */
.poa-timeline-header {
  display: flex;
  width: 100%;
}

.poa-week-col {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  border-right: 1px solid var(--border-color);
}

.poa-week-col:last-child {
  border-right: none;
}

.poa-week-range {
  display: block;
  font-size: 0.7rem;
  margin-bottom: 4px;
}

.poa-week-days {
  display: flex;
  justify-content: space-around;
}

.poa-week-days span {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  border-radius: 50%;
}

.poa-week-days span.weekend {
  color: #94a3b8;
  background: #f1f5f9;
}

.poa-week-days span.today {
  background: var(--accent-blue);
  color: white;
  font-weight: 700;
}

/* POA Rows */
.poa-row {
  display: grid;
  grid-template-columns: 300px 100px 1fr 200px;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

.poa-row:hover {
  background: #f8fafc;
}

[data-theme="dark"] .poa-row:hover {
  background: #1e293b;
}

.poa-row > div {
  padding: 12px;
  border-right: 1px solid var(--border-color);
  display: flex;
  align-items: center;
}

.poa-row > div:last-child {
  border-right: none;
}

.poa-row .poa-col-project {
  justify-content: space-between;
}

.poa-project-name {
  font-size: 0.8rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

.poa-edit-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.poa-edit-btn:hover {
  background: #e2e8f0;
  color: #475569;
}

/* Status Badge */
.poa-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.poa-status.not-started {
  background: #f1f5f9;
  color: #64748b;
}

.poa-status.in-progress {
  background: #dbeafe;
  color: #1d4ed8;
}

.poa-status.overdue {
  background: #fee2e2;
  color: #dc2626;
  animation: pulse-red 2s infinite;
}

.poa-status.completed {
  background: #dcfce7;
  color: #16a34a;
}

.poa-status:hover {
  transform: scale(1.05);
}

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Timeline Bar Container */
.poa-timeline-bar-container {
  position: relative;
  width: 100%;
  height: 24px;
  background: #f8fafc;
  border-radius: 4px;
}

[data-theme="dark"] .poa-timeline-bar-container {
  background: #1e293b;
}

.poa-timeline-bar {
  position: absolute;
  top: 4px;
  height: 16px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
  border-radius: 8px;
  transition: all 0.3s;
}

.poa-timeline-bar.overdue {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

.poa-timeline-bar.completed {
  background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
}

.poa-delivery-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #1e40af;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
}

.poa-delivery-mark:hover {
  transform: translateX(-50%) scale(1.3);
  color: #3b82f6;
}

.poa-delivery-mark.overdue {
  color: #dc2626;
}

/* Team Pool */
.poa-team-pool {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.poa-team-member {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  background: #e2e8f0;
  color: #64748b;
  border: 2px solid transparent;
}

.poa-team-member:hover {
  transform: scale(1.1);
  border-color: var(--accent-blue);
}

.poa-team-member.assigned {
  background: var(--accent-blue);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* Empty Row */
.poa-empty-row {
  padding: 30px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Completed Section */
.poa-completed-section .poa-completed-list {
  padding: 12px 20px;
}

.poa-completed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.8rem;
}

[data-theme="dark"] .poa-completed-item {
  background: #1e293b;
}

.poa-completed-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poa-completed-date {
  color: #64748b;
  font-size: 0.75rem;
}

/* Modals - Opaque with blur background */
.poa-date-modal-overlay,
.poa-edit-modal-overlay,
.poa-delete-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.poa-date-modal,
.poa-edit-modal,
.poa-delete-modal {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .poa-date-modal,
[data-theme="dark"] .poa-edit-modal,
[data-theme="dark"] .poa-delete-modal {
  background: var(--card-bg);
}

.poa-date-modal h3,
.poa-edit-modal h3,
.poa-delete-modal h3 {
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.poa-date-modal input[type="date"] {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  margin: 12px 0;
}

.poa-date-modal-actions,
.poa-delete-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.poa-edit-project,
.poa-delete-project {
  font-size: 0.85rem;
  color: #64748b;
  margin: 8px 0;
  padding: 8px 12px;
  background: #f1f5f9;
  border-radius: 6px;
}

[data-theme="dark"] .poa-edit-project,
[data-theme="dark"] .poa-delete-project {
  background: #1e293b;
}

.poa-edit-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.poa-edit-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.poa-edit-option:hover {
  background: #e2e8f0;
}

.poa-edit-option.danger {
  color: #dc2626;
}

.poa-edit-option.danger:hover {
  background: #fee2e2;
}

[data-theme="dark"] .poa-edit-option {
  background: #1e293b;
}

[data-theme="dark"] .poa-edit-option:hover {
  background: #334155;
}


/* ==========================================
   POA - BD Team Pool Styles (Right Side)
   ========================================== */

.team-pool-office {
  margin-bottom: 20px;
}

.team-pool-office-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.team-pool-office-header.shanghai {
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.team-pool-office-header.dubai {
  background: linear-gradient(90deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
}

/* POA Matrix title styles */
.poa-matrix-title {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.poa-matrix-title i {
  font-size: 1.2rem;
}

.poa-date-range {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 10px;
}

/* ==========================================
   POA Matrix V2 - Card in Card Design
   ========================================== */

/* OUTER CARD - White with dark grey title */
.poa-outer-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

[data-theme="dark"] .poa-outer-card {
  background: var(--card-bg);
}

.poa-outer-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

[data-theme="dark"] .poa-outer-card-header {
  background: var(--card-bg);
  border-bottom-color: var(--border-color);
}

.poa-outer-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 10px;
}

[data-theme="dark"] .poa-outer-card-title {
  color: var(--text-primary);
}

.poa-outer-card-title i {
  color: #6b7280;
}

/* Legend in outer header - color coded by days */
.poa-outer-card-header .poa-legend {
  display: flex;
  gap: 12px;
  font-size: 0.7rem;
  color: #6b7280;
}

.poa-status-dot.days-10-8 { background: #3b82f6; }  /* Blue */
.poa-status-dot.days-7-5 { background: #8b5cf6; }   /* Purple */
.poa-status-dot.days-4-3 { background: #f97316; }   /* Orange */
.poa-status-dot.days-2-1 { background: #ef4444; }   /* Red */
.poa-status-dot.overdue { background: #dc2626; }     /* Dark Red */

/* INNER CARD - Contains the grid */
.poa-inner-card {
  margin: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

[data-theme="dark"] .poa-inner-card {
  border-color: var(--border-color);
}

/* Remove bottom border from last row in each office section (before completed) */
.poa-office-section:not(.poa-completed-section) .poa-row-v2:last-child {
  border-bottom: none;
}

/* BLACK Header Row - Updated with M2 column */
/* Columns: Project(300) | CAT(80) | TYPE(80) | M2(60) | RMB(60) | AED(60) | STATUS(120) | DELIVERY(120) | ASSIGNED(100) | GANTT(1fr) | DEL(50) */
.poa-grid-header-black {
  display: grid;
  grid-template-columns: 300px 80px 80px 60px 60px 60px 120px 120px 100px 1fr 50px;
  gap: 0;
  background: #1f2937;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.poa-grid-header-black > div {
  padding: 10px;
  border-right: 1px solid #374151;
  display: flex;
  align-items: center;
}

.poa-grid-header-black > div:last-child {
  border-right: none;
  justify-content: center;
}

/* Calendar Days Header - White text on black */
.poa-grid-header-black .poa-calendar-days {
  display: flex;
  width: 100%;
}

.poa-grid-header-black .poa-day-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 0;
  color: #ffffff;
}

.poa-grid-header-black .poa-day-name {
  font-size: 0.55rem;
  font-weight: 600;
  opacity: 0.8;
}

.poa-grid-header-black .poa-day-num {
  font-size: 0.6rem;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Weekends - green font, no background change */
.poa-grid-header-black .poa-day-col.weekend {
  color: #22c55e;
  background: transparent;
}

.poa-grid-header-black .poa-day-col.today .poa-day-num {
  background: #3b82f6;
  color: white;
  font-weight: 700;
}

/* Office Dividers - Exact Pantone Colors */
.poa-office-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Shanghai Blue: #1AA0D0 - Soft gradient to slightly lighter */
.poa-office-divider.shanghai {
  background: linear-gradient(90deg, #1AA0D0 0%, #3BB8E0 100%);
  color: #ffffff;
}

/* Dubai Red: #FF4C4C - Soft gradient to slightly lighter */
.poa-office-divider.dubai {
  background: linear-gradient(90deg, #FF4C4C 0%, #FF7070 100%);
  color: #ffffff;
}

/* Completed section divider - Light grey with rounded top corners */
.poa-office-divider.completed {
  background: #e5e7eb;
  color: #374151;
  border-radius: 12px 12px 0 0;  /* Rounded top corners */
}

[data-theme="dark"] .poa-office-divider.completed {
  background: #4b5563;
  color: #e5e7eb;
}

.poa-office-count {
  font-weight: 400;
  font-size: 0.7rem;
  opacity: 0.9;
  margin-left: auto;
  color: inherit;
}

/* POA Row V2 - Updated grid columns with M2 column */
/* Columns: Project(300) | CAT(80) | TYPE(80) | M2(60) | RMB(60) | AED(60) | STATUS(120) | DELIVERY(120) | ASSIGNED(100) | GANTT(1fr) | DEL(50) */
.poa-row-v2 {
  display: grid;
  grid-template-columns: 300px 80px 80px 60px 60px 60px 120px 120px 100px 1fr 50px;
  gap: 0;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.2s;
  background: #ffffff;
}

.poa-row-v2:hover {
  background: #f9fafb;
}

.poa-row-v2.drag-over {
  background: #dbeafe;
  outline: 2px dashed #3b82f6;
}

[data-theme="dark"] .poa-row-v2 {
  background: var(--card-bg);
}

[data-theme="dark"] .poa-row-v2:hover {
  background: #1e293b;
}

.poa-row-v2 > div {
  padding: 8px 10px;
  border-right: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
}

[data-theme="dark"] .poa-row-v2 > div {
  border-right-color: var(--border-color);
}

.poa-row-v2 > div:last-child {
  border-right: none;
  justify-content: center;
}

/* Project Name Column */
.poa-row-v2 .poa-col-project {
  overflow: hidden;
}

.poa-row-v2 .poa-project-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 290px;
}

[data-theme="dark"] .poa-row-v2 .poa-project-name {
  color: var(--text-primary);
}

/* Category, Typology, and M2 Columns */
.poa-col-category,
.poa-col-typology,
.poa-col-m2 {
  font-size: 0.7rem;
  color: #6b7280;
  text-align: center;
  justify-content: center;
}

.poa-category-text,
.poa-typology-text,
.poa-m2-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.poa-m2-text {
  font-size: 0.65rem;
  font-weight: 500;
}

[data-theme="dark"] .poa-col-category,
[data-theme="dark"] .poa-col-typology,
[data-theme="dark"] .poa-col-m2 {
  color: #9ca3af;
}

/* Quote Input Columns - Full width, no sub-cell box */
.poa-col-quote-rmb,
.poa-col-quote-aed {
  justify-content: center;
  padding: 0 !important;
}

.poa-quote-input {
  width: 100%;
  height: 100%;
  padding: 6px 4px;
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #374151;
}

.poa-quote-input:focus {
  outline: none;
  background: #f0f9ff;
}

.poa-quote-input:hover {
  background: #f9fafb;
}

[data-theme="dark"] .poa-quote-input {
  background: transparent;
  color: #e5e7eb;
}

[data-theme="dark"] .poa-quote-input:focus {
  background: #1e3a5f;
}

[data-theme="dark"] .poa-quote-input:hover {
  background: #374151;
}

/* POA M2 Input */
.poa-m2-input {
  width: 100%;
  height: 100%;
  padding: 6px 4px;
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #374151;
}

.poa-m2-input:focus {
  outline: none;
  background: #f0f9ff;
}

.poa-m2-input:hover {
  background: #f9fafb;
}

[data-theme="dark"] .poa-m2-input {
  background: transparent;
  color: #e5e7eb;
}

[data-theme="dark"] .poa-m2-input:focus {
  background: #1e3a5f;
}

[data-theme="dark"] .poa-m2-input:hover {
  background: #374151;
}

/* Remove number input spinners for M2 */
.poa-m2-input::-webkit-outer-spin-button,
.poa-m2-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.poa-m2-input[type=number] {
  -moz-appearance: textfield;
}

/* POA Read-only fields (synced from CRM) */
.poa-readonly-field {
  opacity: 0.8;
  cursor: default;
}

.poa-readonly-field:hover::after {
  content: ' (CRM)';
  font-size: 0.5rem;
  color: #9ca3af;
}

/* Delivery Arrow for dates beyond visible range */
.poa-delivery-arrow {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #3b82f6;
  font-size: 0.7rem;
  opacity: 0.8;
}

.poa-delivery-arrow i {
  animation: pulse-arrow 1.5s infinite;
}

@keyframes pulse-arrow {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(2px); }
}

/* Status Dropdown */
.poa-status-select {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}

/* Status colors:
   Not Started: Purple
   In Progress: Blue
   Delivered & Waiting: Yellow
   Overdue: Red
   Completed Won: Green
   Completed Lost: Grey
*/
.poa-status-select.not-started {
  background: #ede9fe;
  color: #7c3aed;
}

.poa-status-select.in-progress {
  background: #dbeafe;
  color: #1d4ed8;
}

.poa-status-select.delivered {
  background: #fef3c7;
  color: #b45309;
}

.poa-status-select.overdue {
  background: #fee2e2;
  color: #dc2626;
  animation: pulse-red 2s infinite;
}

.poa-status-select.completed {
  background: #dcfce7;
  color: #16a34a;
}

.poa-status-select.completed-lost {
  background: #f3f4f6;
  color: #6b7280;
}

/* Status dropdown options - always grey in dropdown menu */
.poa-status-select option {
  background: #f3f4f6 !important;
  color: #374151 !important;
  font-weight: 500;
}

/* Delivery Date Input */
.poa-delivery-input {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.7rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
}

.poa-delivery-input:hover {
  border-color: #3b82f6;
}

[data-theme="dark"] .poa-delivery-input {
  background: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Assignee Column - Full member display like team pool */
.poa-col-assignee {
  justify-content: flex-start;
}

/* Full assigned member display (avatar + name + role) */
.poa-assigned-full {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: all 0.2s;
  width: 100%;
}

.poa-assigned-full:hover {
  background: #fee2e2;
}

.poa-assigned-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  flex-shrink: 0;
}

.poa-assigned-avatar.studio-shanghai {
  background: #1AA0D0;
}

.poa-assigned-avatar.studio-dubai {
  background: #FF4C4C;
}

.poa-assigned-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.poa-assigned-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poa-assigned-role {
  font-size: 0.6rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poa-unassign-x {
  color: #ef4444;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.poa-assigned-full:hover .poa-unassign-x {
  opacity: 1;
}

/* Drop zone for unassigned POAs */
.poa-drop-zone {
  width: 100%;
  height: 36px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 0.7rem;
  transition: all 0.2s;
}

.poa-drop-zone:hover,
.poa-row-v2.drag-over .poa-drop-zone {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #eff6ff;
}

/* Calendar/Timeline Column */
.poa-col-calendar {
  padding: 8px 4px !important;
}

.poa-timeline-container {
  position: relative;
  width: 100%;
  height: 20px;
  background: #f3f4f6;
  border-radius: 4px;
}

[data-theme="dark"] .poa-timeline-container {
  background: #1e293b;
}

/* Timeline bars - Color coded by days remaining */
.poa-timeline-bar {
  position: absolute;
  top: 4px;
  height: 12px;
  border-radius: 6px;
  transition: all 0.3s;
}

/* 10-8 days = Blue */
.poa-timeline-bar.bar-blue {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

/* 7-5 days = Purple */
.poa-timeline-bar.bar-purple {
  background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
}

/* 4-3 days = Orange */
.poa-timeline-bar.bar-orange {
  background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
}

/* 2-1 days = Red */
.poa-timeline-bar.bar-red {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

/* Overdue = Dark Red */
.poa-timeline-bar.bar-overdue {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
}

/* Completed = Green */
.poa-timeline-bar.bar-completed {
  background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
}

/* Delivery marker - Long vertical RED line with circle on top */
/* Circle: 10px diameter, Line: 2px wide, 40px tall total */
.poa-delivery-marker {
  position: absolute;
  top: -10px;
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  cursor: default;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poa-delivery-marker::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #ef4444;
}

.poa-delivery-marker::after {
  content: '';
  width: 2px;
  flex: 1;
  background: #ef4444;
}

/* Delivery marker is always RED regardless of bar color */
.poa-delivery-marker.bar-blue::before,
.poa-delivery-marker.bar-blue::after,
.poa-delivery-marker.bar-purple::before,
.poa-delivery-marker.bar-purple::after,
.poa-delivery-marker.bar-orange::before,
.poa-delivery-marker.bar-orange::after,
.poa-delivery-marker.bar-red::before,
.poa-delivery-marker.bar-red::after,
.poa-delivery-marker.bar-overdue::before,
.poa-delivery-marker.bar-overdue::after,
.poa-delivery-marker.bar-completed::before,
.poa-delivery-marker.bar-completed::after { 
  background: #ef4444; 
}

/* Delete Button */
.poa-delete-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.poa-delete-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* COMPLETED CARD - Completely separate independent card */
.poa-completed-card {
  margin-top: 24px;  /* Space between outer card and completed card */
  border-radius: 12px;  /* Rounded corners - independent card */
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .poa-completed-card {
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.poa-completed-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  font-size: 0.85rem;
  color: #374151;
}

[data-theme="dark"] .poa-completed-card-header {
  background: #374151;
  border-bottom-color: #4b5563;
  color: #e5e7eb;
}

.poa-completed-card-header i {
  color: #10b981;
}

.poa-completed-card-header .poa-office-count {
  margin-left: auto;
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 400;
}

/* Completed Header Row - matches active grid with softer grey */
/* Columns: Project(300) | CAT(80) | TYPE(80) | M2(60) | RMB(60) | AED(60) | STATUS(120) | COMPLETED(120) | ASSIGNED(100) | OFFICE(90) | SUSPENDED(1fr) | DEL(50) */
.poa-grid-header-completed {
  display: grid;
  grid-template-columns: 300px 80px 80px 60px 60px 60px 120px 120px 100px 90px 1fr 50px;
  gap: 0;
  background: #808080;
  font-size: 0.6rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.poa-grid-header-completed > div {
  padding: 8px 10px;
  border-right: 1px solid #9a9a9a;
}

.poa-grid-header-completed > div:last-child {
  border-right: none;
}

/* Completed Row - with M2, OFFICE columns and space for SUSPENDED REASON */
/* Columns: Project(300) | CAT(80) | TYPE(80) | M2(60) | RMB(60) | AED(60) | STATUS(120) | COMPLETED(120) | ASSIGNED(100) | OFFICE(90) | SUSPENDED(1fr) | DEL(50) */
.poa-row-completed {
  display: grid;
  grid-template-columns: 300px 80px 80px 60px 60px 60px 120px 120px 100px 90px 1fr 50px;
  gap: 0;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.poa-row-completed > div {
  padding: 8px 10px;
  border-right: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
}

.poa-row-completed > div:last-child {
  border-right: none;
  justify-content: center;
}

.poa-row-completed:last-child {
  border-bottom: none;
}

.poa-row-completed:hover {
  background: #f3f4f6;
}

[data-theme="dark"] .poa-row-completed {
  background: #1f2937;
  border-bottom-color: #374151;
}

[data-theme="dark"] .poa-row-completed > div {
  border-right-color: #374151;
}

[data-theme="dark"] .poa-row-completed:hover {
  background: #374151;
}

/* Quote display in completed rows */
.poa-quote-display {
  font-size: 0.7rem;
  color: #374151;
}

[data-theme="dark"] .poa-quote-display {
  color: #e5e7eb;
}

/* Office column styling - Shanghai (blue) / Dubai (red) */
.poa-col-office {
  display: flex;
  align-items: center;
  justify-content: center;
}

.poa-office-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.poa-col-office.office-shanghai .poa-office-tag {
  background: #3b82f6;
  color: #ffffff;
}

.poa-col-office.office-dubai .poa-office-tag {
  background: #ef4444;
  color: #ffffff;
}

/* Suspended Reason column - dropdown to match CRM */
.poa-col-suspended {
  display: flex;
  align-items: center;
}

.poa-suspended-select {
  width: 100%;
  padding: 4px 4px;
  font-size: 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 16px;
}

.poa-suspended-select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.poa-suspended-select option {
  font-size: 0.7rem;
}

[data-theme="dark"] .poa-suspended-select {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

/* Status select for completed rows - Won = Green, Lost = Dark Grey */
.poa-status-select.won {
  background: #dcfce7;
  color: #16a34a;
}

.poa-status-select.lost {
  background: #4b5563;
  color: #f3f4f6;
}

/* Legacy styles kept for backward compatibility */
.poa-completed-office {
  font-weight: 400;
  font-size: 0.75rem;
  color: #6b7280;
  margin-left: 4px;
}

[data-theme="dark"] .poa-completed-office {
  color: #9ca3af;
}

.poa-row-completed .poa-completed-name {
  font-size: 0.8rem;
  color: #374151;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="dark"] .poa-row-completed .poa-completed-name {
  color: #e5e7eb;
}

.poa-row-completed .poa-completed-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.poa-row-completed .poa-completed-status.won {
  background: #dcfce7;
  color: #16a34a;
}

.poa-row-completed .poa-completed-status.lost {
  background: #fee2e2;
  color: #dc2626;
}

.poa-row-completed .poa-completed-date {
  font-size: 0.7rem;
  color: #6b7280;
  white-space: nowrap;
}

[data-theme="dark"] .poa-row-completed .poa-completed-date {
  color: #9ca3af;
}

/* Completed row - Editable status dropdown (Completed Won = Green, Completed Lost = Grey) */
.poa-row-completed .poa-completed-status-select {
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  background: #dcfce7;
  color: #16a34a;
  appearance: none;
  -webkit-appearance: none;
}

.poa-row-completed .poa-completed-status-select:hover {
  border-color: #86efac;
}

/* Completed Lost = Darker Grey for better visibility */
.poa-row-completed .poa-completed-status-select.lost {
  background: #4b5563;
  color: #f3f4f6;
}

.poa-row-completed .poa-completed-status-select.lost:hover {
  border-color: #6b7280;
}

/* Info compact display for completed rows */
.poa-completed-info-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: #6b7280;
  overflow: hidden;
}

.poa-completed-divider {
  color: #d1d5db;
  font-size: 0.5rem;
}

.poa-completed-category,
.poa-completed-typology {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}

.poa-completed-quote {
  font-weight: 600;
  color: #374151;
}

[data-theme="dark"] .poa-completed-info-compact {
  color: #9ca3af;
}

[data-theme="dark"] .poa-completed-quote {
  color: #e5e7eb;
}

[data-theme="dark"] .poa-completed-divider {
  color: #4b5563;
}

/* Completed row - Date column with label */
.poa-row-completed .poa-completed-date-col {
  display: flex;
  align-items: center;
  gap: 6px;
}

.poa-row-completed .poa-completed-date-label {
  font-size: 0.65rem;
  color: #6b7280;
  white-space: nowrap;
}

[data-theme="dark"] .poa-row-completed .poa-completed-date-label {
  color: #9ca3af;
}

/* Completed row - Editable date input */
.poa-row-completed .poa-completed-date-input {
  padding: 4px 8px;
  font-size: 0.7rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  flex: 1;
  min-width: 100px;
}

.poa-row-completed .poa-completed-date-input:hover {
  border-color: #3b82f6;
}

[data-theme="dark"] .poa-row-completed .poa-completed-date-input {
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}

/* Completed row - Assigned person display with full details */
.poa-row-completed .poa-completed-assigned,
.poa-row-completed .poa-completed-assigned-full {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poa-row-completed .poa-completed-assigned-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.poa-row-completed .poa-completed-assigned-avatar.studio-shanghai {
  background: #1AA0D0;
}

.poa-row-completed .poa-completed-assigned-avatar.studio-dubai {
  background: #FF4C4C;
}

.poa-row-completed .poa-completed-assigned-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.poa-row-completed .poa-completed-assigned-name,
.poa-row-completed .poa-completed-assigned-name-full {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
}

[data-theme="dark"] .poa-row-completed .poa-completed-assigned-name,
[data-theme="dark"] .poa-row-completed .poa-completed-assigned-name-full {
  color: #e5e7eb;
}

.poa-row-completed .poa-completed-assigned-role {
  font-size: 0.65rem;
  color: #6b7280;
}

[data-theme="dark"] .poa-row-completed .poa-completed-assigned-role {
  color: #9ca3af;
}

.poa-row-completed .poa-completed-actions {
  display: flex;
  justify-content: flex-end;
}

/* BD Team Pool - Dynamic height based on content */
#section-poa .team-pool-v2 {
  min-height: auto;
  max-height: none;
  height: auto;
  padding-bottom: 16px;
}

/* Draggable team pool items */
.team-pool-item[draggable="true"] {
  cursor: grab;
}

.team-pool-item[draggable="true"]:active,
.team-pool-item.dragging {
  cursor: grabbing;
  opacity: 0.7;
}

/* Empty row */
.poa-empty-row {
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* POA Full Width (no BD Pool) */
.poa-full-width {
  display: block !important;
}

.poa-full-width .poa-full-matrix {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* POA Assignee Dropdown */
.poa-assignee-dropdown {
  position: relative;
  width: 100%;
}

.poa-assignee-select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #ffffff;
  font-size: 0.7rem;
  color: #374151;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 4px center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 20px;
}

.poa-assignee-select:hover {
  border-color: #3b82f6;
}

.poa-assignee-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .poa-assignee-select {
  background-color: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}

[data-theme="dark"] .poa-assignee-select:hover {
  border-color: #3b82f6;
}

/* Assigned member display with dropdown */
.poa-assigned-member-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.poa-assigned-avatar-small {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.55rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.poa-assigned-avatar-small.studio-shanghai {
  background: linear-gradient(135deg, #1AA0D0, #2AB5E5);
}

.poa-assigned-avatar-small.studio-dubai {
  background: linear-gradient(135deg, #FF4C4C, #FF7070);
}

.poa-assigned-avatar-small.studio-legacy {
  background: linear-gradient(135deg, #9CA3AF, #6B7280);
}

.poa-assigned-info-compact {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.2;
}

.poa-assigned-name-compact {
  font-size: 0.7rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

[data-theme="dark"] .poa-assigned-name-compact {
  color: #f3f4f6;
}

.poa-assigned-role-compact {
  font-size: 0.55rem;
  color: #9ca3af;
  white-space: nowrap;
}

/* Optgroup styling for dropdown */
.poa-assignee-select optgroup {
  font-weight: 700;
  color: #1f2937;
  background: #f3f4f6;
}

.poa-assignee-select option {
  font-weight: 400;
  padding: 4px 8px;
}

[data-theme="dark"] .poa-assignee-select optgroup {
  color: #f3f4f6;
  background: #374151;
}

/* Assigned member with change button */
.poa-assigned-with-change {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.poa-change-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.6rem;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  margin-left: auto;
}

.poa-assigned-with-change:hover .poa-change-btn {
  opacity: 1;
}

.poa-change-btn:hover {
  color: #3b82f6;
}

/* Unassigned dropdown styling */
.poa-assignee-select.poa-unassigned {
  color: #9ca3af;
  font-style: italic;
}

/* Editing mode dropdown */
.poa-assignee-select.poa-editing {
  width: 100%;
}

/* ============================================
   MONTHLY EXPENSES - COMPACT ACCOUNTING STYLE
   ============================================ */

/* Controls Row - Year Selector + Filters (PART B redesign) */
/* Main styling moved to EXPENSE FILTERS ROW section below */

/* Past Months Toggle Button */
.exp-past-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.exp-past-toggle:hover {
  background: var(--bg-secondary);
  border-color: var(--text-secondary);
}
.exp-past-toggle.active {
  background: rgba(34, 163, 85, 0.1);
  border-color: #22a355;
  color: #22a355;
}
.exp-past-toggle i {
  font-size: 0.65rem;
}
.exp-past-toggle span {
  white-space: nowrap;
}

/* Monthly Container - lighter frame */
.monthly-expenses-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Year Accordion - header only has dark gradient, body is transparent */
.exp-year-accordion {
  background: transparent;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: visible;
}
.exp-year-accordion-header {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  border-radius: 8px;
}
.exp-year-accordion > .exp-year-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  color: white;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
}
.exp-year-accordion-header:hover {
  background: linear-gradient(135deg, #2a3544 0%, #404d5e 100%);
}
.exp-year-accordion-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.exp-year-chevron {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  opacity: 0.8;
}
.exp-year-accordion.expanded .exp-year-chevron {
  transform: rotate(90deg);
}
.exp-year-accordion-title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.exp-year-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0;
}
.exp-year-accordion.expanded .exp-year-accordion-body {
  max-height: none;
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px; /* Spacing between month rows */
}

/* Year Summary Bar (legacy - kept for reference) */
.exp-year-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  border-radius: 6px;
  margin-bottom: 10px;
  color: white;
}
.exp-year-summary-label {
  font-size: 0.85rem;
  font-weight: 600;
}
.exp-year-summary-values {
  display: flex;
  gap: 0;
  align-items: center;
}
.exp-year-summary-values span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: right;
}
.exp-year-summary-values span strong {
  font-size: 0.55rem;
  font-weight: 500;
  opacity: 0.7;
  text-transform: uppercase;
}
/* Fixed widths for vertical alignment with month rows */
.exp-year-rmb { color: #fbbf24; width: 70px; min-width: 70px; }
.exp-year-aed { color: rgba(255,255,255,0.6); width: 60px; min-width: 60px; margin-left: 12px; }
.exp-year-usd { color: rgba(255,255,255,0.6); width: 60px; min-width: 60px; margin-left: 12px; }

/* Year Summary 3-Column Layout */
.exp-year-summary-3col {
  display: flex;
  gap: 16px;
  align-items: center;
}
.exp-year-total-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 4px 10px;
  border-radius: 4px;
  min-width: 100px;
}
.exp-year-label {
  font-size: 0.55rem;
  font-weight: 500;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.exp-year-val {
  font-size: 0.95rem;
  font-weight: 700;
}
.exp-year-total-expenses {
  background: rgba(251, 191, 36, 0.2);
}
.exp-year-total-expenses .exp-year-val { color: #fbbf24; }
.exp-year-cash-paid {
  background: rgba(34, 163, 85, 0.2);
}
.exp-year-cash-paid .exp-year-val { color: #22a355; }
.exp-year-outstanding {
  background: rgba(255, 123, 44, 0.2);
}
.exp-year-outstanding .exp-year-val { color: #FF7B2C; }

/* Month Row/Card - Clean bar style */
.exp-month {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Collapsed month header - clean full-width bar */
.exp-month-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  cursor: pointer;
  background: var(--bg-secondary);
  min-height: 35px;
  transition: background 0.15s ease;
}
.exp-month-hdr:hover { 
  background: var(--bg-tertiary); 
}

.exp-month-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px; /* Fixed width for consistent badge alignment */
}
.exp-month-name {
  min-width: 85px; /* Fixed width for month name to align badges */
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.exp-chevron {
  font-size: 0.6rem;
  color: var(--text-secondary);
  transition: transform 0.2s;
  width: 12px;
}
.exp-month.expanded .exp-chevron { transform: rotate(90deg); }
.exp-badge {
  font-size: 0.5rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 8px;
  text-transform: uppercase;
}
.exp-badge.current { background: #22a355; color: white; }
.exp-badge.empty { background: #9ca3af; color: white; }
.exp-badge.initiated { background: #199ACC; color: white; }
/* Month Header Totals - RMB/AED/USD aligned with Year Summary */
.exp-month-totals {
  display: flex;
  gap: 0;
  align-items: center;
}
/* Month Header 3-Column Totals Layout - fixed-width columns for vertical alignment */
.exp-month-totals-3col {
  display: flex;
  gap: 3px;
  align-items: center;
}
.exp-hdr-total-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: 3px;
  /* Fixed width for vertical alignment across all months */
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}
.exp-hdr-label {
  font-size: 0.45rem;
  font-weight: 500;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.15px;
  /* Fixed label width to ensure consistent alignment */
  width: 42px;
  min-width: 42px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.exp-hdr-val {
  font-size: 0.68rem;
  font-weight: 700;
  /* Right-align numbers within their column */
  flex: 1;
  text-align: right;
}
.exp-hdr-total-expenses {
  background: rgba(251, 191, 36, 0.15);
}
.exp-hdr-total-expenses .exp-hdr-val { color: #d97706; }
.exp-hdr-cash-paid {
  background: rgba(34, 163, 85, 0.15);
}
.exp-hdr-cash-paid .exp-hdr-val { color: #22a355; }
.exp-hdr-outstanding {
  background: rgba(255, 123, 44, 0.15);
  /* Wider block for longer "OUTSTANDING" label */
  width: 115px;
  min-width: 115px;
  max-width: 115px;
}
.exp-hdr-outstanding .exp-hdr-label {
  width: 55px;
  min-width: 55px;
}
.exp-hdr-outstanding .exp-hdr-val { color: #FF7B2C; }
.exp-hdr-scheduled {
  background: rgba(100, 180, 255, 0.15);
  /* Wider block for longer "SCHEDULED" label */
  width: 115px;
  min-width: 115px;
  max-width: 115px;
}
.exp-hdr-scheduled .exp-hdr-label {
  width: 55px;
  min-width: 55px;
}
.exp-hdr-scheduled .exp-hdr-val { color: #0066cc; }
.exp-hdr-empty {
  font-size: 0.8rem;
  color: #9ca3af;
}
.exp-hdr-rmb {
  font-size: 0.8rem;
  font-weight: 700;
  color: #FF3B3B;
  width: 70px;
  min-width: 70px;
  text-align: right;
}
.exp-hdr-aed {
  font-size: 0.7rem;
  font-weight: 500;
  color: #9ca3af;
  width: 60px;
  min-width: 60px;
  text-align: right;
  margin-left: 12px;
}
.exp-hdr-usd {
  font-size: 0.7rem;
  font-weight: 500;
  color: #9ca3af;
  width: 60px;
  min-width: 60px;
  text-align: right;
  margin-left: 12px;
}
.exp-hdr-empty {
  font-size: 0.8rem;
  color: #9ca3af;
}

/* Month Body - Card body style when expanded */
.exp-month-body { 
  display: none; 
  padding: 0; 
}
.exp-month.expanded .exp-month-body { 
  display: block;
  background: var(--bg-primary);
  padding: 0;
}

/* ============================================
   EXPANDED MONTH CARD HEADER (PART A)
   Card-style header matching Pending Expenses
   ============================================ */

/* Hide collapsed header when expanded, show expanded header */
.exp-month-hdr-collapsed { display: flex; }
.exp-month-hdr-expanded { display: none; }
.exp-month.expanded .exp-month-hdr-collapsed { display: none; }
.exp-month.expanded .exp-month-hdr-expanded { display: block; }

/* Expanded month card styling */
.exp-month.expanded {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
}

/* Expanded header bar - matches Pending Expenses header */
.exp-month-expanded-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #4a5568 0%, #5a6a7d 100%);
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}
.exp-month-expanded-bar:hover {
  background: linear-gradient(135deg, #525f73 0%, #647385 100%);
}

.exp-month-expanded-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exp-chevron-expanded {
  font-size: 0.7rem;
  opacity: 0.8;
  transition: transform 0.2s;
}

.exp-month-expanded-title {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Expanded badge styling */
.exp-badge-expanded {
  font-size: 0.55rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.exp-badge-expanded.current { background: rgba(34, 163, 85, 0.9); }
.exp-badge-expanded.initiated { background: rgba(25, 154, 204, 0.9); }
.exp-badge-expanded.empty { background: rgba(156, 163, 175, 0.9); }

/* Expanded pills (right side - TOTAL / CASH PAID / OUTSTANDING|SCHEDULED) */
.exp-month-expanded-pills {
  display: flex;
  gap: 8px;
  align-items: center;
}

.exp-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 4px;
}

.exp-pill-label {
  font-size: 0.55rem;
  font-weight: 500;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.exp-pill-val {
  font-size: 0.85rem;
  font-weight: 700;
}

/* Pill color variants */
.exp-pill-total {
  background: rgba(251, 191, 36, 0.2);
}
.exp-pill-total .exp-pill-val { color: #fbbf24; }

.exp-pill-cashpaid {
  background: rgba(34, 163, 85, 0.2);
}
.exp-pill-cashpaid .exp-pill-val { color: #6ee7b7; }

.exp-pill-outstanding {
  background: rgba(255, 123, 44, 0.2);
}
.exp-pill-outstanding .exp-pill-val { color: #fdba74; }

.exp-pill-scheduled {
  background: rgba(100, 180, 255, 0.2);
}
.exp-pill-scheduled .exp-pill-val { color: #93c5fd; }

/* Month body spacing when expanded */
.exp-month.expanded .exp-month-body {
  padding: 0;
  border-top: 1px solid var(--border-color);
}

/* ============================================
   EXPENSE FILTERS ROW (PART B)
   Matches Projects tab filter row exactly
   ============================================ */

.expenses-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.expenses-controls-row .expenses-filters-left {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-wrap: nowrap;
}

.expenses-year-selector,
.expenses-filter-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.expenses-year-selector label,
.expenses-filter-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.expenses-controls-row .filter-select {
  padding: 4px 8px;
  padding-right: 22px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  min-width: 90px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.expenses-controls-row .filter-select:hover {
  border-color: var(--color-red);
}

.expenses-controls-row .filter-select:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.15);
}

/* Payroll Ledger Toggle - Segmented Control */
.payroll-ledger-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.payroll-ledger-toggle .ledger-btn {
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border-right: 1px solid var(--border-color);
}

.payroll-ledger-toggle .ledger-btn:last-child {
  border-right: none;
}

.payroll-ledger-toggle .ledger-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.payroll-ledger-toggle .ledger-btn.active {
  background: #374151;
  color: white;
}

/* Dark mode support for ledger toggle */
[data-theme="dark"] .payroll-ledger-toggle {
  background: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .payroll-ledger-toggle .ledger-btn {
  border-right-color: #374151;
  color: #9ca3af;
}

[data-theme="dark"] .payroll-ledger-toggle .ledger-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

[data-theme="dark"] .payroll-ledger-toggle .ledger-btn.active {
  background: #0066FF;
  color: white;
}

/* View-only hint for All view */
.payroll-view-only-hint {
  font-size: 0.65rem;
  color: #9ca3af;
  font-style: italic;
  margin-left: 8px;
  display: none;
}

.payroll-view-only-hint.visible {
  display: inline;
}

/* ========================================
   EXPENSE LEDGER TOGGLE (matches Payroll)
   ======================================== */
.expense-ledger-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.expense-ledger-toggle .ledger-btn {
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border-right: 1px solid var(--border-color);
}

.expense-ledger-toggle .ledger-btn:last-child {
  border-right: none;
}

.expense-ledger-toggle .ledger-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.expense-ledger-toggle .ledger-btn.active {
  background: #374151;
  color: white;
}

/* Dark mode support for expense ledger toggle */
[data-theme="dark"] .expense-ledger-toggle {
  background: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .expense-ledger-toggle .ledger-btn {
  border-right-color: #374151;
  color: #9ca3af;
}

[data-theme="dark"] .expense-ledger-toggle .ledger-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

[data-theme="dark"] .expense-ledger-toggle .ledger-btn.active {
  background: #0066FF;
  color: white;
}

/* View-only hint for All view */
.expense-view-only-hint {
  font-size: 0.65rem;
  color: #9ca3af;
  font-style: italic;
  margin-left: 8px;
  display: none;
}

.expense-view-only-hint.visible {
  display: inline;
}

/* All view message in Monthly Expenses accordion */
.exp-all-view-message {
  padding: 30px 20px;
  text-align: center;
  background: rgba(0, 102, 255, 0.05);
  border-radius: 8px;
  margin: 10px;
}

.exp-all-view-message p {
  margin: 8px 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.exp-all-view-message p:first-child {
  font-weight: 600;
  color: var(--text-primary);
}

.exp-all-view-message i {
  margin-right: 6px;
  color: #0066FF;
}

/* Expenses All View Table - matches Payroll All layout */
.exp-all-view-table {
  font-size: 0.7rem;
}
.exp-all-view-table th {
  font-size: 0.65rem;
}
.exp-all-view-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.exp-all-view-row:hover {
  background: rgba(0, 0, 0, 0.02);
}
/* Studio header - matches Payroll style */
.exp-studio-header {
  background: rgba(0, 102, 255, 0.06) !important;
  border-top: 1px solid rgba(0, 102, 255, 0.15);
}
.exp-studio-header td {
  padding: 5px 6px !important;
  font-size: 0.65rem;
}
.exp-studio-label {
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Studio subtotal - matches Payroll style */
.exp-studio-subtotal {
  background: rgba(107, 114, 128, 0.08) !important;
  border-top: 1px solid rgba(107, 114, 128, 0.2);
}
.exp-studio-subtotal td {
  padding: 4px 6px !important;
  font-size: 0.65rem;
}
.exp-studio-subtotal-label {
  font-weight: 600;
  color: #374151;
  text-align: right;
  padding-right: 8px !important;
}
.exp-studio-subtotal .exp-subtotal-val {
  font-weight: 600;
  color: var(--text-primary);
}
/* Empty studio row */
.exp-empty-studio-row {
  background: transparent;
}
.exp-empty-studio-msg {
  text-align: center;
  padding: 12px !important;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Dark theme for Expenses All View */
[data-theme="dark"] .exp-all-view-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .exp-studio-header {
  background: rgba(0, 102, 255, 0.12) !important;
  border-color: rgba(0, 102, 255, 0.25);
}
[data-theme="dark"] .exp-studio-label {
  color: #d1d5db;
}
[data-theme="dark"] .exp-studio-subtotal {
  background: rgba(107, 114, 128, 0.15) !important;
  border-color: rgba(107, 114, 128, 0.3);
}
[data-theme="dark"] .exp-studio-subtotal-label {
  color: #d1d5db;
}

/* Empty group row (Dubai compact view) */
.exp-empty-group-row {
  background: rgba(0, 0, 0, 0.02);
}

.exp-empty-group-msg {
  text-align: center;
  padding: 8px 12px !important;
}

.exp-empty-hint {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-style: italic;
}

[data-theme="dark"] .exp-empty-group-row {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .exp-empty-hint {
  color: #6b7280;
}

/* View-only footer message */
.payroll-view-only-footer {
  justify-content: center !important;
}

.payroll-view-only-message {
  font-size: 0.72rem;
  color: #9ca3af;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 6px;
}

.payroll-view-only-message i {
  color: #6b7280;
}

/* Read-only row styling */
.payroll-row.readonly {
  opacity: 0.85;
}

.payroll-row.readonly .payroll-amt-input:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
  cursor: default;
}

/* Search wrapper with clear button - aligned right */
.expenses-search-wrapper {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.expenses-search-input {
  padding: 4px 28px 4px 10px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  width: 180px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.expenses-search-input:hover {
  border-color: var(--color-red);
}

.expenses-search-input:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.15);
}

.expenses-search-input::placeholder {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.expenses-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: none;
  background: #9ca3af;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.2s;
}

.expenses-search-clear:hover {
  background: #6b7280;
}

/* Dark mode adjustments */
[data-theme="dark"] .exp-month-expanded-bar {
  background: linear-gradient(135deg, #374151 0%, #4a5568 100%);
}
[data-theme="dark"] .exp-month-expanded-bar:hover {
  background: linear-gradient(135deg, #404a5a 0%, #566072 100%);
}

/* Compact Expense Table */
.exp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
  table-layout: fixed;
}

/* Month Title Row (integrated header with totals) */
.exp-month-title-row {
  background: #1f2937;
  color: white;
}
.exp-month-title-row th {
  padding: 6px 8px;
  font-weight: 600;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.exp-month-title {
  font-size: 0.75rem;
  text-transform: none !important;
}
.exp-total-hdr {
  text-align: right !important;
  font-size: 0.72rem;
}
.exp-total-hdr .exp-grand-total {
  color: #fbbf24;
  font-weight: 700;
}
.exp-total-hdr.exp-converted {
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
}

/* Column Headers - the only header row in the table */
.exp-header-row {
  background: #374151;
  color: rgba(255,255,255,0.9);
}
.exp-table th {
  padding: 4px 5px;
  text-align: left;
  font-weight: 500;
  font-size: 0.55rem;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.exp-table th:last-child { border-right: none; }

/* Column widths - FIXED for alignment */
/* QTY column REMOVED - width reallocated to RMB/AED/USD for 6+ digit values */
/* For editable table (9 columns: DEL, GRP, ITEM, DESC, RMB, AED, USD, STATUS, PAID DATE, PAID INFO) */
.exp-table.editable .exp-col-grp { width: 90px; min-width: 90px; max-width: 90px; vertical-align: top; }
.exp-table.editable .exp-col-item { width: 110px; min-width: 110px; }
.exp-table.editable .exp-col-desc { width: auto; min-width: 60px; }
.exp-table.editable .exp-col-amt { width: 75px; min-width: 75px; max-width: 85px; text-align: right !important; white-space: nowrap; }
.exp-table.editable .exp-col-aed { width: 70px; min-width: 70px; max-width: 80px; text-align: right !important; white-space: nowrap; }
.exp-table.editable .exp-col-usd { width: 70px; min-width: 70px; max-width: 80px; text-align: right !important; white-space: nowrap; }
.exp-table.editable .exp-col-status { width: 65px; min-width: 65px; max-width: 65px; text-align: center !important; }
.exp-table.editable .exp-col-paidby { width: 75px; min-width: 75px; max-width: 75px; text-align: center !important; }
.exp-table.editable .exp-col-paiddate { width: 95px; min-width: 95px; max-width: 95px; text-align: center !important; }
.exp-table.editable .exp-col-late { width: 155px; min-width: 155px; max-width: 155px; text-align: center !important; }

/* For readonly table (9 columns: GRP, ITEM, DESC, RMB, AED, USD, STATUS, PAID DATE, PAID INFO) */
.exp-table.readonly .exp-col-grp { width: 90px; min-width: 90px; max-width: 90px; vertical-align: top; }
.exp-table.readonly .exp-col-item { width: 110px; min-width: 110px; }
.exp-table.readonly .exp-col-desc { width: auto; min-width: 50px; }
.exp-table.readonly .exp-col-amt { width: 80px; min-width: 80px; max-width: 90px; text-align: right !important; white-space: nowrap; }
.exp-table.readonly .exp-col-aed { width: 75px; min-width: 75px; max-width: 85px; text-align: right !important; white-space: nowrap; }
.exp-table.readonly .exp-col-usd { width: 75px; min-width: 75px; max-width: 85px; text-align: right !important; white-space: nowrap; }
.exp-table.readonly .exp-col-status { width: 70px; min-width: 70px; max-width: 70px; text-align: center !important; }
.exp-table.readonly .exp-col-paidby { width: 75px; min-width: 75px; max-width: 75px; text-align: center !important; }
.exp-table.readonly .exp-col-paiddate { width: 90px; min-width: 90px; max-width: 90px; text-align: center !important; }
.exp-table.readonly .exp-col-late { width: 155px; min-width: 155px; max-width: 155px; text-align: center !important; }

/* Paid Info column styling */
.exp-late-text {
  font-size: 0.65rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.exp-late-text.has-late {
  color: #ef4444;
  font-weight: 600;
}
.exp-late-text.on-time {
  color: #22c55e;
  font-weight: 500;
}

/* Table Body */
.exp-table tbody tr {
  border-bottom: 1px solid var(--border-color);
}
.exp-table tbody tr.exp-row {
  height: 24px; /* Compact row height */
}
.exp-table td {
  padding: 2px 5px;
  vertical-align: middle;
  border-right: 1px solid var(--border-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exp-table td:last-child { border-right: none; }

/* Numeric columns - QTY column removed */
.exp-table td.exp-col-amt,
.exp-table td.exp-col-aed,
.exp-table td.exp-col-usd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Converted values (AED/USD) - light grey */
.exp-converted, .exp-converted-hdr {
  color: #9ca3af !important;
}
.exp-item-aed, .exp-item-usd, .exp-item-rmb {
  color: #9ca3af;
  font-size: 0.65rem;
}

/* Dubai view: AED is base currency (bold/primary), RMB is converted (muted) */
/* IMPORTANT: Only target td cells, not th headers - headers need white text on dark background */
.exp-table.dubai-view td.exp-col-aed:not(.exp-converted) {
  color: var(--text-primary) !important;
  font-weight: 500;
}
.exp-table.dubai-view td.exp-col-amt {
  color: #9ca3af !important;
}
/* Dubai view: AED header must be fully white/visible */
.exp-table.dubai-view th.exp-col-aed,
.payroll-table.dubai-view th.exp-col-aed,
table.exp-table.dubai-view th.exp-col-aed,
table.dubai-view th.exp-col-aed,
.dubai-view .exp-col-aed,
th.exp-col-aed {
  color: #ffffff !important;
  font-weight: 600 !important;
}
/* Dubai AED input styling */
.exp-amt-aed {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 0.7rem;
  text-align: right;
  background: var(--bg-input);
}
.exp-amt-aed:focus {
  outline: none;
  border-color: #0066FF;
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
}
/* Base currency column indicator */
.exp-base-currency {
  color: var(--text-primary) !important;
  font-weight: 500;
}

/* Group cell container - holds add button and label */
.exp-grp-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Inline add button in GROUP cell */
.exp-grp-add-btn {
  width: 14px;
  height: 14px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(34, 163, 85, 0.4);
  color: #22a355;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s;
  border-radius: 2px;
  font-size: 0.5rem;
  flex-shrink: 0;
}
.exp-grp-add-btn:hover {
  opacity: 1;
  background: #22a355;
  color: white;
  border-color: #22a355;
}
.exp-grp-add-btn i {
  font-size: 0.45rem;
  line-height: 1;
}

/* Group label */
.exp-grp-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 3px 0;
  line-height: 1.2;
  word-wrap: break-word;
  white-space: normal;
}

/* Delete button - shows on hover or always visible */
.exp-col-del {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  text-align: center !important;
  padding: 2px !important;
  vertical-align: middle;
}
.exp-del-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 38, 38, 0.1);
  border: none;
  color: #dc2626;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s;
  border-radius: 3px;
}
.exp-del-btn:hover {
  opacity: 1;
  background: rgba(220, 38, 38, 0.2);
}
.exp-del-btn i { font-size: 0.6rem; }

/* Inputs - compact */
.exp-input {
  width: 100%;
  padding: 1px 3px;
  font-size: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: var(--bg-primary);
  box-sizing: border-box;
}
.exp-input:focus {
  outline: none;
  border-color: #0066FF;
}
.exp-input:disabled {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
  cursor: not-allowed;
}
.exp-select:disabled {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
  cursor: not-allowed;
}
.exp-qty {
  text-align: center;
  width: 30px !important;
}
.exp-amt {
  text-align: right;
  width: 55px !important;
}
.exp-desc {
  width: 100%;
}
.exp-desc-text {
  color: var(--text-secondary);
  font-size: 0.62rem;
}

/* Date input - ensure full DD/MM/YYYY visible */
.exp-paid-date {
  width: 90px !important;
  min-width: 90px;
  font-size: 0.6rem;
  text-align: center;
}
.exp-paid-date::-webkit-calendar-picker-indicator {
  margin-left: 0;
  padding: 0;
}

/* STATUS and PAID BY select dropdowns */
.exp-select {
  width: 100%;
  padding: 1px 2px;
  font-size: 0.58rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: var(--bg-primary);
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}
.exp-select:focus {
  outline: none;
  border-color: #0066FF;
}

/* STATUS dropdown styles - 4 states: N/A (grey), SCHEDULED (blue), PENDING (orange), PAID (green) */
.exp-payment-status.exp-status-na {
  background: rgba(156, 163, 175, 0.15);
  border-color: rgba(156, 163, 175, 0.3);
  color: #6b7280;
}
.exp-payment-status.exp-status-scheduled {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #2563eb;
}
.exp-payment-status.exp-status-paid {
  background: rgba(34, 163, 85, 0.12);
  border-color: rgba(34, 163, 85, 0.3);
  color: #16a34a;
}
.exp-payment-status.exp-status-pending {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
  color: #d97706;
}

/* PAID BY dropdown styles */
.exp-paid-by.exp-paidby-company {
  background: rgba(0, 102, 255, 0.1);
  border-color: rgba(0, 102, 255, 0.25);
  color: #0066FF;
}
.exp-paid-by.exp-paidby-employee {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
  color: #7c3aed;
}

/* STATUS and PAID BY badges for read-only */
.exp-status-badge, .exp-paidby-badge {
  display: inline-block;
  padding: 1px 4px;
  font-size: 0.52rem;
  font-weight: 600;
  border-radius: 2px;
  text-transform: uppercase;
}
.exp-status-badge.exp-status-na {
  background: rgba(156, 163, 175, 0.15);
  color: #6b7280;
}
.exp-status-badge.exp-status-scheduled {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}
.exp-status-badge.exp-status-paid {
  background: rgba(34, 163, 85, 0.12);
  color: #16a34a;
}
.exp-status-badge.exp-status-pending {
  background: rgba(251, 191, 36, 0.15);
  color: #d97706;
}

/* Read-only rows in All view */
.pending-row.readonly,
.cashpaid-row.readonly {
  background: rgba(0, 0, 0, 0.02);
}
.pending-row.readonly td,
.cashpaid-row.readonly td {
  opacity: 0.9;
}

.exp-paidby-badge.exp-paidby-company {
  background: rgba(0, 102, 255, 0.1);
  color: #0066FF;
}
.exp-paidby-badge.exp-paidby-employee {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

/* OFFICE badges for Pending/Cash Paid/All view tables */
.office-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}
.office-badge.office-shanghai {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}
.office-badge.office-dubai {
  background: rgba(234, 179, 8, 0.15);
  color: #ca8a04;
}
.pending-col-office,
.cashpaid-col-office {
  width: 70px;
  text-align: center;
}

/* All view empty message */
.exp-all-empty-msg {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-style: italic;
}

/* OFFICE column in expense table */
.exp-col-office {
  width: 70px;
  text-align: center;
}

/* Subtotal row */
.exp-subtotal-row {
  background: rgba(0, 102, 255, 0.04) !important;
  border-top: 1px solid rgba(0, 102, 255, 0.15);
}
.exp-subtotal-row td {
  padding: 3px 5px;
  font-size: 0.62rem;
}
.exp-subtotal-label {
  text-align: right !important;
  font-weight: 500;
  color: var(--text-secondary);
  padding-right: 8px !important;
}
.exp-subtotal, .exp-subtotal-val {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.exp-aed, .exp-usd {
  font-weight: 500;
  color: #9ca3af;
}

/* Monthly Total rows (3 rows at footer of table) */
.exp-monthly-total-row {
  background: #1f2937 !important;
  color: white;
}
.exp-monthly-total-row td {
  padding: 5px 5px;
  border-right-color: rgba(255,255,255,0.1);
}
.exp-monthly-total-label {
  text-align: right !important;
  font-weight: 600;
  font-size: 0.62rem;
  padding-right: 10px !important;
}
.exp-monthly-total-val {
  font-weight: 700;
  color: #fbbf24 !important;
  white-space: nowrap;
}
.exp-monthly-total-row .exp-converted {
  color: rgba(255,255,255,0.5) !important;
}

/* Three distinct total rows */
/* TOTAL EXPENSES - main dark row (for Expenses module) */
.exp-monthly-total-row.exp-total-expenses {
  background: #1f2937 !important;
}
.exp-monthly-total-row.exp-total-expenses .exp-monthly-total-val {
  color: #fbbf24 !important; /* Yellow for main total */
}

/* TOTAL PAYROLL - main dark row (for Payroll module - same styling as expenses) */
.exp-monthly-total-row.exp-total-payroll {
  background: #1f2937 !important;
}
.exp-monthly-total-row.exp-total-payroll .exp-monthly-total-val {
  color: #fbbf24 !important; /* Yellow for main total */
}

/* Dubai view: AED header must be bright white - HIGH SPECIFICITY */
.exp-table.dubai-view th.exp-col-aed,
.dubai-view th.exp-col-aed,
table.dubai-view th.exp-col-aed {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Dubai view: AED in TOTAL row must be white/visible - HIGH SPECIFICITY */
.exp-table.dubai-view .exp-monthly-total-row .exp-col-aed,
.exp-table.dubai-view .exp-monthly-total-row .exp-month-aed,
.exp-table.dubai-view .exp-monthly-total-row.exp-total-payroll .exp-month-aed,
.exp-table.dubai-view .exp-monthly-total-row.exp-total-payroll .exp-col-aed,
.exp-table.dubai-view .exp-monthly-total-row.exp-total-expenses .exp-month-aed,
.exp-table.dubai-view .exp-monthly-total-row.exp-total-expenses .exp-col-aed,
.dubai-view .exp-monthly-total-row .exp-month-aed,
.dubai-view .exp-total-payroll .exp-month-aed,
.dubai-view .exp-total-expenses .exp-month-aed {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* CASH PAID - slightly lighter */
.exp-monthly-total-row.exp-cash-paid {
  background: #374151 !important;
}
.exp-monthly-total-row.exp-cash-paid .exp-monthly-total-val,
.exp-monthly-total-row.exp-cash-paid .exp-cash-rmb,
.exp-monthly-total-row.exp-cash-paid .exp-cash-aed,
.exp-monthly-total-row.exp-cash-paid .exp-cash-usd {
  color: #34d399 !important; /* Green for cash paid */
}
.exp-cash-paid-label {
  color: rgba(255,255,255,0.8) !important;
}

/* OUTSTANDING - warning style */
.exp-monthly-total-row.exp-outstanding {
  background: #4b5563 !important;
}
.exp-monthly-total-row.exp-outstanding .exp-monthly-total-val,
.exp-monthly-total-row.exp-outstanding .exp-outstanding-rmb,
.exp-monthly-total-row.exp-outstanding .exp-outstanding-aed,
.exp-monthly-total-row.exp-outstanding .exp-outstanding-usd {
  color: #fb923c !important; /* Orange for outstanding */
}
.exp-outstanding-label {
  color: rgba(255,255,255,0.8) !important;
}

/* SCHEDULED - future month style */
.exp-monthly-total-row.exp-scheduled-total {
  background: #4b5563 !important;
}
.exp-monthly-total-row.exp-scheduled-total .exp-monthly-total-val,
.exp-monthly-total-row.exp-scheduled-total .exp-scheduled-rmb,
.exp-monthly-total-row.exp-scheduled-total .exp-scheduled-aed,
.exp-monthly-total-row.exp-scheduled-total .exp-scheduled-usd {
  color: #64b4ff !important; /* Blue for scheduled */
}
.exp-scheduled-label {
  color: rgba(255,255,255,0.8) !important;
}

/* Legacy add row styles (kept for reference, no longer used)
.exp-add-row - removed, add button now inline in GROUP cell */

/* Footer with Cancel, Save, Delete buttons */
.exp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.exp-footer-left { }
.exp-footer-right {
  display: flex;
  gap: 8px;
}
.exp-cancel-btn {
  padding: 4px 12px;
  font-size: 0.68rem;
  font-weight: 500;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.exp-cancel-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.exp-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 0.68rem;
  font-weight: 600;
  background: #22a355;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.exp-save-btn:hover { background: #1e8f4a; }
.exp-delete-month-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 500;
  background: transparent;
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.exp-delete-month-btn:hover {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

/* Delete Month Modal */
.exp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.exp-modal {
  background: var(--bg-primary);
  border-radius: 8px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.exp-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: #dc2626;
  color: white;
}
.exp-modal-icon {
  font-size: 1.2rem;
}
.exp-modal-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}
.exp-modal-body {
  padding: 20px;
}
.exp-modal-body p {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.exp-modal-detail {
  color: var(--text-secondary) !important;
  font-size: 0.75rem !important;
}
.exp-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}
.exp-modal-cancel {
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
}
.exp-modal-cancel:hover {
  background: var(--bg-tertiary);
}
.exp-modal-confirm {
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.exp-modal-confirm:hover {
  background: #b91c1c;
}

/* Initialize section */
.exp-init {
  padding: 20px;
  text-align: center;
}
.exp-init p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.exp-init-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #0066FF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.exp-init-btn:hover { background: #0052cc; }
.exp-init-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.exp-init-copy-btn {
  background: #059669; /* green for copy action */
}
.exp-init-copy-btn:hover { background: #047857; }
.exp-init-hint {
  font-size: 0.7rem;
  color: #9ca3af;
  font-style: italic;
  margin-top: 8px;
}
.exp-init-note {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 6px;
}

/* Empty state */
.exp-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Dark theme */
[data-theme="dark"] .exp-month-hdr { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .exp-month-hdr:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .exp-header-row { background: #4b5563; }
[data-theme="dark"] .exp-input { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .exp-subtotal-row { background: rgba(0,102,255,0.08) !important; }
[data-theme="dark"] .exp-footer { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .exp-modal { background: #1f2937; }
[data-theme="dark"] .exp-modal-footer { background: rgba(0,0,0,0.2); }

/* ============================================
   PENDING EXPENSES SECTION
   Consolidated view of all PENDING items
   ============================================ */

.pending-expenses-section {
  margin-top: 24px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.pending-expenses-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FF7B2C 0%, #FF9B50 100%);
  color: white;
}

.pending-expenses-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pending-expenses-header h3 i {
  font-size: 0.85rem;
}

/* Pending Totals */
.pending-expenses-totals {
  display: flex;
  align-items: center;
}

.pending-total-block {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 4px;
}

.pending-total-label {
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pending-total-val {
  font-size: 0.95rem;
  font-weight: 700;
}

.pending-rmb {
  color: #fff;
}

.pending-total-derived {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.8;
}

/* Empty State */
.pending-empty {
  padding: 40px 20px;
  text-align: center;
  color: #22a355;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pending-empty i {
  font-size: 2rem;
  opacity: 0.6;
}

.pending-empty span {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Pending Table */
.pending-expenses-table-container {
  padding: 0;
}

.pending-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.62rem;
  table-layout: auto;
}

/* Compact mode - reduced padding and font sizes (target ~50% height reduction) */
.pending-table-compact th {
  padding: 4px 6px;
}
.pending-table-compact td {
  padding: 3px 6px;
  line-height: 1.2;
}

.pending-table thead {
  background: #374151;
  color: white;
}

.pending-table th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border-color);
}

.pending-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.pending-table tbody tr:hover:not(.pending-group-header):not(.pending-subtotal-row) {
  background: var(--bg-secondary);
}

.pending-table td {
  padding: 3px 6px;
  vertical-align: middle;
  line-height: 1.2;
}

/* Column widths - unified layout (no PERIOD column) */
.pending-col-item { width: auto; }
.pending-col-amt { width: 70px; text-align: right; font-weight: 600; }
.pending-col-aed { width: 60px; text-align: right; font-size: 0.58rem; }
.pending-col-usd { width: 55px; text-align: right; color: #9ca3af; font-size: 0.58rem; }
.pending-col-paidby { width: 75px; text-align: center; }
.pending-col-status { width: 75px; text-align: center; }
.pending-col-paiddate { width: 90px; text-align: center; }

/* TASK A: Payroll-specific columns - separate Employee + Salary Component */
.pending-col-component { 
  width: auto; 
  font-weight: 600; 
  font-size: 0.62rem; 
}
.pending-col-employee { 
  width: 110px; 
  min-width: 100px;
  font-size: 0.62rem;
  color: var(--text-primary);
}

/* Payroll Pending/Cash Paid table header - stronger white for AED/EMPLOYEE */
.pending-table th.pending-col-aed,
.pending-table th.pending-col-employee,
.cashpaid-table th.cashpaid-col-aed,
.cashpaid-table th.cashpaid-col-employee {
  color: #ffffff !important;
  font-weight: 600 !important;
}
/* Also ensure Monthly Payroll accordion headers are visible */
.exp-table th.exp-col-aed,
.exp-table th.exp-col-grp {
  color: #ffffff !important;
  font-weight: 600 !important;
}
/* Dubai currency emphasis - AED is primary, RMB is secondary */
.dubai-primary {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.dubai-secondary {
  color: #9ca3af !important;
  font-weight: 400 !important;
}
/* Default: AED column is grey (Shanghai view) */
.pending-col-aed,
.cashpaid-col-aed {
  color: #9ca3af;
}
/* Dubai rows: make AED values stand out */
.pending-row.dubai-item .pending-col-aed,
.cashpaid-row.dubai-item .cashpaid-col-aed {
  color: var(--text-primary) !important;
  font-weight: 600;
}
/* Dubai rows: make RMB values muted */
.pending-row.dubai-item .pending-col-amt,
.cashpaid-row.dubai-item .cashpaid-col-amt {
  color: #9ca3af !important;
  font-weight: 400;
}
.cashpaid-col-component { 
  width: auto; 
  font-weight: 600; 
  font-size: 0.62rem; 
}
.cashpaid-col-employee { 
  width: 110px; 
  min-width: 100px;
  font-size: 0.62rem;
  color: var(--text-primary);
}

/* Item cell - compact */
.pending-item-name {
  display: inline;
  font-weight: 600;
  font-size: 0.62rem;
  color: var(--text-primary);
}

.pending-item-group {
  display: inline;
  font-size: 0.54rem;
  color: var(--text-secondary);
  margin-left: 4px;
}
.pending-item-group::before {
  content: "·";
  margin-right: 3px;
  color: #9ca3af;
}

/* Status select in pending view - compact */
.pending-status-select {
  padding: 2px 4px;
  font-size: 0.56rem;
  font-weight: 600;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

.pending-status-select.exp-status-pending {
  background: rgba(255, 123, 44, 0.15);
  color: #FF7B2C;
}

.pending-status-select.exp-status-paid {
  background: rgba(34, 163, 85, 0.15);
  color: #22a355;
}

/* Date input - compact */
.pending-date-input {
  padding: 2px 3px;
  font-size: 0.54rem;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 100%;
}

/* Paid by badge - compact */
.pending-row .exp-paidby-badge {
  font-size: 0.52rem;
  padding: 1px 3px;
}

.pending-date-input:disabled {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* Hide Paid Items toggle button */
.pending-hide-paid-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: 12px;
}
.pending-hide-paid-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.pending-hide-paid-btn.active {
  background: rgba(34, 163, 85, 0.3);
  border-color: rgba(34, 163, 85, 0.5);
}

/* Month group header row - single solid grey bar across ALL cells */
.pending-group-header {
  background: #e5e7eb !important;
}
.pending-group-header td {
  padding: 5px 6px !important;
  background: #e5e7eb !important;
  border: none !important;
}
.pending-group-title {
  font-size: 0.66rem;
  font-weight: 700;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pending-group-title i {
  color: #FF7B2C;
  font-size: 0.62rem;
}
.pending-group-count {
  font-size: 0.54rem;
  font-weight: 500;
  color: #6b7280;
  margin-left: 2px;
}

/* Monthly subtotal row - full-width blue background across ALL cells */
.pending-subtotal-row {
  background: rgba(0, 102, 255, 0.08) !important;
  border-top: 1px solid rgba(0, 102, 255, 0.15);
}
.pending-subtotal-row td {
  padding: 4px 6px !important;
  background: rgba(0, 102, 255, 0.08) !important;
}
.pending-subtotal-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: #0066FF;
  text-align: right;
  padding-right: 10px !important;
}
.pending-subtotal-val {
  font-weight: 700 !important;
  color: #0066FF !important;
  font-size: 0.58rem;
}

/* Paid row styling (slightly muted) */
.pending-row-paid {
  background: rgba(34, 163, 85, 0.08);
}
.pending-row-paid .pending-item-name,
.pending-row-paid .pending-item-group,
.pending-row-paid .pending-col-amt,
.pending-row-paid .pending-col-component,
.pending-row-paid .pending-col-employee {
  opacity: 0.7;
}

/* "Paid just now" session hint (TASK B) */
.paid-just-now {
  color: #22a355;
  font-weight: 500;
  font-size: 11px;
  background: rgba(34, 163, 85, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
[data-theme="dark"] .paid-just-now {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
}

/* Dark theme for pending expenses */
[data-theme="dark"] .pending-expenses-section {
  background: var(--bg-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pending-table thead {
  background: #1f2937;
}

[data-theme="dark"] .pending-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .pending-date-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pending-group-header {
  background: #374151 !important;
}
[data-theme="dark"] .pending-group-header td {
  background: #374151 !important;
}
[data-theme="dark"] .pending-subtotal-row,
[data-theme="dark"] .pending-subtotal-row td {
  background: rgba(0, 102, 255, 0.12) !important;
}
[data-theme="dark"] .pending-group-title {
  color: #e5e7eb;
}
[data-theme="dark"] .pending-group-count {
  color: #9ca3af;
}
[data-theme="dark"] .pending-row-paid {
  background: rgba(34, 163, 85, 0.06);
}
[data-theme="dark"] .pending-subtotal-row {
  background: rgba(0, 102, 255, 0.1);
}
[data-theme="dark"] .pending-subtotal-label,
[data-theme="dark"] .pending-subtotal-val {
  color: #60a5fa !important;
}

/* ============================================
   RECENTLY PAID (THIS SESSION) SECTION
   Safe UX: allows reverting PAID -> PENDING
   Does NOT affect Outstanding totals
   ============================================ */

.recently-paid-section {
  margin-top: 20px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(34, 163, 85, 0.04) 0%, rgba(34, 163, 85, 0.08) 100%);
  border: 1px solid rgba(34, 163, 85, 0.2);
  border-radius: 8px;
}

.recently-paid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.recently-paid-header h4 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #22a355;
  display: flex;
  align-items: center;
  gap: 6px;
}

.recently-paid-header h4 i {
  font-size: 0.7rem;
}

.recently-paid-actions {
  display: flex;
  gap: 8px;
}

.recently-paid-clear-btn {
  padding: 4px 10px;
  font-size: 0.62rem;
  font-weight: 500;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.recently-paid-clear-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}

.recently-paid-note {
  font-size: 0.58rem;
  color: #6b7280;
  margin: 0 0 10px 0;
  font-style: italic;
}

.recently-paid-table {
  background: rgba(255, 255, 255, 0.5);
}

.recently-paid-row {
  background: rgba(34, 163, 85, 0.06) !important;
}

.recently-paid-row:hover {
  background: rgba(34, 163, 85, 0.1) !important;
}

/* Dark theme for recently paid */
[data-theme="dark"] .recently-paid-section {
  background: linear-gradient(135deg, rgba(34, 163, 85, 0.06) 0%, rgba(34, 163, 85, 0.1) 100%);
  border-color: rgba(34, 163, 85, 0.25);
}

[data-theme="dark"] .recently-paid-header h4 {
  color: #4ade80;
}

[data-theme="dark"] .recently-paid-note {
  color: #9ca3af;
}

[data-theme="dark"] .recently-paid-table {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .recently-paid-row {
  background: rgba(34, 163, 85, 0.08) !important;
}

[data-theme="dark"] .recently-paid-row:hover {
  background: rgba(34, 163, 85, 0.12) !important;
}

/* ============================================
   CASH PAID SUMMARY SECTION
   Shows cash outflow per month by paid_date
   ============================================ */

.cashpaid-summary-section {
  margin-top: 24px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.cashpaid-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #22a355 0%, #34d399 100%);
  color: white;
}

.cashpaid-summary-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cashpaid-summary-header h3 i {
  font-size: 0.85rem;
}

/* Cash Paid Totals */
.cashpaid-summary-totals {
  display: flex;
  align-items: center;
}

.cashpaid-total-block {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 4px;
}

.cashpaid-total-label {
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cashpaid-total-val {
  font-size: 0.95rem;
  font-weight: 700;
}

.cashpaid-rmb {
  color: #fff;
}

.cashpaid-total-derived {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.8;
}

/* Empty State */
.cashpaid-empty {
  padding: 40px 20px;
  text-align: center;
  color: #22a355;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cashpaid-empty i {
  font-size: 2rem;
  opacity: 0.6;
}

.cashpaid-empty span {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Cash Paid Table */
.cashpaid-summary-table-container {
  padding: 0;
}

.cashpaid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.62rem;
  table-layout: auto;
}

/* Compact mode */
.cashpaid-table-compact th {
  padding: 4px 6px;
}
.cashpaid-table-compact td {
  padding: 3px 6px;
  line-height: 1.2;
}

.cashpaid-table thead {
  background: #374151;
  color: white;
}

.cashpaid-table th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border-color);
}

.cashpaid-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.cashpaid-table tbody tr:hover:not(.cashpaid-group-header):not(.cashpaid-subtotal-row) {
  background: var(--bg-secondary);
}

.cashpaid-table td {
  padding: 3px 6px;
  vertical-align: middle;
  line-height: 1.2;
}

/* Column widths - Problem 6: wider for full month names */
.cashpaid-col-item { width: auto; }
.cashpaid-col-expmonth { width: 110px; text-align: center; font-size: 0.62rem; color: var(--text-primary); font-weight: 500; }
.cashpaid-col-amt { width: 70px; text-align: right; font-weight: 600; }
.cashpaid-col-aed { width: 60px; text-align: right; font-size: 0.58rem; }
.cashpaid-col-usd { width: 55px; text-align: right; color: #9ca3af; font-size: 0.58rem; }
.cashpaid-col-paidby { width: 75px; text-align: center; }
.cashpaid-col-paiddate { width: 110px; text-align: center; font-size: 0.62rem; color: #22a355; font-weight: 500; }

/* Problem 7: Header typography - PAID DATE green emphasis, BELONGS TO MONTH lighter grey */
.cashpaid-table th.cashpaid-col-expmonth {
  font-weight: 600;
  font-size: 0.62rem;
  color: #9ca3af; /* Lighter grey - lower visual priority */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cashpaid-table th.cashpaid-col-paiddate {
  font-weight: 600;
  font-size: 0.62rem;
  color: #22a355; /* Green - strongest visual anchor */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Item cell - compact */
.cashpaid-item-name {
  display: inline;
  font-weight: 600;
  font-size: 0.62rem;
  color: var(--text-primary);
}

.cashpaid-item-group {
  display: inline;
  font-size: 0.54rem;
  color: var(--text-secondary);
  margin-left: 4px;
}
.cashpaid-item-group::before {
  content: "·";
  margin-right: 3px;
  color: #9ca3af;
}

/* Paid by badge - compact */
.cashpaid-row .exp-paidby-badge {
  font-size: 0.52rem;
  padding: 1px 3px;
}

/* Payment month group header row - solid green background */
.cashpaid-group-header {
  background: #d1fae5 !important;
}
.cashpaid-group-header td {
  padding: 5px 6px !important;
  background: #d1fae5 !important;
  border: none !important;
}
.cashpaid-group-title {
  font-size: 0.66rem;
  font-weight: 700;
  color: #047857;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cashpaid-group-title i {
  color: #22a355;
  font-size: 0.62rem;
}
.cashpaid-group-count {
  font-size: 0.54rem;
  font-weight: 500;
  color: #059669;
  margin-left: 2px;
}

/* Monthly subtotal row - green tint */
.cashpaid-subtotal-row {
  background: rgba(34, 163, 85, 0.08) !important;
  border-top: 1px solid rgba(34, 163, 85, 0.15);
}
.cashpaid-subtotal-row td {
  padding: 4px 6px !important;
  background: rgba(34, 163, 85, 0.08) !important;
}
.cashpaid-subtotal-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: #22a355;
  text-align: right;
  padding-right: 10px !important;
}
.cashpaid-subtotal-val {
  font-weight: 700 !important;
  color: #22a355 !important;
  font-size: 0.58rem;
}

/* Dark theme for cash paid summary */
[data-theme="dark"] .cashpaid-summary-section {
  background: var(--bg-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .cashpaid-table thead {
  background: #1f2937;
}

[data-theme="dark"] .cashpaid-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .cashpaid-group-header {
  background: rgba(34, 163, 85, 0.2) !important;
}
[data-theme="dark"] .cashpaid-group-header td {
  background: rgba(34, 163, 85, 0.2) !important;
}
[data-theme="dark"] .cashpaid-group-title {
  color: #34d399;
}
[data-theme="dark"] .cashpaid-group-count {
  color: #6ee7b7;
}

[data-theme="dark"] .cashpaid-subtotal-row,
[data-theme="dark"] .cashpaid-subtotal-row td {
  background: rgba(34, 163, 85, 0.12) !important;
}
[data-theme="dark"] .cashpaid-subtotal-label,
[data-theme="dark"] .cashpaid-subtotal-val {
  color: #34d399 !important;
}

[data-theme="dark"] .cashpaid-col-paiddate {
  color: #34d399;
}

/* ============================================
   MONTHLY DAILY UNASSIGNED HOURS GRID
   Resources Tab - Primary view with day columns
   ============================================ */

/* ============================================
   SHARED TITLE BAR STYLING FOR CHART 2 & CHART 3
   Both charts use identical DETACHED title bar:
   - Light grey background (OUTSIDE the card)
   - Dark text for readability
   - Same navigation buttons
   ============================================ */

/* Chart 2 (Admin Time Source) Title Bar - DETACHED, LIGHT GREY */
.utilization-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0; /* No gap - card follows immediately */
  padding: 0.6rem 1rem;
  background: #e5e7eb; /* Light grey - DETACHED from card */
  border-radius: 8px 8px 0 0;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.utilization-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937; /* Dark text on light grey */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.utilization-header h2 i {
  color: #6366f1; /* Indigo accent */
}

/* Chart 3 (Matrix) Section - Card container */
.monthly-unassigned-section {
  margin-top: 2rem;
}

/* Chart 3 (Matrix) Title Bar - DETACHED, LIGHT GREY (same as Chart 2) */
.monthly-unassigned-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: #e5e7eb; /* Light grey - DETACHED from card */
  border-radius: 8px 8px 0 0;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.monthly-unassigned-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937; /* Dark text on light grey */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.monthly-unassigned-header h2 i {
  color: #6366f1; /* Indigo accent - same as Chart 2 */
}

/* Month Navigation - Designed for light grey title bar */
.month-navigation {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.month-nav-btn {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
}

.month-nav-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.month-nav-btn.today-btn {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
}

.month-nav-btn.today-btn:hover {
  background: #4f46e5;
  border-color: #4f46e5;
}

/* Grid Wrapper - Card container with black header at top */
.monthly-unassigned-grid-wrapper {
  overflow-x: auto;
  border-radius: 0 0 8px 8px; /* Rounded bottom only */
  border: 1px solid #e5e7eb;
  border-top: none;
  padding: 0; /* NO padding - black header goes edge to edge */
  background: var(--bg-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Grid Table */
.monthly-unassigned-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  min-width: max-content;
}

/* BLACK HEADER - Match Chart 2 (Admin Time Source) exactly */
.monthly-unassigned-grid thead {
  background: #000000;
  position: sticky;
  top: 0;
  z-index: 10;
}

.monthly-unassigned-grid th {
  padding: 4px 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.55rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  border-bottom: 2px solid #333333;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.monthly-unassigned-grid th.sticky-col {
  position: sticky;
  left: 0;
  background: #000000;
  z-index: 11;
  text-align: left;
  padding-left: 0.75rem;
  min-width: 140px;
}

.monthly-unassigned-grid td {
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  color: var(--text-primary);
}

.monthly-unassigned-grid td.sticky-col {
  position: sticky;
  left: 0;
  background: white;
  z-index: 5;
  text-align: left;
  padding-left: 0.75rem;
  font-weight: 500;
}

/* Day columns - Typography matches Chart 2 style */
.monthly-unassigned-grid .day-col {
  min-width: 28px;
  max-width: 32px;
  font-size: 0.68rem;
}

.monthly-unassigned-grid th.day-col {
  padding: 0.3rem 0.15rem;
  background: #000000;
}

/* Day abbreviation (M, T, W, etc.) - WHITE on black for readability */
.monthly-unassigned-grid th.day-col .day-abbrev {
  display: block;
  font-size: 0.5rem;
  color: #ffffff !important; /* WHITE - readable on black */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  opacity: 0.9;
}

/* Day number (1, 2, 3...) - WHITE on black for visibility */
.monthly-unassigned-grid th.day-col .day-num {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  color: #ffffff !important;
}

/* Weekend columns */
.monthly-unassigned-grid .weekend-col {
  background: #f9fafb !important;
  color: #d1d5db !important;
}

/* Weekend header - darker shade on black header */
.monthly-unassigned-grid th.weekend-col {
  background: #1a1a1a !important;
}

.monthly-unassigned-grid th.weekend-col .day-abbrev {
  color: #d1d5db !important; /* Light grey for weekends - still visible */
}

.monthly-unassigned-grid th.weekend-col .day-num {
  color: #d1d5db !important; /* Light grey for weekends - still visible */
}

/* Today column - highlighted */
.monthly-unassigned-grid .today-col {
  background: rgba(99, 102, 241, 0.08) !important;
}

.monthly-unassigned-grid th.today-col {
  background: #1e40af !important; /* Dark indigo on black header */
  border-bottom: 2px solid #6366f1;
}

.monthly-unassigned-grid th.today-col .day-abbrev {
  color: #ffffff; /* White for today */
}

.monthly-unassigned-grid th.today-col .day-num {
  color: #ffffff;
  font-weight: 700;
}

/* Future columns - dimmed */
.monthly-unassigned-grid .future-col {
  background: #fafafa !important;
  color: #e5e7eb !important;
}

.monthly-unassigned-grid th.future-col {
  background: #0a0a0a !important;
}

.monthly-unassigned-grid th.future-col .day-abbrev,
.monthly-unassigned-grid th.future-col .day-num {
  color: #4b5563;
}

/* Hour value coloring */
.monthly-unassigned-grid .hours-zero {
  color: #22c55e;
  font-weight: 500;
}

.monthly-unassigned-grid .hours-partial {
  color: #f59e0b;
  font-weight: 600;
}

.monthly-unassigned-grid .hours-full {
  color: #ef4444;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* Total Hours column - subtle separator from day columns */
.monthly-unassigned-grid th.col-total-hours {
  min-width: 55px;
  font-weight: 600;
  border-left: 2px solid #333333;
  color: #ffffff; /* White on black header */
  background: #000000;
}

.monthly-unassigned-grid td.col-total-hours {
  min-width: 55px;
  font-weight: 600;
  border-left: 2px solid #e5e7eb;
  color: #1e293b;
}

/* Cost columns - header styling on black background */
.monthly-unassigned-grid th.col-hourly-rmb,
.monthly-unassigned-grid th.col-hourly-aed,
.monthly-unassigned-grid th.col-cost-rmb,
.monthly-unassigned-grid th.col-cost-aed {
  min-width: 70px;
  font-size: 0.55rem;
  color: #ffffff; /* White on black header */
  background: #000000;
}

.monthly-unassigned-grid td.col-hourly-rmb,
.monthly-unassigned-grid td.col-hourly-aed {
  font-size: 0.65rem;
  color: #6b7280;
}

.monthly-unassigned-grid td.col-cost-rmb,
.monthly-unassigned-grid td.col-cost-aed {
  font-size: 0.68rem;
  font-weight: 600;
  color: #1e293b;
}

/* ============================================
   STUDIO HEADER ROWS - Match Chart A exactly
   Shanghai = BLUE (#199ACC), Dubai = RED (#FF3B3B)
   Continuous full-width band across all columns
   ============================================ */
.unassigned-studio-row {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, #2D3748, #4A5568) !important;
}

/* Shanghai = BLUE (same as Chart A) */
.unassigned-studio-row.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
}

/* Dubai = RED (same as Chart A) */
.unassigned-studio-row.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B) !important;
}

.unassigned-studio-row.studio-riyadh {
  background: linear-gradient(135deg, #6B33FF, #9966FF) !important;
}

.unassigned-studio-row td {
  padding: 6px 8px !important;
  vertical-align: middle;
  font-weight: 700 !important;
  color: white !important;
  border-bottom: none;
  background: transparent !important;
}

.unassigned-studio-row td.sticky-col {
  background: inherit !important;
}

.unassigned-studio-row .studio-name-cell {
  white-space: nowrap;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
}

.unassigned-studio-row .studio-total,
.unassigned-studio-row .col-total-hours,
.unassigned-studio-row .col-cost-rmb,
.unassigned-studio-row .col-cost-aed,
.unassigned-studio-row .col-hourly-rmb,
.unassigned-studio-row .col-hourly-aed {
  text-align: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: white !important;
  background: transparent !important;
}

/* Disable hover effects on studio rows (same as Chart A) */
.unassigned-studio-row,
.unassigned-studio-row:hover,
.unassigned-studio-row:focus,
.unassigned-studio-row:active {
  cursor: default !important;
  pointer-events: none;
  opacity: 1 !important;
  transition: none !important;
}

.unassigned-studio-row.studio-shanghai,
.unassigned-studio-row.studio-shanghai:hover {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
}

.unassigned-studio-row.studio-dubai,
.unassigned-studio-row.studio-dubai:hover {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B) !important;
}

/* ============================================
   EMPLOYEE ROWS - Row-wide hover (match Chart A)
   ============================================ */
.unassigned-employee-row {
  transition: background-color 0.1s ease;
}

.unassigned-employee-row td {
  padding: 6px 8px;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}

.unassigned-employee-row:hover {
  background: rgba(25, 154, 204, 0.08) !important;
}

.unassigned-employee-row:hover td {
  background: rgba(25, 154, 204, 0.08) !important;
}

.unassigned-employee-row:hover td.sticky-col {
  background: rgba(25, 154, 204, 0.12) !important;
}

.unassigned-employee-row.inactive-employee {
  opacity: 0.5;
}

.unassigned-employee-row.inactive-employee td {
  color: #9ca3af;
}

/* ============================================
   GRAND TOTAL ROW - Match Chart A exactly
   Same dark grey gradient, continuous full width
   ============================================ */
.unassigned-grand-total-row {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, #2D3748, #4A5568) !important;
  border-top: 2px solid #1A202C;
}

.unassigned-grand-total-row td {
  padding: 8px 10px !important;
  vertical-align: middle;
  color: white !important;
  font-weight: 700;
  border-bottom: none;
  background: transparent !important;
}

.unassigned-grand-total-row td.sticky-col {
  background: inherit !important;
}

.unassigned-grand-total-row .grand-total-label {
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.8rem;
}

.unassigned-grand-total-row .grand-total,
.unassigned-grand-total-row .col-total-hours,
.unassigned-grand-total-row .col-cost-rmb,
.unassigned-grand-total-row .col-cost-aed,
.unassigned-grand-total-row .col-hourly-rmb,
.unassigned-grand-total-row .col-hourly-aed {
  text-align: center;
  font-weight: 800;
  font-size: 0.8rem;
  background: transparent !important;
}

/* Disable hover effects on grand total row (same as Chart A) */
.unassigned-grand-total-row,
.unassigned-grand-total-row:hover,
.unassigned-grand-total-row:focus,
.unassigned-grand-total-row:active {
  background: linear-gradient(135deg, #2D3748, #4A5568) !important;
  cursor: default !important;
  pointer-events: none;
  opacity: 1 !important;
  transition: none !important;
}

/* Improved header contrast */
.monthly-unassigned-grid th.day-col .day-abbrev {
  color: #6b7280;
}

.monthly-unassigned-grid th.day-col .day-num {
  color: #1f2937;
}

/* ============================================
   DARK THEME - Monthly Unassigned Grid
   ============================================ */

[data-theme="dark"] .monthly-unassigned-section {
  background: var(--bg-secondary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .monthly-unassigned-grid-wrapper {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .monthly-unassigned-grid thead {
  background: #1f2937;
}

[data-theme="dark"] .monthly-unassigned-grid th {
  color: #e5e7eb;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .monthly-unassigned-grid th.sticky-col {
  background: #1f2937;
}

[data-theme="dark"] .monthly-unassigned-grid td {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .monthly-unassigned-grid td.sticky-col {
  background: var(--bg-secondary);
}

[data-theme="dark"] .monthly-unassigned-grid .weekend-col {
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .monthly-unassigned-grid th.weekend-col {
  background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .monthly-unassigned-grid .today-col {
  background: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .monthly-unassigned-grid th.today-col {
  background: rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] .monthly-unassigned-grid .future-col {
  background: rgba(255, 255, 255, 0.01) !important;
  color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .monthly-unassigned-grid th.col-total,
[data-theme="dark"] .monthly-unassigned-grid td.col-total {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: rgba(255, 255, 255, 0.1);
}

/* Dark theme: Studio rows keep same colors as light mode (already high contrast) */
[data-theme="dark"] .unassigned-studio-row {
  background: linear-gradient(135deg, #2D3748, #4A5568) !important;
}

[data-theme="dark"] .unassigned-studio-row.studio-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
}

[data-theme="dark"] .unassigned-studio-row.studio-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B) !important;
}

[data-theme="dark"] .unassigned-studio-row td {
  color: white !important;
  border-bottom: none;
}

[data-theme="dark"] .unassigned-employee-row:hover {
  background: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .unassigned-employee-row:hover td {
  background: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .month-nav-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

[data-theme="dark"] .month-nav-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
}

/* Dark theme cost columns */
[data-theme="dark"] .monthly-unassigned-grid td.col-hourly-rmb,
[data-theme="dark"] .monthly-unassigned-grid td.col-hourly-aed {
  background: rgba(255, 255, 255, 0.03);
  color: #9ca3af;
}

[data-theme="dark"] .monthly-unassigned-grid td.col-cost-rmb,
[data-theme="dark"] .monthly-unassigned-grid td.col-cost-aed {
  background: rgba(255, 255, 255, 0.05);
  color: #e5e7eb;
}

[data-theme="dark"] .monthly-unassigned-grid th.col-hourly-rmb,
[data-theme="dark"] .monthly-unassigned-grid th.col-hourly-aed,
[data-theme="dark"] .monthly-unassigned-grid th.col-cost-rmb,
[data-theme="dark"] .monthly-unassigned-grid th.col-cost-aed {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .monthly-unassigned-grid th.col-total-hours,
[data-theme="dark"] .monthly-unassigned-grid td.col-total-hours {
  background: rgba(99, 102, 241, 0.2);
  border-left-color: rgba(99, 102, 241, 0.4);
}

/* ============================================
   PAYROLL TAB STYLES
   ============================================ */

/* Payroll Controls Row - matches Expenses tab */
.payroll-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.payroll-filters-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.payroll-year-selector,
.payroll-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payroll-year-selector label,
.payroll-filter-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.payroll-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.payroll-search-input {
  padding: 8px 32px 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.85rem;
  width: 200px;
  background: white;
  transition: all 0.2s;
}

.payroll-search-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.payroll-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  line-height: 1;
}

.payroll-search-clear:hover {
  color: #ef4444;
}

/* Monthly Payroll Container (uses .exp-* classes from Expenses) */
.monthly-payroll-container {
  margin-bottom: 24px;
}

/* ============================================
   PAYROLL TABLE STYLES - COMPACT (MATCHES EXPENSES)
   ============================================ */

/* Payroll Table Container */
.payroll-table-wrapper {
  overflow-x: auto;
  margin-top: 0;
}

/* Compact Payroll Table - matches .exp-table exactly */
.payroll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
  table-layout: fixed;
}

/* Header row - dark background like Expenses */
.payroll-table thead {
  background: #374151;
  color: rgba(255,255,255,0.9);
}

.payroll-table th {
  padding: 4px 5px;
  text-align: left;
  font-weight: 500;
  font-size: 0.55rem;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.payroll-table th:last-child { border-right: none; }

.payroll-table th.payroll-col-amount,
.payroll-table th.payroll-col-total {
  text-align: right !important;
}

/* Column widths - fixed for alignment */
.payroll-col-name { width: 120px; min-width: 120px; }
.payroll-col-role { width: 90px; min-width: 90px; }
/* PAYROLL numeric columns - left-aligned for readability */
.payroll-col-amount { width: 52px; min-width: 52px; max-width: 52px; text-align: left !important; }
.payroll-col-total { width: 60px; min-width: 60px; max-width: 60px; text-align: left !important; }
.payroll-col-status { width: 65px; min-width: 65px; max-width: 65px; text-align: center !important; }
.payroll-col-paiddate { width: 85px; min-width: 85px; max-width: 85px; text-align: center !important; }

/* Table body - compact rows */
.payroll-table tbody tr {
  border-bottom: 1px solid var(--border-color);
}
.payroll-table tbody tr.payroll-row {
  height: 24px; /* Compact row height - matches Expenses */
}

.payroll-table td {
  padding: 2px 5px;
  vertical-align: middle;
  border-right: 1px solid var(--border-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payroll-table td:last-child { border-right: none; }

.payroll-row:hover {
  background: rgba(0, 102, 255, 0.03);
}

/* Employee name - compact, no studio subtitle */
.payroll-employee-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.65rem;
}

/* Role column - compact */
.payroll-col-role {
  font-size: 0.62rem;
  color: var(--text-secondary);
}

/* Amount inputs - compact like Expenses, left-aligned */
.payroll-amt-input {
  width: 100%;
  padding: 1px 3px;
  font-size: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: var(--bg-primary);
  box-sizing: border-box;
  text-align: left;
}
.payroll-amt-input:focus {
  outline: none;
  border-color: #0066FF;
}

/* Numeric columns */
.payroll-table td.payroll-col-amount,
.payroll-table td.payroll-col-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Total column */
.payroll-total-val {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.65rem;
}

/* Status select - compact like Expenses */
.payroll-status-select {
  width: 100%;
  padding: 1px 2px;
  font-size: 0.58rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: var(--bg-primary);
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}
.payroll-status-select:focus {
  outline: none;
  border-color: #0066FF;
}

/* Paid date input - compact */
.payroll-date-input {
  width: 80px !important;
  min-width: 80px;
  padding: 1px 2px;
  font-size: 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: var(--bg-primary);
  text-align: center;
}
.payroll-date-input:disabled {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
  cursor: not-allowed;
}

/* Studio group header row in Payroll - like expense group header */
.payroll-studio-header {
  background: rgba(0, 102, 255, 0.06) !important;
  border-top: 1px solid rgba(0, 102, 255, 0.15);
}
.payroll-studio-header td {
  padding: 4px 5px;
  font-size: 0.62rem;
}
.payroll-studio-label {
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Add button in Payroll - matches Expenses washed colors exactly */
.payroll-studio-header .exp-grp-add-btn {
  width: 14px;
  height: 14px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(34, 163, 85, 0.4);
  color: #22a355;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s;
  border-radius: 2px;
  font-size: 0.5rem;
  flex-shrink: 0;
}
.payroll-studio-header .exp-grp-add-btn:hover {
  opacity: 1;
  background: #22a355;
  color: white;
  border-color: #22a355;
}
.payroll-studio-header .exp-grp-add-btn i {
  font-size: 0.45rem;
  line-height: 1;
}

/* Studio subtotal rows inside Payroll table - matches Expenses subtotal exactly */
.payroll-table .exp-subtotal-row {
  background: rgba(107, 114, 128, 0.08) !important;
  border-top: 1px solid rgba(107, 114, 128, 0.2);
}
.payroll-table .exp-subtotal-row td {
  padding: 3px 5px;
  font-size: 0.62rem;
  border-bottom: 1px solid rgba(107, 114, 128, 0.15);
}
.payroll-table .exp-subtotal-label {
  text-align: right !important;
  font-weight: 600;
  color: #6b7280;
  padding-right: 10px !important;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.payroll-table .exp-subtotal-val {
  font-weight: 600;
  color: #374151;
  text-align: left !important;
}

/* Monthly total row in Payroll - matches Expenses monthly total */
.payroll-table .exp-monthly-total-row {
  background: #1f2937 !important;
  color: white;
}
.payroll-table .exp-monthly-total-row td {
  padding: 5px 5px;
  border-right-color: rgba(255,255,255,0.1);
  font-size: 0.62rem;
}
.payroll-table .exp-monthly-total-label {
  text-align: right !important;
  font-weight: 600;
  font-size: 0.62rem;
  padding-right: 10px !important;
  color: rgba(255,255,255,0.9);
}
.payroll-table .exp-monthly-total-val {
  font-weight: 700;
  color: #fbbf24 !important;
  text-align: left !important;
}
.payroll-table .exp-monthly-total-row .exp-converted {
  color: rgba(255,255,255,0.5) !important;
}

/* THREE DISTINCT BOTTOM ROWS - exact same colors as Expenses */
/* Row 1: TOTAL PAYROLL (MONTH) - Dark background (#1f2937), Yellow (#fbbf24) values */
.payroll-table .exp-monthly-total-row.exp-total-expenses {
  background: #1f2937 !important;
}
.payroll-table .exp-monthly-total-row.exp-total-expenses .exp-monthly-total-val,
.payroll-table .exp-monthly-total-row.exp-total-expenses .exp-month-rmb,
.payroll-table .exp-monthly-total-row.exp-total-expenses .exp-month-aed,
.payroll-table .exp-monthly-total-row.exp-total-expenses .exp-month-usd {
  color: #fbbf24 !important;
  font-weight: 700;
}

/* Row 2: CASH PAID (MONTH) - Lighter background (#374151), Green (#34d399) values */
.payroll-table .exp-monthly-total-row.exp-cash-paid {
  background: #374151 !important;
}
.payroll-table .exp-monthly-total-row.exp-cash-paid .exp-monthly-total-val,
.payroll-table .exp-monthly-total-row.exp-cash-paid .exp-cash-rmb,
.payroll-table .exp-monthly-total-row.exp-cash-paid .exp-cash-aed,
.payroll-table .exp-monthly-total-row.exp-cash-paid .exp-cash-usd {
  color: #34d399 !important;
  font-weight: 700;
}
.payroll-table .exp-cash-paid-label {
  color: rgba(255,255,255,0.8) !important;
}

/* Row 3a: OUTSTANDING (PENDING) - Lightest background (#4b5563), Orange (#fb923c) values */
.payroll-table .exp-monthly-total-row.exp-outstanding {
  background: #4b5563 !important;
}
.payroll-table .exp-monthly-total-row.exp-outstanding .exp-monthly-total-val,
.payroll-table .exp-monthly-total-row.exp-outstanding .exp-outstanding-rmb,
.payroll-table .exp-monthly-total-row.exp-outstanding .exp-outstanding-aed,
.payroll-table .exp-monthly-total-row.exp-outstanding .exp-outstanding-usd {
  color: #fb923c !important;
  font-weight: 700;
}
.payroll-table .exp-outstanding-label {
  color: rgba(255,255,255,0.8) !important;
}

/* Row 3b: SCHEDULED (future months) - Same background (#4b5563), Blue (#64b4ff) values */
.payroll-table .exp-monthly-total-row.exp-scheduled-total {
  background: #4b5563 !important;
}
.payroll-table .exp-monthly-total-row.exp-scheduled-total .exp-monthly-total-val,
.payroll-table .exp-monthly-total-row.exp-scheduled-total .exp-scheduled-rmb,
.payroll-table .exp-monthly-total-row.exp-scheduled-total .exp-scheduled-aed,
.payroll-table .exp-monthly-total-row.exp-scheduled-total .exp-scheduled-usd {
  color: #64b4ff !important;
  font-weight: 700;
}
.payroll-table .exp-scheduled-label {
  color: rgba(255,255,255,0.8) !important;
}

/* Delete button in Payroll - matches Expenses washed colors exactly */
.payroll-table .exp-del-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 38, 38, 0.1);
  border: none;
  color: #dc2626;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s;
  border-radius: 3px;
}
.payroll-table .exp-del-btn:hover {
  opacity: 1;
  background: rgba(220, 38, 38, 0.2);
}
.payroll-table .exp-del-btn i {
  font-size: 0.6rem;
}
.payroll-row:hover .exp-del-btn {
  opacity: 1;
}

/* RMB/AED/USD columns in Payroll - visible text */
.payroll-table .payroll-rmb-val,
.payroll-table .payroll-aed-val,
.payroll-table .payroll-usd-val {
  font-weight: 600;
  font-size: 0.65rem;
  color: var(--text-primary);
}
.payroll-table .exp-col-aed .payroll-aed-val,
.payroll-table .exp-col-usd .payroll-usd-val {
  color: #9ca3af;
  font-weight: 500;
}

/* Payroll status/date columns - use Expenses classes */
.payroll-table .exp-col-status,
.payroll-table .exp-col-paiddate,
.payroll-table .exp-col-late {
  text-align: center;
}
/* RMB/AED/USD columns - all left-aligned for consistency */
.payroll-table .exp-col-amt,
.payroll-table .exp-col-aed,
.payroll-table .exp-col-usd {
  text-align: left !important;
}

/* Remove old totals row styling (now using exp-monthly-total-row) */
.payroll-totals-row {
  display: none; /* Deprecated - use exp-monthly-total-row */
}

/* Pending Payroll Section - same styles as expenses */
.pending-payroll-section,
.cashpaid-payroll-section,
.department-summary-section {
  margin-top: 32px;
  margin-bottom: 24px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.pending-payroll-header,
.cashpaid-payroll-header,
.department-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.pending-payroll-header h3,
.cashpaid-payroll-header h3,
.department-summary-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pending-payroll-header h3 i {
  color: #f59e0b;
}

.cashpaid-payroll-header h3 i {
  color: #22a355;
}

.department-summary-header h3 i {
  color: #6366f1;
}

.pending-payroll-table-container,
.cashpaid-payroll-table-container {
  padding: 0;
}

.department-summary-month {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}

/* Department Summary Grid */
.department-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 20px;
}

.dept-summary-card {
  background: #f9fafb;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.dept-summary-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dept-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dept-summary-name {
  font-weight: 600;
  color: #374151;
  font-size: 0.85rem;
}

.dept-summary-count {
  font-size: 0.7rem;
  color: #9ca3af;
}

.dept-summary-total {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.dept-summary-aed {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Department colors */
.dept-design {
  border-left: 3px solid #6366f1;
}

.dept-admin---management {
  border-left: 3px solid #f59e0b;
}

.dept-sales {
  border-left: 3px solid #22a355;
}

.dept-other {
  border-left: 3px solid #9ca3af;
}

.dept-company-total {
  background: linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 100%);
  border: 2px solid #6366f1;
}

.dept-company-total .dept-summary-name {
  color: #6366f1;
}

.dept-company-total .dept-summary-total {
  color: #6366f1;
}

/* Dark Theme - Payroll */
[data-theme="dark"] .payroll-search-input {
  background: #374151;
  border-color: #4b5563;
  color: white;
}

[data-theme="dark"] .payroll-table thead {
  background: #1f2937;
}

[data-theme="dark"] .payroll-table th {
  color: #9ca3af;
  border-bottom-color: #374151;
}

[data-theme="dark"] .payroll-table td {
  border-bottom-color: #374151;
}

[data-theme="dark"] .payroll-row:hover {
  background: rgba(99, 102, 241, 0.1);
}

[data-theme="dark"] .payroll-employee-name {
  color: white;
}

[data-theme="dark"] .payroll-amt-input {
  background: #374151;
  border-color: #4b5563;
  color: white;
}

[data-theme="dark"] .payroll-amt-input:focus {
  background: #1f2937;
}

[data-theme="dark"] .payroll-date-input {
  background: #374151;
  border-color: #4b5563;
  color: white;
}

[data-theme="dark"] .payroll-date-input:disabled {
  background: #1f2937;
  color: #6b7280;
}

[data-theme="dark"] .payroll-table .exp-subtotal-row {
  background: rgba(156, 163, 175, 0.12) !important;
  border-top-color: rgba(156, 163, 175, 0.3);
}
[data-theme="dark"] .payroll-table .exp-subtotal-row td {
  border-bottom-color: rgba(156, 163, 175, 0.2);
}
[data-theme="dark"] .payroll-table .exp-subtotal-label {
  color: #9ca3af;
}
[data-theme="dark"] .payroll-table .exp-subtotal-val {
  color: #e5e7eb;
}

[data-theme="dark"] .payroll-studio-header {
  background: rgba(99, 102, 241, 0.12) !important;
  border-top-color: rgba(99, 102, 241, 0.25);
}
[data-theme="dark"] .payroll-studio-label {
  color: #e5e7eb;
}

[data-theme="dark"] .payroll-table .exp-monthly-total-row {
  background: #111827 !important;
}
[data-theme="dark"] .payroll-table .exp-monthly-total-row td {
  border-right-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .payroll-table .exp-monthly-total-label {
  color: rgba(255,255,255,0.9);
}
[data-theme="dark"] .payroll-table .exp-monthly-total-val {
  color: #fbbf24 !important;
}

[data-theme="dark"] .payroll-table .payroll-rmb-val {
  color: #e5e7eb;
}
[data-theme="dark"] .payroll-table .payroll-aed-val,
[data-theme="dark"] .payroll-table .payroll-usd-val {
  color: #6b7280;
}

[data-theme="dark"] .pending-payroll-section,
[data-theme="dark"] .cashpaid-payroll-section,
[data-theme="dark"] .department-summary-section {
  background: #111827;
  border-color: #374151;
}

[data-theme="dark"] .pending-payroll-header,
[data-theme="dark"] .cashpaid-payroll-header,
[data-theme="dark"] .department-summary-header {
  background: #1f2937;
  border-bottom-color: #374151;
}

[data-theme="dark"] .pending-payroll-header h3,
[data-theme="dark"] .cashpaid-payroll-header h3,
[data-theme="dark"] .department-summary-header h3 {
  color: white;
}

[data-theme="dark"] .dept-summary-card {
  background: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .dept-summary-name {
  color: white;
}

[data-theme="dark"] .dept-summary-total {
  color: white;
}

[data-theme="dark"] .dept-company-total {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.2) 100%);
}

/* ============================================
   CRM CONFLICT DETECTION UI
   Enhanced UX for optimistic concurrency control
   ============================================ */

/* Conflict Modal Styling */
.crm-conflict-modal-content {
  max-width: 480px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #ff4757;
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(255, 71, 87, 0.3), 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: conflictModalPulse 0.4s ease-out;
  overflow: hidden;
}

@keyframes conflictModalPulse {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

.crm-conflict-modal-header {
  background: linear-gradient(135deg, #ff4757 0%, #c0392b 100%);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crm-conflict-modal-header h3 {
  margin: 0;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.crm-conflict-modal-header .close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-conflict-modal-header .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.crm-conflict-modal-body {
  padding: 24px;
  text-align: center;
}

.conflict-icon-large {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.2) 0%, rgba(255, 71, 87, 0.1) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 2px solid rgba(255, 71, 87, 0.3);
}

.conflict-icon-large i {
  font-size: 32px;
  color: #ff4757;
}

.conflict-title {
  color: #ff4757;
  font-size: 1rem;
  margin-bottom: 12px;
}

.conflict-description {
  color: #a0aec0;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.conflict-tip {
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.3);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.conflict-tip i {
  color: #ffaa00;
  font-size: 1.1rem;
  margin-top: 2px;
}

.conflict-tip span {
  color: #d4a574;
  font-size: 0.85rem;
  line-height: 1.5;
}

.conflict-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.conflict-btn-cancel,
.conflict-btn-copy,
.conflict-btn-reload {
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.conflict-btn-cancel {
  background: #3a3f4b;
  color: #d1d5db;
}

.conflict-btn-cancel:hover {
  background: #4a5060;
}

.conflict-btn-copy {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
}

.conflict-btn-copy:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.conflict-btn-reload {
  background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
  color: white;
}

.conflict-btn-reload:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

/* Inline Conflict Banner (inside edit form) */
.crm-conflict-inline-banner {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.15) 0%, rgba(192, 57, 43, 0.15) 100%);
  border: 2px solid #ff4757;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  animation: conflictBannerSlideIn 0.3s ease-out;
}

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

.conflict-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.conflict-banner-content > i {
  color: #ff4757;
  font-size: 1.3rem;
  animation: conflictIconPulse 1.5s ease-in-out infinite;
}

@keyframes conflictIconPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.conflict-banner-text {
  flex: 1;
  min-width: 200px;
  color: #ffcccc;
  font-size: 0.85rem;
  line-height: 1.4;
}

.conflict-banner-text strong {
  color: #ff4757;
  font-weight: 600;
}

.conflict-banner-reload-btn {
  background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.conflict-banner-reload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

/* Save Button Disabled State (conflict) */
.btn-conflict-disabled {
  background: #4a4a5a !important;
  color: #888 !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  pointer-events: none;
}

.btn-conflict-disabled i {
  color: #ff4757;
}

/* Row highlight after reload */
.crm-row-reloaded {
  animation: rowReloadedHighlight 3s ease-out;
}

@keyframes rowReloadedHighlight {
  0% {
    background: rgba(39, 174, 96, 0.3) !important;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.5);
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .crm-conflict-inline-banner {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.12) 0%, rgba(192, 57, 43, 0.12) 100%);
}

[data-theme="dark"] .conflict-banner-text {
  color: #ffc9c9;
}

/* ============================================
   RESOURCES ASSIGNMENTS CONFLICT BANNER
   Multi-user concurrency protection for assignments
   ============================================ */

.assignments-conflict-banner {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.15) 0%, rgba(192, 57, 43, 0.15) 100%);
  border: 2px solid #ff4757;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 16px 20px 16px;
  animation: conflictBannerSlideIn 0.3s ease-out;
  box-shadow: 0 4px 16px rgba(255, 71, 87, 0.2);
}

.assignments-conflict-banner .conflict-banner-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.assignments-conflict-banner .conflict-banner-icon {
  color: #ff4757;
  font-size: 1.5rem;
  animation: conflictIconPulse 1.5s ease-in-out infinite;
}

.assignments-conflict-banner .conflict-banner-text {
  flex: 1;
  min-width: 250px;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.5;
}

.assignments-conflict-banner .conflict-banner-text strong {
  color: #ff4757;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.assignments-conflict-banner .conflict-banner-text span {
  color: #666;
}

.assignments-conflict-banner .conflict-banner-reload-btn {
  background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.assignments-conflict-banner .conflict-banner-reload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(39, 174, 96, 0.4);
}

.assignments-conflict-banner .conflict-banner-reload-btn i {
  font-size: 0.85rem;
}

/* Dark theme adjustments for assignments conflict banner */
[data-theme="dark"] .assignments-conflict-banner {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.12) 0%, rgba(192, 57, 43, 0.12) 100%);
}

[data-theme="dark"] .assignments-conflict-banner .conflict-banner-text {
  color: #e0e0e0;
}

[data-theme="dark"] .assignments-conflict-banner .conflict-banner-text span {
  color: #b0b0b0;
}

/* ============================================
   PROJECTS CONFLICT BANNER
   Multi-user concurrency protection for projects
   Reuses same styling as assignments banner
   ============================================ */

.projects-conflict-banner {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.15) 0%, rgba(192, 57, 43, 0.15) 100%);
  border: 2px solid #ff4757;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 16px 20px 16px;
  animation: conflictBannerSlideIn 0.3s ease-out;
  box-shadow: 0 4px 16px rgba(255, 71, 87, 0.2);
}

.projects-conflict-banner .conflict-banner-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.projects-conflict-banner .conflict-banner-icon {
  color: #ff4757;
  font-size: 1.5rem;
  animation: conflictIconPulse 1.5s ease-in-out infinite;
}

.projects-conflict-banner .conflict-banner-text {
  flex: 1;
  min-width: 250px;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.5;
}

.projects-conflict-banner .conflict-banner-text strong {
  color: #ff4757;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.projects-conflict-banner .conflict-banner-text span {
  color: #666;
}

.projects-conflict-banner .conflict-banner-reload-btn {
  background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.projects-conflict-banner .conflict-banner-reload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(39, 174, 96, 0.4);
}

.projects-conflict-banner .conflict-banner-reload-btn i {
  font-size: 0.85rem;
}

/* Dark theme adjustments for projects conflict banner */
[data-theme="dark"] .projects-conflict-banner {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.12) 0%, rgba(192, 57, 43, 0.12) 100%);
}

[data-theme="dark"] .projects-conflict-banner .conflict-banner-text {
  color: #e0e0e0;
}

[data-theme="dark"] .projects-conflict-banner .conflict-banner-text span {
  color: #b0b0b0;
}

/* ============================================
   PRESENCE TRACKING - Active Users Card
   RED warning styling when other users > 0
   ============================================ */

/* Pulsing dot animation for presence warning - RED */
@keyframes presencePulseAnim {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Ensure stat-card has position relative for absolute pulse dot */
#statActiveUsers {
  position: relative;
}

/* Helper text styling - RED */
#homeActiveUsersHelper {
  display: block;
  font-size: 10px;
  color: #EF4444;
  margin-top: 2px;
  font-weight: 500;
}

/* Pulse dot styling - RED */
#presencePulse {
  background: #EF4444 !important;
}

/* ============================================
   OVERHEAD TAB - Monthly Overhead Distribution
   Card styling matches Resources tab
   ============================================ */

/* Year header is NOT clickable - always expanded */
.overhead-year-header-static {
  cursor: default !important;
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
}

.overhead-year-header-static:hover {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
}

/* Ensure text stays white on hover */
.overhead-year-header-static:hover,
.overhead-year-header-static:hover * {
  color: white !important;
}

/* Hide chevron in overhead year header (not collapsible) */
.overhead-year-header-static .exp-year-chevron {
  display: none;
}

/* ============================================
   OVERHEAD CARDS - Match Resources tab exactly
   ============================================ */

/* Card container - separate visual unit */
.overhead-card {
  margin-bottom: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  background: var(--bg-primary);
}

/* Grey title bar - matches Resources .monthly-unassigned-header */
.overhead-card-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: #e5e7eb;
  border-radius: 8px 8px 0 0;
}

.overhead-card-title-bar h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.overhead-card-title-bar h2 i {
  color: #6366f1;
}

/* Card body - white background with table */
.overhead-card-body {
  padding: 0;
  margin: 0;
  background: var(--bg-primary);
  border-radius: 0 0 8px 8px;
}

/* Remove any extra space at bottom of card */
.overhead-card-body > table {
  margin-bottom: 0;
}

/* Table styling - matches Resources utilization table */
.overhead-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

/* Black header row - for Charts 1 and 3 */
.overhead-card-table:not(.overhead-labor-table) thead tr {
  background: #000000;
}

.overhead-card-table:not(.overhead-labor-table) thead th {
  padding: 8px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.65rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  border-bottom: none;
}

/* ============================================
   Chart 1: Monthly Overhead Allocation (Projects)
   Zebra striping + softer header
   ============================================ */

/* Soften header from pure black to dark grey */
.overhead-chart1-table thead tr {
  background: #1f2937 !important;
}

/* Zebra striping for project rows */
.overhead-chart1-table tbody tr:nth-child(odd) {
  background: #ffffff;
}

.overhead-chart1-table tbody tr:nth-child(even) {
  background: #f6f7f9;
}

/* Keep zebra visible on hover - subtle highlight only */
.overhead-chart1-table tbody tr:nth-child(odd):hover {
  background: #f9fafb !important;
}

.overhead-chart1-table tbody tr:nth-child(even):hover {
  background: #eef0f3 !important;
}

/* TOTAL row - keep distinct styling */
.overhead-chart1-table tbody tr.overhead-total-row {
  background: #374151 !important;
}

.overhead-chart1-table tbody tr.overhead-total-row td {
  color: #ffffff !important;
  font-weight: 600;
}

.overhead-chart1-table tbody tr.overhead-total-row:hover {
  background: #374151 !important;
}

/* ============================================
   Chart 2: Merged studio + column header rows
   ONE colored row per section with column titles
   ============================================ */

.overhead-studio-header {
  font-weight: 600;
}

.overhead-studio-header th {
  padding: 8px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.65rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Shanghai: Blue gradient header */
.overhead-studio-header.shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
}

/* Dubai: Red/orange gradient header */
.overhead-studio-header.dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B) !important;
}

/* Table body rows */
.overhead-card-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

.overhead-card-table tbody tr:hover {
  background: #f9fafb;
}

.overhead-card-table tbody td {
  padding: 8px 10px;
  font-size: 0.75rem;
  color: #374151;
}

/* Employee cell - smaller font */
.overhead-employee-cell {
  font-size: 0.65rem !important;
  color: #6b7280 !important;
}

/* Subtotal rows - Chart 2 uses light backgrounds */
.overhead-subtotal-row {
  font-weight: 600;
  background: #f9fafb;
}

/* Chart 3 subtotal rows - SAME colors as Chart 2 studio headers */
/* Shanghai subtotal: blue gradient, white text */
.overhead-subtotal-row.shanghai-subtotal {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
}

.overhead-subtotal-row.shanghai-subtotal td {
  color: #ffffff !important;
  font-weight: 600;
}

/* Dubai subtotal: red/orange gradient, white text */
.overhead-subtotal-row.dubai-subtotal {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B) !important;
}

.overhead-subtotal-row.dubai-subtotal td {
  color: #ffffff !important;
  font-weight: 600;
}

/* Total row - bold styling */
.overhead-total-row {
  font-weight: 600;
  background: #f3f4f6;
}

.overhead-total-row td {
  border-top: 2px solid #e5e7eb;
}

/* Grand total: dark grey with white text - FINAL row */
.overhead-grand-total {
  background: #1f2937 !important;
}

.overhead-grand-total td {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.8rem;
  border-top: none;
  border-bottom: none !important;
}

/* Remove bottom artifact: ensure clean card ending after TOTAL OVERHEAD POOL */
.overhead-card-table tbody tr:last-child td {
  border-bottom: none !important;
}

.overhead-totals-table {
  margin-bottom: 0 !important;
}

.overhead-card:has(.overhead-totals-table) .overhead-card-body {
  padding-bottom: 0 !important;
}

/* Badges for Chart 3 */
.overhead-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

.overhead-badge.shanghai {
  background: rgba(25, 154, 204, 0.15);
  color: #0e7490;
}

.overhead-badge.dubai {
  background: rgba(255, 59, 59, 0.15);
  color: #dc2626;
}

/* ============================================
   CHART 2 (Monthly Overhead Totals) STYLING
   Clean borders, zebra striping, expand/collapse
   ============================================ */

/* Reset all borders in totals table + FIXED layout */
.overhead-totals-table {
  border-collapse: collapse;
  table-layout: fixed !important;
  width: 100% !important;
}

.overhead-totals-table td,
.overhead-totals-table th {
  border: none;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

.overhead-totals-table td:last-child,
.overhead-totals-table th:last-child {
  border-right: none;
}

/* Header row */
.overhead-totals-table thead tr {
  background: #1f2937;
}

.overhead-totals-table thead th {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.65rem;
  padding: 8px 10px;
  text-transform: uppercase;
  border-bottom: none;
}

/* ---- PARENT ROWS (Overhead Labor, Expenses) ---- */
.oh-parent-row {
  background: #ffffff;
}

.oh-parent-row td {
  font-weight: 600;
  font-size: 0.75rem;
  color: #111827;
  padding: 10px;
}

/* Collapsible parent rows - clickable */
.oh-collapsible {
  cursor: pointer;
}

.oh-collapsible:hover {
  background: #f9fafb;
}

/* Caret icon */
.oh-caret {
  color: #6b7280;
  margin-right: 6px;
  width: 10px;
  display: inline-block;
  transition: transform 0.15s ease;
}

.oh-expanded .oh-caret {
  color: #374151;
}

/* ---- CHILD ROWS (expanded labor detail with ROWSPAN bucket) ---- */

/* Employee row in expanded block */
.oh-emp-row {
  background: #f7f8fa;
}

.oh-emp-row td {
  font-size: 0.68rem;
  font-weight: 400;
  color: #6b7280;
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

/* Last employee row in a bucket - same thin border as other rows */
.oh-emp-row.oh-emp-row-last td {
  border-bottom: 1px solid #e5e7eb;
}

/* Bucket cell (COMPONENT column with rowspan) - SAME background as other cells */
.oh-bucket-cell {
  background: #f7f8fa !important;
  font-weight: 600;
  font-size: 0.7rem;
  color: #1f2937;
  padding: 10px 10px 10px 24px !important;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb !important;
  border-right: 1px solid #e5e7eb;
}

/* Employee name cell - more indented, lighter text */
.oh-emp-name-cell {
  font-weight: 400;
  color: #6b7280;
  padding-left: 40px !important;
}

/* Hidden rows (collapsed state) */
.oh-hidden {
  display: none;
}

/* ---- SECTION SEPARATOR ---- */
/* Before Dubai block (start of new section) */
.oh-section-start td {
  border-top: 2px solid #cfd6dd;
}

/* ---- SUBTOTAL ROWS ---- */
.oh-subtotal-row td {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 10px;
}

/* Shanghai Subtotal - blue */
.oh-subtotal-shanghai {
  background: linear-gradient(135deg, #199ACC, #2BB8E0);
}

.oh-subtotal-shanghai td {
  color: #ffffff !important;
  border-bottom: 1px solid #1a8ab8;
}

/* Dubai Subtotal - red/orange */
.oh-subtotal-dubai {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B);
}

.oh-subtotal-dubai td {
  color: #ffffff !important;
  border-bottom: 1px solid #e53535;
}

/* ---- TOTAL ROW ---- */
.oh-total-row {
  background: #1f2937;
}

.oh-total-row td {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 12px 10px;
  border-top: 2px solid #cfd6dd;
  border-bottom: none;
}

/* ---- HOVER OVERRIDES: Prevent colored rows from disappearing on hover ---- */
/* Shanghai subtotal - keep blue on hover */
.oh-subtotal-shanghai:hover,
.overhead-card-table tbody tr.oh-subtotal-shanghai:hover {
  background: linear-gradient(135deg, #199ACC, #2BB8E0) !important;
}
.oh-subtotal-shanghai:hover td,
.overhead-card-table tbody tr.oh-subtotal-shanghai:hover td {
  color: #ffffff !important;
  background: transparent !important;
}

/* Dubai subtotal - keep red on hover */
.oh-subtotal-dubai:hover,
.overhead-card-table tbody tr.oh-subtotal-dubai:hover {
  background: linear-gradient(135deg, #FF3B3B, #FF6B6B) !important;
}
.oh-subtotal-dubai:hover td,
.overhead-card-table tbody tr.oh-subtotal-dubai:hover td {
  color: #ffffff !important;
  background: transparent !important;
}

/* Total row - keep dark grey on hover */
.oh-total-row:hover,
.overhead-card-table tbody tr.oh-total-row:hover {
  background: #1f2937 !important;
}
.oh-total-row:hover td,
.overhead-card-table tbody tr.oh-total-row:hover td {
  color: #ffffff !important;
  background: transparent !important;
}

/* Parent rows (Overhead Labor, Expenses) - keep white on hover */
.oh-parent-row:hover,
.overhead-card-table tbody tr.oh-parent-row:hover {
  background: #ffffff !important;
}

/* Legacy classes for backward compat */
.overhead-main-row { background: #ffffff; }
.overhead-detail-row { background: #f9fafb; }

/* Chart 3: FIXED column widths for 7-column layout */
/* COMPONENT: 30%, EMPLOYEES: 22%, HOURS: 10%, HOURLY COST: 10%, RMB/AED/USD: 9.33% each */

/* Column 1: COMPONENT */
.overhead-totals-table th:nth-child(1),
.overhead-totals-table td:nth-child(1) {
  width: 30% !important;
  min-width: 30% !important;
  max-width: 30% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column 2: EMPLOYEES */
.overhead-totals-table th:nth-child(2),
.overhead-totals-table td:nth-child(2) {
  width: 22% !important;
  min-width: 22% !important;
  max-width: 22% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column 3: HOURS */
.overhead-totals-table th:nth-child(3),
.overhead-totals-table td:nth-child(3) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
  text-align: right;
  white-space: nowrap;
}

/* Column 4: HOURLY COST */
.overhead-totals-table th:nth-child(4),
.overhead-totals-table td:nth-child(4) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
  text-align: right;
  white-space: nowrap;
}

/* Column 5: RMB */
.overhead-totals-table th:nth-child(5),
.overhead-totals-table td:nth-child(5) {
  width: 9.33% !important;
  min-width: 9.33% !important;
  max-width: 9.33% !important;
  text-align: right;
  white-space: nowrap;
}

/* Column 6: AED */
.overhead-totals-table th:nth-child(6),
.overhead-totals-table td:nth-child(6) {
  width: 9.33% !important;
  min-width: 9.33% !important;
  max-width: 9.33% !important;
  text-align: right;
  white-space: nowrap;
}

/* Column 7: USD */
.overhead-totals-table th:nth-child(7),
.overhead-totals-table td:nth-child(7) {
  width: 9.33% !important;
  min-width: 9.33% !important;
  max-width: 9.33% !important;
  text-align: right;
  white-space: nowrap;
}

/* Subtotal/Total rows with colspan - lock the remaining 3 currency columns */
.overhead-totals-table .oh-subtotal-row td[colspan],
.overhead-totals-table .oh-total-row td[colspan] {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
}

/* Employee cell styling */
.oh-emp-cell {
  font-size: 0.65rem;
  color: #6b7280;
  text-align: left !important;
  vertical-align: top;
}

/* Fixed label for Unassigned Design Hours */
.oh-emp-fixed {
  font-style: italic;
  color: #6b7280;
  font-size: 0.65rem;
}

/* Vertical employee list container */
.oh-emp-list {
  padding: 4px 10px !important;
}

/* Each employee on its own line - with separator */
.oh-emp-line {
  padding: 5px 0;
  line-height: 1.4;
  border-bottom: 1px solid #eceff3;
}

.oh-emp-line:last-child {
  border-bottom: none;
}

/* Zebra striping on employee lines (alternate tint) */
.oh-emp-line:nth-child(even) {
  background: #f7f9fb;
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Employee name - readable */
.oh-emp-name {
  color: #374151;
  font-size: 0.65rem;
  font-weight: 500;
}

/* Overhead expanded pills - SCOPED to overhead section only */
#overhead-section .exp-pill-total {
  background: linear-gradient(90deg, #199ACC22, #FF7B2C22);
  border-radius: 6px;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

#overhead-section .exp-pill-total .exp-pill-label {
  font-size: 9px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#overhead-section .exp-pill-total .exp-pill-val {
  font-size: 14px;
  font-weight: 700;
  color: #199ACC;
}