/* assets/css/won-google-sheet-import.css */

/* --- Styling cụ thể cho Google Sheet Import Modal --- */

/* Đảm bảo .popup-content là context cho việc định vị và có style cơ bản */
#won-google-sheet-modal .popup-content {
  position: relative; /* Quan trọng cho việc định vị nút con tuyệt đối nếu cần */
  max-width: 550px; 
  /* 🔥 MỚI THÊM: Bật Flexbox và Ép chiều cao tối đa */
  display: flex;
  flex-direction: column;
  max-height: 90dvh;
  /* Các thuộc tính khác như padding, border-radius, box-shadow sẽ được kế thừa 
     từ .popup-content trong won-extra.css, hoặc bạn có thể định nghĩa ở đây nếu muốn ghi đè.
     Ví dụ:
     background-color: #fefefe;
     margin: 10% auto; 
     padding: 20px;
     border: 1px solid #888;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  */
}

/* Định dạng cho .popup-header (sử dụng Flexbox để căn chỉnh) */
#won-google-sheet-modal .popup-header {
  display: flex;
  justify-content: space-between; /* Đẩy tiêu đề sang trái, nút đóng sang phải */
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  /* 🔥 MỚI THÊM: Đóng băng Header, không cho phép bị thu nhỏ */
  flex-shrink: 0;
  /* position: relative; không cần thiết nếu nút đóng là flex item */
}

#won-google-sheet-modal .popup-header h3 {
  margin: 0;
  font-size: 1.1em; /* Hoặc 16px, 18px tùy bạn */
  flex-grow: 1; /* Cho tiêu đề chiếm không gian */
  color: #333; /* Màu chữ tiêu đề */
}

 

/* Body của modal */
#won-google-sheet-modal .popup-body {
  padding-top: 10px;
  padding-bottom: 15px;
  /* 🔥 MỚI THÊM: Phần ruột chiếm toàn bộ chỗ trống và tự bật thanh cuộn nếu dài quá */
  flex-grow: 1;
  overflow-y: auto;
  /* padding-left, padding-right sẽ kế thừa hoặc bạn có thể đặt ở .popup-content */
}

#won-google-sheet-modal .popup-body p {
  font-size: 14px;
  color: #555;
  margin-bottom: 15px;
  line-height: 1.5;
}

#won-google-sheet-modal .popup-body label {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

#won-google-sheet-modal .popup-body input[type="url"],
#won-google-sheet-modal .popup-body input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #9c9c9b;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#won-google-sheet-modal .popup-body input[type="url"]:hover,
#won-google-sheet-modal .popup-body input[type="text"]:hover,
#won-google-sheet-modal .popup-body input[type="url"]:focus,
#won-google-sheet-modal .popup-body input[type="text"]:focus {
  border-color: #007bff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* ======================================================= */
/* DARK MODE: HIỆU ỨNG ÁNH SÁNG VÀNG CHO INPUT GOOGLE SHEET */
/* ======================================================= */

body.theme-dark #won-google-sheet-modal .popup-body input[type="url"]:hover,
body.theme-dark #won-google-sheet-modal .popup-body input[type="text"]:hover,
body.theme-dark #won-google-sheet-modal .popup-body input[type="url"]:focus,
body.theme-dark #won-google-sheet-modal .popup-body input[type="text"]:focus {
    /* Đổi viền sang màu vàng kim (Gold) */
    border-color: #ffd700 !important; 
    
    /* Đổi hiệu ứng tỏa sáng (Glow) sang màu vàng trong suốt */
    /* rgba(255, 215, 0, 0.3) tương ứng với màu vàng kim có độ mờ 30% */
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.3) !important;
    
    /* (Khuyên dùng) Đảm bảo nền ô nhập liệu tối và chữ trắng để dễ đọc */
    background-color: #333 !important;
    color: #fff !important;
    outline: 0;
}
#won-google-sheet-modal .popup-body small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #6c757d;
}

#won-google-sheet-modal .popup-body small a {
  color: #007bff;
  text-decoration: none;
}
#won-google-sheet-modal .popup-body small a:hover {
  text-decoration: underline;
}

/* Khu vực hiển thị trạng thái */
#won-google-sheet-import-status {
  margin-top: 15px;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid transparent;
}

#won-google-sheet-import-status.loading {
  background-color: #e9f5ff;
  border-color: #b3d7ff;
  color: #004085;
}

#won-google-sheet-import-status.error {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

#won-google-sheet-import-status.success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

/* Footer của modal */
#won-google-sheet-modal .popup-footer {
  text-align: right;
  margin-top: 20px; /* Tăng khoảng cách với body */
  padding-top: 15px;
  border-top: 1px solid #eee;
  /* 🔥 MỚI THÊM: Đóng băng Footer, ghim chết 2 nút bấm ở dưới đáy */
  flex-shrink: 0;
}

#won-google-sheet-modal .popup-footer .popup-btn {
  padding: 8px 15px; /* Tăng padding cho nút */
  margin-left: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  border: 1px solid transparent; /* Thêm border để nhất quán */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* === BEGIN: Custom Cancel Button Color for Google Sheet Import === */
#won-google-sheet-modal .popup-footer .popup-btn#won-google-sheet-modal-cancel-btn {
  background-color: #4A4A4A; /* Màu đen xám */
  color: #ffffff;           /* Màu chữ trắng */
  border-color: #c0392b;   /* Màu viền tối hơn (tùy chọn) */
}
#won-google-sheet-modal .popup-footer .popup-btn#won-google-sheet-modal-cancel-btn:hover {
  background-color: #c0392b; /* Màu đen xám sẫm hơn khi hover */
  border-color: #222222;
}
/* === END: Custom Cancel Button Color for Google Sheet Import === */

/* Nút Import đặc biệt */
#won-google-sheet-modal-import-btn {
  background-color: #106e26;
  color: white;
  border: 2px solid #52ff7f !important;
}
#won-google-sheet-modal-import-btn:hover {
  background-color: #218838;
  border-color: #52ff7f;
}
#won-google-sheet-modal-import-btn:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.65;
}

/* --- Dark Mode Overrides --- */
body.theme-dark #won-google-sheet-modal .popup-content {
  background-color: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

body.theme-dark #won-google-sheet-modal .popup-header {
  border-bottom-color: #444;
}
body.theme-dark #won-google-sheet-modal .popup-header h3 {
  color: #e0e0e0 !important;
}

/* ==========================================================================
   CẤU HÌNH CHO NÚT ĐÓNG GOOGLE SHEET (#won-google-sheet-modal-close-btn)
   ========================================================================== */

/* 1. Căn giữa icon trong nút */
#won-google-sheet-modal-close-btn.popup-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 5px !important;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* 2. Cấu hình ảnh bên trong (Size và hiệu ứng mượt) */
#won-google-sheet-modal-close-btn img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    display: block !important;
    
    /* Chuẩn bị cho hiệu ứng xoay */
    transition: transform 0.3s ease !important;
    transform-origin: center center !important;
}

/* 3. Hiệu ứng xoay khi tương tác (Hover / Active / Focus) */
#won-google-sheet-modal-close-btn:hover img,
#won-google-sheet-modal-close-btn:active img,
#won-google-sheet-modal-close-btn:focus img {
    transform: rotate(90deg) !important;
}

body.theme-dark #won-google-sheet-modal .popup-body p {
  color: #c5c5c5;
}
body.theme-dark #won-google-sheet-modal .popup-body label {
  color: #e0e0e0 !important;
}
body.theme-dark #won-google-sheet-modal .popup-body input[type="url"],
body.theme-dark #won-google-sheet-modal .popup-body input[type="text"] {
  background-color: #3a3a3a !important;
  border-color: #555 !important;
  color: #e0e0e0 !important;
}

body.theme-dark #won-google-sheet-modal .popup-body input[type="text"]:focus {
  border-color: #00aeff;
  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
}
body.theme-dark #won-google-sheet-modal .popup-body input[type="url"]::placeholder,
body.theme-dark #won-google-sheet-modal .popup-body input[type="text"]::placeholder {
    color: #888;
}
body.theme-dark #won-google-sheet-modal .popup-body small {
  color: #aaa;
}
body.theme-dark #won-google-sheet-modal .popup-body small a {
  color: #6cb2ff;
}

body.theme-dark #won-google-sheet-import-status.loading {
  background-color: #2a3b4f; border-color: #466a9c; color: #b8d7ff;
}
body.theme-dark #won-google-sheet-import-status.error {
  background-color: #4f2a2f; border-color: #9c4651; color: #f5c6cb;
}
body.theme-dark #won-google-sheet-import-status.success {
  background-color: #2a4f31; border-color: #469c51; color: #c3e6cb;
}

body.theme-dark #won-google-sheet-modal .popup-footer {
  border-top-color: #444;
}
/* Nút trong footer của dark mode (ví dụ nút Cancel)
   Nếu bạn có style chung cho .popup-btn trong dark mode ở won-extra.css, nó sẽ được áp dụng.
   Nếu không, bạn có thể thêm ở đây:
body.theme-dark #won-google-sheet-modal .popup-footer .popup-btn#won-google-sheet-modal-cancel-btn {
  background-color: #555;
  color: #fff;
  border-color: #666;
}
body.theme-dark #won-google-sheet-modal .popup-footer .popup-btn#won-google-sheet-modal-cancel-btn:hover {
  background-color: #4a4a4a;
}
*/
body.theme-dark #won-google-sheet-modal-import-btn {
  background-color: #218838;
  border-color: #52ff7f;
  color: white;
}
body.theme-dark #won-google-sheet-modal-import-btn:hover {
  background-color: #1e7e34;
  border-color: #52ff7f;
}
body.theme-dark #won-google-sheet-modal-import-btn:disabled {
  background-color: #495057;
  border-color: #495057;
  color: #adb5bd;
}
/* ==========================================
   >>> VIỀN FOCUS CHO NÚT CANCEL & IMPORT <<<
   ========================================== */
#won-google-sheet-modal-cancel-btn:focus-visible,
#won-google-sheet-modal-import-btn:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    border-radius: 4px; /* Bo góc nhẹ cho cái nút */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); /* Phát hào quang nhẹ */
}

/* ==========================================
   >>> VIỀN FOCUS CHO 2 Ô NHẬP LIỆU <<<
   ========================================== */
#won-google-sheet-api-key:focus-visible,
#won-google-sheet-range:focus-visible {
    outline: 2px solid #007bff !important;
    outline-offset: 1px !important;
    border-color: #007bff; /* Đổi màu viền gốc của thẻ input */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
/* --- Responsive --- */
@media (max-width: 768px) {
  #won-google-sheet-modal .popup-content {
    margin: 2dvh auto; /* 🔥 ĐỔI 5% THÀNH 2dvh CHO CHUẨN ĐO LƯỜNG */
    width: 95%; /* Nhích lên 95% cho thoáng */
    max-width: 95%;
    padding: 15px;
    max-height: 96dvh; /* 🔥 CHIỀU CAO TỐI ĐA GẦN FULL MÀN HÌNH */
  }
  #won-google-sheet-modal .popup-header h3 {
    font-size: 16px;
  }
  #won-google-sheet-modal .popup-body input[type="url"],
  #won-google-sheet-modal .popup-body input[type="text"] {
    padding: 8px;
    font-size: 13px;
  }
  #won-google-sheet-modal .popup-footer .popup-btn {
    padding: 8px 10px;
    font-size: 13px;
  }
}