/* ============================================
   OSTICKET CLIENT PORTAL - DARK THEME
   Comprehensive dark theme matching header.inc.php inline styles
   ============================================ */

/* ============================================
   1. GLOBAL AUTOFILL FIX (ALL PAGES)
   ============================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #374151 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #374151 !important;
    transition: background-color 5000s ease-in-out 0s !important;
    border: 1px solid #4b5563 !important;
}

/* ============================================
   2. BASE BODY & CONTAINER (NON-LOGIN PAGES)
   ============================================ */
body:not(.login-page) {
    background: #111827 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:not(.login-page) #container {
    background: #111827 !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Hide header elements on non-login pages */
body:not(.login-page) #header,
body:not(.login-page) #nav,
body:not(.login-page) .pull-right.flush-right,
body:not(.login-page) #logo {
    display: none !important;
}

/* ============================================
   3. CONTENT AREA (NON-LOGIN PAGES)
   ============================================ */
body:not(.login-page) #content {
    background: #111827 !important;
    padding: 24px !important;
    color: #ffffff !important;
}

body:not(.login-page) #content a {
    color: #60a5fa !important;
}

body:not(.login-page) #content h1,
body:not(.login-page) #content h2,
body:not(.login-page) #content h3 {
    color: #ffffff !important;
}

body:not(.login-page) #content p,
body:not(.login-page) #content td,
body:not(.login-page) #content th,
body:not(.login-page) #content label {
    color: #d1d5db !important;
}

/* ============================================
   4. TABLES (NON-LOGIN PAGES)
   ============================================ */
body:not(.login-page) #content table {
    background: transparent !important;
    border: none !important;
}

body:not(.login-page) #content th {
    background: transparent !important;
    color: #9ca3af !important;
    padding: 8px 12px !important;
    text-align: left !important;
}

body:not(.login-page) #content td {
    background: transparent !important;
    border: none !important;
    padding: 8px 12px !important;
    color: #d1d5db !important;
}

/* ============================================
   5. FORMS & INPUTS (NON-LOGIN PAGES)
   ============================================ */

/* Hide form headers */
body:not(.login-page) #ticketForm .form-header,
body:not(.login-page) #ticketForm thead td.headline:first-child {
    display: none !important;
}

/* Input fields */
body:not(.login-page) #ticketForm input[type="text"],
body:not(.login-page) #ticketForm input[type="email"],
body:not(.login-page) #ticketForm input[type="tel"],
body:not(.login-page) #ticketForm input[type="number"],
body:not(.login-page) #ticketForm input[type="password"],
body:not(.login-page) #ticketForm textarea,
body:not(.login-page) #ticketForm select,
body:not(.login-page) #content input[type="text"],
body:not(.login-page) #content input[type="email"],
body:not(.login-page) #content input[type="tel"],
body:not(.login-page) #content textarea,
body:not(.login-page) #content select,
body:not(.login-page) .form-simple input,
body:not(.login-page) .form-simple select,
body:not(.login-page) .form-simple textarea,
body:not(.login-page) input.form-control,
body:not(.login-page) select.form-control {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
}

/* Small inputs (size attribute) */
body:not(.login-page) #ticketForm input[size="4"],
body:not(.login-page) #ticketForm input[size="5"],
body:not(.login-page) #ticketForm input[size="6"] {
    width: 100px !important;
    min-width: 80px !important;
}

/* Focus states */
body:not(.login-page) #ticketForm input:focus,
body:not(.login-page) #ticketForm textarea:focus,
body:not(.login-page) #ticketForm select:focus,
body:not(.login-page) #content input:focus,
body:not(.login-page) #content textarea:focus,
body:not(.login-page) #content select:focus {
    border-color: #f97316 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3) !important;
}

/* Labels */
body:not(.login-page) #ticketForm label,
body:not(.login-page) #ticketForm th,
body:not(.login-page) #content label {
    color: #d1d5db !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* Required fields & errors */
body:not(.login-page) .required,
body:not(.login-page) font.error,
body:not(.login-page) .error {
    color: #f87171 !important;
}

/* Form tables */
body:not(.login-page) #ticketForm table {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
}

body:not(.login-page) #ticketForm table td,
body:not(.login-page) #ticketForm table th {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
    vertical-align: top !important;
}

/* Horizontal rules */
body:not(.login-page) #ticketForm hr {
    border: none !important;
    border-top: 1px solid #374151 !important;
    margin: 20px 0 !important;
}

/* Textareas */
body:not(.login-page) #ticketForm textarea,
body:not(.login-page) #content textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Select dropdowns with custom arrow */
body:not(.login-page) #ticketForm select,
body:not(.login-page) #content select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    padding-right: 44px !important;
    cursor: pointer !important;
}

/* ============================================
   6. CAPTCHA
   ============================================ */
body:not(.login-page) .captchaRow img,
body:not(.login-page) .captcha img {
    border-radius: 4px !important;
}

/* ============================================
   7. RICH TEXT EDITOR (REDACTOR)
   ============================================ */
body:not(.login-page) .redactor-box {
    border: 1px solid #4b5563 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

body:not(.login-page) .redactor-toolbar {
    background: #1f2937 !important;
    border-bottom: 1px solid #4b5563 !important;
}

body:not(.login-page) .redactor-toolbar a {
    color: #d1d5db !important;
}

body:not(.login-page) .redactor-editor {
    background: #374151 !important;
    color: #ffffff !important;
    min-height: 150px !important;
}

/* ============================================
   8. FILE UPLOAD
   ============================================ */
body:not(.login-page) .filedrop,
body:not(.login-page) .file-input {
    background: #374151 !important;
    border: 2px dashed #4b5563 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    text-align: center !important;
    color: #9ca3af !important;
}

body:not(.login-page) .filedrop:hover {
    border-color: #f97316 !important;
}

/* ============================================
   9. DYNAMIC FORM HEADERS
   ============================================ */
body:not(.login-page) #dynamic-form .form-header {
    display: block !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 20px 0 10px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #374151 !important;
}

/* ============================================
   10. THREAD STYLING
   ============================================ */
body:not(.login-page) .thread-entry,
body:not(.login-page) #ticketThread .thread-entry {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    padding: 16px !important;
}

body:not(.login-page) .thread-entry .header {
    border-bottom: 1px solid #374151 !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

body:not(.login-page) .thread-entry .header .pull-left,
body:not(.login-page) .thread-entry .header a {
    color: #f97316 !important;
    font-weight: 600 !important;
}

body:not(.login-page) .thread-entry .header .pull-right {
    color: #9ca3af !important;
    font-size: 13px !important;
}

body:not(.login-page) .thread-entry .thread-body,
body:not(.login-page) .thread-entry .message {
    color: #d1d5db !important;
    line-height: 1.6 !important;
}

/* ============================================
   11. INFO TABLES
   ============================================ */
body:not(.login-page) .infoTable {
    background: #1f2937 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

body:not(.login-page) .infoTable th {
    background: transparent !important;
    color: #9ca3af !important;
}

body:not(.login-page) .infoTable td {
    background: transparent !important;
    color: #ffffff !important;
}

body:not(.login-page) .infoTable .headline {
    background: #374151 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ============================================
   12. ERROR/NOTICE/WARNING MESSAGES
   ============================================ */
body:not(.login-page) #msg_error,
body:not(.login-page) .error_bar {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid #ef4444 !important;
    color: #fca5a5 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}

body:not(.login-page) #msg_notice,
body:not(.login-page) .notice_bar {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid #22c55e !important;
    color: #86efac !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}

body:not(.login-page) #msg_warning,
body:not(.login-page) .warning_bar {
    background: rgba(234, 179, 8, 0.1) !important;
    border: 1px solid #eab308 !important;
    color: #fde047 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}

/* ============================================
   13. BUTTONS
   ============================================ */

/* Primary buttons (Submit, etc.) */
body:not(.login-page) #content input[type="submit"],
body:not(.login-page) #content input[type="button"],
body:not(.login-page) #content button:not(.bg-gradient-to-r):not(.bg-gray-700),
body:not(.login-page) #content .button,
body:not(.login-page) .buttons input[type="submit"] {
    background: linear-gradient(to right, #ea580c, #f97316) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

body:not(.login-page) #content input[type="submit"]:hover,
body:not(.login-page) #content input[type="button"]:hover,
body:not(.login-page) #content button:hover {
    background: linear-gradient(to right, #c2410c, #ea580c) !important;
}

/* Reset buttons */
body:not(.login-page) #content input[type="reset"],
body:not(.login-page) #content input[name="reset"] {
    background: #374151 !important;
    color: #d1d5db !important;
    border: 1px solid #4b5563 !important;
}

body:not(.login-page) #content input[type="reset"]:hover {
    background: #4b5563 !important;
}

/* ============================================
   14. PAGINATION
   ============================================ */
body:not(.login-page) .pagenate,
body:not(.login-page) .pagination {
    color: #9ca3af !important;
}

body:not(.login-page) .pagenate a,
body:not(.login-page) .pagination a {
    color: #60a5fa !important;
    padding: 4px 8px !important;
}

body:not(.login-page) .pagenate a:hover,
body:not(.login-page) .pagination a:hover {
    color: #f97316 !important;
}

/* ============================================
   15. LINKS - NO UNDERLINE
   ============================================ */
body:not(.login-page) a.no-underline,
body:not(.login-page) .no-underline {
    text-decoration: none !important;
}

/* ============================================
   16. REGISTRATION CONTAINER
   ============================================ */
body:not(.login-page) .registration-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    background: #1f2937 !important;
    padding: 32px !important;
    border-radius: 12px !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

body:not(.login-page) .registration-container h1 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-size: 24px !important;
}

body:not(.login-page) .registration-container p {
    margin-bottom: 24px !important;
    color: #9ca3af !important;
}

body:not(.login-page) .registration-container table {
    width: 100% !important;
}

body:not(.login-page) .registration-container h3 {
    color: #f97316 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-top: 24px !important;
    margin-bottom: 16px !important;
}

body:not(.login-page) .registration-container hr {
    display: none !important;
}

/* Force dark background for registration inputs */
body:not(.login-page) .registration-container input,
body:not(.login-page) .registration-container select,
body:not(.login-page) .registration-container textarea {
    background-color: #374151 !important;
    color: #ffffff !important;
    border: 1px solid #4b5563 !important;
}

/* ============================================
   17. SELECT2 DROPDOWN (DARK THEME)
   ============================================ */
body:not(.login-page) .select2-container--default .select2-selection--single {
    background-color: #374151 !important;
    border: 1px solid #4b5563 !important;
    border-radius: 8px !important;
}

body:not(.login-page) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: 28px !important;
}

body:not(.login-page) .select2-dropdown {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    color: #ffffff !important;
}

body:not(.login-page) .select2-search__field {
    background-color: #374151 !important;
    color: #ffffff !important;
    border: 1px solid #4b5563 !important;
}

body:not(.login-page) .select2-results__option {
    color: #d1d5db !important;
}

body:not(.login-page) .select2-results__option--highlighted[aria-selected] {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

/* ============================================
   18. UI DATEPICKER (DARK THEME)
   ============================================ */
body:not(.login-page) .ui-datepicker,
body:not(.login-page) .ui-widget-content {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    color: #ffffff !important;
}

/* ============================================
   19. LANDING PAGE STYLES
   ============================================ */

/* Landing page container */
#landing_page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Quick Actions Buttons */
#landing_page .quick-actions-btn-primary,
#landing_page .quick-actions-btn-primary:link,
#landing_page .quick-actions-btn-primary:visited,
#landing_page .quick-actions-btn-primary:hover,
#landing_page .quick-actions-btn-primary:active,
#landing_page .quick-actions-btn-primary:focus {
    background-color: #f97316 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid #ea580c !important;
}

#landing_page .quick-actions-btn-primary:hover {
    background-color: #ea580c !important;
}

#landing_page .quick-actions-btn-secondary,
#landing_page .quick-actions-btn-secondary:link,
#landing_page .quick-actions-btn-secondary:visited,
#landing_page .quick-actions-btn-secondary:hover,
#landing_page .quick-actions-btn-secondary:active,
#landing_page .quick-actions-btn-secondary:focus {
    background-color: #374151 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid #4b5563 !important;
}

#landing_page .quick-actions-btn-secondary:hover {
    background-color: #4b5563 !important;
}

/* Force SVG icons to be white */
#landing_page .quick-actions-btn-primary svg,
#landing_page .quick-actions-btn-secondary svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ============================================
   20. LOGIN PAGE HOVER STATES
   ============================================ */
body.login-page input:hover,
body.login-page input[type="text"]:hover,
body.login-page input[type="password"]:hover,
body.login-page .nowarn:hover {
    background: #374151 !important;
    background-color: #374151 !important;
    -webkit-box-shadow: 0 0 0 1000px #374151 inset !important;
}

/* ============================================
   21. TICKET VIEW PAGE - PRINT & EDIT BUTTONS
   ============================================ */

/* Print Button - Gray Secondary Style */
body:not(.login-page) a[href*="print"],
body:not(.login-page) .bg-gray-700 {
    background: #374151 !important;
    color: #d1d5db !important;
    border: 1px solid #4b5563 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

body:not(.login-page) a[href*="print"]:hover,
body:not(.login-page) .bg-gray-700:hover {
    background: #4b5563 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Edit Button - Orange Gradient Primary Style */
body:not(.login-page) a[href*="edit"],
body:not(.login-page) .bg-gradient-to-r.from-orange-600 {
    background: linear-gradient(to right, #ea580c, #f97316) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3) !important;
}

body:not(.login-page) a[href*="edit"]:hover,
body:not(.login-page) .bg-gradient-to-r.from-orange-600:hover {
    background: linear-gradient(to right, #c2410c, #ea580c) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 12px rgba(249, 115, 22, 0.4) !important;
}

/* Button Icons */
body:not(.login-page) a[href*="print"] svg,
body:not(.login-page) a[href*="edit"] svg {
    width: 18px !important;
    height: 18px !important;
}

/* ============================================
   22. USER AVATAR STYLING
   ============================================ */

/* Avatar container with gradient */
body:not(.login-page) .thread-entry > .avatar,
body:not(.login-page) .thread-event .avatar {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
    border: 2px solid #6b7280 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    padding: 8px !important;
}

/* Avatar image inside */
body:not(.login-page) .avatar img,
body:not(.login-page) img.avatar {
    border-radius: 6px !important;
}

/* SVG icon for default avatar */
body:not(.login-page) .avatar svg {
    color: #d1d5db !important;
    fill: currentColor !important;
}

/* ============================================
   23. PLACEHOLDER TEXT COLOR
   ============================================ */
body:not(.login-page) input::placeholder,
body:not(.login-page) textarea::placeholder {
    color: #6b7280 !important;
    opacity: 0.8 !important;
}


/* ============================================
   COMPREHENSIVE FIX - Remove ALL White Backgrounds
   Add this to the END of your CSS file
   ============================================ */

/* ============================================
   TARGET ALL REPLY SECTION ELEMENTS
   ============================================ */

/* Reply form container and ALL children */
body:not(.login-page) #reply,
body:not(.login-page) form#reply,
body:not(.login-page) #reply *,
body:not(.login-page) form#reply * {
    background: transparent !important;
    background-color: transparent !important;
}

/* Reply form wrapper divs */
body:not(.login-page) #reply div,
body:not(.login-page) form#reply div,
body:not(.login-page) #reply .p-6,
body:not(.login-page) form#reply .p-6 {
    background: transparent !important;
    background-color: transparent !important;
}

/* All paragraphs in reply section */
body:not(.login-page) #reply p,
body:not(.login-page) form#reply p {
    background: transparent !important;
    background-color: transparent !important;
    color: #9ca3af !important;
}

/* All tables and cells in reply */
body:not(.login-page) #reply table,
body:not(.login-page) #reply table td,
body:not(.login-page) #reply table th,
body:not(.login-page) form#reply table,
body:not(.login-page) form#reply table td,
body:not(.login-page) form#reply table th {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================
   HIDE DUPLICATE TEXTAREA (WHITE ONE)
   ============================================ */

/* Hide original textarea completely */
body:not(.login-page) #reply textarea#message,
body:not(.login-page) form#reply textarea#message,
body:not(.login-page) #reply textarea.richtext,
body:not(.login-page) form#reply textarea.richtext,
body:not(.login-page) #reply textarea[name*="message"],
body:not(.login-page) form#reply textarea[name*="message"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ============================================
   STYLE REDACTOR (DARK EDITOR) ONLY
   ============================================ */

/* Redactor box - force dark */
body:not(.login-page) #reply .redactor-box,
body:not(.login-page) form#reply .redactor-box {
    display: block !important;
    background: #374151 !important;
    background-color: #374151 !important;
    border: 1px solid #4b5563 !important;
    border-radius: 8px !important;
}

/* Redactor toolbar - force dark */
body:not(.login-page) #reply .redactor-toolbar,
body:not(.login-page) form#reply .redactor-toolbar {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    border-bottom: 1px solid #4b5563 !important;
}

/* Redactor editor - force dark */
body:not(.login-page) #reply .redactor-editor,
body:not(.login-page) form#reply .redactor-editor {
    background: #374151 !important;
    background-color: #374151 !important;
    color: #ffffff !important;
    min-height: 150px !important;
}

/* Redactor layer/wrapper */
body:not(.login-page) #reply .redactor-layer,
body:not(.login-page) form#reply .redactor-layer {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================
   FILE UPLOAD AREA - DARK
   ============================================ */

body:not(.login-page) #reply .filedrop,
body:not(.login-page) form#reply .filedrop {
    background: #374151 !important;
    background-color: #374151 !important;
    border: 2px dashed #4b5563 !important;
    color: #9ca3af !important;
}

/* ============================================
   BUTTONS AREA - DARK
   ============================================ */

/* Button container at bottom */
body:not(.login-page) #reply .px-6.py-4,
body:not(.login-page) form#reply .px-6.py-4,
body:not(.login-page) #reply .bg-gray-900,
body:not(.login-page) form#reply .bg-gray-900 {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

/* ============================================
   FORCE DARK ON ANY LIGHT ELEMENTS
   ============================================ */

/* Target any remaining white/light backgrounds */
body:not(.login-page) #reply [style*="background: white"],
body:not(.login-page) #reply [style*="background: #fff"],
body:not(.login-page) #reply [style*="background-color: white"],
body:not(.login-page) #reply [style*="background-color: #fff"],
body:not(.login-page) #reply [style*="background-color: #ffffff"],
body:not(.login-page) form#reply [style*="background: white"],
body:not(.login-page) form#reply [style*="background: #fff"],
body:not(.login-page) form#reply [style*="background-color: white"],
body:not(.login-page) form#reply [style*="background-color: #fff"],
body:not(.login-page) form#reply [style*="background-color: #ffffff"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================
   PLACEHOLDER TEXT
   ============================================ */

body:not(.login-page) #reply textarea::placeholder,
body:not(.login-page) form#reply textarea::placeholder,
body:not(.login-page) .redactor-editor::placeholder {
    color: #6b7280 !important;
}

/* ============================================
   END OF COMPREHENSIVE FIX
   ============================================ */
/* ============================================
   FINAL FIX - Thread Body White Background
   Add this to the END of your CSS file
   ============================================ */

/* ============================================
   FIX: CONVERSATION/THREAD MESSAGE BODY
   ============================================ */

/* Target thread body with ALL possible selectors */
body:not(.login-page) .thread-body,
body:not(.login-page) .thread-entry .thread-body,
body:not(.login-page) #ticketThread .thread-body,
body:not(.login-page) .thread-entry .message,
body:not(.login-page) .message-body,
body:not(.login-page) .thread-body div,
body:not(.login-page) .thread-body p,
body:not(.login-page) .thread-body span {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Thread body wrapper */
body:not(.login-page) .thread-entry > div,
body:not(.login-page) .thread-entry div[class*="body"] {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

/* Any div inside thread entry */
body:not(.login-page) .thread-entry div {
    background: transparent !important;
}

/* But keep thread-body dark */
body:not(.login-page) .thread-entry .thread-body {
    background: #0f172a !important;
    border-radius: 0 0 8px 8px !important;
}

/* Message content wrapper */
body:not(.login-page) .thread-body > div,
body:not(.login-page) .thread-body .message,
body:not(.login-page) .thread-body .body {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

/* ALL children of thread-body */
body:not(.login-page) .thread-body *,
body:not(.login-page) .thread-entry .message * {
    background: transparent !important;
    color: #e2e8f0 !important;
}

/* Headings in thread body */
body:not(.login-page) .thread-body h1,
body:not(.login-page) .thread-body h2,
body:not(.login-page) .thread-body h3,
body:not(.login-page) .thread-body h4,
body:not(.login-page) .thread-body strong,
body:not(.login-page) .thread-body b {
    color: #f97316 !important;
    background: transparent !important;
}

/* Paragraphs in thread body */
body:not(.login-page) .thread-body p {
    color: #e2e8f0 !important;
    background: transparent !important;
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
}

/* Override any inline white styles */
body:not(.login-page) .thread-body [style*="background: white"],
body:not(.login-page) .thread-body [style*="background: #fff"],
body:not(.login-page) .thread-body [style*="background-color: white"],
body:not(.login-page) .thread-body [style*="background-color: #fff"],
body:not(.login-page) .thread-body [style*="background-color: #ffffff"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================
   END OF THREAD BODY FIX
   ============================================ */

   /* ============================================
   BUTTON STYLING FIX - Cancel, Reset, Post Reply
   Add this to the END of your CSS file
   ============================================ */

/* ============================================
   REPLY FORM BUTTONS - PROPER STYLING
   ============================================ */

/* Button container at bottom */
body:not(.login-page) #reply .flex.justify-end,
body:not(.login-page) form#reply .flex.justify-end,
body:not(.login-page) #reply .button-bar,
body:not(.login-page) #reply .px-6.py-4 {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 16px 24px !important;
    background: #0f172a !important;
}

/* ALL buttons base styling */
body:not(.login-page) #reply button,
body:not(.login-page) #reply input[type="button"],
body:not(.login-page) #reply input[type="submit"],
body:not(.login-page) form#reply button,
body:not(.login-page) form#reply input[type="button"],
body:not(.login-page) form#reply input[type="submit"] {
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
}

/* CANCEL BUTTON - Gray Secondary */
body:not(.login-page) #reply button[type="button"]:not([class*="bg-gradient"]),
body:not(.login-page) #reply input[type="button"][value*="Cancel"],
body:not(.login-page) #reply button:contains("Cancel"),
body:not(.login-page) form#reply button[type="button"]:not([class*="bg-gradient"]) {
    background: #374151 !important;
    color: #d1d5db !important;
    border: 1px solid #4b5563 !important;
}

body:not(.login-page) #reply button[type="button"]:hover,
body:not(.login-page) #reply input[type="button"]:hover {
    background: #4b5563 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* RESET BUTTON - Gray Secondary */
body:not(.login-page) #reply button[type="reset"],
body:not(.login-page) #reply input[type="reset"],
body:not(.login-page) #reply input[value*="Reset"],
body:not(.login-page) form#reply button[type="reset"],
body:not(.login-page) form#reply input[type="reset"] {
    background: #374151 !important;
    color: #d1d5db !important;
    border: 1px solid #4b5563 !important;
}

body:not(.login-page) #reply button[type="reset"]:hover,
body:not(.login-page) #reply input[type="reset"]:hover {
    background: #4b5563 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* POST REPLY BUTTON - Orange Gradient Primary */
body:not(.login-page) #reply button[type="submit"],
body:not(.login-page) #reply input[type="submit"],
body:not(.login-page) #reply button.bg-gradient-to-r,
body:not(.login-page) #reply button[class*="gradient"],
body:not(.login-page) form#reply button[type="submit"],
body:not(.login-page) form#reply input[type="submit"] {
    background: linear-gradient(to right, #ea580c, #f97316) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3) !important;
}

body:not(.login-page) #reply button[type="submit"]:hover,
body:not(.login-page) #reply input[type="submit"]:hover,
body:not(.login-page) #reply button.bg-gradient-to-r:hover {
    background: linear-gradient(to right, #c2410c, #ea580c) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 12px rgba(249, 115, 22, 0.4) !important;
}

/* Button icons */
body:not(.login-page) #reply button svg,
body:not(.login-page) form#reply button svg {
    width: 18px !important;
    height: 18px !important;
}

/* Disabled state */
body:not(.login-page) #reply button:disabled,
body:not(.login-page) #reply input:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ============================================
   SPECIFIC BUTTON TARGETING BY TEXT/CLASS
   ============================================ */

/* Cancel button specific */
body:not(.login-page) button:contains("Cancel"),
body:not(.login-page) [value="Cancel"],
body:not(.login-page) .cancel-btn {
    background: #374151 !important;
    color: #d1d5db !important;
    border: 1px solid #4b5563 !important;
}

/* Reset button specific */
body:not(.login-page) button:contains("Reset"),
body:not(.login-page) [value="Reset"],
body:not(.login-page) .reset-btn {
    background: #374151 !important;
    color: #d1d5db !important;
    border: 1px solid #4b5563 !important;
}

/* Post Reply button specific */
body:not(.login-page) button:contains("Post Reply"),
body:not(.login-page) [value="Post Reply"],
body:not(.login-page) .submit-btn,
body:not(.login-page) .post-reply-btn {
    background: linear-gradient(to right, #ea580c, #f97316) !important;
    color: #ffffff !important;
    border: none !important;
}

/* ============================================
   END OF BUTTON STYLING
   ============================================ */

   /* That's it! Nothing else! */

/* ============================================
   END OF MINIMAL FIX
   ============================================ */

   /* Remove white border from conversation message */
/* Remove ALL white borders from conversation */
body:not(.login-page) .thread-entry,
body:not(.login-page) .thread-entry *,
body:not(.login-page) .thread-body,
body:not(.login-page) .thread-entry .header {
    border-color: #374151 !important;
    outline: none !important;
}

/* Override any white/light borders */
body:not(.login-page) .thread-entry {
    border: 1px solid #374151 !important;
    box-shadow: none !important;
}

/* Remove white outline effect */
body:not(.login-page) .thread-entry::before,
body:not(.login-page) .thread-entry::after {
    display: none !important;
}
   /* ============================================
   PRINT & EDIT BUTTONS - WHITE TEXT ONLY
   ============================================ */

/* Print Button - PURE WHITE TEXT */
body:not(.login-page) a[href*="print"] {
    background: #374151 !important;
    color: #ffffff !important;
    border: 1px solid #4b5563 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Force white on ALL children */
body:not(.login-page) a[href*="print"] *:not(svg) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Print Icon ONLY - Blue */
body:not(.login-page) a[href*="print"] svg {
    color: #60a5fa !important;
    fill: #60a5fa !important;
}

body:not(.login-page) a[href*="print"]:hover {
    background: #4b5563 !important;
    transform: translateY(-1px) !important;
}

/* Edit Button - PURE WHITE TEXT */
body:not(.login-page) a[href*="edit"] {
    background: linear-gradient(to right, #ea580c, #f97316) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Force white on ALL children */
body:not(.login-page) a[href*="edit"] *:not(svg) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Edit Icon - White */
body:not(.login-page) a[href*="edit"] svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

body:not(.login-page) a[href*="edit"]:hover {
    background: linear-gradient(to right, #c2410c, #ea580c) !important;
    transform: translateY(-1px) !important;
}



/* Remove blue line on hover */
body:not(.login-page) #header:hover,
body:not(.login-page) .header:hover,
body:not(.login-page) nav:hover,
body:not(.login-page) a:hover,
body:not(.login-page) .navbar:hover {
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Remove underline on all links hover */
body:not(.login-page) a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Remove any hover effects that create lines */
body:not(.login-page) *:hover::after,
body:not(.login-page) *:hover::before {
    border-bottom: none !important;
    border-top: none !important;
}


/* New Ticket Button - FORCE WHITE TEXT */
.btn-primary-orange,
.btn-primary-orange:link,
.btn-primary-orange:visited,
.btn-primary-orange:hover,
.btn-primary-orange:active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 24px !important;
    background: linear-gradient(to right, #ea580c, #f97316) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 8px rgba(249, 115, 22, 0.3) !important;
    transition: all 0.2s ease !important;
}

/* Force white on ALL children */
.btn-primary-orange *,
.btn-primary-orange span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.btn-primary-orange:hover {
    background: linear-gradient(to right, #c2410c, #ea580c) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 12px rgba(249, 115, 22, 0.4) !important;
}

.btn-primary-orange svg {
    width: 18px !important;
    height: 18px !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ============================================
   ERROR MESSAGES - Global Styling
   ============================================ */

   body:not(.login-page) #msg_error,
body:not(.login-page) .error_bar{
    background: rgba(220, 38, 38, 0.15) !important;
    border: 1px solid #dc2626 !important;
    border-left: 4px solid #dc2626 !important;
    color: #fca5a5 !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}