.cccd-locked {
    background-color: #e7f3ff !important;
    color: #003a75 !important;
    font-weight: 700 !important;
    border-color: #4a90d9 !important;
    cursor: not-allowed !important;
    user-select: text;
}

.cccd-locked::selection {
    background-color: #cfe4f7;
}

/* Tạo cảm giác "đã khoá" rõ ràng — caret biến mất */
.cccd-locked:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 217, 0.25) !important;
    caret-color: transparent;
}

/* Chặn pointer events trên các trường có plugin tự mở popup khi click:
   - .dob-input dùng jQuery datepicker → click mở calendar dù có readonly
   - .gender-input là input flexselect-rendered → click mở dropdown
   Cả 2 plugin gắn click handler trực tiếp lên element nên phải block ở level CSS.
   Text input thường (fullName, identifierId, address...) KHÔNG bị ảnh hưởng,
   user vẫn select/copy text được. */
input.cccd-locked.dob-input,
input.cccd-locked.gender-input {
    pointer-events: none !important;
}

.cccd-cell {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle !important;
}

.cccd-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.js-cccd-msg {
    word-break: break-word;
    line-height: 1.4;
    margin-top: 4px;
}

.js-cccd-msg.text-danger {
    color: #d9534f;
    font-weight: 500;
}

.js-cccd-msg.text-success {
    color: #28a745;
    font-weight: 500;
}

.cccd-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: cccd-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes cccd-spin {
    to { transform: rotate(360deg); }
}

/* Ẩn các trường sẽ được điền từ QR khi user (cá nhân) chưa upload CCCD.
   Trạng thái này được toggle bởi JS (signup.html) qua class `cccd-pending`
   trên form. Khi user chuyển sang chế độ công ty hoặc đã scan xong → class
   này bị gỡ → các row hiện lại bình thường. */
.cccd-pending .js-cccd-fillable {
    display: none !important;
}

/* Document-company table:
   1) Khi MỌI row trong table đều pending → ẩn cả CỘT (cả TH + TD)
      → bảng nhỏ gọn, chỉ thấy nút upload + các cột khác (Mục đích, Sở GDĐT...).
   2) Khi mixed (1 số row đã scan, 1 số chưa) → giữ chiều rộng TD (để cột không
      bị lệch dưới header), chỉ ẩn input/select bên trong → cell trông trống
      ở row chưa scan, có data ở row đã scan, cột thẳng hàng.
*/
table.cccd-all-pending .js-cccd-fillable {
    display: none !important;
}
tr.cccd-pending > td.js-cccd-fillable > input,
tr.cccd-pending > td.js-cccd-fillable > select,
tr.cccd-pending > td.js-cccd-fillable > .input-group {
    visibility: hidden;
}

/* ===== Camera scanner guide frame ===== */

/* Đường quét ngang trượt từ trên xuống dưới */
.cccd-scan-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #00e676 30%, #69f0ae 50%, #00e676 70%, transparent 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px 2px rgba(0, 230, 118, 0.6);
    animation: cccd-scan-sweep 1.8s ease-in-out infinite;
    z-index: 2;
}

@keyframes cccd-scan-sweep {
    0%   { top: 4px;    opacity: 1; }
    90%  { top: calc(100% - 4px); opacity: 1; }
    100% { top: calc(100% - 4px); opacity: 0; }
}

/* Wrapper camera: hiệu ứng pulse nhẹ khi đang quét */
#cccd-camera-wrapper:not(.d-none) {
    animation: cccd-border-pulse 2s ease-in-out infinite;
}

@keyframes cccd-border-pulse {
    0%, 100% { border-color: #007bff; box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
    50%      { border-color: #00e676; box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.18); }
}