@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

body:has(#loginContent) {
    margin: 0;
    min-height: 100%;
    background: #060807 !important;
    font-family: 'IBM Plex Mono', monospace !important;
}

/*
 * Full Rite Systems background
 */
main.view[ui-view="login"] {
    min-height: 100vh !important;
    height: auto !important;

    background:
        linear-gradient(
            rgba(4, 7, 6, 0.24),
            rgba(4, 7, 6, 0.48)
        ),
        url('/SOGo.woa/WebServerResources/rite/rite_background_clean.png')
        center center / cover fixed no-repeat !important;

    font-family: 'IBM Plex Mono', monospace !important;
}

/*
 * Center the login box.
 * SOGo normally stretches #loginContent over most of the page.
 */
main.view[ui-view="login"] > md-content {
    width: 100% !important;
    min-height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    padding: 90px 20px 90px !important;

    background: transparent !important;
    overflow: auto !important;
}

/*
 * Compact login card
 */
#loginContent {
    flex: 0 0 auto !important;

    display: block !important;

    width: 430px !important;
    max-width: calc(100vw - 32px) !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 auto !important;

    background: rgba(7, 10, 9, 0.88) !important;

    border: 1px solid rgba(51, 255, 153, 0.30) !important;
    border-radius: 12px !important;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(51, 255, 153, 0.05) !important;

    overflow: hidden !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/*
 * Do not use SOGo's separate 50% logo panel.
 * The terminal heading above is our branding.
 */
#loginContent .sg-logo {
    display: none !important;
}

/*
 * Make the login section occupy the complete card
 */
#loginContent .sg-login {
    flex: none !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    background: transparent !important;
    color: #e0e0e0 !important;

    font-family: 'IBM Plex Mono', monospace !important;
}

#loginContent .sg-login-content {
    padding: 34px 38px 30px !important;
}

#loginContent form {
    width: 100% !important;
}

/*
 * Form typography
 */
#loginContent,
#loginContent input,
#loginContent md-select,
#loginContent md-button,
#loginContent md-switch {
    font-family: 'IBM Plex Mono', monospace !important;
}

/*
 * Input labels
 */
#loginContent md-input-container label {
    color: #aaa !important;
}

#loginContent md-input-container.md-input-focused label {
    color: #33ff99 !important;
}

/*
 * Inputs
 */
#loginContent md-input-container input {
    color: #eee !important;
    caret-color: #33ff99 !important;

    border-color: rgba(255, 255, 255, 0.30) !important;
}

#loginContent md-input-container.md-input-focused .md-input {
    border-color: #33ff99 !important;
}

/*
 * Icons
 */
#loginContent md-icon {
    color: #aaa !important;
}

#loginContent md-input-container.md-input-focused md-icon {
    color: #33ff99 !important;
}

/*
 * Language selector
 */
#loginContent md-select .md-select-value {
    color: #eee !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
}

#loginContent md-select:not([disabled]):focus .md-select-value {
    border-color: #33ff99 !important;
}

/*
 * Language popup
 */
body:has(#loginContent) .md-select-menu-container md-content {
    background: #0b100e !important;
}

body:has(#loginContent) .md-select-menu-container md-option {
    color: #ddd !important;
    font-family: 'IBM Plex Mono', monospace !important;
}

body:has(#loginContent) .md-select-menu-container md-option:hover,
body:has(#loginContent) .md-select-menu-container md-option[selected] {
    color: #33ff99 !important;
    background: rgba(51, 255, 153, 0.10) !important;
}

/*
 * Login button
 */
#loginContent .md-button.md-fab.md-accent {
    background: #33ff99 !important;
    color: #08110d !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(51, 255, 153, 0.18) !important;
}

#loginContent .md-button.md-fab.md-accent:hover {
    background: #5cffad !important;
}

#loginContent .md-button.md-fab.md-accent md-icon {
    color: #07110c !important;
}

/*
 * About button
 */
#loginContent .md-icon-button md-icon {
    color: #aaa !important;
}

#loginContent .md-icon-button:hover md-icon {
    color: #33ff99 !important;
}

/*
 * Remember username
 */
#loginContent md-switch {
    color: #ddd !important;
}

#loginContent md-switch.md-checked .md-thumb {
    background-color: #33ff99 !important;
}

#loginContent md-switch.md-checked .md-bar {
    background-color: rgba(51, 255, 153, 0.45) !important;
}

/*
 * Links
 */
#loginContent a {
    color: #aaa !important;
}

#loginContent a:hover {
    color: #33ff99 !important;
}

/*
 * SOGo authentication-state overlay
 */
#loginContent sg-ripple {
    background: rgba(7, 10, 9, 0.97) !important;
}

#loginContent sg-ripple-content {
    color: #e0e0e0 !important;
}

/*
 * Rite Systems terminal heading
 */
.rite-terminal-brand {
    position: fixed;

    top: 24px;
    left: 0;
    right: 0;

    z-index: 9999;

    text-align: center;

    color: #33ff99;

    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.2rem;

    letter-spacing: 0.01em;

    pointer-events: none;
}

.rite-terminal-brand::after {
    content: 'Secure Webmail';

    display: block;

    margin-top: 6px;

    color: #aaa;

    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.rite-terminal-cursor {
    display: inline-block;
    animation: rite-blink 3s infinite step-start;
}

@keyframes rite-blink {
    50% {
        opacity: 0;
    }
}

/*
 * Footer based on rite.ro
 */
.rite-login-footer {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 9999;

    box-sizing: border-box;

    padding: 12px 16px;

    text-align: center;

    color: #aaa;
    background: rgba(10, 10, 10, 0.48);

    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.rite-login-footer strong {
    color: #ddd;
}

.rite-login-footer a {
    color: #aaa;
}

.rite-login-footer a:hover {
    color: #33ff99;
}

/*
 * Mobile
 */
@media (max-width: 600px) {
    main.view[ui-view="login"] > md-content {
        padding: 78px 16px 85px !important;
    }

    #loginContent {
        width: 100% !important;
        max-width: 430px !important;
    }

    #loginContent .sg-login-content {
        padding: 28px 24px 24px !important;
    }

    .rite-terminal-brand {
        top: 18px;
        font-size: 1rem;
    }

    .rite-terminal-brand::after {
        font-size: 0.62rem;
    }

    .rite-login-footer {
        font-size: 9px;
        padding: 9px 8px;
    }
}

/*
 * Authentication / successful-login transition
 */
#loginContent:has(sg-ripple-content:not(.ng-hide)) {
    width: 430px !important;
    max-width: calc(100vw - 32px) !important;

    min-height: 170px !important;
    height: 170px !important;

    border-radius: 12px !important;
}

/* Hide the normal login padding while a status screen is active */
#loginContent:has(sg-ripple-content:not(.ng-hide)) .sg-login-content {
    padding: 0 !important;

    min-height: 170px !important;
    height: 170px !important;
}

/* SOGo ripple/status layer */
#loginContent sg-ripple-content:not(.ng-hide) {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 170px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 24px !important;

    color: #e0e0e0 !important;
    background: rgba(7, 10, 9, 0.96) !important;

    overflow: hidden !important;
}

/* Individual Authenticating / Welcome / Error states */
#loginContent sg-ripple-content:not(.ng-hide) > div {
    width: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}

/* Success / warning / error icon */
#loginContent sg-ripple-content:not(.ng-hide) .sg-icon--large {
    margin: 0 0 8px 0 !important;

    font-size: 42px !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;

    color: #33ff99 !important;
}

/* Welcome / Authenticating text */
#loginContent sg-ripple-content:not(.ng-hide) .md-padding {
    padding: 6px 12px !important;

    color: #e5e5e5 !important;

    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;

    text-align: center !important;
}

/* Spinner */
#loginContent sg-ripple-content:not(.ng-hide) md-progress-circular {
    margin-bottom: 10px !important;
}

/* Don't let SOGo's ripple background distort the card */
#loginContent sg-ripple {
    border-radius: 12px !important;
    overflow: hidden !important;
}