/* ============================================================
   NPG CRM board — Monday-style, in NPG's minimalist language.
   ============================================================ */
:root {
  --ink: #0a0a0a; --paper: #f6f7fb; --white:#fff;
  --line:#e6e9f0; --muted:#676879; --accent:#ff3b2f;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }

/* ---------------- Auth ---------------- */
body.auth { background:#0a0a0a; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { background:#fff; width:100%; max-width:400px; border-radius:18px; padding:40px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.auth-brand { text-decoration:none; }
.auth-card .brand-mark { color:#0a0a0a; font-weight:900; font-size:30px; letter-spacing:-.03em; }
.auth-card h1 { margin:22px 0 4px; font-size:26px; font-weight:800; letter-spacing:-.02em; color:#0a0a0a; }
.auth-sub { margin:0 0 26px; color:var(--muted); font-size:14px; }
.auth-card label { display:block; font-size:13px; font-weight:600; color:#3a3a3f; margin-bottom:16px; }
.auth-card input { width:100%; margin-top:7px; padding:13px 14px; border:1px solid var(--line); border-radius:10px; font-size:15px; font-family:inherit; transition:.2s; }
.auth-card input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,59,47,.12); }
.btn-primary { background:var(--accent); color:#fff; border:none; cursor:pointer; font-weight:700; font-size:15px; padding:14px 22px; border-radius:100px; font-family:inherit; display:inline-flex; align-items:center; gap:8px; transition:.25s; text-decoration:none; }
.btn-primary:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn-primary.full { width:100%; justify-content:center; margin-top:6px; }
.auth-error { background:#ffe9e7; color:#c0392b; padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:18px; }
.auth-back { display:inline-block; margin-top:22px; color:var(--muted); text-decoration:none; font-size:13px; }
.auth-back:hover { color:#0a0a0a; }

/* ---------------- Board ---------------- */
body.board-page { background:var(--paper); color:var(--ink); }
.board-top { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  background:#0a0a0a; color:#fff; padding:14px clamp(16px,4vw,40px); }
.bt-left { display:flex; align-items:center; gap:20px; }
.board-top .brand-mark { color:#fff; font-weight:900; font-size:22px; letter-spacing:-.03em; text-decoration:none; }
.bt-title { display:flex; align-items:baseline; gap:12px; }
.bt-title h1 { font-size:17px; font-weight:700; margin:0; letter-spacing:-.01em; }
.bt-meta { font-size:12px; color:#9a9aa2; }
.bt-right { display:flex; align-items:center; gap:14px; }
.bt-user { font-size:13px; color:#c9c9d0; }
.btn-mini { background:rgba(255,255,255,.12); color:#fff; text-decoration:none; font-size:13px; font-weight:600; padding:8px 14px; border-radius:8px; transition:.2s; }
.btn-mini:hover { background:#fff; color:#0a0a0a; }

.board { padding:clamp(16px,4vw,34px); max-width:1200px; margin:0 auto; }

/* group */
.group { margin-bottom:34px; }
.group-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.group-caret { width:0; height:0; border-left:7px solid var(--g,#0073ea); border-top:5px solid transparent; border-bottom:5px solid transparent; }
.group-name { font-size:18px; font-weight:800; color:var(--g,#0073ea); margin:0; letter-spacing:-.01em; outline:none; border-radius:6px; padding:2px 6px; }
.group-name:focus { background:#fff; box-shadow:0 0 0 2px var(--g); }
.group-count { font-size:12px; color:var(--muted); background:#eceef4; padding:2px 9px; border-radius:100px; }
.group-del { margin-left:auto; background:none; border:none; color:#c4c4c4; cursor:pointer; font-size:13px; opacity:0; transition:.2s; }
.group:hover .group-del { opacity:1; }
.group-del:hover { color:var(--accent); }

/* table */
.table { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.03); }
.row { display:grid; grid-template-columns:34px minmax(180px,1fr) 150px 150px 140px 150px 40px; align-items:center; border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:none; }
.row-header { background:#fbfbfd; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.row-header .cell { padding:10px 12px; }
.cell { padding:0 12px; min-height:46px; display:flex; align-items:center; }
.c-drag { padding:0; justify-content:center; }
.group .table > .rows > .row { border-left:4px solid var(--g,#0073ea); }
.grip { width:8px; height:14px; background-image:radial-gradient(circle,#cfcfd6 1.4px,transparent 1.4px); background-size:4px 4px; opacity:0; transition:.2s; cursor:grab; }
.row.task:hover .grip { opacity:1; }

.title-text,.owner-text { outline:none; border-radius:6px; padding:6px 8px; width:100%; font-size:14px; min-height:20px; }
.title-text { font-weight:600; }
.title-text:focus,.owner-text:focus { background:#f4f6ff; box-shadow:inset 0 0 0 2px #d5deff; }
.owner-text:empty::before { content:'—'; color:#c4c4c4; }

.pill { border:none; cursor:pointer; color:#fff; background:var(--c,#c4c4c4); font-family:inherit; font-size:12px; font-weight:600; width:100%; height:32px; border-radius:6px; transition:.15s; }
.pill:hover { filter:brightness(1.06); }
.date-input { border:1px solid transparent; background:none; font-family:inherit; font-size:13px; color:#3a3a3f; padding:6px; border-radius:6px; width:100%; }
.date-input:hover { border-color:var(--line); }
.date-input:focus { outline:none; border-color:var(--accent); }
.task-del { background:none; border:none; color:#d0d0d6; cursor:pointer; font-size:12px; opacity:0; transition:.2s; }
.row.task:hover .task-del { opacity:1; }
.task-del:hover { color:var(--accent); }

/* add rows */
.add-row .add-task-input { border:none; background:none; font-family:inherit; font-size:14px; color:var(--muted); padding:8px; width:100%; }
.add-row .add-task-input:focus { outline:none; color:var(--ink); }
.add-row:hover { background:#fbfbfd; }
.add-group { margin-top:6px; background:#fff; border:1px dashed #cdd2e0; color:var(--muted); font-family:inherit; font-weight:600; font-size:14px; padding:12px 18px; border-radius:10px; cursor:pointer; transition:.2s; }
.add-group:hover { border-color:var(--accent); color:var(--accent); }

/* popup menu for status/priority */
.menu { position:absolute; z-index:50; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.16); padding:6px; min-width:150px; }
.menu button { display:flex; align-items:center; gap:9px; width:100%; border:none; background:none; font-family:inherit; font-size:13px; padding:9px 10px; border-radius:7px; cursor:pointer; text-align:left; }
.menu button:hover { background:#f4f6ff; }
.menu .swatch { width:12px; height:12px; border-radius:4px; flex:none; }

/* toast */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(30px); background:#0a0a0a; color:#fff; padding:12px 20px; border-radius:100px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:.3s; z-index:100; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:760px) {
  .row { grid-template-columns:28px minmax(120px,1fr) 110px 120px 120px 120px 34px; }
  .board-top .bt-user { display:none; }
}