/* ============================================================
   ไฟล์: responsive.css (ฉบับแก้ไขปุ่มขาวโพลนและ Responsive สมบูรณ์)
   ============================================================ */

/* --- 1. ส่วน Modal (Global) - คงเดิมตามไฟล์คุณ --- */
.modal {
    display: none; 
    position: fixed;
    z-index: 9999 !important; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
}

/* --- 2. ส่วนของปุ่มลอย (โชว์เฉพาะมือถือ) - คงเดิมตามไฟล์คุณ --- */
#mobileEditModeBtn {
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 1500;
    background: #28a745; /* สีเขียว */
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-family: 'Kanit', sans-serif;
    display: none; /* ปิดไว้ก่อน จะเปิดใน Media Query */
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: fixed !important;
}

/* --- 3. Responsive สำหรับหน้าจอไม่เกิน 768px --- */
@media (max-width: 768px) {

    #mobileEditModeBtn { 
        display: flex; 
    position: fixed !important;
    }
    
    /* แสดงปุ่มลอยในมือถือ */
#mobileEditModeBtn.active {
        background-color: #dc3545 !important;
    }

    /* [หัวใจสำคัญ] จัดการปุ่มจัดการการ์ด:
       - ปกติบนมือถือ: ซ่อนปุ่มทั้งหมด 
       - เมื่อเข้า Edit Mode: โชว์เฉพาะปุ่ม .add-to-deck-btn และซ่อนปุ่ม +- (.qty-control)
    */
    .card-controls {
        display: none !important; /* ซ่อนไว้ก่อนในสภาวะปกติ */
    }

    body.edit-mode-on .card .card-controls {
        display: flex !important; /* แสดงเมื่อเปิดโหมดแก้ไข */
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
        justify-content: center;
        padding: 0 5px;
        z-index: 10;
    }

    /* บังคับให้แสดงปุ่มเพิ่มลงเด็ค และซ่อนปุ่มบวกลบ (ถ้ามี) */
    body.edit-mode-on .card .add-to-deck-btn {
        display: block !important;
        width: 100%;
        font-size: 11px; /* ขนาดเล็กลงเพื่อให้พอดีสัดส่วนการ์ดเดิม */
        padding: 6px 2px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }

    body.edit-mode-on .card .qty-control {
        display: none !important; /* ซ่อนปุ่ม +- ไม่ให้ทับซ้อน */
    }

    /* รีเซ็ต Layout หลัก: บังคับให้หน้าคลังกว้างเต็มจอเสมอ */
    #main, .container, main, #mainContent, .main-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 10px !important;
        transform: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* หน้าจัดเด็ค (Side Panel) ปรับให้พอดีจอ */
    .side-panel {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 100% !important;
        height: 100dvh !important; 
        background: #ffffff !important;
        z-index: 3000 !important;
        transition: right 0.4s ease-in-out !important;
        display: flex !important;
        flex-direction: column !important; 
        overflow: hidden !important;
    }

    .side-panel.open {
        right: 0 !important;
    }

    /* ปรับปรุง Grid ในหน้าจัดเด็คให้เป็นการ์ด 4 ใบต่อแถว */
    #deckContainer, #starterContainer, #extraDeckContainer, .deck-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .deck-item, .card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
    }

    /* กันเผื่อ: ไม่ให้เนื้อหาภายในดันความกว้างจนล้นจอ */
    .side-panel, .deck-body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .deck-body {
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    .deck-item img, .card img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* ปรับปรุงส่วน Footer ของ Side Panel */
    .side-panel-footer {
        flex-shrink: 0;
        padding: 10px !important;
        background: white;
        border-top: 1px solid #ddd;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .modal-content-wrapper {
        display: block !important;
        width: 92% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        margin: 20px auto;
    }
}

/* --- 4. หน้าจอขนาดเล็กพิเศษ (มือถือแนวตั้ง) --- */
@media (max-width: 480px) {
    /* Grid 3 คอลัมน์สำหรับคลังการ์ดหลัก */
    #cardContainer {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- 5. Showcase Grid (โหมดโชว์ผลงาน) --- */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    width: 100%;
}

@media (max-width: 768px) {
    .showcase-grid {
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 8px !important; 
    }
}

/* --- 6. Menu Logic (คงเดิม) --- */
.menu { display: flex; flex-direction: column; gap: 12px; padding: 10px; }
.menu-row { display: flex; gap: 8px; align-items: center; }

/* --- จัดระเบียบ Filter Bar บนมือถือ --- */
@media (max-width: 768px) {

    /* จัดเรียง Container หลักเป็นแนวตั้ง */
    .controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    /* 1. ช่องค้นหาเต็มความกว้าง */
    #searchInput {
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
    }

    /* ปุ่มพับ/กางแถบตัวกรอง (ให้แถบค้นหาไม่กินพื้นที่จอเกินจำเป็น) */
    #filterToggleBtn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex-shrink: 0;
        height: 45px;
        padding: 0 12px;
        background: #07357D;
        color: #aac4ff;
        border: 2px solid #1a4a9e;
        border-radius: 8px;
        font-family: 'Kanit', sans-serif;
        font-size: 13px;
        cursor: pointer;
        white-space: nowrap;
    }

    #filterToggleIcon {
        transition: transform 0.25s ease;
    }

    #searchBar.filters-open #filterToggleIcon {
        transform: rotate(180deg);
    }

    /* พับแถบตัวกรองไว้เป็นค่าเริ่มต้น เพื่อไม่ให้กินพื้นที่จอเกิน ~20% */
    .filter-collapsible {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows 0.25s ease;
    }

    .filter-collapsible-inner {
        min-height: 0;
        overflow: hidden;
    }

    #searchBar.filters-open .filter-collapsible {
        grid-template-rows: 1fr;
    }

    /* 2. จัด Dropdown เป็นตาราง 2 คอลัมน์ (ซ้าย-ขวา) ประหยัดที่ */
    .filter-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* แบ่งครึ่ง */
        gap: 8px;
        width: 100%;
    }

    /* ให้ Dropdown และปุ่ม Reset เต็มช่องของตัวเอง */
    .filter-grid select, 
    .filter-grid button {
        width: 100% !important;
        margin: 0 !important;
        height: 40px; /* ความสูงมาตรฐานให้กดง่าย */
    }

    /* ปุ่ม Reset ให้กินพื้นที่เต็ม 2 ช่องด้านล่างสุด */
    #resetBtn {
        grid-column: span 2; 
        background-color: #e74c3c;
        color: white;
    }

    /* 3. ปรับแถบ DP ให้เลื่อนแนวนอนได้ (ไม่กินที่แนวตั้ง) */
    .dp-filter-wrapper {
        display: block !important; /* ยกเลิก Flex เพื่อจัด Layout เอง */
        width: 100%;
    }

    .dp-crystal-container {
        display: flex;
        flex-wrap: nowrap !important; /* ห้ามขึ้นบรรทัดใหม่ */
        overflow-x: auto; /* ให้เลื่อนซ้ายขวาได้ */
        padding-bottom: 10px; /* เว้นที่ให้ Scrollbar นิดหน่อย */
        gap: 8px;
        justify-content: flex-start !important; /* เริ่มจากซ้าย */
        -webkit-overflow-scrolling: touch; /* เลื่อนลื่นๆ บน iOS */
    }
    
    /* ปรับขนาดปุ่มคริสตัลให้เล็กลงนิดหน่อยบนมือถือ */
    .dp-crystal-btn {
        flex-shrink: 0; /* ห้ามหดตัว */
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

/* --- วางไว้บรรทัดล่างสุดของ responsive.css --- */

@media screen and (max-width: 768px) {
    /* สั่งซ่อนปุ่มทุกปุ่มที่มี class modal-nav-btn ที่อยู่ใน #imageModal */
    #imageModal .modal-nav-btn,
    #imageModal button.modal-nav-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }
    
}
}