/* ========================================================
   Entra Brand Theme for TaskView
   Colors:
     - Primary: #0091b6 (Entra Cyan/Blue)
     - Deep Blue: #023047
     - Tertiary / Accent: #ffa400 (Entra Orange)
   ======================================================== */

:root, :host, html {
  --ui-primary: #0091b6 !important;
  --ui-color-primary-50: #e6f6fa !important;
  --ui-color-primary-100: #ccecf4 !important;
  --ui-color-primary-200: #99d9e9 !important;
  --ui-color-primary-300: #66c6de !important;
  --ui-color-primary-400: #33b3d3 !important;
  --ui-color-primary-500: #0091b6 !important;
  --ui-color-primary-600: #0082a4 !important;
  --ui-color-primary-700: #006883 !important;
  --ui-color-primary-800: #004e62 !important;
  --ui-color-primary-900: #023047 !important;
  --ui-color-primary-950: #011f2e !important;
}

.dark {
  --ui-primary: #33b3d3 !important;
}

/* Force buttons, links, active tabs and checkboxes to Entra Blue */
[data-slot="base"].bg-primary,
button.bg-primary,
.bg-primary {
  background-color: #0091b6 !important;
}

button.bg-primary:hover,
.bg-primary:hover {
  background-color: #0082a4 !important;
}

.text-primary,
[data-slot="link"].text-primary {
  color: #0091b6 !important;
}

.ring-primary,
.border-primary,
.focus-visible\:outline-primary:focus-visible {
  border-color: #0091b6 !important;
  outline-color: #0091b6 !important;
}

/* ========================================================
   Kanban Task Cards - Entra Orange Accent Styling
   Diferencia claramente las tarjetas del fondo de columna
   ======================================================== */
[data-testid="kanban-task-card"] [data-testid^="task-item-"],
[data-testid="kanban-task-card"] > div,
div[data-testid^="task-item-"] {
  background-color: #fffaf0 !important; /* Fondo suave y limpio con matiz naranja */
  border: 1px solid rgba(255, 164, 0, 0.4) !important;
  border-left: 4px solid #ffa400 !important; /* Franja izquierda en Naranja Entra */
  border-radius: 0.85rem !important;
  box-shadow: 0 2px 6px -1px rgba(255, 164, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-testid="kanban-task-card"] [data-testid^="task-item-"]:hover,
[data-testid="kanban-task-card"] > div:hover,
div[data-testid^="task-item-"]:hover {
  background-color: #fff4db !important;
  border-color: #ffa400 !important;
  box-shadow: 0 4px 14px -2px rgba(255, 164, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}

/* Modo oscuro para tarjetas */
.dark [data-testid="kanban-task-card"] [data-testid^="task-item-"],
.dark [data-testid="kanban-task-card"] > div,
.dark div[data-testid^="task-item-"] {
  background-color: rgba(255, 164, 0, 0.07) !important;
  border: 1px solid rgba(255, 164, 0, 0.3) !important;
  border-left: 4px solid #ffa400 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.dark [data-testid="kanban-task-card"] [data-testid^="task-item-"]:hover,
.dark [data-testid="kanban-task-card"] > div:hover,
.dark div[data-testid^="task-item-"]:hover {
  background-color: rgba(255, 164, 0, 0.14) !important;
  border-color: #ffa400 !important;
}