@font-face {
    font-family: 'Zpix';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/SolidZORO/zpix-pixel-font@v3.1.11/website/zpix.woff2') format('woff2');
}

/* ══ Global ══ */
body, input, select, textarea {
    font-family: 'Zpix', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
    color: #2c2c2c;
}
body {
    background: #f6f5f3 !important;
    line-height: 1.8;
    letter-spacing: 0.03em;
}
::selection { color: #fff; background: #3d5a80; }
a { color: #3d5a80; transition: color 0.2s; }
a:hover { color: #2c2c2c; }
hr { border-color: #d8d5d0 !important; }

/* ══ Container ══ */
#container {
    background: #fff !important;
    max-width: 920px;
    width: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    border-radius: 4px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* ══ Header ══ */
#header {
    background: #fff !important;
    border-bottom: 2px solid #d8d5d0;
    height: auto;
    padding: 1.2rem 24px 0.8rem;
}
#header #logo img {
    max-height: 48px;
}
#header .pull-right {
    margin-top: 0.3rem;
}
#header .pull-right p {
    font-size: 0.75rem;
    color: #555;
    line-height: 2;
    margin: 0;
    padding: 0;
}
#header .pull-right a {
    color: #3d5a80;
    text-decoration: none;
    font-size: 0.78rem;
    transition: color 0.2s;
}
#header .pull-right a:hover {
    color: #2c2c2c;
    text-decoration: underline;
    text-decoration-color: #d8d5d0;
    text-underline-offset: 3px;
}

/* ══ Flags / language ══ */
.flag {
    border: 1px solid #d8d5d0 !important;
    border-radius: 1px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.flag:hover { opacity: 1; }

/* ══ Navigation ══ */
#nav {
    background: #fafaf8 !important;
    border-top: none !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    margin: 0 24px;
    padding: 0.4rem 0.5rem;
    height: auto;
    border-bottom: 1px solid #e8e6e2;
    border-radius: 0;
}
#nav li { margin: 0; }
#nav li a {
    font-family: 'Zpix', sans-serif !important;
    font-size: 0.78rem;
    color: #555;
    border-radius: 2px;
    padding: 0.25rem 0.7rem 0.25rem 1.8rem;
    height: auto;
    line-height: 1.8;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    background-size: 13px;
    margin-left: 4px;
}
#nav li a.active {
    background-color: rgba(61,90,128,0.1) !important;
    color: #3d5a80 !important;
    font-weight: 700;
}
#nav li a:hover {
    background-color: rgba(61,90,128,0.06) !important;
    color: #3d5a80 !important;
}

/* ══ Content ══ */
#content {
    padding: 1.5rem 0;
    margin: 0 24px;
    font-size: 0.85rem;
    line-height: 2;
}
#content h1 {
    font-family: 'Zpix', sans-serif !important;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c2c2c;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
#content h2 {
    font-family: 'Zpix', sans-serif !important;
    font-size: 0.92rem;
    font-weight: 700;
    color: #3d5a80;
    letter-spacing: 0.05em;
}
#content h2 a { color: #3d5a80; text-decoration: none; }
#content h2 a:hover { text-decoration: underline; text-decoration-color: #d8d5d0; }
#content h3 {
    font-family: 'Zpix', sans-serif !important;
    font-size: 0.88rem;
    font-weight: 700;
    color: #2c2c2c;
}
#content p {
    font-size: 0.85rem;
    color: #555;
    line-height: 2;
}

/* ══ ALL Buttons ══ */
.button,
.button:visited,
.green.button,
.green.button:visited,
.blue.button,
.blue.button:visited {
    font-family: 'Zpix', sans-serif !important;
    background: #3d5a80 !important;
    background-color: #3d5a80 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 2px !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    padding: 0.45rem 1.2rem !important;
    font-size: 0.82rem !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.2s;
    text-shadow: none !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-decoration: none !important;
    display: inline-block;
    line-height: 1.8;
}
.button:hover,
.green.button:hover,
.blue.button:hover {
    background: #2e4a6e !important;
    background-color: #2e4a6e !important;
    color: #fff !important;
    opacity: 0.9;
}
.button:active {
    top: 0 !important;
    box-shadow: none !important;
}

input[type="submit"],
input[type="button"],
input.btn {
    font-family: 'Zpix', sans-serif !important;
    background: #3d5a80 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
    padding: 0.45rem 1.2rem !important;
    font-size: 0.82rem !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.2s;
    text-shadow: none !important;
    box-shadow: none !important;
    line-height: 1.8;
}
input[type="submit"]:hover,
input[type="button"]:hover,
input.btn:hover {
    background: #2e4a6e !important;
    opacity: 0.9;
}

input[type="reset"],
.cancel {
    background: #e8e6e2 !important;
    color: #555 !important;
}
input[type="reset"]:hover,
.cancel:hover {
    background: #d8d5d0 !important;
    color: #2c2c2c !important;
}

/* Action buttons (print, edit etc) */
.action-button {
    font-family: 'Zpix', sans-serif !important;
    background: #f6f5f3 !important;
    background-image: none !important;
    border: 1px solid #d8d5d0 !important;
    border-radius: 2px !important;
    color: #555 !important;
    font-size: 0.72rem !important;
    padding: 0.2rem 0.6rem !important;
    line-height: 1.8;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.action-button:hover {
    border-color: #3d5a80 !important;
    color: #3d5a80 !important;
    background: #fff !important;
}
.action-button span,
.action-button a {
    color: inherit !important;
    text-decoration: none !important;
}

/* ══ Forms ══ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
    font-family: 'Zpix', sans-serif !important;
    border: 1px solid #d8d5d0 !important;
    border-radius: 2px !important;
    padding: 0.4rem 0.6rem !important;
    background: #fff !important;
    font-size: 0.82rem !important;
    color: #2c2c2c !important;
    transition: border-color 0.2s;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: #3d5a80 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(61,90,128,0.1) !important;
}

/* Placeholder */
::placeholder { color: #999; font-size: 0.78rem; }
::-webkit-input-placeholder { color: #999; font-size: 0.78rem; }

/* ══ Login box ══ */
.login-box {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-right: 1px solid #e8e6e2;
    padding: 20px !important;
    width: 45%;
}
.login-box strong { color: #8b1a1a; font-size: 0.82rem; }

/* ══ Landing page ══ */
#landing_page h1 {
    font-size: 1rem;
    color: #2c2c2c;
}
#landing_page h3 {
    font-size: 0.88rem;
    color: #3d5a80;
}
#landing_page #new_ticket,
#landing_page #check_status {
    padding-left: 60px;
    background-size: 40px;
}
.main-content {
    width: 100%;
    max-width: 580px;
}

/* ══ Sidebar ══ */
.sidebar {
    margin-left: 24px;
    width: 220px;
}
.sidebar .content {
    padding: 0.8rem;
    border: 1px solid #e8e6e2 !important;
    background: #fafaf8 !important;
    border-radius: 3px;
}
.sidebar section .header {
    background: none !important;
    color: #3d5a80 !important;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e8e6e2;
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
}

/* ══ Tables / Ticket list ══ */
table { font-size: 0.85rem; }
table th {
    background: #fafaf8 !important;
    color: #3d5a80 !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #d8d5d0 !important;
    padding: 0.5rem 0.6rem;
}
table td {
    border-bottom: 1px solid #e8e6e2;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    line-height: 1.8;
}
table tr:hover td {
    background: rgba(61,90,128,0.02);
}
table.padded tr > td,
table.padded tr > th {
    padding-bottom: 0.4rem;
}

/* Required fields */
.required { font-size: 0.78rem; }

/* ══ Pagination ══ */
#pagination li a {
    color: #3d5a80;
    border: 1px solid #d8d5d0;
    border-radius: 2px;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    margin-right: 3px;
    text-decoration: none;
    transition: background 0.2s;
}
#pagination li a:hover {
    background: rgba(61,90,128,0.08);
    color: #3d5a80;
}
#pagination .active {
    background: #3d5a80;
    color: #fff;
    border: 1px solid #3d5a80;
    border-radius: 2px;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

/* ══ Search ══ */
.searchbar .search,
.search-form .search {
    border: 1px solid #d8d5d0 !important;
    border-radius: 2px !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.82rem !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
}
.searchbar .search:focus,
.search-form .search:focus {
    border-color: #3d5a80 !important;
    box-shadow: 0 0 0 2px rgba(61,90,128,0.1) !important;
}

/* ══ External auth ══ */
.external-auth-box {
    border: 1px solid #d8d5d0 !important;
    border-radius: 2px !important;
    transition: border-color 0.2s;
}
.external-auth-box:hover {
    border-color: #3d5a80 !important;
}
.external-auth-icon {
    color: #3d5a80;
    border-right: 1px solid #e8e6e2 !important;
}
.external-auth-name {
    color: #2c2c2c;
    font-size: 0.82rem;
}

/* ══ Notification bars ══ */
.notice_bar {
    background: #e8f5e8 url(none) !important;
    border-color: #4caf50 !important;
    border-radius: 2px;
    font-size: 0.82rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem !important;
}
.warning_bar {
    background: #fff8e8 url(none) !important;
    border-color: #ff9800 !important;
    border-radius: 2px;
    font-size: 0.82rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem !important;
}
.error_bar {
    background: #ffeef0 url(none) !important;
    border-color: #8b1a1a !important;
    border-radius: 2px;
    font-size: 0.82rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem !important;
}
#msg_notice {
    background: rgba(61,90,128,0.06);
    border: 1px solid rgba(61,90,128,0.3);
    border-radius: 2px;
    padding: 0.6rem 1rem;
    color: #3d5a80;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}
#msg_warning {
    background: #fff8e8;
    border: 1px solid #ff9800;
    border-radius: 2px;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}
#msg_error {
    background: #ffeef0;
    border: 1px solid #8b1a1a;
    border-radius: 2px;
    padding: 0.6rem 1rem;
    color: #8b1a1a;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

/* ══ Ticket thread ══ */
.thread-entry .header {
    font-size: 0.82rem;
    border-radius: 3px 3px 0 0;
}
.thread-entry.message .header {
    background: rgba(61,90,128,0.1) !important;
    border: 1px solid rgba(61,90,128,0.2);
}
.thread-entry.avatar.message .header:before { border-right-color: rgba(61,90,128,0.2) !important; }
.thread-entry.avatar.message .header:after { border-right-color: rgba(61,90,128,0.1) !important; }
.thread-entry.response .header {
    background: #f0efed !important;
    border: 1px solid #e8e6e2;
}
.thread-entry.avatar.response .header:after { border-left-color: #f0efed !important; }
.thread-body {
    font-size: 0.85rem;
    line-height: 1.9;
    border-color: #e8e6e2 !important;
    border-bottom: 2px solid #d8d5d0 !important;
}
.thread-body .attachments {
    background-color: #fafaf8 !important;
    border-top-color: #e8e6e2 !important;
}
.thread-event { font-size: 0.78rem; color: #555; }
.type-icon {
    background-color: #fafaf8 !important;
    border: 1px solid #e8e6e2 !important;
}
#ticketThread::before {
    border-left-color: #e8e6e2 !important;
}

/* ══ Labels / tags ══ */
.label {
    font-family: 'Zpix', sans-serif !important;
    font-size: 0.68rem !important;
    border-radius: 2px !important;
    padding: 0.1rem 0.4rem;
    text-shadow: none !important;
}
.label-bare {
    border-color: #d8d5d0 !important;
    color: #555 !important;
}

/* ══ FAQ ══ */
#faq ol { border-top-color: #e8e6e2; }
#faq ol li a {
    border-bottom-color: #e8e6e2;
    font-size: 0.85rem;
    color: #3d5a80;
    transition: background 0.2s;
}
#faq ol li a:hover {
    background-color: rgba(61,90,128,0.04) !important;
}

/* ══ File drop ══ */
.filedrop { border: 2px dashed #d8d5d0 !important; border-radius: 3px; }
.filedrop:hover,
.filedrop.dragover { border-color: #3d5a80 !important; background: rgba(61,90,128,0.03) !important; }

/* ══ Section breaks ══ */
div.section-break { border-top-color: #e8e6e2 !important; }

/* ══ Faded text ══ */
.faded { color: #999 !important; }

/* ══ Footer ══ */
#footer {
    background: #fafaf8 !important;
    border-top: 1px solid #e8e6e2;
    padding: 0.8rem 24px;
    text-align: center;
    font-size: 0.72rem;
    color: #999;
}
#footer a { color: #999; font-size: 0.72rem; }
#footer a:hover { color: #555; }
#footer p { margin: 0; font-size: 0.72rem; color: #999; }
#footer #poweredBy {
    background: none !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 0.65rem;
    color: #bbb;
    margin-top: 0.3rem;
}

/* ══ Redactor (rich text editor) ══ */
.redactor-box { border: 1px solid #d8d5d0 !important; border-radius: 2px !important; }
.redactor-toolbar {
    background: #fafaf8 !important;
    border-bottom: 1px solid #e8e6e2 !important;
}
.redactor-toolbar li a {
    color: #555 !important;
    font-size: 0.82rem;
}
.redactor-toolbar li a:hover,
.redactor-toolbar li a.redactor-act {
    color: #3d5a80 !important;
    background: rgba(61,90,128,0.06) !important;
}

/* ══ jQuery UI overrides ══ */
.ui-widget { font-family: 'Zpix', sans-serif !important; }
.ui-dialog { border: 1px solid #d8d5d0 !important; border-radius: 3px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }
.ui-dialog .ui-dialog-titlebar { background: #fafaf8 !important; border-bottom: 1px solid #e8e6e2 !important; border-radius: 3px 3px 0 0; padding: 0.6rem 1rem !important; }
.ui-dialog .ui-dialog-title { font-size: 0.88rem; font-weight: 700; color: #2c2c2c; }
.ui-dialog .ui-dialog-content { font-size: 0.85rem; padding: 1rem !important; }
.ui-dialog .ui-dialog-buttonpane { border-top: 1px solid #e8e6e2 !important; background: #fafaf8 !important; padding: 0.5rem 1rem !important; }

/* ══ Mobile responsive ══ */
@media (max-width: 860px) {
    #container { width: 100% !important; margin: 0 !important; border-radius: 0 !important; }
    #header { padding: 1rem 16px 0.6rem; }
    #header #logo img { max-height: 36px; }
    #nav { margin: 0 16px; padding: 0.3rem 0.3rem; }
    #nav li a { font-size: 0.72rem; padding: 0.2rem 0.5rem 0.2rem 1.5rem; margin-left: 2px; background-size: 11px; }
    #content { margin: 0 16px; padding: 1rem 0; }
    .login-box { width: 100% !important; display: block !important; border-right: none !important; border-bottom: 1px solid #e8e6e2; padding: 15px 0 !important; }
    .sidebar { width: 100% !important; margin-left: 0 !important; margin-top: 1rem; }
    .main-content { width: 100% !important; }
    #footer { padding: 0.6rem 16px; }
    table { font-size: 0.78rem; }
}