/* Second Brain Dashboard — giao diện sáng/tối + sidebar điều hướng cùng kiểu Zalo Bot Owner.
   Nạp SAU styles.css và sb.css. Các màu trước đây viết cứng trong styles.css/sb.css đã đổi sang biến định nghĩa ở đây. */

/* ---------- token: TỐI (mặc định, giữ nguyên bản thiết kế) ---------- */
:root, [data-theme=dark] {
  --side: var(--bg-void);
  --side-line: var(--line-soft);
  --hover: rgba(255,255,255,.05);
  --grad: linear-gradient(135deg, #FF7A18 0%, #F0383F 48%, #E8175D 100%);   /* màu chủ đạo Zalo Bot Owner */
  --grad-shadow: 0 8px 20px -8px rgba(232,23,93,.55);
  --pink: #E8175D;
  --panel: rgba(18,20,28,.8);
  --panel-solid: rgba(18,20,28,.95);
  --glass: rgba(18,20,28,.62);
  --glass-line: rgba(255,255,255,.09);
  --overlay: rgba(11,12,18,.76);
  --accent-ink: #FDBA74;
  --link: #7DD3FC;
  --ok-ink: #6EE7B7;
  --warn-ink: #FCD34D;
  --bad-ink: #FDA4AF;
  --line-hover: #323849;
  --scrim: rgba(4,5,8,.58);
  --shadow-c: rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ---------- token: SÁNG (bảng màu sáng của Zalo Bot Owner) ---------- */
[data-theme=light] {
  --bg-void: #FBFAFC;
  --bg-space: #F4F1F7;
  --surface-1: #FFFFFF;
  --surface-2: #F1EDF5;
  --line: rgba(40,20,60,.14);
  --line-soft: rgba(40,20,60,.08);
  --text-hi: #1D1626;
  --text-mid: #4A4256;
  --text-low: #6F667C;
  --accent: #EA580C;
  --accent-soft: rgba(234,88,12,.10);
  --ok: #16A34A;
  --danger: #DC2626;
  --side: #EFEBF3;
  --side-line: rgba(40,20,60,.07);
  --hover: rgba(40,20,60,.05);
  --panel: rgba(255,255,255,.86);
  --panel-solid: #FFFFFF;
  --glass: rgba(255,255,255,.78);
  --glass-line: rgba(40,20,60,.10);
  --overlay: rgba(255,255,255,.86);
  --accent-ink: #C2410C;
  --link: #0369A1;
  --ok-ink: #15803D;
  --warn-ink: #B45309;
  --bad-ink: #BE123C;
  --line-hover: rgba(40,20,60,.24);
  --scrim: rgba(29,22,38,.32);
  --shadow-c: rgba(40,20,60,.18);
  color-scheme: light;
}
html, body { transition: background-color .25s, color .25s; }

/* ---------- lưới: sidebar điều hướng chiếm cả chiều cao (như Zalo Bot Owner) ---------- */
html:root { --rail: 248px; }
html:root.nav-collapsed { --rail: 72px; }
#app { transition: grid-template-columns .25s ease; }
.rail { grid-row: 1 / -1; grid-column: 1; }
.topbar { grid-column: 2 / -1; }
.sidebar { grid-column: 2; }
.stage { grid-column: 3; }

/* ---------- sidebar điều hướng ---------- */
.rail { display: flex; flex-direction: column; min-height: 0; overflow: hidden auto; scrollbar-width: none; background: var(--side); border-right: 1px solid var(--side-line); z-index: 20; }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 18px 16px 16px; min-height: 76px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); display: grid; place-items: center; flex: none; box-shadow: 0 6px 16px -6px rgba(232,23,93,.6); }
.brand-txt { min-width: 0; }
.brand-txt b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; color: var(--text-hi); }
.brand-txt span { display: block; font-size: 11.5px; letter-spacing: .14em; font-weight: 500; color: var(--text-low); white-space: nowrap; margin-top: 1px; }
.rail .nav { padding: 6px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.rail .sp { flex: 1; min-height: 8px; }
.ritem { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; color: var(--text-mid); font-size: 13.5px; font-weight: 500; white-space: nowrap; text-align: left; text-decoration: none; transition: background .15s, color .15s; }
.ritem svg { width: 19px; height: 19px; flex: none; }
.ritem:hover { background: var(--hover); color: var(--text-hi); }
.ritem.active { background: var(--grad); color: #fff; box-shadow: var(--grad-shadow); }
.ritem.active:hover { color: #fff; }
.rbadge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.ritem.active .rbadge { background: rgba(255,255,255,.25); }
.collapse-btn { display: flex; align-items: center; gap: 10px; color: var(--text-low); font-size: 12px; height: 34px; padding: 0 12px; border-radius: 10px; margin: 6px 12px; white-space: nowrap; flex: none; }
.collapse-btn:hover { background: var(--hover); color: var(--text-hi); }
.collapse-btn svg { width: 16px; height: 16px; flex: none; }
.side-foot { padding: 0 12px 12px; flex: none; }
.author { border: 1px solid var(--side-line); background: var(--surface-1); border-radius: 14px; padding: 12px 14px; }
[data-theme=dark] .author { background: var(--surface-1); border-color: var(--line-soft); }
.author-k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-low); font-weight: 600; }
.author-n { font-weight: 700; font-size: 14px; margin: 2px 0 10px; color: var(--text-hi); }
.socials { display: flex; gap: 8px; }
.socials a { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--hover); color: var(--text-mid); transition: transform .15s, background .15s, color .15s; }
.socials a:hover { transform: translateY(-1px); color: #fff; }
.socials a.s-fb:hover { background: #1877F2; } .socials a.s-tg:hover { background: #229ED9; } .socials a.s-zl:hover { background: #0068FF; }

/* thu gọn (nút “Thu gọn” hoặc màn < 1024px) */
html.nav-collapsed .side-brand { justify-content: center; padding: 18px 0 16px; }
html.nav-collapsed .brand-txt, html.nav-collapsed .ritem .lbl, html.nav-collapsed .collapse-btn .lbl, html.nav-collapsed .author-body { display: none; }
html.nav-collapsed .ritem, html.nav-collapsed .collapse-btn { justify-content: center; padding: 0; }
html.nav-collapsed .ritem .rbadge { position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; margin: 0; }
html.nav-collapsed .author { padding: 10px 0; border: 0; background: none; }
html.nav-collapsed .socials { flex-direction: column; align-items: center; }

/* ---------- top bar ---------- */
.tb-brand { display: none; }
#themeBtn .th-light { display: none; }
[data-theme=light] #themeBtn .th-dark { display: none; }
[data-theme=light] #themeBtn .th-light { display: block; }
.tbtn .count[hidden] { display: none; }

/* ---------- đăng nhập ---------- */
.login-card .side-brand { padding: 0 0 4px; min-height: 0; }

/* ---------- màn hình vừa / nhỏ ---------- */
@media (max-width: 1023px) {
  html:root, html:root.nav-collapsed { --rail: 72px; }
  .stage { grid-column: 2; }
  /* bảng Vault trượt hẳn ra sau sidebar điều hướng (trước đây còn lòi ~40px đè lên icon) */
  .sidebar { transform: translateX(calc(-100% - var(--rail) - 12px)); }
  .collapse-btn { display: none; }
  .side-brand { justify-content: center; padding: 18px 0 16px; }
  .brand-txt, .ritem .lbl, .author-body { display: none; }
  .ritem { justify-content: center; padding: 0; }
  .ritem .rbadge { position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; margin: 0; }
  .author { padding: 10px 0; border: 0; background: none; }
  .socials { flex-direction: column; align-items: center; }
}
@media (max-width: 639px) {
  html:root, html:root.nav-collapsed { --rail: 0px; }
  .topbar { grid-column: 1 / -1; }
  .stage { grid-column: 1; }
  .tb-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .tb-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .tb-brand .brand-mark svg { width: 18px; height: 18px; }
  .tb-brand b { font-size: 12.5px; letter-spacing: .1em; font-weight: 600; white-space: nowrap; }
  /* thanh điều hướng chuyển xuống đáy màn hình */
  .rail { position: fixed; left: 0; right: 0; bottom: 0; height: 60px; flex-direction: row; overflow: auto hidden; border-right: 0; border-top: 1px solid var(--side-line); z-index: 40; }
  .rail .side-brand, .rail .side-foot, .rail .sp { display: none; }
  .rail .nav { flex-direction: row; padding: 6px 6px; gap: 2px; flex: 1 0 auto; }
  .ritem { flex: 0 0 auto; width: auto; min-width: 60px; height: 48px; flex-direction: column; justify-content: center; gap: 3px; padding: 0 6px; border-radius: 10px; }
  .ritem .lbl { display: block; font-size: 10.5px; font-weight: 500; }
  .ritem svg { width: 18px; height: 18px; }
}

/* ---------- chế độ SÁNG: các chi tiết riêng ---------- */
[data-theme=light] .stage::before { background: radial-gradient(60% 60% at 50% 48%, rgba(123,47,242,.05), transparent 70%), radial-gradient(40% 35% at 50% 52%, rgba(232,23,93,.04), transparent 70%); }
[data-theme=light] .stage::after { opacity: .02; filter: invert(1); }
[data-theme=light] .login { background: radial-gradient(60% 60% at 50% 45%, rgba(255,122,24,.10), transparent 70%), radial-gradient(40% 35% at 50% 55%, rgba(123,47,242,.07), transparent 70%), var(--bg-space); }
[data-theme=light] .page { background: radial-gradient(50% 40% at 70% 0%, rgba(232,23,93,.04), transparent 70%), var(--bg-space); }
[data-theme=light] .vaultsel .av { background: linear-gradient(135deg, #fff, #EFEBF3); }
[data-theme=light] .chip i { box-shadow: none; }
[data-theme=light] .hud { box-shadow: 0 12px 34px -12px var(--shadow-c); }
[data-theme=light] .tbtn.notify { box-shadow: 0 0 0 1px rgba(234,88,12,.10) inset; }
[data-theme=light] .ins-body .tag.pd { color: #1D4ED8; border-color: rgba(37,99,235,.35); }
[data-theme=light] .ins-body .tag.fa { color: #6D28D9; border-color: rgba(124,58,237,.35); }
[data-theme=light] .ins-body .tag.ap { color: #0E7490; border-color: rgba(8,145,178,.35); }
[data-theme=light] .nchip { background: rgba(3,105,161,.06); }
[data-theme=light] .bar .bt i { background: linear-gradient(90deg, rgba(124,58,237,.45), #7C3AED); }
[data-theme=light] .conf .bar i { background: #2563EB; }
[data-theme=light] .ingestbar .track i { background: #0284C7; }
[data-theme=light] .fsel option { background: #fff; color: var(--text-hi); }
[data-theme=light] ::selection { background: rgba(232,23,93,.18); }