/* Khung dùng chung đợt 3: thẻ người dùng, nút nổi góp ý, màn đăng nhập, màn không có quyền / lỗi, giao diện tối. */

/* ---------- Chân sidebar ---------- */
.user-card { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: var(--sidebar-2); color: #fff; margin-bottom: 8px; }
.user-card span { font-size: 12px; color: var(--sidebar-ink); }
.side-btn { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--sidebar-ink); padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.side-btn:hover { background: var(--sidebar-2); color: #fff; }
.side-version { padding: 8px 10px 0; font-size: 11px; color: #6f8478; }
.sidebar-foot { display: flex; flex-direction: column; }
.only-mobile { display: none; }
.demo-theme { color: var(--accent-ink); }

/* ---------- Nút nổi góp ý ---------- */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 45; border: 0; cursor: pointer; padding: 11px 18px; border-radius: 999px; font-weight: 700; background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.fab:hover { filter: brightness(0.96); }

/* ---------- Không có quyền / lỗi ---------- */
.state-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 18px; }
.state-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--warn-bg); color: var(--warn); font-weight: 800; }
.state-icon.is-error { background: var(--danger-bg); color: var(--danger); }

/* ---------- Đăng nhập ---------- */
body.is-logged-out .sidebar, body.is-logged-out .bottom-nav, body.is-logged-out #fab-root { display: none; }
body.is-logged-out .main { margin-left: 0; }
.login-wrap { min-height: calc(100vh - var(--bar-h) - 60px); display: grid; place-items: center; }
.login-card { width: min(420px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.login-mark { margin: 0 auto; width: 52px; height: 52px; font-size: 26px; }
.login-form { text-align: left; }
.login-accounts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

@media (max-width: 860px) {
  .fab { display: none; }
  .only-mobile { display: block; }
  .demo-theme { display: none; }
}

/* ---------- Giao diện tối ---------- */
:root[data-theme="dark"] {
  --bg: #0f1311; --bg-pattern: #19201c; --surface: #171c19; --surface-2: #1d2420;
  --ink: #eef2ee; --ink-2: #c3ccc5; --muted: #8d998f; --line: #28312c; --line-strong: #36423b;
  --good-bg: #173524; --bad-bg: #3a2216; --danger-bg: #3b1d1d; --warn-bg: #3a2e14; --info-bg: #182a4a; --violet-bg: #2a2142;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1311; --bg-pattern: #19201c; --surface: #171c19; --surface-2: #1d2420;
    --ink: #eef2ee; --ink-2: #c3ccc5; --muted: #8d998f; --line: #28312c; --line-strong: #36423b;
    --good-bg: #173524; --bad-bg: #3a2216; --danger-bg: #3b1d1d; --warn-bg: #3a2e14; --info-bg: #182a4a; --violet-bg: #2a2142;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
:root[data-theme="dark"] .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }