/* WaveTech MSP - Client Portal Custom Styles */

/* ============================================
   HEADER - logo left, sign in right
   ============================================ */
#header {
    background: #1E5AA8;
    padding: 16px 24px;
    margin: 0 -15px;
    overflow: hidden;
}

#header #logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    float: left !important;
}

#header #logo img {
    border-radius: 4px;
    max-height: 44px;
    width: auto;
    /* filter set per-brand via inline style */
}

#header #logo .brand-name {
    color: #ffffff !important;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

#header .pull-right {
    float: right !important;
    margin-top: 8px;
}

#header .pull-right p {
    margin: 0;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}

#header .pull-right a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600;
    padding: 8px 20px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 6px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    transition: background 0.15s;
    display: inline-block;
}

#header .pull-right a:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.8);
}

#header .valign-helper { display: none; }

/* ============================================
   NAVIGATION - clean flat tabs
   ============================================ */
#nav {
    background: #ffffff !important;
    border-top: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    margin: 0 -15px !important;
    padding: 0 24px !important;
    list-style: none !important;
    display: flex !important;
    gap: 0 !important;
    /* Kill any default background image/gradient */
    background-image: none !important;
}

#nav li {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    list-style: none !important;
}

#nav li a {
    display: block !important;
    padding: 14px 20px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    transition: color 0.15s, border-color 0.15s !important;
    background: none !important;
    background-image: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    /* Remove any default icon padding */
    padding-left: 20px !important;
    text-indent: 0 !important;
}

#nav li a:hover {
    color: #1E5AA8 !important;
    background: none !important;
}

#nav li a.active {
    color: #1E5AA8 !important;
    border-bottom-color: #1E5AA8 !important;
    font-weight: 600 !important;
    background: none !important;
    background-image: none !important;
}

/* Kill ALL default nav icons and decorations */
#nav li a::before,
#nav li a::after,
#nav li::before,
#nav li::after {
    display: none !important;
    content: none !important;
}

/* ============================================
   LANDING PAGE - HIDE DEFAULT ELEMENTS
   ============================================ */
#landing_page .sidebar { display: none !important; }
#landing_page .main-content { width: 100% !important; float: none !important; }
#landing_page .main-content .thread-body { padding: 0 !important; }

/* Hide default KB search on landing page - we have our own */
#landing_page .search-form { display: none !important; }

/* ============================================
   CONTENT AREA
   ============================================ */
#content {
    padding: 24px 16px;
}

/* ============================================
   HERO SECTION (in landing page body)
   ============================================ */
.wt-hero {
    background: linear-gradient(135deg, #1E5AA8 0%, #1a4f96 50%, #153d75 100%);
    padding: 48px 32px 40px;
    text-align: center;
    border-radius: 8px;
    margin: -10px -10px 0 -10px;
}
.wt-hero h1 {
    color: #ffffff !important;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    font-family: Arial, Helvetica, sans-serif;
}
.wt-hero > p {
    color: rgba(255,255,255,0.85) !important;
    font-size: 16px;
    margin: 0 0 24px 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* Search in hero */
.wt-search {
    max-width: 480px;
    margin: 0 auto 28px;
}
.wt-search form {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.wt-search input[type="text"] {
    flex: 1;
    padding: 14px 18px !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-family: Arial, Helvetica, sans-serif;
    outline: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #333 !important;
}
.wt-search button {
    padding: 14px 24px !important;
    background: #F47920 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 0 !important;
}
.wt-search button:hover {
    background: #e06810 !important;
}

/* Hero action buttons */
.wt-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.wt-actions a,
.wt-actions a:link,
.wt-actions a:visited {
    display: inline-block !important;
    padding: 14px 32px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    transition: transform 0.15s, box-shadow 0.15s;
    line-height: 1.2 !important;
}
.wt-actions a:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.wt-actions .wt-btn-primary,
.wt-actions .wt-btn-primary:link,
.wt-actions .wt-btn-primary:visited {
    background: #F47920 !important;
    color: #ffffff !important;
    border: none !important;
}
.wt-actions .wt-btn-secondary,
.wt-actions .wt-btn-secondary:link,
.wt-actions .wt-btn-secondary:visited {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
}
.wt-actions .wt-btn-secondary:hover {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.8) !important;
}

/* Cards */
.wt-cards {
    display: flex;
    gap: 20px;
    margin: 32px 0;
    flex-wrap: wrap;
}
.wt-card {
    flex: 1;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}
.wt-card-icon {
    font-size: 32px;
    margin-bottom: 12px;
}
.wt-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1E5AA8;
    margin: 0 0 8px 0;
    font-family: Arial, Helvetica, sans-serif;
}
.wt-card p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
}

/* Bottom note */
.wt-bottom-note {
    text-align: center;
    padding: 20px 0;
    font-size: 13px;
    color: #9ca3af;
    font-family: Arial, Helvetica, sans-serif;
}

/* ============================================
   FOOTER
   ============================================ */
#footer {
    background: #1e293b !important;
    color: rgba(255,255,255,0.6) !important;
    padding: 16px 24px !important;
    margin: 0 -15px !important;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    /* Remove any default border/background */
    border: none !important;
    background-image: none !important;
}

#footer p {
    margin: 0;
    color: rgba(255,255,255,0.6) !important;
}

/* ============================================
   BUTTONS (global - forms, etc.)
   ============================================ */
.green.button,
.blue.button {
    background: #1E5AA8 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.green.button:hover,
.blue.button:hover {
    background: #164a8a !important;
}

/* ============================================
   FORMS (ticket submit, login, etc.)
   ============================================ */
#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content textarea,
#content select {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    transition: border-color 0.15s;
}

#content input[type="text"]:focus,
#content input[type="email"]:focus,
#content input[type="password"]:focus,
#content textarea:focus {
    border-color: #1E5AA8 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(30,90,168,0.1);
}

/* ============================================
   KILL default osTicket decorations
   ============================================ */
#header + .clear + hr {
    display: none;
}

/* Kill container constraints and background */
#container {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    background: #f8f9fb !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    overflow-x: hidden !important;
}

/* Kill any default body background */
body {
    background: #f0f1f3 !important;
    background-image: none !important;
}

/* Kill the .clear div gap between header and nav */
#header + .clear {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Override nav box-shadow from theme.css */
#nav,
ul#nav {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Extra specificity to kill nav link pill shapes */
ul#nav li a,
ul#nav li a:link,
ul#nav li a:visited,
#nav li a,
#nav li a:link,
#nav li a:visited {
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

ul#nav li a.active,
#nav li a.active {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Force hero to stretch full width within container */
.wt-hero {
    margin-left: -24px !important;
    margin-right: -24px !important;
}

/* Ensure landing page content fills width */
#landing_page {
    padding: 0 !important;
}

/* Hide osTicket powered-by footer link */
#footer a {
    color: rgba(255,255,255,0.4) !important;
    text-decoration: none !important;
}

/* ============================================
   PAGE HEADINGS
   ============================================ */
#content > h1,
#content h1 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.3px !important;
}

/* Keep hero text white on blue gradient */
#content .wt-hero h1 {
    color: #ffffff !important;
    font-size: 28px !important;
}

#content .wt-hero > p {
    color: rgba(255,255,255,0.85) !important;
}

#content > h1 + p,
#content > p:first-of-type {
    font-family: Arial, Helvetica, sans-serif;
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 16px 0;
    line-height: 1.5;
}


/* ============================================
   OPEN TICKET FORM (#ticketForm)
   ============================================ */
#ticketForm {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 32px 36px;
    margin-top: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

#ticketForm > table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

/* Remove the fixed width="800" from the table */
#ticketForm > table[width] {
    width: 100% !important;
}

#ticketForm > table td {
    border: none !important;
    padding: 4px 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #374151 !important;
    vertical-align: top !important;
}

/* Section dividers within the form */
#ticketForm hr {
    border: none !important;
    border-top: 1px solid #e5e7eb !important;
    margin: 24px 0 20px !important;
}

/* Form section headers */
#ticketForm .form-header {
    margin-bottom: 12px !important;
}

#ticketForm .form-header b,
#ticketForm .form-header h3 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
}

#ticketForm .form-header div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.4;
}

/* Dynamic form fields - consistent spacing */
#ticketForm td[colspan="2"][style*="padding-top"] {
    padding-top: 16px !important;
}

#ticketForm td[colspan="2"] {
    padding-top: 16px !important;
    padding-bottom: 0 !important;
}

/* Labels */
#ticketForm label {
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
}

#ticketForm label > span.required {
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* Hint text below labels */
#ticketForm label em,
#ticketForm em {
    color: #9ca3af !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
    display: block !important;
    margin: 2px 0 4px !important;
}

/* Required star */
#ticketForm font.error {
    color: #ef4444 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
}

#ticketForm .error {
    color: #ef4444 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
}

/* Error star next to required fields - keep inline */
#ticketForm label span.error {
    display: inline !important;
    margin: 0 !important;
}

/* All inputs within the ticket form */
#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm input[type="tel"],
#ticketForm input[type="number"],
#ticketForm input[type="url"],
#ticketForm textarea,
#ticketForm select {
    width: 100% !important;
    max-width: 560px !important;
    padding: 10px 14px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
}

#ticketForm textarea {
    max-width: 100% !important;
    min-height: 120px !important;
    resize: vertical !important;
}

#ticketForm input[type="text"]:focus,
#ticketForm input[type="email"]:focus,
#ticketForm input[type="tel"]:focus,
#ticketForm textarea:focus,
#ticketForm select:focus {
    border-color: #1E5AA8 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30,90,168,0.1) !important;
}

#ticketForm select {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
}

/* Google reCAPTCHA */
#ticketForm .captchaRow td {
    padding-top: 10px !important;
}

#ticketForm .g-recaptcha {
    margin: 6px 0 0 !important;
}

/* Phone + Extension inline layout */
#ticketForm input[type="tel"] {
    width: auto !important;
    max-width: 280px !important;
}

#ticketForm input[name$="-ext"] {
    width: auto !important;
    max-width: 80px !important;
}

/* File upload / filedrop */
#ticketForm .filedrop {
    border: 2px dashed #d1d5db !important;
    border-radius: 8px !important;
    padding: 24px !important;
    text-align: center !important;
    background: #fafbfc !important;
    transition: border-color 0.15s, background 0.15s !important;
    font-family: Arial, Helvetica, sans-serif !important;
    color: #6b7280 !important;
    font-size: 13px !important;
}

#ticketForm .filedrop:hover {
    border-color: #1E5AA8 !important;
    background: #f0f4fa !important;
}

/* ============================================
   ALL SUBMIT / RESET / CANCEL BUTTONS
   ============================================ */
input[type="submit"],
button[type="submit"],
.btn {
    background: #1E5AA8 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 28px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    -webkit-appearance: none !important;
    text-shadow: none !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.btn:hover {
    background: #164a8a !important;
}

/* Reset button - secondary style */
input[type="reset"] {
    background: #ffffff !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 12px 28px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s !important;
    -webkit-appearance: none !important;
}

input[type="reset"]:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
}

/* Cancel button - ghost style (less prominent) */
input[type="button"][name="cancel"],
input[type="button"][value="Cancel"] {
    background: transparent !important;
    color: #9ca3af !important;
    border: none !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

input[type="button"][name="cancel"]:hover,
input[type="button"][value="Cancel"]:hover {
    color: #6b7280 !important;
    background: transparent !important;
}

/* Button row spacing */
p.buttons,
#ticketForm p.buttons {
    text-align: center !important;
    padding: 28px 0 4px !important;
    margin: 0 !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    border-top: 1px solid #e5e7eb !important;
    margin-top: 24px !important;
}

/* Page subtitle */
.page-subtitle {
    font-family: Arial, Helvetica, sans-serif !important;
    color: #6b7280 !important;
    font-size: 14px !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.5 !important;
}

/* ============================================
   LOGIN / CHECK TICKET STATUS (#clientLogin)
   ============================================ */
#clientLogin {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 8px 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    overflow: hidden !important;
}

#clientLogin > div[style*="table-row"] {
    display: flex !important;
    flex-wrap: wrap !important;
}

#clientLogin .login-box {
    display: block !important;
    width: auto !important;
    flex: 1 !important;
    min-width: 280px !important;
    padding: 28px 32px !important;
    border-right: 1px solid #e5e7eb !important;
}

#clientLogin .login-box strong {
    font-family: Arial, Helvetica, sans-serif !important;
    color: #ef4444 !important;
    font-size: 13px !important;
}

#clientLogin .login-box label {
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 4px !important;
}

#clientLogin .login-box > div {
    margin-bottom: 16px !important;
}

#clientLogin .login-box input[type="text"],
#clientLogin .login-box input[type="password"] {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

#clientLogin .login-box input[type="text"]:focus,
#clientLogin .login-box input[type="password"]:focus {
    border-color: #1E5AA8 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30,90,168,0.1) !important;
}

#clientLogin .login-box p {
    margin: 20px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#clientLogin .login-box a {
    color: #1E5AA8 !important;
    text-decoration: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
}

#clientLogin .login-box a:hover {
    text-decoration: underline !important;
}

/* Right side instructions panel */
#clientLogin .instructions,
#clientLogin > div > div[style*="table-cell"] {
    display: block !important;
    flex: 1 !important;
    min-width: 240px !important;
    padding: 28px 32px !important;
    background: #f9fafb !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
}

#clientLogin .instructions a,
#clientLogin > div > div[style*="table-cell"] a {
    color: #1E5AA8 !important;
    font-weight: 600 !important;
}

/* External auth (Google SSO) buttons */
.external-auth-box {
    display: block !important;
    padding: 12px 16px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #374151 !important;
    transition: background 0.15s !important;
}

.external-auth-box:hover {
    background: #f3f4f6 !important;
}

/* ============================================
   TICKET VIEW PAGE (#ticketInfo)
   ============================================ */
#ticketInfo {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#ticketInfo h1 {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#ticketInfo h1 small {
    color: #6b7280 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

/* Info tables (ticket info / user info boxes) */
.infoTable {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border-collapse: collapse !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

.infoTable thead td.headline,
table .headline {
    background: #f9fafb !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #e5e7eb !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.infoTable th {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    padding: 8px 14px !important;
    background: transparent !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.infoTable td {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #374151 !important;
    padding: 8px 14px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

/* Custom data tables */
table.custom-data {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border-collapse: collapse !important;
    margin-bottom: 12px !important;
}

table.custom-data th {
    background: #f9fafb !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    padding: 8px 14px !important;
    text-align: left !important;
}

table.custom-data td {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #374151 !important;
    padding: 8px 14px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

/* Action buttons (Print, Edit) on ticket view */
.action-button,
a.action-button {
    display: inline-block !important;
    padding: 6px 14px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    color: #374151 !important;
    text-decoration: none !important;
    background: #ffffff !important;
    transition: background 0.15s !important;
}

.action-button:hover,
a.action-button:hover {
    background: #f3f4f6 !important;
}

/* ============================================
   TICKET LIST TABLE (#ticketTable)
   ============================================ */
#ticketTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

#ticketTable thead th {
    background: #f9fafb !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #e5e7eb !important;
    text-align: left !important;
}

#ticketTable tbody td {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #374151 !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

#ticketTable tbody tr:hover td {
    background: #f9fafb !important;
}

#ticketTable tbody td a {
    color: #1E5AA8 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#ticketTable tbody td a:hover {
    text-decoration: underline !important;
}

/* Search box above ticket list */
.search.well {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
}

/* ============================================
   TICKET THREAD (#ticketThread)
   ============================================ */
#ticketThread {
    border-left: none !important;
    margin-top: 24px !important;
}

.thread-entry {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

.thread-entry .header {
    padding: 10px 16px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.thread-entry.message .header {
    background: #eef4fb !important;
    color: #1f2937 !important;
}

.thread-entry.response .header {
    background: #f0fdf4 !important;
    color: #1f2937 !important;
}

.thread-entry .thread-body {
    padding: 16px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
}

/* Reply form at bottom of ticket */
#reply {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin-top: 24px !important;
}

#reply h2 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 0 16px !important;
}

/* ============================================
   ALERT / NOTICE BANNERS
   ============================================ */
#msg_notice,
#msg_warning,
#msg_error,
#msg_info,
.notice_bar,
.warning_bar,
.error_bar {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    margin-bottom: 16px !important;
    border: none !important;
}

#msg_notice {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-left: 4px solid #22c55e !important;
}

#msg_warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border-left: 4px solid #f59e0b !important;
}

#msg_error {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-left: 4px solid #ef4444 !important;
}

/* ============================================
   GLOBAL TYPOGRAPHY & LINK CLEANUP
   ============================================ */
#content a {
    color: #1E5AA8;
    text-decoration: none;
}

#content a:hover {
    text-decoration: underline;
}

/* Pagination */
.pageNav {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #6b7280 !important;
}

.pageNav a {
    color: #1E5AA8 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
}

.pageNav a:hover {
    background: #eef4fb !important;
}

/* ============================================
   KNOWLEDGE BASE - COMPLETE RESTYLE
   ============================================ */

/* Two-column layout */
.row {
    display: flex !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
}

.row > .span8 {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
}

.row > .span4 {
    width: 280px !important;
    flex-shrink: 0 !important;
    float: none !important;
}

/* ---- KB SIDEBAR ---- */
.sidebar {
    margin: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
}

.sidebar .searchbar {
    margin-bottom: 16px !important;
}

.sidebar .searchbar input.search,
.sidebar .searchbar input[type="text"],
#content .sidebar .searchbar input.search,
#content .sidebar .searchbar input[type="text"] {
    width: 100% !important;
    padding: 12px 14px 12px 40px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #1f2937 !important;
    background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3e%3cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.45 4.38l4.09 4.08a.75.75 0 11-1.06 1.06l-4.08-4.09A7 7 0 012 9z'/%3e%3c/svg%3e") no-repeat 12px center !important;
    background-size: 14px !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.sidebar .searchbar input.search:focus,
.sidebar .searchbar input[type="text"]:focus {
    border-color: #1E5AA8 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30,90,168,0.1) !important;
}

.sidebar .searchbar select {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.sidebar .content {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.sidebar .content section {
    padding: 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.sidebar .content section:last-child {
    border-bottom: none !important;
}

.sidebar .content section .header,
.sidebar .content section strong {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #6b7280 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.sidebar .content section div,
.sidebar .content section a {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
}

.sidebar .content section a {
    color: #1E5AA8 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 4px 0 !important;
}

.sidebar .content section a:hover {
    color: #164a8a !important;
}

/* ---- KB CATEGORIES LISTING (#kb) ---- */
ul#kb,
#kb {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#kb > li {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin-bottom: 12px !important;
    transition: box-shadow 0.15s !important;
}

#kb > li:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Hide the old folder icon image */
#kb > li > i {
    display: none !important;
}

/* Reset the margin that was for the icon */
#kb > li > div {
    margin-left: 0 !important;
}

#kb > li h4 {
    margin: 0 0 6px 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

#kb > li h4 a {
    color: #1E5AA8 !important;
    text-decoration: none !important;
}

#kb > li h4 a:hover {
    color: #164a8a !important;
}

#kb > li .faded,
#kb > li > div > .faded {
    color: #6b7280 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
}

/* Subcategories within a category */
#kb > li .icon-folder-open,
#kb > li .icon-folder-open-alt {
    color: #9ca3af !important;
    margin-right: 4px !important;
}

/* Popular FAQs within category cards */
.popular-faq,
#kb .popular-faq {
    padding: 6px 0 !important;
    border-bottom: none !important;
}

.popular-faq i,
#kb .popular-faq i {
    color: #9ca3af !important;
    margin-right: 6px !important;
    font-size: 13px !important;
}

.popular-faq a,
#kb .popular-faq a {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #374151 !important;
    text-decoration: none !important;
}

.popular-faq a:hover,
#kb .popular-faq a:hover {
    color: #1E5AA8 !important;
}

/* ---- FAQ LISTING (#faq) ---- */
#faq {
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

#faq ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-top: none !important;
}

#faq ol li {
    margin: 0 !important;
    padding: 0 !important;
}

#faq ol li a,
#faq ol li a.previewfaq {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    transition: box-shadow 0.15s, border-color 0.15s !important;
    padding-left: 16px !important;
}

#faq ol li a::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231E5AA8'%3e%3cpath fill-rule='evenodd' d='M4.25 2A2.25 2.25 0 002 4.25v11.5A2.25 2.25 0 004.25 18h11.5A2.25 2.25 0 0018 15.75V4.25A2.25 2.25 0 0015.75 2H4.25zm4.03 6.28a.75.75 0 00-1.06-1.06L4.97 9.47a.75.75 0 000 1.06l2.25 2.25a.75.75 0 001.06-1.06L6.56 10l1.72-1.72zm3.44-1.06a.75.75 0 111.06 1.06L11.06 10l1.72 1.72a.75.75 0 11-1.06 1.06l-2.25-2.25a.75.75 0 010-1.06l2.25-2.25z'/%3e%3c/svg%3e") no-repeat center !important;
    background-size: 20px !important;
}

#faq ol li a:hover {
    border-color: #1E5AA8 !important;
    box-shadow: 0 2px 8px rgba(30,90,168,0.08) !important;
    background-color: #fafcff !important;
    color: #1E5AA8 !important;
}

#faq ol li a .Icon,
#faq ol li a span.Icon {
    display: none !important;
}

/* ---- SINGLE FAQ ARTICLE ---- */
.faq-content {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 28px 32px !important;
    margin-top: 8px !important;
}

.faq-content .article-title,
.faq-content .article-title.flush-left {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.faq-content .faded {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    color: #9ca3af !important;
}

.faq-content .thread-body {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #374151 !important;
}

.faq-content .thread-body h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 28px 0 12px !important;
}

.faq-content .thread-body ol,
.faq-content .thread-body ul {
    padding-left: 24px !important;
    margin: 12px 0 !important;
}

.faq-content .thread-body li {
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
}

.faq-content .thread-body a {
    color: #1E5AA8 !important;
    text-decoration: underline !important;
}

.faq-content .thread-body table {
    border-collapse: collapse !important;
    margin: 16px 0 !important;
}

.faq-content .thread-body table th,
.faq-content .thread-body table td {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
}

/* Breadcrumbs */
#breadcrumbs {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #9ca3af !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
}

#breadcrumbs a {
    color: #1E5AA8 !important;
    text-decoration: none !important;
}

#breadcrumbs a:hover {
    text-decoration: underline !important;
}

/* ---- KB PAGE INTRO TEXT ---- */
#kb + div,
.row > .span8 > div:first-child {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    margin-bottom: 16px !important;
}

/* ---- CATEGORY PAGE ---- */
.row > .span8 > h2 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 24px 0 12px !important;
}

.row > .span8 > hr {
    border: none !important;
    border-top: 1px solid #e5e7eb !important;
    margin: 16px 0 !important;
}

/* Subcategory links on category page */
.row > .span8 .icon-folder-open-alt {
    color: #9ca3af !important;
    margin-right: 6px !important;
}