/* ==========================================================================
   Giao diện thử nghiệm theo phong cách Lexa – bản Teal (themesbrand.com/lexa-node)
   Nạp SAU style.css: chỉ ghi đè màu, font, bo góc, đổ bóng; không đổi bố cục nghiệp vụ.
   Đặc trưng: menu trái màu xám xanh đậm, nền xám nhạt, thẻ trắng phẳng bo 4px,
   màu chính xanh ngọc #3eb7ba, thẻ số liệu nền xanh ngọc chữ trắng, font Poppins 13px.
   ========================================================================== */
:root {
  --l-primary:#3eb7ba; --l-primary-d:#33a0a3; --l-primary-15:rgba(62,183,186,.15); --l-primary-08:rgba(62,183,186,.08);
  --l-info:#36508b; --l-success:#58db83; --l-danger:#ec536c; --l-warning:#f5b225;
  --l-body:#f5f5f5; --l-ink:#1f2431; --l-muted:#6b7280; --l-line:#e9ecef; --l-tert:#f8f9fa;
  --l-side:#2b3a4a; --l-side-ink:#8699ad; --l-side-active:#263442;
  --l-shadow:0 -3px 31px 0 rgba(0,0,0,.05), 0 6px 20px 0 rgba(0,0,0,.02);

  /* biến cũ của app -> bảng màu Lexa */
  --bg:var(--l-body); --card:#fff; --ink:var(--l-ink); --muted:var(--l-muted); --brand:var(--l-primary); --line:var(--l-line);
  --ok:#1f9d55; --ok-bg:rgba(88,219,131,.18); --warn:#a46f00; --warn-bg:rgba(245,178,37,.18);
  --bad:#d63a54; --bad-bg:rgba(236,83,108,.14);
  --s0:#e3f1f1; --s1:#bfe6e7; --s2:#8fd3d5; --s3:#3eb7ba; --s4:#2b8f92; --s5:#1d6466;
  --side-w:240px; --side-bg:var(--l-side); --side-ink:var(--l-side-ink); --rail-w:70px;
}

body { font-family:'Poppins', system-ui, "Segoe UI", Roboto, sans-serif; background:var(--l-body); color:var(--l-ink); font-size:13.5px; }
h1, h2, h3 { color:var(--l-ink); font-weight:500; letter-spacing:0; }
h1 { font-size:18px; text-transform:none; } h2 { font-size:16px; }
a { color:var(--l-primary); }

/* ---------- Thẻ (card) ---------- */
.card, .tile, .stepper .step, details.axis, .totals > div {
  border:0; border-radius:4px; box-shadow:var(--l-shadow); }
.card { padding:20px; margin-bottom:24px; }
.card.inner { background:var(--l-tert); box-shadow:none; border:1px solid var(--l-line); }
.card.flush { border-radius:4px; }
.dash-grid, .grid, .tiles { gap:24px; }
.item { border:1px solid var(--l-line); border-left:3px solid var(--l-primary); border-radius:4px; background:#fff; }

/* Thẻ số liệu: nền xanh ngọc, chữ trắng như "mini-stat" của Lexa */
.tile { background:var(--l-primary); color:#fff; padding:20px; gap:8px; position:relative; overflow:hidden; }
.tile::after { content:""; position:absolute; right:-40px; bottom:-60px; width:180px; height:160px; border-radius:50%;
  background:rgba(255,255,255,.07); pointer-events:none; }
.tile-label { color:rgba(255,255,255,.95); font-weight:600; text-transform:uppercase; font-size:12.5px; letter-spacing:.03em; }
.tile-value { color:#fff; font-weight:500; }
.tile-value small, .tile-sub { color:rgba(255,255,255,.85); }
.tile a { color:#fff; }
.tile .badge, .tile .chip { background:rgba(255,255,255,.2); color:#fff; }
.link-tile:hover { background:var(--l-primary-d); box-shadow:0 8px 22px rgba(62,183,186,.35); }
.link-tile.attn { background:var(--l-warning); }
.link-tile.attn:hover { background:#e0a114; }

/* ---------- Nút, ô nhập ---------- */
button, .btn { border-radius:4px; padding:8px 16px; font-weight:400; font-size:13.5px; background:var(--l-primary);
  border:1px solid var(--l-primary); transition:background .2s ease, border-color .2s ease; }
button:hover, .btn:hover { background:var(--l-primary-d); border-color:var(--l-primary-d); }
button.secondary, .btn.secondary { background:#fff; color:var(--l-ink); border:1px solid #dee2e6; }
button.secondary:hover, .btn.secondary:hover { background:var(--l-tert); color:var(--l-primary); border-color:var(--l-primary); }
button.danger { background:var(--l-danger); border-color:var(--l-danger); color:#fff; }
button.danger:hover { background:#d63a54; border-color:#d63a54; }
button.small, .btn.small { padding:4px 10px; font-size:12.5px; }
button.link, button.link:hover { background:none; border:0; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border:1px solid #dee2e6; border-radius:4px; padding:7px 12px; background:#fff; font-family:inherit; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
  outline:none; border-color:#9fdbdc; box-shadow:0 0 0 3px var(--l-primary-15); }
input:disabled, select:disabled, textarea:disabled { background:var(--l-tert); }
input[type=checkbox], input[type=radio] { accent-color:var(--l-primary); }
label { color:#495057; }

/* ---------- Bảng ---------- */
th { background:var(--l-tert); color:var(--l-ink); font-weight:600; }
th, td { border-bottom-color:var(--l-line); }
tbody tr:hover td { background:#fafbfb; }
.plain-table tr.group-row td { background:var(--l-tert); }
.form-table tr.axis-row td { background:var(--l-primary-08); color:#2b8f92; }

/* ---------- Nhãn, thông báo ---------- */
.badge, .meter, .chip { border-radius:999px; font-weight:500; }
.badge { background:#eef0f2; }
.badge.info { background:rgba(54,80,139,.12); color:var(--l-info); }
.flash { border-radius:4px; padding:12px 16px; background:var(--l-primary-08); color:var(--l-ink);
  border-left:3px solid var(--l-primary); }
.chip { background:var(--l-tert); }

/* ---------- Thanh tiến độ, biểu đồ ---------- */
.track, .stack, .hbar-track { background:#e9ecef; }
.track .fill, .hbar-fill { background:var(--l-primary); }
.col-bar { background:var(--l-primary); border-radius:3px 3px 0 0; }
.hbar-track, .hbar-fill { border-radius:999px; }
.timeline-steps .dot { border-color:var(--l-primary); }
.timeline-steps li.next .dot { background:var(--l-primary); box-shadow:0 0 0 4px var(--l-primary-15); }

/* ---------- Thanh bước, tab, phân trang ---------- */
.stepper .step.current .num { background:var(--l-primary); }
.stepper .step.active { box-shadow:0 0 0 2px var(--l-primary); }
.stepper .step .num { background:#e9ecef; }
.tabs { border-bottom:2px solid var(--l-line); gap:4px; }
.tabs a { border:0; border-bottom:2px solid transparent; margin-bottom:-2px; border-radius:0; color:var(--l-muted); }
.tabs a:hover { color:var(--l-primary); }
.tabs a.active { background:none; color:var(--l-primary); border:0; border-bottom:2px solid var(--l-primary); }
.pager a { border-radius:4px; border-color:#dee2e6; }
.pager a.current { background:var(--l-primary); border-color:var(--l-primary); }
.savebar { border-top:0; box-shadow:0 -4px 18px rgba(0,0,0,.06); }
.count-badge { background:var(--l-primary); }

/* ---------- Menu trái kiểu Lexa: tối, phẳng, sát mép ---------- */
.sidebar { background:var(--l-side); color:var(--l-side-ink); box-shadow:var(--l-shadow); padding:0 0 20px; }
.sidebar .brand { padding:0 20px; height:70px; gap:10px; background:var(--l-side); }
.sidebar .brand b { font-size:16px; color:#fff; font-weight:600; }
.sidebar .brand small { color:var(--l-side-ink); opacity:1; font-size:10.5px; }
.brand-mark { width:36px; height:36px; border-radius:50%; color:#fff; font-size:11px; background:var(--l-primary); }
.side-period { margin:6px 20px 12px; padding:0; background:none; color:var(--l-side-ink); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.side-nav { padding:0; gap:0; }
.side-nav a, .side-btn { padding:11px 20px; border-radius:0; font-size:13.3px; color:var(--l-side-ink); opacity:1; gap:12px;
  background:none; border:0; transition:all .3s ease; }
.side-nav a .ic, .side-btn .ic { color:var(--l-side-ink); }
.side-nav a:hover, .side-btn:hover { background:none; color:#fff; }
.side-nav a:hover .ic, .side-btn:hover .ic { color:#fff; }
.side-nav a.active { background:var(--l-side-active); color:#fff; font-weight:500; box-shadow:inset 3px 0 0 var(--l-primary); }
.side-nav a.active .ic { color:var(--l-primary); }
.side-nav .count { background:var(--l-danger); color:#fff; font-size:10px; font-weight:600; }
.side-user { border-top:1px solid rgba(255,255,255,.06); margin-top:14px; padding:14px 0 0; }
.side-user .who { padding:0 20px 8px; }
.side-user .who b { color:#fff; font-weight:500; }
.side-user .who small { color:var(--l-side-ink); opacity:1; }
.sidebar .side-collapse { border:0; color:var(--l-side-ink); }

body.has-sidebar main { padding-top:24px; }
@media (min-width:900px) {
  body.side-collapsed .side-nav a, body.side-collapsed .side-btn { padding:11px 0; }
}
@media (max-width:899px) {
  .mobile-bar { background:#fff; color:var(--l-ink); box-shadow:var(--l-shadow); }
  .mobile-bar a { color:var(--l-ink); }
  .menu-btn { color:var(--l-ink); background:none; border:0; padding:6px 10px; }
}
body.side-collapsed .mobile-bar { background:#fff; color:var(--l-ink); box-shadow:var(--l-shadow); }
body.side-collapsed .mobile-bar a { color:var(--l-ink); }

/* ---------- Trang không có menu (đăng nhập, đăng ký) ---------- */
.topbar { background:#fff; color:var(--l-ink); box-shadow:var(--l-shadow); }
.topbar a, .topbar button.link { color:var(--l-primary); }
body.no-sidebar { background:var(--l-body); min-height:100vh; }
.card.narrow { margin:8vh auto 32px; padding:0 28px 28px; border-radius:4px; overflow:hidden; }
.card.narrow::before { content:""; display:block; height:8px; margin:0 -28px 24px; background:var(--l-primary); }
.card.narrow h1 { font-size:20px; }
.card.narrow button[type=submit] { width:100%; padding:10px 16px; }

@media print {
  body { background:#fff !important; }
  .card, .tile { box-shadow:none !important; border:1px solid #ddd; }
  .tile { background:#fff !important; color:#000 !important; }
  .tile-label, .tile-value, .tile-sub { color:#000 !important; }
}