/* ============================================================
   THEME — Quản lý Xưởng Tóc
   Bảng màu/spacing/typography theo docs/scope.md mục E
   ============================================================ */
:root {
    --color-sidebar-bg: #1e2a3a;
    --color-sidebar-bg-2: #17222f;
    --color-sidebar-text: #e6ecf3;
    --color-sidebar-text-muted: #97a4b3;
    --color-sidebar-active: #2d4055;
    --color-sidebar-accent: #1bb394;

    --color-primary: #1bb394;
    --color-primary-hover: #16a085;
    --color-primary-soft: #e6f7f2;

    --color-info: #17a2b8;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;
    --color-success: #27ae60;

    --color-bg: #f4f6f8;
    --color-card: #ffffff;
    --color-border: #e1e5ea;
    --color-border-soft: #eef1f4;
    --color-text: #2c3e50;
    --color-text-muted: #6c7a89;

    --color-table-header: #e6f4ee;
    --color-table-zebra: #fafbfc;
    --color-row-hover: #fff8d8;
    --color-row-selected: #fff4b8;

    --radius: 6px;
    --radius-sm: 4px;

    --shadow-sm: 0 1px 2px rgba(20, 30, 50, .04);
    --shadow-md: 0 4px 12px rgba(20, 30, 50, .08);

    --sidebar-w: 240px;
    --sidebar-w-collapsed: 64px;
    --header-h: 56px;
    --tabbar-h: 44px;

    --font-base: 14px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.45;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4 { color: var(--color-text); font-weight: 600; margin: 0 0 12px; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-shell__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1;
    padding: 20px 24px;
    overflow: auto;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.app-sidebar {
    width: var(--sidebar-w);
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-text);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width .2s ease;
    position: sticky;
    top: 0;
    height: 100vh;
}

.app-sidebar__brand {
    height: var(--header-h);
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    white-space: nowrap;
    overflow: hidden;
}
.app-sidebar__brand i { color: var(--color-sidebar-accent); margin-right: 10px; font-size: 18px; }

.app-sidebar__quick {
    padding: 12px;
}
.app-sidebar__quick .btn-quick {
    width: 100%;
    background: var(--color-primary);
    border: 0;
    color: #fff;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.app-sidebar__quick .btn-quick:hover { background: var(--color-primary-hover); }

.app-sidebar__nav {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
}
.app-sidebar__item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--color-sidebar-text);
    font-size: 13.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-sidebar__item a i {
    width: 18px;
    text-align: center;
    color: var(--color-sidebar-text-muted);
    flex-shrink: 0;
}
.app-sidebar__item a:hover {
    background: rgba(255, 255, 255, .04);
    color: #fff;
}
.app-sidebar__item--active > a {
    background: var(--color-sidebar-active);
    color: #fff;
    border-left: 3px solid var(--color-sidebar-accent);
    padding-left: 13px;
}
.app-sidebar__item--active > a i { color: var(--color-sidebar-accent); }

.app-sidebar__section {
    padding: 12px 16px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-sidebar-text-muted);
}

.app-sidebar__footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    color: var(--color-sidebar-text-muted);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-sidebar__footer:hover { color: #fff; }

/* Collapsed state */
.app-shell--sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
.app-shell--sidebar-collapsed .app-sidebar__brand span,
.app-shell--sidebar-collapsed .app-sidebar__item a span,
.app-shell--sidebar-collapsed .app-sidebar__quick .btn-quick span,
.app-shell--sidebar-collapsed .app-sidebar__section,
.app-shell--sidebar-collapsed .app-sidebar__footer span { display: none; }
.app-shell--sidebar-collapsed .app-sidebar__item--active > a { padding-left: 16px; border-left: 0; }
.app-shell--sidebar-collapsed .app-sidebar__quick .btn-quick { padding: 8px; }

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
    height: var(--header-h);
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.app-header__toggle {
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 16px;
}
.app-header__toggle:hover { background: var(--color-border-soft); color: var(--color-text); }

.app-header__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__search {
    margin-left: 12px;
    width: 320px;
    max-width: 40%;
    position: relative;
}
.app-header__search input {
    width: 100%;
    height: 32px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 13px;
    background: #fafbfc;
}
.app-header__search input:focus {
    outline: 0;
    border-color: var(--color-primary);
    background: #fff;
}
.app-header__search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
}

.app-header__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-header__icon {
    width: 36px; height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    position: relative;
}
.app-header__icon:hover { background: var(--color-border-soft); color: var(--color-text); }

.app-header__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: var(--radius);
    cursor: pointer;
}
.app-header__user:hover { background: var(--color-border-soft); }
.app-header__user .avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}

/* ============================================================
   PAGE COMPONENTS
   ============================================================ */
.page-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}
.page-title { font-size: 22px; font-weight: 600; }
.page-title-row .page-actions { margin-left: auto; display: flex; gap: 8px; }

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.card + .card { margin-top: 16px; }

.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.filter-bar .search { flex: 1; min-width: 200px; max-width: 360px; position: relative; }
.filter-bar .search input {
    width: 100%;
    /* Height + padding + background sẽ được set bởi rule đồng nhất filter-bar bên dưới */
}
.filter-bar .search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); }
.filter-bar .spacer { flex: 1; }

/* Đồng nhất chiều cao mọi filter element: 38px (match Bootstrap .form-control) */
.filter-bar input.form-control,
.filter-bar select.form-control,
.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar input[type="number"],
.filter-bar select:not(.js-selectize),
.filter-bar .selectize-control.single .selectize-input,
.filter-bar .search input {
    height: 38px;
    min-height: 38px;
    padding: 7px 10px;
    line-height: 22px;
    font-size: 13.5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    box-sizing: border-box;
}
/* Selectize trong filter-bar: thêm padding phải cho mũi tên dropdown */
.filter-bar .selectize-control.single .selectize-input {
    padding-right: 24px;
}
/* Ô search có icon trái → padding-left lớn hơn + background muted */
.filter-bar .search input {
    padding-left: 30px;
    background: #fafbfc;
}
/* Nút trong filter-bar cũng cao 38px cho đồng bộ visual */
.filter-bar .btn {
    height: 38px;
    min-height: 38px;
}

/* ============================================================
   SELECTIZE — đồng nhất với form-control của hệ thống
   ============================================================ */

/* Selectize copy class của <select> gốc (form-control) lên .selectize-control wrapper.
   → Reset border/padding/background của Bootstrap .form-control để không bị "chồng" 2 border. */
.selectize-control.form-control {
    padding: 0;
    border: 0;
    height: auto;
    background: transparent;
    box-shadow: none;
    line-height: normal;
}
.selectize-control.form-control:focus {
    box-shadow: none;
    border-color: transparent;
}

/* Phần input thật sự (nhìn thấy) — match Bootstrap form-control height (~38px) */
.selectize-control.single .selectize-input,
.selectize-control.multi  .selectize-input {
    min-height: 38px;
    padding: 8px 24px 8px 10px;
    line-height: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: none;
    font-size: 13.5px;
    background: #fff;
    color: var(--color-text);
}
/* Single-select: text item dài → cắt ellipsis trên 1 dòng, không wrap xuống dòng 2 */
.selectize-control.single .selectize-input {
    white-space: nowrap;
    overflow: hidden;
}
.selectize-control.single .selectize-input .item {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* KHÔNG override style trên .selectize-input > input — Selectize tự quản lý
   height/line-height/margin/width của ô gõ tìm. Override sẽ phá height đồng bộ
   với wrapper. */

/* Wrapper Selectize không giãn quá parent */
.selectize-control { max-width: 100%; }
.selectize-input { max-width: 100%; }
.selectize-input.focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27, 179, 148, .15);
}
.selectize-input.dropdown-active {
    border-radius: var(--radius) var(--radius) 0 0;
}
.selectize-input.disabled,
.selectize-control.disabled .selectize-input {
    background: #f5f6f8;
    opacity: .7;
}

/* Dropdown popup — nền xám nhẹ, hover trắng để nổi bật, selected dùng primary */
.selectize-dropdown,
.selectize-dropdown.form-control {
    background: #f4f5f7;            /* xám nhẹ */
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    font-size: 13.5px;
    padding: 0;
    z-index: 1100;
    color: var(--color-text);
}
.selectize-dropdown-content {
    background: #f4f5f7;
    max-height: 260px;
    padding: 4px 0;
}
.selectize-dropdown .option {
    padding: 7px 12px;
    line-height: 18px;
    border: 0;
    background: transparent;        /* lấy nền từ container */
}
.selectize-dropdown .active {
    background: #fff;               /* hover/keyboard focus → trắng nổi bật */
    color: var(--color-text);
}
.selectize-dropdown .selected,
.selectize-dropdown .active.selected {
    background: var(--color-primary);
    color: #fff;
}
.selectize-dropdown .optgroup-header {
    padding: 6px 12px;
    background: var(--color-table-header);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}
.selectize-dropdown .create {
    padding: 7px 12px;
    color: var(--color-primary);
}

/* Trong filter-bar: không cho Selectize giãn flex */
.filter-bar .selectize-control { flex: 0 0 auto; min-width: 0; }
/* Trong form-group (modal): chiếm full width của grid cell */
.form-group .selectize-control { width: 100%; }
.form-group .selectize-input { padding-top: 8px; padding-bottom: 8px; min-height: 38px; }

/* Khi dropdown flip lên trên (above): border-radius ngược lại */
.selectize-dropdown[data-selectable-dir="up"],
.selectize-control.dropdown-up .selectize-dropdown {
    border-radius: var(--radius) var(--radius) 0 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
}

/* Selectize trong table cell — đồng nhất 38px với filter-bar / form-control */
.app-table .selectize-control { width: 100%; min-width: 180px; }
.app-table .selectize-input {
    min-height: 38px;
    padding: 7px 22px 7px 10px;
    line-height: 22px;
    font-size: 13.5px;
}
/* KHÔNG override .app-table .selectize-input > input — Selectize tự quản lý */

/* Disabled state — visible cue cho user (input nền xám + chữ mờ + cursor not-allowed).
   Áp cho mọi input/select/textarea trong app-table + app-modal. */
.app-table input:disabled,
.app-table textarea:disabled,
.app-table select:disabled,
.app-modal input:disabled,
.app-modal textarea:disabled,
.app-modal select:disabled,
.app-modal button:disabled {
    background-color: #f0f2f5 !important;
    color: #9aa3ad !important;
    cursor: not-allowed !important;
    opacity: 1;
    border-color: #d8dde3 !important;
}
.app-modal .selectize-control.disabled .selectize-input,
.app-table .selectize-control.disabled .selectize-input {
    background-color: #f0f2f5 !important;
    color: #9aa3ad !important;
    border-color: #d8dde3 !important;
    cursor: not-allowed !important;
    opacity: 1;
}
.app-modal .selectize-control.disabled .selectize-input > * {
    color: #9aa3ad !important;
}

/* Number/money cells trong line-items: đủ rộng để hiển thị 8 chữ số + ngăn dấu phẩy
   (vd "100,000,000" = 11 ký tự). Áp dụng cho cả <th>/<td>/input/span.
   - .col-qty   = qty input (8 chữ số nguyên hoặc 6 + 2 thập phân)
   - .col-money = money (8 chữ số nguyên)
   Layout có thể override bằng inline style="width:..." mạnh hơn min-width. */
.app-table .col-qty,
.app-table th.col-qty,
.app-table td.col-qty,
.app-table input.col-qty,
.app-table input.num-qty {
    min-width: 110px;
}
.app-table .col-money,
.app-table th.col-money,
.app-table td.col-money,
.app-table input.col-money,
.app-table input.num-money {
    min-width: 140px;
}
/* Số text trong cell (span hiện tiền): right-align + min-width */
.app-table td .num-money-text,
.app-table td .num-qty-text {
    display: inline-block;
    min-width: 100%;
    text-align: right;
}

/* Ô "Lý do lỗi" — rộng tối thiểu 300px để user gõ thoải mái. */
.app-table input.pri-defect-reason,
.app-table input.sec-defect-reason {
    min-width: 300px;
}

/* Inputs trong line-items modal: match style chuẩn Bootstrap-like (38px, padded, border, focus ring) */
.app-table input.line-note,
.app-table input.line-reason,
.app-table input.line-qty,
.app-table input.line-price,
.app-table input.line-planned,
.app-table input.line-actual,
.app-table input.line-cost,
.app-table input.line-total,
.app-table input.line-item-name,
.app-table input.pri-planned,
.app-table input.pri-actual,
.app-table input.pri-defect,
.app-table input.pri-defect-reason,
.app-table input.pri-labor,
.app-table input.sec-planned,
.app-table input.sec-actual,
.app-table input.sec-defect,
.app-table input.sec-defect-reason,
.app-table input.sec-labor,
.app-table input.num-qty,
.app-table input.num-money {
    width: 100%;
    height: 38px;
    padding: 7px 10px;
    line-height: 22px;
    font-size: 13.5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-text);
    box-sizing: border-box;
}
.app-table input.line-note:focus,
.app-table input.line-reason:focus,
.app-table input.line-qty:focus,
.app-table input.line-price:focus,
.app-table input.line-planned:focus,
.app-table input.line-actual:focus,
.app-table input.line-cost:focus,
.app-table input.line-total:focus,
.app-table input.line-item-name:focus,
.app-table input.pri-planned:focus,
.app-table input.pri-actual:focus,
.app-table input.pri-defect:focus,
.app-table input.pri-defect-reason:focus,
.app-table input.pri-labor:focus,
.app-table input.sec-planned:focus,
.app-table input.sec-actual:focus,
.app-table input.sec-defect:focus,
.app-table input.sec-defect-reason:focus,
.app-table input.sec-labor:focus,
.app-table input.num-qty:focus,
.app-table input.num-money:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27, 179, 148, .15);
}

/* ============================================================
   TABLE
   ============================================================ */
.app-table-wrap {
    overflow: auto;                       /* scroll cả 2 chiều: ngang + dọc */
    max-height: calc(100vh - 260px);      /* khoá chiều dọc để sticky header + paginator hoạt động */
}
/* Trong modal: modal-body đã tự scroll → bỏ max-height để tránh scroll lồng */
.app-modal__body .app-table-wrap {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}
.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
/* Bảng có sticky columns: bắt buộc table-layout: fixed + <colgroup>.
   Width = sum(col widths), min-width 100% để không bị co lại dưới wrap. */
.app-table.app-table--fixed {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
}
.app-table.app-table--fixed th,
.app-table.app-table--fixed td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* "Chi tiết phiếu" cells — 1 dòng, max 500px, ellipsis (cùng default rule, chỉ cap width).
   Trước thử 2-dòng `-webkit-line-clamp` nhưng làm vỡ vertical-align của <td> (baseline
   bị đẩy lên do display: -webkit-box thay table-cell). Giữ default 1 dòng. */
.app-table.app-table--fixed td.cell-detail {
    max-width: 500px;
}
.app-table thead th {
    background: var(--color-table-header);
    color: var(--color-text);
    text-align: left;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
}
/* Bảng có thead 2 row (rowspan/colspan) — row 2 phải sticky DƯỚI row 1.
   Top của row 2 = chiều cao row 1 (≈ 40px theo padding 10px + font-size 13.5px line-height 1.5).
   Hack đủ chính xác cho UI báo cáo; nếu thay đổi padding/font phải chỉnh hằng số này. */
.app-table.app-table--multihead thead tr.multihead-row-2 th {
    top: 40px;
}
.app-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: middle;
}
.app-table tbody tr:nth-child(2n) td { background: var(--color-table-zebra); }
.app-table tbody tr:hover td { background: var(--color-row-hover); }
.app-table tbody tr.is-selected td { background: var(--color-row-selected);}
.app-table .text-right { text-align: right; }
.app-table .text-center { text-align: center; }
.app-table .col-action { white-space: nowrap; }

/* ============================================================
   STICKY COLUMNS — fix cố định cột đầu khi scroll ngang
   ============================================================ */
.app-table th.sticky-col,
.app-table td.sticky-col {
    position: sticky;
    background: #fff;
    z-index: 2;
}
.app-table thead th.sticky-col {
    background: var(--color-table-header);
    z-index: 6; /* trên cả body sticky cell (z=2) và sticky thead (z=5) */
}
/* Zebra / hover / selected vẫn đúng cho sticky cells (background ưu tiên) */
.app-table tbody tr:nth-child(2n) td.sticky-col { background: var(--color-table-zebra); }
.app-table tbody tr:hover td.sticky-col { background: var(--color-row-hover); }
.app-table tbody tr.is-selected td.sticky-col { background: var(--color-row-selected); }
/* Cột sticky cuối: shadow phải để hint cho user là có scroll ngang */
.app-table th.sticky-col-last,
.app-table td.sticky-col-last {
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, .08);
}

.table-footer {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--color-border);
    background: #fafbfc;
    flex-wrap: wrap;
    gap: 8px;
}
.table-footer__total { color: var(--color-text-muted); }
.table-footer__spacer { flex: 1; }
.table-footer .pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.table-footer .pagination button {
    height: 28px; min-width: 28px; padding: 0 8px;
    border: 1px solid var(--color-border);
    background: #fff; border-radius: var(--radius-sm);
    cursor: pointer;
}
.table-footer .pagination button.is-active {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

/* ============================================================
   FORMS / BUTTONS
   ============================================================ */
/* minmax(0, 1fr) thay vì 1fr: cho phép cell co lại dưới intrinsic content size.
   Tránh trường hợp Selectize input gõ chữ dài làm grid-cell giãn → modal giãn theo. */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 16px; }
.form-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-group label { font-size: 13px; color: var(--color-text-muted); font-weight: 500; }
.form-group .form-control,
.form-group input,
.form-group select,
.form-group textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 13.5px;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
}
/* Input + select đơn dòng: ép cao 38px khớp filter-bar + Bootstrap .form-control.
   Loại trừ:
     - .selectized: select gốc đã bị Selectize ẩn (display:none)
     - type=checkbox/radio: giữ size mặc định
     - type=select-one: Selectize tạo <input type="select-one"> bên trong wrapper để gõ tìm,
       không được override height/padding/line-height (Selectize tự quản) */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="select-one"]),
.form-group select:not(.selectized) {
    height: 38px;
    padding: 7px 10px;
    line-height: 22px;
}
.form-group select:not(.selectized) {
    padding-right: 28px;  /* chỗ cho mũi tên dropdown native */
}
.form-group textarea {
    min-height: 60px;
    line-height: 1.45;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: 0; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27, 179, 148, .15);
}

/* Native <select> ngoài .form-group / .filter-bar (vd trong .app-table line-items):
   cũng match style chuẩn 38px, viền, padding cho dropdown */
.app-table select:not(.selectized),
.app-modal__body select:not(.selectized):not([multiple]) {
    height: 38px;
    padding: 7px 28px 7px 10px;
    font-size: 13.5px;
    line-height: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
}
.app-table select:not(.selectized):focus,
.app-modal__body select:not(.selectized):focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27, 179, 148, .15);
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: var(--color-danger); }
.form-group .help-text { font-size: 12px; color: var(--color-text-muted); }
.form-group .error-text { font-size: 12px; color: var(--color-danger); }

.btn {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn:hover { background: var(--color-border-soft); }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn-success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn-success:hover { background: #1e8449; border-color: #1e8449; color: #fff; }
.btn-warning { background: var(--color-warning); color: #fff; border-color: var(--color-warning); }
.btn-warning:hover { background: #d68910; border-color: #d68910; color: #fff; }
.btn-link { background: transparent; border: 0; color: var(--color-primary); }

/* Badges trạng thái */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.4; }
.badge i { font-size: 10px; }
.badge-success { background: #d6f0e0; color: #1d7c45; }
.badge-info    { background: #d8eef7; color: #156a8c; }
.badge-warning { background: #fbe7c0; color: #8a5a10; }
.badge-danger  { background: #fad8d3; color: #a02418; }
.badge-muted   { background: #e5e9ee; color: #4a5664; }

/* ============================================================
   INLINE FIELD VALIDATION ERROR
   ============================================================ */
.app-field-invalid {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, .12);
}
.app-field-error {
    color: var(--color-danger);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.3;
}

/* ============================================================
   FOCUS RING (a11y) — rõ khi keyboard nav
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.btn:focus-visible,
.btn-link:focus-visible {
    outline-offset: 2px;
}

/* ============================================================
   FILTER ACTIVE CHIPS — banner trên list khi có filter
   ============================================================ */
.app-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    background: #fff8d8;
    border-bottom: 1px solid #f0e4a0;
    font-size: 12.5px;
    align-items: center;
}
.app-filter-chips__label { color: var(--color-text-muted); margin-right: 4px; }
.app-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 12px;
}
.app-filter-chip__remove {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: 11px;
}
.app-filter-chip__remove:hover { color: var(--color-danger); }
.app-filter-clear-all {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
}

/* ============================================================
   SORTABLE TABLE HEADERS
   ============================================================ */
.app-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.app-table th.sortable::after {
    content: '\f0dc'; /* fa-sort */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--color-text-muted);
    opacity: .3;
    margin-left: 4px;
    font-size: 10px;
}
.app-table th.sortable.is-asc::after  { content: '\f0de'; opacity: 1; color: var(--color-primary); }
.app-table th.sortable.is-desc::after { content: '\f0dd'; opacity: 1; color: var(--color-primary); }

/* ============================================================
   RESPONSIVE STICKY — giảm sticky col khi screen nhỏ
   ============================================================ */
@media (max-width: 1023px) {
    /* Giữ 2 cột đầu sticky (#, mã), bỏ sticky 2 cột sau */
    .app-table th.sticky-col:nth-child(3),
    .app-table td.sticky-col:nth-child(3),
    .app-table th.sticky-col-last,
    .app-table td.sticky-col-last {
        position: static;
        box-shadow: none;
    }
}

/* Print stylesheet — F5 hoặc Ctrl+P ra giấy gọn */
@media print {
    .app-sidebar, .app-header, .filter-bar, .table-footer,
    .app-modal__close, .col-action, .btn { display: none !important; }
    .app-shell { display: block; }
    .app-content { padding: 0; }
    .app-table { font-size: 11px; }
}

/* ============================================================
   MODAL
   ============================================================ */
.app-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 25, 40, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.app-modal {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    width: 70%;
    max-width: 1200px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.app-modal--sm { width: 50%; max-width: 540px; }
.app-modal--md { width: 70%; max-width: 800px; }
.app-modal--lg { width: 85%; max-width: 1100px; }
.app-modal--xl { width: calc(100% - 32px); max-width: none; }

.app-modal__header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    flex-shrink: 0;
}
.app-modal__title { font-size: 18px; font-weight: 600; }
.app-modal__close { margin-left: auto; background: transparent; border: 0; cursor: pointer; font-size: 18px; color: var(--color-text-muted); }
.app-modal__close:hover { color: var(--color-text); }

/*
 * Body cần `min-height: 0` để cho flex item co lại được dưới content size.
 * Form bao quanh body+footer cũng dùng flex để footer luôn dính đáy modal.
 */
.app-modal__body {
    padding: 20px 20px 240px 20px;        /* padding-bottom rộng để scroll dư chỗ cho Selectize dropdown */
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}
.app-modal__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fafbfc;
    flex-shrink: 0;
}
.app-modal__footer .spacer { flex: 1; }

/*
 * Form bọc body+footer: dùng `display: contents` để loại form khỏi layout flex,
 * body và footer trở thành flex item trực tiếp của .app-modal → scroll luôn hoạt động.
 * (Hỗ trợ tất cả browser hiện đại từ 2019.)
 */
.app-modal > form {
    display: contents;
}

/* ============================================================
   AUTH (login)
   ============================================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e2a3a 0%, #1bb394 130%);
    padding: 16px;
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 28px 28px 24px;
}
.auth-card h1 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 4px;
}
.auth-card .auth-sub {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
    margin-bottom: 20px;
}
.auth-card .form-group { margin-bottom: 14px; }
.auth-card .btn-primary { width: 100%; height: 38px; font-weight: 500; justify-content: center; }
.auth-alert {
    background: #fad8d3;
    color: #a02418;
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}

/* ============================================================
   TOAST
   ============================================================ */
/* Notification stack — top-center, slide-in nhẹ.
   Prefix `.app-toast*` để tránh xung đột với Bootstrap `.toast` (load từ CDN trong
   layout.php) — Bootstrap set `opacity:0` + `max-width:350px` cho `.toast`, làm
   toast của ta invisible + sai layout (flex-basis ép theo max-width khi parent là
   flex column). */
.app-toast-stack {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 480px;
    pointer-events: none;
}
.app-toast {
    background: var(--color-info);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    max-width: 480px;
    white-space: nowrap;
    box-shadow: 0 6px 24px rgba(20, 30, 50, .18), 0 2px 6px rgba(20, 30, 50, .08);
    pointer-events: auto;
    opacity: 1;
    animation: app-toast-slide-in .18s ease-out;
}
@keyframes app-toast-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.app-toast--success { background: var(--color-success); }
.app-toast--error   { background: var(--color-danger); }
.app-toast--warning { background: var(--color-warning); }
.app-toast--info    { background: var(--color-info); }

/* ============================================================
   LOADING OVERLAY — toàn màn hình, fade in khi AJAX > 150ms
   ============================================================ */
#app-loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .32);                /* tint xám rõ — user thấy ngay là đang chờ */
    z-index: 3000;                                /* trên modal-backdrop (1000) và toast (2000) */
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;                          /* không chặn click khi đang hide */
    opacity: 0;
    transition: opacity .08s ease-out;            /* fade nhanh — perceived response */
}
#app-loading.is-active {
    display: flex;
    pointer-events: auto;
    opacity: 1;
}
.app-loading__panel {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--color-text);
}
.app-loading__panel i.fa-spinner {
    color: var(--color-primary);
    font-size: 22px;
}
.app-loading__text {
    font-weight: 500;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .app-shell .app-sidebar { width: var(--sidebar-w-collapsed); }
    .app-shell .app-sidebar__brand span,
    .app-shell .app-sidebar__item a span,
    .app-shell .app-sidebar__quick .btn-quick span,
    .app-shell .app-sidebar__section,
    .app-shell .app-sidebar__footer span { display: none; }
    .app-shell--sidebar-open .app-sidebar { width: var(--sidebar-w); }
    .app-shell--sidebar-open .app-sidebar__brand span,
    .app-shell--sidebar-open .app-sidebar__item a span,
    .app-shell--sidebar-open .app-sidebar__quick .btn-quick span,
    .app-shell--sidebar-open .app-sidebar__section,
    .app-shell--sidebar-open .app-sidebar__footer span { display: inline; }
}

@media (max-width: 767px) {
    .app-sidebar {
        position: fixed;
        left: 0; top: 0;
        z-index: 1000;
        transform: translateX(-100%);
    }
    .app-shell--sidebar-open .app-sidebar {
        transform: translateX(0);
        width: var(--sidebar-w);
    }
    .app-modal { width: 100% !important; max-width: none !important; border-radius: 0; max-height: 100vh; height: 100vh; }
    .app-modal-backdrop { padding: 0; }
    .app-content { padding: 12px; }
}

/* Drag-drop reorder cho danh mục */
.app-table tbody tr.is-dragging { opacity: 0.5; background: #e8f0ff; }
.app-table tbody td.js-drag-handle { cursor: grab; user-select: none; }
.app-table tbody td.js-drag-handle:active { cursor: grabbing; }