/* Biến CSS */
:root {
    --primary-blue: #38bdf8;
    --primary-green: #4ade80;
    --main-theme: var(--primary-blue);
}

/* Cài đặt chung cho body */
body {
    font-family: 'Segoe UI', sans-serif;
    background: #020617;
    color: #e2e8f0;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* Class để khoá cuộn trang khi modal hiện lên */
body.noscroll {
    overflow: hidden;
}

/* Theme cho từng người dùng */
body.theme-Khoa {
    --main-theme: var(--primary-blue);
    background: #020617;
}

body.theme-Thuy {
    --main-theme: var(--primary-green);
    background: #052e16;
}

/* Container chính */
.container {
    background: #1e293b;
    padding: 15px; /* Giảm padding cho đỡ chiếm chỗ */
    border-radius: 20px;
    width: 95%; /* Chiếm 95% chiều rộng màn hình điện thoại */
    max-width: 600px; /* Nhưng không quá 600px khi xem trên máy tính */
    box-shadow: 0 0 50px rgba(56, 189, 248, 0.2);
    border: 2px solid var(--main-theme);
    margin: 10px auto; /* Căn giữa */
}

/* Thanh tiến độ chung */
.bar-bg {
    background: #334155;
    height: 18px; /* Tăng độ cao một chút để chứa chữ cho đẹp */
    border-radius: 9px;
    margin-top: 5px;
    overflow: hidden;
    position: relative; /* QUAN TRỌNG: Để chữ bám vào đây */
}

.bar-fill {
    height: 100%;
    transition: 0.5s;
}

.bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75em;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Thêm bóng cho chữ dễ đọc trên nền màu */
    pointer-events: none;
    z-index: 2; /* Đảm bảo chữ luôn nằm trên thanh màu */
}

/* Màu sắc cho các thanh vital */
.hp-health { background: #ef4444; }
.hp-intel { background: #3b82f6; }
.hp-spirit { background: #a855f7; }

/* Bố cục các thanh vital */
.vital-bars {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Mặc định 3 cột */
    gap: 8px;
    margin-bottom: 15px;
}

.vital-card {
    background: #0f172a;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #334155;
    text-align: center;
}

/* Thanh XP */
.xp-bar-bg {
    background: #0f172a;
    height: 14px;
    border-radius: 7px;
    margin: 10px 0;
    overflow: hidden;
    border: 1px solid #334155;
}

.xp-bar-fill {
    background: linear-gradient(90deg, var(--main-theme), #818cf8);
    height: 100%;
    width: 0%;
    transition: 0.5s;
}

/* Hộp phần */
.section-box {
    background: #0f172a;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #334155;
    margin-bottom: 10px;
}

/* Item xếp hạng */
.rank-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #1e293b;
    border-radius: 8px;
}

/* Hàng chứa các nút điều khiển nhiệm vụ */
.task-controls {
    display: flex;
    margin-top: 8px;
    align-items: center;
    justify-content: space-between; /* Căn các nhóm item sang 2 bên */
}

/* Nút icon chỉnh sửa task */
.task-edit-btn {
    cursor: pointer;
    font-size: 0.9em;
    transition: transform 0.2s;
}

.task-edit-btn:hover {
    transform: scale(1.2);
}

/* Ẩn phần tử */
.hidden {
    display: none;
}

/* Nút bấm */
button {
    cursor: pointer;
    border: none;
    font-weight: bold;
    border-radius: 8px;
    padding: 10px;
    transition: 0.3s;
    white-space: nowrap; /* Ngăn không cho chữ xuống dòng */
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Ô nhập liệu */
input {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    width: 85%;
    background: #0f172a;
    color: white;
    border: 1px solid #334155;
}

input[type="number"] {
    text-align: center;
}

/* Màu sắc đặc biệt */
#welcome-user,
#xp-display,
h4 {
    color: var(--main-theme) !important;
}

/* TỐI ƯU RIÊNG CHO ĐIỆN THOẠI (Mobile First) */
@media (max-width: 480px) {
    body {
        padding: 8px;
    }

    .container {
        width: 98%; /* Tận dụng tối đa chiều ngang S20 FE và iPhone 16 Pro Max */
        padding: 12px;
    }

    .vital-bars {
        grid-template-columns: 1fr 1fr 1fr; /* Chia 3 cột bằng nhau */
        gap: 5px; /* Giảm khoảng cách giữa các ô để không bị chật */
        margin-bottom: 10px;
    }

    .vital-card {
        padding: 5px 2px; /* Thu nhỏ padding bên trong thẻ chỉ số */
        font-size: 0.75em; /* Giảm cỡ chữ để không bị nhảy dòng */
    }

    .vital-card small {
        font-size: 0.8em; /* Giảm cỡ chữ phần % */
    }

    .bar-bg {
        height: 16px; /* Làm thanh bar mỏng lại cho tinh tế */
    }

    .section-box h4 {
        font-size: 1.1em;
    }

    #xp-display {
        font-size: 1.0em; /* Giảm font XP một chút để không bị vỡ dòng */
    }

    button {
        padding: 12px; /* Nút to ra cho dễ bấm bằng tay, đỡ bấm nhầm kkkkkk */
        font-size: 0.9em;
    }
}

/* FIX CHO TAI THỎ / DYNAMIC ISLAND (iPhone 16 Pro Max) */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Modal Profile */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(5px);

    /* Thêm 3 dòng này để biến Modal thành cái hộp chứa căn giữa */
    display: none; /* Khi hiện sẽ đổi thành flex bằng JS */
    justify-content: center;
    align-items: flex-start; /* Đổi thành flex-start để dời lên top */
    padding-top: 5vh; /* Thêm khoảng cách với top */
    overflow-y: auto; /* Cho phép cuộn nếu nội dung dài hoặc khi bàn phím hiện */
}

.modal-content {
    background: #1e293b;
    padding: 20px;
    border: 2px solid var(--main-theme);
    border-radius: 20px;
    width: 80%;
    max-width: 400px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.3);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #94a3b8;
}

.profile-avatar {
    font-size: 50px;
    margin-bottom: 10px;
}

.profile-info {
    margin: 15px 0;
    font-size: 1.1em;
}

.monthly-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.monthly-stats-table th,
.monthly-stats-table td {
    border: 1px solid #334155;
    padding: 8px;
    text-align: left;
    font-size: 0.9em;
}

.monthly-stats-table th {
    background: #1e293b;
    color: var(--main-theme);
}

/* Căn lề trái cho form để label và input trông đẹp hơn */
#addTaskForm, #editTaskForm {
    text-align: left;
}   

#addTaskForm label, #editTaskForm label {
    display: block; /* Yêu cầu label luôn bắt đầu trên một dòng mới */
    margin-top: 10px; /* Thêm một chút khoảng cách ở trên cho thoáng */
}

/* Style cho textarea Tên nhiệm vụ để đồng bộ và tự động dãn */
#addTaskForm textarea, #editTaskForm textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 8px;
    background: #0f172a;
    color: white;
    border: 1px solid #334155;
    font-family: inherit; /* Kế thừa font từ body */
    font-size: 1em;      /* Kế thừa cỡ chữ */
    resize: none;        /* Tắt tính năng resize thủ công */
    overflow-y: hidden;  /* Giấu thanh cuộn, JS sẽ xử lý chiều cao */
    margin-top: 10px;
}

.monthly-stats-table td:last-child {
    text-align: center;
    font-weight: bold;
    color: #f1c40f;
}

/* Thêm style cho select để đồng bộ với input */
#addTaskForm select, #editTaskForm select {
    padding: 12px;
    border-radius: 8px;
    background: #0f172a;
    color: white;
    border: 1px solid #334155;
}

/* Dùng Flexbox để đưa label và input/select lên cùng một hàng */
.form-row {
    display: flex;
    /* align-items: center; */ /* Bỏ đi để các item (label, input) tự dãn ra bằng nhau */
    gap: 15px; /* Khoảng cách giữa label và control */
    margin-top: 10px;
}

.form-row label {
    margin-top: 0; /* Reset lại margin của label */
    flex-shrink: 0; /* Không cho label bị co lại */
    /* text-align: center; */ /* Bỏ kiểu căn giữa ngang cũ */
    display: flex; /* Biến label thành flex container */
    align-items: center; /* Để căn giữa nội dung của nó theo chiều dọc */
    justify-content: flex-end; /* Căn nội dung sang phải cho đẹp */
}
.form-row input, .form-row select {
    width: 35%;
    margin-bottom: 0; /* Reset lại margin của control */
}