/*
 * SPDX-FileCopyrightText: Copyright 2026 grommunio GmbH
 * SPDX-License-Identifier: Apache-2.0
 *
 * grommunio look of the web interface: login dialog, logos and primary
 * colour. The --brand-* properties of /brand/brand.css replace any value.
 */

/* Logos */
.gl-logo {
    display: block;
    background-image: var(--brand-logo, url("../img/grommunio-logo.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.navbar-brand .gl-logo {
    width: 156px;
    height: 50px;
}
#preloader .gl-logo {
    width: 260px;
    max-width: 80%;
    height: 60px;
}
:root[data-bs-theme="dark"] .navbar-brand .gl-logo,
:root[data-bs-theme="dark"] #preloader .gl-logo {
    background-image: var(--brand-logo-dark, url("../img/grommunio-logo-dark.svg"));
}

/* Primary colour of the application */
.btn-primary {
    --bs-btn-color: var(--brand-on-primary, #fff);
    --bs-btn-bg: var(--brand-primary, #0d6efd);
    --bs-btn-border-color: var(--brand-primary, #0d6efd);
    --bs-btn-hover-color: var(--brand-on-primary, #fff);
    --bs-btn-hover-bg: var(--brand-primary-hover, #0b5ed7);
    --bs-btn-hover-border-color: var(--brand-primary-hover, #0a58ca);
    --bs-btn-active-color: var(--brand-on-primary, #fff);
    --bs-btn-active-bg: var(--brand-primary-hover, #0a58ca);
    --bs-btn-active-border-color: var(--brand-primary-hover, #0a53be);
    --bs-btn-disabled-color: var(--brand-on-primary, #fff);
    --bs-btn-disabled-bg: var(--brand-primary, #0d6efd);
    --bs-btn-disabled-border-color: var(--brand-primary, #0d6efd);
}
.map-link {
    color: var(--brand-accent, #0088cc);
}
.map-link:hover,
.map-link:focus {
    color: var(--brand-primary-hover, #005580);
}

/* Login dialog: palette */
#connectDialog {
    --gl-gradient-start: var(--brand-gradient-start, #009FFD);
    --gl-gradient-end: var(--brand-gradient-end, #2a2a72);
    --gl-primary: var(--brand-primary, #009FFD);
    --gl-on-primary: var(--brand-on-primary, #ffffff);
    --gl-surface: var(--brand-surface, #ffffff);
    --gl-text: var(--brand-text, #1d2939);
    --gl-muted: var(--brand-muted, #667085);
    --gl-field: var(--brand-field, #eef0f3);
    --gl-field-hover: var(--brand-field-hover, #e6e9ee);
    --gl-error: var(--brand-error, #b42318);
    --gl-error-bg: var(--brand-error-bg, #fef3f2);
    --gl-error-border: var(--brand-error-border, #fecdca);
    --gl-radius: var(--brand-radius, 20px);
    --gl-radius-sm: var(--brand-radius-sm, 10px);
    --gl-font: var(--brand-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    --gl-logo-width: var(--brand-logo-width, 220px);
    --gl-logo-height: var(--brand-logo-height, 52px);
    --gl-logo-filter: none;
    --gl-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.25 5.61C6.27 8.2 10 13 10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-6s3.72-4.8 5.74-7.39c.51-.66.04-1.61-.79-1.61H5.04c-.83 0-1.3.95-.79 1.61z'/%3E%3C/svg%3E");
    --bs-modal-width: 400px;
    --bs-modal-margin: 0;
    --bs-modal-padding: 0;
    --bs-modal-bg: var(--gl-surface);
    --bs-modal-color: var(--gl-text);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--gl-radius);
}

/* Layers, top to bottom: pattern overlay, optional image, highlight, gradient */
#connectDialog.modal {
    font-family: var(--gl-font);
    background-color: var(--gl-gradient-start);
    background-image:
        var(--brand-bg-overlay, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iLjA3Ij48cGF0aCBkPSJNMCAyNjUuMTZzMi41Ny0yLjkzIDIxLjYxIDE1LjkzbDM2NC44NCAzNjEuNTcgMzY0Ljg0IDM2MS41N2MzMC43MSAzMC40MyAyOC4zOCA3NS43NCAyOC4zOCA3NS43NEgwVjI2NS4xNloiLz48cGF0aCBkPSJNMCAwdjYyNGwxMzQuMzkgMTMzLjA3YzE5LjAzIDE4Ljg2IDQzLjk4IDI4LjMgNjguOTMgMjguM3M0OS45LTkuNDMgNjguOTMtMjguM0w2MzcuMDkgMzk1LjVsMzY0Ljg0LTM2MS41OEMxMDI4LjI5IDExLjY2IDEwMjQgMCAxMDI0IDBIMFpNMTkyMCAxMDgwaC0zNzdsLTE0NS43MS0xNDYuMWMtMTguOTQtMTkuMTItMjguNDItNDQuMTctMjguNDItNjkuMjIgMC0yNS4wNSA5LjQ3LTUwLjExIDI4LjQyLTY5LjIyTDE5MjAgMjY4djgxMloiLz48L2c+PC9zdmc+)),
        var(--brand-bg-image, none),
        radial-gradient(120% 90% at 100% 100%, rgba(255, 255, 255, 0.14), transparent 55%),
        linear-gradient(var(--brand-gradient-angle, 150deg), var(--gl-gradient-start), var(--gl-gradient-end));
    background-size: cover, var(--brand-bg-size, cover), auto, auto;
    background-position: center, var(--brand-bg-position, center), center, center;
    background-repeat: no-repeat;
}

#connectDialog .modal-dialog {
    width: min(400px, 100vw - 32px);
    max-width: none;
    min-height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
#connectDialog.modal.fade .modal-dialog {
    transform: none;
}
@media (min-height: 600px) {
    /* Card centre at 7/16 of the viewport height */
    #connectDialog .modal-dialog {
        padding-bottom: 12.5vh;
    }
}

/* The card */
#connectDialog .modal-content {
    position: relative;
    overflow: hidden;
    padding: 40px 40px 36px;
    color: var(--gl-text);
    font-size: 13px;
    background: var(--gl-surface);
    border: 0;
    border-radius: var(--gl-radius);
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.28), 0 2px 8px rgba(16, 24, 40, 0.12);
    animation: gl-appear 0.35s ease-out both;
}
@keyframes gl-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}
@media (prefers-reduced-motion: reduce) {
    #connectDialog .modal-content {
        animation: none;
    }
}
#connectDialog .modal-body {
    padding: 0;
    overflow: visible;
}

#connectDialog .gl-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 61px;
}
#connectDialog .gl-logo {
    width: var(--gl-logo-width);
    max-width: 100%;
    height: var(--gl-logo-height);
    filter: var(--gl-logo-filter);
}

/* Product mark: a chip under the logo and a badge in the top-right corner */
#connectDialog .product-chip {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 6px;
    margin: 12px auto 22px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 159, 253, 0.12);
    color: var(--gl-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}
#connectDialog .product-chip .icon {
    flex: none;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--gl-mark) center / contain no-repeat;
    mask: var(--gl-mark) center / contain no-repeat;
}
#connectDialog .product-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 159, 253, 0.12);
    pointer-events: none;
}
#connectDialog .product-badge::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 11px;
    width: 22px;
    height: 22px;
    background-color: var(--gl-primary);
    -webkit-mask: var(--gl-mark) center / contain no-repeat;
    mask: var(--gl-mark) center / contain no-repeat;
}
@supports (color: color-mix(in srgb, red, blue)) {
    #connectDialog .product-chip,
    #connectDialog .product-badge {
        background: color-mix(in srgb, var(--gl-primary) 12%, transparent);
    }
}

/* Form */
#connectDialog #connectForm {
    width: 320px;
    max-width: 100%;
    margin: 0 auto;
}
#connectDialog .form-control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-height: 0;
    margin: 0 0 12px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--gl-text);
    background-color: var(--gl-field);
    background-image: none;
    border: 1px solid transparent;
    border-radius: var(--gl-radius-sm);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
#connectDialog .form-control::placeholder {
    color: var(--gl-muted);
    opacity: 1;
}
#connectDialog .form-control:hover {
    background-color: var(--gl-field-hover);
}
#connectDialog .form-control:focus {
    outline: 0;
    color: var(--gl-text);
    background-color: var(--gl-surface);
    border-color: var(--gl-primary);
    box-shadow: 0 0 0 3px rgba(0, 159, 253, 0.18);
}
#connectDialog .form-control.is-invalid {
    border-color: var(--gl-error-border);
}
#connectDialog .form-control.is-invalid:focus {
    border-color: var(--gl-error);
    box-shadow: 0 0 0 3px var(--gl-error-bg);
}
@supports (color: color-mix(in srgb, red, blue)) {
    #connectDialog .form-control:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--gl-primary) 18%, transparent);
    }
    #connectDialog .form-control.is-invalid:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--gl-error) 18%, transparent);
    }
}

/* Browsers paint autofilled fields in their own colours */
#connectDialog .form-control:-webkit-autofill,
#connectDialog .form-control:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px var(--gl-field) inset;
    box-shadow: 0 0 0 1000px var(--gl-field) inset;
    -webkit-text-fill-color: var(--gl-text);
    caret-color: var(--gl-text);
}
#connectDialog .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--gl-surface) inset, 0 0 0 3px rgba(0, 159, 253, 0.18);
    box-shadow: 0 0 0 1000px var(--gl-surface) inset, 0 0 0 3px rgba(0, 159, 253, 0.18);
}

#connectDialog .gl-error {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--gl-error-border);
    border-left-width: 4px;
    border-radius: var(--gl-radius-sm);
    background: var(--gl-error-bg);
    color: var(--gl-error);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}

#connectDialog .btn-primary {
    --bs-btn-color: var(--gl-on-primary);
    --bs-btn-bg: var(--gl-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--gl-on-primary);
    --bs-btn-hover-bg: var(--gl-primary);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--gl-on-primary);
    --bs-btn-active-bg: var(--gl-primary);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: none;
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--gl-surface), 0 0 0 4px var(--gl-primary);
    --bs-btn-border-radius: var(--gl-radius-sm);
    --bs-btn-font-size: 15px;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.5;
    --bs-btn-padding-x: 9px;
    --bs-btn-padding-y: 0;
    display: block;
    width: 100%;
    height: 44px;
    margin: 12px 0 0;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
#connectDialog .btn-primary:hover {
    filter: brightness(0.92);
}
#connectDialog .btn-primary:active {
    filter: brightness(0.86);
}
#connectDialog .btn-primary:focus-visible {
    box-shadow: var(--bs-btn-focus-box-shadow);
}

/* Connection alerts stay readable above the dialog */
body:has(#connectDialog.show) .notification-area {
    z-index: 1056;
}

/* Dark theme */
:root[data-bs-theme="dark"] #connectDialog {
    --gl-surface: var(--brand-surface, #23262b);
    --gl-text: var(--brand-text, #e6e6e6);
    --gl-muted: var(--brand-muted, #98a2b3);
    --gl-field: var(--brand-field, #2b2f36);
    --gl-field-hover: var(--brand-field-hover, #323740);
    --gl-error: var(--brand-error, #fda29b);
    --gl-error-bg: var(--brand-error-bg, #3a2320);
    --gl-error-border: var(--brand-error-border, #5c2e2a);
    --gl-logo-filter: var(--brand-logo-filter, invert(1) hue-rotate(180deg));
}
:root[data-bs-theme="dark"] #connectDialog.modal {
    background-color: #055e94;
    background-image:
        var(--brand-bg-overlay, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iLjA3Ij48cGF0aCBkPSJNMCAyNjUuMTZzMi41Ny0yLjkzIDIxLjYxIDE1LjkzbDM2NC44NCAzNjEuNTcgMzY0Ljg0IDM2MS41N2MzMC43MSAzMC40MyAyOC4zOCA3NS43NCAyOC4zOCA3NS43NEgwVjI2NS4xNloiLz48cGF0aCBkPSJNMCAwdjYyNGwxMzQuMzkgMTMzLjA3YzE5LjAzIDE4Ljg2IDQzLjk4IDI4LjMgNjguOTMgMjguM3M0OS45LTkuNDMgNjguOTMtMjguM0w2MzcuMDkgMzk1LjVsMzY0Ljg0LTM2MS41OEMxMDI4LjI5IDExLjY2IDEwMjQgMCAxMDI0IDBIMFpNMTkyMCAxMDgwaC0zNzdsLTE0NS43MS0xNDYuMWMtMTguOTQtMTkuMTItMjguNDItNDQuMTctMjguNDItNjkuMjIgMC0yNS4wNSA5LjQ3LTUwLjExIDI4LjQyLTY5LjIyTDE5MjAgMjY4djgxMloiLz48L2c+PC9zdmc+)),
        var(--brand-bg-image, none),
        linear-gradient(rgba(11, 15, 20, 0.45), rgba(11, 15, 20, 0.45)),
        linear-gradient(var(--brand-gradient-angle, 150deg), var(--gl-gradient-start), var(--gl-gradient-end));
}
@supports (color: color-mix(in srgb, red, blue)) {
    :root[data-bs-theme="dark"] #connectDialog.modal {
        background-color: color-mix(in srgb, var(--gl-gradient-start) 55%, #0b0f14);
    }
}

/* System preference, until the interface applies its own theme setting */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) #connectDialog {
        --gl-surface: var(--brand-surface, #23262b);
        --gl-text: var(--brand-text, #e6e6e6);
        --gl-muted: var(--brand-muted, #98a2b3);
        --gl-field: var(--brand-field, #2b2f36);
        --gl-field-hover: var(--brand-field-hover, #323740);
        --gl-error: var(--brand-error, #fda29b);
        --gl-error-bg: var(--brand-error-bg, #3a2320);
        --gl-error-border: var(--brand-error-border, #5c2e2a);
        --gl-logo-filter: var(--brand-logo-filter, invert(1) hue-rotate(180deg));
    }
    :root:not([data-bs-theme="light"]) #connectDialog.modal {
        background-color: #055e94;
        background-image:
            var(--brand-bg-overlay, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iLjA3Ij48cGF0aCBkPSJNMCAyNjUuMTZzMi41Ny0yLjkzIDIxLjYxIDE1LjkzbDM2NC44NCAzNjEuNTcgMzY0Ljg0IDM2MS41N2MzMC43MSAzMC40MyAyOC4zOCA3NS43NCAyOC4zOCA3NS43NEgwVjI2NS4xNloiLz48cGF0aCBkPSJNMCAwdjYyNGwxMzQuMzkgMTMzLjA3YzE5LjAzIDE4Ljg2IDQzLjk4IDI4LjMgNjguOTMgMjguM3M0OS45LTkuNDMgNjguOTMtMjguM0w2MzcuMDkgMzk1LjVsMzY0Ljg0LTM2MS41OEMxMDI4LjI5IDExLjY2IDEwMjQgMCAxMDI0IDBIMFpNMTkyMCAxMDgwaC0zNzdsLTE0NS43MS0xNDYuMWMtMTguOTQtMTkuMTItMjguNDItNDQuMTctMjguNDItNjkuMjIgMC0yNS4wNSA5LjQ3LTUwLjExIDI4LjQyLTY5LjIyTDE5MjAgMjY4djgxMloiLz48L2c+PC9zdmc+)),
            var(--brand-bg-image, none),
            linear-gradient(rgba(11, 15, 20, 0.45), rgba(11, 15, 20, 0.45)),
            linear-gradient(var(--brand-gradient-angle, 150deg), var(--gl-gradient-start), var(--gl-gradient-end));
    }
    @supports (color: color-mix(in srgb, red, blue)) {
        :root:not([data-bs-theme="light"]) #connectDialog.modal {
            background-color: color-mix(in srgb, var(--gl-gradient-start) 55%, #0b0f14);
        }
    }
}

@media (max-width: 480px) {
    #connectDialog .modal-content {
        padding: 28px 20px 24px;
    }
    #connectDialog .product-badge {
        top: 12px;
        right: 12px;
    }
    /* Keeps the logo clear of the badge on narrow screens */
    #connectDialog .gl-logo-box {
        padding: 0 36px;
    }
    #connectDialog .form-control {
        font-size: 16px;
    }
}