/* =========================================================
   Blurry Shady — Cosmic Glass Board (consolidated)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* palette */
  --bg:#0b0f16;
  --text:#e6ebf7;
  --muted:#9fb0c9;

  --glass-bg: rgba(18,22,32,.70);
  --glass-border: rgba(255,255,255,.10);
  --glass-border-strong: rgba(255,255,255,.16);

  --acc:#7aa2ff;
  --acc-600:#5b8cff;
  --acc-700:#4878e6;

  --radius:12px;
  --shadow:0 10px 28px rgba(0,0,0,.30);
  --font-sans:'Inter','Segoe UI',system-ui,sans-serif;

  --gap-xs:4px; --gap-sm:8px; --gap-md:16px; --gap-lg:24px;

  /* column color safety (overridable per column via inline style) */
  --col-backlog:#6366f1;
  --col-todo:#3b82f6;
  --col-inprogress:#f59e0b;
  --col-done:#10b981;
}

/* ---------- Canvas & type ---------- */
body{
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(90,120,200,.18), transparent 55%),
    radial-gradient(1200px 700px at 110% 0%, rgba(100,80,180,.14), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  margin:0;
  padding:var(--gap-md);
}

:root{ --h1:1.7rem; --h2:1.25rem; --h3:1.05rem; --leading-tight:1.25; }
h1,h2,h3{ margin:0 0 8px; line-height:var(--leading-tight); }
h1{ font-size:var(--h1); font-weight:800; letter-spacing:.2px; }
h2{ font-size:var(--h2); font-weight:700; }
h3{ font-size:var(--h3); font-weight:700; }

a{ color:var(--acc); text-decoration:none; font-weight:600; }
a:hover{ color:var(--acc-600); text-decoration:underline; }

/* ---------- Top bar ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--gap-sm) var(--gap-md);
  background:linear-gradient(to bottom, rgba(18,22,32,.80), rgba(18,22,32,.55));
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 4px 18px rgba(0,0,0,.22);
  border-radius:0 0 14px 14px;
}
.topbar .brand{ color:var(--text); font-weight:700; letter-spacing:.2px; text-decoration:none; }
.topbar nav{
  display:flex;
  align-items:center;
  gap:var(--gap-md);
}
.topbar .topbar-link{
  color:var(--muted);
  background:none;
  border:none;
  padding:0;
  font:600 0.95rem/1 var(--font-sans);
  cursor:pointer;
}
.topbar .topbar-link:hover{ color:var(--acc); text-decoration:underline; }
.topbar .logout-form{ margin:0; }
.topbar-user{
  color:var(--text);
  font-weight:700;
  padding:6px 14px;
  border:1px solid var(--glass-border);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}

/* ---------- Card container ---------- */
.card{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:18px;
  padding:var(--gap-md);
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
}

/* subtle glow behind board */
.card::before{
  content:"";
  position:absolute; inset:-80px;
  background:radial-gradient(circle at 50% 30%, rgba(90,130,255,.12), transparent 70%);
  z-index:-1;
  filter:blur(40px);
}

/* ---------- Buttons & inputs ---------- */
.btn, button, input[type="submit"]{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--glass-border);
  color:#e5eaf3; padding:8px 14px; border-radius:10px;
  cursor:pointer; font-weight:700;
  transition:transform .06s, border-color .15s, box-shadow .15s, background .2s;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--glass-border-strong); }

.btn-sm{ padding:6px 10px; font-size:.9rem; border-radius:8px; }
.btn-ghost{ background:transparent; }
.btn-primary{
  background:linear-gradient(180deg, var(--acc), var(--acc-600));
  border-color: color-mix(in oklab, var(--acc) 75%, #ffffff 10%);
  color:#0b1220;
}
.btn-primary:hover{ background:linear-gradient(180deg, var(--acc-600), var(--acc-700)); }

input, select, textarea{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass-border);
  border-radius:10px; padding:8px 10px; color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(96,165,250,.18);
}

.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--gap-sm); }
.form-errors, .field-error{ color:#fca5a5; margin:4px 0; font-size:.9rem; }
.form-row small{ color:var(--muted); }

/* ---------- Filters row ---------- */
.filters{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.filters label{ display:flex; gap:6px; align-items:center; font-size:.95rem; color:var(--muted); }

/* ---------- Board layout ---------- */
.board-title{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.board-actions{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }

.hotkey-tip{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--glass-border); color:#b7c4e6;
}
.hotkey-tip kbd{
  font:600 12px/1 var(--font-sans);
  padding:2px 6px; border-radius:6px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--glass-border);
}

/* columns strip */
.columns{
  display:flex; align-items:flex-start; gap:18px;
  overflow-x:auto; padding-bottom:8px; flex-wrap:nowrap;
}
.columns::-webkit-scrollbar{ height:8px; }
.columns::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:9999px; }
.columns:hover::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.55); }

/* column card */
.column{
  background:linear-gradient(180deg, rgba(34,40,58,.55), rgba(28,33,48,.5));
  border:1px solid var(--glass-border);
  border-radius:14px; padding:var(--gap-sm);
  min-width:320px; flex:0 0 320px;
  display:flex; flex-direction:column;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.column:hover{ transform:translateY(-1px); border-color:var(--glass-border-strong); }

/* column header (uses --col-color if present) */
.column-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; margin:6px 6px 8px;
  border-radius:12px; color:#fff; font-weight:800; letter-spacing:.2px;
  background:
    linear-gradient(
      to right,
      color-mix(in oklab, var(--col-color, #334155) 28%, #0c111c) 0%,
      color-mix(in oklab, var(--col-color, #334155) 12%, #0c111c) 100%
    );
  border:1px solid color-mix(in oklab, var(--col-color, #334155) 35%, #93c5fd 12%);
}
.column-head .actions a{ color:#fff; }

/* count pill in header */
.column-title{ display:inline-flex; align-items:center; gap:8px; }
.column-title .count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; font-size:.8rem; font-weight:800; color:#0c111c;
  background:color-mix(in oklab, var(--col-color, #64748b) 78%, #ffffff 8%);
  border:1px solid color-mix(in oklab, var(--col-color, #64748b) 65%, #ffffff 12%);
  box-shadow:0 2px 10px color-mix(in oklab, var(--col-color, #64748b) 40%, transparent);
}

/* ---------- Task list & cards ---------- */
.task-list{
  list-style:none; padding:6px; margin:0 6px 8px;
  border:1px dashed var(--glass-border); border-radius:10px;
  background:rgba(255,255,255,.02);
  min-height:48px;
}
.task-list .empty{
  margin:8px; padding:10px; border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(148,163,184,.35);
  color:var(--muted);
}

/* glass task card */
.task-card{
  position:relative;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  color:var(--text);
  padding:10px 12px 12px 14px;
  margin:8px 6px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  cursor:grab;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.task-card:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); transform:translateY(-1px); }
.task-card.dragging{ transform:scale(.985); opacity:.9; box-shadow:0 18px 40px rgba(0,0,0,.35); }

/* colored rail from column color */
.task-card::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:6px; border-radius:6px;
  background: color-mix(in oklab, var(--col-color, #64748b) 85%, #000 15%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.task-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.task-title{ color:#eef3ff; font-weight:700; letter-spacing:.1px; }
.task-card .muted{ color:rgba(226,232,240,.75); }
.task-card a{ color:#cfe0ff; font-weight:600; }
.task-card a:hover{ color:#e8f1ff; }

/* notes/description — unlimited lines */
.task-desc{
  margin:6px 0 4px;
  color:var(--text);
  line-height:1.35;
  white-space:normal; overflow:visible; text-overflow:unset; display:block;
}

/* tags/pills */
.pill, .tag, .chip{
  display:inline-block; padding:2px 8px; border-radius:9999px;
  border:1px solid rgba(148,163,184,.35); color:#cbd5e1; font-size:.85rem; margin-right:6px;
}
.tag{ border-radius:8px; }

/* priority dot */
.prio{ display:inline-flex; align-items:center; gap:6px; }
.prio-dot{ width:10px; height:10px; border-radius:50%; border:2px solid #0a0f18; }
.prio-low{ background:#3b82f6; }
.prio-medium{ background:#f59e0b; }
.prio-high{ background:#ef4444; }

/* DnD affordance */
.dropzone.drop-hover{
  outline:2px dashed color-mix(in oklab, var(--acc) 60%, #c7d7ff);
  outline-offset:6px;
  background:linear-gradient(0deg, rgba(96,165,250,.06), transparent);
}

/* ---------- Modal ---------- */
#app-modal::backdrop{ background:rgba(0,0,0,.55); }
#app-modal{
  width:720px; max-width:94vw; padding:0; border:none; border-radius:16px;
  background:linear-gradient(180deg, rgba(24,28,42,.75), rgba(20,24,36,.75));
  border:1px solid var(--glass-border);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
}
#modal-body{ padding:22px; }

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, [data-modal-open]:focus-visible{
  outline:2px solid var(--acc); outline-offset:2px; border-radius:10px;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:980px){
  .columns{ gap:12px; }
  .column{ min-width:280px; }
}

/* ---------- Column name → default color mapping ---------- */
.col-backlog    { --col-color: var(--col-backlog); }
.col-todo       { --col-color: var(--col-todo); }
.col-in-progress{ --col-color: var(--col-inprogress); }
.col-done       { --col-color: var(--col-done); }

/* ---------- Fallback: if blur unsupported ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .task-card{ background: rgba(17,23,40,.85) !important; }
}


.topbar{ position: sticky; top: 0; z-index: 1000; }
.topbar .brand{ display:inline-block; pointer-events:auto; }


.col-backlog     { --col-color: #64748b; } /* gray */
.col-todo        { --col-color: #3b82f6; } /* blue */
.col-in-progress { --col-color: #f59e0b; } /* orange */
.col-done        { --col-color: #08ea26; } /* yellow */


/* --- Column colors (final override) --- */
/* Force these even if an inline --col-color is set on the column */
.column.col-backlog      { --col-color: #64748b !important; } /* gray */
.column.col-todo         { --col-color: #3b82f6 !important; } /* blue */
.column.col-in-progress,
.column.col-inprogress   { --col-color: #f59e0b !important; } /* orange */
.column.col-done         { --col-color: #08ea26 !important; } /* yellow */


/* --- Fix ultra-long words/strings inside task cards --- */
.task-card, .task-card * { min-width: 0; }                 /* allow flex children to shrink */
.task-top { display:flex; align-items:center; gap:10px; }   /* already have, just re-affirm */

.task-title,
.task-desc {
  white-space: normal;
  overflow-wrap: anywhere;   /* modern, wraps long AAAAA… */
  word-break: break-word;    /* fallback */
  hyphens: auto;
}

/* prevent the list area from being pushed horizontally */
.task-list { overflow-x: hidden; }


/* Modal & form readability */
#app-modal, #app-modal * { color: #e6ebf7; }
#app-modal label { color: #eef3ff; font-weight: 600; }
#app-modal ::placeholder { color: rgba(226,232,240,.65); }