/* Suportedesk — login simples (Bootstrap 5) */
:root {
    --sd-bg-1: hsl(222 47% 11%);
    --sd-bg-2: hsl(217 33% 17%);
    --sd-accent: hsl(199 89% 48%);
    --sd-accent-dark: hsl(201 90% 40%);
    --sd-card: #fff;
    --sd-muted: hsl(215 16% 47%);
    --sd-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html {
    scroll-behavior: smooth;
}

.sd-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--sd-font);
    background: linear-gradient(165deg, var(--sd-bg-1) 0%, var(--sd-bg-2) 55%, hsl(222 40% 14%) 100%);
}

.sd-header {
    position: relative;
    z-index: 10;
}

.sd-nav {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.sd-brand {
    color: hsl(222 47% 15%) !important;
    letter-spacing: -0.02em;
}

.sd-brand img {
    transition: transform 0.2s ease;
}

.sd-brand:hover img {
    transform: scale(1.03);
}

.sd-footer {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Página */
.sd-login-shell {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.sd-login-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 80% -10%, hsl(199 70% 40% / 0.25), transparent 55%),
        radial-gradient(ellipse 50% 40% at 10% 100%, hsl(250 45% 45% / 0.12), transparent 50%);
    pointer-events: none;
}

.sd-login-container {
    position: relative;
    z-index: 1;
}

.sd-login-card {
    border-radius: 1rem !important;
    background: var(--sd-card);
}

.sd-login-card::before {
    content: "";
    display: block;
    height: 3px;
    margin: -1rem -1rem 0 -1rem;
    border-radius: 1rem 1rem 0 0;
    background: linear-gradient(90deg, var(--sd-accent-dark), var(--sd-accent));
}

@media (min-width: 768px) {
    .sd-login-card::before {
        margin: -1.25rem -1.25rem 0 -1.25rem;
    }
}

.sd-login-mark {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(145deg, var(--sd-accent-dark), var(--sd-accent));
    box-shadow: 0 8px 24px hsl(199 89% 40% / 0.35);
}

.sd-link {
    color: hsl(201 90% 38%);
}

.sd-link:hover {
    color: hsl(222 47% 22%);
}

.sd-login-btn {
    background: linear-gradient(180deg, var(--sd-accent) 0%, var(--sd-accent-dark) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px hsl(199 89% 40% / 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sd-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px hsl(199 89% 40% / 0.45);
}

.sd-login-btn:active {
    transform: translateY(0);
}

/* Senha */
.sd-password-wrap {
    position: relative;
}

.sd-password-toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    padding: 0.35rem 0.55rem;
    color: var(--sd-muted) !important;
    text-decoration: none !important;
    border-radius: 0.4rem;
}

.sd-password-toggle:hover {
    color: hsl(222 47% 28%) !important;
    background: hsl(210 40% 96%);
}

.sd-password-toggle:focus-visible {
    outline: 2px solid var(--sd-accent);
    outline-offset: 2px;
}

.sd-password-toggle i {
    font-size: 1.1rem;
}

.sd-login-card .form-control:focus {
    border-color: var(--sd-accent);
    box-shadow: 0 0 0 0.2rem hsl(199 89% 48% / 0.2);
}

.sd-footer-hint {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* Animações leves */
.sd-login-card-in {
    animation: sdIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sd-login-header-in {
    animation: sdFade 0.5s ease 0.08s both;
}

.sd-login-form-in {
    animation: sdFade 0.5s ease 0.14s both;
}

.sd-footer-in {
    animation: sdFade 0.55s ease 0.25s both;
}

@keyframes sdIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sdFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-login-card-in,
    .sd-login-header-in,
    .sd-login-form-in,
    .sd-footer-in {
        animation: none !important;
    }
}

::selection {
    background: hsl(199 89% 48% / 0.25);
}