/*
 * style.css — TaskBoard Kanban
 * Custom styles yang tidak bisa dicapai murni lewat Tailwind CDN runtime.
 * Mencakup: CSS variables, kanban layout, card, drag-and-drop, dark mode,
 *            priority badges, animasi, form inputs.
 */

/* ═══════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (Light & Dark)
═══════════════════════════════════════════════ */
:root {
  --col-bg:        #ffffff;
  --col-body-bg:   #f1f5f9;   /* slate-100 */
  --card-bg:       #ffffff;
  --card-border:   #e2e8f0;   /* slate-200 */
  --card-hover-bg: #f8fafc;
  --text-primary:  #1e293b;   /* slate-800 */
  --text-muted:    #64748b;   /* slate-500 */
  --text-faint:    #94a3b8;   /* slate-400 */
  --drag-over-bg:  #eff6ff;
  --drag-over-border: #93c5fd;
  --scrollbar-thumb: #cbd5e1;
}

.dark {
  --col-bg:        #111827;   /* gray-900 */
  --col-body-bg:   #030712;   /* gray-950 */
  --card-bg:       #1f2937;   /* gray-800 */
  --card-border:   #374151;   /* gray-700 */
  --card-hover-bg: #273344;
  --text-primary:  #f1f5f9;
  --text-muted:    #9ca3af;   /* gray-400 */
  --text-faint:    #6b7280;   /* gray-500 */
  --drag-over-bg:  #1e3a5f;
  --drag-over-border: #3b82f6;
  --scrollbar-thumb: #374151;
}

/* ═══════════════════════════════════════════════
   2. GLOBAL RESET & SCROLLBAR
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 99px;
}

/* ═══════════════════════════════════════════════
   3. KANBAN COLUMN
═══════════════════════════════════════════════ */
.kanban-col {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 300px;         /* kartu lebar tetap */
  min-height: 200px;
  border-radius: 0.875rem;
  background: var(--col-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  overflow: hidden;
}

/* Daftar task di dalam kolom */
.kanban-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  flex: 1;
  min-height: 60px;
  transition: background 0.18s ease;
}

/* Highlight saat drag-over */
.kanban-list.drag-over {
  background: var(--drag-over-bg);
  outline: 2px dashed var(--drag-over-border);
  outline-offset: -4px;
  border-radius: 0 0 0.875rem 0.875rem;
}

/* ═══════════════════════════════════════════════
   4. COLUMN EMPTY STATE
═══════════════════════════════════════════════ */
.col-empty {
  display: none;           /* JS toggle ke flex saat kosong */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: var(--text-faint);
  font-size: 0.78rem;
  text-align: center;
}
.col-empty.visible {
  display: flex;
}

/* ═══════════════════════════════════════════════
   5. COLUMN BADGE (task count)
═══════════════════════════════════════════════ */
.col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.badge-blue   { background: #dbeafe; color: #1d4ed8; }
.badge-amber  { background: #fef3c7; color: #b45309; }
.badge-green  { background: #d1fae5; color: #065f46; }

.dark .badge-blue   { background: #1e3a5f; color: #93c5fd; }
.dark .badge-amber  { background: #3d2c00; color: #fbbf24; }
.dark .badge-green  { background: #064e3b; color: #6ee7b7; }

/* ═══════════════════════════════════════════════
   6. COLUMN ADD BUTTON
═══════════════════════════════════════════════ */
.add-col-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-faint);
  transition: background 0.15s, color 0.15s;
}
.add-col-btn:hover {
  background: #eff6ff;
  color: #2563eb;
}
.dark .add-col-btn:hover {
  background: #1e3a5f;
  color: #60a5fa;
}

/* ═══════════════════════════════════════════════
   7. TASK CARD
═══════════════════════════════════════════════ */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes cardOut {
  from { opacity: 1; transform: scale(1);    max-height: 200px; margin-bottom: 0.5rem; }
  to   { opacity: 0; transform: scale(0.95); max-height: 0;     margin-bottom: 0;     padding: 0; }
}

.task-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
  cursor: grab;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  animation: cardIn 0.22s ease forwards;
}
.task-card:hover {
  background: var(--card-hover-bg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-color: #93c5fd;
}
.dark .task-card:hover {
  border-color: #374151;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.task-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
  box-shadow: 0 8px 32px rgba(59,130,246,0.25);
  transform: rotate(1.5deg);
}
.task-card.removing {
  animation: cardOut 0.22s ease forwards;
  pointer-events: none;
  overflow: hidden;
}

/* Priority accent strip (left border) */
.task-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 4px 0 0 4px;
}
.task-card[data-priority="high"]::before   { background: #ef4444; }
.task-card[data-priority="medium"]::before { background: #f59e0b; }
.task-card[data-priority="low"]::before    { background: #10b981; }

/* ═══════════════════════════════════════════════
   8. TASK CARD — INNER ELEMENTS
═══════════════════════════════════════════════ */
.card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}
.card-title.done-text {
  text-decoration: line-through;
  color: var(--text-faint);
}

.card-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.25rem;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Priority Badge ── */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.priority-high   { background: #fee2e2; color: #b91c1c; }
.priority-medium { background: #fef3c7; color: #92400e; }
.priority-low    { background: #d1fae5; color: #065f46; }

.dark .priority-high   { background: #450a0a; color: #fca5a5; }
.dark .priority-medium { background: #3d2c00; color: #fcd34d; }
.dark .priority-low    { background: #064e3b; color: #6ee7b7; }

/* ── Due date badge ── */
.due-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.due-badge.overdue { color: #ef4444; }

/* ── Card action buttons ── */
.card-actions {
  display: flex;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.task-card:hover .card-actions,
.task-card:focus-within .card-actions {
  opacity: 1;
}

.card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.4rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-faint);
  transition: background 0.14s, color 0.14s;
  flex-shrink: 0;
}
.card-btn:hover           { background: #f1f5f9; }
.dark .card-btn:hover     { background: #374151; }
.card-btn.edit:hover      { color: #f97316; }
.card-btn.move-left:hover { color: #2563eb; }
.card-btn.move-right:hover{ color: #10b981; }
.card-btn.delete:hover    { color: #ef4444; }

/* ── Move column arrows (desktop chips) ── */
.move-btn-wrap {
  display: flex;
  gap: 0.2rem;
}

/* ═══════════════════════════════════════════════
   9. DRAG GHOST PLACEHOLDER
═══════════════════════════════════════════════ */
.drag-placeholder {
  height: 72px;
  border: 2px dashed var(--drag-over-border);
  border-radius: 0.75rem;
  background: var(--drag-over-bg);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   10. MODAL
═══════════════════════════════════════════════ */
#modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
#modal-overlay.open #modal-box {
  transform: translateY(0);
}

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.14s, color 0.14s;
}
.modal-close-btn:hover {
  background: #f1f5f9;
  color: #ef4444;
}
.dark .modal-close-btn:hover {
  background: #374151;
}

/* ═══════════════════════════════════════════════
   11. FORM ELEMENTS
═══════════════════════════════════════════════ */
.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.625rem;
  border: 1.5px solid var(--card-border);
  background: var(--col-body-bg);
  color: var(--text-primary);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  appearance: none;
}
.form-input::placeholder { color: var(--text-faint); }
.form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
  background: var(--card-bg);
}
select.form-input { cursor: pointer; }

/* ═══════════════════════════════════════════════
   12. NAVBAR STATS BADGES
═══════════════════════════════════════════════ */
.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  font-size: 0.72rem;
}

/* ═══════════════════════════════════════════════
   13. INLINE EDIT INPUT (inside card)
═══════════════════════════════════════════════ */
.inline-edit-input {
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--col-body-bg);
  border: 1.5px solid #3b82f6;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  outline: none;
  transition: box-shadow 0.15s;
}
.inline-edit-input:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

/* ═══════════════════════════════════════════════
   14. MOBILE RESPONSIVE ADJUSTMENTS
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .kanban-col { width: 82vw; }
}


/* =========================================================
   LOCAL UTILITY CLASSES
   Replaces the original Tailwind CDN dependency so the app
   runs without npm, Node.js, framework, or external CSS.
========================================================= */
html, body { margin: 0; }
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.fixed{position:fixed}.sticky{position:sticky}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.z-50{z-index:50}.w-full{width:100%}.w-px{width:1px}.w-7{width:1.75rem}.w-8{width:2rem}.w-4{width:1rem}.w-3\.5{width:.875rem}.w-4\.5{width:1.125rem}.w-2\.5{width:.625rem}.h-14{height:3.5rem}.h-8{height:2rem}.h-7{height:1.75rem}.h-5{height:1.25rem}.h-4{height:1rem}.h-3\.5{height:.875rem}.h-4\.5{height:1.125rem}.h-2\.5{height:.625rem}
.min-h-screen{min-height:100vh}.min-h-\[calc\(100vh-10rem\)\]{min-height:calc(100vh - 10rem)}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.overflow-x-auto{overflow-x:auto}.overflow-hidden{overflow:hidden}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-4{margin-left:1rem;margin-right:1rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-4{padding-bottom:1rem}.p-6{padding:1.5rem}.pt-1{padding-top:.25rem}.mt-0\.5{margin-top:.125rem}.mt-2\.5{margin-top:.625rem}
.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.rounded-full{border-radius:9999px}.border{border-width:1px;border-style:solid}.border-b{border-bottom-width:1px;border-bottom-style:solid}.border-b-2{border-bottom-width:2px;border-bottom-style:solid}
.bg-white{background:#fff}.bg-white\/80{background:rgba(255,255,255,.8)}.bg-slate-100{background:#f1f5f9}.bg-slate-200{background:#e2e8f0}.bg-blue-500{background:#3b82f6}.bg-amber-400{background:#fbbf24}.bg-emerald-500{background:#10b981}.bg-primary-600{background:#2563eb}.bg-black\/40{background:rgba(0,0,0,.4)}.bg-red-100{background:#fee2e2}.bg-red-500{background:#ef4444}.bg-slate-50{background:#f8fafc}.bg-blue-100{background:#dbeafe}.bg-amber-100{background:#fef3c7}.bg-emerald-100{background:#d1fae5}.bg-gray-800{background:#1f2937}.bg-gray-900{background:#111827}.bg-gray-950{background:#030712}
.text-white{color:#fff}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-slate-400{color:#94a3b8}.text-slate-500{color:#64748b}.text-slate-600{color:#475569}.text-slate-700{color:#334155}.text-slate-800{color:#1e293b}.text-red-400{color:#f87171}.text-red-500{color:#ef4444}.text-blue-500{color:#3b82f6}.text-amber-400{color:#fbbf24}.text-emerald-500{color:#10b981}.text-primary-600{color:#2563eb}.uppercase{text-transform:uppercase}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.opacity-0{opacity:0}.opacity-30{opacity:.3}.pointer-events-none{pointer-events:none}.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)}.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.backdrop-blur-md{backdrop-filter:blur(12px)}.backdrop-blur-sm{backdrop-filter:blur(4px)}.translate-y-4{transform:translateY(1rem)}.transition{transition:all .15s ease}.transition-colors{transition:background-color .3s,color .3s,border-color .3s}.transition-opacity{transition:opacity .2s ease}.transition-transform{transition:transform .2s ease}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.active\:scale-95:active{transform:scale(.95)}
.border-slate-200{border-color:#e2e8f0}.border-gray-700{border-color:#374151}.border-gray-800{border-color:#1f2937}.border-blue-500{border-color:#3b82f6}.border-amber-400{border-color:#fbbf24}.border-emerald-500{border-color:#10b981}
.hover\:bg-primary-700:hover{background:#1d4ed8}.hover\:bg-slate-100:hover{background:#f1f5f9}.hover\:bg-slate-50:hover{background:#f8fafc}.dark .dark\:bg-gray-900{background:#111827}.dark .dark\:bg-gray-900\/80{background:rgba(17,24,39,.8)}.dark .dark\:bg-gray-950{background:#030712}.dark .dark\:bg-gray-800{background:#1f2937}.dark .dark\:bg-gray-700{background:#374151}.dark .dark\:bg-black\/60{background:rgba(0,0,0,.6)}.dark .dark\:text-white{color:#fff}.dark .dark\:text-gray-200{color:#e5e7eb}.dark .dark\:text-gray-400{color:#9ca3af}.dark .dark\:text-gray-500{color:#6b7280}.dark .dark\:border-gray-700{border-color:#374151}.dark .dark\:border-gray-800{border-color:#1f2937}.dark .dark\:hover\:bg-gray-800:hover{background:#1f2937}
.dark .dark\:bg-blue-950{background:#172554}.dark .dark\:bg-amber-950{background:#451a03}.dark .dark\:bg-emerald-950{background:#022c22}.dark .dark\:text-blue-300{color:#93c5fd}.dark .dark\:text-amber-300{color:#fcd34d}.dark .dark\:text-emerald-300{color:#6ee7b7}.dark .dark\:text-red-400{color:#f87171}
.sm\:inline{display:none}.sm\:flex{display:none}.sm\:block{display:none}
.snap-x{scroll-snap-type:x mandatory}.snap-mandatory{scroll-snap-type:x mandatory}.snap-start{scroll-snap-align:start}.md\:snap-none{scroll-snap-type:none}
@media (min-width:640px){.sm\:inline{display:inline}.sm\:flex{display:flex}.sm\:block{display:block}.hidden.sm\:inline{display:none}.hidden.sm\:flex{display:none}}
@media (min-width:768px){.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:snap-none{scroll-snap-type:none}}
.hidden{display:none!important}

/* Additional utility colors used by the original markup */
.text-blue-700{color:#1d4ed8}.text-amber-700{color:#b45309}.text-emerald-700{color:#047857}.text-red-600{color:#dc2626}
.text-blue-300{color:#93c5fd}.text-amber-300{color:#fcd34d}.text-emerald-300{color:#6ee7b7}.text-red-400{color:#f87171}
.bg-gray-950{background:#030712}.dark .dark\:bg-gray-950{background:#030712}
.mb-1{margin-bottom:.25rem}.w-3{width:.75rem}.h-3{height:.75rem}