/*
 * Bad Hippo theme for osTicket.
 * Principle: keep osTicket layout and sizing, adapt color, contrast, logo,
 * light rounding, and remove noisy original image backgrounds.
 */
:root {
    --bh-bg: #060b14;
    --bh-bg-soft: #0b1220;
    --bh-panel: #111827;
    --bh-panel-2: #151f32;
    --bh-field: #1f2937;
    --bh-line: rgba(255, 255, 255, .13);
    --bh-line-soft: rgba(255, 255, 255, .08);
    --bh-text: #f8fafc;
    --bh-muted: rgba(248, 250, 252, .72);
    --bh-faint: rgba(248, 250, 252, .48);
    --bh-accent: #f97316;
    --bh-accent-2: #fb923c;
    --bh-purple: #7c3aed;
    --bh-radius: 12px;
    --bh-radius-lg: 18px;
    --bh-shadow: 0 18px 55px rgba(0, 0, 0, .32);
}

html,
body {
    min-height: 100%;
}

html {
    background: var(--bh-bg) !important;
}

body {
    background: var(--bh-bg) !important;
    color: var(--bh-text) !important;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

body::before {
    background:
        radial-gradient(circle at 0 0, rgba(249, 115, 22, .17), transparent 30%),
        radial-gradient(circle at 80% 0, rgba(124, 58, 237, .13), transparent 28%),
        var(--bh-bg);
}

body::after {
    background: url("../images/bad-hippo-osticket.svg") center 64% / min(54vw, 720px) no-repeat;
    opacity: .055;
}

body > * {
    position: relative;
    z-index: 1;
}

a,
.link {
    color: var(--bh-accent) !important;
}

a:hover,
.link:hover {
    color: var(--bh-accent-2) !important;
}

/* Shared containers */
#container {
    background: transparent !important;
}

#header {
    border-color: var(--bh-line) !important;
    border-radius: var(--bh-radius-lg) !important;
    background: rgba(6, 11, 20, .78) !important;
    box-shadow: var(--bh-shadow) !important;
}

#header p,
#header #info {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--bh-muted) !important;
}

#header p a,
#header #info a,
#header #info strong {
    color: var(--bh-text) !important;
}

#header #logo,
#header a#logo,
#loginBox h1#logo a {
    background: none !important;
}

#header #logo img,
#loginBox h1#logo img {
    display: none !important;
}

#header #logo::before,
#loginBox h1#logo a::before {
    content: "";
    display: inline-block;
    width: 190px;
    height: 58px;
    vertical-align: middle;
    background: url("../images/bad-hippo-osticket.svg") center / contain no-repeat;
}

#content {
    border-color: var(--bh-line) !important;
    border-radius: var(--bh-radius-lg) !important;
    background: linear-gradient(135deg, rgba(17, 24, 39, .95), rgba(21, 31, 50, .88)) !important;
    color: var(--bh-text) !important;
    box-shadow: var(--bh-shadow) !important;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content .headline,
#content em,
#content .section-break,
#content .form-header,
#content table.form_table th,
#content table.form_table caption {
    color: var(--bh-text) !important;
}

#content p,
#content label,
#content td,
#content .faded,
#content .muted,
#content div {
    color: inherit;
}

#footer {
    border-color: var(--bh-line-soft) !important;
    color: var(--bh-faint) !important;
}

#poweredBy {
    opacity: .5;
}

/* Navigation: keep osTicket dimensions, just recolor */
#nav,
#sub_nav {
    border-color: var(--bh-line-soft) !important;
    background: transparent !important;
}

#nav .active,
#nav .inactive,
#sub_nav > li,
#sub_nav .active,
#sub_nav .inactive {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow: none !important;
}

#nav li.active,
#nav li.inactive:hover,
#sub_nav li.active,
#sub_nav li:hover {
    border-color: rgba(249, 115, 22, .58) !important;
    background: rgba(249, 115, 22, .13) !important;
}

#nav a,
#sub_nav a {
    background-image: none !important;
    color: var(--bh-muted) !important;
    text-shadow: none !important;
}

#nav .active a,
#nav a:hover,
#sub_nav .active a,
#sub_nav a:hover {
    color: var(--bh-text) !important;
}

#nav li > ul,
#nav li.inactive > ul,
.customQ-dropdown,
.action-dropdown,
.action-dropdown ul,
.action-dropdown ul li,
.pull-down,
.pull-down ul,
.pull-down ul li,
.dialog .action-dropdown,
.popup,
.popup-dialog {
    border-color: var(--bh-line) !important;
    border-radius: var(--bh-radius) !important;
    background: rgba(17, 24, 39, .98) !important;
    color: var(--bh-muted) !important;
    box-shadow: var(--bh-shadow) !important;
}

#nav li > ul a,
#nav li.inactive > ul a,
.customQ-dropdown a,
.customQ-dropdown div,
.action-dropdown a,
.action-dropdown li,
.pull-down a,
.pull-down li,
.popup a,
.popup-dialog a {
    background: transparent !important;
    color: var(--bh-muted) !important;
}

#nav li > ul a:hover,
#nav li.inactive > ul a:hover,
.customQ-dropdown a:hover,
.customQ-dropdown div:hover,
.action-dropdown a:hover,
.action-dropdown li:hover,
.pull-down a:hover,
.pull-down li:hover,
.popup a:hover,
.popup-dialog a:hover {
    background: rgba(249, 115, 22, .12) !important;
    color: var(--bh-text) !important;
}

/* Forms and fields */
input,
textarea,
select,
.select2-container .select2-choice,
.select2-container--default .select2-selection--single {
    border-color: rgba(255, 255, 255, .16) !important;
    border-radius: 8px !important;
    background-color: var(--bh-field) !important;
    color: var(--bh-text) !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(248, 250, 252, .42) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(249, 115, 22, .72) !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .14) !important;
    outline: none !important;
}

input[type="radio"],
input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    accent-color: var(--bh-accent);
}

button,
input[type="submit"],
input[type="button"],
.button,
.btn,
a.button,
.action-button {
    border-color: transparent !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--bh-accent), var(--bh-accent-2)) !important;
    color: var(--bh-text) !important;
    text-shadow: none !important;
    box-shadow: 0 5px 15px rgba(249, 115, 22, .16) !important;
    font-weight: 700 !important;
}

button *,
input[type="submit"] *,
input[type="button"] *,
.button *,
.btn *,
a.button *,
.action-button *,
.action-button i,
.button i,
.btn i {
    color: var(--bh-text) !important;
}

#content [class^="icon-"],
#content [class*=" icon-"],
#content .icon-globe,
#content .icon-question-sign,
#content .icon-info-sign {
    color: var(--bh-muted) !important;
}

#content .button [class^="icon-"],
#content .button [class*=" icon-"],
#content .action-button [class^="icon-"],
#content .action-button [class*=" icon-"] {
    color: var(--bh-text) !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.btn:hover,
a.button:hover,
.action-button:hover {
    filter: brightness(1.05);
    text-decoration: none !important;
}

input[type="reset"],
.button.muted,
.btn.muted,
a.button.muted {
    border-color: rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .07) !important;
    color: var(--bh-text) !important;
}

input[type="reset"] *,
.button.muted *,
.btn.muted *,
a.button.muted * {
    color: var(--bh-text) !important;
}

/* Panels, tables, lists */
.main-content,
.sidebar,
.thread-body,
.thread-entry,
.ticket_info,
.flush-left.customQ,
.tab_content,
.dialog,
.tip_box,
#basic_search,
#ticket_search,
.sticky.bar,
.attached,
.info-banner,
.warning-banner,
.error-banner,
.success-banner,
#msg_notice,
#msg_warning,
#msg_error {
    border-color: var(--bh-line) !important;
    border-radius: var(--bh-radius) !important;
    background: rgba(15, 23, 42, .7) !important;
    color: var(--bh-muted) !important;
}

fieldset,
fieldset.form_table,
table.form_table,
.form_table,
.settings,
.option,
.form-group,
.form-field,
.flush-left,
.flush-right {
    border-color: var(--bh-line) !important;
    background-color: transparent !important;
    color: var(--bh-muted) !important;
}

.thread-body,
.main-content,
.sidebar {
    background: rgba(15, 23, 42, .72) !important;
}

table,
table.list,
table.queue,
table.table,
#ticketTable {
    border-color: var(--bh-line) !important;
    background: rgba(8, 13, 24, .62) !important;
    color: var(--bh-muted) !important;
}

th,
table.list th,
table.queue th,
table.table th,
#ticketTable th {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(6, 11, 20, .9) !important;
    color: var(--bh-text) !important;
}

th a,
th a.asc,
th a.desc,
table.list th a,
table.list th a.asc,
table.list th a.desc,
table.queue th a,
table.queue th a.asc,
table.queue th a.desc,
#ticketTable th a,
#ticketTable th a.asc,
#ticketTable th a.desc {
    border-color: transparent !important;
    background-color: transparent !important;
    color: var(--bh-accent) !important;
}

td,
table.list td,
table.queue td,
table.table td,
#ticketTable td {
    border-color: rgba(255, 255, 255, .1) !important;
    background: rgba(15, 23, 42, .78) !important;
    color: var(--bh-muted) !important;
}

tr:hover td,
table.list tr:hover td,
table.queue tr:hover td,
#ticketTable tr:hover td {
    background: rgba(249, 115, 22, .08) !important;
    color: var(--bh-text) !important;
}

td a,
table.list td a,
table.queue td a,
#ticketTable td a {
    color: var(--bh-accent) !important;
}

hr {
    border-color: var(--bh-line-soft) !important;
}

/* Tabs and jQuery UI */
ul.tabs {
    border-color: var(--bh-line-soft) !important;
    background: transparent !important;
}

ul.tabs li,
ul.tabs li:not(.active),
ul.tabs li.active {
    border-color: var(--bh-line) !important;
    background: rgba(255, 255, 255, .045) !important;
}

ul.tabs li.active {
    background: rgba(249, 115, 22, .12) !important;
}

ul.tabs li a {
    color: var(--bh-muted) !important;
}

ul.tabs li.active a,
ul.tabs li a:hover {
    color: var(--bh-text) !important;
}

.ui-widget-content,
.ui-menu,
.select2-dropdown,
.select2-drop,
.select2-results,
select option,
.redactor-dropdown,
.redactor-context-toolbar,
.redactor-modal,
.redactor-modal-box {
    border-color: var(--bh-line) !important;
    background: rgba(17, 24, 39, .98) !important;
    color: var(--bh-muted) !important;
}

.ui-state-hover,
.ui-state-focus,
.select2-results .select2-highlighted {
    background: rgba(249, 115, 22, .16) !important;
    color: var(--bh-text) !important;
}

/* Rich text editor used in staff/profile forms */
.redactor-box,
.redactor-toolbar,
.redactor-editor,
.redactor-styles,
.redactor-in,
.redactor-layer,
.redactor-source,
.redactor-dropdown a,
.redactor-dropdown li,
.redactor-modal-body,
.redactor-modal-footer,
.redactor-modal-header {
    border-color: var(--bh-line) !important;
    background: rgba(15, 23, 42, .92) !important;
    color: var(--bh-text) !important;
}

.redactor-toolbar {
    border-bottom-color: var(--bh-line) !important;
    box-shadow: none !important;
}

.redactor-toolbar a,
.redactor-toolbar a.re-button,
.redactor-toolbar .re-button,
.redactor-air a,
.redactor-dropdown a {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--bh-muted) !important;
    box-shadow: none !important;
}

.redactor-toolbar a:hover,
.redactor-toolbar a.re-button:hover,
.redactor-toolbar .re-button:hover,
.redactor-air a:hover,
.redactor-dropdown a:hover,
.redactor-dropdown li:hover {
    background: rgba(249, 115, 22, .14) !important;
    color: var(--bh-text) !important;
}

.redactor-toolbar svg,
.redactor-toolbar i,
.redactor-toolbar span {
    color: var(--bh-muted) !important;
    fill: currentColor !important;
}

.redactor-placeholder:empty:before,
.redactor-placeholder:before,
.redactor-placeholder,
.redactor-styles p,
.redactor-styles div,
.redactor-editor p,
.redactor-editor div {
    color: var(--bh-muted) !important;
}

/* Ticket detail, thread, composer, and transient notices */
#ticket_thread,
#ticketThread,
#thread-items,
#response_options,
#response_options form,
#response_options table,
#response_options td,
#response_options th,
.thread-entry,
.thread-entry.message,
.thread-event,
.thread-body,
.attachments,
.filedrop,
.dropzone,
td.-redactor-container {
    border-color: var(--bh-line) !important;
    background-color: rgba(15, 23, 42, .72) !important;
    color: var(--bh-muted) !important;
}

.thread-entry .header,
.thread-entry.message .header,
#thread-items .header {
    border-color: rgba(249, 115, 22, .28) !important;
    background: rgba(6, 11, 20, .92) !important;
    color: var(--bh-text) !important;
}

.thread-entry .header a,
.thread-entry .header span,
.thread-entry .header strong,
.thread-entry .header time {
    color: var(--bh-text) !important;
}

.thread-entry .type-icon,
.thread-event .type-icon,
.thread-event img.avatar,
.thread-entry img.avatar,
img.avatar {
    border-color: var(--bh-line) !important;
    background: rgba(31, 41, 55, .9) !important;
    box-shadow: none !important;
}

.thread-body,
.thread-body p,
.thread-body div,
.thread-event,
.thread-event span,
#response_options label,
#response_options strong,
#response_options td,
#response_options .faded,
#response_options .muted {
    color: var(--bh-muted) !important;
}

#response_options .redactor-box,
#response_options .redactor-toolbar,
#response_options .redactor-styles,
#response_options .redactor-in {
    border-color: rgba(255, 255, 255, .16) !important;
    background: rgba(15, 23, 42, .94) !important;
}

#response_options .redactor-placeholder:before,
#response_options .redactor-placeholder,
#response_options .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bh-faint) !important;
}

.attachments,
.filedrop,
.dropzone,
.dropzone.hover,
.dropzone:hover {
    border-color: rgba(249, 115, 22, .18) !important;
    background: rgba(249, 115, 22, .055) !important;
    color: var(--bh-muted) !important;
}

.attachments a,
.filedrop a,
.dropzone a {
    color: var(--bh-accent) !important;
}

.redactor-statusbar,
.redactor-statusbar div,
.redactor-box .redactor-statusbar,
.redactor-box textarea,
textarea.redactor-source {
    border-color: var(--bh-line) !important;
    background: rgba(6, 11, 20, .9) !important;
    color: var(--bh-muted) !important;
}

#msg_notice,
#msg_warning,
#msg_error,
.msg,
.message_bar,
.alert,
.notice,
.warning,
.error,
.sticky.bar.alert,
.sticky.bar.warning,
.sticky.bar.error,
.sticky.bar.notice {
    border-color: rgba(249, 115, 22, .45) !important;
    background: rgba(17, 24, 39, .97) !important;
    color: var(--bh-text) !important;
}

#msg_notice *,
#msg_warning *,
#msg_error *,
.msg *,
.message_bar *,
.alert *,
.notice *,
.warning *,
.sticky.bar.alert *,
.sticky.bar.warning *,
.sticky.bar.error *,
.sticky.bar.notice * {
    color: var(--bh-text) !important;
}

/* Dashboard chart: leave plotting surface readable, tone container only */
#line-chart-here {
    border-color: var(--bh-line) !important;
    border-radius: var(--bh-radius) !important;
    background: rgba(15, 23, 42, .7) !important;
    filter: none !important;
}

#line-chart-here svg,
#line-chart-here canvas {
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
}

/* Client landing cleanup */
#landing_page #new,
#landing_page #check {
    background-image: none !important;
}

#landing_page #new a,
#landing_page #check a {
    background-image: none !important;
}

/* Client login and ticket status forms */
#clientLogin,
#clientLogin table,
#clientLogin tbody,
#clientLogin tr,
#clientLogin td,
#clientLogin .instructions,
#clientLogin .client-login,
#clientLogin .login-box,
#clientLogin .login-content,
#clientLogin .login,
#clientLogin .right,
#clientLogin .left,
#clientLogin .flush-right,
#clientLogin .flush-left {
    border-color: var(--bh-line) !important;
    background-color: rgba(15, 23, 42, .72) !important;
    background-image: none !important;
    color: var(--bh-muted) !important;
}

#clientLogin {
    border-radius: var(--bh-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
}

#clientLogin label,
#clientLogin p,
#clientLogin div,
#clientLogin td,
#clientLogin span,
#clientLogin strong {
    color: var(--bh-muted) !important;
}

#clientLogin a {
    color: var(--bh-accent) !important;
}

#clientLogin input,
#clientLogin textarea,
#clientLogin select {
    border-color: rgba(255, 255, 255, .16) !important;
    background-color: var(--bh-field) !important;
    color: var(--bh-text) !important;
}

#clientLogin input::placeholder {
    color: var(--bh-faint) !important;
}

#clientLogin img,
#clientLogin .lock,
#clientLogin [class*="lock"],
#clientLogin [style*="lock"] {
    opacity: .62;
    filter: saturate(.9) brightness(.92);
}

/* Staff login: logo is part of the card, no covering overlay */
#loginBody {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(circle at 0 0, rgba(249, 115, 22, .17), transparent 30%),
        radial-gradient(circle at 80% 0, rgba(124, 58, 237, .13), transparent 28%),
        var(--bh-bg) !important;
}

#brickwall,
#background,
#blur {
    display: none !important;
}

#loginBox {
    position: relative !important;
    inset: auto !important;
    width: 400px !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid var(--bh-line) !important;
    border-radius: var(--bh-radius-lg) !important;
    background: rgba(17, 24, 39, .96) !important;
    color: var(--bh-text) !important;
    box-shadow: var(--bh-shadow) !important;
}

#loginBox::after {
    display: none !important;
}

#loginBox h1#logo {
    margin: 0 0 18px !important;
}

#loginBox h1#logo a {
    height: 64px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#loginBox h1#logo a::before {
    width: 190px !important;
    height: 58px !important;
}

#login-message,
#loginBox .banner,
#company {
    color: var(--bh-muted) !important;
}

#loginBox input {
    width: 100% !important;
}

#loginBox fieldset {
    border: 0 !important;
    padding: 0 !important;
}

/* Prevent dark-on-dark leftovers */
#content .faded b,
#content .faded strong,
label,
legend,
.required,
.error {
    color: var(--bh-muted) !important;
}

.error,
.error a {
    color: #fb7185 !important;
}

table.form_table th,
table.form_table caption,
.form_table th,
.form_table caption,
.section-break,
.section-break h3 {
    border-color: var(--bh-line) !important;
    background: rgba(6, 11, 20, .86) !important;
    color: var(--bh-text) !important;
}

@media (max-width: 900px) {
    body {
        overflow-x: hidden;
    }

    #container,
    #footer {
        width: calc(100% - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #header {
        height: auto !important;
    }

    #header #logo::before {
        width: 160px;
        height: 48px;
    }

    #content {
        overflow-x: auto;
    }

    #landing_page .sidebar,
    #landing_page .main-content {
        float: none !important;
        clear: both !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #landing_page .sidebar {
        margin-bottom: 14px !important;
    }

    #landing_page .main-content h1,
    #landing_page .main-content p {
        width: auto !important;
        max-width: 100% !important;
    }

    #nav {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        height: auto !important;
    }

    #nav li {
        float: none !important;
    }

    #nav a {
        white-space: normal !important;
    }

    #loginBox {
        width: min(400px, 100%) !important;
    }
}