/* css/variables/components.css */

/* ========================================================
   1. STYLE CHO TOAST (THÔNG BÁO)
   ======================================================== */
.toast {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.toast.text-dark .toast-progress {
    background-color: rgba(0, 0, 0, 0.2);
}

@keyframes toast-progress-wait {
    from { width: 100%; }
    to { width: 0%; }
}

/* ========================================================
   2. STYLE CHO CÁC NÚT HÀNH ĐỘNG (Dùng cho cả Rooms, Users...)
   ======================================================== */
.btn-action {
    width: 38px; height: 38px;
    border: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}

.btn-edit { background-color: rgba(13, 202, 240, 0.1); color: #0dcaf0; }
.btn-edit:hover { background-color: #0dcaf0; color: #fff; }

.btn-lock { background-color: rgba(220, 53, 69, 0.1); color: #dc3545; }
.btn-lock:hover { background-color: #dc3545; color: #fff; }

.btn-unlock { background-color: rgba(25, 135, 84, 0.1); color: #198754; }
.btn-unlock:hover { background-color: #198754; color: #fff; }


/* Tùy chỉnh nút trong Modal để hợp với Dark Mode */
.dark-theme .modal-footer .btn-secondary {
    background-color: var(--border-color); /* Dùng màu viền làm nền nút xám */
    border: none;
    color: var(--text-primary);
}

.dark-theme .modal-footer .btn-primary {
    background-color: var(--primary-color);
    border: none;
    color: #ffffff; /* Giữ chữ trắng cho nút chính */
}

/* Hiệu ứng Hover cho nút */
.dark-theme .modal-footer .btn-primary:hover {
    filter: brightness(1.1);
}

/* Màu chữ nhãn và placeholder */
.dark-theme .modal-body label {
    color: var(--text-primary) !important;
}

.dark-theme .modal-body .form-control {
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-theme .form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}


.dark-theme .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Ép đường kẻ ngang trong Modal theo màu theme */
.dark-theme .modal-header,
.dark-theme .modal-footer {
    border-color: var(--border-color) !important;
}

/* Nếu bạn muốn đường viền bao quanh cả hộp thoại cũng tối đi */
.dark-theme .modal-content {
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Thêm bóng đổ sâu cho Dark Mode */
}

/* ========================================================
   GLOBAL PAGINATION COMPONENT (Phân trang dùng chung)
   ======================================================== */

.pagination {
    gap: 0.25rem;
}

/* 1. KHỬ MARGIN ÂM MẶC ĐỊNH CỦA BOOTSTRAP GÂY LỖI VIỀN */
.page-item {
    margin: 0 !important;
}

.page-link {
    border-radius: var(--radius-md) !important;
    margin: 0 !important; /* Quan trọng: Xóa margin-left: -1px */
    color: var(--text-secondary);
    border: 1px solid transparent;
    background-color: transparent;
    font-weight: 500;
    transition: var(--transition-ease);
    
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-sm);
}

/* 2. KHỬ BÓNG FOCUS KHI CLICK CHUỘT */
.page-link:focus {
    box-shadow: none !important;
    outline: none;
}

.page-link:hover {
    background-color: var(--bg-color);
    color: var(--primary-hover);
    border-color: transparent;
}

/* 3. SỬA LỖI LEM GÓC Ở TRANG HIỆN TẠI (ACTIVE) */
.page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-inverse) !important;
    
    /* Đổi từ bóng đặc sang bóng mờ (transparent rgba) để không bị lem góc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; 
}

.page-item.disabled .page-link {
    background-color: transparent;
    color: var(--border-color);
    pointer-events: none;
}

/* ====================================
   STYLE CHO Ô CHỌN SỐ DÒNG (SELECT BOX)
   ==================================== */
.global-page-size {
    border-radius: var(--radius-md);
    padding: 0.25rem 1.5rem 0.25rem var(--spacing-sm);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    background-color: var(--surface-color);
}

.global-page-size:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.25);
}

/* ====================================
   HỖ TRỢ DARK MODE (GIAO DIỆN TỐI)
   ==================================== */
.dark-theme .page-link:hover {
    background-color: var(--border-color); 
    color: var(--text-primary);
}

.dark-theme .page-item.disabled .page-link {
    color: var(--border-color); 
}

/* Dark mode dùng shadow đen tuyền mờ để nổi bật nút Active mà không bị rác viền */
.dark-theme .page-item.active .page-link {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ====================================
   FIX LỖI CHỚP SÁNG KHI CLICK PHÂN TRANG (DARK MODE)
   ==================================== */
   
/* 1. Ghi đè màu nền trắng/xám mặc định của Bootstrap khi nhấn chuột (:active, :focus) */
.dark-theme .page-link:focus,
.dark-theme .page-link:active {
    background-color: var(--border-color) !important; /* Dùng màu nền tối tiệp với hover */
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

/* 2. Bảo vệ nút của trang HIỆN TẠI không bị mất màu xanh khi click lại vào nó */
.dark-theme .page-item.active .page-link:focus,
.dark-theme .page-item.active .page-link:active {
    background-color: var(--primary-color) !important;
    color: var(--text-inverse) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}
/* ========================================================
   DARK MODE - FORM FLOATING (GLOBAL)
   Áp dụng cho tất cả modal trong toàn dự án
   ======================================================== */

/* Nền modal */
.dark-theme .modal-content {
    background-color: var(--surface-color) !important;
}

/* Input trong form-floating */
.dark-theme .modal-body .form-floating .form-control,
.dark-theme .modal-body .form-floating .form-select {
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Input khi focus */
.dark-theme .modal-body .form-floating .form-control:focus,
.dark-theme .modal-body .form-floating .form-select:focus {
    background-color: var(--bg-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.2) !important;
}

/* Label mặc định */
.dark-theme .modal-body .form-floating > label {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

/* Label khi bay lên (focus hoặc có giá trị) */
.dark-theme .modal-body .form-floating > .form-control:focus ~ label,
.dark-theme .modal-body .form-floating > .form-control:not(:placeholder-shown) ~ label,
.dark-theme .modal-body .form-floating > .form-select ~ label {
    color: var(--primary-color) !important;
    opacity: 1 !important;
}

/* Chrome autofill — ghi đè màu xanh tự động */
.dark-theme .modal-body .form-control:-webkit-autofill,
.dark-theme .modal-body .form-control:-webkit-autofill:hover,
.dark-theme .modal-body .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-color) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
}

/* input-group trong dark mode (form đổi mật khẩu) */
.dark-theme .modal-body .input-group-text {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Select box */
.dark-theme .modal-body .form-select {
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dropdown options của select */
.dark-theme .modal-body .form-select option {
    background-color: var(--surface-color);
    color: var(--text-primary);
}