/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

body { font-family: 'Kanit', sans-serif; background-color: #f3f4f6; }

/* --- Footer (Toolbar แบบติดขอบล่าง) --- */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem 0;
    text-align: center;
    color: #db2777;
    font-size: 0.875rem;
    z-index: 50; /* อยู่บนสุดในเลเยอร์ปกติ */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

/* ดันเนื้อหาขึ้นเพื่อไม่ให้ Footer บัง */
#app-container {
    padding-bottom: 80px; 
    min-height: 100vh;
}

/* --- Full Screen Loading Overlay (แก้ไขให้เต็มจอ 100%) --- */
#global-loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; /* เต็มจอทุกทิศทาง */
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    z-index: 9999; /* สูงสุดเสมอ */
    display: none; /* ซ่อนเป็นค่าเริ่มต้น */
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* --- Loading Spinner --- */
.loading-spinner {
    border: 4px solid rgba(236, 72, 153, 0.2);
    width: 50px; height: 50px;
    border-radius: 50%;
    border-left-color: #db2777;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Toast Notification --- */
#toast-container {
    position: fixed; top: 1rem; right: 1rem; z-index: 10000;
    display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
.toast {
    background: white; border-left: 4px solid; padding: 1rem; border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); display: flex; align-items: center;
    min-width: 300px; transform: translateX(120%); transition: transform 0.3s ease-out; pointer-events: auto;
}
.toast.show { transform: translateX(0); }
.toast-success { border-color: #22c55e; color: #15803d; }
.toast-error { border-color: #ef4444; color: #b91c1c; }
.toast-info { border-color: #3b82f6; color: #1d4ed8; }

/* Capture Template */
/* assets/css/style.css */

/* กล่องครอบใหญ่สุด (เอาไว้ซ่อน) */
#capture-template-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0; /* ความสูง 0 เพื่อไม่ให้กินที่ */
    overflow: visible; /* ให้เนื้อหาล้นออกมาได้ (เพื่อให้ html2canvas จับภาพได้) */
    z-index: -1; /* อยู่หลังสุด */
}

/* ตัวการ์ดต้นฉบับที่จะแคป */
.capture-card {
    position: absolute;
    top: -9999px; /* ดันขึ้นไปข้างบนสุดขอบโลก */
    left: 0;
    width: 600px; /* บังคับความกว้าง */
    background-color: #ffffff;
    /* ห้ามใช้ opacity, visibility, display: none */
    display: block;
}
.capture-card { width: 600px; padding: 20px; background-image: url('../../img/A_background.jpg'); background-size: cover; background-position: center; font-family: 'Kanit', sans-serif; position: relative; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.capture-overlay { background-color: rgba(255, 255, 255, 0.92); border-radius: 10px; padding: 20px; border: 2px solid #fbcfe8; margin-bottom: 5px; }
.capture-header { display: flex; align-items: center; margin-bottom: 15px; border-bottom: 2px solid #fce7f3; padding-bottom: 10px; }
.capture-flag { width: 50px; height: 35px; border-radius: 4px; object-fit: cover; margin-right: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.capture-title { margin-top: -30px; font-size: 24px; font-weight: bold; color: #be185d; }
.capture-status { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; height: 28px; border-radius: 20px; font-weight: bold; font-size: 14px; line-height: 1; padding-top: 0px; padding-bottom: 15px; }
.capture-section-title { margin-top: -15px; font-size: 16px; font-weight: bold; color: #4b5563; margin-bottom: 5px; margin-top: 10px; }
.capture-tags { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; }
.capture-tag { background-color: #ef4444; color: white; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 999px; font-weight: 600; font-size: 15px; line-height: 1; padding-top: 0px; padding-bottom: 15px; margin-right: 4px; margin-bottom: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.capture-footer { margin-top: 20px; padding-top: 15px; border-top: 2px solid #e5e7eb; text-align: center; font-size: 12px; color: #6b7280; }
.capture-results { display: none !important; }

/* Elements Styles */
.date-filter-btn { padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid #D1D5DB; background-color: #FFFFFF; color: #374151; font-weight: 500; transition: all 0.2s ease-in-out; white-space: nowrap; }
.date-filter-btn.active { background-color: #2563EB; color: #FFFFFF; border-color: transparent; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
.closed-number-tag { display: inline-flex; align-items: center; background-color: #ef4444; color: white; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.closed-number-tag.is-winner { background-color: #22c55e; }
.closed-number-tag.is-winner-reverse { background-color: #9333ea; }
.result-closed-label-reverse { color: #7e22ce; font-weight: 600; font-size: 0.75rem; margin-left: 0.25rem; animation: pulse 2s infinite; }
.closed-number-tag .delete-icon { cursor: pointer; opacity: 0.7; transition: opacity 0.2s; margin-left: 4px; }
.closed-number-tag .delete-icon:hover { opacity: 1; }
.result-closed-label { color: #16a34a; font-weight: 600; font-size: 0.75rem; margin-left: 0.25rem; animation: pulse 2s infinite; }
.package-label { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0.75rem 0.5rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; cursor: pointer; height: 100%; }
.package-label.selected, input[type="radio"]:checked + .package-label { border-color: #ec4899; background-color: #fce7f3; box-shadow: 0 0 0 2px #ec4899; }
.btn-cancel { background-color: #f3f4f6; border: 1px solid #d1d5db; color: #374151; }
.adjust-action-btn.active { background-color: white; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
.system-notification-box { display: flex; align-items: center; justify-content: center; padding: 1rem 1.5rem; background-color: #fffbeb; border: 2px solid #fde68a; border-radius: 0.75rem; color: #ca8a04; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); text-align: center; animation: pulse-light 2.5s infinite; }

/* Custom Scrollbar for Modal */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Backdrop Blur Fix */
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* --- เพิ่มต่อท้ายไฟล์ style.css --- */

/* สีสำหรับ ปิดบน ออกล่าง (สีม่วง) */
.closed-number-tag.is-cross-bottom { 
    background-color: #9333ea !important; 
    border-color: #7e22ce; 
    color: white;
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.3);
}

/* สีสำหรับ ปิดล่าง ออกบน (สีส้ม) */
.closed-number-tag.is-cross-top { 
    background-color: #f97316 !important; 
    border-color: #c2410c; 
    color: white;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
}

/* บังคับสีสำหรับถูกรางวัลตรง (เขียว) ให้ทับสีแดงเสมอ */
.closed-number-tag.is-winner {
    background-color: #22c55e !important;
}

/* บังคับสีสำหรับถูกรางวัลกลับ (เหลือง/ม่วง) ให้ทับสีแดงเสมอ */
.closed-number-tag.is-winner-reverse {
    background-color: #eab308 !important; /* ปรับเป็นเหลืองเข้มให้อ่านง่าย */
    color: #422006;
}