/* === IP-Intercom Portal — Custom Login Design === */

/* ---- LOGIN PAGE ---- */
body#body-login {
    background: #00205B url(/vault/ipin-bg.jpg) no-repeat center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    overflow: hidden !important;
}

/* Hide default Nextcloud header/logo area */
body#body-login #header,
body#body-login header,
body#body-login .wrapper .v-align header,
body#body-login .logo,
body#body-login h1.hidden-visually {
    display: none !important;
}

/* Wrapper — allow overflow so card can hide above */
body#body-login .wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-height: 100vh !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
}

/* ---- THE LOGIN CARD — hidden above viewport, slides down ---- */
body#body-login .guest-box {
    background: rgba(0, 20, 50, 0.75) !important;
    backdrop-filter: blur(20px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 120px rgba(0, 0, 0, 0.25) !important;
    padding: 2.5rem 2.5rem 2rem !important;
    min-width: 340px !important;
    color: #e8edf3 !important;
    /* Hidden above viewport */
    transform: translateY(calc(-100% - 160px)) !important;
    position: relative !important;
    /* Allow ONLY the slide transition */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ---- Hidden checkbox (the state toggle) ---- */
body#body-login .login-toggle {
    position: fixed !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* ---- The pull-down tab label ---- */
body#body-login .login-tab {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 20, 50, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    padding: 10px 28px !important;
    border-radius: 0 0 6px 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: none !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    transition: all 0.3s ease !important;
    user-select: none !important;
}
body#body-login .login-tab:hover {
    background: rgba(0, 20, 50, 0.9) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    padding-bottom: 14px !important;
}

/* ---- When checkbox checked: slide card down, hide tab ---- */
body#body-login .login-toggle:checked ~ * .guest-box,
body#body-login .login-toggle:checked ~ .wrapper .guest-box {
    transform: translateY(-50px) !important;
}
body#body-login .login-toggle:checked ~ .login-tab {
    transform: translateX(-50%) translateY(-100%) !important;
    opacity: 0 !important;
}

/* Card heading text — white */
body#body-login .guest-box h2,
body#body-login .guest-box .login-form h2 {
    color: #ffffff !important;
    font-weight: 300 !important;
    font-size: 1.3rem !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 1.5rem !important;
}

/* Labels */
body#body-login .guest-box label,
body#body-login .guest-box .login-form__label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 500 !important;
}

/* ---- KILL ALL Nextcloud/Vue transitions & animations on login ---- */
body#body-login *,
body#body-login *::before,
body#body-login *::after {
    transition: none !important;
    animation: none !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

/* Hide the floating labels entirely — we use placeholders instead */
body#body-login .input-field__label {
    display: none !important;
}

/* Input field wrapper — remove NC outline/ring behavior */
body#body-login .input-field,
body#body-login .input-field--legacy {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
body#body-login .input-field__main-wrapper {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Input fields — dark, thin bottom border only, NO animations */
body#body-login input[type=text],
body#body-login input[type=password],
body#body-login .input-field__input,
body#body-login .input-field input,
body#body-login .guest-box input:not([type=submit]) {
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    padding: 12px 8px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    outline: none !important;
    transition: none !important;
}

body#body-login input[type=text]:focus,
body#body-login input[type=password]:focus,
body#body-login .input-field__input:focus,
body#body-login .input-field input:focus,
body#body-login .guest-box input:not([type=submit]):focus {
    border-bottom-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transition: none !important;
}

/* Remove the NC focus-within ring on input-field wrapper */
body#body-login .input-field:focus-within,
body#body-login .input-field--legacy:focus-within,
body#body-login .input-field__main-wrapper:focus-within {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Leading icon (user/lock icons) — style for dark theme */
body#body-login .input-field__icon--leading {
    color: rgba(255, 255, 255, 0.4) !important;
}

body#body-login input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Login button — white outline, minimal, NO animation */
body#body-login .button-vue,
body#body-login .button.primary,
body#body-login input[type=submit].primary,
body#body-login .primary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
}
/* Show password toggle — keep it subtle */
body#body-login .input-field__trailing-button {
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    color: rgba(255, 255, 255, 0.4) !important;
}
body#body-login .input-field__trailing-button:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

body#body-login .button.primary:hover,
body#body-login input[type=submit].primary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

/* Forgot password link */
body#body-login a {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.02em !important;
}
body#body-login a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Alternative login methods text */
body#body-login .alternative-logins,
body#body-login .body-login-container {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Error messages */
body#body-login .warning,
body#body-login .error {
    background: rgba(180, 40, 40, 0.3) !important;
    border: 1px solid rgba(255, 100, 100, 0.3) !important;
    border-radius: 2px !important;
    color: #ffb0b0 !important;
}

/* Thin accent line at top of card */
body#body-login .guest-box::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 1.5rem !important;
}

/* ---- HIDE FOOTER ---- */
body#body-login footer,
body#body-login .wrapper > footer,
footer.guest-box,
footer p.info,
footer a.entity-name {
    display: none !important;
}

/* ---- PUBLIC SHARE PAGES ---- */
#body-public {
    background: #00205B url(/vault/ipin-bg.jpg) no-repeat center center !important;
    background-size: cover !important;
}
#body-public .guest-box {
    background: rgba(0, 20, 50, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    color: #e8edf3 !important;
}
#body-public .guest-box a {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- APP HEADER ---- */
#header {
    background-color: #00205B !important;
}