/*
 * Thành phần dùng chung — button, chip, alert, modal, toast, table.
 * Giá trị đối chiếu pixel thật với màn hình "components" trong mockup HTML.
 */

/* ─── Button ─────────────────────────────────────────────────────────────── */

.lm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 20px;
    border-radius: var(--lm-radius);
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.lm-btn--primary { background: var(--lm-green); color: var(--lm-white); }
.lm-btn--primary:hover { background: var(--lm-green-dark); }

.lm-btn--secondary { background: var(--lm-white); color: var(--lm-green); border: 1px solid var(--lm-green); }
.lm-btn--secondary:hover { background: var(--lm-green-light); }

/* Chữ đen trên nền gold — trắng chỉ đạt ~2.2:1, không đạt AA (xem tokens.css) */
.lm-btn--gold { background: var(--lm-gold); color: var(--lm-ink); }

.lm-btn--danger { background: var(--lm-danger); color: var(--lm-white); }

.lm-btn--ghost { background: transparent; color: var(--lm-green); padding: 0 8px; height: auto; }

.lm-btn:disabled,
.lm-btn--disabled {
    background: var(--lm-muted-bg);
    color: var(--lm-grey);
    cursor: not-allowed;
}

.lm-btn--sm { height: 30px; padding: 0 14px; font-size: 13px; }
.lm-btn--lg { height: 44px; padding: 0 28px; font-size: 15px; }

/* ─── Chip trạng thái ────────────────────────────────────────────────────── */

.lm-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--lm-radius-pill);
    font-size: 12px;
    font-weight: 700;
    /* Thiếu dòng này thì trong ô bảng hẹp (VD cột "Nội dung công việc" của bảng in A4 ngang),
       chữ nhãn ("Chờ duyệt"...) tự xuống dòng NGAY TRONG pill, biến hình viên thuốc bo tròn
       thành khối bầu dục méo đè lên nội dung xung quanh (bug thật, phát hiện khi kiểm tra
       giao diện trang in lịch tuần). Nhãn chip luôn ngắn, không cần xuống dòng. */
    white-space: nowrap;
}

.lm-chip--pending { background: var(--lm-warn-bg); color: var(--lm-warn-text); }
.lm-chip--approved { background: var(--lm-ok-bg); color: var(--lm-ok); }
.lm-chip--rejected { background: var(--lm-danger-bg); color: var(--lm-danger); }
.lm-chip--cancelled { background: var(--lm-muted-bg); color: var(--lm-muted-text); }

.lm-chip--outline-gold {
    background: transparent;
    color: var(--lm-gold-text);
    border: 1px solid var(--lm-gold);
    padding: 3px 11px;
}

/* ─── Alert / dải cảnh báo ───────────────────────────────────────────────── */

.lm-alert {
    border-radius: var(--lm-radius);
    padding: 12px 14px;
    font-size: 13px;
    border: 1px solid transparent;
}

.lm-alert--warn { background: var(--lm-warn-bg); color: var(--lm-warn-text); border-color: var(--lm-warn-border); }
.lm-alert--danger { background: var(--lm-danger-bg); color: var(--lm-danger); border-color: var(--lm-danger-border); }
.lm-alert--ok { background: var(--lm-ok-bg); color: var(--lm-ok); border-color: var(--lm-ok-border); }
.lm-alert--neutral { background: var(--lm-muted-bg); color: var(--lm-muted-text); border-color: var(--lm-border); }

/* ─── Modal ──────────────────────────────────────────────────────────────── */

.lm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31, 36, 33, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.lm-modal {
    background: var(--lm-white);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-modal);
    padding: 16px;
    width: 100%;
    max-width: 480px;
}

.lm-modal-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */

.lm-toast {
    background: var(--lm-ink);
    color: var(--lm-white);
    border-radius: var(--lm-radius-lg);
    padding: 12px 16px;
    font-size: 13px;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}

/* ─── Card / table dùng chung ────────────────────────────────────────────── */

.lm-card {
    background: var(--lm-white);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 16px;
}

.lm-table thead th {
    background: var(--lm-green);
    color: var(--lm-white);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 12px;
    text-align: left;
}

.lm-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--lm-border);
    vertical-align: top;
}

.lm-table tbody tr:nth-child(even) {
    background: var(--lm-green-light);
}

/* Danh sách vị trí công tác động — admin/users/form.php (Phase 04 nâng cấp đa vị trí). */
.lm-position-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--lm-border);
    position: relative;
}

.lm-position-row:last-child {
    border-bottom: none;
}

.lm-position-row select,
.lm-position-row input[type="text"] {
    width: auto;
    flex: 1 1 160px;
    min-width: 140px;
}

.lm-position-primary-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

.lm-position-error {
    flex-basis: 100%;
    margin: 0;
}

/* Checkbox "công ty áp dụng" trong 1 <td> — admin/departments/index.php (Phase 03 nâng cấp
   đa vị trí). */
.lm-company-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 220px;
}

.lm-company-checkbox-list label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

/* ─── Empty state ────────────────────────────────────────────────────────── */

.lm-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--lm-muted);
}

/* ─── Header trang admin (tiêu đề + nút hành động) — dùng chung mọi CRUD admin ─── */

.lm-admin-page__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.lm-admin-page__header h1 { margin-bottom: 0; }

/* ─── Form utility dùng chung (form lịch, form admin) ───────────────────────── */

.lm-form-group { margin-bottom: 16px; }
.lm-form-hint { font-size: 12px; color: var(--lm-muted-text); margin-top: 4px; }
.lm-form-error { font-size: 12px; color: var(--lm-danger); margin-top: 4px; }
.lm-form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

/* Lưới 2 cột cho form quản trị (2026-08-06, feedback: "form sửa nhân viên/cấu hình mail chỉ 1
   cột, không full chiều rộng desktop") — field ngắn (tên, mã NV, cổng SMTP...) xếp cạnh nhau
   thay vì xếp chồng cả cột dài dằng dặc. Field cần chiếm hết bề ngang (input dài, textarea, khối
   JS render động) đánh thêm class .lm-form-group--full. Tự rớt về 1 cột dưới 640px (mobile). */
.lm-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 24px;
}
.lm-form-grid .lm-form-group--full { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .lm-form-grid { grid-template-columns: 1fr; }
}

/* ─── Thẻ số liệu bảng tổng quan admin (Phase 09) ────────────────────────────── */

.lm-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.lm-stat-card {
    background: var(--lm-white);
    border: 1px solid var(--lm-border);
    border-left: 4px solid var(--lm-border);
    border-radius: var(--lm-radius);
    padding: 14px 16px;
}

.lm-stat-card--warn { border-left-color: var(--lm-warn); }

.lm-stat-card__label { font-size: 13px; color: var(--lm-muted-text); font-weight: 600; }
.lm-stat-card__value { font-size: 28px; font-weight: 800; color: var(--lm-ink); margin-top: 4px; }
.lm-stat-card__hint { font-size: 12px; color: var(--lm-warn-text); margin-top: 2px; }

/* ─── Tab (Nhật ký, Phase 09) ─────────────────────────────────────────────────── */

.lm-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--lm-border); }

.lm-tab {
    padding: 8px 16px;
    text-decoration: none;
    color: var(--lm-muted-text);
    font-weight: 700;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.lm-tab--active,
.lm-tab:hover { color: var(--lm-green); border-bottom-color: var(--lm-green); }