/* Toiletbucket Auth Pages Theme (Forgot Password, 2FA, WebAuthn) */

html, body {
    background-color: #020407 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 100% !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #e0e0e0 !important;
}
#navbar,
.ui.menu.navbar,
.page-footer,
footer {
    display: none !important;
}

.page-content.user {
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background-color: #020407 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.page-content.user .ui.middle.page.grid {
    margin: 0 !important;
    width: 100% !important;
    max-width: 450px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.page-content.user .column {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.auth-form {
    width: 100%;
    max-width: 315px;
}

/* === Messages === */
.auth-message {
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
    width: 100%;
    max-width: 315px;
    text-align: center;
}
.auth-message strong {
    color: #ffffff;
    font-weight: 500;
}
.auth-message.error {
    color: #ff5b5b;
}

/* === Labels & Headers === */
.auth-label {
    font-size: 12px;
    color: #8b929d;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-weight: 500;
    text-align: center;
    width: 100%;
}

/* === Blended Inputs === */
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="number"],
.auth-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    padding: 15px 5px !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    margin-bottom: 15px !important;
    box-shadow: none !important;
    outline: none !important;
}
.ui.form input[type="text"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="number"]:focus,
.auth-input:focus {
    border-bottom: 1px solid rgba(255,255,255,0.4) !important;
    box-shadow: none !important;
    outline: none !important;
}
.ui.form input::placeholder,
.auth-input::placeholder {
    color: rgba(255,255,255,0.3) !important;
    text-align: left;
}

/* === Digit Boxes (2FA) === */
.digit-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
    width: 100%;
}

.digit-box {
    width: 40px !important;
    height: 50px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 20px !important;
    text-align: center !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.digit-box:focus {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Center placeholder for Scratch Code */
#scratch-code-input {
    text-align: center !important;
    letter-spacing: 1px !important;
}
#scratch-code-input::placeholder {
    text-align: center !important;
    letter-spacing: normal !important;
}


/* === Buttons Row === */
.button-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    width: 100%;
}
/* Right-align single buttons if it's the only one in the row */
.button-row.single-btn-row {
    justify-content: flex-end;
}

.ui.form .ui.button,
.auth-btn {
    width: 150px;
    height: 40px;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #e0e0e0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-weight: 400 !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}
.ui.form .ui.button:hover,
.auth-btn:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
}

/* === Subtle Links (Footer) === */
.auth-footer {
    text-align: right;
    margin-top: 25px;
    width: 100%;
    max-width: 315px;
}
.auth-footer.center-link {
    text-align: center;
}
.auth-link {
    color: rgba(255,255,255,0.2) !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
.auth-link:hover {
    color: rgba(255,255,255,0.6) !important;
}

/* === WebAuthn Custom Styles === */
.webauthn-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px 0 30px;
    width: 100%;
    max-width: 315px;
}

.key-icon-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.key-icon-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    animation: pulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
}

.key-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    fill: #ffffff;
    opacity: 0.8;
}

.webauthn-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #ffffff;
}

.webauthn-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
    margin-bottom: 30px;
}

/* Hide Native Elements */
.ui.form .field > label,
.ui.checkbox,
.ui.attached.segment {
    display: none !important;
}

/* Custom Alerts (Gitea Flash Messages) */
.ui.message {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #e0e0e0 !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    width: 100%;
    text-align: center;
}
.ui.negative.message, .ui.error.message {
    border-color: rgba(255, 91, 91, 0.5) !important;
    color: #ff5b5b !important;
}
.ui.positive.message, .ui.success.message {
    border-color: rgba(91, 255, 91, 0.5) !important;
    color: #5bff5b !important;
}
.ui.message .close.icon {
    display: none !important;
}
.ui.message p {
    margin: 0 !important;
}

/* Logo */
.auth-logo {
    max-width: 283px !important;
    margin: 0 auto 40px !important;
    display: block !important;
    align-self: center !important;
    -webkit-user-drag: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

@media (max-width: 768px) {
    .auth-logo {
        max-width: 220px !important;
        margin: 0 auto 25px !important;
    }
    .page-content.user .ui.middle.page.grid {
        padding: 15px !important;
    }
    .button-row {
        gap: 10px;
    }
    .ui.form .ui.button,
    .auth-btn {
        width: 140px;
        height: 38px;
        font-size: 14px !important;
    }
}