/* ==========================================
   COLOR TOKENS - Design System Docu
   Basado en Figma Components
   ========================================== */

:root {
  /* === BASICS === */
  --color-basics-dark-blue: #0a243f;
  --color-basics-mid-blue: #6b7b8a;
  --color-basics-light-blue: #f4f7fb;
  --color-basics-white: #ffffff;
  --color-basics-gray: #efefef;
  
  /* === TEXT === */
  --color-text-primary: #0a243f;
  --color-text-secondary: #6b7b8a;
  
  /* === BUTTONS === */
  /* Primary */
  --color-button-primary-bg-default: #9dff00;
  --color-button-primary-bg-hover: #98f501;
  --color-button-primary-bg-pressed: #8ee600;
  
  /* Secondary */
  --color-button-secondary-bg-hover: #0f3965;
  --color-button-secondary-bg-pressed: #18528f;
  
  /* Default/Access */
  --color-button-default: #a4c4ff;
  
  /* Accent/Cyan */
  --color-accent-cyan-light: #50dfff;
  --color-accent-cyan-medium: #30c9eb;
  --color-accent-cyan-dark: #009ed8;
  
  /* === STATUS === */
  /* Error */
  --color-status-strong-red: #ff4747;
  --color-status-light-red: #ff9393;
  
  /* Task Status */
  --color-status-in-progress: #ffc048;
  --color-status-in-progress-hover: #f7ae23;
  --color-status-done: #3be4a9;
  --color-status-done-hover: #19d795;
  --color-status-paused: #6b7b8a;
  --color-status-paused-hover: #4f5f6f;
  --color-status-to-start: #efefef;
  --color-status-to-start-hover: #d4d4d4;
  --color-status-disabled: #efefef;
  
  /* === SURFACE === */
  --color-surface-regular: #ffffff;
  --color-surface-especial: #f4f7fb;
  --color-surface-light: #e8ecf1;
  
  /* === BORDER === */
  --color-border-light: #e0e0e0;
  --color-border-default: #efefef;
  
  /* === OVERLAY === */
  --color-overlay-light: rgba(255, 255, 255, 0.7);
  --color-overlay-dark: rgba(0, 0, 0, 0.35);
  
  /* === STATUS EXTENDED === */
  /* Done status with light background */
  --color-status-done-light-bg: #d1ffef;

  /* === SEVERITY === */
  --color-severity-low: #3be4a9;
  --color-severity-low-hover: #19d795;
  --color-severity-medium: #ffc048;
  --color-severity-medium-hover: #f7ae23;
  --color-severity-high: #ff9f48;
  --color-severity-high-hover: #f08a2e;
  --color-severity-critical: #ff4747;
  --color-severity-critical-hover: #e63d3d;
}

/* ==========================================
   DARK MODE COLOR TOKENS
   Fondo base: Dark Blue #0a243f
   ========================================== */

[data-theme="dark"] {
  /* === BASICS === */
  --color-basics-dark-blue: #0a243f; /* Background base */
  --color-basics-mid-blue: #8fa0b0; /* Más claro para contraste en dark */
  --color-basics-light-blue: #1a3e64; /* Versión oscura del light blue */
  --color-basics-white: #ffffff; /* Se mantiene para textos */
  --color-basics-gray: #4a5563; /* Más oscuro para dark mode */
  
  /* === TEXT === */
  --color-text-primary: #ffffff; /* Blanco sobre fondo oscuro */
  --color-text-secondary: #8fa0b0; /* Mid blue más claro para texto secundario */
  
  /* === BUTTONS === */
  /* Primary - Mantienen colores vibrantes pero ajustados */
  --color-button-primary-bg-default: #9dff00;
  --color-button-primary-bg-hover: #b0ff33;
  --color-button-primary-bg-pressed: #8ae600;
  
  /* Secondary - Más claros para contraste */
  --color-button-secondary-bg-hover: #1e4a7a;
  --color-button-secondary-bg-pressed: #2569a8;
  
  /* Default/Access - Más vibrante */
  --color-button-default: #7ab8ff;
  
  /* Accent/Cyan - Mantienen pero con mejor contraste */
  --color-accent-cyan-light: #50dfff;
  --color-accent-cyan-medium: #40c7e6;
  --color-accent-cyan-dark: #00b8e0;
  
  /* === STATUS === */
  /* Error - Mantienen pero con texto claro */
  --color-status-strong-red: #ff6b6b;
  --color-status-light-red: #ffb3b3;
  
  /* Task Status - Ajustados para dark mode */
  --color-status-in-progress: #ffc048;
  --color-status-in-progress-hover: #ffd470;
  --color-status-done: #3be4a9;
  --color-status-done-hover: #5ef0c0;
  --color-status-paused: #8fa0b0;
  --color-status-paused-hover: #a8b5c3;
  --color-status-to-start: #4a5563;
  --color-status-to-start-hover: #6b7380;
  --color-status-disabled: #4a5563; /* Más oscuro para dark mode */
  
  /* === SURFACE === */
  --color-surface-regular: #0a243f; /* Dark Blue como fondo base */
  --color-surface-especial: #1a3e64; /* Un tono más claro para destacar */
  --color-surface-light: #2a4e74; /* Más oscuro que especial para dark mode */
  
  /* === BORDER === */
  --color-border-light: #4a5563; /* Más oscuro para contraste en dark mode */
  --color-border-default: #4a5563; /* Más oscuro para contraste en dark mode */
  
  /* === OVERLAY === */
  --color-overlay-light: rgba(10, 36, 63, 0.8); /* Overlay oscuro para dark mode */
  --color-overlay-dark: rgba(0, 0, 0, 0.5); /* Overlay más oscuro para dark mode */
  
  /* === STATUS EXTENDED === */
  /* Done status with light background - Versión oscura más sutil */
  --color-status-done-light-bg: rgba(59, 228, 169, 0.15); /* Verde con transparencia para dark mode */

  /* === SEVERITY === */
  --color-severity-low: #3be4a9;
  --color-severity-low-hover: #5ef0c0;
  --color-severity-medium: #ffc048;
  --color-severity-medium-hover: #ffd470;
  --color-severity-high: #ff9f48;
  --color-severity-high-hover: #ffb366;
  --color-severity-critical: #ff6b6b;
  --color-severity-critical-hover: #ff8585;
  
  /* === ICONS === */
  --color-icon: #0a243f; /* Color por defecto para iconos */
}

/* Icon color adjustments for dark mode */
[data-theme="dark"] {
  --color-icon: #ffffff; /* Iconos blancos en modo dark */
}

/* Override Tailwind surface classes to use design system vars in dark mode */
[data-theme="dark"] .bg-surface-regular {
  background-color: var(--color-surface-regular) !important;
}

[data-theme="dark"] .bg-surface-special {
  background-color: var(--color-surface-especial) !important;
}



/* ========== NEXT FILE ========== */

/* ==========================================
   TYPOGRAPHY TOKENS - Design System Docu
   Basado en Figma Components
   ========================================== */



:root {
  /* === FONT FAMILIES === */
  --font-family-primary: 'Crimson Pro', serif;
  --font-family-secondary: 'Lato', sans-serif;
  
  /* === FONT SIZES === */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 48px;
  
  /* === FONT WEIGHTS === */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --font-weight-extra-black: 900;
  
  /* === LINE HEIGHTS === */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* === TEXT STYLES === */
  /* Label - Bold (Lato, 14px, 800) */
  --text-label-bold: var(--font-family-secondary);
  --text-label-bold-size: var(--font-size-sm);
  --text-label-bold-weight: var(--font-weight-black);
  --text-label-bold-line-height: 100%;
  
  /* Label - Regular (Lato, 14px, 400) */
  --text-label-regular: var(--font-family-secondary);
  --text-label-regular-size: var(--font-size-sm);
  --text-label-regular-weight: var(--font-weight-regular);
  --text-label-regular-line-height: 100%;
}



/* ========== NEXT FILE ========== */

/* ==========================================
   SPACING TOKENS - Design System Docu
   Basado en Figma Components
   ========================================== */

:root {
  --spacing-04: 4px;
  --spacing-08: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-48: 48px;
}



/* ========== NEXT FILE ========== */

/* ==========================================
   BORDER RADIUS TOKENS - Design System Docu
   Basado en Figma Components
   ========================================== */

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-full: 999px;
  --radius-xl: 40px;
  --radius-2xl: 80px;
}



/* ========== NEXT FILE ========== */

/* ==========================================
   ELEVATION / SHADOW TOKENS
   Design System Docu
   Basado en especificaciones de Figma
   ========================================== */

:root {
  /* === ELEVATION LEVELS === */

  /* Elevation 0 - Sin sombra (Default state para algunos componentes) */
  --elevation-0: none;

  /* Elevation 1 - Sombra suave (Default para botones Primary) */
  --elevation-1: 0px 1px 2px 0px rgba(10, 36, 63, 0.1);

  /* Elevation 2 - Sombra media (Hover state para botones) */
  --elevation-2: 0px 2px 4px 0px rgba(10, 36, 63, 0.15);

  /* Elevation 3 - Sombra pronunciada (Hover intenso, modals) */
  --elevation-3: 0px 4px 8px 0px rgba(10, 36, 63, 0.2);

  /* Elevation 4 - Sombra fuerte (Tooltips, dropdowns) */
  --elevation-4: 0px 8px 16px 0px rgba(10, 36, 63, 0.25);
  
  /* Elevation 5 - Sombra para modales */
  --elevation-modal: 0px 8px 32px 0px rgba(10, 36, 63, 0.15);
  
  /* === BUTTON SPECIFIC ELEVATIONS === */

  /* Button Primary - Default */
  --button-primary-elevation-default: 0px 1px 2px 0px rgba(10, 36, 63, 0.1);

  /* Button Primary - Hover */
  --button-primary-elevation-hover: 0px 2px 4px 0px rgba(10, 36, 63, 0.15);

  /* Button Primary - Pressed (sin sombra o sombra interna) */
  --button-primary-elevation-pressed: none;

  /* Button Secondary - Default (sin sombra) */
  --button-secondary-elevation-default: none;

  /* Button Secondary - Hover */
  --button-secondary-elevation-hover: 0px 2px 4px 0px rgba(10, 36, 63, 0.15);

  /* Button Secondary - Pressed */
  --button-secondary-elevation-pressed: none;

  /* Button Tertiary - Default (sin sombra) */
  --button-tertiary-elevation-default: none;

  /* Button Tertiary - Hover (sin sombra) */
  --button-tertiary-elevation-hover: none;

  /* Button Tertiary - Pressed (sin sombra) */
  --button-tertiary-elevation-pressed: none;

  /* Button Access - Default */
  --button-access-elevation-default: 0px 1px 2px 0px rgba(10, 36, 63, 0.1);

  /* Button Access - Hover */
  --button-access-elevation-hover: 0px 2px 4px 0px rgba(10, 36, 63, 0.15);
}

/* ==========================================
   DARK MODE ELEVATION TOKENS
   Sombras ajustadas para dark mode
   ========================================== */

[data-theme="dark"] {
  /* === ELEVATION LEVELS === */
  /* Elevation 1 - Sombra suave ajustada para dark mode */
  --elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  
  /* Elevation 2 - Sombra media ajustada para dark mode */
  --elevation-2: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
  
  /* Elevation 3 - Sombra pronunciada ajustada para dark mode */
  --elevation-3: 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
  
  /* Elevation 4 - Sombra fuerte ajustada para dark mode */
  --elevation-4: 0px 8px 16px 0px rgba(0, 0, 0, 0.6);
  
  /* Elevation 5 - Sombra para modales ajustada para dark mode */
  --elevation-modal: 0px 8px 32px 0px rgba(0, 0, 0, 0.5);
  
  /* === BUTTON SPECIFIC ELEVATIONS === */
  /* Button Primary - Default */
  --button-primary-elevation-default: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  
  /* Button Primary - Hover */
  --button-primary-elevation-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
  
  /* Button Secondary - Hover */
  --button-secondary-elevation-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
  
  /* Button Access - Default */
  --button-access-elevation-default: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  
  /* Button Access - Hover */
  --button-access-elevation-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
}



/* ========== NEXT FILE ========== */

/* ==========================================
   BUTTON COMPONENT - Design System Docu
   Basado en Figma Components
   Espaciados y tamaños exactos según diseño
   ========================================== */

/* === BASE BUTTON === */
.dsu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-medium);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 40px; /* Default border-radius */
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.dsu-button:focus-visible {
  outline: 2px solid var(--color-basics-dark-blue);
  outline-offset: 2px;
}

/* Dark mode focus outline */
[data-theme="dark"] .dsu-button:focus-visible {
  outline-color: var(--color-basics-white); /* White outline in dark mode */
}

.dsu-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* === SIZES - Exactos según Figma === */

/* X-Small: 36px height */
.dsu-button--x-small {
  padding: 8px 16px;
  height: 36px;
  font-size: 12px;
  border-radius: 40px;
  gap: 8px;
}

/* Small: 37px height */
.dsu-button--small {
  padding: 8px 16px;
  height: 37px;
  font-size: 14px;
  border-radius: 40px;
  gap: 8px;
}

/* Medium: 48px height */
.dsu-button--medium {
  padding: 12px 24px;
  height: 48px;
  font-size: 16px;
  border-radius: 40px;
  gap: 8px;
}

/* Large: 59px height */
.dsu-button--large {
  padding: 16px 32px;
  height: 59px;
  font-size: 18px;
  border-radius: 40px;
  gap: 8px;
}

/* === PRIMARY TYPE === */
.dsu-button--primary {
  background-color: var(--color-button-primary-bg-default);
  color: var(--color-basics-dark-blue);
  box-shadow: none;
  width: 100%;
}

.dsu-button--primary:hover:not(:disabled) {
  background-color: var(--color-button-primary-bg-hover);
  box-shadow: none;
}

.dsu-button--primary:active:not(:disabled),
.dsu-button--primary.is-pressed {
  background-color: var(--color-button-primary-bg-pressed);
  box-shadow: none;
}

.dsu-button--primary:disabled {
  background-color: var(--color-status-disabled);
  color: var(--color-text-secondary);
  opacity: 1;
  box-shadow: none;
}

/* === SECONDARY TYPE === */
.dsu-button--secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-basics-dark-blue);
  box-shadow: var(--button-secondary-elevation-default);
  width: 100%;
}

.dsu-button--secondary:hover:not(:disabled) {
  background-color: var(--color-surface-regular); /* White background */
  color: var(--color-text-primary); /* Keep dark-blue text */
  border-color: var(--color-button-secondary-bg-hover); /* #0f3965 */
  box-shadow: var(--button-secondary-elevation-hover);
}

.dsu-button--secondary:active:not(:disabled),
.dsu-button--secondary.is-pressed {
  background-color: var(--color-surface-regular); /* White background */
  color: var(--color-text-primary); /* Keep dark-blue text */
  border-color: var(--color-button-secondary-bg-hover); /* #0f3965 */
  box-shadow: var(--button-secondary-elevation-pressed);
}

.dsu-button--secondary:disabled {
  background-color: var(--color-surface-regular); /* White background */
  border-color: var(--color-basics-gray); /* Light gray border */
  color: var(--color-text-secondary); /* Secondary text color */
  opacity: 1;
  box-shadow: none;
}

/* Dark mode adjustments for secondary buttons */
[data-theme="dark"] .dsu-button--secondary {
  border-color: var(--color-basics-white); /* White border in dark mode */
}

[data-theme="dark"] .dsu-button--secondary:hover:not(:disabled) {
  background-color: var(--color-surface-especial); /* Darker background on hover */
  border-color: var(--color-basics-white); /* Keep white border */
}

[data-theme="dark"] .dsu-button--secondary:active:not(:disabled),
[data-theme="dark"] .dsu-button--secondary.is-pressed {
  background-color: var(--color-surface-light); /* Even darker on press */
  border-color: var(--color-basics-white); /* Keep white border */
}

[data-theme="dark"] .dsu-button--secondary:disabled {
  border-color: var(--color-basics-gray); /* Gray border when disabled */
}

/* === TERTIARY TYPE === */
.dsu-button--tertiary {
  background-color: transparent;
  color: var(--color-text-primary);
  border: none;
  box-shadow: var(--button-tertiary-elevation-default);
}

.dsu-button--tertiary:hover:not(:disabled) {
  background-color: var(--color-surface-especial);
  box-shadow: var(--button-tertiary-elevation-hover);
}

.dsu-button--tertiary:active:not(:disabled),
.dsu-button--tertiary.is-pressed {
  background-color: var(--color-basics-gray);
  box-shadow: var(--button-tertiary-elevation-pressed);
}

.dsu-button--tertiary:disabled {
  color: var(--color-text-secondary);
  opacity: 1;
  box-shadow: none;
}

/* Dark mode adjustments for tertiary buttons */
[data-theme="dark"] .dsu-button--tertiary:hover:not(:disabled) {
  background-color: var(--color-surface-light); /* Darker background on hover */
}

[data-theme="dark"] .dsu-button--tertiary:active:not(:disabled),
[data-theme="dark"] .dsu-button--tertiary.is-pressed {
  background-color: var(--color-basics-gray); /* Gray background on press */
}

/* === ACCESS TYPE === */
.dsu-button--access {
  background-color: var(--color-surface-regular);
  color: var(--color-text-primary);
  border: 1px solid var(--color-basics-mid-blue);
  border-radius: 80px; /* Más redondeado que otros */
  gap: 16px; /* Mayor gap para Access buttons */
  padding: 16px;
  height: 48px;
  font-size: 16px;
  box-shadow: var(--button-access-elevation-default);
  width: 100%;
}

.dsu-button--access:hover:not(:disabled) {
  background-color: var(--color-surface-especial);
  border-color: var(--color-basics-dark-blue);
  box-shadow: var(--button-access-elevation-hover);
}

.dsu-button--access:active:not(:disabled),
.dsu-button--access.is-pressed {
  background-color: var(--color-surface-especial);
  border-color: var(--color-basics-dark-blue);
  box-shadow: var(--button-access-elevation-hover);
}

.dsu-button--access:disabled {
  border-color: var(--color-status-disabled);
  color: var(--color-text-secondary);
  opacity: 1;
  box-shadow: none;
}

/* Dark mode adjustments for access buttons */
[data-theme="dark"] .dsu-button--access {
  border-color: var(--color-basics-mid-blue); /* Mid blue border in dark mode */
}

[data-theme="dark"] .dsu-button--access:hover:not(:disabled) {
  border-color: var(--color-basics-white); /* White border on hover */
}

[data-theme="dark"] .dsu-button--access:active:not(:disabled),
[data-theme="dark"] .dsu-button--access.is-pressed {
  border-color: var(--color-basics-white); /* White border on press */
}

/* === ICON SUPPORT === */
.dsu-button__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.dsu-button__icon img,
.dsu-button__icon svg {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-button__icon img,
[data-theme="dark"] .dsu-button__icon svg {
  filter: brightness(0) saturate(100%) invert(1);
}

/* Icon only button - ajustado según tamaños */
.dsu-button--icon-only {
  padding: 8px;
  width: auto;
}

.dsu-button--icon-only.dsu-button--x-small {
  width: 36px;
  height: 36px;
  padding: 8px;
}

.dsu-button--icon-only.dsu-button--small {
  width: 37px;
  height: 37px;
  padding: 8px;
}

.dsu-button--icon-only.dsu-button--medium {
  width: 48px;
  height: 48px;
  padding: 12px;
}

.dsu-button--icon-only.dsu-button--large {
  width: 59px;
  height: 59px;
  padding: 16px;
}

/* === STICKY BUTTONS CONTAINER === */
.dsu-sticky-buttons {
  display: flex;
  gap: var(--spacing-24);
  align-items: flex-start;
  padding: var(--spacing-24) 173px var(--spacing-24) 136px;
  border-top: 1px solid var(--color-status-disabled);
  background-color: var(--color-surface-regular);
  width: 100%;
  box-sizing: border-box;
  position: sticky;
  bottom: 0;
  z-index: 100;
}

.dsu-sticky-buttons__button {
  flex: 1;
  min-width: 0;
}

/* Dark mode */
[data-theme="dark"] .dsu-sticky-buttons {
  background-color: var(--color-surface-regular);
  border-top-color: var(--color-status-disabled);
}


/* ========== NEXT FILE ========== */

/* ==========================================
   INPUT COMPONENT - Design System Docu
   Basado en Figma Components
   ========================================== */

.dsu-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-04);
  width: 100%;
}

/* === LABEL === */
.dsu-input-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 100%;
  gap: 4px;
  margin-bottom: 4px;
}

.dsu-input-label__text {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dsu-input-label__required {
  width: 4.802px;
  height: 4.963px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dsu-input-label__required img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dsu-input-label__hide {
  display: flex;
  align-items: center;
  gap: var(--spacing-04);
  font-family: var(--font-family-secondary);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  cursor: pointer;
}

.dsu-input-label__hide-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dsu-input-label__hide-icon img,
.dsu-input-label__hide-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-input-label__hide-icon img,
[data-theme="dark"] .dsu-input-label__hide-icon svg {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === INPUT FIELD === */
.dsu-input {
  width: 100%;
  min-height: 48px;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-basics-mid-blue);
  border-radius: 8px;
  background-color: var(--color-surface-regular);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.dsu-input::placeholder {
  color: var(--color-text-secondary);
}

.dsu-input:focus {
  outline: none;
  border: 1px solid var(--color-basics-dark-blue);
  color: var(--color-text-primary);
}

/* Dark mode - unified for all text inputs (.dsu-input, .settings-profile-input, .tasks-group-title__input) */
[data-theme="dark"] .dsu-input,
[data-theme="dark"] .settings-profile-input,
[data-theme="dark"] .tasks-group-title__input {
  background-color: var(--color-surface-regular);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

[data-theme="dark"] .dsu-input::placeholder,
[data-theme="dark"] .settings-profile-input::placeholder,
[data-theme="dark"] .tasks-group-title__input::placeholder {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .dsu-input:focus,
[data-theme="dark"] .settings-profile-input:focus,
[data-theme="dark"] .tasks-group-title__input:focus {
  color: var(--color-text-primary);
  border-color: var(--color-basics-white);
}

.dsu-input:disabled {
  background-color: var(--color-status-disabled);
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--color-text-secondary);
}

/* === INPUT PUBLISHED STATE (Read-only view) === */
.dsu-input--published {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-basics-gray);
  border-radius: 8px;
  padding: var(--spacing-08) 0;
  cursor: default;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  min-height: auto;
}

.dsu-input--published:focus {
  outline: none;
  border-bottom-color: var(--color-basics-gray);
}

.dsu-input--published::placeholder {
  color: var(--color-text-primary);
}

.dsu-input-group--hidden .dsu-input {
  background-color: var(--color-status-disabled);
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--color-text-secondary);
}

/* === INPUT WITH ICON === */
.dsu-input--with-icon {
  padding-right: var(--spacing-16);
}

.dsu-input__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.dsu-input__icon img,
.dsu-input__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-input__icon img,
[data-theme="dark"] .dsu-input__icon svg {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === INPUT ONLY (without label) === */
.dsu-input--only {
  margin-top: 0;
}

/* === ERROR STATE === */
.dsu-input-group--error .dsu-input {
  border: 1px solid var(--color-status-strong-red);
}

/* Ensure error state border is visible in dark mode */
[data-theme="dark"] .dsu-input-group--error .dsu-input {
  border: 1px solid var(--color-status-strong-red);
}

.dsu-input-error {
  font-family: var(--font-family-secondary);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  color: var(--color-status-strong-red);
  line-height: normal;
}

/* === INPUT CONTAINER === */
.dsu-input-container {
  position: relative;
  width: 100%;
}

.dsu-input-container .dsu-input {
  width: 100%;
  padding-right: calc(var(--spacing-16) + 20px + var(--spacing-08));
}

.dsu-input-container__icon {
  position: absolute;
  right: var(--spacing-16);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.dsu-input-container__icon img,
.dsu-input-container__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-input-container__icon img,
[data-theme="dark"] .dsu-input-container__icon svg {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === INPUT BUSCADOR (Search Input with Send Icon) === */
.dsu-input-buscador {
  position: relative;
  width: 100%;
  display: inline-block;
}

.dsu-input-buscador .dsu-input {
  width: 100%;
  padding-right: calc(var(--spacing-16) + 20px + var(--spacing-08));
  box-sizing: border-box;
}

.dsu-input-buscador__send-icon {
  position: absolute;
  right: var(--spacing-16);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dsu-input-buscador__send-icon--active {
  opacity: 1;
  pointer-events: auto;
}

.dsu-input-buscador__send-icon:hover {
  transform: translateY(-50%) scale(1.1);
}

.dsu-input-buscador__send-icon img,
.dsu-input-buscador__send-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-input-buscador__send-icon img,
[data-theme="dark"] .dsu-input-buscador__send-icon svg {
  filter: brightness(0) saturate(100%) invert(1);
}

/* Asegurar que el input tenga el padding correcto cuando el icono está activo */
.dsu-input-buscador--with-icon .dsu-input {
  padding-right: calc(var(--spacing-16) + 20px + var(--spacing-08));
}

/* === LINK BUTTON FOR INPUTS === */
.dsu-input-link-button {
  position: absolute;
  right: var(--spacing-16);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  background: transparent;
  border: none;
  padding: 0;
}

.dsu-input-link-button--active {
  opacity: 1;
  pointer-events: auto;
}

.dsu-input-link-button:hover {
  transform: translateY(-50%) scale(1.1);
}

.dsu-input-link-button img,
.dsu-input-link-button svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-input-link-button img,
[data-theme="dark"] .dsu-input-link-button svg {
  filter: brightness(0) saturate(100%) invert(1);
}

/* Ajustar padding del input cuando hay botón de link */
.dsu-input-container--with-link-button .dsu-input {
  padding-right: calc(var(--spacing-16) + 20px + var(--spacing-08));
}

.dsu-input-buscador--with-link-button .dsu-input {
  padding-right: calc(var(--spacing-16) + 40px + var(--spacing-08));
}

/* Contenteditable input style (when converted to allow links) */
.dsu-input-contenteditable {
  width: 100%;
  min-height: 48px;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-basics-mid-blue);
  border-radius: 8px;
  background-color: var(--color-surface-regular);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  transition: all 0.2s ease;
  box-sizing: border-box;
  outline: none;
}

.dsu-input-contenteditable:focus {
  outline: none;
  border: 1px solid var(--color-basics-dark-blue);
  color: var(--color-text-primary);
}

/* Dark mode - same as .dsu-input */
[data-theme="dark"] .dsu-input-contenteditable {
  background-color: var(--color-surface-especial);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

[data-theme="dark"] .dsu-input-contenteditable:focus {
  color: var(--color-text-primary);
  border-color: var(--color-basics-white);
}

.dsu-input-contenteditable a {
  color: var(--color-basics-dark-blue);
  text-decoration: underline;
}

[data-theme="dark"] .dsu-input-contenteditable a {
  color: var(--color-basics-light-blue);
}

/* === RICH TEXT INPUT === */
.dsu-rich-text-input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  border: 1px solid var(--color-basics-mid-blue);
  border-radius: 8px;
  background-color: var(--color-surface-regular);
  width: 100%;
  box-sizing: border-box;
}

/* Compact version for inputs converted to rich text */
.dsu-rich-text-input--compact {
  padding: 0;
  border: 1px solid var(--color-basics-mid-blue);
  border-radius: 8px;
  gap: 0;
  min-height: 48px;
}

.dsu-rich-text-input--compact .dsu-rich-text-input__toolbar--compact {
  display: flex; /* Mostrar toolbar siempre */
  position: absolute;
  top: 50%;
  right: var(--spacing-12);
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  z-index: 2;
  gap: 0;
}

/* Asegurar que el toolbar sea visible incluso cuando hay acciones en el contenedor */
.dsu-input-container.project-assets-input-wrapper .dsu-rich-text-input--compact .dsu-rich-text-input__toolbar--compact {
  right: calc(var(--spacing-12) + 80px); /* Ajustar posición cuando hay acciones */
}

.dsu-rich-text-input--compact .dsu-rich-text-input__editor--compact {
  min-height: 48px;
  padding: var(--spacing-12) calc(var(--spacing-16) + 32px + var(--spacing-08)) var(--spacing-12) var(--spacing-16); /* Padding derecho para el botón de link */
  border: none;
  border-radius: 8px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: transparent;
}

.dsu-rich-text-input--compact .dsu-rich-text-input__editor--compact:focus {
  outline: none;
}

.dsu-rich-text-input--compact .dsu-rich-text-input__editor--compact::before {
  content: attr(data-placeholder);
  color: var(--color-text-secondary);
  pointer-events: none;
  position: absolute;
}

.dsu-rich-text-input--compact .dsu-rich-text-input__editor--empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-secondary);
}

.dsu-rich-text-input--compact .dsu-rich-text-input__editor--compact:not(.dsu-rich-text-input__editor--empty)::before {
  display: none;
}

.dsu-rich-text-input--compact {
  position: relative;
}

/* Ajustes para contenedores con acciones (como project-assets-input-wrapper) */
.dsu-input-container.project-assets-input-wrapper .dsu-rich-text-input--compact {
  flex: 1;
  min-width: 0;
}

.dsu-input-container.project-assets-input-wrapper .dsu-rich-text-input--compact .dsu-rich-text-input__editor--compact {
  padding-right: calc(80px + 32px + var(--spacing-08)); /* Espacio para acciones + botón de link */
}

/* Ajustes para contenedores de deliverables (project-deliverables-input-wrapper) */
.dsu-input-container.project-deliverables-input-wrapper .dsu-rich-text-input--compact {
  flex: 1;
  min-width: 0;
}

.dsu-input-container.project-deliverables-input-wrapper .dsu-rich-text-input--compact .dsu-rich-text-input__editor--compact {
  padding-right: calc(80px + 32px + var(--spacing-08)); /* Espacio para acciones + botón de link */
}

.dsu-input-container.project-deliverables-input-wrapper .dsu-rich-text-input--compact .dsu-rich-text-input__toolbar--compact {
  right: calc(var(--spacing-12) + 80px); /* Ajustar posición cuando hay acciones */
}

/* Ajustes para contenedores de deliverables en create_space (cs-project-deliverables-input-wrapper) */
.dsu-input-container.cs-project-deliverables-input-wrapper .dsu-rich-text-input--compact {
  flex: 1;
  min-width: 0;
}

.dsu-input-container.cs-project-deliverables-input-wrapper .dsu-rich-text-input--compact .dsu-rich-text-input__editor--compact {
  padding-right: calc(80px + 32px + var(--spacing-08)); /* Espacio para acciones + botón de link */
}

.dsu-input-container.cs-project-deliverables-input-wrapper .dsu-rich-text-input--compact .dsu-rich-text-input__toolbar--compact {
  right: calc(var(--spacing-12) + 80px); /* Ajustar posición cuando hay acciones */
}

/* Communication channels compact rich text */
.dsu-input-container.project-communication-channels-input-wrapper .dsu-rich-text-input--compact {
  flex: 1;
  min-width: 0;
}

.dsu-rich-text-input__toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-08);
  padding-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--color-basics-gray);
}

.dsu-rich-text-input__toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background-color: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.dsu-rich-text-input__toolbar-button:hover {
  background-color: var(--color-status-to-start);
}

.dsu-rich-text-input__toolbar-button--active {
  background-color: var(--color-basics-gray);
}

/* Estilos específicos para botón de link en toolbar compacta */
.dsu-rich-text-input__toolbar--compact .dsu-rich-text-input__toolbar-button {
  /* width: 20px; */
  /* height: 20px; */
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.dsu-rich-text-input__toolbar--compact .dsu-rich-text-input__toolbar-button:hover {
  opacity: 1;
  background-color: transparent;
}

.dsu-rich-text-input--compact:focus-within .dsu-rich-text-input__toolbar--compact .dsu-rich-text-input__toolbar-button {
  opacity: 1;
}

.dsu-rich-text-input__toolbar-button img,
.dsu-rich-text-input__toolbar-button svg {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-rich-text-input__toolbar-button img,
[data-theme="dark"] .dsu-rich-text-input__toolbar-button svg {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-rich-text-input__toolbar-separator {
  width: 1px;
  height: 24px;
  background-color: var(--color-basics-gray);
  margin: 0 var(--spacing-04);
}

.dsu-rich-text-input__editor {
  min-height: 96px;
  width: 100%;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: transparent;
  border: none;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}

.dsu-rich-text-input__editor::placeholder {
  color: var(--color-text-secondary);
}

.dsu-rich-text-input:focus-within,
.dsu-rich-text-input--compact:focus-within {
  border: 1px solid var(--color-basics-dark-blue);
}

/* Dark mode - ensure border is visible when focused */
[data-theme="dark"] .dsu-rich-text-input:focus-within,
[data-theme="dark"] .dsu-rich-text-input--compact:focus-within {
  border: 1px solid var(--color-basics-white);
}

.dsu-rich-text-input__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-basics-gray);
}

.dsu-rich-text-input__footer-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-08);
}

.dsu-rich-text-input__footer-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background-color: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.dsu-rich-text-input__footer-button:hover {
  background-color: var(--color-status-to-start);
}

.dsu-rich-text-input__footer-button img,
.dsu-rich-text-input__footer-button svg {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Dark mode */
[data-theme="dark"] .dsu-rich-text-input {
  background-color: var(--color-surface-regular);
  border: 1px solid var(--color-basics-mid-blue);
}

[data-theme="dark"] .dsu-rich-text-input__toolbar-button:hover {
  background-color: var(--color-status-to-start);
}

[data-theme="dark"] .dsu-rich-text-input__toolbar-button--active {
  background-color: var(--color-basics-gray);
}

/* === AGREEMENTS COMPONENT === */
.dsu-agreements {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--spacing-16) var(--spacing-32);
  background-color: var(--color-surface-especial);
  border-radius: var(--radius-lg);
  width: 100%;
  /* max-width: 690px; */
  box-sizing: border-box;
}

.dsu-agreements--default {
  padding: var(--spacing-48) var(--spacing-24);
}

.dsu-agreements__wrapper {
  display: flex;
  gap: 27px;
  align-items: center;
  width: 100%;
}

.dsu-agreements__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  min-width: 0;
  padding: 21px 16px;
}

.dsu-agreements__headline {
  display: flex;
  gap: var(--spacing-08);
  align-items: center;
  width: 100%;
  margin-bottom: 32px;
}

.dsu-agreements__headline-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsu-agreements__headline-icon img,
.dsu-agreements__headline-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-agreements__headline-icon img,
[data-theme="dark"] .dsu-agreements__headline-icon svg {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-agreements__headline-text {
  font-family: var(--font-family-secondary);
  /* font-size: var(--font-size-2xl); */
  font-weight: var(--font-weight-black);
  line-height: normal;
  color: var(--color-text-primary);
  font-size: 24px;
  margin: 0;
}

.dsu-agreements__empty-illustration {
  width: 224.832px;
  height: 180.623px;
  flex-shrink: 0;
}

.dsu-agreements__empty-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dsu-agreements__empty-message {
  font-family: var(--font-family-primary);
  font-size: 36px;
  font-weight: var(--font-weight-black);
  line-height: normal;
  color: var(--color-text-primary);
  /* margin-top: var(--spacing-24); */
  margin: 16px 0 16px;
}

.dsu-agreements__empty-button {
  margin-top: var(--spacing-24);
  width: 130px;
  flex-shrink: 0;
}

.dsu-agreements__agreement {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 100%;
  padding-bottom: 32px;
}

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

.dsu-agreements__agreement-title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-black);
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0;
}

.dsu-agreements__agreement-toggle {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.dsu-agreements__agreement-toggle img,
.dsu-agreements__agreement-toggle svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-agreements__agreement-toggle img,
[data-theme="dark"] .dsu-agreements__agreement-toggle svg {
  filter: brightness(0) saturate(100%) invert(1);
}

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

.dsu-agreements__agreement-date {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  color: var(--color-text-primary);
  margin: 0;
}

.dsu-agreements__agreement-status {
  display: flex;
  align-items: center;
}

/* Date Picker Styles - Moved to date-picker.css */

.dsu-agreements__agreement-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-08);
  padding-left: var(--spacing-24);
  /* width: 100%; */
}

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

.dsu-agreements__agreement-item-text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-text-primary);
  width: 90%;
  flex-shrink: 0;
  margin-top: 0;
}

.dsu-agreements__agreement-item-actions {
  display: flex;
  gap: var(--spacing-24);
  align-items: center;
  flex-shrink: 0;
}

.dsu-agreements__agreement-item-action {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.dsu-agreements__agreement-item-action:hover {
  opacity: 0.7;
}

.dsu-agreements__agreement-item-action img,
.dsu-agreements__agreement-item-action svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-agreements__agreement-item-action img,
[data-theme="dark"] .dsu-agreements__agreement-item-action svg {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-agreements__agreement-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding-left: var(--spacing-24);
  align-items: flex-end;
  /* width: 100%; */
  margin-bottom: 32px;
}

.dsu-agreements__agreement-form-input {
  width: 100%;
}

.dsu-agreements__agreement-form-actions {
  display: flex;
  gap: var(--spacing-08);
  align-items: stretch;
  width: 100%;
  justify-content: space-between;
}

.dsu-agreements__date-button {
  background-color: var(--color-surface-regular);
  border: 1px solid var(--color-basics-mid-blue);
  border-radius: 8px;
  padding: var(--spacing-08) var(--spacing-16);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-08);
  cursor: pointer;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  height: 36px;
  width: 150px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.dsu-agreements__date-button-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

.dsu-agreements__date-button-icon img,
.dsu-agreements__date-button-icon svg {
  width: 13.333px;
  height: 13.333px;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-agreements__date-button-icon img,
[data-theme="dark"] .dsu-agreements__date-button-icon svg {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-agreements__send-button {
  background-color: var(--color-button-primary-bg-default);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--spacing-08) var(--spacing-16);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-08);
  cursor: pointer;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-basics-dark-blue);
  white-space: nowrap;
  transition: background-color 0.2s ease;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  justify-content: center;
}

.dsu-agreements__send-button:hover {
  background-color: var(--color-button-primary-bg-hover);
}

.dsu-agreements__send-button:disabled {
  background-color: var(--color-status-to-start);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.dsu-agreements__send-button-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsu-agreements__send-button-icon img,
.dsu-agreements__send-button-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-agreements__send-button-icon img,
[data-theme="dark"] .dsu-agreements__send-button-icon svg {
  filter: brightness(0) saturate(100%) invert(1);
}

/* .dsu-agreements__new-agreement-button - Reemplazado por botón secondary de la librería */

.dsu-agreements__collapsed-agreements {
  display: flex;
  flex-direction: column;
  /* gap: var(--spacing-16); */
  width: 100%;
}

.dsu-agreements__collapsed-agreement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24px;
}

/* Dark mode */
[data-theme="dark"] .dsu-agreements {
  background-color: var(--color-surface-especial);
}

[data-theme="dark"] .dsu-agreements__send-button:disabled {
  background-color: var(--color-status-to-start);
  color: var(--color-text-secondary);
}

/* Estilos del botón secondary ahora manejados por button.css */

/* ==========================================
   INPUT CHIP (Associated Projects Group)
   ========================================== */

/* Associated Projects Group */
.associated-projects-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* Chips Container */
.projects-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-08);
  margin-top: var(--spacing-12);
  min-height: 24px;
}



/* ========== NEXT FILE ========== */

/* ==========================================
   CARD COMPONENT - Design System Docu
   Basado en Figma Components
   Card de inicio de proyecto con estados Default y Hover
   ========================================== */

/* === CARD === */
.dsu-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-08);
  width: 272px;
  height: 117px;
  padding: var(--spacing-24);
  background-color: var(--color-surface-regular);
  border: 1px solid var(--color-basics-mid-blue);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* === CARD HOVER === */
.dsu-card:hover,
.dsu-card--hover {
  box-shadow: var(--button-secondary-elevation-hover);
}

/* === CARD TITLE === */
.dsu-card__title {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  line-height: normal;
  color: var(--color-text-primary);
  width: 100%;
  margin: 0;
}

/* === CARD BODY === */
.dsu-card__body {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  width: 100%;
  margin: 0;
}

/* === CARD LINK (opcional, para hacerla clickeable) === */
.dsu-card--clickable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.dsu-card--clickable:hover {
  text-decoration: none;
}

/* === DARK MODE SUPPORT === */
[data-theme="dark"] .dsu-card {
  background-color: var(--color-surface-regular);
  border-color: var(--color-basics-mid-blue);
}

/* ==========================================
   PROFILE CARD COMPONENT
   Basado en Figma Components
   Tarjetas de perfil con imagen, nombre y contacto
   ========================================== */

/* === PROFILE CARD === */
.dsu-profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  align-items: flex-start;
  width: 200px;
  box-sizing: border-box;
}

/* === PROFILE CARD IMAGE WRAPPER === */
.dsu-profile-card__image-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--spacing-08);
  box-sizing: border-box;
}

.dsu-profile-card__image-wrapper:hover {
  cursor: pointer;
}

/* === PROFILE CARD IMAGE === */
.dsu-profile-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--radius-md);
  pointer-events: none;
  transition: transform 0.3s ease;
}

.dsu-profile-card__image-wrapper:hover .dsu-profile-card__image {
  transform: scale(1.1);
}

/* === PROFILE CARD EDIT BUTTON === */
.dsu-profile-card__edit-button {
  position: relative;
  z-index: 1;
  background-color: var(--color-surface-regular);
  border: none;
  border-radius: var(--radius-md);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.dsu-profile-card__edit-button:hover {
  background-color: var(--color-surface-especial);
}

/* === PROFILE CARD EDIT ICON === */
.dsu-profile-card__edit-icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

/* Dark mode icon adjustment */
[data-theme="dark"] .dsu-profile-card__edit-icon img,
[data-theme="dark"] button.dsu-profile-card__edit-icon img,
[data-theme="dark"] .dsu-profile-card__edit-button img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === PROFILE CARD CONTENT === */
.dsu-profile-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  align-items: flex-start;
  width: 100%;
}

/* === PROFILE CARD NAME JOB === */
.dsu-profile-card__name-job {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
}

/* === PROFILE CARD NAME === */
.dsu-profile-card__name {
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-weight: var(--font-weight-black);
  line-height: normal;
  color: var(--color-text-primary);
  margin: 0;
  width: 100%;
  transition: text-decoration 0.2s ease;
  cursor: pointer;
}

.dsu-profile-card__name:hover {
  text-decoration: underline;
}

/* === PROFILE CARD JOB === */
.dsu-profile-card__job {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  margin: 0;
  width: 100%;
}

/* === PROFILE CARD CONTACT === */
.dsu-profile-card__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
}

/* === PROFILE CARD CONTACT ITEM === */
.dsu-profile-card__contact-item {
  display: flex;
  gap: var(--spacing-08);
  align-items: center;
  width: 100%;
}

/* === PROFILE CARD CONTACT ICON === */
.dsu-profile-card__contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

/* Dark mode icon adjustment */
[data-theme="dark"] .dsu-profile-card__contact-icon {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === PROFILE CARD CONTACT TEXT === */
.dsu-profile-card__contact-text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* === PROFILE CARD CONTACT LINK (Email) === */
.dsu-profile-card__contact-link {
  text-decoration: none;
  color: var(--color-text-primary);
  transition: text-decoration 0.2s ease;
}

.dsu-profile-card__contact-link:hover {
  text-decoration: underline;
}

/* === PROFILE AVATAR === */
.dsu-profile-avatar {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: var(--color-surface-especial);
  border-radius: var(--radius-lg);
  padding: var(--spacing-08);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  box-sizing: border-box;
}

/* === PROFILE AVATAR ICON === */
.dsu-profile-avatar__icon {
  position: absolute;
  top: var(--spacing-08);
  left: var(--spacing-08);
  width: 108.01px;
  height: 175.537px;
  object-fit: contain;
  object-position: top left;
}

/* === PROFILE AVATAR EDIT BUTTON === */
.dsu-profile-avatar__edit-button {
  position: relative;
  z-index: 1;
  background-color: var(--color-basics-dark-blue);
  border: none;
  border-radius: var(--radius-md);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
}

.dsu-profile-avatar__edit-button:hover {
  opacity: 0.9;
}

/* === PROFILE AVATAR EDIT ICON === */
.dsu-profile-avatar__edit-icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1); /* White icon */
}

/* === DARK MODE SUPPORT FOR PROFILE CARDS === */
[data-theme="dark"] .dsu-profile-card__edit-button {
  background-color: var(--color-surface-regular);
}

[data-theme="dark"] .dsu-profile-card__edit-button:hover {
  background-color: var(--color-surface-especial);
}

[data-theme="dark"] .dsu-profile-avatar {
  background-color: var(--color-surface-especial);
}

/* ==========================================
   PROFILE CARD PLACEHOLDER COMPONENT
   Basado en Figma Components
   Tarjeta placeholder para agregar nuevos miembros
   Toda la card tiene zona activa (clickeable)
   ========================================== */

/* === PROFILE CARD PLACEHOLDER === */
.dsu-profile-card-placeholder {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  user-select: none;
}

.dsu-profile-card-placeholder:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Asegurar que todos los elementos hijos no capturen el pointer por defecto */
.dsu-profile-card-placeholder > * {
  pointer-events: none;
}

/* Restaurar pointer-events solo para elementos realmente interactivos */
.dsu-profile-card-placeholder a,
.dsu-profile-card-placeholder button {
  pointer-events: auto;
}

/* === PROFILE CARD PLACEHOLDER IMAGE === */
.dsu-profile-card-placeholder__image {
  width: 100%;
  height: 200px;
  background-color: var(--color-surface-especial);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--spacing-08);
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
}

.dsu-profile-card-placeholder__image:hover {
  background-color: #e8ecf1;
}

/* === PROFILE CARD PLACEHOLDER EDIT ICON === */
.dsu-profile-card-placeholder__edit-icon {
  width: 28px;
  height: 28px;
  background-color: var(--color-surface-regular);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.dsu-profile-card-placeholder__edit-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-profile-card-placeholder__edit-icon img {
  filter: brightness(0) saturate(100%) invert(1);
}

[data-theme="dark"] .dsu-profile-card-placeholder__contact-icon {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === PROFILE CARD PLACEHOLDER CONTENT === */
.dsu-profile-card-placeholder__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 100%;
}

/* === PROFILE CARD PLACEHOLDER NAME JOB === */
.dsu-profile-card-placeholder__name-job {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* === PROFILE CARD PLACEHOLDER NAME === */
.dsu-profile-card-placeholder__name {
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-weight: var(--font-weight-black);
  line-height: normal;
  color: var(--color-text-primary);
  margin: 0;
}

/* === PROFILE CARD PLACEHOLDER JOB === */
.dsu-profile-card-placeholder__job {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  margin: 0;
}

/* === PROFILE CARD PLACEHOLDER CONTACT === */
.dsu-profile-card-placeholder__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* === PROFILE CARD PLACEHOLDER CONTACT ITEM === */
.dsu-profile-card-placeholder__contact-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-08);
}

/* === PROFILE CARD PLACEHOLDER CONTACT ICON === */
.dsu-profile-card-placeholder__contact-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* === PROFILE CARD PLACEHOLDER CONTACT TEXT === */
.dsu-profile-card-placeholder__contact-text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  flex: 1;
}

/* === DARK MODE SUPPORT === */
[data-theme="dark"] .dsu-profile-card-placeholder__image {
  background-color: var(--color-surface-especial);
}

[data-theme="dark"] .dsu-profile-card-placeholder__image:hover {
  background-color: var(--color-surface-light);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .dsu-card {
    width: 100%;
    max-width: 100%;
  }

  .dsu-profile-card {
    width: 100%;
    max-width: 200px;
  }

  .dsu-profile-card__image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .dsu-profile-card-placeholder {
    width: 100%;
    max-width: 200px;
  }

  .dsu-profile-card-placeholder__image {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}



/* ========== NEXT FILE ========== */

/* ==========================================
   CHIP COMPONENT - Design System Docu
   Basado en Figma Components
   Espaciados y tamaños exactos según diseño
   ========================================== */

/* === BASE CHIP === */
.project-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    background-color: var(--color-status-disabled);
    border: none;
    border-radius: 50px;
    font-family: var(--font-family-secondary);
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary); /* #0a243f */
    cursor: default;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.project-chip:hover {
    background-color: var(--color-border-light);
}

/* === CHIP TEXT === */
.project-chip__text {
    white-space: nowrap;
    text-align: center;
}

/* === CHIP CLOSE BUTTON === */
.project-chip__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.project-chip__close:hover {
    background-color: var(--color-basics-gray);
}

.project-chip__close-icon {
  width: 12px;
  height: 12px;
  display: block;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .project-chip__close-icon {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === CHIPS CONTAINER === */
.projects-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-08);
    margin-top: var(--spacing-12);
    min-height: 24px;
}



/* ========== NEXT FILE ========== */

/* ==========================================
   TABS / CHIP COMPONENT - Design System Docu
   Basado en Figma Components
   Componente chip/tab con estados Active e Inactive
   ========================================== */

/* === CHIP BASE === */
.dsu-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--spacing-08) var(--spacing-16);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family-secondary);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

/* === ACTIVE STATE === */
.dsu-chip--active {
  background-color: var(--color-basics-dark-blue);
  color: var(--color-surface-regular);
}

.dsu-chip--active:hover {
  background-color: var(--color-basics-dark-blue);
  opacity: 0.9;
}

/* === INACTIVE STATE === */
.dsu-chip--inactive {
  background-color: var(--color-status-disabled);
  color: var(--color-text-primary);
}

.dsu-chip--inactive:hover {
  background-color: var(--color-status-to-start-hover);
}

/* === CHIP ICON (optional, for icon + text pills) === */
.dsu-chip__icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

/* === CHIP TEXT === */
.dsu-chip__text {
  flex-shrink: 0;
}

/* === CHIP OUTLINE (subtle border, matches reference pills) === */
.dsu-chip--outline {
  border: 1px solid var(--color-border-light);
}

.dsu-chip--outline:hover {
  border-color: var(--color-basics-mid-blue);
}

/* === DARK MODE SUPPORT === */
[data-theme="dark"] .dsu-chip--active {
  background-color: var(--color-basics-white);
  color: var(--color-basics-dark-blue);
}

[data-theme="dark"] .dsu-chip--active:hover {
  background-color: var(--color-basics-white);
  opacity: 0.9;
}

[data-theme="dark"] .dsu-chip--inactive {
  background-color: var(--color-status-disabled);
  color: var(--color-text-primary);
}

[data-theme="dark"] .dsu-chip--inactive:hover {
  background-color: var(--color-status-to-start-hover);
}

[data-theme="dark"] .dsu-chip__icon {
  filter: brightness(0) saturate(100%) invert(1);
}[data-theme="dark"] .dsu-chip--outline {
  border-color: var(--color-border-default);
}[data-theme="dark"] .dsu-chip--outline:hover {
  border-color: var(--color-basics-white);
}


/* ========== NEXT FILE ========== */

/* ==========================================
   STATUS BUTTON COMPONENT - Design System Docu
   Basado en Figma Components
   Task Status con funcionalidad dropdown
   ========================================== */

/* === STATUS BUTTON WRAPPER === */
.dsu-status-button-wrapper {
  position: relative;
  display: inline-block;
}

/* === STATUS BUTTON === */
.dsu-status-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-08);
  padding: var(--spacing-08) var(--spacing-24);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  width: 144px;
}

/* === IN PROGRESS === */
.dsu-status-button--in-progress {
  background-color: var(--color-status-in-progress);
  color: var(--color-basics-dark-blue);
}

.dsu-status-button--in-progress:hover,
.dsu-status-button--in-progress.dsu-status-button--hover {
  background-color: var(--color-status-in-progress-hover);
}

/* === DONE === */
.dsu-status-button--done {
  background-color: var(--color-status-done);
  color: var(--color-basics-dark-blue);
}

.dsu-status-button--done:hover,
.dsu-status-button--done.dsu-status-button--hover {
  background-color: var(--color-status-done-hover);
}

/* === PAUSED === */
.dsu-status-button--paused {
  background-color: var(--color-status-paused);
  color: var(--color-basics-white);
}

.dsu-status-button--paused:hover,
.dsu-status-button--paused.dsu-status-button--hover {
  background-color: var(--color-status-paused-hover);
}

/* Dark mode for paused status - text color stays white but may need adjustment */
[data-theme="dark"] .dsu-status-button--paused {
  color: var(--color-basics-white);
  opacity: 0.9; /* Slight adjustment for better contrast in dark mode */
}

[data-theme="dark"] .dsu-status-button--paused .dsu-status-button__chevron img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === TO START === */
.dsu-status-button--to-start {
  background-color: var(--color-status-to-start);
  color: var(--color-basics-dark-blue);
}

.dsu-status-button--to-start:hover,
.dsu-status-button--to-start.dsu-status-button--hover {
  background-color: var(--color-status-to-start-hover);
}

/* Dark mode for to-start status */
[data-theme="dark"] .dsu-status-button--to-start {
  color: var(--color-basics-white);
}

[data-theme="dark"] .dsu-status-button--to-start .dsu-status-button__chevron img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === STATUS BUTTON TEXT === */
.dsu-status-button__text {
  flex-shrink: 0;
}

/* === STATUS BUTTON CHEVRON === */
.dsu-status-button__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsu-status-button__chevron img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

/* === STATUS DROPDOWN === */
.dsu-status-dropdown {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: calc(100% + var(--spacing-08));
  left: 0;
  width: 192px;
  background-color: var(--color-surface-regular);
  border: 1px solid var(--color-basics-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  overflow: hidden;
  z-index: 1000;
  margin-top: var(--spacing-04);
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
  isolation: isolate;
}

.dsu-status-dropdown--expanded {
  /* Animation expanded state */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* === STATUS DROPDOWN ITEM === */
.dsu-status-dropdown__item {
  display: flex;
  align-items: center;
  padding: var(--spacing-12) var(--spacing-16);
  border: none;
  background-color: var(--color-surface-regular);
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  text-align: left;
  width: 100%;
  border-bottom: 1px solid var(--color-basics-gray);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.dsu-status-dropdown__item:last-child {
  border-bottom: none;
}

.dsu-status-dropdown__item:hover:not(.dsu-status-dropdown__item--active) {
  background-color: var(--color-surface-especial);
}

.dsu-status-dropdown__item--active {
  background-color: var(--color-surface-especial);
  font-weight: var(--font-weight-bold);
}

.dsu-status-dropdown__text {
  flex: 1;
  white-space: nowrap;
}

/* === DROPDOWN ITEM STATUS COLORS === */
.dsu-status-dropdown__item[data-status="in-progress"] {
  border-left: 3px solid var(--color-status-in-progress);
}

.dsu-status-dropdown__item[data-status="done"] {
  border-left: 3px solid var(--color-status-done);
}

.dsu-status-dropdown__item[data-status="paused"] {
  border-left: 3px solid var(--color-status-paused);
}

.dsu-status-dropdown__item[data-status="to-start"] {
  border-left: 3px solid var(--color-status-to-start);
}

/* ==========================================
   STAGE STATUS COMPONENT
   Basado en Figma Components
   Estados de etapa del proyecto con badge, fecha y barra de progreso
   ========================================== */

/* === STAGE STATUS CONTAINER === */
.dsu-stage-status {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-08);
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/* === STAGE STATUS BADGE === */
.dsu-stage-status__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-08);
  padding: var(--spacing-16);
  border-radius: var(--radius-lg);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

/* === STAGE STATUS BADGE ICON === */
.dsu-stage-status__badge-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.dsu-stage-status__badge-icon img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-stage-status__badge-icon img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === STAGE STATUS BADGE TEXT === */
.dsu-stage-status__badge-text {
  flex-shrink: 0;
  color: var(--color-basics-dark-blue);
}

/* === IN PROGRESS STATE === */
.dsu-stage-status--in-progress .dsu-stage-status__badge {
  background-color: var(--color-status-in-progress);
  color: var(--color-basics-dark-blue);
}

/* === TO START STATE === */
.dsu-stage-status--to-start .dsu-stage-status__badge {
  background-color: var(--color-status-disabled);
  color: var(--color-basics-dark-blue);
}

/* Dark mode for to-start stage status */
[data-theme="dark"] .dsu-stage-status--to-start .dsu-stage-status__badge {
  color: var(--color-basics-white);
}

[data-theme="dark"] .dsu-stage-status--to-start .dsu-stage-status__badge-text {
  color: var(--color-basics-white);
}

/* === COMPLETED STATE === */
.dsu-stage-status--completed .dsu-stage-status__badge {
  background-color: var(--color-status-done);
  color: var(--color-basics-dark-blue);
}

/* === STAGE STATUS DATE === */
.dsu-stage-status__date {
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: 600; /* SemiBold */
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  white-space: nowrap;
  margin: 0;
}

/* === TO START: DISABLED DATE AND PROGRESS === */
.dsu-stage-status--to-start .dsu-stage-status__date,
.dsu-stage-status--to-start .dsu-progress,
.dsu-stage-status--to-start .dsu-progress__percentage {
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================
   SEVERITY BUTTON COMPONENT
   Same pattern as status button: Low, Medium, High, Critical
   ========================================== */

.dsu-severity-button-wrapper {
  position: relative;
  display: inline-block;
}

.dsu-severity-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-08);
  padding: var(--spacing-08) var(--spacing-24);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  min-width: 120px;
}

.dsu-severity-button__text { flex-shrink: 0; }
.dsu-severity-button__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dsu-severity-button__chevron img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.dsu-severity-button--low {
  background-color: var(--color-severity-low);
  color: var(--color-basics-dark-blue);
}
.dsu-severity-button--low:hover { background-color: var(--color-severity-low-hover); }

.dsu-severity-button--medium {
  background-color: var(--color-severity-medium);
  color: var(--color-basics-dark-blue);
}
.dsu-severity-button--medium:hover { background-color: var(--color-severity-medium-hover); }

.dsu-severity-button--high {
  background-color: var(--color-severity-high);
  color: var(--color-basics-dark-blue);
}
.dsu-severity-button--high:hover { background-color: var(--color-severity-high-hover); }

.dsu-severity-button--critical {
  background-color: var(--color-severity-critical);
  color: var(--color-basics-white);
}
.dsu-severity-button--critical:hover { background-color: var(--color-severity-critical-hover); }

[data-theme="dark"] .dsu-severity-button--critical .dsu-severity-button__chevron img {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-severity-dropdown {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100% + var(--spacing-08));
  left: 0;
  width: 192px;
  background-color: var(--color-surface-regular);
  border: 1px solid var(--color-basics-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  overflow: hidden;
  z-index: 1001;
  margin-top: var(--spacing-04);
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
}

.dsu-severity-dropdown--expanded {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dsu-severity-dropdown__item {
  display: flex;
  align-items: center;
  padding: var(--spacing-12) var(--spacing-16);
  border: none;
  background-color: var(--color-surface-regular);
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  text-align: left;
  width: 100%;
  border-bottom: 1px solid var(--color-basics-gray);
}

.dsu-severity-dropdown__item:last-child { border-bottom: none; }
.dsu-severity-dropdown__item:hover { background-color: var(--color-surface-especial); }

.dsu-severity-dropdown__item[data-severity="low"] { border-left: 3px solid var(--color-severity-low); }
.dsu-severity-dropdown__item[data-severity="medium"] { border-left: 3px solid var(--color-severity-medium); }
.dsu-severity-dropdown__item[data-severity="high"] { border-left: 3px solid var(--color-severity-high); }
.dsu-severity-dropdown__item[data-severity="critical"] { border-left: 3px solid var(--color-severity-critical); }

/* Status variants when using severity structure (data-status) */
.dsu-severity-dropdown__item[data-status="to-start"] { border-left: 3px solid var(--color-status-to-start); }
.dsu-severity-dropdown__item[data-status="in-progress"] { border-left: 3px solid var(--color-status-in-progress); }
.dsu-severity-dropdown__item[data-status="done"] { border-left: 3px solid var(--color-status-done); }
.dsu-severity-dropdown__item[data-status="paused"] { border-left: 3px solid var(--color-status-paused); }

/* Status button modifiers on severity structure */
.dsu-severity-button.dsu-status-button--to-start {
  background-color: var(--color-status-to-start);
  color: var(--color-basics-dark-blue);
}
.dsu-severity-button.dsu-status-button--to-start:hover { background-color: var(--color-status-to-start-hover); }

.dsu-severity-button.dsu-status-button--in-progress {
  background-color: var(--color-status-in-progress);
  color: var(--color-basics-dark-blue);
}
.dsu-severity-button.dsu-status-button--in-progress:hover { background-color: var(--color-status-in-progress-hover); }

.dsu-severity-button.dsu-status-button--done {
  background-color: var(--color-status-done);
  color: var(--color-basics-dark-blue);
}
.dsu-severity-button.dsu-status-button--done:hover { background-color: var(--color-status-done-hover); }

.dsu-severity-button.dsu-status-button--paused {
  background-color: var(--color-status-paused);
  color: var(--color-basics-white);
}
.dsu-severity-button.dsu-status-button--paused:hover { background-color: var(--color-status-paused-hover); }

[data-theme="dark"] .dsu-severity-button.dsu-status-button--to-start {
  color: var(--color-basics-white);
}
[data-theme="dark"] .dsu-severity-button.dsu-status-button--paused .dsu-severity-button__chevron img {
  filter: brightness(0) saturate(100%) invert(1);
}



/* ========== NEXT FILE ========== */

/* ==========================================
   DATE PICKER COMPONENT - Design System Docu
   Basado en Figma Components
   ========================================== */

.dsu-date-button-wrapper {
  position: relative;
}

.dsu-date-picker {
  position: absolute;
  top: calc(100% + var(--spacing-08));
  left: 0;
  background-color: var(--color-surface-regular);
  border: 1px solid var(--color-basics-gray);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  padding: var(--spacing-08);
  z-index: 1000;
  min-width: 260px;
  max-height: 320px;
  display: none;
}

.dsu-date-picker--visible {
  display: block;
}

.dsu-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-08);
}

.dsu-date-picker__nav-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--spacing-04);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  width: 20px;
  height: 20px;
}

.dsu-date-picker__nav-button:hover {
  background-color: var(--color-status-to-start);
}

.dsu-date-picker__nav-button img {
  width: 12px;
  height: 12px;
}

/* Dark mode icon adjustment for date picker navigation */
[data-theme="dark"] .dsu-date-picker__nav-button img {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-date-picker__month-year {
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.dsu-date-picker__calendar {
  width: 100%;
}

.dsu-date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-02);
  margin-bottom: var(--spacing-06);
}

.dsu-date-picker__weekday {
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  padding: var(--spacing-02) 0;
}

.dsu-date-picker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-02);
}

.dsu-date-picker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  min-height: 28px;
  max-height: 28px;
  width: 100%;
}

.dsu-date-picker__day:hover {
  background-color: var(--color-status-to-start);
}

.dsu-date-picker__day--other-month {
  color: var(--color-text-secondary);
  opacity: 0.5;
}

.dsu-date-picker__day--today {
  font-weight: var(--font-weight-bold);
  background-color: var(--color-status-to-start);
}

.dsu-date-picker__day--selected {
  background-color: var(--color-status-in-progress);
  color: var(--color-basics-dark-blue);
  font-weight: var(--font-weight-bold);
}

/* Dark Mode */
[data-theme="dark"] .dsu-date-picker {
  background-color: var(--color-surface-regular);
  border-color: var(--color-basics-gray);
}

[data-theme="dark"] .dsu-date-picker__nav-button:hover {
  background-color: var(--color-status-to-start);
}

[data-theme="dark"] .dsu-date-picker__day:hover {
  background-color: var(--color-status-to-start);
}

[data-theme="dark"] .dsu-date-picker__day--today {
  background-color: var(--color-status-to-start);
}

[data-theme="dark"] .dsu-date-picker__day--selected {
  background-color: var(--color-status-in-progress);
  color: var(--color-basics-dark-blue);
}



/* ========== NEXT FILE ========== */

/* ==========================================
   PROGRESS BAR COMPONENT - Design System Docu
   Basado en Figma Components
   Tamaños: Default (5px), Medium (10px)
   ========================================== */

/* === PROGRESS BAR WRAPPER === */
.dsu-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-08);
}

.dsu-progress--full-width {
  width: 100%;
}

/* === PERCENTAGE === */
.dsu-progress__percentage {
  font-family: var(--font-family-secondary);
  font-weight: 600; /* SemiBold */
  font-size: 10px; /* Default size */
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  text-align: center;
  white-space: nowrap;
}

/* === BAR === */
.dsu-progress__bar {
  background-color: var(--color-status-disabled);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.dsu-progress__fill {
  background-color: var(--color-status-done);
  height: 100%;
  width: 0%;
  border-radius: 50px;
  transition: width 0.3s ease;
}

/* === SIZES === */
.dsu-progress--default .dsu-progress__bar {
  width: 165px;
  height: 5px;
}

.dsu-progress--default.dsu-progress--full-width .dsu-progress__bar {
  width: 100%;
  flex: 1;
  min-width: 0;
}

.dsu-progress--medium .dsu-progress__percentage {
  font-size: 12px;
}

.dsu-progress--medium .dsu-progress__bar {
  width: 193px;
  height: 10px;
}

.dsu-progress--medium.dsu-progress--full-width .dsu-progress__bar {
  width: 100%;
  flex: 1;
  min-width: 0;
}




/* ========== NEXT FILE ========== */

/* ==========================================
   NAVIGATION COMPONENT - Design System Docu
   Basado en Figma Components
   Sidebar funcional con todas sus variantes
   ========================================== */

/* === VARIABLES === */
:root {
  --sidebar-width: 260px;
  --sidebar-width-icon: 80px;
}

/* === SIDEBAR CONTAINER === */
.dsu-sidebar {
  background-color: var(--color-surface-regular);
  border-right: 1px solid var(--color-basics-gray);
  padding: 64px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 6100;
  height: 100vh;
  min-height: 100vh;
  transition: background-color 0.2s ease, border-right-color 0.2s ease;
  width: var(--sidebar-width);
  overflow-x: hidden;
}

/* Transition only when toggling, not on initial load */
.dsu-sidebar.sidebar-initialized {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === SIDEBAR COLLAPSED STATE === */
.dsu-sidebar--collapsed {
  width: var(--sidebar-width-icon);
  padding: 64px 12px 24px 12px;
  box-shadow: none;
  border-right: 1px solid var(--color-basics-gray);
}

.dsu-sidebar--collapsed .dsu-sidebar__logo-container {
  padding: 0;
  align-items: center;
}

.dsu-sidebar--collapsed .dsu-sidebar__logo {
  width: 24px;
  height: 24px;
}

/* === ANIMATABLE TEXT ELEMENTS === */
.dsu-nav-button__text,
.dsu-spaces-button__text,
.dsu-teams-button__text,
.dsu-projects-button__text,
.dsu-team-item__text,
.dsu-project-item__text,
.dsu-chat-item__text,
.dsu-space-item__text,
.dsu-teams-create__text,
.dsu-projects-create__text,
.dsu-spaces-create__text {
  opacity: 1;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Create buttons: text expands to fill clickable area */
.dsu-teams-create__text,
.dsu-projects-create__text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.dsu-sidebar--collapsed .dsu-nav-button__text,
.dsu-sidebar--collapsed .dsu-spaces-button__text,
.dsu-sidebar--collapsed .dsu-teams-button__text,
.dsu-sidebar--collapsed .dsu-projects-button__text,
.dsu-sidebar--collapsed .dsu-team-item__text,
.dsu-sidebar--collapsed .dsu-project-item__text,
.dsu-sidebar--collapsed .dsu-chat-item__text,
.dsu-sidebar--collapsed .dsu-space-item__text,
.dsu-sidebar--collapsed .dsu-teams-create__text,
.dsu-sidebar--collapsed .dsu-projects-create__text,
.dsu-sidebar--collapsed .dsu-spaces-create__text {
  opacity: 0;
  max-width: 0;
  margin: 0;
}

/* Hide other elements that shouldn't take up space */
.dsu-sidebar--collapsed .dsu-team-item__ellipsis,
.dsu-sidebar--collapsed .dsu-project-item__ellipsis,
.dsu-sidebar--collapsed .dsu-chat-item__ellipsis,
.dsu-sidebar--collapsed .dsu-space-item__actions,
.dsu-sidebar--collapsed .dsu-teams-dropdown,
.dsu-sidebar--collapsed .dsu-projects-dropdown,
.dsu-sidebar--collapsed .dsu-chats-dropdown,
.dsu-sidebar--collapsed .dsu-spaces-dropdown,
.dsu-sidebar--collapsed .dsu-teams-chevron,
.dsu-sidebar--collapsed .dsu-projects-chevron,
.dsu-sidebar--collapsed .dsu-chats-chevron,
.dsu-sidebar--collapsed .dsu-spaces-chevron {
  display: none;
}

/* === ANIMATABLE BUTTON CONTAINERS === */
.dsu-nav-button,
.dsu-spaces-button,
.dsu-teams-button,
.dsu-chats-button,
.dsu-projects-button__trigger,
.dsu-teams-create,
.dsu-projects-create,
.dsu-spaces-create {
  transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.dsu-sidebar--collapsed .dsu-nav-button,
.dsu-sidebar--collapsed .dsu-spaces-button,
.dsu-sidebar--collapsed .dsu-teams-button,
.dsu-sidebar--collapsed .dsu-chats-button,
.dsu-sidebar--collapsed .dsu-projects-button__trigger,
.dsu-sidebar--collapsed .dsu-teams-create,
.dsu-sidebar--collapsed .dsu-projects-create,
.dsu-sidebar--collapsed .dsu-spaces-create {
  gap: 0;
  justify-content: center;
}

.dsu-sidebar--collapsed .dsu-teams-level,
.dsu-sidebar--collapsed .dsu-projects-level,
.dsu-sidebar--collapsed .dsu-chats-level,
.dsu-sidebar--collapsed .dsu-spaces-level {
  justify-content: center;
}

.dsu-sidebar--collapsed .dsu-teams-chevron,
.dsu-sidebar--collapsed .dsu-projects-chevron,
.dsu-sidebar--collapsed .dsu-chats-chevron,
.dsu-sidebar--collapsed .dsu-spaces-chevron {
  display: none;
}

[data-theme="dark"] .dsu-sidebar {
  background-color: var(--color-basics-dark-blue);
  border-right-color: var(--color-basics-gray);
}

/* === SIDEBAR MAIN === */
.dsu-sidebar__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  flex: 1;
  min-height: 0;
}

/* === LOGO CONTAINER === */
.dsu-sidebar__logo-container {
  /* padding: 0 16px; */
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

/* === LOGO === */
.dsu-sidebar__logo {
  width: 97.333px;
  height: 26.773px;
  display: block;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.dsu-sidebar__logo:hover {
  opacity: 0.8;
}

.dsu-sidebar__logo img {
  /* width: 100%; */
  height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease;
}

/* Logo color adjustment for dark mode */
[data-theme="dark"] .dsu-sidebar__logo img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === SPACES SECTION (fixed, always visible - does not scroll) === */
.dsu-sidebar__spaces-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* === NAVIGATION WRAPPER (scrollable: Chats, Teams, Projects, etc.) === */
.dsu-sidebar__navigation-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  justify-content: space-between;
}

/* === NAVIGATION MAIN === */
.dsu-sidebar__navigation {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* === NAVIGATION BUTTON === */
.dsu-nav-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-08);
  padding: var(--spacing-08) var(--spacing-16);
  background-color: var(--color-surface-regular);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.dsu-nav-button:hover:not(:disabled),
.dsu-nav-button--hover {
  background-color: var(--color-surface-especial);
}

.dsu-nav-button--active,
.dsu-nav-button.active {
  text-decoration: underline;
}

.dsu-nav-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Disabled nav items (Coming soon) */
.dsu-nav-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto;
}

.dsu-nav-button--disabled:hover {
  background-color: var(--color-surface-regular);
}

.dsu-teams-chevron--disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

.dsu-teams-button.dsu-nav-button--disabled {
  cursor: not-allowed;
}

.dsu-teams-button.dsu-nav-button--disabled:hover {
  background-color: var(--color-surface-regular);
}

.dsu-backlog-level {
  display: flex;
  width: 100%;
}

/* Tooltip for disabled items */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  padding: 6px 12px;
  background: var(--color-text-primary, #0a243f);
  color: var(--color-basics-white, #ffffff);
  font-family: var(--font-family-secondary, 'Lato', sans-serif);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

[data-theme="dark"] [data-tooltip]::before {
  background: var(--color-surface-light);
  color: var(--color-text-primary);
}

/* === NAVIGATION BUTTON ICON === */
.dsu-nav-button__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsu-nav-button__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-nav-button__icon img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === NAVIGATION BUTTON TEXT === */
.dsu-nav-button__text {
  flex: 1;
  white-space: nowrap;
  font-weight: bold;
}

/* === SPACES SELECTOR (between logo and New chat) === */
.dsu-spaces-level {
  display: flex;
  gap: var(--spacing-16);
  align-items: center;
  width: 100%;
  /* margin-bottom: var(--spacing-08); */
  padding: 0 0 8px 0;
  margin-top: 24px;
}

.dsu-spaces-button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-08);
  /* padding: var(--spacing-08) var(--spacing-16); */
  background-color: var(--color-surface-regular);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.dsu-spaces-button:hover:not(:disabled) {
  background-color: var(--color-surface-especial);
}

.dsu-spaces-button__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dsu-spaces-button__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-theme="dark"] .dsu-spaces-button__icon img {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-spaces-button__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.dsu-spaces-button__edit-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  outline: none;
}

.dsu-spaces-chevron {
  cursor: pointer;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.dsu-spaces-chevron img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

[data-theme="dark"] .dsu-spaces-chevron img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* Spaces dropdown */
.dsu-spaces-dropdown {
  display: flex;
  flex-direction: column;
  padding-left: 29px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
  padding-top: 0;
  padding-bottom: 0;
}

.dsu-spaces-dropdown--expanded {
  max-height: 1000px;
  opacity: 1;
  /* padding-top: var(--spacing-08); */
  /* padding-bottom: var(--spacing-08); */
  transition: max-height 0.4s ease-in, opacity 0.3s ease-in 0.1s, padding 0.3s ease-in;
}

.dsu-spaces-create {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-08) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-bottom: var(--spacing-08);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  gap: 16px;
  margin-left: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.dsu-spaces-create:hover {
  color: var(--color-text-primary);
  opacity: 0.7;
}

.dsu-spaces-create__icon {
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: block;
  background-image: url(/images/plus.svg);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
}

[data-theme="dark"] .dsu-spaces-create__icon {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-spaces-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-08);
  width: 100%;
  max-width: 100%;
}

.dsu-space-item-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

.dsu-space-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-08) var(--spacing-16);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  margin: 0;
  border-radius: 20px;
}

.dsu-space-item-wrapper:hover .dsu-space-item:not(:disabled) {
  background-color: var(--color-surface-especial);
}

.dsu-space-item--active,
.dsu-space-item.active {
  text-decoration: underline;
  font-weight: var(--font-weight-semibold);
}

.dsu-space-item__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.dsu-space-item__edit-input {
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  margin: -2px -4px;
  border: 1px solid var(--color-basics-mid-blue);
  border-radius: 4px;
  background: var(--color-surface-regular);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-text-primary);
  outline: none;
}

.dsu-space-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dsu-space-item-wrapper:hover .dsu-space-item__actions {
  opacity: 1;
  visibility: visible;
}

.dsu-space-item__action {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

.dsu-space-item__action:hover {
  opacity: 0.7;
}

.dsu-space-item__action img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

[data-theme="dark"] .dsu-space-item__action img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === CHATS LEVEL (New chat + history, collapsible like Teams/Projects) === */
.dsu-chats-level {
  display: flex;
  gap: var(--spacing-16);
  align-items: center;
  width: 100%;
}

.dsu-chats-button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-08);
  padding: var(--spacing-08) var(--spacing-16);
  margin: 0;
  background-color: var(--color-surface-regular);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.dsu-chats-button:hover:not(:disabled) {
  background-color: var(--color-surface-especial);
}

.dsu-chats-button--active {
  text-decoration: underline;
}

.dsu-chats-button__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsu-chats-button__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-theme="dark"] .dsu-chats-button__icon img {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-chats-chevron {
  cursor: pointer;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.dsu-chats-chevron img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

[data-theme="dark"] .dsu-chats-chevron img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === CHATS DROPDOWN === */
.dsu-chats-dropdown {
  display: flex;
  flex-direction: column;
  padding-left: 29px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
  padding-top: 0;
  padding-bottom: 0;
}

.dsu-chats-dropdown--expanded {
  max-height: 1000px;
  opacity: 1;
  padding-bottom: 0;
  transition: max-height 0.4s ease-in, opacity 0.3s ease-in 0.1s, padding 0.3s ease-in;
}

.dsu-chats-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-08);
  width: 100%;
  max-width: 100%;
}

.dsu-chat-item-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

.dsu-chat-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-08) var(--spacing-16);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  margin: 0;
  border-radius: 20px;
}

.dsu-chat-item-wrapper:hover .dsu-chat-item:not(:disabled) {
  background-color: var(--color-surface-especial);
}

.dsu-chat-item--active,
.dsu-chat-item.active {
  text-decoration: underline;
  font-weight: var(--font-weight-semibold);
}

.dsu-chat-item__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.dsu-chat-item__ellipsis {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.dsu-chat-item-wrapper:hover .dsu-chat-item__ellipsis {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dsu-chat-item__ellipsis img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

[data-theme="dark"] .dsu-chat-item__ellipsis img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === TEAMS BUTTON WITH CHEVRON === */
.dsu-teams-level {
  display: flex;
  gap: var(--spacing-16);
  align-items: center;
  width: 100%;
}

.dsu-teams-button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-08);
  padding: var(--spacing-08) var(--spacing-16);
  background-color: var(--color-surface-regular);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.dsu-teams-button:hover:not(:disabled) {
  background-color: var(--color-surface-especial);
}

.dsu-teams-button--active,
.dsu-teams-button.active {
  text-decoration: underline;
}

/* El chevron se rota automáticamente cuando cambia la imagen a up-chevron.svg */
/* No necesitamos rotación adicional porque usamos imágenes diferentes */

.dsu-teams-button__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dsu-teams-button__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-teams-button__icon img {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-teams-chevron {
  cursor: pointer;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.dsu-teams-chevron img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-teams-chevron img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === TEAMS DROPDOWN === */
.dsu-teams-dropdown {
  display: flex;
  flex-direction: column;
  padding-left: 29px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
  padding-top: 0;
  padding-bottom: 0;
}

.dsu-teams-dropdown--expanded {
  max-height: 1000px;
  opacity: 1;
  /* padding-top: var(--spacing-08); */
  padding-bottom: 0;
  transition: max-height 0.4s ease-in, opacity 0.3s ease-in 0.1s, padding 0.3s ease-in;
}

.dsu-teams-create {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-08) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  /* margin-bottom: var(--spacing-08); */
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  gap: 16px;
  margin-left: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.dsu-teams-create:hover {
  color: var(--color-text-primary);
  opacity: 0.7;
}

.dsu-teams-create__icon {
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: block;
  background-image: url(/images/plus.svg);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-teams-create__icon {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-teams-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-08);
  /* Espaciado entre items de la lista */
  width: 100%;
  max-width: 100%;
}

.dsu-team-item-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

.dsu-team-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-08) var(--spacing-16);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  margin: 0;
  border-radius: 20px;
}

.dsu-team-item-wrapper:hover .dsu-team-item:not(:disabled) {
  background-color: var(--color-surface-especial);
}

.dsu-team-item--active,
.dsu-team-item.active {
  text-decoration: underline;
  font-weight: var(--font-weight-semibold);
}

.dsu-team-item__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.dsu-team-item__ellipsis {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.dsu-team-item-wrapper:hover .dsu-team-item__ellipsis {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dsu-team-item__ellipsis img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-team-item__ellipsis img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === PROJECTS BUTTON === */
.dsu-projects-button {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-08);
}

.dsu-projects-level {
  display: flex;
  gap: var(--spacing-08);
  align-items: center;
  width: 100%;
}

.dsu-projects-button__trigger {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-08);
  padding: var(--spacing-08) var(--spacing-16);
  background-color: var(--color-surface-regular);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.dsu-projects-button__trigger:hover:not(:disabled),
.dsu-projects-button__trigger--hover {
  background-color: var(--color-surface-especial);
}

.dsu-projects-button__trigger--active {
  text-decoration: underline;
}

.dsu-projects-button__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-08);
  flex: 1;
}

.dsu-projects-button__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsu-projects-button__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-projects-button__icon img {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-projects-button__text {
  flex: 1;
  white-space: nowrap;
}


.dsu-projects-chevron {
  cursor: pointer;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.dsu-projects-chevron img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-projects-chevron img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* El chevron se rota automáticamente cuando cambia la imagen a up-chevron.svg */
/* No necesitamos rotación adicional porque usamos imágenes diferentes */

/* === PROJECTS DROPDOWN === */
.dsu-projects-dropdown {
  display: flex;
  flex-direction: column;
  padding-left: 29px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
  padding-top: 0;
  padding-bottom: 0;
}

.dsu-projects-dropdown--expanded {
  max-height: 1000px;
  opacity: 1;
  /* padding-top: var(--spacing-08); */
  padding-bottom: 0;
  transition: max-height 0.4s ease-in, opacity 0.3s ease-in 0.1s, padding 0.3s ease-in;
}

.dsu-projects-create {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-08) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  /* margin-bottom: var(--spacing-08); */
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  gap: 16px;
  margin-left: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.dsu-projects-create:hover {
  color: var(--color-text-primary);
  opacity: 0.7;
}

/* Create Project Button - Always Visible (outside dropdown) */
.dsu-projects-create-wrapper {
  padding-left: 29px;
  margin-bottom: 0;
}

.dsu-projects-create-wrapper .dsu-projects-create {
  margin-bottom: 0;
}

.dsu-projects-create__icon {
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: block;
  background-image: url(/images/plus.svg);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-projects-create__icon {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-projects-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dsu-project-item-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

.dsu-project-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-08) var(--spacing-16);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  margin: 0;
  border-radius: 30px;
}

.dsu-project-item-wrapper:hover .dsu-project-item:not(:disabled) {
  background-color: var(--color-surface-especial);
}

.dsu-project-item--active,
.dsu-project-item.active {
  text-decoration: underline;
  font-weight: var(--font-weight-semibold);
}

.dsu-project-item__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.dsu-project-item__ellipsis {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.dsu-project-item-wrapper:hover .dsu-project-item__ellipsis {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dsu-project-item__ellipsis img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-project-item__ellipsis img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* === CONTEXT MENU === */
.context-menu {
  position: fixed;
  background: var(--color-surface-regular);
  border: 1px solid var(--color-basics-gray);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  min-width: 200px;
  z-index: 10002;
  display: none;
  flex-direction: column;
  animation: contextMenuFadeIn 0.15s ease;
  overflow: hidden;
}

.context-menu--visible {
  display: flex !important;
}

@keyframes contextMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.context-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  text-align: left;
  width: 100%;
  transition: background-color 0.2s ease;
}

.context-menu__item:hover {
  background-color: var(--color-surface-especial);
}

.context-menu__item--danger {
  color: #e74c3c;
}

.context-menu__item--danger:hover {
  background-color: rgba(231, 76, 60, 0.1);
}

.context-menu__item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.context-menu__item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .context-menu__item-icon img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* Danger icon should be red */
.context-menu__item--danger .context-menu__item-icon img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

/* Danger icon should not be inverted in dark mode, keep red */
[data-theme="dark"] .context-menu__item--danger .context-menu__item-icon img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.context-menu__item-text {
  flex: 1;
  white-space: nowrap;
}

.context-menu__separator {
  height: 1px;
  background-color: var(--color-basics-gray);
  margin: 4px 0;
  border: none;
}

/* Dark mode adjustments */
[data-theme="dark"] .context-menu {
  background: var(--color-surface-regular);
  border-color: var(--color-basics-gray);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .context-menu__separator {
  background-color: var(--color-basics-gray);
}

/* === SIDEBAR TOGGLE BUTTON === */
.dsu-sidebar__toggle {
  position: absolute;
  top: 24px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.dsu-sidebar__toggle:hover {
  background-color: var(--color-surface-especial);
}

.dsu-sidebar__toggle img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Icon color adjustment for dark mode */
[data-theme="dark"] .dsu-sidebar__toggle img {
  filter: brightness(0) saturate(100%) invert(1);
}

.dsu-sidebar--collapsed .dsu-sidebar__toggle {
  right: 24px;
}

/* === SIDEBAR FOOTER === */
.dsu-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin-top: auto;
  flex-shrink: 0;
  padding-top: var(--spacing-16);
}

/* === MOBILE MENU BUTTON === */
/* Hidden on desktop, shown ONLY in @media (max-width: 768px) */
.dsu-mobile-menu-btn {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 6000;
  width: 44px;
  height: 44px;
  padding: 10px;
  background-color: var(--color-surface-regular);
  border: 1px solid var(--color-basics-gray);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.dsu-mobile-menu-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Dark mode for mobile menu button */
[data-theme="dark"] .dsu-mobile-menu-btn {
  background-color: var(--color-surface-regular);
  border-color: var(--color-basics-gray);
}

[data-theme="dark"] .dsu-mobile-menu-btn img {
  filter: brightness(0) saturate(100%) invert(1);
}

/* Hide mobile menu button when sidebar is open, chat drawer fullscreen is open, or on /chat page */
.dsu-mobile-menu-btn.hidden,
.dsu-mobile-menu-btn.hidden-by-chat-drawer,
.dsu-mobile-menu-btn.dsu-mobile-menu-btn--hidden-on-chat {
  opacity: 0;
  pointer-events: none;
}

/* === MOBILE OVERLAY === */
.dsu-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dsu-mobile-overlay--visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {

  /* Show mobile menu button */
  .dsu-mobile-menu-btn {
    display: flex !important;
    visibility: visible;
    pointer-events: auto;
  }

  /* Hide sidebar by default on mobile - 100svh + padding for browser bottom bar */
  .dsu-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    height: 100svh;
    max-height: 100svh;
    z-index: 7000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    padding: 24px;
    /* Variable centralizada para barra inferior del navegador (--mobile-browser-chrome-bottom en app.css) */
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-chrome-bottom, 40px));
    box-sizing: border-box;
  }

  /* Show sidebar when mobile menu is open - always full width, never collapsed */
  .dsu-sidebar--mobile-open {
    transform: translateX(0);
    width: 280px;
  }

  /* Overlay above all page content (chat drawer, modals, etc.) but below sidebar (7000) */
  .dsu-mobile-overlay--visible {
    z-index: 6999;
  }

  /* Hide the desktop collapse toggle on mobile */
  .dsu-sidebar__toggle {
    display: none;
  }

  /* Add close button for mobile sidebar */
  .dsu-sidebar--mobile-open .dsu-sidebar__toggle {
    display: flex;
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .dsu-projects-dropdown {
    padding-left: var(--spacing-16);
  }

  .dsu-teams-dropdown,
  .dsu-spaces-dropdown {
    padding-left: var(--spacing-16);
  }
}

/* === MOBILE HEADER (sticky, hide on scroll down, show on scroll up) === */
.mobile-header {
  display: none;
}

@media (max-width: 768px) {
  .mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    min-height: 60px;
    padding: 0 16px;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6500;
    transition: transform 0.3s ease;
  }

  .mobile-header--hidden {
    transform: translateY(-100%);
  }

  /* Hamburger: square with rounded corners, border */
  .mobile-header__btn--menu {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--color-basics-gray, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-header__btn--menu img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .mobile-header__btn--menu.hidden,
  .mobile-header__btn--menu.hidden-by-chat-drawer {
    opacity: 0;
    pointer-events: none;
  }

  /* Chats pill: icon + text, rounded pill */
  .mobile-header__btn--chats {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--color-basics-gray, #e0e0e0);
    border-radius: 9999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-basics-dark-blue, #212b36);
  }

  .mobile-header__chats-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-header__chats-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  /* Drawer (sparkle): same as hamburger */
  .mobile-header__btn--drawer {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--color-basics-gray, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-header__btn--drawer img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  /* Left: menu sidebar */
  .mobile-header__left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  /* Right: notifications, profile, chat button (justified to the right) */
  .mobile-header__right {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
  }

  /* Profile in header: inline layout */
  .mobile-header__right .profile-actions-wrapper {
    position: static;
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
    gap: 24px;
  }

  /* Content area: padding for fixed header overlay */
  #mainScrollArea {
    padding-top: 60px;
  }

  /* App layout: 100svh adapts to browser chrome on mobile Safari/Chrome */
  #appLayoutRoot {
    height: 100svh;
    min-height: 100svh;
  }

  /* Single scroll: only mainScrollArea scrolls on mobile - disable nested scroll */
  .project-content-wrapper,
  .team-content-wrapper,
  .tasks-content-wrapper {
    overflow-y: visible !important;
    overflow-x: hidden;
  }

  /* Allow form content to extend so main scrolls */
  .form-with-chat-drawer,
  .form-with-chat-drawer__main {
    min-height: 100%;
    height: auto;
    overflow: visible;
  }
}

[data-theme="dark"] .mobile-header {
  background-color: var(--color-basics-dark-blue);
}

[data-theme="dark"] .mobile-header__btn--menu,
[data-theme="dark"] .mobile-header__btn--chats,
[data-theme="dark"] .mobile-header__btn--drawer {
  background-color: var(--color-surface-regular);
  border-color: var(--color-basics-gray);
}

[data-theme="dark"] .mobile-header__btn--menu img,
[data-theme="dark"] .mobile-header__btn--chats .mobile-header__chats-icon img,
[data-theme="dark"] .mobile-header__btn--drawer img {
  filter: brightness(0) saturate(100%) invert(1);
}

[data-theme="dark"] .mobile-header__btn--chats {
  color: var(--color-basics-white);
}

/* ========== NEXT FILE ========== */

/* ==========================================
   LOGO COMPONENT - Design System Docu
   Basado en Figma Components
   ========================================== */

.dsu-logo {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--spacing-08);
  flex-shrink: 0;
}

.dsu-logo__image {
  display: block;
  object-fit: contain;
}

/* === VARIANTS === */
.dsu-logo--default {
  width: 131px;
  height: 43px;
}

.dsu-logo--default .dsu-logo__image {
  width: 131px;
  height: 43px;
}

.dsu-logo--icon {
  width: 40px;
  height: 43px;
}

.dsu-logo--icon .dsu-logo__image {
  width: 40px;
  height: 43px;
}

.dsu-logo--small {
  width: 97px;
  height: 32px;
}

.dsu-logo--small .dsu-logo__image {
  width: 97px;
  height: 32px;
}



/* ========== NEXT FILE ========== */

/* ==========================================
   TASK STAGES COMPONENT - Design System Docu
   Basado en Figma Components
   Task Stages: Pending approval, Approved, Rejected
   ========================================== */

/* === TASK STAGES === */
.dsu-task-stages {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-08) var(--spacing-16);
  border-radius: var(--radius-xl);
  width: 138px;
  box-sizing: border-box;
}

/* === TASK STAGES TEXT === */
.dsu-task-stages__text {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  color: var(--color-basics-dark-blue);
}

/* === PENDING APPROVAL === */
.dsu-task-stages--pending-approval {
  background-color: var(--color-status-to-start);
}

/* === APPROVED === */
.dsu-task-stages--approved {
  background-color: var(--color-status-done);
  width: 135px;
}

/* === REJECTED === */
.dsu-task-stages--rejected {
  background-color: var(--color-status-light-red);
}



/* ========== NEXT FILE ========== */

/* ==========================================
   PROJECT DETAIL PAGE
   Based on project_empty.html
   ========================================== */

/* Layout Principal */
.project-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Contenido Principal */
.project-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    position: relative;
    /* Ocultar scrollbar pero mantener funcionalidad */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.project-content-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.project-content {
    flex: 1 0 auto;
    padding: 64px 173px 120px 135px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

/* Close Button */
.edit-close-button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-12);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.edit-close-button {
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
}

.edit-close-button:hover {
    opacity: 0.7;
}

.edit-close-button__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Dark mode icon adjustment */
[data-theme="dark"] .edit-close-button__icon {
    filter: brightness(0) saturate(100%) invert(1);
}

/* Name Section */
.project-name-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    position: relative;
}

/* Agregar padding-top cuando el botón cerrar está presente */
.project-name-section:has(.edit-close-button-container) {
    padding-top: 48px;
}

/* Budget Section */
.project-budget-section {
    display: flex;
    gap: var(--spacing-16);
    width: 100%;
    align-items: flex-end;
}

.project-budget-input {
    flex: 1;
}

.project-currency-input {
    flex: 1;
}

/* Currency Dropdown */
.currency-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: calc(100% + var(--spacing-08));
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--color-surface-regular);
    border: 1px solid var(--color-basics-gray);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-3);
    overflow: hidden;
    z-index: 100;
    margin-top: var(--spacing-04);
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
}

.currency-dropdown--expanded {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    max-height: 200px;
}

.currency-dropdown__item {
    display: flex;
    align-items: center;
    padding: var(--spacing-12) var(--spacing-16);
    border: none;
    background-color: var(--color-surface-regular);
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    text-align: left;
    width: 100%;
    border-bottom: 1px solid var(--color-basics-gray);
}

.currency-dropdown__item:last-child {
    border-bottom: none;
}

.currency-dropdown__item:hover {
    background-color: var(--color-surface-especial);
}

.currency-dropdown__item--active {
    background-color: var(--color-surface-especial);
}

/* Date & Status Section */
.project-date-status-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--spacing-48);
}

.project-date-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-24);
}

.project-date-reset-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.project-date-reset-btn:hover {
    opacity: 1;
}

.project-date-reset-btn img {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    display: block;
    object-fit: contain;
}

/* Dark mode icon adjustment for date reset */
[data-theme="dark"] .project-date-reset-btn img {
    filter: brightness(0) saturate(100%) invert(1);
}

/* Date button wrapper - project date context */
.project-date-wrapper .dsu-date-button-wrapper {
    position: relative;
    display: inline-flex;
}

/* Date button icon - 20x20px (calendar icon visible in both empty and selected states)
   Override input.css: remove padding that collapses content, ensure icon displays */
.project-date-wrapper .dsu-agreements__date-button-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
}

.project-date-wrapper .dsu-agreements__date-button-icon img {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    display: block;
    object-fit: contain;
}

.project-status-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
}

/* Project actions - ellipsis button and dropdown */
.project-actions-wrapper {
    position: relative;
}

.project-actions-ellipsis-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-basics-dark-blue);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--button-secondary-elevation-default);
    color: var(--color-text-primary);
}

.project-actions-ellipsis-btn:hover:not(:disabled) {
    background-color: var(--color-surface-regular);
    border-color: var(--color-button-secondary-bg-hover);
    box-shadow: var(--button-secondary-elevation-hover);
}

.project-actions-ellipsis-btn:active:not(:disabled),
.project-actions-ellipsis-btn.is-pressed {
    background-color: var(--color-surface-regular);
    border-color: var(--color-button-secondary-bg-hover);
    box-shadow: var(--button-secondary-elevation-pressed);
}

[data-theme="dark"] .project-actions-ellipsis-btn {
    border-color: var(--color-basics-white);
}

[data-theme="dark"] .project-actions-ellipsis-btn:hover:not(:disabled) {
    border-color: var(--color-basics-white);
}

[data-theme="dark"] .project-actions-ellipsis-btn:active:not(:disabled),
[data-theme="dark"] .project-actions-ellipsis-btn.is-pressed {
    border-color: var(--color-basics-white);
}

/* Dark mode - project detail section icons */
[data-theme="dark"] .project-section-title__icon img,
[data-theme="dark"] .project-section-title__chevron img,
[data-theme="dark"] .project-communication-channels-item-icon img,
[data-theme="dark"] .project-communication-channels-item-action img {
    filter: brightness(0) saturate(100%) invert(1);
}

[data-theme="dark"] .project-stage-button--add img {
    filter: brightness(0) saturate(100%) invert(1);
}

[data-theme="dark"] .project-actions-ellipsis-btn svg {
    fill: var(--color-basics-white);
}

.project-actions-ellipsis-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--color-text-primary);
}

.project-actions-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: calc(100% + var(--spacing-08));
    right: 0;
    width: 200px;
    background-color: var(--color-surface-regular);
    border: 1px solid var(--color-basics-gray);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-3);
    overflow: hidden;
    z-index: 1000;
    margin-top: var(--spacing-04);
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
}

.project-actions-dropdown--expanded {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    overflow: hidden !important;
    max-height: 200px !important;
}

.project-actions-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-08);
    padding: var(--spacing-12) var(--spacing-16);
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
    background-color: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 14px;
    color: var(--color-text-primary);
}

.project-actions-dropdown__item:hover:not(:disabled) {
    background-color: var(--color-surface-especial);
}

.project-actions-dropdown__item:active:not(:disabled) {
    background-color: var(--color-surface-especial);
}

.project-actions-dropdown__item:focus-visible {
    outline: 2px solid var(--color-basics-dark-blue);
    outline-offset: -2px;
    background-color: var(--color-surface-especial);
}

.project-actions-dropdown__item .dsu-button__icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-actions-dropdown__item .dsu-button__icon img {
    width: 16px;
    height: 16px;
}

[data-theme="dark"] .project-actions-dropdown {
    border-color: var(--color-border-default);
}

/* ==========================================
   PROJECT STAGES SECTION
   ========================================== */
.project-stages-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    width: 100%;
    margin-top: var(--spacing-48);
}

.draggable-section {
    position: relative;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: grab;
}

.draggable-section:hover {
    opacity: 0.95;
}

.draggable-section:active,
.draggable-section.dragging {
    cursor: grabbing;
}

.draggable-section.dragging {
    opacity: 0.5;
    border: 2px dashed var(--color-basics-mid-blue, #5a7184);
    border-radius: var(--radius-md);
    background-color: rgba(90, 113, 132, 0.05);
}

.draggable-section.drag-over {
    border-top: 3px solid var(--color-basics-mid-blue, #5a7184);
    margin-top: 8px;
    padding-top: 8px;
}

.section-drag-handle {
    position: absolute;
    left: -40px;
    top: 24px;
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 4px;
    border-radius: 4px;
    pointer-events: none;
}

.draggable-section:hover .section-drag-handle {
    opacity: 0.6;
}

.draggable-section.dragging .section-drag-handle {
    opacity: 1;
}

.section-drag-handle svg {
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary, #6b7b8a);
}

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

.project-stages-title {
    font-family: var(--font-family-secondary);
    font-size: 24px;
    font-weight: var(--font-weight-black);
    color: var(--color-text-primary);
    margin: 0;
}

.project-stages-description {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin: 0;
    margin-bottom: 16px;
}

.project-stages-list {
    display: flex;
    gap: var(--spacing-08);
    width: 100%;
    align-items: stretch;
}

.project-stage-item {
    flex: 1;
    display: flex;
}

.project-stage-button {
    width: 100%;
    padding: var(--spacing-16);
    background-color: var(--color-status-disabled);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-basics-dark-blue);
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    height: 100%;
}

.project-stage-button:hover {
    background-color: var(--color-basics-gray);
}

.project-stage-button--add {
    background-color: var(--color-status-disabled);
    height: 52px;
    min-height: 52px;
}

.project-stage-button--add img {
    width: 20px;
    height: 20px;
}

/* Stage Modal */
#stageModalOverlay .modal,
.modal.stage-modal {
    max-width: 520px;
    width: 100%;
    padding: var(--spacing-24);
    background: var(--color-surface-regular);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-basics-mid-blue);
    box-shadow: var(--elevation-4);
}

#stageModalOverlay .modal__body,
.modal.stage-modal .modal__body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stage-date-range-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-16);
}

.stage-date-range-wrapper .dsu-input-group {
    flex: 1;
}

.modal-input-group {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04, 4px);
    width: 100%;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-12);
}

.modal-error-message {
    background-color: #fee;
    border: 1px solid #fcc;
    border-radius: var(--radius-sm);
    padding: var(--spacing-12);
    margin-top: var(--spacing-16);
    color: #c33;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-secondary);
}

#stageModalOverlay .dsu-status-button-wrapper {
    position: relative;
    width: 100%;
}

#stageModalOverlay .dsu-status-dropdown {
    position: absolute;
    z-index: 10003 !important;
    width: 100%;
    top: calc(100% + var(--spacing-08));
    left: 0;
}

#stageModalOverlay .dsu-status-dropdown--expanded {
    max-height: 300px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Stage Card */
.project-stage-card {
    width: 100%;
    background-color: var(--color-surface-regular);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    height: 100%;
}

.stage-status-badge {
    background-color: var(--color-surface-especial, #f4f7fb);
    border-radius: var(--radius-md);
    padding: var(--spacing-16);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stage-status-badge__title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-08);
}

.stage-status-badge__text {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    text-align: left;
    flex: 1;
    margin: 0;
}

.stage-description-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
    opacity: 0.6;
}

.stage-description-toggle:hover {
    opacity: 1;
}

.stage-description-toggle__icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.stage-description {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    margin-top: var(--spacing-08);
    text-align: left;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
    overflow: hidden;
}

.stage-description--expanded {
    max-height: 1000px;
    opacity: 1;
}

.stage-description--collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.stage-card-date-range-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-16);
}

.stage-delete-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.6;
    flex-shrink: 0;
}

.stage-delete-btn:hover {
    background-color: var(--color-status-disabled);
    opacity: 1;
}

.stage-delete-btn img {
    width: 16px;
    height: 16px;
}

.stage-date-range {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
    flex: 1;
}

.stage-progress-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-08);
    width: 100%;
}

.stage-progress-percentage {
    font-family: var(--font-family-secondary);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    white-space: nowrap;
    min-width: 30px;
}

.stage-progress-bar__container {
    background-color: var(--color-status-disabled);
    border-radius: 50px;
    height: 5px;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.stage-progress-bar__fill {
    background-color: var(--color-status-done);
    height: 5px;
    border-radius: 50px;
    transition: width 0.3s ease;
}

/* ==========================================
   PROJECT CEREMONIES SECTION
   ========================================== */
.project-ceremonies-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    margin-top: var(--spacing-48);
}

.project-ceremonies-section.draggable-section {
    z-index: 5000;
}

.project-ceremonies-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    width: 100%;
}

.project-section-title {
    font-family: var(--font-family-secondary);
    font-size: 24px;
    font-weight: var(--font-weight-black);
    color: var(--color-text-primary);
    margin: 0;
}

.project-section-title[data-section] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

.project-section-title__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: var(--spacing-12);
}

.project-section-title__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.project-section-title__text {
    flex: 1;
}

.project-section-title__chevron {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: var(--spacing-12);
    transition: transform 0.2s ease;
}

.project-section-title__chevron img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.project-section-title--collapsed .project-section-title__chevron {
    transform: rotate(0deg);
}

.project-section-title--expanded .project-section-title__chevron {
    transform: rotate(180deg);
}

.project-section-content {
    overflow: visible;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    margin: 0;
    padding: 0;
}

.project-section-content--collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.project-section-content--expanded {
    max-height: 10000px;
    opacity: 1;
    overflow: visible;
}

.project-communication-channels-description {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-normal);
}

.ceremonies-dropdown-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
}

.project-section-content .ceremonies-dropdown-wrapper {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.project-section-content--collapsed .ceremonies-dropdown,
.project-section-content--collapsed .project-communication-channels-content,
.project-section-content--collapsed .project-objective-content,
.project-section-content--collapsed .project-tasks-content,
.project-section-content--collapsed .project-deliverables-content,
.project-section-content--collapsed .project-assets-content,
.project-section-content--collapsed .project-test-content,
.project-section-content--collapsed .project-solve-content {
    display: none !important;
}

.ceremonies-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-12) var(--spacing-16);
    background-color: var(--color-surface-regular);
    border: 1px solid var(--color-basics-gray);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ceremoniesDropdownText {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
}

.ceremonies-dropdown-trigger:hover {
    border-color: var(--color-basics-mid-blue);
}

.ceremonies-dropdown-trigger--open {
    border-color: var(--color-basics-mid-blue);
    box-shadow: 0 0 0 2px rgba(10, 36, 63, 0.1);
}

.ceremonies-dropdown-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.ceremonies-dropdown-trigger--open .ceremonies-dropdown-chevron {
    transform: rotate(180deg);
}

.ceremonies-dropdown-chevron img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

[data-theme="dark"] .ceremonies-dropdown-chevron img {
    filter: brightness(0) saturate(100%) invert(1);
}

.ceremonies-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + var(--spacing-08));
    left: 0;
    right: 0;
    background-color: var(--color-surface-regular);
    border: 1px solid var(--color-basics-gray);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-3);
    z-index: 7000;
    max-height: 500px;
    overflow-y: auto;
    padding: 24px;
}

.ceremonies-dropdown--open {
    display: block;
}

.ceremony-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-12);
    padding: var(--spacing-12);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ceremony-option:hover {
    background-color: var(--color-status-disabled);
}

.ceremony-option-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-basics-dark-blue);
}

.ceremony-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
}

.ceremony-option-name {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-base);
    font-weight: bold;
    color: var(--color-text-primary);
    margin: 0;
}

.ceremony-option-description {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin: 0;
}

.selected-ceremonies-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    margin-top: var(--spacing-16);
}

.selected-ceremony-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-12) var(--spacing-16);
    background-color: var(--color-surface-regular);
    border: 1px solid var(--color-basics-gray);
    border-radius: var(--radius-md);
}

.selected-ceremony-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
}

.selected-ceremony-name {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-base);
    font-weight: bold;
    color: var(--color-text-primary);
    margin: 0;
}

.selected-ceremony-description {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin: 0;
}

.selected-ceremony-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.selected-ceremony-schedule-btn,
.selected-ceremony-remove-btn {
    flex-shrink: 0;
}

.ceremony-custom-form {
    display: none;
    flex-direction: column;
    gap: var(--spacing-16);
    padding: var(--spacing-16);
    background-color: var(--color-surface-regular);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-12);
}

.ceremony-custom-form--visible {
    display: flex;
}

.ceremony-add-another-btn {
    width: 100%;
    margin-top: var(--spacing-08);
    justify-content: center;
}

.ceremony-custom-form-actions {
    display: flex;
    gap: 16px;
    margin-top: var(--spacing-08);
}

.ceremony-custom-form-actions .dsu-button {
    flex: 1;
}

/* ==========================================
   PROJECT COMMUNICATION CHANNELS SECTION
   ========================================== */
.project-communication-channels-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    margin-top: var(--spacing-48);
}

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

.project-communication-channels-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.project-communication-channels-title {
    font-family: var(--font-family-secondary);
    font-size: 24px;
    font-weight: var(--font-weight-black);
    color: var(--color-text-primary);
    margin: 0;
}

.project-communication-channels-description {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin: 0;
}

.project-communication-channels-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

.project-communication-channels-items-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    width: 100%;
}

.project-communication-channels-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.project-communication-channels-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-16);
    background-color: var(--color-surface-regular);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-basics-gray);
}

.project-communication-channels-item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-status-disabled);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.project-communication-channels-item-icon img {
    width: 24px;
    height: 24px;
}

.project-communication-channels-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
}

.project-communication-channels-item-text {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin: 0;
    word-break: break-word;
}

.project-communication-channels-item-link {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
    word-break: break-all;
    text-decoration: none;
}

.project-communication-channels-item-link:hover {
    text-decoration: underline;
}

.project-communication-channels-item-actions {
    display: flex;
    gap: var(--spacing-08);
}

.project-communication-channels-item-action {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-communication-channels-item-action img {
    width: 16px;
    height: 16px;
}

/* ==========================================
   PROJECT OBJECTIVE SECTION
   ========================================== */
.project-objective-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    margin-top: var(--spacing-48);
}

.project-objective-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

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

.project-objective-subtitle {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin: 0;
}

.project-objective-tabs {
    display: flex;
    gap: var(--spacing-08);
    align-items: center;
}

.project-objective-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    margin-top: 24px;
}

.project-objective-items-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    width: 100%;
    min-height: 0;
}

.project-objective-items-container[style*="display: none"] {
    display: none !important;
}

.project-objective-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-08);
    padding: var(--spacing-12) var(--spacing-16);
    background-color: var(--color-surface-regular);
    border: 1px solid var(--color-status-disabled);
    border-radius: var(--radius-md);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.project-objective-item-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--color-basics-dark-blue, #0a243f);
}

.project-objective-item-checkbox:checked {
    accent-color: var(--color-status-done);
}

.project-objective-item-text {
    flex: 1;
    margin: 0;
    transition: text-decoration 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.project-objective-item--completed .project-objective-item-text {
    text-decoration: line-through;
    opacity: 0.6;
    color: var(--color-text-secondary, #6b7b8a);
}

.project-objective-item--completed {
    background-color: var(--color-status-done-light-bg);
    border-color: var(--color-status-done);
}

.project-objective-item-actions {
    display: flex;
    gap: var(--spacing-08);
}

.project-objective-item-action {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-objective-item-action img {
    width: 16px;
    height: 16px;
}

/* ==========================================
   PROJECT AGREEMENTS SECTION
   ========================================== */
.project-agreements-section {
    margin-top: 48px;
}

.project-agreements-section .dsu-agreements__wrapper {
    align-items: flex-start;
}

#projectAgreementsEmpty .dsu-agreements__wrapper.project-agreements-empty-wrapper {
    position: relative;
    overflow: visible;
}

#projectAgreementsEmpty .dsu-agreements__content {
    overflow-x: hidden;
    width: 100%;
}

#projectAgreementsEmpty .dsu-agreements__agreement,
#projectAgreementsEmpty .dsu-agreements__agreement-header {
    width: 100%;
    max-width: 100%;
}

/* Headline order and spacing - match project_empty.html */
.project-agreements-section .dsu-agreements__headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-16);
    margin-bottom: 32px;
}

.project-agreements-section .dsu-agreements__headline-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-08);
    flex: 1;
    min-width: 0;
}

.project-agreements-section .dsu-agreements__close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-04);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.project-agreements-section .dsu-agreements__close-btn:hover {
    background-color: var(--color-status-disabled);
}

.project-agreements-section .dsu-agreements__close-btn img {
    width: 20px;
    height: 20px;
}

.project-agreements-section .agreement-name-input-wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
    margin-bottom: 16px;
}

.project-agreements-section .agreement-name-edit-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.project-agreements-section .agreement-name-edit-btn img {
    width: 20px;
    height: 20px;
}

.project-agreements-section .dsu-agreements__agreement-form-buttons {
    display: flex;
    gap: var(--spacing-16);
    align-items: center;
    width: 100%;
}

.project-agreements-section .dsu-agreements__agreement-form-buttons .dsu-button--secondary {
    flex: 1;
    order: 1;
}

.project-agreements-section .dsu-agreements__agreement-form-buttons .dsu-agreements__send-button {
    flex: 1;
    order: 2;
    height: 37px;
}

/* Floating "New Agreement" Button */
#projectAgreementsEmpty #projectCreateAgreementBtn {
    position: absolute;
    bottom: 24px;
    right: 16px;
    z-index: 2000;
    background-color: var(--color-basics-dark-blue) !important;
    color: var(--color-basics-white) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: fit-content;
}

#projectCreateAgreementBtn:hover {
    background-color: var(--color-button-secondary-bg-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

#projectCreateAgreementBtn .dsu-button__icon img {
    filter: brightness(0) invert(1);
}

/* Status dropdown positioning for agreements */
.project-agreements-section .dsu-agreements__agreement-status .dsu-status-dropdown {
    left: -70px;
}

/* Date button icon - override input.css padding that collapses/hides the icon */
.project-agreements-section .dsu-agreements__date-button-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
}

.project-agreements-section .dsu-agreements__date-button-icon img {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    display: block;
    object-fit: contain;
}

/* Send Agreement Modal */
#sendAgreementModalOverlay .modal {
    max-width: 480px;
    width: 100%;
}

#sendAgreementModalOverlay .modal-description {
    margin: 0 0 var(--spacing-16);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

#sendAgreementModalOverlay .modal-actions {
    display: flex;
    gap: var(--spacing-12);
    justify-content: flex-end;
    margin-top: var(--spacing-24);
}

.project-status-label {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    width: 100%;
}

/* ==========================================
   TASK PLANNER SECTION
   ========================================== */
.project-tasks-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    margin-top: var(--spacing-48);
}

.project-tasks-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

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

.project-tasks-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

.project-tasks-items-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    width: 100%;
    min-height: 0;
}

.project-tasks-items-container[style*="display: none"] {
    display: none !important;
}

.project-tasks-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-08);
    padding: var(--spacing-12) var(--spacing-16);
    background-color: var(--color-surface-regular);
    border: 1px solid var(--color-status-disabled);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.project-tasks-item-text {
    flex: 1;
    margin: 0;
    min-width: 0;
    transition: text-decoration 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.project-tasks-item-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--color-basics-dark-blue, #0a243f);
}

.project-tasks-item-checkbox:checked {
    accent-color: var(--color-status-done);
}

.project-tasks-item--completed .project-tasks-item-text {
    text-decoration: line-through;
    opacity: 0.6;
    color: var(--color-text-secondary, #6b7b8a);
}

.project-tasks-item--completed {
    background-color: var(--color-status-done-light-bg);
    border-color: var(--color-status-done);
}

.project-tasks-item-actions {
    display: flex;
    gap: var(--spacing-08);
}

.project-tasks-item-action {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-tasks-item-action img {
    width: 16px;
    height: 16px;
}

.project-tasks-item-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    flex-shrink: 0;
}

.project-tasks-item-date-container {
    display: flex;
    align-items: center;
}

.project-tasks-item-avatar-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-status-disabled);
    background-color: var(--color-surface-regular);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.project-tasks-item-avatar-btn:hover {
    border-color: var(--color-basics-dark-blue);
    background-color: var(--color-surface-especial);
}

.project-tasks-item-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.project-tasks-item-avatar-placeholder img {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.project-tasks-item-member-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-08);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.project-tasks-item-member-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.project-tasks-item-date {
    color: var(--color-text-secondary);
}

/* Task planner input - prominent border, rounded, spaced from items */
.project-tasks-content .dsu-input-group {
    margin-top: 0;
}

.project-tasks-content .dsu-input-container .dsu-input {
    border: 1px solid var(--color-basics-mid-blue, #5a7184);
    border-radius: 8px;
    padding: var(--spacing-12) var(--spacing-16);
}

.project-tasks-item-avatars-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.project-tasks-item-assigned-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background-color: var(--color-status-disabled);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    position: relative;
}

.project-tasks-item-assigned-avatar .avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.project-tasks-item-assigned-avatar:not(:first-child) {
    margin-left: -12px;
}

/* ==========================================
   DELIVERABLES SECTION
   ========================================== */
.project-deliverables-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    margin-top: var(--spacing-48);
}

.project-deliverables-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

.project-deliverables-headline {
    display: flex;
    align-items: center;
    width: 100%;
}

.project-deliverables-title {
    font-family: var(--font-family-secondary);
    font-size: 24px;
    font-weight: var(--font-weight-black);
    color: var(--color-text-primary);
    margin: 0;
}

.project-deliverables-description {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin: 0;
}

.project-deliverables-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

.project-deliverables-items-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    width: 100%;
}

.project-deliverables-input-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
}

.project-deliverables-input-row .dsu-input-group {
    flex: 1;
}

.project-deliverables-input-wrapper {
    position: relative;
    display: flex;
}

.project-deliverables-input-wrapper .dsu-input {
    padding-right: 80px;
}

.project-deliverables-input-actions {
    display: flex;
    gap: var(--spacing-08);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.project-deliverables-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-deliverables-action-btn img {
    width: 20px;
    height: 20px;
}

.project-deliverables-item-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    width: 100%;
}

.project-deliverables-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-16);
    background-color: var(--color-surface-regular);
    border: 1px solid var(--color-status-disabled);
    border-radius: var(--radius-md);
    flex: 1;
    min-width: 0;
}

.project-deliverables-item-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    flex: 1;
    min-width: 0;
}

.project-deliverables-item-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface-especial);
    border-radius: var(--radius-md);
}

.project-deliverables-item-icon img {
    width: 24px;
    height: 24px;
}

.project-deliverables-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
    min-width: 0;
}

.project-deliverables-item-text {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin: 0;
}

.project-deliverables-item-link {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin: 0;
}

.project-deliverables-item-actions {
    display: flex;
    gap: var(--spacing-08);
    flex-shrink: 0;
}

.project-deliverables-item-action {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-deliverables-item-action img {
    width: 16px;
    height: 16px;
}

/* ==========================================
   ASSETS OR LINKS SECTION
   ========================================== */
.project-assets-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    margin-top: var(--spacing-48);
}

.project-assets-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

.project-assets-headline {
    display: flex;
    align-items: center;
    width: 100%;
}

.project-assets-title {
    font-family: var(--font-family-secondary);
    font-size: 24px;
    font-weight: var(--font-weight-black);
    color: var(--color-text-primary);
    margin: 0;
}

.project-assets-description {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin: 0;
}

.project-assets-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

.project-assets-items-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    width: 100%;
}

.project-assets-input-wrapper {
    position: relative;
    display: flex;
}

.project-assets-input-wrapper .dsu-input {
    padding-right: 80px;
}

.project-assets-input-actions {
    display: flex;
    gap: var(--spacing-08);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.project-assets-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-assets-action-btn img {
    width: 20px;
    height: 20px;
}

.project-assets-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-16);
    background-color: var(--color-surface-regular);
    border: 1px solid var(--color-status-disabled);
    border-radius: var(--radius-md);
}

.project-assets-item-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface-especial);
    border-radius: var(--radius-md);
}

.project-assets-item-icon img {
    width: 24px;
    height: 24px;
}

.project-assets-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
    min-width: 0;
}

.project-assets-item-text {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin: 0;
}

.project-assets-item-link {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin: 0;
}

.project-assets-item-actions {
    display: flex;
    gap: var(--spacing-08);
}

.project-assets-item-action {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-assets-item-action img {
    width: 16px;
    height: 16px;
}

/* ==========================================
   PROJECT CONTEXT / SOLVE / SOLUTION SECTIONS
   ========================================== */
.project-test-section,
.project-solve-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
    margin-top: var(--spacing-48);
}

.project-test-header,
.project-solve-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    width: 100%;
}

.project-test-description,
.project-solve-description {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    margin: 0;
}

.project-test-content,
.project-solve-content {
    width: 100%;
}

.solution-approach-actions {
    margin-top: var(--spacing-16);
}

/* Assign Task Members Modal */
.modal-members-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: var(--spacing-24);
}

.modal-member-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-08);
    cursor: pointer;
    border-radius: var(--radius-md);
}

.modal-member-item:hover {
    background-color: var(--color-surface-especial);
}

.modal-member-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.modal-member-item label {
    flex: 1;
    cursor: pointer;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

/* ========== NEXT FILE ========== */

/* Design System - 12-column Grid Utilities (desktop-first) */
.dsu-container { width: min(1120px, 100% - 48px); margin-left: auto; margin-right: auto; }

@media (min-width: 1024px) {
  .dsu-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 24px; }
  /* Viewport grid: applies columns to the whole browser width */
  .dsu-grid-viewport { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 24px; width: 100%; padding-left: 48px; padding-right: 48px; }
  .col-span-12 { grid-column: 1 / -1; }
  .col-span-2 { grid-column: span 2; }
  .col-span-3 { grid-column: span 3; }
  .col-span-4 { grid-column: span 4; }
  .col-span-6 { grid-column: span 6; }
  .col-span-8 { grid-column: span 8; }
  .col-start-2 { grid-column-start: 2; }
  .col-start-3 { grid-column-start: 3; }
  .col-start-4 { grid-column-start: 4; }
  .col-start-5 { grid-column-start: 5; }
  .col-start-6 { grid-column-start: 6; }
  .justify-self-center { justify-self: center; }
}

/* Mobile fallback: simple stacked flow */
@media (max-width: 1023.98px) {
  .dsu-grid { display: block; }
}

/* Mobile: container and viewport padding */
@media (max-width: 768px) {
  .dsu-container {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .dsu-grid-viewport {
    padding-left: 16px;
    padding-right: 16px;
  }
}