/* =========================================================
   1. GLOBAL STYLES & RESET
   ========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #f1f5f9;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    color: #1e293b;
}

/* =========================================================
   2. LOGIN CARD CONTAINER (SPLIT SCREEN)
   ========================================================= */
.login-wrapper {
    display: flex;
    width: 100%;
    max-width: 900px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-height: 560px;
}

/* =========================================================
   SIDEBAR MÀU XANH & CHỮ MEDIALL / HEALTHFORPASS SINH ĐỘNG
   ========================================================= */
.login-brand-side {
    flex: 1.1;
    background: linear-gradient(135deg, #24501D 0%, #1C3F17 50%, #152F11 100%);
    color: #ffffff;
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* Hiệu ứng bóng sáng mờ phía sau Sidebar */
.login-brand-side::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: rgba(56, 189, 248, 0.15);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

/* Khối Chữ Thương Hiệu (MediAll / HealthForPass) */
.brand-header {
    margin-bottom: 20px;
}

.brand-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Icon trái tim có hiệu ứng đập (Pulse animation) */
.pulse-icon {
    color: #ffffff;
    font-size: 1.6rem;
    margin-right: 4px;
    animation: heartBeat 1.8s infinite ease-in-out;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.18); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    70% { transform: scale(1); }
}

/* Stylings cho chữ MediAll */
.text-mediall {
    background: linear-gradient(90deg, #ffffff 0%, #7abb43 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Dấu gạch chéo phân cách */
.text-divider {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.8;
}

/* Stylings cho chữ HealthForPass */
.text-healthpass {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

/* Đường gạch ngang trang trí Gradient */
.brand-line {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #7abb43, transparent);
    border-radius: 2px;
    margin-top: 10px;
}

/* Slogan & Tính năng */
.brand-sub {
    font-size: 0.95rem;
    font-weight: 500;
    color: #C8DCB8;
    margin-bottom: 32px;
    line-height: 1.5;
}

.brand-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #C8DCB8;
    transition: transform 0.2s ease;
}

.feature-item:hover {
    transform: translateX(4px);
}

.feature-item i {
    color: #ffffff;
    font-size: 1.1rem;
}

.brand-footer p {
    font-size: 0.78rem;
    color: #ffffff;
    opacity: 0.8;
}

/* =========================================================
   4. BÊN PHẢI: FORM ĐĂNG NHẬP & LOGO FULL BỀ NGANG
   ========================================================= */
.login-form-side {
    flex: 1;
    padding: 0; /* Bỏ padding khung ngoài để Logo tràn full sát mép */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #ffffff;
}

/* Khung logo kéo dài 100% bề ngang sát 2 mép */
.form-logo-container {
    width: 100%;
    height: 100px; /* Cố định chiều cao tầm 100px */
    margin: 0;
    padding: 10px 16px; /* Padding nhẹ để logo không dính sát viền trên/dưới */
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-logo-full {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain; /* Giữ chuẩn tỉ lệ logo, căn giữa đẹp mắt */
}

/* Khối nội dung Form bên dưới (Tạo khoảng cách lề cho các ô nhập liệu) */
.form-content-wrapper {
    padding: 24px 36px 36px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-header {
    margin-bottom: 24px;
}

.form-header h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.form-header p {
    font-size: 0.88rem;
    color: #64748b;
}

/* Input & Select Controls */
.login-form .form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

.login-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.required {
    color: #ef4444;
}

.login-form input,
.login-form select {
    width: 100%;
    padding: 11px 14px;
    font-size: 0.92rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
    transition: all 0.2s ease;
    background-color: #f8fafc;
}

.login-form input:focus,
.login-form select:focus {
    border-color: #37752E;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Huy hiệu vai trò, hiện ngay khi gõ xong tên đăng nhập.
   Lớp thứ hai là MÃ VAI TRÒ lấy thẳng từ sys_user_face.face_code. */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 6px;
    width: fit-content;

    /* MÀU MẶC ĐỊNH - bắt buộc phải có. Trước đây chỉ 4 mã vai trò bên dưới mới có màu, mã nào
       khác rơi vào nền trong suốt: huy hiệu vẫn nằm đó nhưng không thành hình viên thuốc, nhìn
       như không hiện gì cả. Đúng lỗi này với 'saler' và 'reception'. Có màu mặc định thì thêm
       vai trò mới trong CSDL là hiện được ngay, chỉ là màu xám cho tới khi ai đó chọn màu riêng. */
    background-color: #e2e8f0;
    color: #334155;
}

.role-badge.doctor    { background-color: #dbeafe; color: #1e40af; }
.role-badge.nurse     { background-color: #d1fae5; color: #065f46; }
.role-badge.nurse_data { background-color: #ccfbf1; color: #115e59; }
/* Mã trong CSDL là 'saler'; giữ thêm 'sale' phòng khi còn nơi nào dùng mã cũ. */
.role-badge.saler,
.role-badge.sale      { background-color: #fef3c7; color: #92400e; }
.role-badge.admin     { background-color: #fce7f3; color: #9d174d; }
.role-badge.reception { background-color: #ede9fe; color: #5b21b6; }

/* Error Message Alert */
.error-message {
    color: #dc2626;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* Submit Button */
.btn-login {
    width: 100%;
    padding: 12px;
    background-color: #37752E;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-login:hover {
    background-color: #2F6528;
}

.btn-login:active {
    transform: scale(0.99);
}

.btn-login:disabled {
    background-color: #94a3b8;
    cursor: not-allowed;
}

/* =========================================================
   5. RESPONSIVE (MOBILE & TABLET)
   ========================================================= */
@media (max-width: 768px) {
    .login-wrapper {
        flex-direction: column;
        max-width: 440px;
    }

    .login-brand-side {
        padding: 24px;
    }

    .brand-features,
    .brand-footer {
        display: none;
    }

    .form-content-wrapper {
        padding: 20px 24px 28px 24px;
    }
}

/* ---------------------------------------------------------------------------------------------
   THIẾT BỊ CẢM ỨNG
   Trang đăng nhập KHÔNG nạp style.css (chỉ login.css + bootstrap) nên luật chung bên kia không
   với tới đây - phải khai lại.
   --------------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
    /* iOS tự phóng to cả trang khi bấm vào ô nhập có cỡ chữ dưới 16px rồi không tự thu lại.
       Ở màn hình đăng nhập thì đó là ấn tượng đầu tiên của người dùng về hệ thống. */
    input:not([type="checkbox"]):not([type="radio"]) {
        font-size: 16px !important;
    }

    button,
    .btn,
    .btn-login {
        min-height: 44px;
    }
}

/* Câu báo TỐT (đổi mật khẩu xong, gửi thư xong...) - vẫn là ô #errorMessage nhưng thêm lớp này.
   Trước đây câu "Đổi mật khẩu thành công" dùng nguyên ô báo lỗi màu ĐỎ: việc vừa làm đúng mà màn
   hình nhuộm đỏ thì người dùng tưởng hỏng, và tưởng mật khẩu mới không lưu được. */
.error-message.thong-bao-tot {
    color: #166534;
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

/* Đoạn cần đọc kỹ nhất trong câu báo lỗi - hiện dùng cho THỜI GIAN KHOÁ tài khoản.
   PHẢI KHAI LẠI Ở ĐÂY: trang đăng nhập chỉ nạp login.css, KHÔNG nạp style.css (nơi luật này đã
   có sẵn). Thiếu nó thì đoạn tô nổi bật chỉ còn in đậm - hỏng lặng lẽ, không ai thấy được.
   Ô lỗi vốn đã đỏ nên tô đỏ nữa là chìm nghỉm: dùng đỏ đậm hơn trên nền vàng nhạt. */
.loi-noi-bat {
    font-weight: 800;
    font-size: 1.05em;
    color: #7f1d1d;
    background: #fef08a;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Dòng liên kết phụ dưới nút chính: "Quên mật khẩu?", "Quay lại đăng nhập". */
.dong-quay-lai {
    text-align: center;
    margin: 14px 0 0;
    font-size: 0.86rem;
}

.dong-quay-lai a {
    color: #37752E;
    text-decoration: none;
    font-weight: 600;
}

.dong-quay-lai a:hover {
    text-decoration: underline;
}

/* "Cài ứng dụng lên điện thoại" - là <button> nhưng phải TRÔNG như liên kết bên trên.
   Dùng <button> chứ không phải <a href="#">: đây là một hành động, không phải một chỗ để đi tới.
   Thẻ a rỗng thì bấm xong địa chỉ dính thêm dấu #, F5 lần sau vẫn còn.
   Phải tự gỡ nền/viền/đệm mặc định của button, nếu không nó hiện ra một cái nút xám giữa hai
   dòng liên kết. */
.lien-ket-loi-tat {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: #37752E;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lien-ket-loi-tat:hover {
    text-decoration: underline;
}

/* Biểu tượng nhỏ hơn chữ một nấc: nó là dấu hiệu, không phải nhân vật chính. */
.lien-ket-loi-tat i {
    font-size: 0.95em;
}
/* Hộp hướng dẫn tạo lối tắt (js/loiTatUngDung.js gọi showThongBao).

   ĐẶT Ở ĐÂY chứ không phải style.css: trang đăng nhập KHÔNG nạp style.css, nên mấy luật này để
   bên đó thì chẳng bao giờ áp - hộp hiện ra vẫn đọc được nhưng khung nhắc HTTP mất nền, mất viền,
   nhìn như chữ thừa. Hỏng câm đúng kiểu: chỉ thấy khi máy chủ chạy HTTP, mà máy thử là localhost
   nên không bao giờ gặp.

   Vì login.css không khai biến CSS nào, mọi màu ở đây ghi THẲNG - đừng var(--...) cho giống
   style.css, nó ra rỗng. */
.lt-buoc {
    margin: 10px 0 0;
    padding-left: 22px;
    white-space: normal;
}

.lt-buoc li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.lt-luu-y {
    margin-top: 14px;
    padding: 10px 12px;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    color: #b45309;
    font-size: 0.9rem;
    white-space: normal;
}

.lt-ket {
    margin-top: 14px;
    margin-bottom: 0;
    color: #6b7280;
    white-space: normal;
}