/* Mobile-first: style mặc định cho màn hình nhỏ, mở rộng dần bằng media query */

/* Vùng bấm tối thiểu 44px cho màn hình cảm ứng */
.btn,
.form-control,
.form-select,
.page-link {
    min-height: 44px;
}

/* Spinner nằm trong nút khi đang gọi AJAX */
.btn .spinner-border {
    vertical-align: -0.125em;
}

/* Vùng toast thông báo cố định góc màn hình */
.ajax-toast-container {
    z-index: 1090;
}

/* Bảng dữ liệu lớn: chuyển dạng card trên mobile (thêm class .table-mobile-card vào <table>, dùng data-label trên <td>) */
@media (max-width: 767.98px) {
    .table-mobile-card thead {
        display: none;
    }

    .table-mobile-card tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
    }

    .table-mobile-card td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
    }

    .table-mobile-card td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
    }
}

/* Trang ghi chú: giữ xuống dòng của nội dung, giới hạn 6 dòng trên thẻ */
.note-card-content {
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-pagination nav {
    display: flex;
    justify-content: center;
}

/* Modal chụp ảnh bằng camera trực tiếp (core/live-camera-capture.js) */
.live-camera-modal .modal-content {
    background: #111;
    color: #fff;
}

.live-camera-modal .modal-header,
.live-camera-modal .modal-footer {
    border-color: #333;
}

.live-camera-modal .btn-close {
    filter: invert(1);
}

.live-camera-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 0;
    background: #000;
}

.live-camera-video {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.live-camera-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.85);
}

.live-camera-counter {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 13px;
}

.live-camera-body.is-flashing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    animation: live-camera-flash 0.25s ease-out forwards;
    pointer-events: none;
}

@keyframes live-camera-flash {
    from { opacity: 0.8; }
    to { opacity: 0; }
}

.live-camera-footer {
    justify-content: space-between;
    flex-wrap: nowrap;
}

.live-camera-shutter {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #e9ecef;
    box-shadow: inset 0 0 0 3px #111;
}

.live-camera-shutter:active:not(:disabled) {
    background: #adb5bd;
}

.live-camera-shutter:disabled {
    opacity: 0.4;
}