/* Custom CSS cho osTicket (Mobile + AI UI + Global Fixes) */

/* =========== GLOBAL FIXES (Cho mọi kích thước màn hình) =========== */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    box-sizing: border-box !important;
    max-width: 100% !important;
}


/* =========== MOBILE & TABLET RESPONSIVE (Dưới 1024px) =========== */
@media screen and (max-width: 1024px) {
    /* Cơ bản */
    body { overflow-x: hidden; margin: 0 !important; padding: 0 !important; }
    #container { width: 100% !important; max-width: 100% !important; padding: 0 15px !important; margin: 0 auto !important; box-sizing: border-box !important; }
    #content, #footer { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 15px 0 !important; margin: 0 auto !important; }

    /* Header & Logo & Top bar */
    #header { height: auto !important; padding-top: 15px; position: relative; }
    #header .pull-right.flush-right { float: none !important; text-align: center; margin-bottom: 10px; display: block; }
    #header a#logo { float: none !important; display: block !important; text-align: center; margin: 0 auto; height: auto !important; width: 100%; }
    #header a#logo div { display: block !important; text-align: center; }
    #header a#logo h2 { font-size: 20px !important; white-space: normal; }

    /* Navigation Menu */
    ul#nav { 
        position: static !important; display: flex !important; flex-wrap: wrap; justify-content: center; 
        height: auto !important; padding: 0 !important; margin: 15px 0 0 0 !important; background: transparent !important;
        box-shadow: none !important; border: none !important;
    }
    ul#nav li { display: block; margin: 5px; flex: 1 1 40%; text-align: center; }
    ul#nav li a { 
        display: block; padding: 10px; border-radius: 5px; 
        background-color: #f8f9fa !important; background-image: none !important; 
        border: 1px solid #ddd !important; text-decoration: none !important; color: #333 !important;
    }
    ul#nav li a.active { background-color: #e3f2fd !important; color: #0d6efd !important; border-color: #0d6efd !important; background-image: none !important; }
    ul#nav li a::before { display: none !important; /* Xóa các icon thừa của menu cũ */ }

    /* Front Page Layout (Index) */
    div.sidebar, div#landing_page > div { float: none !important; width: 100% !important; padding: 0 !important; margin: 0 0 20px 0 !important; }
    h1 { font-size: 26px !important; word-wrap: break-word; line-height: 1.3 !important; }
    
    /* Các cột content float left/right cần xoá */
    div[style*="float:left"], div[style*="float: right"], div[style*="float:right"] { float: none !important; width: 100% !important; }

    /* Fix Buttons (Mở ticket / Check ticket) */
    p.fw-active, a.green.button, a.blue.button {
        display: block !important; width: 100% !important; box-sizing: border-box; text-align: center; margin-bottom: 10px !important; padding: 15px !important; border-radius: 8px !important; font-size: 16px !important;
    }

    /* Biến các Data Table thành dạng Block/Card trên Mobile */
    table.list, table.ticket_info, table.custom-info, .ticket_info table {
        display: block; width: 100%; border: none !important;
    }
    table.list thead, table.ticket_info thead { display: none; }
    table.list tbody, table.list tr, table.ticket_info tbody, table.ticket_info tr { display: block; width: 100%; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    table.list td, table.ticket_info td, table.list th, table.ticket_info th { 
        display: block; width: 100%; text-align: left !important; 
        padding: 10px; border-bottom: 1px solid #eee; box-sizing: border-box;
    }
    table.list td:last-child { border-bottom: none; }
    
    /* Ẩn bớt các trường không cần thiết trên mobile để gọn */
    table.list td:nth-child(4), table.list td:nth-child(5) { display: none; }
    
    /* Tối ưu các Form và Input */
    form table, form table tbody, form table tr, form table td { 
        display: block !important; width: 100% !important; box-sizing: border-box !important; 
    }
    form table tbody tr { margin-bottom: 15px !important; }
    form table tbody tr td { padding: 5px 0 !important; text-align: left !important; }
    
    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select {
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; 
        height: 44px !important; font-size: 16px !important; padding: 10px !important;
        border: 1px solid #ccc !important; border-radius: 5px !important;
    }
    textarea {
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; 
        min-height: 150px !important; height: auto !important; font-size: 16px !important; padding: 10px !important;
        border: 1px solid #ccc !important; border-radius: 5px !important;
    }
    
    /* Buttons: Bỏ nền gradient, để màu trơn, nổi rõ text */
    input[type="submit"], input[type="button"], button, .button, a.button, input[type="reset"] {
        width: 100% !important; padding: 12px !important; margin-top: 10px !important; 
        font-size: 16px !important; font-weight: bold !important; border-radius: 6px !important; 
        box-sizing: border-box !important; display: block !important; text-align: center !important;
        border: none !important; background-image: none !important;
        box-shadow: none !important; text-shadow: none !important;
    }
    
    input[type="submit"], input[type="button"], button, .button, a.button {
        background: #0d6efd !important; color: #ffffff !important;
    }

    input[type="reset"] {
        background: #6c757d !important; color: #ffffff !important;
    }

    /* Thread/Hội thoại (Chat bubbles) */
    #ticket_thread .thread-entry {
        padding: 15px !important; margin-bottom: 15px !important; border-radius: 12px !important; width: 90% !important; clear: both; box-sizing: border-box;
    }
    #ticket_thread .thread-entry.response { margin-left: auto !important; background: #e3f2fd !important; }
    #ticket_thread .thread-entry.message { margin-right: auto !important; background: #f5f5f5 !important; }
}

/* =========== AI UI RECOGNITION =========== */
.ai-response {
    background-color: #e8f5e9 !important; /* Xanh lá nhạt cho AI */
    border-left: 4px solid #4caf50 !important;
    position: relative;
}
.ai-badge {
    display: inline-block; background: #4caf50; color: white; padding: 2px 8px; 
    border-radius: 12px; font-size: 11px; margin-right: 5px; font-weight: bold;
}
.ai-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: #4caf50; 
    display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 20px;
}