/* Token đo được từ bản mẫu (lohapage.com/demo, chế độ Tối) bằng Playwright.
   Nền #030712 · sidebar/thẻ #0f172a · viền rgba(255,255,255,.08) · chữ #e5e7eb
   · nhấn #7c5cff · ok #16a34a · cảnh báo #f97316 · lỗi #e11d48 · bo 12px/8px · font Inter. */
:root {
    --pm-bg: #030712;
    --pm-surface: #0f172a;
    --pm-border: rgba(255, 255, 255, .08);
    --pm-accent: #7c5cff;
}

* { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
[x-cloak] { display: none !important; }

body { background: var(--pm-bg); }

/* thẻ dùng chung */
.pm-card {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 12px;
}

/* ô nhập */
.pm-input {
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--pm-border);
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: 14px;
    color: #e5e7eb;
    outline: none;
    transition: border-color .15s;
}
.pm-input:focus { border-color: var(--pm-accent); }
.pm-input option { background: var(--pm-surface); }

/* nút */
.pm-btn, .pm-btn-primary {
    display: inline-flex; align-items: center; gap: .4rem;
    border-radius: 8px; padding: .5rem .9rem;
    font-size: 14px; font-weight: 600;
    border: 1px solid var(--pm-border);
    background: rgba(255, 255, 255, .04);
    color: #e5e7eb; cursor: pointer;
    transition: background .15s, border-color .15s, filter .15s;
}
.pm-btn:hover { border-color: var(--pm-accent); }
.pm-btn-primary {
    background: var(--pm-accent); border-color: var(--pm-accent); color: #fff;
}
.pm-btn-primary:hover { filter: brightness(1.1); }
.pm-btn:disabled, .pm-btn-primary:disabled { opacity: .55; cursor: default; }

/* huy hiệu trạng thái */
.pm-chip {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: rgba(148, 163, 184, .16); color: #cbd5e1;
}
.pm-chip-ok   { background: rgba(22, 163, 74, .16);  color: #4ade80; }
.pm-chip-bad  { background: rgba(225, 29, 72, .16);  color: #fb7185; }
.pm-chip-warn { background: rgba(249, 115, 22, .16); color: #fdba74; }
.pm-chip-info { background: rgba(59, 130, 246, .16); color: #93c5fd; }
/* chip ĐANG CHỌN — khối đặc màu nhấn, chữ trắng (cùng lối mục menu đang chọn của bản mẫu).
   Dùng cho tab lọc bấm được: Insights (cửa sổ thời gian). */
.pm-chip-on { background: var(--pm-accent); color: #fff; cursor: pointer; }

/* Ô SỐ NỀN MÀU NHẠT — theo bản mẫu người dùng gửi 11/09/2026.
   ⚠️ Đây là NGOẠI LỆ có chủ ý của luật "số trên thẻ KPI để TRẮNG". Luật đó có lý do thật
   (8 thẻ 8 màu thì mắt không bắt được thẻ nào đáng chú ý), nên chỉ dùng các ô này ở màn
   Insights — nơi các chỉ số NGANG HÀNG nhau, không có ô nào "đáng báo động" hơn ô nào.
   Đừng mang sang Trang chủ: ở đó màu phải dành cho cảnh báo. */
.pm-tile { border-radius: 10px; padding: 10px 12px; }
.pm-tile .pm-tile-so { font-size: 20px; font-weight: 700; line-height: 1.2; }
.pm-tile .pm-tile-nhan { font-size: 11px; margin-top: 2px; opacity: .85; }
.pm-tile-blue   { background: rgba(59, 130, 246, .12); }
.pm-tile-blue   .pm-tile-so, .pm-tile-blue   .pm-tile-nhan { color: #93c5fd; }
.pm-tile-green  { background: rgba(22, 163, 74, .12); }
.pm-tile-green  .pm-tile-so, .pm-tile-green  .pm-tile-nhan { color: #4ade80; }
.pm-tile-rose   { background: rgba(225, 29, 72, .12); }
.pm-tile-rose   .pm-tile-so, .pm-tile-rose   .pm-tile-nhan { color: #fb7185; }
.pm-tile-violet { background: rgba(124, 92, 255, .14); }
.pm-tile-violet .pm-tile-so, .pm-tile-violet .pm-tile-nhan { color: #c4b5fd; }
.pm-tile-amber  { background: rgba(249, 115, 22, .12); }
.pm-tile-amber  .pm-tile-so, .pm-tile-amber  .pm-tile-nhan { color: #fdba74; }
.pm-tile-slate  { background: rgba(148, 163, 184, .10); }
.pm-tile-slate  .pm-tile-so, .pm-tile-slate  .pm-tile-nhan { color: #94a3b8; }
/* ô CHƯA ĐO: cố ý xám và chữ nhỏ — nó KHÔNG phải một con số, đừng cho nó trông như số. */
.pm-tile-chuado .pm-tile-so { font-size: 15px; font-weight: 600; color: #64748b; }

/* thẻ NHÓM TRANG bấm để mở/thu */
.pm-nhom { cursor: pointer; }
.pm-nhom:hover { border-color: var(--pm-accent); }

/* nhãn ô nhập */
.pm-label {
    display: block; font-size: 12px; font-weight: 600;
    color: #9ca3af; margin-bottom: 6px;
}

/* bảng: hàng tiêu đề + hàng dữ liệu (mẫu dùng đường kẻ mảnh, không kẻ ô) */
.pm-thead {
    text-align: left; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px; color: #64748b;
    border-bottom: 1px solid var(--pm-border);
}
.pm-tr { border-bottom: 1px solid rgba(255, 255, 255, .05); }
.pm-tr:last-child { border-bottom: 0; }
.pm-tr:hover { background: rgba(255, 255, 255, .03); }

/* nút icon trong dòng: không viền, như mẫu */
.pm-icon {
    border: 0; background: transparent; color: #9ca3af;
    padding: 4px 7px; border-radius: 6px; cursor: pointer; font-size: 15px;
}
.pm-icon:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* liên kết/nút-chữ trong thân trang. Dùng token nhấn, KHÔNG gõ màu rời rạc. */
.pm-link {
    border: 0; background: transparent; color: var(--pm-accent);
    padding: 0; cursor: pointer; text-decoration: none; font: inherit;
}
.pm-link:hover { text-decoration: underline; }

/* ô tick */
.pm-ck {
    width: 15px; height: 15px; accent-color: var(--pm-accent); cursor: pointer;
}

/* ===================== Ô BẢNG =====================
   ⚠️ `.pm-th` / `.pm-cell` được dùng trong index.html từ lâu nhưng CHƯA BAO GIỜ có trong file
   này — chúng là class của design system nằm trong `app.py` (bản Streamlit 8501, đã xoá
   10/09/2026). Trình duyệt bỏ qua class không tồn tại KHÔNG BÁO LỖI, nên bảng chỉ trông
   "hơi lệch" chứ không ai thấy hỏng: đúng kiểu lỗi im lặng của dự án này.
   Đo được: màn 🎬 Nguồn video (có sẵn) và 📜 Nhật ký (mới) đều bị. */
.pm-th {
    text-align: left; padding: 10px 12px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px; color: #64748b;
    border-bottom: 1px solid var(--pm-border);
    white-space: nowrap;
}

.pm-cell {
    padding: 10px 12px;
    font-size: 13px; color: #e5e7eb;
    vertical-align: top;
}

/* tiêu đề khối trong trang */
.pm-section-title {
    font-size: 13px; font-weight: 600; color: #e5e7eb;
}

/* thanh cuộn mảnh như mẫu */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12); border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); }


/* ===================== MÀN HẸP: bảng thành THẺ =====================
   Streamlit làm được việc này nhờ `data-lbl`; bản web cũng đã gắn `data-lbl` cho từng ô nhưng
   thiếu hẳn phần CSS đọc nó — tức là trên điện thoại bảng mất nhãn, chỉ còn dãy giá trị trần.
   ⚠️ Ô nào thêm mới PHẢI có `data-lbl="Tên cột"`, không thì dòng đó không đọc được ở khổ hẹp. */
@media (max-width: 768px) {
    table:has(.pm-cell) thead { display: none; }
    table:has(.pm-cell),
    table:has(.pm-cell) tbody,
    table:has(.pm-cell) tr { display: block; width: 100%; }

    table:has(.pm-cell) tr {
        border: 1px solid var(--pm-border);
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 4px 2px;
    }

    .pm-cell {
        display: flex; justify-content: space-between; gap: 12px;
        padding: 7px 12px;
    }
    .pm-cell::before {
        content: attr(data-lbl);
        font-size: 11px; font-weight: 600; text-transform: uppercase;
        letter-spacing: .5px; color: #64748b;
        flex: 0 0 auto;
    }
    /* ô không có nhãn (cột nút) thì đừng chừa chỗ trống bên trái */
    .pm-cell[data-lbl=""]::before { content: none; }
}

/* ── Thanh tiến độ (màn 📊 Insights: một lượt đồng bộ ~10 phút) ────────────────
   Dùng biến của design system, KHÔNG gõ mã màu thô. */
.pm-progress {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.pm-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--pm-accent), #22d3ee);
  transition: width .4s ease;
}
/* Chưa biết tổng -> vạch chạy qua lại, KHÔNG vẽ một con số bịa. */
.pm-progress-indet {
  width: 35%;
  animation: pm-indet 1.2s ease-in-out infinite;
}
@keyframes pm-indet {
  0%   { margin-left: 0; }
  50%  { margin-left: 65%; }
  100% { margin-left: 0; }
}