body { font-family: 'Prompt', sans-serif; background-color: #f9fafb; }
h1, h2, h3, h4, button, input, select, label, .font-display { font-family: 'Prompt', sans-serif; }

/* ✅ บังคับให้พื้นที่เนื้อหาข่าวใช้ฟอนต์ Prompt เสมอ */
.editor-content { font-family: 'Prompt', sans-serif !important; font-size: 15px; }
.editor-content b, .editor-content strong { font-weight: bold; }
.editor-content i, .editor-content em { font-style: italic; }
.editor-content u { text-decoration: underline; }
.editor-content strike, .editor-content s { text-decoration: line-through; }
.editor-content a { color: #2563EB; text-decoration: underline; cursor: pointer; }

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animated-bg {
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite;
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slideUpFade 0.4s ease-out forwards; }

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(15px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.animate-fade-in { animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.ai-background {
    background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #ec4899, #06b6d4);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    color: white;
}

/* 🌟 ระบบ Print 🌟 */

@media print {
    .vertical-text {
        /* บังคับการแสดงผลแนวตั้งให้เสถียรขึ้นบน iPad */
        writing-mode: vertical-rl !important;
        -webkit-writing-mode: vertical-rl !important;
        transform: rotate(180deg);
        display: inline-block;
        min-height: 100px; /* กำหนดความสูงขั้นต่ำที่แน่นอน */
    }
    
    /* ป้องกันการบีบตารางจนเพี้ยน */
    table {
        table-layout: auto !important; /* เปลี่ยนจาก fixed เป็น auto เพื่อให้ iPad คำนวณตามเนื้อหาจริง */
    }
}

@media print {
    @page { size: A4; margin: 10mm; }
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #report-card-container { page-break-inside: avoid; }
}
#bulk-print-container { display: none; }
@media print {
    body.is-bulk-printing #app-root, body.is-bulk-printing #custom-popup { display: none !important; }
    body.is-bulk-printing #bulk-print-container { display: block !important; }
    body.is-bulk-printing { background: white !important; }
}
#print-petition-container { display: none; }
@media print {
    body.is-printing-petition #app-root, body.is-printing-petition #custom-popup { display: none !important; }
    body.is-printing-petition #print-petition-container { display: block !important; }
    body.is-printing-petition { background: white !important; }
}
/* สถิติ Print */
@media print {
    body.print-landscape @page { size: A4 landscape; margin: 10mm; }
    body.print-landscape { background: white; }
    body.print-landscape #admin-menu, body.print-landscape aside, body.print-landscape .print\:hidden { display: none !important; }
    body.print-landscape #admin-content { padding: 0; }
}

    @font-face {
        font-family: 'TH Sarabun New';
        src: url('assets/fonts/thsarabunnew-webfont.eot');
        src: url('assets/fonts/thsarabunnew-webfont.eot?#iefix') format('embedded-opentype'),
             url('assets/fonts/thsarabunnew-webfont.woff') format('woff'),
             url('assets/fonts/thsarabunnew-webfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    .font-sarabun {
        font-family: 'TH Sarabun New', sans-serif;
    }
    @media print {
        /* ปล่อยให้ฟอนต์เป็นไปตามที่แต่ละหน้าตั้งค่าไว้ (ไม่บังคับเหมารวม) */
        .no-print { display: none; }
        .page-break { page-break-after: always; }
    }


    @media print {
    /* บังคับกระดาษ A4 แนวนอน */
       
    /* ซ่อน scrollbar ตอนปริ้น และให้ตารางขยายเต็ม */
    .overflow-x-auto {
        overflow: visible !important;
    }
    
    /* บังคับฟอนต์และปรับขนาดให้เล็กพอดีกระดาษ */
    table {
        font-size: 11px !important; /* ปรับขนาดตัวหนังสือให้เล็กลงเพื่อให้ 40 คอลัมน์ยัดลง A4 ได้ */
        width: 100% !important;
        min-width: auto !important;
    }

    th, td {
        padding: 1px !important; /* ลดช่องไฟลงเพื่อให้กระชับที่สุด */
    }
    
    /* ซ่อนเมนูและปุ่มที่ไม่จำเป็นตอนพิมพ์ */
    .no-print, button, .admin-sidebar, .admin-header {
        display: none !important;
    }
}

/* บังคับโหมดกลางคืน (Dark Mode) ให้ครอบคลุมทั่วทั้งระบบ */
html.dark body {
    background-color: #111827; /* พื้นหลังหน้าจอหลัก */
    color: #f9fafb; /* สีตัวอักษรทั่วไป */
}

/* เปลี่ยนกล่องสีขาวทั้งหมดให้เป็นสีเทาเข้ม */
html.dark .bg-white {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* เปลี่ยนพื้นหลังสีเทาอ่อนให้มืดลง */
html.dark .bg-gray-50 {
    background-color: #111827 !important;
}

/* ปรับสีตัวอักษรที่เป็นสีเข้ม ให้สว่างขึ้นเพื่อให้อ่านได้ในพื้นหลังสีดำ */
html.dark .text-gray-800, 
html.dark .text-gray-700, 
html.dark .text-gray-600 {
    color: #e5e7eb !important;
}

/* เปลี่ยนสีกรอบเส้นขอบต่างๆ ไม่ให้สว่างเกินไป */
html.dark .border-gray-100, 
html.dark .border-gray-200, 
html.dark .border {
    border-color: #374151 !important;
}

/* เปลี่ยนสีช่องกรอกข้อมูล (Input / Select) */
html.dark input, 
html.dark select, 
html.dark textarea {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}

/* เปลี่ยนสีตาราง */
html.dark thead {
    background-color: #111827 !important;
}
html.dark tr.hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

/* เอฟเฟกต์สำหรับปุ่มเมนูด้านข้าง */
.admin-menu-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* เวลากดคลิกเมาส์ค้างที่ปุ่ม (Active state) จะให้ปุ่มยุบลงไปนิดนึง */
.admin-menu-btn:active {
    transform: scale(0.92);
    opacity: 0.8;
}

/* บังคับซ่อน Scrollbar แนวนอนของเมนูด้านข้าง */
#desktop-sidebar, 
#desktop-sidebar .overflow-y-auto,
#desktop-sidebar .overflow-auto {
    overflow-x: hidden !important;
}

/* แต่ง Scrollbar แนวตั้งของ Sidebar ให้ดูสวยงาม ไม่เกะกะ */
#desktop-sidebar ::-webkit-scrollbar {
    width: 4px; /* ขนาดความกว้างของ scrollbar แนวตั้ง */
}
#desktop-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}
#desktop-sidebar ::-webkit-scrollbar-thumb {
    background: transparent; 
    border-radius: 4px;
}
/* ให้แสดงสี Scrollbar เฉพาะตอนเอาเมาส์ไปชี้ที่เมนู */
#desktop-sidebar:hover ::-webkit-scrollbar-thumb {
    background: #d1d5db; 
}

/* Animation styles สำหรับ Dashboard */
@keyframes popIn { 
    0% { opacity: 0; transform: scale(0.9) translateY(10px); } 
    70% { transform: scale(1.02) translateY(-2px); } 
    100% { opacity: 1; transform: scale(1) translateY(0); } 
}
.pop-in { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; }
.delay-100 { animation-delay: 100ms; } 
.delay-200 { animation-delay: 200ms; } 
.delay-300 { animation-delay: 300ms; }

/* ปรับปรุงแอนิเมชัน fade-in-up ให้ลื่นไหลขึ้น */
.fade-in-up { 
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
    opacity: 0; 
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}