/* public/auth.css - Authentication Page Styles */

/* ============================================
   FORM STYLING
   ============================================ */

/* Instruction banner above login form */
.MuiPaper-root form::before {
    content: "✨ New user? Enter email & password to create account | Existing user? Just sign in";
    display: block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

/* ============================================
   SUBMIT BUTTON STYLING (NOW SECONDARY)
   ============================================ */

/* Make original submit button secondary with outline style */
button[type="submit"] {
    font-size: 0 !important;
    position: relative;
    min-height: 56px !important;
    background: transparent !important;
    border: 2px solid #dc4476 !important;
    color: #dc4476 !important;
}

button[type="submit"]:hover {
    background: rgba(220, 68, 118, 0.1) !important;
    opacity: 1 !important;
}

/* Sign In button label */
button[type="submit"]::before {
    content: "SIGN IN";
    display: block;
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    text-align: center;
}

/* ============================================
   PROFILE & UI ELEMENTS
   ============================================ */

/* Enlarge profile picture container avatar */
span[data-state="closed"].rounded-full {
    height: 3rem !important;
    width: 3rem !important;
    object-fit: cover !important;
}

/* Make the loading spinner bigger */
.flex.flex-col.mx-auto.w-full.flex-grow.p-4 > span {
    width: 35px !important;
    height: 35px !important;
}

/* ============================================
   HIDE UNWANTED ELEMENTS
   ============================================ */

/* Hide readme button */
#readme-button {
    display: none !important;
}

/* Hide first header child element */
#header > div:nth-child(1) {
    display: none !important;
}

/* Hide feedback buttons container (thumbs up/down are inside a div) */
div.-ml-1\.5.flex.items-center.flex-wrap > div:has(button.positive-feedback-off),
div.-ml-1\.5.flex.items-center.flex-wrap > div:has(button.negative-feedback-off) {
    display: none !important;
}

/* Hide only buttons that have ALL the copy button classes but are NOT call-to-actions (which have IDs) */
div.-ml-1\.5.flex.items-center.flex-wrap > button.text-muted-foreground:not([id]) {
    display: none !important;
}

/* Ensure theme toggle and call-to-actions stay visible */
#theme-toggle,
button[id^="a"] {
    display: inline-flex !important;
}

/* Hide watermarks and footers */
.watermark,
.footer,
.disclaimer {
    display: none !important;
}

/* Hide Chainlit attribution links */
a[href*='https://github.com/Chainlit/chainlit'] {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ============================================
   RESPONSIVE & THEME ADJUSTMENTS
   ============================================ */

/* Ensure form elements have consistent spacing */
.MuiPaper-root form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .MuiPaper-root form::before {
        background: linear-gradient(135deg, #4c5fd5 0%, #5e3a82 100%);
    }

    button[type="submit"] {
        border-color: #dc4476 !important;
        color: #dc4476 !important;
    }

    button[type="submit"]:hover {
        background: rgba(220, 68, 118, 0.15) !important;
    }
}