/* =========================================
   1. ตัวแปรสีและค่าเริ่มต้น (Variables)
========================================= */
:root {
    /* Alias ชื่อสีเดิมที่หน้า manage_trees/tree_detail เรียกใช้อยู่ */
    --forest-deep: var(--primary-color);
    --forest-light: var(--primary-light);
    --bg-light: var(--bg-color);
    --text-white: var(--white);
    --gold-dark: #b8860b;
    --main-font: 'Sarabun', sans-serif;

    /* โทนสีหรูหรา (Luxury Palette) ปรับปรุงจากของเดิม */
    --primary-color: #122419; /* เขียวป่าลึก (Forest Deep) */
    --primary-light: #3d6a52; /* เขียวอ่อนลงมา */
    --wood-color: #a67c52;    /* สีไม้ / น้ำตาลทอง */
    --wood-dark: #5c3a21;     /* สีไม้เข้มสำหรับหัวข้อ */
    --gold-primary: #d4af37;  /* ทองคำแท้ขัดเงา (Brushed Gold) */
    --gold-light: #f3e5ab;    /* ทองคำละมุน */
    
    --bg-color: #f4f5f6;      /* เทาอ่อนพาสเทล (ทูโทนพื้นหลัง) */
    --bg-surface: #25262b;    /* เทาผิวสแลต (ทูโทนเข้ม) */
    --bg-card: #fcfaf6;       /* ครีมงาช้างพาสเทลสำหรับกล่องข้อมูล */
    
    --text-main: #1c1d21;     /* ตัวอักษรหลัก (ปรับให้เข้มชัดขึ้น) */
    --text-muted: #6f7077;    /* ตัวอักษรรอง */
    --white: #ffffff;
    --border-color: #d4af37;  /* เปลี่ยนเส้นขอบหลักเป็นสีทอง */
    
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.15); /* ปรับให้เงาดูพรีเมียมขึ้น */
    
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Sarabun', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   2. ส่วนหัว (Header) และเมนู (Navigation)
========================================= */
.master-header {
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--gold-primary); /* เปลี่ยนเส้นขอบล่างเป็นสีทอง */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
}

.logo-icon {
    font-size: 32px;
    color: var(--gold-primary); /* ให้ไอคอนดูหรูขึ้น */
}

.logo-area h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-links li a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: var(--transition);
}

.nav-links li a:hover {
    color: var(--gold-primary); /* Hover เป็นสีทอง */
    background-color: rgba(212, 175, 55, 0.05);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    min-width: 200px;
    box-shadow: var(--shadow-md);
    border-radius: 0 0 5px 5px;
    border-top: 2px solid var(--gold-primary);
    overflow: hidden;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    padding: 12px 20px;
    display: block;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2); /* ขอบล่างอ่อนๆ */
}

.dropdown-content a:hover {
    background-color: var(--bg-color);
    padding-left: 25px; /* ลูกเล่นเลื่อนขวาเบาๆ เวลา Hover */
    color: var(--gold-primary);
}

/* =========================================
   3. ปุ่ม (Buttons)
========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--gold-primary);
    color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--gold-light);
}

.btn-primary { 
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color)); 
    color: var(--gold-light); 
    border: 1px solid var(--gold-primary); 
}
.btn-primary:hover { 
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color)); 
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); 
}
.btn-danger { background-color: #d32f2f; color: var(--white); border: none; }

/* =========================================
   4. พื้นที่เนื้อหา และ Footer
========================================= */
.master-content {
    flex: 1; /* ขยายให้เต็มพื้นที่เพื่อดัน Footer ลงล่างสุดเสมอ */
    padding: 40px 0;
}

.master-footer {
    background-color: var(--primary-color);
    color: var(--gold-light);
    padding: 30px 0;
    margin-top: auto;
    border-top: 3px solid var(--gold-primary);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--primary-color);
    cursor: pointer;
}

/* =========================================
   การจัดการเมนูล้น (Responsive & Overflow)
========================================= */
.nav-links {
    display: flex;
    list-style: none;
    gap: 10px;
    flex-wrap: wrap; /* ให้เมนูปัดลงบรรทัดใหม่ถ้ายาวเกินไป */
    justify-content: flex-end;
}

/* ปรับจุดเปลี่ยนเป็นเมนูมือถือให้ไวขึ้น (หน้าจอ < 1024px) */
@media (max-width: 1024px) {
    .nav-links, .user-actions {
        display: none;
    }
    .mobile-menu-btn {
        display: block;
    }
    
    /* สไตล์เมื่อเปิดเมนูบนมือถือ/แท็บเล็ต */
    .nav-links.mobile-active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--white);
        padding: 20px;
        box-shadow: var(--shadow-md);
        z-index: 999;
        max-height: calc(100vh - 80px); /* ป้องกันเมนูล้นจอแนวตั้ง */
        overflow-y: auto;
    }
    .user-actions.mobile-active {
        display: flex;
        position: absolute;
        top: calc(100% + 250px); /* ให้อยู่ใต้เมนู */
        left: 20px;
        z-index: 1000;
    }
}

/* =========================================
   5. ฟอร์มและอินพุต (Forms & Inputs)
========================================= */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--primary-color); }
.form-control {
    width: 100%; padding: 10px 15px; border: 1px solid #cccccc;
    border-radius: 5px; font-family: inherit; font-size: 16px; transition: var(--transition);
}
.form-control:focus { border-color: var(--gold-primary); outline: none; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }

/* กล่องเนื้อหาหรูหรา (Luxury Box - สำหรับหน้าหลังบ้าน) */
.luxury-box {
    background: var(--bg-card);
    border: 2px solid var(--gold-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 30px;
    position: relative;
}

/* =========================================
   6. ตารางข้อมูล (Data Tables)
========================================= */
.table-responsive { overflow-x: auto; background: var(--white); border-radius: 8px; box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.data-table th, .data-table td { padding: 15px; text-align: left; border-bottom: 1px solid rgba(212,175,55,0.3); }
.data-table th { background-color: var(--primary-color); color: var(--gold-light); cursor: pointer; white-space: nowrap; border-bottom: 2px solid var(--gold-primary); }
.data-table th:hover { background-color: var(--primary-light); }
.data-table tbody tr:hover { background-color: rgba(212, 175, 55, 0.05); }
.profile-thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ภาพจิ๋วในตาราง (Hover Slider) */
.table-gallery-thumb {
    position: relative; width: 60px; height: 60px; border-radius: 4px;
    overflow: hidden; border: 1px solid var(--gold-primary); cursor: pointer;
}
.table-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.table-gallery-thumb:hover img { transform: scale(1.15); }

/* =========================================
   7. หน้าต่าง Modal & Cropper
========================================= */
.modal {
    display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
    overflow-y: auto; /* ยอมให้ตัวพื้นหลังเลื่อนได้ */
    padding: 20px 0;
}
.modal-content {
    background-color: var(--white); margin: 0 auto; padding: 30px; border-radius: 8px;
    width: 90%; max-width: 800px; box-shadow: var(--shadow-lg); position: relative;
    border-top: 4px solid var(--gold-primary); /* เปลี่ยนเป็นขอบทอง */
    
    /* ป้องกันล้นจอ */
    max-height: 85vh; 
    overflow-y: auto; 
}

/* =========================================
   8. หน้าแคตตาล็อกร้านค้า (Catalog Grid)
========================================= */
.catalog-grid { display: grid; gap: 20px; transition: all 0.3s ease; }
/* ระบบปรับขนาด */
.catalog-grid.small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.catalog-grid.medium { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.catalog-grid.large { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

.tree-card { 
    background: var(--bg-card); border-radius: 8px; overflow: hidden; 
    box-shadow: var(--shadow-sm); transition: var(--transition); 
    border: 1px solid var(--gold-light); display: flex; flex-direction: column; 
    text-decoration: none; color: inherit; position: relative;
}
.tree-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold-primary); }
.card-img-top { width: 100%; height: 280px; object-fit: cover; transition: transform 0.5s ease; }
.tree-card:hover .card-img-top { transform: scale(1.05); }
.card-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.card-title { color: var(--primary-color); font-size: 18px; font-weight: bold; margin-bottom: 5px; }
.card-price { color: var(--gold-dark); font-size: 22px; font-weight: bold; margin-top: auto; padding-top: 10px; text-align: right; }
.badge-status { position: absolute; top: 10px; right: 10px; padding: 5px 15px; border-radius: 20px; color: white; font-size: 14px; font-weight: bold; box-shadow: var(--shadow-sm); z-index: 10; border: 1px solid rgba(255,255,255,0.3); }

/* ปุ่มเลือกขนาด Grid */
.grid-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 4px; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.grid-btn:hover { background: rgba(212, 175, 55, 0.2); color: var(--gold-dark); }
.grid-btn.active { background: var(--gold-primary); color: var(--primary-color); }

/* สไลด์โชว์ (Slider) */
.slider-container { position: relative; width: 100%; padding-top: 100%; overflow: hidden; border-radius: 8px; border: 2px solid var(--gold-light); }
.slider-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s ease; background: #fff; }
.slider-img.active { opacity: 1; z-index: 1; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; justify-content: center; align-items: center; transition: var(--transition); }
.slider-btn:hover { background: var(--gold-primary); color: var(--primary-color); }
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* =========================================
   9. ระบบจัดการรูปภาพคอลลาจ (Collage Grid)
========================================= */
.collage-grid { 
    display: grid; 
    gap: 8px; 
    width: 100%; 
    height: 100% !important; /* บังคับความสูงให้อยู่ในกรอบแม่เสมอ */
}

/* บังคับสัดส่วนแถวไม่ให้ขยายตามรูปด้วย minmax(0, 1fr) */
.collage-1 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
.collage-2 { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
.collage-3 { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.collage-3 .span-2-rows { grid-row: span 2; }
.collage-4 { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }

.collage-item { 
    background: #fff; 
    border: 1px solid rgba(212, 175, 55, 0.3); 
    border-radius: 6px; 
    padding: 5px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;
    min-height: 0 !important; /* 🔥 กุญแจสำคัญ: ตัดแรงดันของรูปภาพ บังคับให้บีบลง */
    min-width: 0 !important;
}

.collage-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; /* ย่อรูปให้พอดีกรอบ ไม่แหว่ง */
    max-width: 100%;
    max-height: 100%;
}
/* =========================================
   10. จัดรูปแบบสำหรับเครื่องพิมพ์ (Print Media - A4 แนวนอน)
========================================= */
.qr-readmore-note { display: none !important; }

@media print {
    @page { size: A4 landscape; margin: 0; }
    html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; width: 100%; height: 100%; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    
    /* ซ่อน UI หลักทั้งหมดบนหน้าเว็บ ไม่ให้ติดไปกับกระดาษพิมพ์ */
    .master-header, .master-footer, .no-print { display: none !important; }
    .master-content { padding: 0 !important; }

    /* บังคับฟอนต์ให้ตรงกับระบบของหน้าเว็บ */
    .print-theme-container, .a4-landscape-page {
        font-family: var(--main-font), 'Sarabun', sans-serif !important;
        width: 285mm !important;
        height: 198mm !important;
        margin: 6mm auto !important;
        background-color: #1a3626 !important;
        padding: 8mm 10mm !important; 
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important; 
        page-break-after: always !important;
        page-break-inside: avoid !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* เลย์เอาต์หลัก ซ้าย-ขวา */
    .print-layout { display: flex !important; gap: 15px !important; height: 100% !important; flex: 1 !important; overflow: hidden !important; }
    .print-left { flex: 1 !important; display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden !important; }
    .print-right { flex: 1.2 !important; display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden !important; }

    .print-title { font-size: 14pt !important; margin-bottom: 6px !important; padding-bottom: 4px !important; color: #fdfaf3 !important; }

    /* กรอบทองคำทุกกล่อง */
    .print-box, .print-box-more { 
        background-color: #fcf8f2 !important; 
        padding: 12px 15px !important; 
        margin-bottom: 10px !important; 
        border: 1.5px solid #d4af37 !important; 
        border-radius: 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* กล่อง 1: กล่องภาพต้นไม้ บังคับไม่ให้ดันล้นกรอบล่าง */
    .print-left .print-box { flex: 1 !important; min-height: 0 !important; padding: 8px !important; }

    /* กล่อง 4: ข้อมูลเพิ่มเติม ให้เต็มพื้นที่ที่เหลือและดัน QR Code ลงล่างสุด */
    .print-right .print-box-more { flex: 1 !important; min-height: 0 !important; margin-bottom: 0 !important; }

    /* ระบบ Grid 4 ช่องตายตัว บังคับภาพหดลงพอดีช่องเสมอ */
    .strict-4-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }
    .strict-1-grid {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }
    .strict-grid-item {
        background: #fff !important;
        border: 1.5px solid #d4af37 !important;
        border-radius: 6px !important;
        padding: 4px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        min-height: 0 !important; /* กุญแจสำคัญตัดแรงดันภาพ */
    }
    .strict-grid-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* ย่อพอดีกรอบ */
    }

    .print-box h2 { font-size: 18pt !important; margin: 0 0 2px 0 !important; line-height: 1.1 !important; color: #1a3626 !important; }
    /* กันสระล่างภาษาไทย (เช่น ุ ู) ถูกตัดทั้งหน้า tree_detail และ Bulk Print */
    .print-box h2.tree-name.u-style-027 {
        line-height: 1.35 !important;
        padding-bottom: 0.12em !important;
    }
    .price-tag { font-size: 16pt !important; margin-top: 5px !important; color: #a67c52 !important; font-weight: bold !important; }
    .print-box div, .print-box span, .print-box strong { font-size: 10.5pt !important; line-height: 1.3 !important; color: #111 !important; }
    
    /* ตัดข้อความยาว และใส่ ... ให้พอดีกรอบอัตโนมัติ */
    .print-text-shrink {
        font-size: 10pt !important;
        line-height: 1.4 !important;
        margin: 4px 0 0 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important; 
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* ข้อความแจ้งเตือนให้อ่านต่อใน QR Code (ดันลงแนบขอบล่างสุดของกล่องเสมอ) */
    .qr-readmore-note {
        display: block !important; 
        text-align: right !important; 
        font-size: 9pt !important;
        color: #a67c52 !important; 
        font-style: italic !important; 
        font-weight: bold !important;
        margin-top: auto !important; 
        border-top: 1px dashed #d4af37 !important; 
        padding-top: 5px !important;
    }
}

/* =========================================
   11. Tree Detail / Bulk Print Shared Styles
========================================= */
/* ควบคุมการแสดงผลระหว่างหน้าเว็บและการพิมพ์ */
    @media screen {
        .show-on-print-only { display: none !important; }
    }
    @media print {
        .no-print { display: none !important; }
        .show-on-print-only { display: block !important; }
        /* บังคับให้สีพื้นหลังและสีของกรอบพิมพ์ออกมาด้วย */
        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
        body { margin: 0; padding: 0; }
        .container { padding: 0 !important; }
        .print-theme-container { box-shadow: none !important; }
        
        /* จัดการหน้าสุดท้าย (สไลด์สุดท้าย) สำหรับ QR Code ภาพรวม */
        .print-last-slide {
            page-break-before: always;
            display: flex !important;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            text-align: center;
            background-color: #fcf8f2;
        }
    }

    /* สไตล์สำหรับภาพรวมต้นไม้ (Collage 4 ช่อง) ใช้ทั้งใน Slider และตอนพิมพ์ */
    .collage-grid {
        display: grid;
        gap: 6px;
        width: 100%;
        height: 100%;
    }
    .collage-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .collage-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
    .collage-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
    .collage-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
    
    .collage-item {
        overflow: hidden;
        border-radius: 4px;
        background: #eee;
    }
    .span-2-rows {
        grid-row: span 2;
    }


/* =========================================
   12. Manage Trees Shared Utilities / Print / Image Editor
========================================= */
.admin-page-bottom { padding-bottom: 50px; }
.admin-page-header,
.form-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}
.form-page-header { flex-wrap: nowrap; }
.admin-page-title { color: var(--forest-deep); }
.icon-bottom { vertical-align: bottom; color: var(--gold-primary); }
.icon-middle { vertical-align: middle; }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-card-bg { background: var(--bg-card); }
.tab-row { display: flex; gap: 10px; margin-bottom: 15px; }
.filter-panel {
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-search { min-width: 250px; flex: 1; }
.filter-status { width: 180px; }
.per-page-wrap { display: flex; align-items: center; gap: 10px; }
.per-page-label { color: var(--text-muted); font-weight: bold; }
.per-page-select { width: 100px; }
.table-box-reset { padding: 0; overflow: hidden; }
.th-thumb { width: 80px; text-align: center; }
.th-sort { cursor: pointer; }
.th-actions, .td-actions { text-align: right; }
.pagination-controls { display: flex; justify-content: center; gap: 5px; margin-top: 20px; }
.modal-sm { max-width: 500px; padding: 25px; }
.modal-lg-reset { max-width: 900px; padding: 0; overflow: hidden; }
.modal-title-line {
    color: var(--forest-deep);
    border-bottom: 2px solid var(--gold-light);
    padding-bottom: 10px;
    margin-top: 0;
}
.radio-card {
    display: block;
    margin-bottom: 15px;
    cursor: pointer;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fafafa;
}
.radio-card input[type="radio"] { margin-right: 10px; transform: scale(1.2); }
.radio-card-title { font-size: 16px; color: var(--wood-dark); }
.radio-card-desc { margin-left: 28px; color: #666; font-size: 13px; }
.text-right { text-align: right; }
.detail-modal-header {
    background: var(--forest-deep);
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--gold-light);
}
.detail-modal-header h3 { margin: 0; font-size: 20px; }
.close-modal {
    color: var(--text-white);
    margin-top: -10px;
    cursor: pointer;
    font-size: 24px;
}
.modal-body-scroll { padding: 25px; max-height: 70vh; overflow-y: auto; }
.show-on-print-only { display: none; }
.row-empty { text-align: center; padding: 30px; color: var(--text-muted); }
.table-tree-code { font-weight: bold; color: var(--wood-dark); font-size: 16px; text-decoration: underline; }
.tree-name-cell { color: var(--forest-deep); }
.tree-sci-cell { font-size: 13px; color: var(--text-muted); }
.status-pill { color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; }
.btn-icon-sm { padding: 5px 10px; }
.btn-icon-sm .material-symbols-outlined { font-size: 18px; }
.btn-blue-outline { color: #1976d2; border-color: #1976d2; }
.modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.modal-subtitle {
    color: var(--wood-dark);
    border-bottom: 1px solid var(--gold-light);
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.modal-subtitle-tight {
    color: var(--wood-dark);
    border-bottom: 1px solid var(--gold-light);
    padding-bottom: 5px;
    margin-top: 15px;
    margin-bottom: 10px;
}
.mini-gallery-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.mini-thumb { width: 100px; height: 100px; object-fit: cover; border-radius: 4px; border: 1px solid #ccc; }
.secret-thumb { border: 2px solid #a67c52; }
.clean-list { list-style: none; line-height: 1.8; }
.cost-danger { color: #d32f2f; }
.cost-danger.first { margin-top: 10px; }
.cost-total {
    font-size: 18px;
    color: var(--wood-dark);
    font-weight: bold;
    border-top: 1px dashed #ccc;
    margin-top: 5px;
    padding-top: 5px;
}
.price-total { font-size: 20px; color: var(--forest-deep); font-weight: bold; }
.maint-modal-content { font-size: 13px; max-height: 250px; overflow-y: auto; }
.muted-text { color: var(--text-muted); }
.maint-mini-img { height: 40px; width: 40px; object-fit: cover; border-radius: 4px; margin-right: 5px; border: 1px solid #ddd; }
.maint-table-cell { padding: 6px 4px; border-bottom: 1px solid #eee; vertical-align: top; }
.maint-badge { background: var(--forest-light); color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; }

.image-editor-modal { z-index: 10000; }
.image-editor-modal .modal-content { position: relative; z-index: 10001; }
.image-editor-content { max-width: 700px; padding: 20px; overflow: visible; }
.image-editor-title { color: var(--wood-dark); border-bottom: 1px solid var(--gold-light); padding-bottom: 10px; }
.image-editor-stage {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 15px;
    background-color: #333;
    height: min(55vh, 400px);
    max-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#editorImageTarget { max-width: 100%; max-height: 400px; display: block; }
.image-editor-filter-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.image-editor-label { font-size: 13px; color: var(--wood-dark); }
.range-control { padding: 0; }
.image-editor-toolbar { position: relative; z-index: 10002; display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.image-editor-footer { position: relative; z-index: 10002; text-align: right; border-top: 1px solid #ccc; padding-top: 15px; }
.image-editor-modal .cropper-container,
.image-editor-modal .cropper-wrap-box,
.image-editor-modal .cropper-canvas,
.image-editor-modal .cropper-drag-box,
.image-editor-modal .cropper-crop-box { max-height: 400px !important; }
.image-editor-modal .cropper-container { z-index: 1; }
.image-editor-modal .btn { position: relative; z-index: 10003; pointer-events: auto; }

.gallery-notice {
    background: rgba(212, 175, 55, 0.1);
    border-left: 6px solid var(--gold-primary);
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.gallery-notice-title { color: var(--wood-dark); display: flex; align-items: center; gap: 5px; }
.gallery-notice-desc { margin: 0; font-size: 14px; color: var(--text-muted); }
.warning-notice { background: #fff3e0; border-left: 6px solid #f57c00; padding: 15px; margin-bottom: 20px; }
.warning-notice-title { color: #f57c00; display: flex; align-items: center; gap: 5px; }
.warning-notice-desc { margin: 0; font-size: 14px; color: #555; }
.form-section-title { color: var(--wood-dark); border-bottom: 2px solid var(--gold-light); padding-bottom: 10px; margin-bottom: 20px; }
.form-section-title.spaced { margin-top: 40px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.grid-auto-180 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.document-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: rgba(212,175,55,0.05); padding: 15px; border-radius: 5px; margin-top: 10px; border: 1px solid var(--gold-light); }
.form-group-compact { margin-bottom: 0; }
.preview-box { margin-bottom: 10px; padding: 10px; border: 1px dashed #ccc; border-radius: 6px; display: inline-block; }
.preview-img { height: 100px; width: 100px; object-fit: cover; border-radius: 6px; cursor: pointer; }
.preview-img.is-hidden { display: none; }
.delete-image-label { color: #d32f2f; font-size: 12px; cursor: pointer; }
.date-panel { background: var(--bg-light); padding: 15px; border-radius: 5px; margin-top: 15px; border: 1px solid #ccc; }
.time-in-garden { margin-top: 10px; padding: 10px; background: #e8f5e9; color: #2e7d32; border-radius: 5px; font-weight: 500; display: none; }
.inline-inputs { display: flex; gap: 5px; }
.price-input { font-weight: bold; color: var(--gold-primary); font-size: 18px; }
.maintenance-panel { background: var(--bg-light); padding: 20px; border-radius: 8px; border: 1px solid #ccc; }
.maintenance-empty { color: var(--text-muted); text-align: center; margin: 0; }
.maintenance-form-row { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.width-auto { width: auto; }
.maintenance-detail-input { flex: 1; min-width: 200px; }
.form-submit-row { text-align: right; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--gold-light); }
.btn-submit-lg { font-size: 18px; padding: 12px 30px; }

#bulkPrintContainer { display: none; }
body.bulk-print-mode #bulkPrintContainer { display: none; }
.bulk-print-img-cover { width: 100%; height: 100%; object-fit: cover !important; display: block; border-radius: 4px; }
.bulk-print-image-frame { height: 100%; width: 100%; overflow: hidden; display: block !important; }

@media print {
    body.bulk-print-mode .master-header,
    body.bulk-print-mode .master-footer,
    body.bulk-print-mode .no-print,
    body.bulk-print-mode .admin-page-header,
    body.bulk-print-mode .tab-row,
    body.bulk-print-mode .filter-panel,
    body.bulk-print-mode .table-responsive,
    body.bulk-print-mode #paginationControls,
    body.bulk-print-mode #bulkPrintModal,
    body.bulk-print-mode #treeDetailModal,
    body.bulk-print-mode #imageEditorModal {
        display: none !important;
    }

    body.bulk-print-mode .master-content,
    body.bulk-print-mode .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    body.bulk-print-mode #bulkPrintContainer {
        display: block !important;
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.bulk-print-mode #bulkPrintContainer * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.bulk-print-mode .bulk-print-page {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
    }

    /* ใช้กติกากระดาษเดียวกับหน้า tree_detail.php: A4 แนวนอน margin 0 */
    @page { size: A4 landscape; margin: 0; }
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .document-panel, .modal-grid-2, .image-editor-filter-grid { grid-template-columns: 1fr; }
    .gallery-notice, .form-page-header { flex-wrap: wrap; }
}


/* =========================================
   13. Extracted Static Inline Styles
   (ย้ายจาก manage_trees.php และ tree_detail.php เพื่อรวม CSS ไว้ที่ style.css)
========================================= */
.u-style-001 { text-align: center; padding: 30px; color: var(--text-muted); }
.u-style-002 { text-align: center; }
.u-style-003 { color: var(--forest-deep); }
.u-style-004 { font-size: 13px; color: var(--text-muted); }
.u-style-005 { text-align: right; }
.u-style-006 { font-size: 18px; }
.u-style-007 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.u-style-008 { color: var(--wood-dark); border-bottom: 1px solid var(--gold-light); padding-bottom: 5px; margin-bottom: 15px; }
.u-style-009 { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.u-style-010 { color: var(--wood-dark); border-bottom: 1px solid var(--gold-light); padding-bottom: 5px; margin-top: 15px; margin-bottom: 10px; }
.u-style-011 { vertical-align: text-bottom; font-size: 18px; }
.u-style-012 { list-style: none; line-height: 1.8; }
.u-style-013 { margin-top: 10px; color: #d32f2f; }
.u-style-014 { color: #d32f2f; }
.u-style-015 { font-size: 18px; color: var(--wood-dark); font-weight: bold; border-top: 1px dashed #ccc; margin-top: 5px; padding-top: 5px; }
.u-style-016 { font-size: 20px; color: var(--forest-deep); font-weight: bold; }
.u-style-017 { color: var(--wood-dark); border-bottom: 1px solid var(--gold-light); padding-bottom: 5px; margin-top: 20px; margin-bottom: 10px; }
.u-style-018 { font-size: 13px; max-height: 250px; overflow-y: auto; }
.u-style-019 { color: var(--text-muted); }
.u-style-020 { width: 100%; border-collapse: collapse; }
.u-style-021 { padding: 6px 4px; border-bottom: 1px solid #eee; vertical-align: top; }
.u-style-022 { background: var(--forest-light); color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.u-style-023 { margin-top: 4px; }
.u-style-024 { vertical-align: middle; }
.u-style-025 { flex: 1 1 auto; min-width: 0; padding-right: 15px; display: flex; flex-direction: column; justify-content: center; }
.u-style-026 { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: baseline !important; margin-bottom: 6px; border-bottom: 1px dashed rgba(166, 124, 82, 0.3); padding-bottom: 6px; }
.u-style-027 { color: #1a3626; font-size: 24px; margin: 0; line-height: 1.35; padding-bottom: 0.12em; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-style-028 { font-size: 20px; font-weight: bold; color: #a67c52; white-space: nowrap; margin-left: 10px; }
.u-style-029 { display: flex !important; flex-direction: row !important; gap: 15px; font-size: 12px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-style-030 { color: #1a3626; }
.u-style-031 { font-style: italic; }
.u-style-032 { width: 80px; flex: 0 0 80px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.u-style-033 { font-size: 9px; color: #333; margin-top: 4px; font-weight: bold; line-height: 1.1; }
.u-style-034 { display: grid; grid-template-columns: 1fr; gap: 12px; font-size: 15px; }
.u-style-035 { border-bottom: 1px dashed #ccc; padding-bottom: 8px; }
.u-style-036 { color: #1a3626; display: inline-block; width: 160px; }
.u-style-037 { font-weight: 600; }
.u-style-038 { margin-bottom: 12px; }
.u-style-039 { color: #1a3626; font-size: 16px; }
.u-style-040 { margin-top: 2px; line-height: 1.4; color: #222; font-size: 11px; }
.u-style-041 { page-break-after: always; }
.u-style-042 { color: #1a3626; font-size: 28px; margin-bottom: 10px; }
.u-style-043 { color: #555; font-size: 16px; margin-bottom: 30px; }
.u-style-044 { color: #888; font-size: 14px; margin-top: 30px; }
.u-style-045 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.u-style-046 { vertical-align: bottom; color: var(--gold-primary); }
.u-style-047 { background: rgba(212, 175, 55, 0.1); border-left: 6px solid var(--gold-primary); padding: 15px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.u-style-048 { color: var(--wood-dark); display: flex; align-items: center; gap: 5px; }
.u-style-049 { margin: 0; font-size: 14px; color: var(--text-muted); }
.u-style-050 { background: #fff3e0; border-left: 6px solid #f57c00; padding: 15px; margin-bottom: 20px; }
.u-style-051 { color: #f57c00; display: flex; align-items: center; gap: 5px; }
.u-style-052 { margin: 0; font-size: 14px; color: #555; }
.u-style-053 { color: var(--wood-dark); border-bottom: 2px solid var(--gold-light); padding-bottom: 10px; margin-bottom: 20px; }
.u-style-054 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: rgba(212,175,55,0.05); padding: 15px; border-radius: 5px; margin-top: 10px; border: 1px solid var(--gold-light); }
.u-style-055 { margin-bottom: 0; }
.u-style-056 { color: var(--wood-dark); }
.u-style-057 { margin-bottom: 10px; padding: 10px; border: 1px dashed #ccc; border-radius: 6px; display: inline-block; }
.u-style-058 { color: #d32f2f; font-size: 12px; cursor: pointer; }
.u-style-059 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; background: var(--bg-light); padding: 15px; border-radius: 5px; margin-top: 15px; border: 1px solid #ccc; }
.u-style-060 { margin-top: 10px; padding: 10px; background: #e8f5e9; color: #2e7d32; border-radius: 5px; font-weight: 500; display: none; }
.u-style-061 { color: var(--wood-dark); border-bottom: 2px solid var(--gold-light); padding-bottom: 10px; margin-top: 40px; margin-bottom: 20px; }
.u-style-062 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.u-style-063 { display: flex; gap: 5px; }
.u-style-064 { background: var(--bg-light); padding: 20px; border-radius: 8px; border: 1px solid #ccc; }
.u-style-065 { color: var(--text-muted); text-align: center; margin: 0; }
.u-style-066 { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.u-style-067 { width: auto; }
.u-style-068 { flex: 1; min-width: 200px; }
.u-style-069 { text-align: right; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--gold-light); }
.u-style-070 { font-size: 18px; padding: 12px 30px; }
.u-style-071 { vertical-align: top; padding-top: 10px; }
.u-style-072 { margin-top: 5px; }
.u-style-073 { text-align: center; color: var(--text-muted); }
.u-style-074 { padding-top: 20px; padding-bottom: 40px; }
.u-style-075 { margin-bottom: 20px; display: flex; justify-content: space-between; }
.u-style-076 { background-color: var(--wood-color); padding: 10px 20px; font-size: 16px; }
.u-style-077 { background-color: #1a3626; padding: 40px 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.u-style-078 { display: flex; flex-wrap: wrap; gap: 40px; height: 100%; }
.u-style-079 { flex: 1; min-width: 300px; display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.u-style-080 { color: #fdfaf3; font-size: 22px; margin-bottom: 15px; border-bottom: 1px solid rgba(253, 250, 243, 0.3); padding-bottom: 10px; }
.u-style-081 { background-color: #fcf8f2; padding: 8px; border-radius: 8px; flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; border: 3px solid #d4af37; height: 100%; }
.u-style-082 { background-color: #fcf8f2; border: none; height: 100%; min-height: 400px; width: 100%; position: relative; border-radius: 4px; overflow: hidden; }
.u-style-083 { width: 100%; height: 100%; background-color: #fcf8f2; padding: 4px; box-sizing: border-box; overflow: hidden; }
.u-style-084 { background: rgba(26, 54, 38, 0.6); }
.u-style-085 { height: 100%; width: 100%; overflow: hidden; }
.u-style-086 { flex: 1.2; min-width: 300px; display: flex; flex-direction: column; }
.u-style-087 { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; border-bottom: 1px solid rgba(253, 250, 243, 0.3); padding-bottom: 10px; }
.u-style-088 { color: #fdfaf3; font-size: 22px; margin: 0; }
.u-style-089 { display: flex; gap: 10px; }
.u-style-090 { color: #fdfaf3; font-size: 13px; margin-right: 5px; }
.u-style-091 { padding: 4px 8px; font-size: 13px; border-radius: 4px; cursor: pointer; }
.u-style-092 { background-color: #fcf8f2; color: #111; padding: 15px 20px; border-radius: 8px; margin-bottom: 15px; border: 3px solid #d4af37; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; }
.u-style-093 { background-color: #fcf8f2; color: #111; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border: 3px solid #d4af37; }
.u-style-094 { margin-left: 3px; }
.u-style-095 { background-color: #fcf8f2; color: #111; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); flex: 1; display: flex; flex-direction: column; border: 3px solid #d4af37; overflow: hidden; height: 100%; }
.u-style-096 { margin-top: 5px; line-height: 1.5; color: #333; font-size: 14px; }


/* Remaining runtime-safe shared classes */
.table-link-tree { font-weight: bold; color: var(--wood-dark); font-size: 16px; text-decoration: underline; }
.collage-grid-full { height: 100%; }
.img-contain-full { object-fit: contain; width: 100%; height: 100%; }
.img-cover-full { width: 100%; height: 100%; object-fit: cover; }
.qr-small { border: 2px solid #1a3626; padding: 3px; background: #fff; border-radius: 6px; width: 100%; height: auto; display: block; }
.qr-big { border: 4px solid #d4af37; padding: 15px; background: #fff; border-radius: 12px; width: 300px; height: 300px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.dynamic-value { font-weight: 600; }
.maint-edit-img { height: 50px; width: 50px; object-fit: cover; border-radius: 4px; margin-right: 5px; border: 1px solid #ddd; cursor: pointer; }

/* =========================================
   14. หน้า manage_images.php + Gallery Image Editor
   (เพิ่มหลังได้รับไฟล์ manage_images.php ตัวจริง)
========================================= */
.is-hidden { display: none !important; }
.manage-images-page { padding-bottom: 50px; }
.manage-images-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
    flex-wrap: wrap;
}
.manage-images-title {
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.manage-upload-panel {
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: var(--shadow-md);
}
.manage-upload-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.manage-upload-phase { margin-bottom: 0; min-width: 200px; }
.manage-upload-files { margin-bottom: 0; flex: 1; min-width: 250px; }
.manage-upload-btn { height: 44px; }
.upload-progress { margin-top: 20px; }
.upload-progress-head { display: flex; justify-content: space-between; margin-bottom: 5px; gap: 10px; }
.upload-progress-text { color: var(--primary-color); }
.upload-file-count { color: var(--text-muted); }
.upload-progress-track { width: 100%; background: #e0e0e0; border-radius: 10px; height: 10px; overflow: hidden; }
.upload-progress-bar { width: 0%; height: 100%; background: var(--wood-color); transition: width 0.2s; }
.upload-warning { font-size: 12px; color: #d32f2f; margin-top: 5px; }
.gallery-help {
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    border-left: 6px solid var(--gold-primary);
    box-shadow: var(--shadow-sm);
}
.gallery-help strong {
    color: var(--wood-dark);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.manage-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.gallery-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: relative;
}
.gallery-card.is-primary { border: 3px solid var(--primary-color); }
.gallery-phase-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    z-index: 10;
}
.gallery-card-media {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #000;
}
.gallery-card-video { background: #000; }
.gallery-card-body {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.gallery-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 14px;
}
.gallery-toggle.primary-toggle { color: var(--primary-color); font-weight: bold; }
.gallery-toggle.print-toggle { color: var(--wood-color); }
.gallery-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 5px;
}
.gallery-card-actions .gallery-card-btn {
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 7px 8px;
}
.gallery-card-actions .material-symbols-outlined { font-size: 18px; }
.gallery-video-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 38px;
    padding: 6px;
    border: 1px dashed #ccc;
    border-radius: 5px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}
.gallery-video-note .material-symbols-outlined { font-size: 18px; }
.gallery-empty {
    color: var(--text-muted);
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px;
}
.gallery-empty.error { color: #d32f2f; }
.gallery-image-editor-modal { z-index: 12000; }
.gallery-editor-content {
    max-width: 820px;
    overflow: visible;
}
.gallery-editor-stage { height: min(58vh, 460px); max-height: 460px; }
#galleryEditorImageTarget {
    max-width: 100%;
    max-height: 460px;
    display: block;
}
.gallery-filter-grid {
    grid-template-columns: repeat(3, 1fr);
}
.gallery-filter-note {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px dashed rgba(212, 175, 55, 0.55);
    border-radius: 6px;
    padding: 8px 10px;
}
.gallery-filter-note .material-symbols-outlined { font-size: 18px; color: var(--gold-primary); }
.gallery-image-editor-modal .cropper-container,
.gallery-image-editor-modal .cropper-wrap-box,
.gallery-image-editor-modal .cropper-canvas,
.gallery-image-editor-modal .cropper-drag-box,
.gallery-image-editor-modal .cropper-crop-box { max-height: 460px !important; }
.gallery-image-editor-modal .image-editor-toolbar,
.gallery-image-editor-modal .image-editor-footer { position: relative; z-index: 12003; }
.gallery-image-editor-modal .btn { pointer-events: auto; }

@media (max-width: 768px) {
    .manage-upload-row { align-items: stretch; }
    .manage-upload-phase,
    .manage-upload-files,
    .manage-upload-btn { width: 100%; }
    .upload-progress-head { flex-direction: column; }
    .gallery-card-actions { grid-template-columns: 1fr; }
    .gallery-filter-grid { grid-template-columns: 1fr; }
}


/* =========================================
   15. หน้า settings.php (System Settings + Full Backup)
========================================= */
.settings-page {
    padding-bottom: 50px;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

.settings-title {
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px 0;
    font-size: 28px;
    line-height: 1.25;
}

.settings-title .material-symbols-outlined {
    color: var(--gold-primary);
    font-size: 34px;
}

.settings-subtitle {
    color: var(--text-muted);
    margin: 0;
    font-size: 15px;
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 30px;
    align-items: start;
}

.settings-side-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-card {
    padding: 26px;
    overflow: hidden;
}

.settings-card-title {
    color: var(--wood-color);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gold-light);
    font-size: 20px;
}

.settings-card-title.warning {
    color: #f57c00;
}

.settings-card-title .material-symbols-outlined {
    font-size: 24px;
}

.muted-help {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 6px;
}

.settings-preview-box {
    min-height: 86px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px dashed rgba(212, 175, 55, 0.75);
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-preview-small {
    min-height: 58px;
    justify-content: flex-start;
}

.settings-logo-preview {
    max-height: 72px;
    max-width: 100%;
    object-fit: contain;
    border: 1px solid var(--border-color);
    padding: 6px;
    border-radius: 6px;
    background: var(--white);
}

.settings-favicon-preview {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    padding: 4px;
    border-radius: 6px;
    background: var(--white);
}

.settings-empty-preview {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.settings-empty-preview.small {
    font-size: 13px;
}

.settings-checkline {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #d32f2f;
    font-size: 13px;
    cursor: pointer;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(212, 175, 55, 0.35);
}

.settings-preview-card {
    background: linear-gradient(180deg, var(--bg-card), #fff);
}

.settings-live-preview {
    background: #fcf8f2;
    border: 2px solid var(--gold-primary);
    border-radius: 10px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.settings-live-preview strong {
    font-size: 24px;
    line-height: 1.25;
}

.settings-live-preview span {
    color: var(--text-muted);
}

.settings-demo-button {
    margin-top: 10px;
    pointer-events: none;
    align-self: flex-start;
}

.settings-note {
    color: var(--text-muted);
    margin: 0 0 16px 0;
    line-height: 1.65;
}

.settings-backup-btn,
.settings-backup-secondary {
    width: 100%;
    justify-content: center;
    font-size: 16px;
    padding: 14px 18px;
    margin-top: 10px;
}

.settings-backup-btn {
    background: linear-gradient(135deg, #f9a825, #f57c00);
    color: #fff;
    border-color: #f57c00;
}

.settings-backup-btn:hover {
    background: linear-gradient(135deg, #f57c00, #ef6c00);
    color: #fff;
}

.settings-backup-secondary {
    background: var(--bg-card);
}

.settings-warning-box {
    margin-top: 18px;
    padding: 15px;
    background: #fff3e0;
    border-radius: 6px;
    border-left: 5px solid #f57c00;
    color: #5d4037;
    line-height: 1.65;
    font-size: 14px;
}

.settings-warning-box code {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(245, 124, 0, 0.25);
    border-radius: 4px;
    padding: 1px 5px;
    color: #bf360c;
}

@media (max-width: 1024px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .settings-title {
        font-size: 23px;
    }
    .settings-card {
        padding: 18px;
    }
    .settings-actions {
        justify-content: stretch;
    }
    .settings-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   16. Cropper Live Filter Preview Fix
   ให้การปรับแสง/สีในตัวแต่งภาพแสดงผลทันที
========================================= */
.image-editor-modal .cropper-canvas img,
.image-editor-modal .cropper-view-box img,
.gallery-image-editor-modal .cropper-canvas img,
.gallery-image-editor-modal .cropper-view-box img,
#cropperModal .cropper-canvas img,
#cropperModal .cropper-view-box img,
#profileCropperModal .cropper-canvas img,
#profileCropperModal .cropper-view-box img {
    will-change: filter;
    transition: filter 0.04s linear;
}

.image-editor-modal .cropper-view-box,
.gallery-image-editor-modal .cropper-view-box,
#cropperModal .cropper-view-box,
#profileCropperModal .cropper-view-box {
    transition: box-shadow 0.04s linear;
}