/* CodeSOS branding for the osTicket customer portal (help.codesos.co.uk).
   Injected by nginx (sub_filter) - no osTicket files are edited.
   Written against osTicket 1.18.4's assets/default/css/theme.css and
   css/thread.css; selectors below match or beat theirs on specificity.
   Palette from codesos.co.uk/styles.css. Text on orange uses the dark
   orange (#A5552F, 5.3:1 with white); #C7663C is decoration only (3.9:1).
   Rule of thumb: an orange button always has white text. */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/montserrat-latin-wght-normal.woff2') format('woff2');
}

:root {
    --cs-font: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --cs-orange: #C7663C;
    --cs-orange-light: #E0855E;
    --cs-orange-dark: #A5552F;
    --cs-orange-darker: #8A4626;
    --cs-text: #333333;
    --cs-text-light: #666666;
    --cs-bg: #F8F9FA;
    --cs-border: #E3E3E3;
    --cs-radius: 8px;
}

/* ---- Page ---- */

/* theme.css sets Helvetica on body/input/select/textarea, thread.css on
   .thread-body (which wraps the landing page text and ticket messages) */
body,
input,
select,
textarea,
button,
.thread-body,
.thread-body h1,
.thread-body h2,
.thread-body h3,
.thread-body h4,
.thread-body h5,
.thread-body h6,
.thread-body .h6 {
    font-family: var(--cs-font);
}

body {
    color: var(--cs-text);
    background: var(--cs-bg);
}

#container {
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    margin-top: 24px;
    margin-bottom: 24px;
}

h1, h2, h3 {
    color: var(--cs-text);
    font-weight: 700;
}

/* theme.css draws a blue dotted border under every link on hover */
a:hover,
.link:hover {
    border-bottom: 0;
    margin-bottom: 1px;
}

/* ---- Header ---- */

#header {
    height: 80px;
    border-bottom: 3px solid var(--cs-orange);
}

#header #logo img {
    max-height: 56px;
    border-radius: var(--cs-radius);
}

#header p,
#header p a {
    font-weight: 600;
}

#header p a {
    color: var(--cs-orange-dark);
}

/* ---- Top navigation ----
   osTicket's PNG tab icons are replaced with line icons (Lucide, ISC
   licence) drawn as masks, so they take the link colour. The active tab
   is marked by an orange underline under the words only. */

#nav {
    height: auto;
    padding: 10px 10px 12px;
    background: #fff;
    border-top: 0;
    border-bottom: 1px solid var(--cs-border);
    box-shadow: none;
}

#nav li a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: auto;
    padding: 0 6px;
    margin-left: 14px;
    color: var(--cs-text);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0;
    background-color: transparent;
    background-image: none !important;
}

#nav li a::before {
    content: "";
    flex: none;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: var(--cs-icon) no-repeat center / contain;
    mask: var(--cs-icon) no-repeat center / contain;
}

#nav li a.active,
#nav li a:hover {
    color: var(--cs-orange-dark);
    background-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--cs-orange);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

#nav li a:focus:not(:focus-visible) {
    outline: none;
}

#nav li a.home {
    --cs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

#nav li a.new {
    --cs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
}

#nav li a.status {
    --cs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

#nav li a.kb {
    --cs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

#nav li a.tickets {
    --cs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}

/* ---- Links (not buttons) ---- */

#content a:not(.button),
#footer a {
    color: var(--cs-orange-dark);
}

#content a:not(.button):hover,
#footer a:hover {
    color: var(--cs-orange-darker);
}

/* ---- Buttons ----
   theme.css colours .button / .blue.button / .green.button with two-class
   rules, and #clientLogin / #ticketForm restyle their inputs with ID rules,
   so each case is restated here. osTicket's own JS sometimes sets an inline
   text colour on submit buttons, hence !important on the colour. Blue
   ("Open a New Ticket") is primary; green ("Check Ticket Status", KB
   search) is secondary. */

.button,
.button:visited,
.blue.button,
.blue.button:visited,
.btn,
input[type="submit"],
button[type="submit"]:not(.green),
#clientLogin div input[type="submit"],
#ticketForm div input[type="submit"] {
    background: var(--cs-orange-dark);
    border: 1px solid var(--cs-orange-dark);
    border-radius: var(--cs-radius);
    box-shadow: none;
    color: #fff !important;
    font-family: var(--cs-font);
    font-weight: 600;
    text-shadow: none;
    padding: 8px 18px;
    cursor: pointer;
}

.button:hover,
.blue.button:hover,
.btn:hover,
input[type="submit"]:hover,
button[type="submit"]:not(.green):hover,
#clientLogin div input[type="submit"]:hover,
#ticketForm div input[type="submit"]:hover {
    background: var(--cs-orange-darker);
    border-color: var(--cs-orange-darker);
    color: #fff !important;
}

#clientLogin div input[type="submit"],
#ticketForm div input[type="submit"] {
    display: inline-block;
    width: auto;
}

.green.button,
.green.button:visited,
input[type="reset"],
input[type="button"],
#ticketForm div input[type="reset"],
#ticketForm div input[type="button"] {
    background: #fff;
    border: 1px solid var(--cs-orange-dark);
    border-radius: var(--cs-radius);
    box-shadow: none;
    color: var(--cs-orange-dark) !important;
    font-family: var(--cs-font);
    font-weight: 600;
    text-shadow: none;
    padding: 8px 18px;
    cursor: pointer;
}

.green.button:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    background: var(--cs-bg);
    color: var(--cs-orange-darker) !important;
}

/* ---- Form fields ---- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
    border: 1px solid #ccc;
    border-radius: 6px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cs-orange);
    outline: 2px solid var(--cs-orange-light);
    outline-offset: 1px;
}

/* ---- Landing page ---- */

.front-page-button .button {
    text-align: center;
    padding: 12px 18px;
}

/* "Sign in with your work Microsoft account" link added in Admin ->
   Manage -> Pages. Matched by href so the editor can't break it by
   stripping a class. thread.css forces link colour with !important. */
#content a[href*="bk=oauth2.user"]:not(.external-sign-in) {
    display: inline-block;
    background: linear-gradient(135deg, var(--cs-orange-dark) 0%, var(--cs-orange) 100%);
    color: #fff !important;
    border-radius: var(--cs-radius);
    padding: 14px 28px;
    font-size: 1.1em;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

#content a[href*="bk=oauth2.user"]:not(.external-sign-in):hover,
#content a[href*="bk=oauth2.user"]:not(.external-sign-in):focus {
    background: var(--cs-orange-darker);
    color: #fff !important;
}

/* ---- Login page ----
   Entra first and prominent, password form second. login.inc.php wraps
   both columns in a div with an inline display:table-row. */

#clientLogin {
    background: #fff;
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

#clientLogin > div[style*="table-row"] {
    display: flex !important;
    flex-direction: column-reverse;
    gap: 8px;
}

#clientLogin > div[style*="table-row"] > div {
    display: block !important;
    width: auto !important;
}

.external-auth::before {
    content: "Sign in with your work Microsoft account";
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--cs-text);
}

/* Markup: a.external-sign-in > div.external-auth-box >
   span.external-auth-icon (Font Awesome icon) + span.external-auth-name */
.external-auth a.external-sign-in {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    padding: 14px 18px;
    background: var(--cs-orange-dark);
    border: 0;
    border-radius: var(--cs-radius);
    color: #fff !important;
    text-decoration: none;
}

.external-auth a.external-sign-in:hover {
    background: var(--cs-orange-darker);
}

.external-auth a.external-sign-in .external-auth-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: none;
}

.external-auth a.external-sign-in .external-auth-icon,
.external-auth a.external-sign-in .external-auth-name,
.external-auth a.external-sign-in i {
    display: inline;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #fff !important;
    line-height: normal;
    font-size: 1.05rem;
    font-weight: 700;
}

#clientLogin .login-box::before {
    content: "Or sign in with an email address and password";
    display: block;
    color: var(--cs-text-light);
    font-size: 0.9em;
    margin-bottom: 8px;
}

/* ---- Footer ---- */

#footer {
    color: var(--cs-text-light);
}

/* "Helpdesk software - powered by osTicket" */
#footer #poweredBy {
    display: none;
}