/* ============================================================================
   PawCare Admin — professional dashboard theme. Self-contained, no build step.
   ========================================================================== */
:root {
  --bg: #f4f5f9;
  --surface: #ffffff;
  --surface-2: #f9fafc;
  --border: #e7e9f0;
  --text: #1a1d29;
  --text-2: #5b6172;
  --muted: #8b90a3;
  --primary: #ff5f86;
  --primary-2: #ff8fb0;
  --primary-dark: #e63e6d;
  --accent: #7c6cf5;
  --sidebar: #171a26;
  --sidebar-2: #232735;
  --sidebar-text: #b6bacb;
  --green: #17b26a;
  --amber: #f5a524;
  --red: #ef4444;
  --blue: #3b82f6;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(16,20,40,.06);
  --shadow: 0 6px 22px rgba(16,20,40,.08);
  --shadow-lg: 0 18px 50px rgba(16,20,40,.18);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cfd3e0; border-radius: 8px; }

/* ── Màn chờ khôi phục phiên ───────────────────────────────────────────── */
#boot {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,95,134,.18), transparent),
              radial-gradient(1000px 600px at 100% 110%, rgba(124,108,245,.16), transparent),
              var(--bg);
}
#boot.gone { opacity: 0; pointer-events: none; transition: opacity .18s; }
.boot-card { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.boot-card .login-logo { width: 56px; height: 56px; border-radius: 17px; font-size: 27px; }

/* ── Login ─────────────────────────────────────────────────────────────── */
#login {
  min-height: 100vh;
  /* Ẩn cho tới khi boot() xác định là KHÔNG có phiên nào — mọi nhánh cần hiện
     form đều tự đặt display:grid bằng inline style (boot + logout). */
  display: none;
  place-items: center;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,95,134,.18), transparent),
              radial-gradient(1000px 600px at 100% 110%, rgba(124,108,245,.16), transparent),
              var(--bg);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 34px 30px;
}
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.login-logo {
  width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(135deg, var(--primary-2), var(--primary-dark));
  display: grid; place-items: center; color: #fff; font-size: 22px;
  box-shadow: 0 8px 20px rgba(255,95,134,.4);
}
.login-brand h1 { font-size: 20px; margin: 0; font-weight: 800; }
.login-brand p { margin: 0; color: var(--muted); font-size: 12.5px; }
.login-card h2 { font-size: 17px; margin: 22px 0 4px; }
.login-card .sub { color: var(--text-2); margin: 0 0 20px; font-size: 13px; }

/* ── Form controls ─────────────────────────────────────────────────────── */
label.field { display: block; margin-bottom: 14px; }
label.field span { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 11px 13px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
  color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,95,134,.14); }
textarea { resize: vertical; min-height: 78px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 700; font-size: 13.5px; background: var(--surface-2); color: var(--text);
  transition: transform .06s, background .15s, box-shadow .15s;
}
.btn:hover { background: #eef0f6; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 8px 18px rgba(255,95,134,.3); }
.btn.primary:hover { filter: brightness(1.04); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.danger { background: #fff; color: var(--red); border-color: #f6caca; }
.btn.danger:hover { background: #fef2f2; }
.btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.err { color: var(--red); font-size: 12.5px; min-height: 16px; margin-top: 4px; }

/* ── App layout ────────────────────────────────────────────────────────── */
#app { display: none; min-height: 100vh; }
#app.on { display: grid; grid-template-columns: 236px 1fr; }

.sidebar {
  background: var(--sidebar); color: var(--sidebar-text);
  min-height: 100vh; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 16px 12px;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
.sb-logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-2), var(--primary-dark)); display: grid; place-items: center; color: #fff; font-size: 17px; }
.sb-brand b { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .2px; }
.sb-brand small { display: block; color: #6b7089; font-size: 10.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
/* Menu cuộn được nhưng KHÔNG hiện thanh cuộn xám của hệ thống — nó cắt ngang
   nền tối và trông rất thô. Thay bằng một vệt mảnh chỉ hiện khi rê chuột vào
   thanh bên, đủ để biết còn mục ở dưới mà không làm bẩn giao diện. */
.nav {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;   /* cuộn hết menu thì dừng, không kéo theo trang */
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s;
}
.nav::-webkit-scrollbar { width: 6px; }        /* Safari / Chrome */
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.sidebar:hover .nav { scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.sidebar:hover .nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
.sidebar:hover .nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); }
.nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5b6079; padding: 14px 10px 6px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px;
  font-weight: 600; font-size: 13.5px; color: var(--sidebar-text); transition: background .12s, color .12s;
}
.nav a .ic { width: 18px; height: 18px; opacity: .85; flex: 0 0 18px; }
.nav a:hover { background: var(--sidebar-2); color: #fff; }
.nav a.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 6px 16px rgba(255,95,134,.34); }
.nav a.active .ic { opacity: 1; }
.nav a .badge { margin-left: auto; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 20px; }
.nav a.active .badge { background: rgba(255,255,255,.28); }
.sb-foot { border-top: 1px solid #2a2e40; padding-top: 12px; margin-top: 8px; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.sb-user .av { width: 32px; height: 32px; border-radius: 50%; background: var(--sidebar-2); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.sb-user .nm { font-size: 12.5px; color: #fff; font-weight: 600; line-height: 1.2; }
.sb-user .rl { font-size: 10.5px; color: #6b7089; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 16px 26px;
  background: rgba(255,255,255,.8); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 19px; margin: 0; font-weight: 800; }
.topbar .crumb { color: var(--muted); font-size: 12.5px; }
.topbar .spacer { flex: 1; }
.content { padding: 24px 26px 60px; }

/* ── Cards / KPI ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.kpi .top { display: flex; align-items: center; justify-content: space-between; }
.kpi .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; }
.kpi .lbl { color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.kpi .val { font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
.kpi .sub { font-size: 12px; color: var(--muted); }
.kpi .sub b { color: var(--green); }

.panel { padding: 18px 20px; }
.panel h3 { margin: 0 0 2px; font-size: 15px; font-weight: 800; }
.panel .desc { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.section-head .count { color: var(--muted); font-size: 13px; font-weight: 600; }
.section-head .spacer { flex: 1; }

/* ── Toolbar (search + filters) ────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.search { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.search input { padding-left: 34px; }
.search .mag { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; flex-wrap: wrap; }
.tabs button { padding: 6px 12px; border: none; background: transparent; border-radius: 8px; font-weight: 600; font-size: 12.5px; color: var(--text-2); }
.tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
select.filter { width: auto; padding: 8px 30px 8px 12px; font-size: 13px; }

/* ── Table ─────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13.5px; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td .actions { display: flex; gap: 6px; justify-content: flex-end; }
.cellmain { display: flex; align-items: center; gap: 10px; }
.av-sm { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; background: #eef0f6; display: grid; place-items: center; color: var(--muted); font-weight: 800; flex: 0 0 34px; }
.av-round { border-radius: 50%; }
.tt { font-weight: 700; }
.st { color: var(--muted); font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #eef0f6; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge2 { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; background: #eef0f6; color: var(--text-2); white-space: nowrap; }
.badge2.green { background: #e7f8ef; color: #087a43; }
.badge2.amber { background: #fef4e2; color: #a35a04; }
.badge2.red { background: #fdeaea; color: #c22; }
.badge2.blue { background: #e8f0fe; color: #1c4fb3; }
.badge2.violet { background: #efeafe; color: #5a3fce; }
.badge2.gray { background: #eef0f6; color: #5b6172; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 14px; color: var(--text-2); font-size: 13px; }
.pager .btn { padding: 6px 12px; }

/* ── Charts ────────────────────────────────────────────────────────────── */
.chartcard { padding: 18px 20px; }
.chart svg { width: 100%; height: 190px; display: block; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(16,20,40,.5); backdrop-filter: blur(3px); display: none; place-items: center; z-index: 100; padding: 24px; }
.overlay.on { display: grid; }
.modal { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; }
.modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 12px; position: sticky; top: 0; background: var(--surface); }
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 800; flex: 1; }
.modal-head .x { width: 32px; height: 32px; border-radius: 9px; border: none; background: var(--surface-2); color: var(--text-2); font-size: 17px; display: grid; place-items: center; }
.modal-body { padding: 4px 22px 22px; }
.modal-foot { padding: 14px 22px 20px; display: flex; gap: 10px; justify-content: flex-end; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 13px; padding: 4px 0; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.minicard { border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #eef0f6; }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px,1fr)); gap: 10px; margin: 6px 0 16px; }
.statrow .s { background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; text-align: center; }
.statrow .s b { display: block; font-size: 20px; font-weight: 800; }
.statrow .s span { font-size: 11.5px; color: var(--muted); }

/* ── Empty / loading / toast ───────────────────────────────────────────── */
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 8px; opacity: .5; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--muted); }
.spin { width: 20px; height: 20px; border: 2.5px solid #e2e5ef; border-top-color: var(--primary); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast { background: var(--sidebar); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 600; display: flex; gap: 9px; align-items: center; animation: tin .2s ease; max-width: 340px; }
.toast.ok { background: #0f7a44; }
.toast.err { background: #b4232a; }
@keyframes tin { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 860px) {
  #app.on { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; width: 236px; transform: translateX(-110%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  /* Nền mờ khi mở menu: vừa cho biết phần dưới đang bị che, vừa là vùng bấm
     để đóng lại (trước đó phải bấm đúng một mục mới thoát được). */
  .sidebar.open::after {
    content: ''; position: fixed; inset: 0 0 0 236px;
    background: rgba(16, 20, 40, .45); animation: fadeIn .2s;
  }
  .menu-toggle { display: inline-grid !important; }
}
.menu-toggle { display: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); place-items: center; }

/* ── User-detail hub (redesigned) ──────────────────────────────────────── */
.uhero { display: flex; gap: 16px; align-items: center; position: relative; overflow: hidden; padding: 26px 26px 22px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 20px 20px 0 0; color: #fff; }
.uhero.banned { background: linear-gradient(135deg, #9aa0b3, #5b6172); }
.uhero::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); top: -150px; right: -40px; pointer-events: none; }
.uhero::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,.12), transparent 70%); bottom: -130px; left: 30px; pointer-events: none; }
.uhero > * { position: relative; z-index: 1; }
.uhero .av { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 25px; font-weight: 800; color: #fff; background: rgba(255,255,255,.2); box-shadow: 0 0 0 4px rgba(255,255,255,.3), 0 12px 28px rgba(0,0,0,.22); }
.uhero .uid { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.uhero h3 { color: #fff; font-size: 22px; letter-spacing: -.3px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; flex: none; }
.uhero .usub { font-size: 13px; color: rgba(255,255,255,.9); display: flex; flex-wrap: wrap; gap: 5px 16px; align-items: center; }
.uhero .usub .it { display: inline-flex; align-items: center; gap: 6px; }
.uhero .usub svg { opacity: .8; flex: 0 0 auto; }
.uhero .badge2 { background: rgba(255,255,255,.24); color: #fff; }
.banbar { margin: 0; padding: 10px 22px; background: #fdeaea; color: #c22; font-size: 12.5px; font-weight: 700; }
.uhub-bar { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 0 0; margin: 0 0 14px; }
.uhub-bar .statrow { margin: 0 0 12px; }
.statrow .s.warn b { color: var(--amber); }
.statrow .s.risk b { color: var(--red); }
.tabs button .cbadge { margin-left: 6px; background: var(--surface-2); color: var(--text-2); border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 700; line-height: 16px; display: inline-block; }
.tabs button.on .cbadge { background: rgba(255,255,255,.28); color: #fff; }
.tabs button .cbadge.zero { opacity: .5; }
.tabs button .cbadge .dot { color: var(--red); font-weight: 900; margin-left: 2px; font-style: normal; }
.pane[hidden] { display: none; }
.udetail-sec-title { font-weight: 700; font-size: 13px; color: var(--text-2); margin: 16px 0 8px; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pet-card { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; cursor: pointer; background: var(--surface); transition: transform .15s, border-color .15s, box-shadow .15s; }
.pet-card:hover, .pet-card:focus-visible { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.07); outline: none; }
.pet-card .col, .minicard .col { min-width: 0; }
.mtile { position: relative; cursor: pointer; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--surface-2); }
.mtile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s, opacity .2s, filter .2s; }
.mtile:hover img { transform: scale(1.05); }
.mtile.hid img { opacity: .45; filter: grayscale(.6); }
.mtile.hid:hover img { opacity: 1; filter: none; }
.mtile .ov { position: absolute; top: 6px; left: 6px; z-index: 1; }
@media (max-width: 760px) {
  .uhero { flex-wrap: wrap; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs button { white-space: nowrap; }
  .pet-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Full-page user-detail screen (a real page, not a modal) */
.udbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.udcard { overflow: hidden; }
.udcard .uhero { border-radius: 0; }
.udbody { padding: 6px 20px 22px; }
.udbody .uhub-bar { position: static; margin-bottom: 14px; }
/* KPI tiles with icon chips */
.uhub-bar .statrow { gap: 12px; }
.uhub-bar .statrow .s { display: flex; align-items: center; gap: 11px; text-align: left; padding: 13px 15px; }
.uhub-bar .statrow .s .kic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 36px; }
.uhub-bar .statrow .s .kt b { display: block; font-size: 21px; font-weight: 800; line-height: 1.05; letter-spacing: -.3px; }
.uhub-bar .statrow .s .kt span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
/* Quick-action row */
.udact { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.udact .btn { gap: 6px; }
/* Skeleton shimmer — perceived-instant loading */
.skel { display: grid; gap: 10px; padding: 4px 0; }
.skel .row { height: 52px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-2) 25%, #eaecf4 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.25s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
/* Tab-pane fade-in */
.udbody .pane:not([hidden]) { animation: fadeUp .22s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Tags (admin labels) */
.tagbox { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; min-height: 26px; }
.tagchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; background: #efeafe; color: #5a3fce; }
.tagchip.ro { padding: 3px 10px; }
.tagchip button { border: none; background: rgba(90,63,206,.16); color: inherit; width: 17px; height: 17px; border-radius: 50%; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.tagchip button:hover { background: rgba(90,63,206,.32); }
.tagadd { display: flex; gap: 8px; }
.tagadd input { flex: 1; }
/* Internal notes */
.noteadd { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.noteadd textarea { flex: 1; resize: vertical; min-height: 42px; }
.noteadd .btn { flex: 0 0 auto; white-space: nowrap; }
.notelist { display: flex; flex-direction: column; }
.noteitem { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--border); }
.noteitem:first-child { border-top: none; }
.noteitem .col { flex: 1; min-width: 0; }
.noteitem .col > div:first-child { white-space: pre-wrap; word-break: break-word; margin-bottom: 3px; }
/* Admin action timeline (audit) */
.auditlist { display: flex; flex-direction: column; }
.auditrow { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); }
.auditrow:first-child { border-top: none; }
.auditrow .ai { flex: 0 0 30px; height: 30px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; font-size: 15px; }
.auditrow .col { flex: 1; min-width: 0; }
.auditrow .col > div:first-child { margin-bottom: 2px; }

/* ── Dashboard "Cần xử lý" row ─────────────────────────────────────────── */
/* The queue of things waiting on an admin. Deliberately at the very top: the
   counters below tell you how the business is doing, this tells you what to
   actually go and do. */
.panel.todo { padding: 16px 18px; margin-bottom: 16px; }
.panel.todo.ok h3 { color: var(--green, #17b26a); font-size: 15px; }
.todorow { display: flex; flex-wrap: wrap; gap: 10px; }
.todoitem {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: var(--bg2, #f7f7fb); border: 1px solid var(--line, #eceaf3);
  color: inherit; transition: background .15s, border-color .15s, transform .15s;
}
.todoitem:hover { background: #fff; border-color: var(--primary, #ff5f86); transform: translateY(-1px); }
.todoitem .ti { font-size: 17px; line-height: 1; }
.todoitem .tn { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.todoitem .tl { color: var(--muted, #6b7280); font-size: 13px; }

/* ── Chi phí AI: cột lượt gọi theo ngày ────────────────────────────────── */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.bars .bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bars .bar i {
  display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #8b5cf6, #a78bfa);
}

/* ── Hồ sơ KYC, hội thoại riêng, biểu đồ thanh ngang ───────────────────── */
.kycgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kycgrid figure { margin: 0; }
.kycgrid img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px;
  background: #eef0f6; border: 1px solid var(--line); display: block;
}
.kycgrid figcaption { font-size: 11.5px; color: var(--muted); margin-top: 5px; text-align: center; }
.warnbox {
  background: #fff8ec; border: 1px solid #f5d9a8; color: #8a5a12;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin: 10px 0;
}

.dmwrap { max-height: 52vh; overflow-y: auto; padding: 4px 2px; }
.dmrow { display: flex; margin-bottom: 8px; }
.dmrow.b { justify-content: flex-end; }
.dmb {
  position: relative; max-width: 74%; background: #f2f3f7; border-radius: 12px;
  padding: 8px 26px 8px 11px; font-size: 13px; line-height: 1.45;
}
.dmrow.b .dmb { background: #ffe9ef; }
.dmn { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.dmx {
  position: absolute; top: 5px; right: 6px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; opacity: 0;
  transition: opacity .12s;
}
.dmb:hover .dmx { opacity: 1; }
.dmx:hover { color: #e5484d; }

.hbars { display: flex; flex-direction: column; gap: 7px; }
.hbar { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; }
.hbar .bl { font-size: 12px; color: var(--text-2); }
.hbar .btrack { background: #f0f1f5; border-radius: 999px; height: 8px; overflow: hidden; }
.hbar .btrack i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff5f86, #ff8fab); }
.hbar .bv { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tab con trong một mục (Khoảnh khắc: Bài viết / Bình luận). Gạch chân thay vì
   viên thuốc, để không lẫn với dải bộ lọc ngay bên dưới. */
.subtabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.subtabs button {
  border: 0; background: none; padding: 0 0 10px; font-size: 14px; font-weight: 700;
  color: var(--muted); cursor: pointer; position: relative;
}
.subtabs button:hover { color: var(--text-2); }
.subtabs button.on { color: var(--text); }
.subtabs button.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--primary);
}

/* ══════════════════ ĐIỆN THOẠI ══════════════════════════════════════════
   Vấn đề gốc: mọi mục đều là bảng 5–7 cột. Trên màn 375px chúng rộng hơn
   khung 125–313px, mà thứ bị đẩy khuất lại chính là cột ĐẦU — tên người /
   tên bài — nên nhìn vào chỉ thấy con số và nút, không biết dòng đó là ai.
   Dưới 700px bảng bỏ hẳn dạng lưới, mỗi dòng thành một THẺ có nhãn riêng
   (nhãn lấy từ `data-label` mà JS gắn vào từng ô). */
/* Ngưỡng 860px = đúng chỗ thanh bên thu lại. Từ đây trở xuống bảng nhiều cột
   không còn vừa bề ngang (ở 760px vẫn thừa ~150px), nên chuyển hẳn sang thẻ. */
@media (max-width: 860px) {
  .tablewrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td { display: block; width: auto; }
  .tablewrap thead { display: none; }
  .tablewrap tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 4px 14px 10px; margin-bottom: 10px;
  }
  .tablewrap tbody tr:hover { background: var(--surface); }
  .tablewrap td {
    border-bottom: 1px solid var(--border); padding: 9px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    text-align: left !important;   /* ghi đè style="text-align:right" gắn thẳng vào ô */
  }
  .tablewrap td:last-child, .tablewrap td:only-child { border-bottom: 0; }
  .tablewrap td::before {
    content: attr(data-label); flex: 0 0 auto; font-size: 11.5px; font-weight: 700;
    letter-spacing: .3px; text-transform: uppercase; color: var(--muted);
  }
  /* Ô đầu là danh tính (ai / bài nào) → làm TIÊU ĐỀ của thẻ: trọn bề ngang,
     bỏ nhãn, chữ to hơn. Ép nó thành một hàng nhãn–giá trị như các ô khác thì
     tên bị dồn sang phải và xuống dòng lem nhem. Ô không có tiêu đề cột (dải
     nút thao tác) cũng chiếm trọn bề ngang. */
  .tablewrap td:first-child,
  .tablewrap td[data-label=""] { display: block; }
  .tablewrap td:first-child::before,
  .tablewrap td[data-label=""]::before { content: none; }
  .tablewrap td[data-label=""] .actions { justify-content: flex-start; flex-wrap: wrap; }
  .tablewrap td:first-child { padding-top: 12px; }
  .tablewrap td:first-child .tt { font-size: 15px; }
  .tablewrap td:first-child .st { white-space: normal; word-break: break-word; }
  .tablewrap td > div[style*="max-width"] { max-width: none !important; }
  .tablewrap .thumb { width: 54px; height: 54px; }
  .empty, .loading { background: var(--surface); border-radius: var(--radius); }
}

@media (max-width: 700px) {

  /* Thanh công cụ: ô tìm kiếm nguyên hàng, chip lọc trượt ngang được. */
  .toolbar { gap: 8px; }
  .toolbar .search { flex: 1 1 100%; }
  .toolbar .tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .toolbar .tabs::-webkit-scrollbar { display: none; }
  .toolbar .tabs button { white-space: nowrap; }
  .toolbar .spacer { display: none; }
  .toolbar .count { font-size: 12.5px; color: var(--muted); }

  .topbar { padding: 12px 16px; gap: 10px; }
  .topbar h1 { font-size: 17px; }
  .topbar .crumb { display: none; }
  #content { padding: 16px !important; }
  .kpis { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .grid[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
  .pager { justify-content: space-between; }
  .statrow { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
  /* Dải KPI ở màn chi tiết là kiểu biểu-tượng-cạnh-chữ, 3 cột trên 375px thì
     nhãn vỡ đôi ("Thú / cưng") — cho 2 cột để chữ nằm trọn một dòng. */
  .uhub-bar .statrow { grid-template-columns: repeat(2, 1fr); }
  .uhub-bar .statrow .s span { white-space: nowrap; }
  .subtabs { gap: 18px; }

  /* Modal ăn gần trọn màn, nút thao tác xếp dọc cho dễ bấm. */
  #overlay { padding: 0; align-items: flex-end; }
  .modal, .modal.wide { max-width: 100%; border-radius: 18px 18px 0 0; max-height: 94vh; }
  .modal-head { padding: 16px 18px 10px; }
  .modal-body { padding: 0 18px 16px; }
  .modal-foot { padding: 12px 18px 18px; flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal-foot .spacer { display: none; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { color: var(--muted); font-size: 11.5px; }
  .kv dd { margin: 0 0 10px; }
  .kycgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .dmb { max-width: 88%; }
  .hbar { grid-template-columns: 68px 1fr; row-gap: 2px; }
  .hbar .bv { grid-column: 2; font-size: 11.5px; }

  /* Màn chi tiết người dùng */
  .uhero { padding: 18px 16px; gap: 12px; }
  .uhero .av { width: 56px; height: 56px; flex-basis: 56px; font-size: 20px; }
  .uhero h2, .uhero .nm { font-size: 18px; }
  .udbody { padding: 6px 14px 18px; }
  .udbar { gap: 6px; }
  .udbar .btn { font-size: 12.5px; }
}

/* Máy rất nhỏ (≤380px): bỏ nốt những thứ chỉ để trang trí. */
@media (max-width: 380px) {
  .topbar .btn span.lbl { display: none; }
  .tablewrap tr { padding: 4px 12px 8px; }
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }