/*
 * Cloud29 Helpdesk - agent login page
 * =====================================================================
 * Loaded last from include/staff/login.header.php.
 *
 * Replaces osTicket's stock photographic backdrop with a flat Cloud29
 * gradient. The backdrop element is also served by scp/logo.php?backdrop,
 * so background-image is explicitly cleared rather than merely covered.
 */

:root {
    --c29-blue: #165c7d;
    --c29-blue-shade: #11485f;
    --c29-deep: #092a3a;
    --c29-white: #ffffff;
    --c29-light-blue: #9fc3d1;
    --c29-orange-text: #b03400;
    --surface-card: #ffffff;
    --text-primary: #444444;
    --text-secondary-strong: #4a6c82;
    --border-hairline: #9fc3d1;
    --font-display: "Century Gothic", "Jost", "Questrial", sans-serif;
    --font-body: "Calibri", "Carlito", "Segoe UI", system-ui, sans-serif;
    --radius: 8px;
}

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--c29-deep);
}

/* Kill the stock headquarters photo and its blur/compat layers.
 * In osTicket 1.18 the backdrop element is #brickwall (login.css also
 * defines #background / #background-compat for older markup paths, so
 * all three are cleared).
 * !important is required here: login.css sets background-image in a
 * shorthand on the same element and is free to reload after this file. */
#brickwall,
#background,
#background-compat {
    background-image: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    background: linear-gradient(160deg,
                var(--c29-deep) 0%,
                var(--c29-blue) 55%,
                #1d7ba6 100%) !important;
    opacity: 1 !important;
}

/* Login card.
 * The stock card gets its surface from a translucent ::after at z-index -1
 * plus a heavy 50px black shadow. Both are replaced so the card reads as a
 * clean panel on the brand gradient rather than frosted glass. */
#loginBox,
.login-box {
    background: var(--surface-card);
    border: 1px solid rgba(159, 195, 209, 0.6);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    padding: 1.6em 1.6em 1.4em;
}

#loginBox:after {
    background-color: var(--surface-card);
    border: none;
}

#logo,
h1#logo {
    text-align: center;
    padding: 8px 0 4px;
}

#logo img {
    max-width: 240px;
    height: auto;
}

/* Form controls */
#loginBox input[type="text"],
#loginBox input[type="password"],
input[type="text"],
input[type="password"] {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 15px;
    font-family: var(--font-body);
    color: var(--text-primary);
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: var(--c29-blue);
    outline: 3px solid rgba(22, 92, 125, 0.35);
    outline-offset: 1px;
}

/* The Log In control is <button class="submit button">, and login.css
   pins its height/line-height, so those are restated here. */
#loginBox button[type="submit"],
#loginBox button.button,
#loginBox input[type="submit"],
button[type="submit"],
input[type="submit"],
.button {
    background: var(--c29-blue) !important;
    background-image: none !important;
    border: 1px solid var(--c29-blue);
    color: var(--c29-white) !important;
    border-radius: var(--radius);
    box-shadow: none;
    text-shadow: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    height: auto;
    line-height: 1.3;
    padding: 10px 22px;
    cursor: pointer;
    float: none;
}

#loginBox button[type="submit"]:hover,
#loginBox button.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover {
    background: var(--c29-blue-shade) !important;
    border-color: var(--c29-blue-shade);
}

/* Centre the action row rather than the stock pull-right. */
#loginBox .pull-right {
    float: none;
}

/* "Authentication Required" / error text */
.error,
#login-error,
.login-error {
    color: var(--c29-orange-text);
    font-weight: 600;
}

/* Copyright strip under the card */
#copyRights,
.copyright {
    color: var(--c29-light-blue);
    background: transparent;
    text-shadow: none;
    font-size: 12px;
}

/* Stock "Powered by osTicket" badge, bottom-right. Left in place for
   GPL attribution but toned down so it does not compete with the brand. */
.osticket-logo,
#poweredBy {
    opacity: 0.45;
}