/*
 * Traceable Support Portal — Full Brand CSS for osTicket
 * Brand: #4F46E5 indigo primary · #4338CA hover · #3730A3 active
 * Built against osTicket v1.18.3 DOM structure
 * v2.0 — fixed header order, button appearance, login layout, footer
 */

/* ── 1. FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }

body,
input, select, textarea, button,
.button, label, p, td, th, li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}


/* ── 2. PAGE BACKGROUND ───────────────────────────────────────── */
body {
    background: #EEF2FF !important;
    background-image: none !important;
    margin: 0;
    padding: 0;
}


/* ── 3. OUTER CONTAINER ───────────────────────────────────────── */
#container {
    width: 960px !important;
    max-width: 96vw !important;
    margin: 32px auto !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(79,70,229,.08),
                0 10px 40px -4px rgba(79,70,229,.12) !important;
}


/* ── 4. HEADER ────────────────────────────────────────────────── */
#header {
    background: #4F46E5 !important;
    background-image: none !important;
    min-height: 68px !important;
    height: auto !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* FIX: DOM order is [user-links, logo] — swap with flex order */
#header #logo           { order: 1 !important; }
#header .pull-right     { order: 2 !important; }

#logo {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

.valign-helper { display: none !important; }

#header #logo img {
    height: 40px !important;
    width: auto !important;
    max-width: 220px !important;
    vertical-align: middle !important;
    filter: none !important;
}

#header .pull-right.flush-right { text-align: right !important; }

#header p {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    width: auto !important;
    line-height: 1.5 !important;
}

#header p a {
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: none !important;
}

#header p a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

div.clear { display: none !important; }


/* ── 5. NAVIGATION BAR ────────────────────────────────────────── */
#nav {
    background: #4338CA !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 20px !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

#nav li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

#nav li a {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    background-image: none !important;
    background-color: transparent !important;
    transition: background-color 0.15s, color 0.15s !important;
    border-bottom: none !important;
    line-height: 1.4 !important;
}

#nav li a:hover {
    background-color: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

#nav li a.active {
    background-color: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}


/* ── 6. CONTENT AREA ──────────────────────────────────────────── */
#content {
    padding: 36px 40px !important;
    min-height: 320px !important;
}

#content h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1E1B4B !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

#content h2 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1E1B4B !important;
    margin: 0 0 8px 0 !important;
}

#content h3 {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #4F46E5 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin: 0 0 16px 0 !important;
}

#content > p {
    color: #6B7280 !important;
    font-size: 14px !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.6 !important;
}


/* ── 7. GLOBAL LINKS ──────────────────────────────────────────── */
a { color: #4F46E5 !important; text-decoration: none !important; }
a:hover { color: #4338CA !important; text-decoration: underline !important; }

#nav a, #nav a:hover,
#header a, #header a:hover,
.button, .button:hover {
    color: inherit !important;
    text-decoration: none !important;
}


/* ── 8. BUTTONS ───────────────────────────────────────────────── */
/* FIX: must override -webkit-appearance:button set in theme.css */
.button,
.button:visited,
.blue.button,
.blue.button:visited,
.green.button,
.green.button:visited,
input[type="submit"],
input.btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #4F46E5 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(79,70,229,.25) !important;
    text-shadow: none !important;
    letter-spacing: 0.01em !important;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.button:hover,
.blue.button:hover,
.green.button:hover,
input[type="submit"]:hover,
input.btn:hover {
    background: #4338CA !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79,70,229,.3) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.button:active,
input[type="submit"]:active,
input.btn:active {
    background: #3730A3 !important;
    transform: translateY(0) !important;
}

input[type="reset"],
input[type="button"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #F3F4F6 !important;
    background-image: none !important;
    border: 1.5px solid #D1D5DB !important;
    border-radius: 8px !important;
    color: #374151 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

input[type="reset"]:hover,
input[type="button"]:hover {
    background: #E5E7EB !important;
}


/* ── 9. FORM INPUTS ───────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
select,
textarea {
    width: 100% !important;
    border: 1.5px solid #D1D5DB !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #111827 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important;
}

input[name$="-ext"] {
    width: 72px !important;
    display: inline-block !important;
}

label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 0 !important;
}

label .error, span.error {
    color: #EF4444 !important;
    font-size: 12px !important;
}

select {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 36px !important;
}


/* ── 10. TICKET FORM TABLE ────────────────────────────────────── */
#ticketForm table[width] {
    width: 100% !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

#ticketForm tbody {
    display: block !important;
    background: #FAFAFA !important;
    border: 1.5px solid #E0E7FF !important;
    border-radius: 10px !important;
    padding: 24px 28px !important;
    margin-bottom: 20px !important;
}

#ticketForm tr { display: block !important; }

#ticketForm td {
    display: block !important;
    padding: 0 0 18px 0 !important;
    border: none !important;
    width: 100% !important;
}

#ticketForm td:last-child { padding-bottom: 0 !important; }
#ticketForm tbody > tr:first-child td { padding-bottom: 20px !important; }
#ticketForm tbody > tr:first-child hr { display: none !important; }

.form-header { border-bottom: none !important; margin-bottom: 0 !important; }

#ticketForm label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

#dynamic-form {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#dynamic-form td { padding-bottom: 18px !important; }

.buttons {
    text-align: left !important;
    margin-top: 8px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

/* p.buttons inline style override */
p.buttons[style] {
    text-align: left !important;
    display: flex !important;
    gap: 12px !important;
}

#ticketForm hr { display: none !important; }
#ticketForm font.error { font-size: 12px !important; color: #EF4444 !important; }


/* ── 11. HOMEPAGE LANDING PAGE ────────────────────────────────── */
#landing_page {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 32px !important;
    align-items: flex-start !important;
}

#landing_page .sidebar.pull-right {
    float: none !important;
    width: 220px !important;
    min-width: 220px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.front-page-button {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.front-page-button p { margin: 0 !important; }

.front-page-button .button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    max-width: none !important;
}

/* "Check Ticket Status" secondary style */
.front-page-button p:nth-child(2) .button,
.front-page-button p:nth-child(2) .green.button {
    background: #F3F4F6 !important;
    background-image: none !important;
    color: #374151 !important;
    box-shadow: none !important;
    border: 1.5px solid #D1D5DB !important;
}

.front-page-button p:nth-child(2) .button:hover,
.front-page-button p:nth-child(2) .green.button:hover {
    background: #E5E7EB !important;
    color: #111827 !important;
    box-shadow: none !important;
    transform: none !important;
}

#landing_page .main-content {
    flex: 1 !important;
    width: auto !important;
}

#landing_page .thread-body h1 {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1E1B4B !important;
    margin-bottom: 12px !important;
}

#landing_page .thread-body p {
    font-size: 15px !important;
    color: #4B5563 !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
}


/* ── 12. LOGIN & CHECK STATUS PAGES ──────────────────────────── */

/* FIX: remove lock.png background and reset #clientLogin container */
#clientLogin {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

/* FIX: override inline display:table-row on inner wrapper */
#clientLogin > div[style],
#clientLogin > div {
    display: block !important;
}

.login-box {
    display: block !important;
    width: 100% !important;
    max-width: 440px !important;
    box-shadow: none !important;
    background: #FAFAFA !important;
    border: 1.5px solid #E0E7FF !important;
    border-radius: 12px !important;
    padding: 32px 36px !important;
    margin: 0 0 16px 0 !important;
}

.login-box > div { margin-bottom: 16px !important; }
.login-box > div:last-child { margin-bottom: 0 !important; }

.login-box > strong {
    display: block !important;
    color: #EF4444 !important;
    font-size: 13px !important;
    margin-bottom: 12px !important;
}

.login-box p { margin: 20px 0 0 0 !important; }

.login-box label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
}

/* FIX: hide the padlock image cell — it's an extra table-cell div */
#clientLogin > div > div[style*="table-cell"] {
    display: none !important;
}

/* Override .instructions table-cell display */
#clientLogin .instructions {
    display: block !important;
    max-width: 440px !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    background: #EEF2FF !important;
    border: 1px solid #C7D2FE !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #4338CA !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

#clientLogin .instructions a {
    color: #4F46E5 !important;
    font-weight: 500 !important;
}

#content > form#clientLogin { max-width: 540px !important; }

/* Inputs inside clientLogin (theme.css uses specific selectors) */
#clientLogin div input,
#clientLogin div select,
#clientLogin div textarea {
    border: 1.5px solid #D1D5DB !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    width: 100% !important;
}

#clientLogin div input:focus,
#clientLogin div select:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important;
}


/* ── 13. ALERTS ───────────────────────────────────────────────── */
#msg_notice, .notice_bar {
    background: #EEF2FF !important;
    border: 1px solid #C7D2FE !important;
    border-radius: 8px !important;
    color: #3730A3 !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
}

#msg_error, .error_bar {
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    border-radius: 8px !important;
    color: #991B1B !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
}

#msg_warning, .warning_bar, .warning-banner {
    background: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    border-radius: 8px !important;
    color: #92400E !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
}


/* ── 14. HR ───────────────────────────────────────────────────── */
hr {
    border: none !important;
    border-top: 1.5px solid #E0E7FF !important;
    margin: 24px 0 !important;
}


/* ── 15. FOOTER ───────────────────────────────────────────────── */
#footer {
    background: #F8FAFF !important;
    border-top: 1px solid #E0E7FF !important;
    text-align: center !important;
    padding: 16px 28px !important;
    font-size: 12px !important;
    color: #9CA3AF !important;
}

#footer p { margin: 0 0 4px 0 !important; color: #9CA3AF !important; }
#footer a { color: #A5B4FC !important; }

/* FIX: fully remove the osTicket background image logo */
#footer #poweredBy {
    -webkit-appearance: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    display: inline !important;
    font-size: 11px !important;
    color: #C4B5FD !important;
    outline: none !important;
}


/* ── 16. SIDEBAR (ticket/KB view) ────────────────────────────── */
.sidebar section .header {
    background-color: #4F46E5 !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 6px 6px 0 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.sidebar .content {
    border: 1.5px solid #E0E7FF !important;
    border-top: none !important;
    background: #FAFAFE !important;
    border-radius: 0 0 6px 6px !important;
    padding: 12px !important;
}


/* ── 17. THREAD (ticket conversation) ────────────────────────── */
.thread-entry.message .header {
    background-color: #EEF2FF !important;
    border-left: 3px solid #4F46E5 !important;
    color: #1E1B4B !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.thread-entry.response .header {
    background-color: #F0FDF4 !important;
    border-left: 3px solid #10B981 !important;
    padding: 8px 12px !important;
}

.thread-body {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #374151 !important;
}


/* ── 18. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 700px) {
    #container {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    #content { padding: 24px 20px !important; }

    #header {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #landing_page { flex-direction: column !important; }

    #landing_page .sidebar.pull-right {
        width: 100% !important;
        min-width: unset !important;
    }

    .front-page-button .button { width: 100% !important; }
    .login-box { padding: 24px 20px !important; }
    #ticketForm tbody { padding: 20px 16px !important; }
}


/* ── 19. TARGETED FIXES (v2.1) ────────────────────────────────── */

/* FIX: Sign In button — override high-specificity #clientLogin input[type=submit] in theme.css */
#clientLogin input[type="submit"],
#clientLogin input[type="submit"].btn,
#clientLogin p input[type="submit"],
#clientLogin input.btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #4F46E5 !important;
    background-color: #4F46E5 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(79,70,229,.25) !important;
    width: auto !important;
    display: inline-block !important;
}

#clientLogin input[type="submit"]:hover,
#clientLogin input.btn:hover {
    background: #4338CA !important;
    background-color: #4338CA !important;
}

/* FIX: Real logo — explicit height so SVG renders, no filter needed */
#header #logo img {
    height: 40px !important;
    width: auto !important;
    filter: none !important;
}

/* FIX: Ticket form label — switch from flex to block to avoid br/text stacking */
#ticketForm label {
    display: block !important;
}

#ticketForm label > span,
#ticketForm label > span.required,
#ticketForm label > span.not-required {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
}

/* Hide <br> tags inside form labels */
#ticketForm label br { display: none !important; }

/* FIX: Phone + Ext — inline layout. Tel at 70% leaves room for "Ext:" + 60px box */
#ticketForm input[type="tel"] {
    width: 70% !important;
    display: inline-block !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

#ticketForm input[name$="-ext"] {
    width: 60px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* FIX: "Help Topic" uses <b> not <h3> — match CONTACT INFORMATION style */
.form-header b {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #4F46E5 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin: 0 !important;
}