/* ═══════════════════════════════════════════════════════════════════
   Profit Dashboard — hệ thiết kế dark hiện đại, mobile-first
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Bề mặt & nền — thang sáng dần để tạo độ sâu tinh tế */
  --bg:        #0b1120;
  --surface-1: #111a2e;
  --surface-2: #16213b;
  --line:      #243049;
  --line-soft: #1b2740;

  /* Chữ */
  --text:    #eef2f9;
  --muted:   #94a3b8;
  --faint:   #64748b;

  /* Nhấn */
  --accent:  #38bdf8;
  --green:   #34d399;
  --green-d: #10b981;
  --red:     #f87171;
  --red-d:   #ef4444;
  --amber:   #fbbf24;
  --violet:  #a78bfa;
  --slate:   #64748b;

  /* Hình học & bóng */
  --radius:    16px;
  --radius-sm: 11px;
  --radius-xs: 9px;
  --shadow-1:  0 1px 2px rgba(0,0,0,.30);
  --shadow-2:  0 6px 24px -8px rgba(0,0,0,.55);

  /* Thang khoảng cách */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

  /* Thang chữ */
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 22px;

  --maxw: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(56,189,248,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(167,139,250,.05), transparent 55%),
    var(--bg);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Số liệu dùng chữ số đều cột (tabular) để bảng/KPI luôn thẳng hàng */
.kpi-val, td, th, .kpi-delta, .range-label { font-variant-numeric: tabular-nums; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
h1, h2 { font-weight: 700; letter-spacing: -.01em; }

/* ── Đăng nhập ───────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
}
.login-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  width: 100%; max-width: 372px;
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-2);
  text-align: center;
}
.login-logo { font-size: 34px; line-height: 1; }
.login-card h1 { margin: 0; font-size: var(--fs-xl); }
.login-card p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.login-card input, .login-card button {
  padding: 13px 14px; border-radius: var(--radius-xs); font-size: var(--fs-md);
  width: 100%;
}
.login-card input {
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  text-align: center;
}
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
.login-card button {
  background: var(--accent); color: #04222f; font-weight: 700; border: 0; cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
.login-card button:hover { filter: brightness(1.06); }
.login-card button:active { transform: translateY(1px); }
.error { color: var(--red); font-size: var(--fs-sm); }

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,17,32,.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  padding: env(safe-area-inset-top) 0 0;
}
.topbar-inner, .topbar-sub {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex; gap: var(--sp-3); align-items: center;
}
.topbar-inner { justify-content: space-between; }
.topbar-sub {
  padding-top: 0; padding-bottom: var(--sp-3);
  flex-wrap: wrap; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.brand-mark { font-size: 20px; line-height: 1; }
.brand-name {
  font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge {
  flex: none;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .6px;
  background: linear-gradient(180deg, #fcd34d, var(--amber));
  color: #422006; padding: 3px 8px; border-radius: 999px;
  box-shadow: var(--shadow-1);
}
/* Badge LIVE (Shopify đã kết nối) — xanh thay vì vàng "dữ liệu mẫu". */
.badge.live {
  background: linear-gradient(180deg, #6ee7b7, var(--green, #34d399));
  color: #052e1b;
}

.controls { display: flex; gap: var(--sp-2); align-items: center; flex: none; }

/* Nút "Kết nối Shopify" — nổi bật để mời hành động. */
.connect-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #5b8def, #3b6fd6);
  color: #fff; text-decoration: none; font-weight: 700;
  font-size: var(--fs-sm); padding: 8px 12px;
  border: 1px solid #2f3e5e; border-radius: var(--radius-xs);
  box-shadow: var(--shadow-1); white-space: nowrap;
}
.connect-btn:hover { filter: brightness(1.07); }

select, .range-tabs button, .custom-range input, .custom-range button, .ghost {
  background: var(--surface-1); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  padding: 8px 12px; font-size: var(--fs-sm); cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
select:hover, .ghost:hover, .range-tabs button:hover { border-color: #2f3e5e; background: var(--surface-2); }
select:focus, input:focus, button:focus-visible { outline: none; border-color: var(--accent); }
select { max-width: 180px; }

.range-tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  background: var(--surface-1); border: 1px solid var(--line-soft);
  padding: 4px; border-radius: var(--radius-sm);
}
.range-tabs button { border: 1px solid transparent; background: transparent; padding: 7px 12px; }
.range-tabs button:hover { background: var(--surface-2); }
.range-tabs button.active {
  background: var(--accent); color: #04222f; font-weight: 700; border-color: var(--accent);
  box-shadow: var(--shadow-1);
}
.custom-range { display: flex; gap: var(--sp-2); align-items: center; }
.custom-sep { color: var(--faint); }
.custom-range button { background: var(--accent); color: #04222f; font-weight: 700; border-color: var(--accent); }
.ghost { background: transparent; color: var(--muted); }

/* ── Main ────────────────────────────────────────────────────── */
.main { padding: var(--sp-5) var(--sp-4) 40px; max-width: var(--maxw); margin: 0 auto; }
.range-label { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }

/* KPI: mobile 2 cột, Profit hero full-width; desktop ≥760px = 4 cột */
.kpis {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--sp-5);
}
.kpi.profit { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
}

.kpi {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: var(--sp-1);
  min-width: 0;
}
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.kpi-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.kpi-val { font-size: clamp(20px, 5.5vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.kpi-sub { font-size: var(--fs-xs); color: var(--faint); margin-top: 2px; }

/* Delta ▲▼ */
.kpi-delta {
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px; line-height: 1.4;
  border: 1px solid transparent;
}
.kpi-delta.up   { color: var(--green); background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.25); }
.kpi-delta.down { color: var(--red);   background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.25); }
.kpi-delta.flat { color: var(--faint); background: rgba(148,163,184,.10); }
.kpi-delta:empty { display: none; }

/* Profit hero */
.kpi.profit {
  border-color: rgba(52,211,153,.45);
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(52,211,153,.10), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-2);
}
.kpi.profit .kpi-label { font-size: var(--fs-md); color: var(--text); font-weight: 600; }
.kpi.profit .kpi-val { color: var(--green); font-size: clamp(32px, 9vw, 44px); }
.kpi.profit.neg { border-color: rgba(248,113,113,.45); }
.kpi.profit.neg .kpi-val { color: var(--red); }
.kpi.profit.neg {
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(248,113,113,.10), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

/* ── Cards & charts ──────────────────────────────────────────── */
.charts { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-bottom: var(--sp-5); }
@media (min-width: 860px) { .charts { grid-template-columns: 3fr 2fr; } }

.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-1);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.card h2 { margin: 0; font-size: var(--fs-md); }

.chart-box { position: relative; height: 300px; }
.chart-box--donut { height: 300px; }
@media (max-width: 560px) { .chart-box, .chart-box--donut { height: 260px; } }
canvas { width: 100% !important; }

/* ── Bảng store ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--sp-4) * -1) calc(var(--sp-5) * -1); padding: 0 var(--sp-4) var(--sp-5); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
th {
  color: var(--muted); font-weight: 600; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .5px;
  position: sticky; top: 0;
}
th:first-child, td:first-child { text-align: left; }
td:first-child { font-weight: 600; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(56,189,248,.06); }
tbody tr:last-child td { border-bottom: 0; }
td.profit-cell { font-weight: 700; }
td.pos { color: var(--green); }
td.neg { color: var(--red); }

/* ── Footer ──────────────────────────────────────────────────── */
.foot {
  margin-top: var(--sp-5); font-size: var(--fs-sm); text-align: center;
  line-height: 1.7;
}
.foot strong { color: var(--muted); font-weight: 600; }
.foot-dot { margin: 0 6px; color: var(--faint); }

/* ── Responsive nhỏ ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .topbar-sub { gap: var(--sp-2); }
  .range-tabs { width: 100%; justify-content: space-between; }
  .range-tabs button { flex: 1 1 auto; text-align: center; padding: 7px 6px; }
  .custom-range { width: 100%; }
  .custom-range input { flex: 1 1 0; min-width: 0; }
  .brand-name { font-size: var(--fs-md); }
  .select-wrap, select { flex: 1 1 auto; }
}

/* Hiệu ứng nạp lại nhẹ khi đổi bộ lọc */
.main.is-loading { opacity: .55; transition: opacity .15s ease; }