/* FT License Server — style tối thiểu. Phần lớn giao diện do MudBlazor lo;
   file này chỉ phục vụ trang đăng nhập (không dùng component Mud để tránh
   phụ thuộc circuit) và nút đăng xuất trên AppBar. */

html, body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Trang đăng nhập ────────────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    padding: 1rem;
}

.login-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.login-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.login-sub {
    margin: 0 0 .5rem;
    font-size: .8rem;
    color: #6b7280;
}

.login-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .8rem;
    line-height: 1.4;
}

.login-input {
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: .95rem;
}

.login-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.login-btn {
    padding: .65rem 1rem;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
}

.login-btn:hover {
    background: #1d4ed8;
}

/* ── Thanh lọc của trang danh sách ──────────────────────────────────────
   Port từ FT.Web/wwwroot/app.css (Responsive-Layout-Standard §6). GIỮ NGUYÊN tên class
   và các con số để hai bên không drift — sửa bên kia thì sửa cả bên này.

   ⚠️ VÌ SAO PHẢI BỌC DIV, KHÔNG ĐẶT Style THẲNG LÊN MudTextField:
   MudTextField đẩy `Style` xuống phần tử `.mud-input` BÊN TRONG, mà phần tử đó nằm trong
   `.mud-input-control-input-container` có `flex-direction: column` → `flex: 1 1 240px`
   bị hiểu là CHIỀU CAO 240px, ô tìm kiếm phình thành hộp vuông. (Đã dựng lại và đo DOM
   2026-07-28.) MudSelect thì đẩy `Style` lên `.mud-input-control` ngoài cùng nên không sao —
   hai component hành xử KHÁC NHAU, nên đừng tin vào Style cho việc canh layout.
   Bọc div rồi gắn class vào div là cách duy nhất chắc chắn đúng cho mọi component. */
.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 12px;
}

.page-toolbar .tb-search  { flex: 1 1 240px; max-width: 320px; }
.page-toolbar .tb-filter  { flex: 0 1 200px; min-width: 160px; max-width: 200px; }
.page-toolbar .tb-actions { display: flex; gap: 8px; margin-left: auto; align-items: stretch; }
.page-toolbar .tb-actions .mud-button-root { align-self: stretch; min-width: 90px; }

/* Ô nhập bên trong slot phải chiếm trọn slot, không tự co theo nội dung */
.page-toolbar .tb-search > *,
.page-toolbar .tb-filter > * { width: 100%; }

@media (max-width: 599px) {
    .page-toolbar .tb-search,
    .page-toolbar .tb-filter,
    .page-toolbar .tb-actions {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
    }
}

/* Nút trong slot Actions của PageHeader cao bằng nhau bất kể Variant */
.page-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
}

.page-header-actions > .mud-button-root { align-self: stretch; }

/* ── Trạng thái rỗng ────────────────────────────────────────────────────
   Chuẩn Responsive-Layout-Standard §6.5: icon + chữ canh giữa, mờ — KHÔNG dùng
   MudAlert Info, vì alert mang nghĩa "có thông tin cần đọc", còn bảng rỗng chỉ là
   "chưa có gì ở đây". */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 16px;
    opacity: .6;
    text-align: center;
}

/* ── Nút đăng xuất trên AppBar (form thuần, không phải MudButton) ────── */
.appbar-logout {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    border-radius: 6px;
    padding: .35rem .85rem;
    font-size: .85rem;
    cursor: pointer;
}

.appbar-logout:hover {
    background: rgba(255, 255, 255, .12);
}

/* ── Khối "Phần cứng thật" khi bung một hàng ở trang Thiết bị ────────── */
/* Lưới 2 cột nhãn–giá trị: nhãn thẳng hàng nên mắt bắt được cấu trúc mà
   không cần kẻ ô. Cột nhãn auto để tiếng Việt dài ra vẫn không vỡ. */
.host-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    align-items: baseline;
}

.host-label {
    font-size: .8rem;
    opacity: .65;
    white-space: nowrap;
}

/* Serial/MAC là chuỗi để ĐỐI CHIẾU với tem trên máy — phải đẳng khoảng,
   không thì 0/O và 1/l nhìn như nhau. */
.host-mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .85rem;
}

/* Mỗi MAC một ô riêng: 3 địa chỉ nối bằng dấu phẩy là dải liền 53 ký tự. */
.host-chip {
    display: inline-block;
    padding: 1px 8px;
    margin: 0 6px 4px 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
}

/* Nguồn đọc serial (dmi-uuid…) — thông tin phụ, không tranh chỗ với giá trị. */
.host-tag {
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .72rem;
    opacity: .7;
    background: var(--mud-palette-action-default-hover);
}

.host-empty {
    font-size: .85rem;
    opacity: .55;
    font-style: italic;
}