/* ============================================================================
   Alliant Games — EspoCRM 10.0.3 login makeover + Discord button
   Install path on server: client/custom/css/discord-login.css

   IMPORTANT: this stylesheet is injected on every page, so every rule below is
   scoped to the login page only — either with `body:has(#login)` (the whole
   page) or `#login` (the card). It will NOT affect the CRM once logged in.

   Brand palette (edit here):
     --ag-blue:   #2563EB
     --ag-purple: #7C3AED
     --ag-cyan:   #22D3EE
     --discord:   #5865F2   (hover #4752C4)
   ============================================================================ */

body:has(#login) {
    --ag-blue: #2563EB;
    --ag-purple: #7C3AED;
    --ag-cyan: #22D3EE;
    --discord: #5865F2;
    --discord-hover: #4752C4;

    min-height: 100vh;
    margin: 0;
    background-color: #0b1020;
    background-image:
        radial-gradient(circle at 18% 20%, rgba(124, 58, 237, 0.28), transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(34, 211, 238, 0.22), transparent 45%),
        linear-gradient(135deg, #0b1020 0%, #141b39 55%, #1b1442 100%);
    background-attachment: fixed;
}

/* Vertical + horizontal centering of the card.
   The outer .container.content becomes the full-viewport flex centerer; the
   inner .container-centering is neutralized so the card doesn't sit low. */
body:has(#login) .container.content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

body:has(#login) .container-centering {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* -------- The login card -------- */
#login.panel,
#login.panel.block-center-sm {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    float: none !important;
    background: #ffffff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Brand accent bar across the top of the card */
#login.panel::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--ag-blue), var(--ag-purple) 55%, var(--ag-cyan));
}

/* -------- Header / logo --------
   The theme lays .logo-container out as a flexbox, which left-aligns the logo
   and hides the tagline. Force it back to a centered block. */
#login .panel-heading {
    border-bottom: none;
    padding: 44px 44px 20px !important;
    background: transparent;
    text-align: center;
    height: auto !important;
    overflow: visible !important;
}

#login .logo-container {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: normal !important;
    text-align: center !important;
}

#login .logo-container .logo {
    display: inline-block !important;
    float: none !important;
    margin: 0 auto !important;
    max-height: 110px !important;
    max-width: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Tagline under the logo. Delete this block if you don't want it. */
#login .logo-container::after {
    content: "Player & Partner Portal";
    display: block;
    width: 100%;
    margin-top: 16px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a93a7;
    text-align: center;
}

/* -------- Body -------- */
#login .panel-body {
    padding: 20px 40px 40px !important;
}

/* -------- Discord sign-in button -------- */
#login #sign-in {
    width: 100%;
    background-color: var(--discord);
    border-color: var(--discord);
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    padding: 11px 18px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

#login #sign-in:hover,
#login #sign-in:focus {
    background-color: var(--discord-hover);
    border-color: var(--discord-hover);
    color: #ffffff;
}

#login #sign-in:active {
    transform: translateY(1px);
}

/* Discord logo, inlined so there is no extra network request */
#login #sign-in::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20127.14%2096.36%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M107.7%208.07A105.15%20105.15%200%200%200%2081.47%200a72.06%2072.06%200%200%200-3.36%206.83%2097.68%2097.68%200%200%200-29.11%200A72.37%2072.37%200%200%200%2045.64%200a105.89%20105.89%200%200%200-26.25%208.09C2.79%2032.65-1.71%2056.6.54%2080.21a105.73%20105.73%200%200%200%2032.17%2016.15%2077.7%2077.7%200%200%200%206.89-11.11%2068.42%2068.42%200%200%201-10.85-5.18c.91-.66%201.8-1.34%202.66-2a75.57%2075.57%200%200%200%2064.32%200c.87.71%201.76%201.39%202.66%202a68.68%2068.68%200%200%201-10.87%205.19%2077%2077%200%200%200%206.89%2011.1%20105.25%20105.25%200%200%200%2032.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45%2065.69C36.18%2065.69%2031%2060%2031%2053s5-12.74%2011.43-12.74S54%2046%2053.89%2053s-5.05%2012.69-11.44%2012.69Zm42.24%200C78.41%2065.69%2073.25%2060%2073.25%2053s5-12.74%2011.44-12.74S96.23%2046%2096.12%2053s-5.04%2012.69-11.43%2012.69Z%22%2F%3E%3C%2Fsvg%3E");
}

/* -------- Fallback username/password (shown via the chevron) -------- */
#login .control-label,
#login label {
    color: #3b4256;
    font-weight: 600;
}

#login .form-control {
    border-radius: 8px;
    border: 1px solid #d6dae4;
    box-shadow: none;
    padding: 10px 12px;
    height: auto;
}

#login .form-control:focus {
    border-color: var(--ag-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Primary (username/password) login button, if the fallback form is used */
#login #btn-login {
    background: linear-gradient(135deg, var(--ag-blue), var(--ag-purple));
    border: none;
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 18px;
}

#login #btn-login:hover,
#login #btn-login:focus {
    filter: brightness(1.05);
}

/* Links (forgot password, show fallback) */
#login a.btn-link {
    color: var(--ag-blue);
}

#login a.btn-link:hover {
    color: var(--ag-purple);
}

/* -------- Footer --------
   The theme gives the footer a large left padding (space for the CRM side nav),
   which pushes the credit line off-center on the login page. Reset it to a
   full-width, symmetrically-padded, centered element. */
body:has(#login) > footer {
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    text-align: center !important;
}

body:has(#login) > footer .credit,
body:has(#login) > footer p {
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body:has(#login) > footer .credit,
body:has(#login) > footer a {
    color: rgba(255, 255, 255, 0.6);
}

body:has(#login) > footer a:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* -------- Small screens -------- */
@media (max-width: 480px) {
    #login.panel {
        max-width: 100%;
    }
    #login .panel-heading {
        padding: 24px 20px 4px;
    }
    #login .panel-body {
        padding: 16px 20px 24px;
    }
}