/*
  Design system: palette "CRM & Client Management" + typography "Friendly SaaS"
  (Plus Jakarta Sans), tham khảo từ bộ tài liệu UI/UX Pro Max — áp dụng thang màu
  ngữ nghĩa (semantic tokens), thang khoảng cách 4px, bán kính/elevation nhất quán,
  touch target ≥44px, focus ring rõ ràng cho accessibility.
*/
:root {
  --primary: #2563eb;
  --on-primary: #ffffff;
  --secondary: #3b82f6;
  --accent: #059669;
  --on-accent: #ffffff;
  --bg: #f8fafc;
  --ink: #0f172a;
  --card: #ffffff;
  --card-ink: #0f172a;
  --muted: #f1f5fd;
  --ink-2: #64748b;
  --ink-3: #97a3b7;
  --border: #e4ecfc;
  --destructive: #dc2626;
  --on-destructive: #ffffff;
  --destructive-soft: #fee2e2;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --status-green: #16a34a;
  --status-green-soft: #dcfce7;
  --ring: #2563eb;

  --radius-lg: 14px;
  --radius: 12px;
  --radius-sm: 9px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .08);
  --ease: cubic-bezier(.25, .8, .25, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #5b8def;
    --on-primary: #071022;
    --secondary: #7fa8f5;
    --accent: #34d399;
    --on-accent: #04150f;
    --bg: #0a0f1a;
    --ink: #e7ecf5;
    --card: #121a2b;
    --card-ink: #e7ecf5;
    --muted: #17233a;
    --ink-2: #93a2b8;
    --ink-3: #5c6b82;
    --border: #223047;
    --destructive: #f87171;
    --on-destructive: #2a0b0b;
    --destructive-soft: #2a1414;
    --warn: #f0b93d;
    --warn-soft: #2e2410;
    --status-green: #4ade80;
    --status-green-soft: #10261a;
    --ring: #5b8def;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.app-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-5);
  padding: 14px var(--space-6);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.app-nav .brand { font-weight: 700; margin-right: auto; letter-spacing: -.01em; }
.app-nav a {
  color: var(--ink-2); font-size: 14px; font-weight: 600;
  padding: 10px 2px; border-bottom: 2px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.app-nav a.active, .app-nav a:hover { color: var(--primary); border-bottom-color: var(--primary); }

.container { max-width: 960px; margin: 0 auto; padding: var(--space-6); }
.container-narrow { max-width: 640px; margin: 0 auto; padding: var(--space-6); }

h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.subtitle { color: var(--ink-2); font-size: 14px; margin: 0 0 var(--space-5); }

.card {
  background: var(--card);
  color: var(--card-ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) 18px;
  margin-bottom: var(--space-3);
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
a.card:hover, .card.clickable:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* KPI / stat cards — kiểu Executive Dashboard: số lớn, tối đa vài thẻ, rõ nhãn */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5); box-shadow: var(--shadow-sm);
}
.stat .num { font-size: 34px; font-weight: 700; color: var(--primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 13px; color: var(--ink-2); margin-top: var(--space-1); font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--secondary); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: var(--muted); }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

label { display: block; font-size: 13px; font-weight: 600; margin: var(--space-4) 0 6px; }
input, textarea, select {
  width: 100%; min-height: 40px; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: 15px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
fieldset { border: none; padding: 0; margin: 0; }
legend {
  font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase;
  letter-spacing: .06em; margin: var(--space-5) 0 var(--space-2); padding: 0;
}

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-success { background: var(--status-green-soft); color: var(--status-green); }
.badge-neutral { background: var(--muted); color: var(--primary); }

.boundary-box {
  background: var(--destructive-soft); border: 1px solid var(--destructive);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
}
.boundary-box .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--destructive); margin-bottom: 4px; }

/* BMC canvas grid — bố cục chuẩn Osterwalder */
.bmc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto) auto;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.bmc-cell {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-3); font-size: 12px; cursor: pointer; min-height: 72px;
  background: var(--card);
  transition: box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.bmc-cell:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.bmc-cell .bmc-title { font-weight: 700; font-size: 11px; margin-bottom: 4px; }
.bmc-cell.yeu { background: var(--warn-soft); border-color: var(--warn); }
.bmc-cell.manh { background: var(--status-green-soft); border-color: var(--status-green); }
.bmc-partners { grid-column: 1; grid-row: 1 / 3; }
.bmc-activities { grid-column: 2; grid-row: 1; }
.bmc-resources { grid-column: 2; grid-row: 2; }
.bmc-value { grid-column: 3; grid-row: 1 / 3; background: var(--muted); }
.bmc-relationships { grid-column: 4; grid-row: 1; }
.bmc-channels { grid-column: 4; grid-row: 2; }
.bmc-segments { grid-column: 5; grid-row: 1 / 3; }
.bmc-costs { grid-column: 1 / 3; grid-row: 3; }
.bmc-revenue { grid-column: 3 / 6; grid-row: 3; }
@media (max-width: 720px) {
  .bmc-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bmc-partners, .bmc-value, .bmc-segments, .bmc-costs, .bmc-revenue,
  .bmc-activities, .bmc-resources, .bmc-relationships, .bmc-channels {
    grid-column: auto; grid-row: auto;
  }
}

/* Timeline buổi coach */
.timeline { border-left: 2px solid var(--border); padding-left: var(--space-5); margin-left: 6px; }
.timeline-item { position: relative; margin-bottom: var(--space-4); }
.timeline-item::before {
  content: ''; position: absolute; left: -25px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.timeline-item .meta { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Trang buổi coach — 3 giai đoạn màu */
.phase {
  background: var(--card); border-radius: var(--radius-lg); padding: var(--space-5) 18px;
  margin-bottom: var(--space-4); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.phase-p1 { border-left: 4px solid var(--status-green); }
.phase-p2 { border-left: 4px solid var(--warn); }
.phase-p3 { border-left: 4px solid var(--primary); }
.phase h2 { display: flex; align-items: center; gap: var(--space-2); }
.phase .dur { font-size: 12px; color: var(--ink-3); font-weight: 600; }

.q-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); align-items: flex-start; }
.q-row input { flex: 1; }

.chart-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); }

.empty-state { text-align: center; padding: var(--space-8) var(--space-5); color: var(--ink-2); }