/*
 * CSS bổ sung cho Thiên Bình CRM (nạp qua FilamentAsset trong AppServiceProvider).
 * Sau khi sửa file này chạy: php artisan filament:assets
 */

/* Ô nhập rõ hơn: chữ to hơn một chút, đậm vừa */
.fi-input-wrp .fi-input {
    font-size: 0.95rem;
    font-weight: 500;
}

/* Ô tiền & số lượng: căn phải, số đều nhau, đọc dễ */
.fi-input.crm-money,
.fi-input.crm-qty {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Bỏ mũi tên tăng/giảm của ô số: chiếm chỗ làm che mất số đã nhập */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Không để ô nhập bị co quá nhỏ trong lưới */
.fi-fo-repeater-item .fi-input-wrp {
    min-width: 0;
}
.fi-fo-repeater-item .fi-input {
    padding-inline: 0.6rem;
}

/* Mỗi dòng sản phẩm tách bạch, có nền nhẹ */
.fi-fo-repeater-item {
    border-width: 1px;
}
.fi-fo-repeater-item-header {
    font-weight: 600;
}

/* Thành tiền của từng dòng và tổng đơn */
.crm-line-total {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.crm-total {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    align-self: end;
    padding-bottom: 0.5rem;
}
.crm-total--grand {
    font-size: 1.15rem;
    color: rgb(var(--primary-600, 37 99 235));
}

/* ===================== Giao diện nhiều thiết bị ===================== */

/* Thẻ danh sách trên điện thoại (MobileCard) */
.fi-ta-text-item:has(> .crm-card) { display: block !important; width: 100%; }
.fi-ta-cell-mobile-card { width: 100%; white-space: normal; }
.fi-ta-col:has(.crm-card) { display: block !important; width: 100%; }
.crm-card, .crm-card * { white-space: normal; }
.crm-card__right, .crm-card__tel { white-space: nowrap; }
.crm-card { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.15rem 0; min-width: 0; }
.crm-card__head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.crm-card__title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.35; overflow-wrap: anywhere; }
.crm-card__right { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.9rem; white-space: nowrap; }
.crm-card__line { font-size: 0.82rem; color: rgb(100 116 139); line-height: 1.4; overflow-wrap: anywhere; }
.crm-card__foot { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.25rem; }
.crm-card__tel { cursor: pointer;
    margin-left: auto; font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 999px;
    color: rgb(37 99 235); background: rgb(37 99 235 / 0.08); text-decoration: none; white-space: nowrap;
}
/* Màu badge truyền qua biến --badge-500/700/300 (MobileCard::badgeHtml) */
.crm-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 600; line-height: 1; padding: 0.3rem 0.5rem; border-radius: 0.4rem;
    color: var(--badge-700, var(--gray-700)); background: color-mix(in oklab, var(--badge-500, var(--gray-500)) 15%, transparent);
}

.dark .crm-card__line { color: rgb(148 163 184); }
.dark .crm-card__tel { color: rgb(147 197 253); background: rgb(59 130 246 / 0.18); }
.dark .crm-badge { color: var(--badge-300, var(--gray-300)); background: color-mix(in oklab, var(--badge-500, var(--gray-500)) 22%, transparent); }

/* Điện thoại (< 768px) */
@media (max-width: 767px) {
    /* iOS phóng to trang khi ô nhập < 16px: giữ 16px */
    .fi-input-wrp .fi-input,
    .fi-select-input,
    .fi-input-wrp select,
    .fi-input-wrp textarea { font-size: 16px; }

    /* Bảng dạng thẻ: bấm vào thẻ để mở; ẩn ô chọn và các nút thao tác của dòng để thẻ rộng hết màn hình */
    .fi-ta-table:has(.fi-ta-cell-mobile-card) .fi-ta-selection-cell,
    .fi-ta-table:has(.fi-ta-cell-mobile-card) .fi-ta-actions-header-cell,
    .fi-ta-table:has(.fi-ta-cell-mobile-card) .fi-ta-row > .fi-ta-cell:last-child:not(.fi-ta-cell-mobile-card) { display: none; }

    /* Nút, dòng bảng dễ chạm hơn */
    .fi-btn { min-height: 2.5rem; }
    .fi-ta-row .fi-ta-cell { padding-top: 0.6rem; padding-bottom: 0.6rem; }

    /* Tiêu đề trang gọn hơn, nút thao tác xuống hàng gọn gàng */
    .fi-header-heading { font-size: 1.35rem; }
    .fi-header .fi-ac { flex-wrap: wrap; gap: 0.5rem; }

    /* Thanh tab (Đang xử lý / Mới / ...) cuộn ngang thay vì bị ép */
    .fi-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .fi-tabs::-webkit-scrollbar { display: none; }
    .fi-tabs-item { flex: none; }

    /* Section bớt khoảng đệm để có thêm chỗ cho nội dung */
    .fi-section-content { padding: 0.9rem; }
    .fi-fo-repeater-item-content { padding: 0.75rem; }

    /* Tổng tiền đơn hàng xuống hàng, căn trái */
    .crm-total { padding-bottom: 0; }
}

/* Máy tính bảng (768–1279px): bảng gọn, chữ vừa */
@media (min-width: 768px) and (max-width: 1279px) {
    .fi-ta-cell { padding-left: 0.6rem; padding-right: 0.6rem; }
    .fi-ta-text { font-size: 0.85rem; }
}

/* Nút Lưu / Tạo ghim cuối màn hình: có nền để không đè lên nội dung */
.fi-sticky.fi-form-actions,
.fi-form-actions.fi-sticky {
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(6px);
}
.dark .fi-sticky.fi-form-actions,
.dark .fi-form-actions.fi-sticky {
    background: rgb(17 24 39 / 0.92);
}

/* In báo cáo / danh sách: ẩn thanh bên */
@media print {
    .fi-sidebar, .fi-topbar, .fi-header .fi-ac { display: none !important; }
}