/* css/profile.css (Phiên bản Hoàn thiện) */

/* ========================================================== */
/* ==   1. HIỆU ỨNG MỞ/ĐÓNG & NỀN MỜ                      == */
/* ========================================================== */

.profile-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 12, 12, 0.85);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
}

.profile-panel-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out;
}

.profile-panel-content {
    position: relative;
    width: 100%;
    max-width: 1000px;
    max-height: 700px; 
    background-color: #1a1a1d;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: #e0e0e0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s ease-out;
}

.profile-panel-overlay:not(.hidden) .profile-panel-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ========================================================== */
/* ==   2. BỐ CỤC CHUNG & CÁC THÀNH PHẦN                    == */
/* ========================================================== */

.profile-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 2.5em;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    z-index: 20;
}
.profile-close-btn:hover { color: #fff; transform: rotate(90deg); }

/* --- Thanh Chứa Tab (Giao diện nâng cấp) --- */
.profile-tabs-nav {
    display: flex;
    /* Bỏ đường viền dưới cũ, thay bằng hiệu ứng cho từng tab */
    border-bottom: 1px solid #2f2f33;
    padding: 10px 25px 0 25px; 
    flex-shrink: 0;
    gap: 10px; /* Thêm khoảng cách giữa các tab */
}

.profile-tab-link {
    padding: 12px 25px;
    background-color: transparent;
    border: none;
    color: #888; /* Màu chữ mặc định mờ hơn */
    font-size: 1.1em;
    font-weight: 600; /* Giảm độ đậm một chút */
    cursor: pointer;
    position: relative; /* Cần thiết cho hiệu ứng gạch chân */
    border-radius: 6px 6px 0 0; /* Bo tròn góc trên */
    
    /* Hiệu ứng chuyển động mượt mà cho màu sắc và gạch chân */
    transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease;
}

/* Gạch chân giả để tạo hiệu ứng chạy */
.profile-tab-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #E48F45, #ffc97a);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hiệu ứng khi di chuột vào */
.profile-tab-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

.profile-tab-link:hover::after {
    width: 80%; /* Gạch chân chạy ra khi hover */
}

/* Hiệu ứng cho tab đang được chọn (active) */
.profile-tab-link.active {
    color: #ffc97a; /* Màu vàng kim nổi bật */
    background-color: rgba(228, 143, 69, 0.1); /* Nền màu cam nhẹ */
    text-shadow: 0 0 10px rgba(228, 143, 69, 0.5); /* Hiệu ứng chữ tỏa sáng */
}

.profile-tab-link.active::after {
    width: 100%; /* Gạch chân đầy đủ cho tab active */
}
.profile-main-content-container {
    padding: 25px;
    overflow: hidden;
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 25px;
}

.profile-content-block {
    min-width: 0;
}

/* ========================================================== */
/* ==   3. BỐ CỤC TAB "NHÂN VẬT" (MÀN HÌNH LỚN)            == */
/* ========================================================== */

.profile-left-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.profile-info-header { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.profile-avatar-small { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #E48F45; }
.profile-info-text h2 { margin: 0; font-size: 1.4em; color: #E48F45; }
.profile-info-text p { margin: 0; color: #bbb; font-size: 0.9em; }

.profile-character-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 380px; 
}
.profile-character-full {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.4));
}

.profile-bottom-stats {
    width: 100%; /* Thêm dòng này */
    text-align: center;
    padding-top: 10px;
    color: #ffde7a;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: auto;
    flex-shrink: 0;
}

.profile-right-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-equipment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

.profile-equipment-slot {
    background: rgba(30, 30, 35, 0.6);
    border: 1px solid #4a4a52;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    height: 70px; 
}
.profile-equipment-slot:hover { background-color: rgba(69, 67, 82, 0.7); border-color: #a7a2cc; }
.profile-equipment-slot .slot-label { color: #888; font-size: 0.9em; margin: auto; text-align: center; }
.item-icon { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; }
.item-details { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.item-details .item-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9em; font-weight: bold; }
.item-details .item-rarity { display: block; font-size: 0.8em; color: #999; }

/* ========================================================== */
/* ==   4. BỐ CỤC TAB "THUỘC TÍNH"                         == */
/* ========================================================== */

#profile-tab-thuoc-tinh {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding-right: 10px;
}

/* ========================================================== */
/* ==   5. RESPONSIVE (TỐI ƯU CHO MÀN HÌNH NHỎ)            == */
/* ========================================================== */

@media (max-width: 850px) {
    .profile-panel-content {
        max-height: 90vh;
    }
    .profile-main-content-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 35px; 
        padding: 20px;
        overflow-y: auto;
    }
    
    .profile-left-column,
    .profile-right-column,
    .profile-bottom-stats {
        width: 100%;
        max-width: 450px;
    }

    .profile-character-image-container {
        height: 300px; 
        min-height: unset;
        max-height: unset;
    }
    .profile-equipment-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .profile-equipment-slot {
        height: auto;
        min-height: 60px;
    }
}

@media (max-width: 480px) {
    .profile-panel-content {
        max-height: 95vh;
    }
    .profile-main-content-container {
        padding: 15px;
        gap: 30px; 
    }
    .profile-tabs-nav {
        padding-left: 15px;
        padding-right: 15px;
    }
    .profile-info-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .profile-character-image-container {
        height: 250px; 
    }
    
    .profile-equipment-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .profile-equipment-slot {
         flex-direction: column;
         justify-content: center;
         min-height: 80px;
    }
    .item-details {
        /* THAY ĐỔI: Căn giữa toàn bộ text (tên và phẩm chất) để cân đối */
        text-align: center; 
    }
}

/* ========================================================== */
/* ==   6. CÁC STYLE PHỤ & NÂNG CẤP                       == */
/* ========================================================== */

.profile-info-text p#profile-character-details {
    display: inline-block;
    margin-top: 5px;
    padding: 6px 15px;
    font-size: 0.9em;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #c88d3a, #e4a95e, #f8d488, #e4a95e, #c88d3a);
    background-size: 400% 400%;
    border: 1px solid #f8d488;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.25);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: gradient-flow 8s ease infinite;
    text-align: center;
    width: auto;
}

.profile-info-text p#profile-character-details:hover {
    cursor: default;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 15px rgba(228, 143, 69, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    filter: brightness(1.1);
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* profile.css */

/* ========================================================== */
/* ==   PANEL CHỌN ẢNH NỀN (BẢN DỌN DẸP VÀ SỬA LỖI)         == */
/* ========================================================== */

#sample-image-panel-overlay {
    background-color: rgba(12, 12, 12, 0.85);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
}
#sample-image-panel-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* 2. Panel Content (Vùng chứa chính) */
.sample-image-panel-content {
    /* Rất quan trọng: Đặt làm gốc để định vị các phần tử con */
    position: relative; 
    width: 100%;
    max-width: 480px;
    height: 90vh;
    max-height: 750px;
    background: #1f1f23;
    border-radius: 8px;
    /* Xóa padding và ẩn phần tràn ra ngoài của panel chính */
    padding: 0;
    overflow: hidden; 
}


/* 3. Header & Footer (Cố định ở trên và dưới) */
.sample-image-panel-header,
.sample-image-panel-actions {
    /* Định vị tuyệt đối so với panel cha (.sample-image-panel-content) */
    position: absolute; 
    left: 0;
    width: 100%;
    padding: 0 20px;
    background: rgba(18, 18, 18, 0.9);
    z-index: 10; /* Đảm bảo luôn nằm trên lưới ảnh */
    box-sizing: border-box;
}

.sample-image-panel-header {
    top: 15px; /* Gắn chặt vào cạnh trên */
    height: 60px;
}

.sample-image-panel-actions {
    bottom: 15px; /* Gắn chặt vào cạnh dưới */
    height: 65px;
    
    justify-content: space-between; /* Giãn cách các button ra */
    
    gap: 20px; /* Khoảng cách giữa các nút */
}


/* 4. Vùng Lưới Chứa Ảnh (Khu vực có thể cuộn) */
.sample-image-grid-container {
    /* Chiếm toàn bộ chiều cao của panel cha */
    height: 100%; 
    
    /* Chỉ cho phép cuộn theo chiều dọc */
    overflow-y: auto; 
    
    /* Đây là chìa khóa: Đẩy nội dung xuống để không bị header che (60px) 
       và tạo khoảng trống ở dưới để không bị footer che (65px) */
    padding: 75px 15px 80px 15px; 
    
    /* Rất quan trọng: Đảm bảo padding được tính vào trong chiều cao 100% */
    box-sizing: border-box; 
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}



/*
  Style cho từng KHUNG chứa ảnh.
  Mỗi khung sẽ có kích thước chính xác là 160x240 pixels.
*/
.sample-image-item {
    /* --- 1. KÍCH THƯỚC CỐ ĐỊNH --- */
    /* Bạn có thể thay đổi các giá trị này theo ý muốn. */
    width: 160px;
    height: 240px;

    /* --- 2. CĂN CHỈNH & TRANG TRÍ --- */
    /* Nền để thấy rõ khung */
    background-color: #2a2a2e;
    /* Bo tròn góc cho đẹp */
    border-radius: 8px;
    /* Đảm bảo nội dung không tràn ra ngoài */
    overflow: hidden;
    /* Dùng Flexbox để căn giữa ảnh một cách hoàn hảo */
    display: flex;
    align-items: center;
    justify-content: center;
    
    
    /* 1. Thêm con trỏ chuột để người dùng biết là có thể click */
    cursor: pointer; 
    
    /* 2. Thêm viền trong suốt để khi chọn không bị giật layout */
    border: 3px solid transparent; 
    
    /* 3. Thêm hiệu ứng chuyển động mượt mà cho mọi thay đổi */
    transition: all 0.3s ease-in-out; 
}

/*
  Style cho khung ảnh KHI ĐƯỢC CHỌN.
  Class '.selected' này sẽ được thêm bằng JavaScript.
*/
.sample-image-item.selected {
  /* Đổi viền từ trong suốt thành màu cam nổi bật */
  border-color: #E48F45;

  /* Thêm hiệu ứng bóng đổ tỏa sáng cùng tông màu */
  box-shadow: 0 0 20px rgba(228, 143, 69, 0.7);

  /* Phóng to nhẹ để tạo cảm giác "nổi" lên */
  transform: scale(1.05);
}

/*
  Style cho chính thẻ <img> nằm BÊN TRONG khung.
*/
.sample-image-item img {
    /* Đặt kích thước tối đa cho ảnh */
    width: 100%;
    height: 100%;

    /* --- 3. QUY TẮC HIỂN THỊ ĐẦY ĐỦ ẢNH --- */
    /*
      Đây là lệnh quan trọng nhất:
      Nó bắt buộc ảnh phải TỰ ĐỘNG THU NHỎ để nằm gọn bên trong
      khung 160x240px, giữ nguyên tỷ lệ và TUYỆT ĐỐI KHÔNG CẮT XÉN.
    */
    object-fit: contain;
}