/* ============================================================================
   Cloud Theme cho b2b.flyer.vn, theo đặc tả roadmap.flyer.vn/cloudtheme:
   nền #fafafa, thẻ trắng viền #e4e4e7 bo 10px, không đổ bóng, không gradient,
   tím thương hiệu #6A309B, chữ #1b1b1f / phụ #71717a, nhãn 4 màu quy ước.

   Tệp này được deploy() nạp ngay trước </body> của MỌI trang nên thắng các khối <style>
   cùng độ ưu tiên. Bảng màu kem cũ được cloud_theme.py đổi sang token Cloud lúc deploy;
   tệp này lo phần cấu trúc: làm phẳng thẻ, bảng, nút, nhãn.
   Họ chữ giữ Open Sans (phông thương hiệu FLYER).
   ========================================================================== */
:root{
  color-scheme:light;
  --c-primary:#6A309B; --c-soft:#F3EBFA; --c-soft-line:#D9C2EC; --c-dark:#55257E;
  --c-ink:#1b1b1f; --c-text:#3f3f46; --c-muted:#71717a; --c-faint:#a1a1aa;
  --c-line:#e4e4e7; --c-row:#eeeef0; --c-bg:#fafafa; --c-card:#ffffff; --c-hover:#f4f4f5; --c-btn-line:#d4d4d8;
  --c-green:#127a41; --c-green-bg:#e6f6ec; --c-amber:#92600a; --c-amber-bg:#fdf3e0;
  --c-red:#b42318; --c-red-bg:#fdeaea; --c-blue:#1d4ed8; --c-blue-bg:#e8f0fe; --c-gray:#52525b; --c-gray-bg:#f4f4f5;
  /* tên biến cũ của các trang con */
  --paper:var(--c-bg); --white:var(--c-card); --bg:var(--c-bg); --card:var(--c-card);
  --ink:var(--c-ink); --ink-soft:var(--c-text); --muted:var(--c-muted);
  --line:var(--c-line); --line2:var(--c-row); --tint:var(--c-hover); --tint2:var(--c-bg); --lilac:var(--c-soft);
  --purple:var(--c-primary); --purple-2:#8a55c0; --deep:var(--c-dark);
  --green:var(--c-green); --green-bg:var(--c-green-bg); --ok:var(--c-green); --ok-bg:var(--c-green-bg);
  --amber:var(--c-amber); --amber-bg:var(--c-amber-bg); --warn:var(--c-amber); --warn-bg:var(--c-amber-bg);
  --red:var(--c-red); --red-bg:var(--c-red-bg); --bad:var(--c-red); --bad-bg:var(--c-red-bg);
  --blue:var(--c-blue); --blue-bg:var(--c-blue-bg);
}

/* --- nền, chữ --- */
html,body{background:var(--c-bg)!important}
body{color:var(--c-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--c-ink)}
a{color:var(--c-primary)}
code{background:var(--c-hover);border-radius:6px}

/* --- thẻ: trắng, viền mảnh, bo 10px, không bóng, không gradient, không thanh màu --- */
.card,.kpi,.metric,.rep-card,.panel,.box,.tblwrap,.chart-wrap,.diagram-wrap,.gate,.srcline,.note,.flowchart,
.pie-cell,.lvcard,.trackbox,.job-card,.duo .box,.demo-filter,details.caveat{
  background:var(--c-card)!important;border:1px solid var(--c-line)!important;border-radius:10px;box-shadow:none!important}
.metric::before,.kpi::before,.lvcard::before,.job-card::before{display:none!important}
.kpi{border-top:1px solid var(--c-line)!important}
.rep-card{border-left:1px solid var(--c-line)!important}
.rep-card:hover,.lvcard:hover,.job-card:hover{transform:none!important;box-shadow:none!important;border-color:var(--c-soft-line)!important}
.srcline{background:var(--c-bg)!important;color:var(--c-muted)}
.note,.gate{border-style:dashed!important;border-color:#e3c98f!important;background:var(--c-amber-bg)!important}
.alert{background:var(--c-red-bg)!important;border:1px solid #f3c4c0!important;border-radius:10px;box-shadow:none!important}
details.caveat{border-left:3px solid #e3c98f!important}
.tblwrap .tblwrap,.card .card,.card .tblwrap .tblwrap{border:0!important}

/* --- bảng: tiêu đề nền xám nhạt chữ hoa nhỏ, chỉ kẻ ngang --- */
thead th,table th{background:var(--c-bg)!important;color:var(--c-muted)!important;font-weight:600;border-bottom:1px solid var(--c-line)!important}
table td{border-bottom:1px solid var(--c-row)}
tbody tr:hover td,tbody tr:hover{background:var(--c-bg)}
tr.total td{background:var(--c-bg)!important}

/* --- nút, tab, chip: chính tím/trắng, phụ trắng viền xám --- */
.btn-detail,.seg button.on,.lv-btn.on,.repnav a.on,.lvlink.on,.btn.p{background:var(--c-primary)!important;color:#fff!important;border-color:var(--c-primary)!important;box-shadow:none!important}
.btn-detail:hover{transform:none!important;background:var(--c-dark)!important}
.back,.seg,.repnav,.page-tab,.lv-btn,.lvlink{background:var(--c-card);border-color:var(--c-btn-line)}
.back:hover{background:var(--c-hover)!important;color:var(--c-ink)!important;border-color:var(--c-btn-line)!important}
.page-tab.active,.page-tab:hover{background:var(--c-soft)!important;color:var(--c-primary)!important;border-color:var(--c-soft-line)!important}
.badge-new{background:var(--c-primary)!important}
.badge.on{background:var(--c-green-bg)!important;color:var(--c-green)!important}
.badge.off{background:var(--c-gray-bg)!important;color:var(--c-gray)!important}
.pill,.chip,.tag{border-radius:6px}

/* --- biểu đồ cột trang chủ: màu phẳng --- */
.bar{background:var(--c-primary)!important}
.bar.weekend,.bar.low{background:var(--c-btn-line)!important}
.rep-tooltip .tt-bar-fill{background:var(--c-primary)!important}

/* --- mẫu tin Zalo: nền nhạt theo mức độ thay cho dải gradient đậm --- */
details.msg-section > summary,.msg-header{border:1px solid var(--c-line)}
.h-day3{background:var(--c-amber-bg)!important;color:var(--c-amber)!important;border-color:#f1dcb0!important}
.h-day7{background:#fdebdc!important;color:#a5410b!important;border-color:#f6cfae!important}
.h-day14{background:var(--c-red-bg)!important;color:var(--c-red)!important;border-color:#f3c4c0!important}
.h-old{background:var(--c-gray-bg)!important;color:var(--c-gray)!important;border-color:var(--c-line)!important}
.h-new{background:var(--c-green-bg)!important;color:var(--c-green)!important;border-color:#bfe5cd!important}
.msg-header code{background:rgba(255,255,255,.7)!important;color:inherit!important}
.msg-list{background:var(--c-card)!important;border-color:var(--c-line)!important}
.msg-footer{background:var(--c-bg)!important;border-color:var(--c-line)!important}

/* --- nút lên đầu trang và khung gợi ý nổi giữ bóng nhẹ để tách khỏi nền --- */
.to-top{background:rgba(27,27,31,.72)!important}
.to-top:hover{background:var(--c-primary)!important}