/*
 * refurbed UI polish
 *
 * A deliberately small presentation layer on top of osTicket Awesome.
 * It keeps osTicket's layout and interaction patterns intact while aligning
 * hierarchy, controls and status indicators with refurbed's visual language.
 */

:root {
    --rfbd-indigo: #332e80;
    --rfbd-indigo-hover: #282366;
    --rfbd-teal: #036659;
    --rfbd-green: #80ff80;
    --rfbd-pale-green: #f1ffde;
    --rfbd-ink: #24213f;
    --rfbd-muted: #696678;
    --rfbd-page: #f7f7f9;
    --rfbd-surface: #ffffff;
    --rfbd-border: #dedce7;
    --rfbd-border-strong: #c9c6d7;
    --rfbd-indigo-tint: rgba(51, 46, 128, .08);
    --rfbd-teal-tint: rgba(3, 102, 89, .08);
    --rfbd-focus: rgba(51, 46, 128, .22);
    --rfbd-radius-sm: 7px;
    --rfbd-radius: 11px;
}

/* Agent sign-in keeps the familiar backdrop but makes the authentication
 * card and fallback form easier to read. */
#loginBody {
    background: var(--rfbd-teal) !important;
    color: var(--rfbd-ink);
    font-family: "Readex Pro", "Inter", "Open Sans", Arial, sans-serif;
}

#loginBody #brickwall {
    background-color: var(--rfbd-teal);
    background-position: center;
}

#loginBody #brickwall::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(3, 102, 89, .48);
}

#loginBody #loginBox {
    top: 50%;
    left: 50%;
    width: min(420px, calc(100vw - 32px));
    margin: 0;
    padding: 32px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--rfbd-border);
    border-radius: var(--rfbd-radius);
    background: var(--rfbd-surface);
    box-shadow: none;
}

#loginBody #loginBox::after {
    border: 0;
    border-radius: var(--rfbd-radius);
    background: var(--rfbd-surface);
}

#loginBody #blur {
    display: none;
}

#loginBody #login-title {
    margin: -32px -32px 24px;
    padding: 26px 32px;
    border-radius: var(--rfbd-radius) var(--rfbd-radius) 0 0;
    background: var(--rfbd-indigo);
}

#loginBody #login-title #header-title,
#loginBody #login-title a {
    color: #fff;
}

#loginBody #login-title #header-image img,
#loginBody #login-title #header-default svg {
    max-width: 210px;
    max-height: 54px;
}

#loginBody #loginBox h3 {
    margin: 0 0 12px;
    color: var(--rfbd-ink);
    font: 750 22px/1.3 "Youth Black", "Inter", Montserrat, Arial, sans-serif;
}

#loginBody #loginBox .banner {
    color: var(--rfbd-muted);
    font-size: 13px;
    line-height: 1.5;
}

#loginBody #sso-login-section .rfbd-sso-button {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
}

#loginBody form,
#loginBody fieldset {
    width: 100%;
}

#loginBody fieldset input {
    width: 100% !important;
    height: 42px;
    box-sizing: border-box;
    margin-bottom: 10px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--rfbd-border-strong) !important;
    border-radius: var(--rfbd-radius-sm) !important;
    background: #fff;
    color: var(--rfbd-ink);
    letter-spacing: normal;
}

#loginBody fieldset input::placeholder {
    color: var(--rfbd-muted);
}

#loginBody form#login button {
    width: 100%;
    height: 42px;
    margin: 12px auto !important;
    border: 1px solid var(--rfbd-indigo);
    border-radius: var(--rfbd-radius-sm);
    background: var(--rfbd-indigo);
    color: #fff;
    box-shadow: none;
}

#loginBody form#login button:hover {
    background: var(--rfbd-indigo-hover);
}

#loginBody #poweredBy,
#loginBody #company {
    display: none;
}

@media (max-height: 680px) {
    #loginBody #loginBox {
        top: 16px;
        transform: translateX(-50%);
    }
}

/* Shared foundations ----------------------------------------------------- */

.staff-side,
.client-side {
    color: var(--rfbd-ink);
    font-family: "Readex Pro", "Inter", "Open Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.staff-side h1,
.staff-side h2,
.staff-side h3,
.client-side h1,
.client-side h2,
.client-side h3,
.staff-side #header-title,
.client-side #header-title {
    color: var(--rfbd-ink);
    font-family: "Youth Black", "Inter", Montserrat, Arial, sans-serif;
    letter-spacing: -.015em;
}

.staff-side a,
.client-side a {
    color: var(--rfbd-indigo);
}

.staff-side a:focus-visible,
.client-side a:focus-visible,
.staff-side button:focus-visible,
.client-side button:focus-visible,
.staff-side input:focus-visible,
.client-side input:focus-visible,
.staff-side textarea:focus-visible,
.client-side textarea:focus-visible,
.staff-side select:focus-visible,
.client-side select:focus-visible {
    outline: 3px solid var(--rfbd-focus) !important;
    outline-offset: 2px;
}

/* Staff application — light mode only ----------------------------------- */

.staff-side:not(.dark-mode) {
    background: var(--rfbd-page);
}

.staff-side:not(.dark-mode) #header {
    border-bottom: 0;
    background: var(--rfbd-indigo);
}

.staff-side:not(.dark-mode) #content {
    max-width: 1280px;
    padding-right: 24px;
    padding-left: 24px;
}

.staff-side:not(.dark-mode) #sub_nav {
    border-bottom-color: var(--rfbd-border);
}

.staff-side:not(.dark-mode) #sub_nav a:hover,
.staff-side:not(.dark-mode) #sub_nav li.active > a {
    color: var(--rfbd-indigo);
}

.staff-side:not(.dark-mode) .action-button,
.staff-side:not(.dark-mode) button,
.staff-side:not(.dark-mode) input[type="button"],
.staff-side:not(.dark-mode) input[type="submit"] {
    border-radius: var(--rfbd-radius-sm) !important;
}

.staff-side:not(.dark-mode) button.primary,
.staff-side:not(.dark-mode) input[type="submit"].primary,
.staff-side:not(.dark-mode) .action-button.primary,
.staff-side:not(.dark-mode) .button.green,
.staff-side:not(.dark-mode) .button[type="submit"] {
    border-color: var(--rfbd-indigo) !important;
    background-color: var(--rfbd-indigo) !important;
    background-image: none !important;
    color: #fff !important;
    text-shadow: none !important;
}

.staff-side:not(.dark-mode) button.primary:hover,
.staff-side:not(.dark-mode) input[type="submit"].primary:hover,
.staff-side:not(.dark-mode) .action-button.primary:hover,
.staff-side:not(.dark-mode) .button.green:hover,
.staff-side:not(.dark-mode) .button[type="submit"]:hover {
    border-color: var(--rfbd-indigo-hover) !important;
    background-color: var(--rfbd-indigo-hover) !important;
}

.staff-side:not(.dark-mode) input[type="text"],
.staff-side:not(.dark-mode) input[type="email"],
.staff-side:not(.dark-mode) input[type="password"],
.staff-side:not(.dark-mode) input[type="search"],
.staff-side:not(.dark-mode) input[type="datetime-local"],
.staff-side:not(.dark-mode) textarea,
.staff-side:not(.dark-mode) select,
.staff-side:not(.dark-mode) .select2-container .select2-choice {
    box-sizing: border-box;
    border-color: var(--rfbd-border-strong) !important;
    border-radius: var(--rfbd-radius-sm) !important;
    background-color: var(--rfbd-surface);
}

.staff-side:not(.dark-mode) input:focus,
.staff-side:not(.dark-mode) textarea:focus,
.staff-side:not(.dark-mode) select:focus,
.staff-side:not(.dark-mode) .select2-container-active .select2-choice {
    border-color: var(--rfbd-indigo) !important;
    box-shadow: 0 0 0 3px var(--rfbd-focus) !important;
}

.staff-side:not(.dark-mode) ul.tabs {
    border-bottom-color: var(--rfbd-border);
}

.staff-side:not(.dark-mode) ul.tabs li a {
    border-radius: var(--rfbd-radius-sm) var(--rfbd-radius-sm) 0 0;
}

.staff-side:not(.dark-mode) ul.tabs li.active a,
.staff-side:not(.dark-mode) ul.tabs li a:hover {
    border-color: var(--rfbd-border);
    border-bottom-color: var(--rfbd-surface);
    color: var(--rfbd-indigo);
    background: var(--rfbd-surface);
}

/* Ticket queues ---------------------------------------------------------- */

.staff-side:not(.dark-mode) table.list.queue.tickets {
    overflow: hidden;
    border: 1px solid var(--rfbd-border);
    border-radius: var(--rfbd-radius);
    background: var(--rfbd-surface);
}

.staff-side:not(.dark-mode) table.list.queue.tickets thead th {
    height: 42px;
    border-bottom: 1px solid var(--rfbd-border) !important;
    background: #fbfafc;
    color: var(--rfbd-muted);
}

.staff-side:not(.dark-mode) table.list.queue.tickets thead th a {
    box-sizing: border-box;
    height: 42px;
    padding-top: 10px;
    color: var(--rfbd-indigo);
    font-size: 12px;
    font-weight: 650;
    text-shadow: none;
}

.staff-side:not(.dark-mode) table.list.queue.tickets thead th a:hover,
.staff-side:not(.dark-mode) table.list.queue.tickets thead th a.asc,
.staff-side:not(.dark-mode) table.list.queue.tickets thead th a.desc,
.staff-side:not(.dark-mode) form[action="tickets.php"] table.list thead th:first-child:hover {
    background-color: var(--rfbd-indigo-tint);
    box-shadow: none;
}

.staff-side:not(.dark-mode) table.list.queue.tickets tbody td {
    border-bottom: 1px solid #eeedf2 !important;
    color: var(--rfbd-muted);
    font-size: 12px;
}

.staff-side:not(.dark-mode) table.list.queue.tickets tbody tr:last-child td {
    border-bottom: 0 !important;
}

.staff-side:not(.dark-mode) table.list.queue.tickets tbody tr:hover td:not(.osta_priority),
.staff-side:not(.dark-mode) table.list.queue.tickets tbody tr.highlight td:not(.osta_priority) {
    border-top-color: transparent !important;
    border-bottom-color: #dfeecb !important;
    background: var(--rfbd-pale-green);
}

.staff-side:not(.dark-mode) table.list.queue.tickets a,
.staff-side:not(.dark-mode) table.list.queue.tickets .truncate a {
    color: var(--rfbd-ink);
}

.staff-side:not(.dark-mode) table.list.queue.tickets .truncate a:hover {
    color: var(--rfbd-indigo);
}

/* Ticket number as a legible, quiet tag. */
.staff-side:not(.dark-mode) table.list.queue.tickets .ticket-num {
    display: inline-flex;
    align-items: center;
}

.staff-side:not(.dark-mode) table.list.queue.tickets a.preview {
    min-width: 58px;
    box-sizing: border-box;
    padding: 3px 7px;
    border: 1px solid rgba(51, 46, 128, .24);
    border-radius: 999px;
    background: var(--rfbd-indigo-tint);
    color: var(--rfbd-indigo) !important;
    font-size: 11px;
    font-weight: 650;
    line-height: 16px;
    text-align: center;
}

/* Keep priority scannable without the legacy patterned rainbow stripe. */
.staff-side:not(.dark-mode) table.list.queue.tickets td.osta_priority {
    width: 6px !important;
    min-width: 6px;
    border: 0 !important;
    border-bottom: 1px solid #fff !important;
    background-image: none !important;
}

.staff-side:not(.dark-mode) table.list.queue.tickets td.osta_priority_emergency {
    background-color: var(--rfbd-indigo) !important;
}

.staff-side:not(.dark-mode) table.list.queue.tickets td.osta_priority_high {
    background-color: rgba(51, 46, 128, .68) !important;
}

.staff-side:not(.dark-mode) table.list.queue.tickets td.osta_priority_normal {
    background-color: var(--rfbd-teal) !important;
}

.staff-side:not(.dark-mode) table.list.queue.tickets td.osta_priority_low {
    background-color: #b8b6c2 !important;
}

/* Status glyphs share one compact visual language. */
.staff-side:not(.dark-mode) table.list.queue.tickets #new-reply-icon {
    display: inline-flex;
    width: 18px;
    height: 22px;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.staff-side:not(.dark-mode) table.list.queue.tickets .dot {
    width: 9px;
    height: 9px;
    border: 2px solid var(--rfbd-teal);
    border-radius: 50%;
    background: var(--rfbd-green);
    animation: none;
}

.staff-side:not(.dark-mode) table.list.queue.tickets .osta_ticket .icon-code-fork,
.staff-side:not(.dark-mode) table.list.queue.tickets .osta_ticket .icon-code-link,
.staff-side:not(.dark-mode) table.list.queue.tickets .api-ep-sched-list-icon {
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 5px;
    border: 1px solid rgba(51, 46, 128, .18);
    border-radius: 50%;
    background: var(--rfbd-indigo-tint);
    color: var(--rfbd-indigo);
    vertical-align: middle;
}

.staff-side:not(.dark-mode) table.list.queue.tickets .osta-ticket-merged .icon-code-fork,
.staff-side:not(.dark-mode) table.list.queue.tickets .osta-ticket-linked .icon-code-link,
.staff-side:not(.dark-mode) table.list.queue.tickets .api-ep-sched-list-icon {
    display: inline-flex;
}

.staff-side:not(.dark-mode) table.list.queue.tickets .osta_ticket .icon-code-fork::before,
.staff-side:not(.dark-mode) table.list.queue.tickets .osta_ticket .icon-code-link::before,
.staff-side:not(.dark-mode) table.list.queue.tickets .api-ep-sched-list-icon .icon-time::before {
    position: static !important;
    color: var(--rfbd-indigo);
    font-size: 12px;
}

.staff-side:not(.dark-mode) table.list.queue.tickets .label,
.staff-side:not(.dark-mode) table.list.queue.tickets .label-bare {
    margin: 1px 3px 1px 0;
    padding: 3px 8px;
    border: 1px solid rgba(3, 102, 89, .22);
    border-radius: 999px;
    background: var(--rfbd-teal-tint);
    color: var(--rfbd-teal);
    font-size: 11px;
    font-weight: 650;
    line-height: 15px;
    text-shadow: none;
}

.staff-side:not(.dark-mode) table.list.queue.tickets .label-danger {
    border-color: rgba(51, 46, 128, .28);
    background: var(--rfbd-indigo-tint);
    color: var(--rfbd-indigo);
}

.staff-side:not(.dark-mode) table.list.queue.tickets .checkbox label::before,
.staff-side:not(.dark-mode) table.list.queue.tickets .checkbox input[type="checkbox"]:checked + label::after {
    border-color: var(--rfbd-border-strong);
    border-radius: 4px;
}

.staff-side:not(.dark-mode) table.list.queue.tickets .checkbox input[type="checkbox"]:checked + label::after {
    border-color: var(--rfbd-indigo);
    background-color: var(--rfbd-surface);
    box-shadow: inset 0 0 0 1px var(--rfbd-indigo);
}

/* Ticket detail and response composer ----------------------------------- */

.staff-side:not(.dark-mode) table.ticket_info,
.staff-side:not(.dark-mode) table.ticket_info table,
.staff-side:not(.dark-mode) #response_options > form,
.staff-side:not(.dark-mode) .redactor-box {
    border-color: var(--rfbd-border) !important;
    border-radius: var(--rfbd-radius) !important;
    background: var(--rfbd-surface);
}

.staff-side:not(.dark-mode) .thread-entry {
    margin-bottom: 14px;
    border: 1px solid var(--rfbd-border);
    border-radius: var(--rfbd-radius);
    background: var(--rfbd-surface);
}

.staff-side:not(.dark-mode) .thread-entry .header {
    border-radius: var(--rfbd-radius) var(--rfbd-radius) 0 0;
    border-bottom: 1px solid var(--rfbd-border);
    background: #f7f7f9;
    color: var(--rfbd-ink);
}

.staff-side:not(.dark-mode) .thread-entry.message .header {
    border-left: 4px solid var(--rfbd-teal);
    background: var(--rfbd-pale-green);
}

.staff-side:not(.dark-mode) .thread-entry.response .header {
    border-left: 4px solid var(--rfbd-indigo);
    background: var(--rfbd-indigo-tint);
}

.staff-side:not(.dark-mode) .thread-entry.note .header {
    border-left: 4px solid var(--rfbd-border-strong);
}

.staff-side:not(.dark-mode) .thread-entry .thread-body {
    padding: 18px 20px;
    color: var(--rfbd-ink);
    font-size: 14px;
    line-height: 1.55;
}

.staff-side:not(.dark-mode) .thread-entry .label-bare {
    padding: 3px 8px;
    border-color: rgba(51, 46, 128, .22);
    border-radius: 999px;
    color: var(--rfbd-indigo);
}

.staff-side:not(.dark-mode) .redactor-toolbar {
    border-color: var(--rfbd-border);
    border-radius: var(--rfbd-radius) var(--rfbd-radius) 0 0;
    background: #fbfafc;
}

/* Client portal --------------------------------------------------------- */

.client-side {
    background: var(--rfbd-page);
    font-size: 16px;
}

.client-side #content {
    max-width: 1120px;
    box-sizing: border-box;
    margin-top: 28px;
    margin-bottom: 28px;
    padding-right: 40px;
    padding-left: 40px;
    border: 1px solid var(--rfbd-border);
    border-radius: var(--rfbd-radius);
    box-shadow: none;
}

.client-side #content h1 {
    color: var(--rfbd-ink);
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.15;
}

.client-side #landing_page {
    width: 100%;
    box-sizing: border-box;
    padding-top: 16px;
}

.client-side #landing_page h1 {
    margin-right: 0;
    margin-left: 0;
}

.client-side #open-or-check {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin-bottom: 34px;
}

.client-side #open-or-check .client-choice {
    width: auto;
    min-height: 0;
    box-sizing: border-box;
    float: none;
    margin: 0;
    padding: 28px;
    border: 1px solid var(--rfbd-border);
    border-radius: var(--rfbd-radius);
    background: var(--rfbd-surface);
    box-shadow: none;
}

.client-side #open-or-check #open-new {
    border-color: rgba(51, 46, 128, .24);
    background: var(--rfbd-indigo-tint);
}

.client-side #open-or-check #check-status {
    border-color: rgba(3, 102, 89, .22);
    background: var(--rfbd-pale-green);
}

.client-side #open-title {
    color: var(--rfbd-ink);
    font-family: "Youth Black", "Inter", Montserrat, Arial, sans-serif;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.01em;
}

.client-side #open-text {
    min-height: 62px;
    color: var(--rfbd-muted);
    font-size: 14px;
    line-height: 1.55;
}

.client-side #sign-in-button,
.client-side input[type="submit"],
.client-side button[type="submit"] {
    box-sizing: border-box;
    border: 1px solid var(--rfbd-indigo) !important;
    border-radius: var(--rfbd-radius-sm) !important;
    background: var(--rfbd-indigo) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.client-side #sign-in-button:hover,
.client-side input[type="submit"]:hover,
.client-side button[type="submit"]:hover {
    border-color: var(--rfbd-indigo-hover) !important;
    background: var(--rfbd-indigo-hover) !important;
}

.client-side #check-status #sign-in-button {
    border-color: var(--rfbd-teal) !important;
    background: var(--rfbd-teal) !important;
}

.client-side input[type="text"],
.client-side input[type="email"],
.client-side input[type="password"],
.client-side textarea,
.client-side select {
    box-sizing: border-box;
    border-color: var(--rfbd-border-strong) !important;
    border-radius: var(--rfbd-radius-sm) !important;
}

.client-side input:focus,
.client-side textarea:focus,
.client-side select:focus {
    border-color: var(--rfbd-indigo) !important;
    box-shadow: 0 0 0 3px var(--rfbd-focus) !important;
}

@media (max-width: 760px) {
    .staff-side:not(.dark-mode) #content,
    .client-side #content {
        padding-right: 16px;
        padding-left: 16px;
    }

    .client-side #content {
        width: calc(100% - 20px);
        margin: 10px;
        border-radius: var(--rfbd-radius-sm);
    }

    .client-side #open-or-check {
        display: block;
    }

    .client-side #open-or-check .client-choice {
        margin-bottom: 14px;
        padding: 22px;
    }

    .staff-side:not(.dark-mode) table.list.queue.tickets {
        border-radius: var(--rfbd-radius-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .staff-side *,
    .client-side * {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}