/* * CSS for LINK FastAds
 * (v1.3 - Fixed all syntax errors from v1.2)
 * (v1.2 - Added Filter Grid CSS)
 * (v1.1 - Dark Theme Header)
 */

body {
    background-color: #f4f7f6;
}

/* +++ (V V V V V V) FIX (v1.2) (V V V V V V) +++ */
/* CSS ที่ขาดหายไปสำหรับ Filter Bar */
.filter-grid-auto {
    display: grid;
    grid-template-columns: 1fr; /* Default: 1 column on mobile */
    gap: 15px;
    padding-top: 5px;
    align-items: flex-end; /* จัดให้ <select> และ <input> อยู่บรรทัดเดียวกัน */
}

/* (v1.2) เมื่อหน้าจอกว้าง (Desktop), แบ่งเป็น 2 คอลัมน์ */
@media (min-width: 768px) {
    .filter-grid-auto {
        /* (1fr = ช่องค้นหา, auto = ช่อง Format) */
        grid-template-columns: 1fr auto; 
    }
}

/* (v1.2) สไตล์สำหรับกลุ่มฟอร์ม (Label + Input) */
.form-group-auto {
    display: flex;
    flex-direction: column;
}

.form-group-auto label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

.form-group-auto input[type="text"],
.form-group-auto select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    box-sizing: border-box; /* (v1.2) สำคัญมาก */
}
/* +++ (A A A A A A) FIX (v1.2) (A A A A A A) +++ */


.links-grid {
    display: grid;
    /* * ปรับ minmax ที่นี่เพื่อเปลี่ยนขนาดการ์ด
     * (e.g., minmax(400px, 1fr) = การ์ดที่ใหญ่ขึ้น) 
     */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    padding-top: 20px;
}

.link-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.link-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* (v1.6) Dark Header */
.card-header {
    padding: 12px 16px;
    border-bottom: 1px solid #444;
    background-color: #343a40; /* Dark Background */
    color: #f8f9fa; /* Light text */
}

.card-header h3 {
    margin: 0 0 6px 0; /* เพิ่มระยะห่างด้านล่างนิดนึง */
    color: #ffffff; 
    font-size: 1rem; /* ลดขนาดตัวอักษรลงจาก 1.1rem เพื่อไม่ให้ล้น */
    font-weight: 600;
    line-height: 1.4; /* เพิ่มช่องไฟระหว่างบรรทัดให้อ่านง่ายขึ้น */
    word-break: break-word; /* เปลี่ยนจาก break-all เพื่อไม่ให้ตัดคำขาดครึ่ง */
}

.card-header h3 .divider {
    color: #6c757d; 
    font-weight: 300;
    margin: 0 6px; /* ปรับช่องว่างรอบๆ ขีด | ให้สมดุล */
    display: inline-block; /* ป้องกันไม่ให้ขีด | กระโดดไปอยู่ต้นบรรทัดใหม่เดี่ยวๆ */
}

.card-header p {
    margin: 0;
    font-size: 0.85rem; /* ปรับขนาดให้เป็น Subtitle ที่ดูเรียบร้อย */
    color: #ced4da; 
    line-height: 1.4;
    word-break: break-word; /* เปลี่ยนจาก break-all เช่นกัน */
}

/* (v1.1) ซ่อน .card-info ตัวเก่า (ถ้ามี) */
.card-info {
   display: none;
}
/* +++ (A A A A A A) FIX (v1.1) (A A A A A A) +++ */

.card-images {
    padding: 20px;
    display: grid;
    gap: 15px;
} /* <<< (v1.3) เพิ่ม } ที่ขาดไป */

.image-group {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

/* (v1.3) ลบ .image-group ที่ซ้ำซ้อนและผิดพลาดออกไป */

.image-group-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    padding: 10px 12px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

.link-image-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: #f0f0f0;
    overflow: hidden;
} /* <<< (v1.3) เพิ่ม } ที่ขาดไป */

/* (v1.3) เพิ่ม CSS ที่ขาดหายไปสำหรับรูปภาพ */
.link-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* or 'contain' */
    transition: transform 0.3s ease;
}

.link-image-container:hover .link-image {
    transform: scale(1.05);
}

.no-link-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    background-color: #f7f7f7;
    font-size: 0.9rem;
}

/* +++ (V2.0) FASTADS UPLOAD CONTROLS +++ */
.upload-controls {
    padding: 10px 12px;
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.file-input-hidden {
    display: none;
}
.replace-img-btn {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    width: 100%;
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.replace-img-btn:hover {
    background-color: #138496;
}
.img-meta-info {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
    margin: 0;
}

/* =================================================================
   TOOLBAR BUTTONS (Unified Styles)
   ================================================================= */
.fa-toolbar-btn {
    border: none !important;
    color: #fff !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .15s, box-shadow .15s;
    height: 42px !important;
    white-space: nowrap;
    text-decoration: none;
}
.fa-toolbar-btn:hover { transform: translateY(-1px); }
.fa-toolbar-btn:active { transform: translateY(0); }

/* 1. ปุ่ม Sync Data (สีม่วง) */
#sync-fastads-btn {
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    box-shadow: 0 8px 20px rgba(99,102,241,.32);
}
#sync-fastads-btn:hover { box-shadow: 0 10px 24px rgba(99,102,241,.42); }

/* 2. ปุ่ม Bulk Upload (สีเขียว) */
#bulk-upload-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.32);
}
#bulk-upload-btn:hover { box-shadow: 0 10px 24px rgba(16, 185, 129, 0.42); }

/* 3. ปุ่ม Schedule Manager (สีส้ม) */
#schedule-manager-btn {
    background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.32);
}
#schedule-manager-btn:hover { box-shadow: 0 10px 24px rgba(245, 158, 11, 0.42); }

/* 4. ปุ่ม Activity Logs (สีเทา) */
#view-fastads-logs-btn {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    box-shadow: 0 8px 20px rgba(100, 116, 139, 0.32);
}
#view-fastads-logs-btn:hover { box-shadow: 0 10px 24px rgba(100, 116, 139, 0.42); }