/* =============================================================================
   osTicket — Business Modern theme override  (palette "Blu corporate")
   Loaded LAST so it overrides the stock theme. Non-invasive: no core CSS edited.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --biz-bg:        #f1f5f9;
    --biz-card:      #ffffff;
    --biz-header:    #1e293b;
    --biz-header-2:  #243044;
    --biz-accent:    #2563eb;
    --biz-accent-d:  #1d4ed8;
    --biz-accent-l:  #eff6ff;
    --biz-text:      #1e293b;
    --biz-muted:     #64748b;
    --biz-border:    #e2e8f0;
    --biz-radius:    12px;
    --biz-radius-lg: 16px;
    --biz-shadow:    0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
    --biz-shadow-h:  0 8px 28px rgba(15,23,42,.12);
    --biz-font:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base -------------------------------------------------------- */
body {
    background: var(--biz-bg) !important;
    font-family: var(--biz-font) !important;
    color: var(--biz-text) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 14px;
    line-height: 1.55;
}
a { color: var(--biz-accent); }
a:hover { color: var(--biz-accent-d); }

/* ---------- Main card -------------------------------------------------- */
#container {
    background: var(--biz-card) !important;
    max-width: 1080px !important;
    width: auto !important;
    margin: 32px auto !important;
    border: 1px solid var(--biz-border) !important;
    border-radius: var(--biz-radius-lg) !important;
    box-shadow: var(--biz-shadow) !important;
    overflow: hidden;
    padding: 0 !important;
}

/* ---------- Header ----------------------------------------------------- */
#header {
    background: var(--biz-card) !important;
    border-bottom: 1px solid var(--biz-border) !important;
    padding: 22px 32px 18px !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
}
#header #logo img {
    max-height: 52px !important;
    width: auto !important;
}
#header .pull-right p,
#header p {
    font-size: 13px !important;
    color: var(--biz-muted) !important;
}
#header .pull-right a {
    display: inline-block;
    padding: 7px 16px;
    background: var(--biz-accent);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s ease;
}
#header .pull-right a:hover { background: var(--biz-accent-d); }

/* ---------- Tab navigation (Home / New ticket / Status) ---------------- */
#nav {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--biz-border) !important;
    padding: 8px 24px !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    gap: 4px;
    flex-wrap: wrap;
    box-shadow: none !important;
}
#nav li { margin: 0 !important; background: none !important; border: 0 !important; }
#nav li a {
    display: inline-block;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    color: var(--biz-muted) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    transition: all .15s ease;
}
#nav li a:hover { background: #e9eef5 !important; color: var(--biz-text) !important; }
#nav li a.active,
#nav li a.active:hover {
    background: var(--biz-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(37,99,235,.30);
}

/* ---------- Content ---------------------------------------------------- */
#content {
    padding: 28px 32px 34px !important;
    background: var(--biz-card) !important;
    border: 0 !important;
    margin: 0 !important;
    min-height: 320px;
}
#content h1, #content h2, #content h3 { color: var(--biz-text) !important; font-weight: 700 !important; }
.subheader, p.subheader { color: var(--biz-muted) !important; }
hr { border: 0; border-top: 1px solid var(--biz-border); margin: 20px 0; }

/* ---------- Forms ------------------------------------------------------ */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=tel], input[type=url], textarea, select {
    font-family: var(--biz-font) !important;
    font-size: 14px !important;
    color: var(--biz-text) !important;
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    padding: 9px 12px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
textarea { line-height: 1.5; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=number]:focus, textarea:focus, select:focus {
    border-color: var(--biz-accent) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.16) !important;
    outline: none !important;
}
label, .faded, td.label { color: var(--biz-text) !important; }

/* ---------- Buttons ---------------------------------------------------- */
.button, a.button, button, input[type=submit], input[type=button], .btn, .greenbutton {
    font-family: var(--biz-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #fff !important;
    background: var(--biz-accent) !important;
    background-image: none !important;
    border: 1px solid var(--biz-accent) !important;
    border-radius: 9px !important;
    padding: 10px 20px !important;
    box-shadow: 0 1px 2px rgba(37,99,235,.20) !important;
    cursor: pointer;
    text-shadow: none !important;
    text-decoration: none !important;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
    line-height: 1.2 !important;
}
.button:hover, a.button:hover, button:hover, input[type=submit]:hover,
input[type=button]:hover, .btn:hover {
    background: var(--biz-accent-d) !important;
    border-color: var(--biz-accent-d) !important;
    box-shadow: var(--biz-shadow-h) !important;
}
.button:active, button:active, input[type=submit]:active { transform: translateY(1px); }

/* Secondary / cancel / reset buttons */
.cancel.button, a.cancel, .button.cancel, input.cancel, .grey.button, .gray.button,
input[type=reset], button[type=reset], [name=cancel], a[href*="cancel"].button {
    background: #fff !important;
    background-image: none !important;
    color: var(--biz-text) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    padding: 10px 20px !important;
}
.cancel.button:hover, .button.cancel:hover, .grey.button:hover,
input[type=reset]:hover, button[type=reset]:hover, [name=cancel]:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: var(--biz-text) !important;
}

/* ---------- Homepage "new ticket / check status" call-to-actions ------- */
#new_ticket, #landing_page, .cstm-form { margin-top: 6px; }

/* ---------- Tables (ticket lists, thread) ------------------------------ */
table.list, table.padded, .ticket_info, #ticketThread table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--biz-border) !important;
    border-radius: var(--biz-radius) !important;
    overflow: hidden;
    background: #fff !important;
}
table.list th, table.padded th {
    background: #f8fafc !important;
    color: var(--biz-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11.5px !important;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--biz-border) !important;
    padding: 11px 14px !important;
}
table.list td, table.padded td { border-bottom: 1px solid #eef2f7 !important; padding: 11px 14px !important; }
table.list tr:hover td { background: var(--biz-accent-l) !important; }

/* ---------- Alert / message bars --------------------------------------- */
#msg_notice, #msg_error, #msg_warning, #msg_info,
.notice_bar, .warning_bar, .error_bar, .success {
    border-radius: var(--biz-radius) !important;
    padding: 13px 16px !important;
    border: 1px solid transparent !important;
    font-weight: 500 !important;
    background-image: none !important;
    margin-bottom: 18px !important;
}
#msg_notice, .notice_bar, .success { background: #ecfdf5 !important; color: #065f46 !important; border-color: #a7f3d0 !important; }
#msg_warning, .warning_bar { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
#msg_error, .error_bar { background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; }
#msg_info, .info_bar { background: var(--biz-accent-l) !important; color: #1e40af !important; border-color: #bfdbfe !important; }

/* ---------- Thread / ticket view --------------------------------------- */
.thread-body, .thread-entry {
    border: 1px solid var(--biz-border) !important;
    border-radius: var(--biz-radius) !important;
    box-shadow: var(--biz-shadow);
    background: #fff !important;
}
.thread-entry.response .header, .thread-entry .header { border-radius: var(--biz-radius) var(--biz-radius) 0 0 !important; }

/* ---------- Footer ----------------------------------------------------- */
#footer {
    background: #f8fafc !important;
    border-top: 1px solid var(--biz-border) !important;
    padding: 18px 32px !important;
    margin: 0 !important;
    color: var(--biz-muted) !important;
    font-size: 12.5px !important;
}
#footer p { color: var(--biz-muted) !important; margin: 0; }
/* Powered-by badge -> MPP logo (client footer <a> + staff login <div>) */
#footer #poweredBy, #poweredBy {
    display: block;
    width: 104px !important;
    height: 29px !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden;
    background: url('../images/mpp-poweredby.png') center center no-repeat !important;
    background-size: contain !important;
    opacity: .9;
}
#poweredBy .osticket-logo { display: none !important; }

/* ---------- Misc cleanup ----------------------------------------------- */
.pull-right { float: right; }
.pull-left { float: left; }
#overlay { background: rgba(15,23,42,.45) !important; }

/* =============================================================================
   STAFF LOGIN PAGE  (#loginBox)
   ========================================================================== */
body#loginBody { background: var(--biz-header) !important; }
#brickwall { background: var(--biz-header) !important; }
#brickwall {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #172554 100%) !important;
    opacity: 1 !important;
}
#loginBox {
    background: #fff !important;
    border: 1px solid var(--biz-border) !important;
    border-radius: var(--biz-radius-lg) !important;
    box-shadow: 0 24px 60px rgba(2,6,23,.45) !important;
    padding: 36px 34px 30px !important;
}
#loginBox #blur, #loginBox #background { display: none !important; }
#loginBox h1#logo { text-align: center; margin-bottom: 8px; }
#loginBox h1#logo img { max-height: 56px; width: auto; }
#loginBox #login-message, #loginBox .banner { text-align: center; color: var(--biz-muted) !important; }
#loginBox form#login input[type=text],
#loginBox form#login input[type=password] {
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
}
#loginBox .submit.button, #loginBox button.submit {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 12px !important;
    justify-content: center;
}
#loginBox #reset-link { color: var(--biz-accent) !important; font-weight: 500; }
#loginBox #company { text-align: center; color: var(--biz-muted) !important; margin-top: 16px; }