/* Phần bổ sung đặt trên theme Tabler (wwwroot/lib/tabler).
   Tabler lo gần như toàn bộ giao diện; file này chỉ giữ những gì đặc thù của ứng dụng:
   bảng dài vài trăm dòng vẫn đọc được, và mức khẩn cấp nhìn là thấy ngay. */

/* ---------- Logo ---------- */

/* Logo đọc từ App:LogoPath — cố định khung, ảnh tự co để logo nào cũng vừa. */
.app-brand-logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    border-radius: .5rem;
}

.app-login-logo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    border-radius: .75rem;
}

/* ---------- Bảng dịch vụ ---------- */

/* Bảng có thể vài trăm dòng — cuộn bên trong thẻ và giữ tiêu đề luôn nhìn thấy. */
.table-scroll {
    max-height: calc(100vh - 21rem);
    min-height: 18rem;
    overflow: auto;
}

.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
}

/* Mức khẩn cấp: chỉ một vạch màu ở mép trái thay vì nhuộm cả hàng — vài trăm dòng mà
   nhuộm cả hàng thì đọc rất mỏi mắt. */
.row-expired  td:first-child { box-shadow: inset 3px 0 0 var(--tblr-secondary); }
.row-critical td:first-child { box-shadow: inset 3px 0 0 var(--tblr-red); }
.row-warning  td:first-child { box-shadow: inset 3px 0 0 var(--tblr-yellow); }

/* Nhãn số ngày cùng bề rộng để cột "Còn lại" thẳng hàng. */
.days-badge {
    min-width: 7.5rem;
    justify-content: center;
}

.note-input {
    min-width: 9rem;
}

/* ---------- Thẻ thống kê ---------- */

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Khung đỏ "thu hồi hôm nay": mỗi tên miền một dòng, giãn vừa đủ để đọc lướt. */
.revoked-today .revoked-list li {
    padding: .2rem 0;
    font-variant-numeric: tabular-nums;
}

/* Cột tiền: chữ số thẳng hàng để so nhanh theo chiều dọc. */
.price-cell {
    font-variant-numeric: tabular-nums;
}

/* Số 0 không đáng nổi bật bằng số khác 0. */
.stat-value.is-zero {
    color: var(--tblr-secondary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .table-scroll { max-height: none; }
}