/* ─── DESIGN TOKENS — Dashboard Pro (Vercel-inspired) + 🐱 ─── */
:root {
  /* Surfaces */
  --bg:           #FAFAFA;
  --bg-elev:      #FFFFFF;
  --bg-grouped:   #FFFFFF;
  --bg-subtle:    #F4F4F5;

  /* Text (đã chỉnh đạt WCAG AA — xem DESIGN.md) */
  --text:           #16181f;
  --text-secondary: #52525B;
  --text-tertiary:  #686C7A;

  /* Border / divider */
  --separator: #EAEAEA;
  --border:    #E4E4E7;

  /* Brand */
  --primary:        #0070F3;     /* Vercel blue */
  --primary-hover:  #0058CC;
  --primary-soft:   rgba(0, 112, 243, 0.10);
  --primary-light:  #66ADFF;

  /* Semantic */
  --success: #0CCE6B;
  --warning: #F5A623;
  --danger:  #EE0000;
  --info:    #0070F3;
  --accent-gold: #C9A84C;
  --accent-pink: #F2C4DE;

  /* Geometry */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Elevations — sharper, Vercel-style */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --ring-focus: 0 0 0 3px rgba(0, 112, 243, 0.20);

  --header-h: 56px;
  --tabbar-h: 64px;

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --bg-gradient: linear-gradient(180deg, #FAFAFA 0%, #F4F4F5 100%);
}

/* ═══ THEME ĐEN KÍNH (chọn trong Cài đặt) ═══ */
html[data-theme="dark"] {
    --bg:           #000000;
    --bg-elev:      #0A0A0A;
    --bg-grouped:   #0A0A0A;
    --bg-subtle:    #111113;

    --text:           #FFFFFF;
    --text-secondary: #C2C3CE;
    --text-tertiary:  #A7A8B6;

    --separator: #1F1F23;
    --border:    #27272A;

    --primary:       #3291FF;
    --primary-hover: #66ADFF;
    --primary-soft:  rgba(50, 145, 255, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60);

    /* Gradient DỊU tối — êm mắt */
    --bg-gradient: linear-gradient(165deg,
      #14111a 0%, #221823 14%, #3a2329 30%, #533230 44%,
      #523442 58%, #41354e 72%, #34395a 86%, #2b3a54 100%);
}

/* ═══ THEME TRẮNG KÍNH (mặc định) — nền pastel sáng nhẹ ═══ */
html[data-theme="light"] {
    --bg-gradient: linear-gradient(160deg,
      #f5f6fc 0%, #eef0fa 38%, #f5eef8 68%, #ecf2fd 100%);
}

/* ─── RESET ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  height: 100%;
  background: var(--bg-gradient) no-repeat;
  background-attachment: fixed;
  background-color: var(--bg);
}
body {
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', sans-serif;
  background: transparent;
  color: var(--text);
  overscroll-behavior-y: none;
  letter-spacing: -0.011em;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── LAYOUT ─── */
.safe-top    { height: var(--safe-top); background: var(--bg-elev); }
.safe-bottom { height: var(--safe-bottom); background: var(--bg-elev); }

.app-header {
  position: sticky; top: var(--safe-top); z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  border-bottom: 1px solid var(--separator);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* Brand block (mèo + tên app) */
.brand {
  display: flex; align-items: center; gap: 8px;
  padding: 0 6px;
  color: var(--text);
  font-weight: 700; font-size: 15px;
  letter-spacing: -0.02em;
}
.brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg-elev);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-name { letter-spacing: -0.02em; }
.brand-name b { font-weight: 800; }

.icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--bg-subtle); color: var(--text); }
.icon-btn:active { background: var(--border); }

.product-pill {
  flex: 1;
  height: 36px;
  padding: 0 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 600; font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.product-pill:hover { border-color: var(--text-tertiary); }
.product-pill:active { opacity: 0.7; }

.app-main {
  min-height: calc(100vh - var(--header-h) - var(--tabbar-h) - var(--safe-top) - var(--safe-bottom));
  padding-bottom: 24px;
}

/* ─── LOADING with 🐱 (CSS animation, no asset) ─── */
.loading {
  padding: 60px 24px 40px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}
.loading::before {
  content: '';
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%230070F3'><path d='M12 16 L18 6 L24 18 Z M52 16 L46 6 L40 18 Z'/><ellipse cx='32' cy='34' rx='22' ry='18'/></g><circle cx='24' cy='32' r='2.6' fill='white'/><circle cx='40' cy='32' r='2.6' fill='white'/><path d='M30 38 L34 38 L32 41 Z' fill='white'/><path d='M28 42 Q32 46 36 42' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  animation: cat-bob 1.2s ease-in-out infinite;
}
@keyframes cat-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

/* ─── BOTTOM TAB BAR ─── */
.tab-bar {
  position: sticky; bottom: var(--safe-bottom); z-index: 50;
  height: var(--tabbar-h);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  border-top: 1px solid var(--separator);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  color: var(--text-tertiary);
  font-size: 10px; font-weight: 500;
  padding-top: 6px;
  transition: color 0.15s;
}
.tab.active { color: var(--primary); }
.tab svg { stroke: currentColor; }
.tab span { letter-spacing: -0.01em; }

/* ─── COMMON VIEW BLOCKS ─── */
.view { padding: 16px; }
.view h1 {
  font-size: 30px; font-weight: 800; letter-spacing: -0.03em;
  margin: 8px 0 6px;
  line-height: 1.15;
}
.view h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  margin: 24px 0 8px;
}
.section-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 24px 0 8px;
  letter-spacing: 0.06em;
}

/* Card lists (grouped row style) */
.list {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0 0 16px;
  overflow: hidden;
}
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  min-height: 56px;
  border-bottom: 1px solid var(--separator);
  font-size: 15px;
  transition: background 0.12s;
}
.row:last-child { border-bottom: none; }
.row:hover  { background: var(--bg-subtle); }
.row:active { background: var(--border); }
.row-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 16px;
}
.row-body { flex: 1; min-width: 0; }
.row-title { font-weight: 600; letter-spacing: -0.01em; }
.row-sub   { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }
.row-chevron {
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--text-tertiary);
  border-bottom: 1.6px solid var(--text-tertiary);
  transform: rotate(-45deg);
  flex-shrink: 0;
}

/* Cards — Vercel-style: border + subtle shadow */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 0 0 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.card:hover { border-color: var(--text-tertiary); box-shadow: var(--shadow-md); }
.card-title { font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.card-value { font-size: 28px; font-weight: 800; margin-top: 6px; letter-spacing: -0.03em; line-height: 1.1; }
.card-sub   { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:active { transform: scale(0.98); opacity: 0.92; }
.btn-primary {
  background: var(--text); color: var(--bg-elev); width: 100%;
}
.btn-primary:hover { background: var(--text-secondary); }
.btn-secondary {
  background: var(--bg-elev); color: var(--text);
  border-color: var(--border); width: 100%;
}
.btn-secondary:hover { border-color: var(--text-tertiary); background: var(--bg-subtle); }
.btn-danger { background: var(--danger); color: white; width: 100%; }
.btn-accent { background: var(--primary); color: white; width: 100%; }
.btn-accent:hover { background: var(--primary-hover); }

/* Badges */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.badge-success { background: rgba(12, 206, 107, 0.12);  color: var(--success); border-color: rgba(12, 206, 107, 0.25); }
.badge-warning { background: rgba(245, 166, 35, 0.12);  color: var(--warning); border-color: rgba(245, 166, 35, 0.30); }
.badge-danger  { background: rgba(238, 0, 0, 0.10);     color: var(--danger);  border-color: rgba(238, 0, 0, 0.25); }
.badge-info    { background: var(--primary-soft);       color: var(--primary); border-color: rgba(0, 112, 243, 0.25); }
.badge-neutral { background: var(--bg-subtle);          color: var(--text-secondary); border-color: var(--border); }

/* Stage card grid (Pipeline view) */
.stage-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 10px;
}
.stage-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex; gap: 14px; align-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.stage-card:hover  { border-color: var(--text-tertiary); box-shadow: var(--shadow-md); }
.stage-card:active { transform: scale(0.985); }
.stage-num {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.stage-body { flex: 1; min-width: 0; }
.stage-name { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.stage-desc { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }

/* Colors for 7 stages — pro vivid gradients */
.stage-1 { background: linear-gradient(135deg, #FF9500, #FF6B00); }
.stage-2 { background: linear-gradient(135deg, #5E5CE6, #5856D6); }
.stage-3 { background: linear-gradient(135deg, #FF2D55, #FF375F); }
.stage-4 { background: linear-gradient(135deg, #0CCE6B, #02B45A); }
.stage-5 { background: linear-gradient(135deg, #0070F3, #0051D5); }
.stage-6 { background: linear-gradient(135deg, #AF52DE, #8E44AD); }
.stage-7 { background: linear-gradient(135deg, #FFD60A, #C9A84C); color: #4A0820; }

/* Empty state — 🐱 ngủ */
.empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-tertiary);
}
.empty-icon {
  font-size: 0;
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 64'><g fill='%23A1A1AA'><path d='M14 28 L20 18 L26 30 Z M58 28 L52 18 L46 30 Z'/><ellipse cx='36' cy='44' rx='26' ry='16'/></g><path d='M28 42 Q30 44 32 42 M44 42 Q46 44 48 42' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round'/><path d='M36 48 Q38 50 40 48' stroke='white' stroke-width='1.4' fill='none' stroke-linecap='round'/><text x='60' y='20' font-family='-apple-system,sans-serif' font-size='12' font-weight='700' fill='%23A1A1AA'>z</text><text x='66' y='14' font-family='-apple-system,sans-serif' font-size='9' font-weight='700' fill='%23A1A1AA' opacity='0.7'>z</text></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.85;
}
.empty-title { font-weight: 600; font-size: 15px; color: var(--text-secondary); margin-bottom: 4px; letter-spacing: -0.01em; }
.empty-desc  { font-size: 13px; line-height: 1.5; }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: 0.06em; margin: 0 4px 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--text-tertiary); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring-focus);
}
.form-textarea { min-height: 100px; resize: vertical; }

/* Pretty scrollbar (desktop) */
@media (hover: hover) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
}

/* ═══════════════════════════════════════════════════════════
   GLASS — thẻ / nút / popup / form kính mờ. 2 theme:
   • ĐEN KÍNH  : kính tối, chữ trắng
   • TRẮNG KÍNH: kính trắng, chữ tối
   ═══════════════════════════════════════════════════════════ */
/* ── ĐEN KÍNH ── */
html[data-theme="dark"] :is(.card, .list, .stage-card, .empty, .btn-secondary, .badge-neutral,
  .picker-card, .target-field, [class*="-sheet"], [class*="-modal"], [class*="-field"],
  [class*="-card"], [class*="-select"], [class*="-dropdown"], [class*="-picker"], [class*="-box"]) {
  background: rgba(27, 25, 38, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.10);
  --text: #ffffff; --text-secondary: #cdced9; --text-tertiary: #9b9caa;
  --bg-elev: rgba(255,255,255,0.06); --bg-grouped: rgba(255,255,255,0.06);
  --bg-subtle: rgba(255,255,255,0.09);
  --separator: rgba(255,255,255,0.08); --border: rgba(255,255,255,0.12);
  color: #fff;
}
html[data-theme="dark"] :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.16);
  color: #fff !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html[data-theme="dark"] :is(input,textarea)::placeholder { color: rgba(255,255,255,0.45); }
html[data-theme="dark"] .btn-primary { background: #ffffff; color: #16131d; }
html[data-theme="dark"] :is([class*="-sheet"], [class*="-modal"], .hm-sheet, .pr-modal, .cs-sheet, .bs-sheet, .srcad-sheet) {
  background: #1b1926 !important; -webkit-backdrop-filter: none; backdrop-filter: none; max-height: 94vh !important;
}
html[data-theme="dark"] [class*="-overlay"] { background: rgba(0,0,0,0.62) !important; }

/* ── TRẮNG KÍNH ── */
html[data-theme="light"] :is(.card, .list, .stage-card, .empty, .btn-secondary, .badge-neutral,
  .picker-card, .target-field, [class*="-sheet"], [class*="-modal"], [class*="-field"],
  [class*="-card"], [class*="-select"], [class*="-dropdown"], [class*="-picker"], [class*="-box"]) {
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(22, 27, 60, 0.08);
  box-shadow: 0 2px 10px rgba(30, 35, 70, 0.05);
  --text: #1a1c26; --text-secondary: #5a5d6d; --text-tertiary: #686c7a;
  --bg-elev: rgba(255,255,255,0.55); --bg-grouped: rgba(255,255,255,0.55);
  --bg-subtle: rgba(22,30,80,0.04);
  --separator: rgba(22,27,60,0.07); --border: rgba(22,27,60,0.10);
  color: #1a1c26;
}
html[data-theme="light"] :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  background: rgba(255,255,255,0.85) !important; border: 1px solid rgba(22,27,60,0.12);
  color: #1a1c26 !important;
}
html[data-theme="light"] :is(input,textarea)::placeholder { color: rgba(22,27,60,0.40); }
html[data-theme="light"] .btn-primary { background: #16131d; color: #fff; }
html[data-theme="light"] :is([class*="-sheet"], [class*="-modal"], .hm-sheet, .pr-modal, .cs-sheet, .bs-sheet, .srcad-sheet) {
  background: #ffffff !important; -webkit-backdrop-filter: none; backdrop-filter: none; max-height: 94vh !important;
}
html[data-theme="light"] [class*="-overlay"] { background: rgba(22,27,60,0.32) !important; }

/* ═══ Segmented controls — LÀM PHẲNG (bỏ track, nút dạng pill viền) ═══ */
.seg, .sch-seg, .sg-tabs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 8px !important;
}
.seg-btn, .sg-tab {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.seg-btn.active, .sg-tab.on {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ═══ Hết "2 nền": lớp BỌC bên trong card không lấy kính (tránh chồng) ═══ */
[class*="-card-content"], [class*="-card-body"], [class*="-card-header"],
[class*="-card-inner"], [class*="-content"], [class*="-body"], .picker-card-content {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}