/* Ported CSS from React/Tailwind */
body {
    font-family: 'Noto Sans Thai', sans-serif;
    background-color: #f5f5f7;
    font-size: 22px;
}

.min-h-screen { min-height: 100vh; }
.bg-white { background-color: #ffffff; }
.rounded-\[32px\] { border-radius: 32px; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.border { border-width: 1px; }
.border-black\/10 { border-color: rgba(0, 0, 0, 0.1); }
.space-y-4 > * + * { margin-top: 1rem; }
.block { display: block; }
.font-bold { font-weight: 700; }
.opacity-60 { opacity: 0.6; }
.mb-2 { margin-bottom: 0.5rem; }
.ml-1 { margin-left: 0.25rem; }
.w-full { width: 100%; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.bg-\[\#f5f5f7\] { background-color: #f5f5f7; }
.rounded-2xl { border-radius: 1rem; }
.rounded-xl { border-radius: 0.75rem; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.flex { display: flex; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.flex-col { flex-direction: column; }
.text-center { text-align: center; }
.border-0 { border-width: 0; }
.appearance-none { appearance: none; }
.mt-4 { margin-top: 1rem; }
.bg-\[\#0071e3\] { background-color: #0071e3; }
.text-white { color: #ffffff; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.active\:scale-95:active { transform: scale(0.95); }
.bg-gray-200 { background-color: #e5e7eb; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.lg\:col-span-4 { grid-column: span 4 / span 4; }
.lg\:col-span-8 { grid-column: span 8 / span 8; }
.items-start { align-items: flex-start; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-\[1440px\] { max-width: 1440px; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* Custom Animations */
.animate-in {
    animation-duration: 700ms;
    animation-fill-mode: both;
}
.fade-in {
    animation-name: fadeIn;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Astrology Table */
table { width: 100%; border-collapse: collapse; }
.border-black { border: 1px solid #000; }
.invisible { visibility: hidden; }
.text-green-500 { color: #22c55e; }

/* Profile List Grid */
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none; }
.justify-center { justify-content: center; }

/* Animation Slide In */
.slide-in-from-bottom-4 {
    animation-name: slideInBottom;
}
@keyframes slideInBottom {
    from { transform: translateY(1rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- Mobile & Tablet Layout Fixes --- */
@media (max-width: 1023px) {
    /* บังคับให้ Sidebar และพื้นที่แสดงผลเต็มหน้าจอเสมอในโหมดมือถือ/แท็บเล็ตแนวตั้ง */
    #sidebarArea, #mainContentArea {
        width: 100% !important;
        grid-column: span 1 / span 1 !important;
    }
}

/* --- iPhone Vertical (Portrait) Design Tuning --- */
@media (max-width: 639px) {
    /* Result Card: ชื่อ 28px */
    #analysisResult h2 {
        font-size: 28px !important;
    }

    /* ข้อมูลวันเกิด: พยายามผลัก "เวลา" ลงบรรทัดใหม่โดยใช้ความกว้าง */
    #analysisResult .flex-col.gap-1 p {
        font-size: 18px !important;
        max-width: 250px; /* จำกัดความกว้างเพื่อให้เวลาขึ้นบรรทัดใหม่ */
        line-height: 1.4 !important;
    }

    /* วันเกิดจันทรคติ: ขยายตัวเลขและ ฯ เป็น 28px */
    #analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 {
        font-size: 28px !important;
        gap: 0.5rem !important;
    }
    #analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 span,
    #analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 div span {
        font-size: 28px !important;
    }
    /* สัญลักษณ์ ฯ และตัวเลขบน-ล่าง ในโหมดมือถือ */
    #analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 div {
        margin-top: 0 !important;
    }
    #analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 div span:nth-child(2) {
        height: 28px !important;
        display: flex;
        align-items: center;
    }

    /* Result Card Header: ปรับระยะห่างให้สมดุลและเท่ากันทุกส่วน */
    #analysisResult .flex.flex-col.md\:flex-row.justify-between.w-full.mb-6.xl\:mb-8 {
        flex-direction: column !important; /* บังคับ Stack แนวตั้งบนมือถือ */
        gap: 0.57rem !important; 
        margin-bottom: 0.57rem !important; /* ปรับเป็น 0.57rem ตามคำสั่ง */
    }

    #analysisResult .flex-col.gap-1.xl\:gap-2 {
        gap: 0.25rem !important; /* ระยะห่างระหว่าง (ชื่อ) กับ (ข้อมูลวันเกิด) */
    }

    /* ปรับปรุงข้อมูลวันจันทรคติให้ชิดกับข้อมูลวันเกิดมากขึ้น */
    #analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ตารางผลลัพธ์: บีบ 12 ช่องให้พอดีหน้าจอ (Full width) */
    #analysisResult .overflow-x-auto {
        overflow-x: hidden !important; /* ยกเลิกการ Scroll */
        margin-top: 0 !important; /* บีบระยะห่างด้านบนของตาราง */
    }
    #analysisResult table {
        min-width: 100% !important;
        width: 100% !important;
        table-layout: fixed !important; /* บังคับให้ช่องเท่ากัน */
    }
    #analysisResult table td {
        padding-left: 1px !important;
        padding-right: 1px !important;
        width: 8.33% !important;
    }
    /* แถวบน (หัวข้อเดือน) เป็น 20px ตัวบาง, แถวกลางเป็น 20px ตัวหนา */
    #analysisResult table tr:first-child td.font-bold {
        font-size: 20px !important;
        font-weight: 400 !important;
    }
    #analysisResult table tr:nth-child(2) td.font-bold {
        font-size: 20px !important; 
        font-weight: 700 !important;
    }

    /* กราฟมหาทักษา: คืนค่าเดิม 0.5 สำหรับ iPhone แนวตั้ง */
    #analysisResult .relative.h-\[600px\] {
        height: 260px !important; 
        margin-top: 4.5rem !important;
        margin-bottom: 0 !important;
        transform: scale(0.5) !important;
        transform-origin: center top !important;
    }

    /* Sidebar Card: บังคับขนาด 22px บน iPhone */
    #sidebarArea label, 
    #sidebarArea input, 
    #sidebarArea select, 
    #sidebarArea option, 
    #sidebarArea button {
        font-size: 22px !important;
    }
}

/* ปรับเพิ่มความสูงของตารางโดยเพิ่ม Padding บน-ล่าง */
#analysisResult table td {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    line-height: 1.2 !important;
}

/* --- iPhone Horizontal (Landscape) Design Tuning --- */
@media (max-width: 932px) and (orientation: landscape) {
    /* กราฟมหาทักษา: ขยายขึ้นเป็น 0.8 สำหรับแนวนอน */
    #analysisResult .relative.h-\[600px\] {
        height: 450px !important; 
        margin-top: 1rem !important;
        margin-bottom: 0 !important;
        transform: scale(0.8) !important;
        transform-origin: center top !important;
    }

    /* ปรับตำแหน่งเครื่องหมายวงนอกสุด (z-30) ทิศด้านบน ให้มาอยู่ที่ -220px (เลื่อนลงจากเดิม 30px) */
    #analysisResult .relative.h-\[600px\] .z-30[style*="top: calc(50% + -250px)"] {
        transform: translate(-50%, -50%) translateY(30px) !important;
    }

    /* ปรับตำแหน่งเครื่องหมายวงนอกสุด (z-30) ทิศด้านล่าง ให้มาอยู่ที่ 220px (เลื่อนขึ้นจากเดิม 30px) */
    #analysisResult .relative.h-\[600px\] .z-30[style*="top: calc(50% + 250px)"] {
        transform: translate(-50%, -50%) translateY(-30px) !important;
    }
}

/* --- iPad Vertical Design Tuning --- */
@media (max-width: 1279px) {
    /* Sidebar Card: ทั้งหมดขนาด 22px */
    #sidebarArea label, 
    #sidebarArea input, 
    #sidebarArea select, 
    #sidebarArea option, 
    #sidebarArea button {
        font-size: 22px !important;
    }

    /* Result Card: ข้อมูลวันที่เกิด 22px */
    #analysisResult .flex-col p {
        font-size: 22px !important;
    }

    /* ตารางผลลัพธ์ (หัวข้อเดือน) 24px */
    #analysisResult table tr:first-child td {
        font-size: 24px !important;
    }

    /* ตารางผลลัพธ์ (ตัวเลขข้างใน) 28px */
    #analysisResult table tr:nth-child(2) td {
        font-size: 28px !important;
    }
}

/* --- iPad Horizontal (Landscape) Design Tuning --- */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* บังคับ Layout เฉพาะ Grid หลักให้เป็น Side-by-side */
    main > .grid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    /* กรณีแสดงทั้งคู่: Sidebar 3 ส่วน, Result 9 ส่วน (ลดความกว้าง Sidebar ลง 25%) */
    #sidebarArea {
        grid-column: span 3 / span 3 !important;
    }
    #mainContentArea {
        grid-column: span 9 / span 9 !important;
    }

    /* กรณีซ่อน Sidebar: ให้ Result ขยายเต็ม 12 ส่วน */
    #sidebarArea.hidden + #mainContentArea,
    #mainContentArea.xl\:col-span-12 {
        grid-column: span 12 / span 12 !important;
    }

    /* รักษาขนาดตัวอักษร 22px ทั้งหมดใน Sidebar */
    #sidebarArea label, #sidebarArea input, #sidebarArea select, #sidebarArea option, #sidebarArea button {
        font-size: 22px !important;
    }

    /* ปรับช่อง วัน เดือน ปี ให้ขึ้นบรรทัดใหม่ทีละบรรทัด */
    #sidebarArea .flex.gap-1\.5.xl\:gap-2,
    #sidebarArea .flex.gap-1\.5.xl\:gap-2 + div .flex.gap-1\.5.xl\:gap-2 {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    #sidebarArea select {
        width: 100% !important;
        text-align: left !important;
        padding-left: 1rem !important;
    }

    /* ปรับลดความสูง Result Card และคืนค่า Space รอบนอกให้เท่า iPad แนวตั้ง */
    #resultArea {
        min-height: auto !important;
        padding: 1.5rem !important; /* คืนค่าจาก 1rem เป็น 1.5rem เท่า iPad แนวตั้ง */
    }

    /* ลดระยะห่างระหว่างส่วนหัว (ชื่อ) กับตาราง */
    #analysisResult .mb-6.xl\:mb-8 {
        margin-bottom: 0.5rem !important;
    }
/* --- Result Card Font Sizes --- */

/* ชื่อ - นามสกุล: 28px */
#analysisResult h2 {
    font-size: 28px !important;
}

/* ข้อมูลวันที่เกิด: 22px */
#analysisResult .flex-col p {
    font-size: 22px !important;
}

/* ตัวเลขวันเกิด/เดือน/ปีนักษัตร (สัญลักษณ์ ฯ): 30px */
#analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 {
    font-size: 30px !important;
}
#analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 span {
    font-size: 30px !important;
}
/* สัญลักษณ์ ฯ และตัวเลขบน-ล่าง */
#analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 div span:nth-child(2) {
    font-size: 30px !important; /* ฯ */
    height: 30px !important;
}
#analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 div span:nth-child(1),
#analysisResult .flex.items-center.gap-3.sm\:gap-6.xl\:gap-8 div span:nth-child(3) {
    font-size: 24px !important; /* ตัวเลขบน-ล่าง */
    height: 24px !important;
}

/* ตารางผลลัพธ์ (หัวข้อเดือน) 24px */
#analysisResult table tr:first-child td {
    font-size: 24px !important;
}

/* ตารางผลลัพธ์ (ตัวเลขข้างใน) 28px */
#analysisResult table tr:nth-child(2) td {
    font-size: 28px !important;
}

/* ปรับแต่งกราฟมหาทักษาใน iPad แนวนอน: เหลือระยะห่าง 1rem */
#analysisResult .relative.h-\[600px\] {
    margin-top: 1rem !important; 
    margin-bottom: 0 !important;
    height: 450px !important;
    transform: scale(0.85) !important;
}/* ตัวอักษรชื่อดาว (กาลี, สมภพ, ฯลฯ): 28px */
#analysisResult .relative.h-\[600px\] div {
    font-size: 28px !important;
}

/* เครื่องหมายดอกจัน (*) 50px และ กากบาท (X) 32px กลับมาใช้การย่อ Scale แบบเดิม */
#analysisResult .relative.h-\[600px\] div[style*="font-size: 50px"], 
#analysisResult .relative.h-\[600px\] div[style*="font-size: 32px"] {
    transform: translate(-50%, -50%) scale(0.65) !important;
    margin: 0 !important;
}