/* ===== Tokens ===== */
:root {
  --bg: #eef3fb;
  --bg-2: #e5ecf8;
  --surface: #ffffff;
  --surface-soft: #f7f9fe;
  --line: #e3e9f4;
  --line-soft: #eef2f9;

  --ink: #16233f;
  --ink-2: #46577a;
  --ink-3: #8595b1;

  --primary: #2f6bff;
  --primary-dark: #1f4fd6;
  --primary-soft: #e9f0ff;
  --sky: #2bb8f0;

  /* status */
  --todo: #8696b3;
  --todo-soft: #eef1f7;
  --progress: #2f6bff;
  --progress-soft: #e9f0ff;
  --review: #f5a524;
  --review-soft: #fff4e1;
  --done: #18b58a;
  --done-soft: #e2f7f0;

  /* priority */
  --high: #f5544f;
  --high-soft: #ffe9e8;
  --med: #f59331;
  --med-soft: #fff0e2;
  --low: #1fb6a6;
  --low-soft: #e1f6f3;

  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(22,35,63,.05), 0 1px 3px rgba(22,35,63,.05);
  --shadow: 0 4px 16px rgba(22,35,63,.07);
  --shadow-lg: 0 18px 48px rgba(22,35,63,.16);
  --shadow-pop: 0 24px 70px rgba(22,35,63,.22);

  --font: "IBM Plex Sans Thai", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-num: "Plus Jakarta Sans", "IBM Plex Sans Thai", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--primary-soft); }

/* scrollbar */
.scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.scroll::-webkit-scrollbar-thumb { background: #cdd7e8; border-radius: 20px; border: 2px solid var(--bg); }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ===== App shell ===== */
.shell { max-width: 1320px; margin: 0 auto; padding: 0 28px 64px; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(238,243,251,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1320px; margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(145deg, var(--primary), var(--sky));
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 16px rgba(47,107,255,.4);
  flex: none;
}
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -.2px; line-height: 1.1; }
.brand-sub { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

.viewtabs { display: flex; gap: 4px; background: #dde6f5; padding: 4px; border-radius: 13px; }
.viewtab {
  border: 0; background: transparent; color: var(--ink-2);
  padding: 9px 18px; border-radius: 9px; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px; transition: .15s; white-space: nowrap;
}
.viewtab:hover { color: var(--ink); }
.viewtab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

.spacer { flex: 1; }

.who { display: flex; align-items: center; gap: 10px; }
.who-label { font-size: 12px; color: var(--ink-3); }
.who-select {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  border-radius: 11px; padding: 9px 34px 9px 12px; font-size: 14px; font-weight: 600;
  color: var(--ink); box-shadow: var(--shadow-sm);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238595b1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* ===== buttons ===== */
.btn {
  border: 0; border-radius: 12px; padding: 11px 18px; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; transition: .15s; white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(47,107,255,.32); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: #cdd9ef; background: var(--surface-soft); }
.btn-soft { background: var(--primary-soft); color: var(--primary); }
.btn-soft:hover { background: #dde8ff; }

/* ===== avatar ===== */
.avatar { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; line-height: 1; }

/* ===== badge ===== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ===== progress ===== */
.bar { height: 8px; border-radius: 20px; background: var(--line-soft); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 20px; transition: width .5s cubic-bezier(.4,0,.2,1); }

/* ===== card ===== */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line-soft); }

/* hover states for inline-styled rows/cards */
.hov-row:hover { background: var(--surface-soft) !important; }
.hov-card:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-2px); }
.hov-card:active { cursor: grabbing; }
.hov-add:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--primary-soft) !important; }
.tm-x:hover { background: var(--surface-soft) !important; color: var(--ink) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft); }

/* ===== Responsive / Mobile ===== */
@media (max-width: 768px) {
  .shell { padding: 0 12px 48px; }

  /* Topbar: แถวบน brand + buttons, แถวล่าง view tabs */
  .topbar-in {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px;
  }
  .brand { flex: 1; min-width: 0; }
  .brand-sub { display: none; }
  .brand-name { font-size: 16px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }

  /* View tabs ย้ายไปแถวที่ 2 เต็มความกว้าง */
  .viewtabs { order: 10; width: 100%; }
  .viewtab { flex: 1; justify-content: center; padding: 8px 6px; font-size: 12px; gap: 4px; }
  .viewtab svg { width: 14px; height: 14px; }

  /* Who selector ย้ายไปแถวที่ 3 */
  .who { order: 11; width: 100%; }
  .who-label { display: none; }
  .who-select { width: 100%; }

  .spacer { display: none; }
  .btn-label { display: none; }
  .btn { padding: 9px 10px; }

  /* Manager: summary 2×2 แทน 4×1 */
  .summary-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Manager: stack two-col */
  .two-col { grid-template-columns: 1fr !important; }

  /* Kanban: scroll แนวนอน */
  .kb-cols {
    grid-template-columns: repeat(4, 270px) !important;
    overflow-x: auto;
    padding-bottom: 12px;
  }

  /* === Modal sheets — full-screen on mobile === */
  .modal-sheet {
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh;
    border-radius: 0 !important;
  }
  /* modal head/body/foot padding */
  .modal-sheet > div:first-child {
    padding: 16px 18px 6px !important;
  }
  .modal-sheet > div:last-child {
    padding: 14px 18px 24px !important;
    flex-wrap: wrap;
    gap: 10px;
  }
  /* modal body sections */
  .modal-sheet > div:nth-child(2) {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* modal row2 → stack */
  .modal-row2,
  .sm-row2 {
    flex-direction: column !important;
  }

  /* === Reports view === */
  .rv-summary {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rv-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }

  /* === Workload table (manager) — hide row counts, show only name + progress === */
  .wl-head {
    display: none !important;
  }
  .wl-row {
    grid-template-columns: 1fr auto !important;
    padding: 12px 14px !important;
  }
  .wl-row > :nth-child(n+2):nth-child(-n+5) {
    display: none !important;
  }
}

/* ===== Tablet (769-1024px) — moderate adjustments ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .kb-cols {
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  }
}

/* fade-in */
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.animate-pop { animation: pop .35s cubic-bezier(.2,.7,.3,1) both; }