/*
MINI KANBAN PROJECT
WEEK 05 CHALLENGE BY GEO V.
*/

:root {
  --bg: #f5f7fb;
  --text-main: #1f2933;
  --border-subtle: #e1e5ee;
  --accent: #D4E8DF;
  --danger: #F8D9DC;
  --warning: #FFF3D0;
  --muted: #6c757d;
  --card-bg: #ffffff;
  --radius-lg: 18px;
  --custom-type-reg: 'Figtree', sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--custom-type-reg);
  font-size: 16px;
  color: var(--text-main);
  background-color: var(--bg);
}

/* Header */
.app-header {
  background-color: #ffffff;
  padding: 1.5rem 0;
}
.app-title {
  font-weight: 700;
  font-size: 2rem;
}
.app-subtitle {
  color: var(--muted);
  font-size: 0.95rem;
}
#current-date {
  font-size: 0.8rem;
}

/* Swim Lanes */
.swimlanes {
  min-height: 70vh;
}
.lane {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: visible;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.lane-body {
  padding: 0.75rem;
  min-height: 180px;
}

/* Task Cards */
.card-header {
  width: 100%;
  padding: 16px;
}
.task-card {
  margin: 0.35rem auto;
  width: 100%;
  background: var(--card-bg);
  padding: 24px;
  max-width: 320px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  cursor: grab;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.task-card:hover {
/*  transform: translateY(-1px); <- i didn't like this */
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.task-card-title {
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}
.task-card-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.task-card-text {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.task-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 0.25rem;
}
/* Status Colors */
.task-due-warning {
  background-color: var(--warning);
  color: var(--text-main);
}
.task-due-overdue {
  background-color: var(--danger);
  color: var(--text-main);
}
.task-due-done {
  background-color:var(--done);
  color: var(--text-main);
}
/* Droppable highlight */
.lane-body.ui-droppable-active {
  outline: 2px dashed rgba(25, 135, 84, 0.4);
}
.lane-body.ui-droppable-hover {
  background-color: rgba(25, 135, 84, 0.05);
}
/*
//
*/
/* Add'l customizations and adjustments */
@font-face {
  font-family: 'Figtree';
  src: url(../assets/Figtree-VariableFont_wght.ttf) format ('truetype');
}
i { /* custom icon alignment fix for body */
  position: relative;
  top: 2px;
}
#lane-todo .card-header i, 
#lane-in-progress .card-header i, 
#lane-done .card-header i { /* special treatment for header icons */
  position: relative;
  top: 3px;
  left: -5px;
}
#yournamehere { /* credit */
  text-align: center;
  color: var(--muted);
  margin: 8px 0 0 0;
  font-size: 0.8rem;
}
.btn-custom-edit { /* custom buttons */
  border: none;
  border-radius: 66px;
  background: #81c8e9;
}
.btn-custom-del {
  border: none;
  padding: 4px 10px;
  border-radius: 8px;
  background: #ffbbbb;
}
.task-due-done {
  background: var(--accent);
}
.task-due-done .task-card-meta {
  color: #323d47;
}
.task-due-warning .task-card-meta {
  color: #323d47;
}
.task-due-overdue .task-card-meta {
  color: #323d47;
}