/* === Aviera custom theme for Vikunja === */
/* Aplicado 2026-04-28 — fichas de tarea estilo Linear/Notion */

:root {
  --aviera-teal: #00A0B2;
  --aviera-bg: #0F172A;
  --aviera-card: #1E293B;
  --aviera-card-hover: #273449;
  --aviera-border: #334155;
  --aviera-text: #E2E8F0;
  --aviera-muted: #94A3B8;
  --aviera-prio-high: #EF4444;
  --aviera-prio-med: #F59E0B;
  --aviera-prio-low: #3B82F6;
}

/* ---- Kanban cards ---- */
.task,
.kanban .task,
.bucket .task,
[class*="task-card"] {
  background: var(--aviera-card) !important;
  border: 1px solid var(--aviera-border) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
  transition: all 180ms ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.task:hover,
.kanban .task:hover,
.bucket .task:hover,
[class*="task-card"]:hover {
  background: var(--aviera-card-hover) !important;
  border-color: var(--aviera-teal) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.32) !important;
  cursor: pointer !important;
}

/* Borde izquierdo según prioridad */
.task.priority-4,
.task.priority-5,
.task[class*="prio-high"] {
  border-left: 3px solid var(--aviera-prio-high) !important;
}
.task.priority-3,
.task[class*="prio-med"] {
  border-left: 3px solid var(--aviera-prio-med) !important;
}
.task.priority-1,
.task.priority-2 {
  border-left: 3px solid var(--aviera-prio-low) !important;
}

/* Título de la tarea — grande, claro, jerarquía clara */
.task .task-title,
.task .tasktext,
.task h3,
.task .title {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--aviera-text) !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.01em !important;
}

/* ID #1 chiquito y gris arriba a la izquierda */
.task .task-id,
.task .tasknumber,
.task [class*="task-id"] {
  font-size: 11px !important;
  color: var(--aviera-muted) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  opacity: 0.7 !important;
}

/* Fecha de vencimiento — pill sutil */
.task .due-date,
.task [class*="due"] {
  font-size: 11px !important;
  color: var(--aviera-muted) !important;
  background: rgba(148,163,184,0.1) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid var(--aviera-border) !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Fecha atrasada en rojo */
.task .due-date.overdue,
.task .due-date.is-overdue,
.task [class*="overdue"] {
  color: #FCA5A5 !important;
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.3) !important;
}

/* Labels — más chicas, planas */
.task .tag,
.task .label,
.task [class*="label-"] {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* Avatar asignado — más chico */
.task .avatar,
.task [class*="user-avatar"] {
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
  border: 1.5px solid var(--aviera-border) !important;
}

/* Indicador de prioridad — minimal */
.task .priority-label,
.task [class*="priority"] {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* ---- Kanban columns ---- */
.bucket,
.kanban-bucket,
[class*="bucket"] {
  background: rgba(15,23,42,0.6) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(51,65,85,0.4) !important;
}

.bucket-header,
.kanban-bucket-header,
[class*="bucket-header"] {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--aviera-text) !important;
  margin-bottom: 12px !important;
  padding: 0 4px !important;
}

/* Add task button */
.add-task,
button[class*="add-task"],
[class*="new-task"] {
  background: transparent !important;
  border: 1.5px dashed var(--aviera-border) !important;
  color: var(--aviera-muted) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 160ms ease !important;
}

.add-task:hover,
button[class*="add-task"]:hover {
  border-color: var(--aviera-teal) !important;
  color: var(--aviera-teal) !important;
  background: rgba(0,160,178,0.06) !important;
}

/* ---- List view rows ---- */
.list-view .task,
.tasks .task {
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 4px !important;
}

/* Checkbox — más bonito */
.task .fancycheckbox,
.task input[type="checkbox"] {
  cursor: pointer !important;
}

/* ---- Sidebar polish ---- */
.namespace-container,
.menu,
[class*="navigation"] {
  border-right-color: var(--aviera-border) !important;
}

/* Active item en sidebar */
.menu .router-link-active,
.menu li.active {
  background: rgba(0,160,178,0.12) !important;
  color: var(--aviera-teal) !important;
  border-radius: 6px !important;
}

/* ---- Botones primarios — color Aviera ---- */
.button.is-primary,
.btn-primary,
button[class*="primary"] {
  background: var(--aviera-teal) !important;
  border-color: var(--aviera-teal) !important;
}

.button.is-primary:hover {
  background: #0089A0 !important;
  border-color: #0089A0 !important;
}

/* ---- Scroll smoother ---- */
* {
  scroll-behavior: smooth;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--aviera-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--aviera-muted); }