/*
 * Cloud29 Helpdesk - client portal theme
 * =====================================================================
 * Layers Cloud29 brand tokens over osTicket's stock "default" theme.
 *
 * The stock theme is imported rather than forked so upstream fixes still
 * reach us on upgrade. Relative url() references inside the imported file
 * resolve against ITS location (assets/default/), so the stock icon and
 * background images keep working untouched.
 *
 * Palette is the official Cloud29 design system - the same token values
 * used by c29reporting and the sanctions tool, which carry a WCAG AA
 * contrast audit. Do not introduce hex literals outside the :root block.
 */

@import url("../../default/css/theme.css");

:root {
    /* --- Official Cloud29 swatches ------------------------------------ */
    --c29-blue: #165c7d;        /* Pantone 7700 C */
    --c29-white: #ffffff;
    --c29-grey: #444444;
    --c29-mid-blue: #5e859d;    /* Pantone 5415 C */
    --c29-light-blue: #9fc3d1;  /* Pantone 551 C */
    --c29-orange: #e54600;      /* critical */
    --c29-orange-text: #b03400; /* AA-safe text derivation */
    --c29-lime: #c2cc00;        /* needs attention */
    --c29-lime-text: #626800;
    --c29-teal: #00baac;        /* healthy / resolved */
    --c29-teal-text: #00706a;

    /* --- Surfaces ----------------------------------------------------- */
    --surface-page: #f5f7f8;
    --surface-card: #ffffff;
    --surface-nav: #092a3a;
    --surface-tint: #e8eef1;

    /* --- Text --------------------------------------------------------- */
    --text-primary: #444444;
    --text-secondary: #5e859d;
    --text-secondary-strong: #4a6c82;

    --border-hairline: #9fc3d1;
    --focus-ring: #165c7d;

    /* --- Type --------------------------------------------------------- */
    --font-display: "Century Gothic", "Jost", "Questrial", sans-serif;
    --font-body: "Calibri", "Carlito", "Segoe UI", system-ui, sans-serif;

    --radius: 6px;
    --shell-width: 1080px;
}

/* ---------------------------------------------------------------------
 * Page shell
 * The stock theme paints a repeating gradient PNG and pins the shell to a
 * fixed 840px. Both are replaced with a flat, responsive layout.
 * ------------------------------------------------------------------- */
body {
    background: var(--surface-page);
    font-family: var(--font-body);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.55;
}

body,
input,
select,
textarea {
    font-family: var(--font-body);
    color: var(--text-primary);
}

#container {
    background: var(--surface-card);
    width: 100%;
    max-width: var(--shell-width);
    margin: 24px auto 40px;
    box-shadow: 0 1px 2px rgba(9, 42, 58, 0.06),
                0 8px 24px rgba(9, 42, 58, 0.08);
    border-radius: var(--radius);
    overflow: hidden;
}

@media (max-width: 1120px) {
    #container {
        margin: 0 auto 24px;
        border-radius: 0;
    }
}

/* ---------------------------------------------------------------------
 * Header + logo
 * ------------------------------------------------------------------- */
#header {
    position: relative;
    height: auto;
    min-height: 72px;
    padding: 18px 28px 14px;
    background: var(--surface-card);
    border-top: 4px solid var(--c29-blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

#header #logo img,
#logo img {
    max-height: 44px;
    width: auto;
    display: block;
}

#logo {
    height: auto;
    /* The stock markup emits the account/sign-in block before the logo.
       Reorder visually so the brand mark leads the header. */
    order: -1;
}

/* Signed-in-as / language strip on the right of the header. */
#header p {
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--text-secondary-strong);
    font-size: 13px;
    text-align: right;
}

#header a {
    color: var(--c29-blue);
}

/* ---------------------------------------------------------------------
 * Primary navigation
 * Kept on a light surface deliberately: osTicket's nav icons are dark
 * raster PNGs and would disappear against a dark blue bar.
 * ------------------------------------------------------------------- */
#nav {
    margin: 0;
    padding: 0 20px;
    height: auto;
    background: var(--surface-tint);
    border-top: 1px solid var(--border-hairline);
    border-bottom: 1px solid var(--border-hairline);
    box-shadow: none;
    white-space: nowrap;
    overflow-x: auto;
}

#nav li a {
    height: auto;
    line-height: 1.2;
    padding: 12px 14px 12px 34px;
    margin-left: 4px;
    color: var(--text-secondary-strong);
    border-radius: 0;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    font-size: 14px;
    transition: background-color .12s ease, color .12s ease,
                border-color .12s ease;
}

#nav li a:hover {
    background-color: rgba(22, 92, 125, 0.08);
    color: var(--c29-blue);
}

#nav li a.active {
    background-color: var(--surface-card);
    color: var(--c29-blue);
    border-bottom-color: var(--c29-blue);
}

/* ---------------------------------------------------------------------
 * Content + footer
 * ------------------------------------------------------------------- */
#content {
    padding: 28px;
}

#footer {
    background: var(--surface-tint);
    border-top: 1px solid var(--border-hairline);
    color: var(--text-secondary-strong);
    font-size: 12px;
    padding: 16px 28px;
    text-align: center;
}

#footer a {
    color: var(--c29-blue);
}

/* ---------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------- */
h1, h2, h3, .subject {
    font-family: var(--font-display);
    color: var(--c29-blue);
    font-weight: 600;
}

h1 { font-size: 28px; }
h2, .subject { font-size: 22px; }
h3 { font-size: 18px; }

a, .link {
    color: var(--c29-blue);
    text-decoration: none;
}

a:hover, .link:hover {
    color: var(--text-secondary-strong);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Buttons
 * Stock osTicket ships lime green (#91bd09) primaries; remap to brand.
 * ------------------------------------------------------------------- */
.button,
.button:visited,
.green.button,
.green.button:visited,
.blue.button,
.blue.button:visited,
input[type="submit"],
input[type="button"] {
    background: var(--c29-blue);
    background-color: var(--c29-blue);
    border: 1px solid var(--c29-blue);
    color: var(--c29-white);
    border-radius: var(--radius);
    box-shadow: none;
    text-shadow: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    padding: 8px 18px;
    cursor: pointer;
    transition: background-color .12s ease;
}

.button:hover,
.green.button:hover,
.blue.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #11485f;   /* c29-blue, shade for hover only */
    border-color: #11485f;
    color: var(--c29-white);
}

.button:active {
    top: 0;
    box-shadow: none;
}

/* Visible keyboard focus - the stock theme has none. */
a:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Form controls
 * ------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    padding: 8px 10px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: 15px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: var(--c29-blue);
}

fieldset {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    padding: 16px;
}

label { color: var(--text-primary); }

/* ---------------------------------------------------------------------
 * Tables
 * ------------------------------------------------------------------- */
table th,
th {
    background: var(--surface-tint);
    color: var(--text-secondary-strong);
    font-family: var(--font-body);
    font-weight: 700;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-hairline);
}

table td,
td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(159, 195, 209, 0.4);
}

/* ---------------------------------------------------------------------
 * Status banners - remapped to the Cloud29 status tokens.
 * The stock rules carry an icon PNG in the background shorthand, so each
 * override restates background-image to keep the icon.
 * ------------------------------------------------------------------- */
#msg_notice {
    height: auto;
    border: 1px solid var(--c29-teal);
    border-left: 4px solid var(--c29-teal);
    border-radius: var(--radius);
    background-color: rgba(0, 186, 172, 0.10);
    color: var(--c29-teal-text);
    padding: 10px 12px 10px 36px;
}

#msg_warning,
.warning-banner {
    height: auto;
    border: 1px solid var(--c29-lime);
    border-left: 4px solid var(--c29-lime);
    border-radius: var(--radius);
    background-color: rgba(194, 204, 0, 0.12);
    color: var(--c29-lime-text);
    padding: 10px 12px 10px 36px;
}

#msg_error,
.error {
    height: auto;
    border: 1px solid var(--c29-orange);
    border-left: 4px solid var(--c29-orange);
    border-radius: var(--radius);
    background-color: rgba(229, 70, 0, 0.10);
    color: var(--c29-orange-text);
    padding: 10px 12px 10px 36px;
}

#msg_info {
    border: 1px solid var(--border-hairline);
    border-left: 4px solid var(--c29-blue);
    border-radius: var(--radius);
    background-color: rgba(22, 92, 125, 0.08);
    color: var(--text-secondary-strong);
    padding: 10px 12px;
}

/* ---------------------------------------------------------------------
 * CMS page content (landing page, FAQs, thank-you pages)
 *
 * osTicket renders these inside .thread-body, and css/thread.css is linked
 * AFTER the theme in the client header - so plain element selectors here
 * lose. These rules are scoped to out-specify it rather than reaching for
 * !important.
 * ------------------------------------------------------------------- */
#content .thread-body,
.thread-body {
    font-family: var(--font-body);
    font-size: 15px !important;
    line-height: 1.6;
    color: var(--text-primary);
    padding: 0;
}

#content .thread-body h1,
#content .thread-body h2,
#content .thread-body h3,
.thread-body h1,
.thread-body h2,
.thread-body h3 {
    font-family: var(--font-display);
    color: var(--c29-blue);
    font-weight: 600;
}

#content .thread-body a,
.thread-body a {
    color: var(--c29-blue);
}

/* ---------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------- */
#pagination li a {
    color: var(--c29-blue);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
}

#pagination li a:hover,
#pagination .active {
    background: var(--c29-blue);
    color: var(--c29-white);
    border-color: var(--c29-blue);
}