/* Alpine.js — ẩn element trước khi init để tránh FOUC */
[x-cloak] { display: none !important; }

/* Table responsive — đảm bảo chiều cao tối thiểu để tránh layout nhảy khi ít dữ liệu */
.card .table-responsive { min-height: 300px; }

/* ═══════════════════════════════════════════
   Tree Sidebar Navigation — dark theme
   Thiết kế theo template: sidebar #111827
   ═══════════════════════════════════════════ */

/* Override sidebar-nav grid để tree-nav tự quản layout */
.sidebar-nav.tree-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .75rem .65rem;
}

/* ── Standalone link (Dashboard) ── same as original .nav-link ── */
.tree-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    color: #475569;
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, transform .16s ease;
    white-space: nowrap;
}
    .tree-link:hover {
        background: var(--admin-sidebar-soft);
        transform: translateX(2px);
    }
.tree-link.active { background: var(--admin-sidebar-soft);   }

/* Icon box — same as original .nav-icon */
.tree-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: #2c8aff;
    font-size: .76rem;
    font-weight: 800;
}
.tree-link:hover  .tree-icon,
.tree-link.active .tree-icon,
.tree-group-hdr:hover .tree-icon,
.tree-group-hdr[aria-expanded="true"] .tree-icon { background: rgba(255,255,255,.14); color: #475569; }
.tree-group-hdr.has-active .tree-icon {
    background: rgba(96,165,250,.2);
    color: #3282db;
}

/* ── Group wrapper ── */
.tree-group { display: flex; flex-direction: column; }

/* ── Group header button ── */
.tree-group-hdr {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border: none;
    background: none;
    border-radius: 8px;
    color: #475569;
    font-weight: 700;
    font-size: .875rem;
    cursor: pointer;
    text-align: left;
    transition: background .16s ease, color .16s ease, transform .16s ease;
    white-space: nowrap;
}
    .tree-group-hdr:hover {
        background: var(--admin-sidebar-soft);
        color: #191a1c;
        transform: translateX(2px);
    }
    .tree-group-hdr[aria-expanded="true"] {
        background: var(--admin-sidebar-soft);
        color: #191a1c;
    }
.tree-group-hdr[aria-expanded="true"] .tree-chevron { transform: rotate(180deg); }
    .tree-group-hdr.has-active {
        color: #191a1c;
    }

.tree-label   { flex: 1; }
.tree-chevron { font-size: .62rem; opacity: .45; transition: transform .22s ease; }

/* ── Children container ── */
.tree-children {
  display: flex;
  flex-direction: column;
  margin: 1px 0 3px 1.15rem;
  padding-left: .7rem;
  border-left: 1px solid rgba(255,255,255,.08);
}

/* ── Child link ── */
.tree-child {
    display: flex;
    align-items: center;
    padding: .4rem .75rem;
    border-radius: 7px;
    color: #475569;
    font-size: .845rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .14s, color .14s;
    white-space: nowrap;
}
    .tree-child:hover {
        color: #295ba3;
        background: rgba(255,255,255,.05);
    }
    .tree-child.active {
        color: #3282db;
        background: var(--admin-sidebar-soft);
        font-weight: 700;
    }

/* ── Sub-group label (e.g. "Phiếu kho") ── */
.tree-child-group-label {
    padding: .5rem .75rem .15rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-top: .25rem;
}

/* ── Divider ── */
.tree-divider {
  height: 1px;
  background: rgba(255,255,255,.18);
  margin: .6rem .5rem;
}

/* Navbar context badges — Tenant & Store hiển thị trên thanh ngang */
.navbar-ctx-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .7rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  transition: opacity .15s, box-shadow .15s;
  border: 1px solid transparent;
}
.navbar-ctx-badge span { overflow: hidden; text-overflow: ellipsis; }
.navbar-ctx-badge:hover { opacity: .85; box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb),.2); }

.navbar-ctx-tenant {
  background: rgba(var(--bs-warning-rgb), .12);
  color: var(--bs-warning-emphasis);
  border-color: rgba(var(--bs-warning-rgb), .25);
}
.navbar-ctx-store {
  background: rgba(var(--bs-primary-rgb), .1);
  color: var(--bs-primary);
  border-color: rgba(var(--bs-primary-rgb), .2);
}
.navbar-ctx-code {
  margin-left: .35rem;
  padding: .05rem .3rem;
  border-radius: 6px;
  font-size: .7rem;
  background: rgba(0, 0, 0, .08);
  color: inherit;
  opacity: .8;
}

/* Layout adjustments */
.admin-content {
  padding: 0;
}

/* Nav label separator trong sidebar */
.nav-label {
  padding: 0.75rem 1rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.6;
}

/* Icon box cho dashboard stat cards */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

/* Table với hover highlight */
.table-hover tbody tr:hover {
  cursor: pointer;
}

/* Loading overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}

/* Avatar initials — fallback khi không có ảnh */
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  user-select: none;
  letter-spacing: 0.02em;
}
.avatar-initials.avatar-sm { width: 32px; height: 32px; font-size: 0.7rem; }
.avatar-initials.avatar-md { width: 40px; height: 40px; font-size: 0.85rem; }
.avatar-initials.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }

.avatar-img.avatar-sm { width: 32px;  height: 32px; }
.avatar-img.avatar-md { width: 40px;  height: 40px; }
.avatar-img.avatar-lg { width: 56px;  height: 56px; }

/* Sidebar user info block */
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
    .sidebar-user-info strong {
        font-size: .85rem;
        color: #1f2937;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
.sidebar-user-info small {
  font-size: .72rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Store badge trong sidebar */
.sidebar-store-badge {
    display: flex;
    align-items: center; 
    gap: .4rem;
    margin: .75rem .75rem .25rem;
    padding: .45rem .75rem;
    border-radius: 8px;
    background: rgba(var(--bs-primary-rgb), .12);
    color: #2563eb;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-store-badge:hover {
  background: rgba(var(--bs-primary-rgb), .2);
  color: #bfdbfe;
}
.sidebar-store-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Pagination compact */
.pagination-info {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

.form-check-input {
    border: 1px solid #7c7c7c !important;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive / Mobile — fixes cho iPhone và màn hình nhỏ
   ═══════════════════════════════════════════════════════════════ */

/*  card-header dạng flex: cho phép wrap trên màn hình nhỏ
    Áp dụng cho pattern: card-header d-flex justify-content-between  */
.card-header.d-flex,
.card-footer.d-flex {
    flex-wrap: wrap;
    gap: .4rem;
}

/*  Ngăn scroll ngang toàn trang khi content tràn  */
.admin-shell {
    overflow-x: hidden;
}
.admin-main {
    min-width: 0;
    overflow-x: hidden;
}

/*  Page header — flex layout: title trái, actions phải, wrap trên mobile  */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.page-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0;
    line-height: 1.3;
}

.page-subtitle {
    font-size: .85rem;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    /*  Modal body: không để overflow rò ra ngoài viewport  */
    .modal-body {
        overflow-x: hidden;
    }

    /*  Modal tabs: cho phép wrap khi nhiều tab không vừa 1 hàng  */
    .modal .nav-tabs {
        flex-wrap: wrap;
        gap: .125rem;
    }
    .modal .nav-tabs .nav-link {
        padding: .35rem .65rem;
        font-size: .83rem;
    }
}

@media (max-width: 575.98px) {
    /*  Page header: stack dọc trên xs, buttons tự stretch  */
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .page-header > div,
    .page-header > span {
        width: 100%;
    }
    .page-header .d-flex {
        flex-wrap: wrap;
    }
    .page-header .btn {
        flex: 1 1 auto;
    }

    /*  Admin content: đảm bảo không bị overflow  */
    .admin-content {
        min-width: 0;
    }

    /*  Filter cols dạng col-auto với inline min-width: wrap xuống dòng thay vì overflow  */
    .card .row.g-2 > .col-auto {
        flex-shrink: 1;
        min-width: 0;
    }
    .card .row.g-2 > .col-auto > .ls-select,
    .card .row.g-2 > .col-auto > .form-select,
    .card .row.g-2 > .col-auto > .input-group {
        min-width: 0 !important;
        width: 100%;
    }

    /*  Giảm padding navbar trên xs  */
    .admin-navbar .container-fluid {
        padding-inline: .75rem;
    }

    /*  Assessment evaluate modal: objective row wrap trên xs  */
    .eval-obj-row {
        flex-direction: column;
        align-items: stretch !important;
    }
    .eval-obj-row .btn-group {
        width: 100%;
    }
    .eval-obj-row .btn-group .btn {
        flex: 1;
        padding: .25rem .2rem;
        font-size: .78rem;
    }
}

/*  btn-xs — Bootstrap 5 không có kích cỡ này, định nghĩa thủ công  */
.btn-xs {
    padding: .1rem .4rem;
    font-size: .75rem;
    border-radius: .2rem;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   receipt-voucher-ux-optimization #9 — Sticky bottom summary bar
   (Phiếu thu: Tổng / Đã phân bổ / Còn dư / lỗi / checkbox số dư + Xác nhận)
   .admin-sidebar là position:fixed width var(--sidebar-width); .admin-main
   có margin-left tương ứng — dùng cùng biến để bar không đè lên sidebar.
   ═══════════════════════════════════════════════════════════════ */
.receipt-sticky-bar {
    position: fixed;
    left: var(--sidebar-width, 280px);
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: .6rem 1rem;
    background: #fff;
    border-top: 1px solid var(--admin-border, #e5e7eb);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
    transition: left .2s ease;
}
.receipt-sticky-bar--warning { background: #fff8e6; }
.receipt-sticky-bar--danger  { background: #fdecec; }
.receipt-sticky-bar--ok      { background: #eafaf1; }

/*  Đệm dưới trang để nội dung cuối cùng không bị sticky bar che mất — bar có thể cao hơn 1 dòng khi wrap
    trên màn nhỏ hoặc khi banner lỗi/checkbox hiện thêm, nên đệm dư khá rộng để an toàn.  */
.receipt-sticky-bar-spacer { height: 160px; }

@media (max-width: 991.98px) {
    .receipt-sticky-bar { left: 0; }
}
body.sidebar-mini .receipt-sticky-bar {
    left: var(--sidebar-mini-width, 84px);
}

/* ═══════════════════════════════════════════════════════════════
   Dark mode overrides — sidebar tree navigation
   Tree nav hardcodes colors designed for the light-mode white
   sidebar; these selectors flip them for the dark-mode near-black
   sidebar (#090f1d / --admin-sidebar-soft #172033).
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .tree-link,
html[data-theme="dark"] .tree-group-hdr {
    color: var(--admin-sidebar-text, #d1d5db);
}

html[data-theme="dark"] .tree-link:hover,
html[data-theme="dark"] .tree-link.active,
html[data-theme="dark"] .tree-group-hdr:hover,
html[data-theme="dark"] .tree-group-hdr[aria-expanded="true"],
html[data-theme="dark"] .tree-group-hdr.has-active {
    color: var(--admin-sidebar-text-strong, #f3f4f6);
}

html[data-theme="dark"] .tree-child {
    color: var(--admin-sidebar-text, #d1d5db);
}

html[data-theme="dark"] .tree-child:hover {
    color: #bfdbfe;
    background: rgba(255,255,255,.05);
}

html[data-theme="dark"] .tree-child.active {
    color: #93c5fd;
}

html[data-theme="dark"] .sidebar-store-badge {
    color: #bfdbfe;
    background: rgba(96,165,250,.14);
}

html[data-theme="dark"] .sidebar-store-badge:hover {
    color: #dbeafe;
    background: rgba(96,165,250,.22);
}

/*  Loading overlay: trắng chói trên dark mode → dùng nền tối bán trong suốt  */
html[data-theme="dark"] .loading-overlay {
    background: rgba(15,23,42,.65);
}

/*  Bulk action bar — màu nền thích nghi theo theme  */
.bulk-action-bar {
    background: rgba(var(--bs-primary-rgb), .07);
}
html[data-theme="dark"] .bulk-action-bar {
    background: rgba(var(--bs-primary-rgb), .12);
}

/*  text-dark safety — Bootstrap 5.3 không override --bs-dark trong
    [data-bs-theme=dark], nên text-dark vẫn là #212529 (đen) đúng bằng
    --bs-body-bg trong dark mode → chữ vô hình.
    Chỉ target link và heading-sized elements (không phải badge/button
    có nền màu — những thứ đó cần text tối để đảm bảo contrast).         */
html[data-theme="dark"] a.text-dark,
html[data-theme="dark"] h1.text-dark, html[data-theme="dark"] .h1.text-dark,
html[data-theme="dark"] h2.text-dark, html[data-theme="dark"] .h2.text-dark,
html[data-theme="dark"] h3.text-dark, html[data-theme="dark"] .h3.text-dark,
html[data-theme="dark"] h4.text-dark, html[data-theme="dark"] .h4.text-dark,
html[data-theme="dark"] h5.text-dark, html[data-theme="dark"] .h5.text-dark,
html[data-theme="dark"] h6.text-dark, html[data-theme="dark"] .h6.text-dark {
    color: var(--bs-body-color, #dee2e6) !important;
}
/* ═══════════════════════════════════════════════════════════════
   Bảng danh mục dạng cây (Views/Product/Category.cshtml)
   Mỗi node vẫn là 1 <tr> phẳng — thứ tự cha-trước-con do server trả
   về, thụt lề bằng padding-left inline theo item.level.
   ═══════════════════════════════════════════════════════════════ */
.cat-tree-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/*  Nút thu gọn / mở rộng nhánh — chỉ hiện ở node đang có dòng con  */
.cat-tree-toggle {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cat-tree-toggle:hover { background: rgba(0, 0, 0, .07); }
.cat-tree-toggle > i   { transition: transform .18s ease; }
.cat-tree-toggle.is-open > i { transform: rotate(90deg); }

/*  Giữ chỗ đúng bằng nút toggle để tên các node lá vẫn thẳng cột  */
.cat-tree-spacer { flex-shrink: 0; width: 1.35rem; }

/*  Mũi tên chỉ quan hệ cha → con, nhạt để không cướp sự chú ý  */
.cat-tree-guide {
    flex-shrink: 0;
    font-size: .8rem;
    color: var(--bs-secondary-color, #6c757d);
    opacity: .5;
}

/*  Dòng cha được kéo thêm vào chỉ để giữ ngữ cảnh cây khi tìm kiếm
    (không khớp từ khóa) → làm mờ nhẹ để phân biệt với kết quả thật.  */
.cat-row-context > td { opacity: .68; }

html[data-theme="dark"] .cat-tree-toggle:hover { background: rgba(255, 255, 255, .09); }

/* ── Order Print Modal — chỉ in nội dung phiếu, ẩn toàn bộ phần còn lại của trang ────── */
@media print {
  body * { visibility: hidden; }
  #orderPrintModal, #orderPrintModal * { visibility: visible; }
  #orderPrintModal { position: absolute; top: 0; left: 0; width: 100%; }
  #orderPrintModal .modal-dialog { max-width: 100%; margin: 0; }
  #orderPrintModal .no-print { display: none !important; }
}

/* ── Admission lead pipeline stepper (admission-lead-workflow-revamp UI polish) ──────── */
.lead-step-btn {
    transition: transform .15s ease, box-shadow .15s ease;
}
.lead-step-btn--clickable {
    cursor: pointer;
}
.lead-step-btn--clickable:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.lead-step-btn--locked {
    cursor: not-allowed;
    opacity: .55;
}
.lead-step-btn--current {
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15);
}
.lead-step-connector {
    height: 3px;
    border-radius: 2px;
    background-color: #e9ecef;
    transition: background-color .3s ease;
}

/* ── Rich log editor — Summernote (admission-lead-workflow-revamp change-request) ────── */
/* Summernote thay div gốc (.rich-log-editor-body, bị nó ẩn đi sau init) bằng khung .note-editor/
   .note-editable riêng — ràng buộc kích thước ảnh phải nhắm vào .note-editable, không phải
   .rich-log-editor-body nữa. */
.note-editable img {
    max-width: 100%;
    max-height: 220px;
    border-radius: 4px;
    margin: 2px 0;
}
.note-editor.note-frame {
    border-radius: .25rem;
}
/* Hiển thị log đã lưu (Detail.cshtml timeline, _QuickLogModal lịch sử) — cùng ràng buộc kích
   thước ảnh như editor để ảnh gốc lớn không phá layout danh sách. */
.log-content-body img {
    max-width: 100%;
    max-height: 260px;
    width: auto;
    height: auto;
    border-radius: 6px;
    margin: 4px 0;
    display: block;
    object-fit: contain;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

/* ── Admission Kanban board (Index.cshtml view toggle) ─────────────────────────────────────
   Bảng màu/tỉ lệ tham khảo file redesign tinikid-lead-kanban-redesign.html — chuyển sang biến
   CSS (--accent/--badge-bg/--badge-text) bind qua :style trong Alpine (admissionHelpers.
   kanbanStatusColors) thay vì hardcode class per-status, vì màu phụ thuộc lead.status động. */
.kanban-funnel {
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    overflow-x: auto;
}
.kanban-funnel-step {
    flex: 1;
    min-width: 128px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 14px;
    position: relative;
}
.kanban-funnel-step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 14px;
    height: 2px;
    background: #dbe2df;
}
.kanban-funnel-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent, #8598A3);
}
.kanban-funnel-step .kanban-funnel-count { font-size: 1.05rem; font-weight: 800; line-height: 1.15; color: #152621; }
.kanban-funnel-step .kanban-funnel-label { font-size: .72rem; font-weight: 600; color: #5B6B66; }

.kanban-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    align-items: flex-start;
}
.kanban-col {
    background: #EEF4F1;
    border-radius: 16px;
    flex: 0 0 272px;
    width: 272px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 430px);
    min-height: 280px;
    transition: background-color .12s ease, outline-color .12s ease;
}
.kanban-col--dragover {
    background: #DCEFE8;
    outline: 2px dashed var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}
.kanban-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
    flex-shrink: 0;
}
.kanban-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--accent, #8598A3); }
.kanban-col-title { font-size: .82rem; font-weight: 700; flex: 1; color: #152621; }
.kanban-col-count {
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--badge-bg, rgba(0, 0, 0, .05));
    color: var(--badge-text, #5B6B66);
}
.kanban-col-body {
    padding: 0 8px 10px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* App chưa có custom scrollbar toàn cục — style riêng ở đây để phần cuộn NGẦM bên trong cột
   (khi 1 cột nhiều lead hơn max-height) có tín hiệu rõ ràng thay vì scrollbar mặc định trong. */
.kanban-col-body::-webkit-scrollbar { width: 6px; }
.kanban-col-body::-webkit-scrollbar-thumb { background: #C7D3CF; border-radius: 10px; }
.kanban-col-body::-webkit-scrollbar-track { background: transparent; }

.kanban-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-left: 3px solid var(--accent, #C9D3D6);
    box-shadow: 0 1px 2px rgba(16, 38, 32, .05);
    padding: 10px 11px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: box-shadow .12s ease, transform .12s ease, opacity .12s ease;
}
.kanban-card--draggable { cursor: grab; }
.kanban-card--draggable:hover { box-shadow: 0 6px 16px -6px rgba(16, 38, 32, .2); transform: translateY(-1px); }
.kanban-card--draggable:active { cursor: grabbing; }
.kanban-card--dragging { opacity: .45; }

.kanban-card-top { display: flex; align-items: center; gap: 8px; }
.kanban-card-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 800;
    color: #fff;
    background: var(--accent, #8598A3);
}
.kanban-card-name { font-size: .78rem; font-weight: 700; line-height: 1.2; color: #152621; }
.kanban-card-age { font-size: .68rem; color: #8598A3; font-weight: 500; }

.kanban-card-rows { display: flex; flex-direction: column; gap: 4px; }
.kanban-card-row { display: flex; align-items: center; gap: 6px; font-size: .71rem; color: #5B6B66; }
.kanban-card-row .bi { font-size: .72rem; color: #8598A3; flex-shrink: 0; }
.kanban-card-row b { font-weight: 600; color: #152621; }
.kanban-card-row a { color: inherit; text-decoration: none; }
.kanban-card-row a:hover { color: var(--bs-primary, #0d6efd); text-decoration: underline; }

.kanban-src-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .66rem;
    font-weight: 700;
    padding: 2px 8px 2px 6px;
    border-radius: 20px;
    width: fit-content;
}

.kanban-overdue {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    font-weight: 700;
    color: #DC4C4C;
}

.kanban-card-actions { display: flex; gap: 5px; }
.kanban-card-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: .66rem;
    font-weight: 600;
    padding: 5px 0;
    border-radius: 7px;
}
.kanban-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.kanban-empty-hint {
    font-size: .72rem;
    color: var(--bs-secondary-color, #9ca3af);
    text-align: center;
    padding: 22px 8px;
    margin: 2px 2px;
    border: 1.5px dashed #C7D3CF;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Chứng từ tài chính (Phiếu Thu/Chi, Danh mục Khoản thu chi) — UI polish
   Ngôn ngữ thiết kế: border nhạt + shadow rất nhẹ + radius lớn, cùng công thức
   đã dùng ở .iei-left-panel (IncomeExpenseItem.cshtml) — mở rộng thành 1 nhóm
   class dùng chung cho cả 3 trang thuộc "chứng từ tài chính" trong TuitionHub.
   Chỉ dùng qua class riêng (.vd-*) — KHÔNG override .card mặc định của
   Bootstrap để tránh ảnh hưởng các trang khác ngoài phạm vi này.
   ═══════════════════════════════════════════════════════════════════════════ */

.vd-card {
    border: 1px solid rgba(16, 24, 40, .06);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.vd-card > .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(16, 24, 40, .06);
    padding: .8rem 1.1rem;
}
.vd-card > .card-body { padding: 1.1rem; }
.vd-card > .card-footer {
    background: transparent;
    border-top: 1px solid rgba(16, 24, 40, .06);
}

/* Icon tròn nhỏ trước tiêu đề card — thay cho icon "trần" cạnh chữ, cùng công
   thức màu (nền nhạt .1 + chữ đậm) đã dùng ở navbar-ctx-badge/tree-icon. Màu cụ
   thể set qua text-* nối theo (VD "vd-card-icon text-success") — nền tự suy ra
   qua currentColor + opacity nên không cần khai riêng từng biến thể màu. */
.vd-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: .82rem;
    flex-shrink: 0;
    /* Nền tự suy từ màu chữ hiện tại (VD kết hợp class "text-success") — tránh phải khai riêng
       từng biến thể màu cho mỗi loại đối tượng/section. */
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Card "Tổng tiền thu/chi" — điểm neo thị giác chính của trang, viền trái theo
   màu bản chất phiếu (Thu=success, Chi=danger) để nhận diện ngay không cần đọc. */
.vd-total-card {
    border: 1px solid rgba(16, 24, 40, .06);
    border-left: 4px solid var(--bs-primary);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.vd-total-card.is-thu { border-left-color: var(--bs-success); }
.vd-total-card.is-chi { border-left-color: var(--bs-danger); }
.vd-total-card > .card-body { padding: 1.1rem 1.25rem; }
.vd-total-card .vd-total-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color);
}

/* Empty-state block dùng cho các bảng công nợ/gợi ý khi rỗng — nâng cấp từ 1
   dòng text-muted đơn thuần, cùng phong cách icon-mờ-lớn đã dùng ở IncomeExpenseItem. */
.vd-empty {
    text-align: center;
    padding: 1.75rem 1rem;
    color: var(--bs-secondary-color);
}
.vd-empty i {
    font-size: 1.9rem;
    opacity: .22;
    display: block;
    margin-bottom: .45rem;
}
.vd-empty .vd-empty-title {
    font-weight: 600;
    font-size: .88rem;
    color: var(--bs-body-color);
    margin-bottom: .15rem;
}

/* "Loại phiếu" segmented — dùng đúng idiom .btn-check chuẩn Bootstrap 5 (input
   radio ẩn + label.btn), KHÔNG đổi input[type=radio]/x-model bên dưới — chỉ đổi
   markup trình bày để đồng bộ cảm giác với nhóm nút "Loại đối tượng" cạnh nó. */
.vd-type-hint { font-weight: 400; opacity: .75; }

/* Filter bar nhiều cột (VD /ReceiptVoucher — Tháng/Năm/Trạng thái/Loại phiếu/Học sinh) — ép đủ trên
   1 dòng ở tablet/desktop (≥576px) thay vì nhảy dòng giữa chừng khi tổng min-width các cột vượt bề
   rộng container; còn lại (viewport quá hẹp để vừa dù đã ép nowrap) cho cuộn ngang TRONG chính thanh
   filter, không cuộn cả trang. Dưới 576px vẫn giữ hành vi stack dọc đã có sẵn (rule .card .row.g-2 >
   .col-auto phía trên) — KHÔNG áp dụng nowrap cho mobile, tránh phá layout 1-cột đã đúng trên điện thoại. */
@media (min-width: 576px) {
  .rv-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px; /* chừa chỗ cho scrollbar ngang nếu xuất hiện, tránh đè lên nội dung */
  }
  .rv-filter-row > .col-auto { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ls-cmp — classMultiPicker (chọn nhiều lớp, Views/Shared/_ClassMultiPicker.cshtml).
   Dựng trên nền .ls-select, chỉ bổ sung phần riêng.
   ═══════════════════════════════════════════════════════════════════════════ */
.ls-cmp__trigger              { min-height: 36px; border-radius: .6rem; }
.ls-cmp__icon                 { color: var(--bs-primary); font-size: .9rem; flex-shrink: 0; }
.ls-cmp .ls-select__label     { flex-wrap: nowrap; overflow: hidden; }
.ls-cmp__badge {
  flex-shrink: 0;
  min-width: 20px; height: 20px; padding: 0 .35rem;
  border-radius: 10px;
  background: var(--bs-primary); color: #fff;
  font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ls-cmp__dropdown             { min-width: 280px; max-width: min(360px, 92vw); border-radius: .75rem; }
.ls-cmp__options              { max-height: 320px; }
.ls-cmp__all                  { font-weight: 600; }
.ls-cmp__meta                 { flex-shrink: 0; font-size: .72rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.ls-cmp__only {
  display: none;
  flex-shrink: 0;
  border: 0; border-radius: 100px;
  padding: .05rem .5rem;
  font-size: .7rem; font-weight: 600;
  color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1);
}
.ls-cmp__only:hover                     { background: rgba(var(--bs-primary-rgb), .2); }
.ls-cmp__opt:hover .ls-cmp__only,
.ls-cmp__opt:focus-within .ls-cmp__only { display: inline-block; }
.ls-cmp__opt:hover .ls-cmp__meta        { display: none; }
/* Màn cảm ứng không có hover ⇒ luôn hiện nút "Chỉ lớp này". */
@media (hover: none) {
  .ls-cmp__only              { display: inline-block; }
  .ls-cmp__opt .ls-cmp__meta { display: none; }
}
.ls-cmp__clear                { border: 0; background: transparent; color: var(--bs-secondary-color); padding: 0 .15rem; font-size: .75rem; }
.ls-cmp-enter                 { transition: opacity .12s ease, transform .12s ease; }
.ls-cmp-enter-start           { opacity: 0; transform: translateY(-4px); }
.ls-cmp-enter-end             { opacity: 1; transform: translateY(0); }

/* 2026-11-01 — chế độ nhúng ?embed=1 (trang mở trong modal iframe): chỉ còn nội dung. */
body.is-embed { --sidebar-width: 0px; }
body.is-embed .admin-sidebar,
body.is-embed .sidebar-backdrop,
body.is-embed .admin-navbar,
body.is-embed .asst-fab, body.is-embed .asst-panel { display: none !important; }
body.is-embed .admin-main { margin-left: 0 !important; min-height: auto; }

/* Modal iframe toàn màn hình (phiếu học phí, phiếu thu, sổ điểm danh...) */
.ls-frame-modal .modal-body { padding: 0; position: relative; }
.ls-frame-modal iframe { border: 0; width: 100%; height: 100%; display: block; }
.ls-frame-modal__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bs-body-bg, #fff); }
.ls-frame-modal__tabs { gap: 2px; flex-wrap: wrap; }
.ls-frame-modal__tabs .nav-link { font-size: .85rem; }