/* ============================================================
   app-desktop.css - Lớp giao diện "ứng dụng nghiệp vụ desktop"
   Nạp SAU theme Vuexy để override: mật độ cao, control slim,
   menu ngang, status bar, phím tắt. Map theme qua data-bs-theme.
   ============================================================ */

:root{
  --dt-bg:#eef1f5; --dt-surface:#ffffff; --dt-surface-2:#f4f6f9;
  --dt-line:#d3dae3; --dt-line-strong:#b9c2ce;
  --dt-ink:#1c2733; --dt-ink-2:#54627a; --dt-ink-3:#7d8aa0;
  --dt-accent:#2f6fed; --dt-accent-ink:#ffffff; --dt-accent-soft:#e6eefc;
  --dt-ok:#1f9d57; --dt-ok-soft:#e2f4ea; --dt-warn:#b8860b; --dt-warn-soft:#f7efd8;
  --dt-bad:#d23b3b; --dt-bad-soft:#fbe4e4;
  --dt-row-h:30px; --dt-radius:4px;
  --dt-mono:"SFMono-Regular",ui-monospace,"Cascadia Mono","Consolas",monospace;
}
[data-bs-theme="dark"]{
  --dt-bg:#0f151d; --dt-surface:#161d27; --dt-surface-2:#1b2431;
  --dt-line:#2a3543; --dt-line-strong:#3a4756;
  --dt-ink:#e6ecf3; --dt-ink-2:#a3b0c2; --dt-ink-3:#77869a;
  --dt-accent:#5b90ff; --dt-accent-ink:#0b1017; --dt-accent-soft:#1a2740;
  --dt-ok:#3fbd76; --dt-ok-soft:#12291d; --dt-warn:#d9a534; --dt-warn-soft:#2a2413;
  --dt-bad:#e2635f; --dt-bad-soft:#2c1717;
}
/* Mật độ (mặc định compact = 30px, có công tắc sang cozy) */
html[data-density="cozy"]{ --dt-row-h:38px; }

/* ---------- Nền tảng nén ---------- */
body{ font-size:13px; background:var(--dt-bg); }
/* Chống rung lắc trang:
   - scrollbar-gutter:stable -> luôn giữ chỗ thanh cuộn dọc, không nhảy ngang khi nội dung đổi chiều cao.
   - overscroll-behavior:none -> tắt hiệu ứng nảy (rubber-band) khi kéo đến hết trang.
   - overflow-x:clip -> chặn tràn/kéo ngang toàn trang mà KHÔNG phá position:sticky (khác overflow:hidden). */
html{ scrollbar-gutter:stable; overscroll-behavior:none; }
html,body{ overflow-x:clip; max-width:100%; }
.layout-wrapper,.layout-container,.layout-page,.content-wrapper,#app-content{ min-width:0; max-width:100%; overflow-x:clip; }
/* Bảng rộng cuộn TRONG khung riêng (không đẩy tràn cả trang) */
.card-datatable,.table-responsive{ max-width:100%; }
.container-p-y{ padding-top:.5rem !important; padding-bottom:10px !important; }
/* Beat core .container-p-y:not([class^=pt-], ...) {padding-block-start:1.5rem} -> nén sát menu */
.container-p-y:not([class^=pt-]):not([class*=" pt-"]){ padding-block-start:.5rem !important; }
.container-p-y:not([class^=pb-]):not([class*=" pb-"]){ padding-block-end:10px !important; }
/* Chấm đỏ thông báo gọn (giống mockup) */
.dt-notif-dot{ position:absolute; top:3px; right:3px; width:8px; height:8px; border-radius:50%;
  background:var(--dt-bad); border:2px solid var(--dt-surface); padding:0; }
.container-xxl{ max-width:none; padding-left:10px; padding-right:10px; }
h1,.h1{font-size:1.4rem} h2,.h2{font-size:1.2rem} h3,.h3{font-size:1.05rem}
h4,.h4{font-size:.98rem} h5,.h5{font-size:.9rem} h6,.h6{font-size:.82rem}

/* Card gọn, viền mảnh, ít bo góc */
.card{ border:1px solid var(--dt-line); border-radius:var(--dt-radius); box-shadow:none; margin-bottom:10px; }
.card-body{ padding:10px 12px; }
.card-header{ padding:8px 12px; min-height:0; }
.card-title{ margin-bottom:.4rem; }

/* Control slim */
.btn{ --bs-btn-padding-y:.28rem; --bs-btn-padding-x:.65rem; --bs-btn-font-size:.82rem; border-radius:var(--dt-radius); }
.btn-sm{ --bs-btn-padding-y:.2rem; --bs-btn-padding-x:.5rem; --bs-btn-font-size:.78rem; }
.form-control,.form-select{ min-height:0; height:28px; padding:2px 8px; font-size:.82rem; border-radius:var(--dt-radius); border-color:var(--dt-line-strong); }
/* min-height:0 !important — ghi đè min-height mặc định của theme cho .form-select-sm (nếu không sẽ cao 39px, lệch input). */
.form-control-sm,.form-select-sm{ height:26px; min-height:0 !important; padding:1px 7px; font-size:.78rem; }
/* Select thấp (26px): padding-block của theme đẩy chữ xuống gây CẮT chữ → bỏ padding dọc để căn giữa (đã test cả focus). */
.form-select-sm{ padding-block:0 !important; }
textarea.form-control{ height:auto; }
.form-control:focus,.form-select:focus{ border-color:var(--dt-accent); box-shadow:0 0 0 2px var(--dt-accent-soft); }
.form-label{ margin-bottom:.2rem; font-size:.78rem; color:var(--dt-ink-2); }
.input-group-text{ padding:2px 8px; }
label{ margin-bottom:.15rem; }

/* ---------- Lưới dữ liệu mật độ cao ---------- */
.table{ font-size:12.5px; margin-bottom:0; --bs-table-bg:var(--dt-surface); }
.table > :not(caption) > * > *{ padding:0 8px; height:var(--dt-row-h); vertical-align:middle; }
.table thead th{
  position:sticky; top:0; z-index:2; background:var(--dt-surface-2);
  color:var(--dt-ink-2); font-weight:600; white-space:nowrap;
  border-bottom:1px solid var(--dt-line-strong);
}
.table tbody tr{ border-bottom:1px solid var(--dt-line); }
.table-hover tbody tr:hover > *{ background:var(--dt-accent-soft); }
.table-striped > tbody > tr:nth-of-type(odd) > *{ --bs-table-accent-bg:var(--dt-surface-2); }
.table .text-end,.table .num{ font-variant-numeric:tabular-nums; }
.card-datatable, .table-responsive{ overflow-x:auto; }

/* ============================================================
   MENU NGANG kiểu desktop (.dt-menubar)
   ============================================================ */
.dt-menubar{
  display:flex; align-items:center; gap:2px; height:38px; padding:0 8px;
  background:var(--dt-surface); border-bottom:1px solid var(--dt-line);
  position:sticky; top:0; z-index:1030;
}
.dt-brand{ font-weight:700; letter-spacing:.02em; color:var(--dt-accent); padding:0 10px 0 2px; text-decoration:none; font-size:14px; white-space:nowrap; }
.dt-menubar .dropdown-toggle{
  background:none; border:0; color:var(--dt-ink); font-size:13px; padding:6px 10px; border-radius:var(--dt-radius); line-height:1;
}
.dt-menubar .dropdown-toggle::after{ display:none; }
.dt-menubar .dropdown-toggle:hover,.dt-menubar .show > .dropdown-toggle{ background:var(--dt-surface-2); }
.dt-menubar .dropdown-menu{
  font-size:13px; border:1px solid var(--dt-line-strong); border-radius:var(--dt-radius);
  padding:4px; box-shadow:0 8px 24px rgba(10,20,40,.18); min-width:230px; margin-top:2px;
}
.dt-menubar .dropdown-item{ display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:3px; }
.dt-menubar .dropdown-item .menu-kbd{ margin-left:auto; font-family:var(--dt-mono); font-size:10.5px; color:var(--dt-ink-3); }
.dt-menubar .dropdown-item i{ font-size:15px; color:var(--dt-ink-2); }
.dt-menubar .dropdown-item:hover,.dt-menubar .dropdown-item:focus{ background:var(--dt-accent-soft); }
.dt-menubar .dropdown-item.active,.dt-menubar .dropdown-item:active{ background:var(--dt-accent); color:var(--dt-accent-ink); }
.dt-menubar .dropdown-item.active i{ color:var(--dt-accent-ink); }
.dt-menubar .dropdown-header{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--dt-ink-3); padding:6px 8px 2px; }
.dt-spacer{ flex:1; }
.dt-right{ display:flex; align-items:center; gap:4px; }
.dt-iconbtn{ width:28px; height:28px; border:0; background:none; border-radius:var(--dt-radius); color:var(--dt-ink-2); cursor:pointer; display:grid; place-items:center; }
.dt-iconbtn:hover{ background:var(--dt-surface-2); }
.dt-user{ display:flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--dt-radius); color:var(--dt-ink); cursor:pointer; }
.dt-user:hover{ background:var(--dt-surface-2); }
.dt-avatar{ width:22px; height:22px; border-radius:50%; background:var(--dt-accent); color:var(--dt-accent-ink); display:grid; place-items:center; font-size:11px; font-weight:700; }
.dt-search{ display:flex; align-items:center; gap:6px; background:var(--dt-surface-2); border:1px solid var(--dt-line); border-radius:var(--dt-radius); padding:3px 8px; color:var(--dt-ink-3); min-width:200px; cursor:text; font-size:12.5px; }
.dt-search kbd{ margin-left:auto; font-family:var(--dt-mono); font-size:10.5px; background:none; border:1px solid var(--dt-line-strong); color:var(--dt-ink-3); border-radius:3px; padding:0 4px; }
/* công tắc mật độ */
.dt-density{ display:inline-flex; border:1px solid var(--dt-line-strong); border-radius:var(--dt-radius); overflow:hidden; }
.dt-density button{ border:0; background:var(--dt-surface); color:var(--dt-ink-2); font-size:12px; padding:0 8px; height:26px; cursor:pointer; }
.dt-density button.active{ background:var(--dt-accent-soft); color:var(--dt-accent); font-weight:600; }

/* Bỏ khoảng trống dành cho sidebar cũ */
.layout-wrapper.layout-without-menu .layout-page{ padding-left:0 !important; }
.content-wrapper{ background:var(--dt-bg); }

/* ============================================================
   STATUS BAR
   ============================================================ */
.dt-statusbar{
  display:flex; align-items:center; gap:14px; height:24px; padding:0 12px;
  background:var(--dt-surface); border-top:1px solid var(--dt-line);
  color:var(--dt-ink-2); font-size:11.5px; position:sticky; bottom:0; z-index:1020;
}
.dt-statusbar .sp{ flex:1; }
.dt-statusbar kbd{ font-family:var(--dt-mono); font-size:10px; background:none; border:1px solid var(--dt-line); color:var(--dt-ink-3); border-radius:3px; padding:0 4px; }
.dt-statusbar .num{ font-variant-numeric:tabular-nums; }

/* ============================================================
   DẢI KPI + badge cổng chi (dùng chung)
   ============================================================ */
.dt-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin-bottom:10px; }
.dt-kpi{ background:var(--dt-surface); border:1px solid var(--dt-line); border-radius:var(--dt-radius); padding:8px 10px 8px 12px; position:relative; overflow:hidden; }
.dt-kpi .stripe{ position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--dt-accent); }
.dt-kpi.ok .stripe{ background:var(--dt-ok); } .dt-kpi.warn .stripe{ background:var(--dt-warn); } .dt-kpi.bad .stripe{ background:var(--dt-bad); }
.dt-kpi .lbl{ color:var(--dt-ink-3); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.dt-kpi .val{ font-size:19px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.dt-kpi.bad .val{ color:var(--dt-bad); }
.dt-kpi .sub{ font-size:11.5px; color:var(--dt-ink-2); }

.g-pill{ display:inline-block; padding:0 7px; height:17px; line-height:17px; border-radius:9px; font-size:11px; font-weight:600; }
.g-ok{ background:var(--dt-ok-soft); color:var(--dt-ok); }
.g-warn{ background:var(--dt-warn-soft); color:var(--dt-warn); }
.g-bad{ background:var(--dt-bad-soft); color:var(--dt-bad); }
.g-mut{ background:var(--dt-surface-2); color:var(--dt-ink-3); }

@media (max-width:820px){
  .dt-menubar{ overflow-x:auto; }
  .dt-search{ min-width:120px; }
}

/* ------------------------------------------------------------------
   TOOLBAR trang (dải gọn dưới menu) - restyle Page-Chrome _PageHeader
   ------------------------------------------------------------------ */
.page-head{
  display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap;
  padding:5px 10px; min-height:38px;
  background:var(--dt-surface); border:1px solid var(--dt-line); border-radius:var(--dt-radius);
  margin-bottom:.6rem !important;
}
.page-head-ico{ display:none !important; }
.page-head-left{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.page-head-left > div{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.page-head-title{ font-size:14px !important; font-weight:600; margin:0 !important; line-height:1.25; white-space:nowrap; }
.page-head-sub{ font-size:11.5px; color:var(--dt-ink-3); margin:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52ch; }
/* Bộ lọc inline trong dải toolbar (gộp cùng tiêu đề + hành động, giống mockup) */
.page-head-filters{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.page-head-filters form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0; }
.page-head-filters label{ font-size:11.5px; color:var(--dt-ink-2); margin:0; white-space:nowrap; }
.page-head-filters .form-select,.page-head-filters .form-control{ height:28px; width:auto; min-width:140px; max-width:280px; }
.page-head-actions{ margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.page-head:has(.page-head-filters) .page-head-actions{ margin-left:8px; }
.page-head-actions .btn{ height:28px; }

/* Header màn chi tiết (_EntityHeader) - nén gọn */
.breadcrumb{ margin-bottom:.35rem !important; font-size:12px; }
.card.mb-4{ margin-bottom:.6rem !important; }
.avatar.avatar-md{ width:34px; height:34px; }
.card-header{ padding:.5rem .75rem; min-height:0; }
.card-title{ font-size:13.5px; }

/* Chân trang gọn (desktop): Về màn hình này + Chức năng liên quan */
.page-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  margin-top:10px; padding:7px 10px;
  background:var(--dt-surface); border:1px solid var(--dt-line); border-radius:var(--dt-radius);
  font-size:12px; color:var(--dt-ink-2);
}
.page-foot-main{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 16px; flex:1 1 auto; min-width:0; }
.page-foot-about{ color:var(--dt-ink-2); }
.page-foot-related{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.page-foot-lbl{ color:var(--dt-ink-3); font-weight:600; }
.page-foot-stats{ display:flex; flex-wrap:wrap; gap:4px 14px; color:var(--dt-ink-2); }
.page-foot-stat b{ color:var(--dt-ink); }
.dt-chip{
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px;
  border:1px solid var(--dt-line-strong); border-radius:var(--dt-radius);
  color:var(--dt-ink); text-decoration:none; font-size:11.5px; line-height:1; white-space:nowrap;
}
.dt-chip i{ font-size:13px; color:var(--dt-ink-3); }
.dt-chip:hover{ background:var(--dt-accent-soft); border-color:var(--dt-accent); color:var(--dt-accent); }
.dt-chip:hover i{ color:var(--dt-accent); }

/* Badge cổng/nhãn trong bảng: phẳng, gọn theo mẫu (map bg-label-* của Vuexy) */
.table .badge, .badge.bg-label-success, .badge.bg-label-danger, .badge.bg-label-warning,
.badge.bg-label-primary, .badge.bg-label-secondary, .badge.bg-label-info{
  font-weight:600; font-size:11px; padding:1px 7px; border-radius:9px;
}

/* ============================================================
   Dải "Chức năng liên quan" ngay dưới toolbar (phương án B)
   ============================================================ */
.dt-relatedbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  background:var(--dt-surface-2); border:1px solid var(--dt-line);
  border-radius:0 0 var(--dt-radius) var(--dt-radius);
  padding:5px 10px; margin-top:-1px;
}
.dt-relatedbar .dt-rel-lbl{ font-size:11.5px; color:var(--dt-ink-3); margin-right:2px; white-space:nowrap; }

/* ============================================================
   INPUT FILE - nút "Chọn tệp" gọn + chữ rõ (thay native chìm/nút to)
   Dùng chiều cao auto + margin âm cho ::file-selector-button (cách Bootstrap)
   để nút lấp đúng ô, không bị cắt/chìm.
   ============================================================ */
.form-control[type="file"]{
  height:auto !important; min-height:28px; padding:3px 8px;
  line-height:1.4; color:var(--dt-ink); overflow:hidden;
}
.form-control-sm[type="file"]{ min-height:26px; padding:2px 8px; font-size:.78rem; }
.form-control[type="file"]::file-selector-button{
  margin:-3px 8px -3px -8px; padding:3px 10px;
  border:0; border-inline-end:1px solid var(--dt-line-strong);
  background:var(--dt-surface-2); color:var(--dt-ink-2);
  font-size:.78rem; font-weight:500; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.form-control-sm[type="file"]::file-selector-button{ margin:-2px 8px -2px -8px; padding:2px 9px; font-size:.75rem; }
.form-control[type="file"]::file-selector-button:hover{ background:var(--dt-accent-soft); color:var(--dt-accent); }
/* Nút cạnh ô file / trong input-group: khớp control slim, không cao vống (ghi đè padding literal của theme) */
.input-group-sm > .btn, .input-group-sm > .btn.waves-effect{ padding-block:2px !important; padding-inline:.6rem !important; font-size:.78rem; }
.input-group > .btn{ padding-block:4px !important; }
.input-group .btn > i{ font-size:15px; line-height:1; vertical-align:-2px; }

/* Dòng bảng bấm được (mở chi tiết khi click cả dòng) */
tr.ei-clickable{ cursor:pointer; }