/* Global Modern UX/UI Enhancements */

/* 1. Global Typography & Structure */
body, p, form, input, h1, h2, h3, h4, h5, h6, ul, li, ol, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, a, button, textarea {
    font-family: 'Inter', sans-serif !important;
}

body {
    background-color: #f8f9fc !important;
    color: #2c3e50;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
    color: #1a252f !important;
    letter-spacing: -0.02em;
}

/* 2. Header & Navigation Refinement */
.navbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 15px 0 !important;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar .nav-link {
    color: #4a5568 !important;
    font-weight: 500 !important;
    padding: 0 16px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 2px solid #e2e8f0 !important;
    line-height: normal !important;
    transition: all 0.3s ease !important;
}

.navbar .nav-link:hover, .navbar .nav-item.active .nav-link {
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05) !important;
}

.login-btn, .login-btn-main .dropdown-menu {
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
}
.login-btn.not-login {
    padding: 0 16px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
    border: 2px solid transparent !important;
}
.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}

/* 3. Cards, Tickets, and Containers */
.card, .ticketItem, .categoryItem, .singleArticleMain, .login-section-main, .ticketsFaqsSection .container > h1, .ticketsFaqsSection .container > h2, .panel, .well {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f0f2f5 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    transition: all 0.3s ease !important;
}

.ticketItem, .categoryItem {
    padding: 20px !important;
}

.ticketItem:hover, .categoryItem:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
    border-color: #e2e8f0 !important;
}

/* 4. Forms, Inputs, and Buttons (Globally applied) */
.form-control, input[type="text"], input[type="email"], input[type="password"], textarea {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    padding: 12px 18px !important;
    transition: all 0.3s ease !important;
    color: #334155 !important;
}

.form-control:focus, input:focus, textarea:focus {
    background: #ffffff !important;
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15) !important;
    outline: none !important;
}

.categorySectionInput {
    border: 2px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    color: #1e293b !important;
    padding: 16px 20px !important;
    transition: all 0.3s ease !important;
}
.categorySectionInput:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
}

.btn, .btn-primary, button[type="submit"] {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    padding: 12px 24px !important;
}

.btn-primary, button[type="submit"]:not(.btn-light):not(.btn-danger):not(.btn-envato) {
    background: linear-gradient(135deg, #0d6efd, #0051cd) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.25) !important;
}

.btn-primary:hover, button[type="submit"]:not(.btn-light):not(.btn-danger):not(.btn-envato):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.35) !important;
}

/* Badges */
.badge {
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
}

/* Fix specific areas */
.ticketsFaqsSection .container > h1 {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
.ticketsFaqsSection .container > h2 {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

.ticketsFaqsSection.hm-bg h1,
.ticketsFaqsSection.hm-bg h2 {
    color: #fff !important;
}

/* Ticket List Table Improvements */
.allTicketsMain tbody tr {
    transition: all 0.2s ease !important;
}
.allTicketsMain tbody tr:hover {
    background-color: #f8fafc !important;
}
.allTicketsMain td {
    padding: 16px 15px !important;
    border-bottom: 1px solid #edf2f7 !important;
    vertical-align: middle !important;
}

/* Column 1: Metadata & Title */
.allTicketsMain td:nth-child(1) {
    vertical-align: middle !important;
}
.allTicketsMain .ticketTitle {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a252f !important;
    float: none !important;
    display: block !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-bottom: 6px !important;
}
.allTicketsMain .ticket-item-date-comment {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 16px 0 0 !important;
    color: #718096 !important;
    font-size: 13px !important;
}
.allTicketsMain .ticket-item-date-comment .icon {
    margin-right: 4px !important;
    color: #a0aec0 !important;
}

/* Column 2: Category / Product */
.allTicketsMain .article-script-name {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.allTicketsMain .ticketItemThumb {
    float: none !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}
.allTicketsMain .ticketItemName {
    float: none !important;
    color: #4a5568 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* Column 3: Badges */
.allTicketsMain .responseBtn-main {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}
.allTicketsMain .responseBtn-main .responseBtn {
    float: none !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border: none !important;
    background: transparent !important;
}
.allTicketsMain .responseBtn-main .responseBtn.nr {
    background-color: #fff3cd !important;
    color: #856404 !important;
}
.allTicketsMain .responseBtn-main .responseBtn.success {
    background-color: #d4edda !important;
    color: #155724 !important;
}
.allTicketsMain .responseBtn-main .responseBtn.primary {
    background-color: #e2e8f0 !important;
    color: #4a5568 !important;
}

/* Single Ticket View Header Improvements */
.ticketSingleMain .singleLeft .singleTitleMain {
    background-color: #1e293b !important; /* Modern dark slate background */
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    padding: 16px 24px !important;
}
.ticketSingleMain .singleLeft .singleTitleMain h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}
.ticketSingleMain .singleLeft .singleTitleMain .singleTitleBottom .ticketNumber {
    color: #cbd5e1 !important;
}
.ticketSingleMain .singleLeft .singleTitleMain .singleTitleBottom .ticketNumber i {
    color: #94a3b8 !important;
}

/* Single Ticket View Badges */
.ticketSingleMain .singleLeft .singleTitleMain .singleTicketBtnMain .responseBtn {
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
.ticketSingleMain .singleLeft .singleTitleMain .singleTicketBtnMain .responseBtn.solid.nr {
    background-color: #fff3cd !important;
    color: #856404 !important;
}
.ticketSingleMain .singleLeft .singleTitleMain .singleTicketBtnMain .responseBtn.solid.closed {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}
.ticketSingleMain .singleLeft .singleTitleMain .singleTicketBtnMain .responseBtn.solid.success {
    background-color: #d4edda !important;
    color: #155724 !important;
}
.ticketSingleMain .singleLeft .singleTitleMain .singleTicketBtnMain .responseBtn.solid.primary {
    background-color: #e2e8f0 !important;
    color: #4a5568 !important;
}