/* ============================================
   TACTILE AUTH - Claymorphic Auth Pages
   ============================================

   Brings the Tactile Maximalism design system to
   login/register pages with claymorphic card,
   squishy inputs, and jelly-bean buttons.
   ============================================ */

/* ===========================
   1. AUTH CARD - Claymorphic Wrapper
   =========================== */

.tactile-auth-card {
    padding: 24px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        8px 8px 24px var(--sapphire-light-8),
        -4px -4px 12px rgba(255, 255, 255, 0.9),
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    border: 1px solid var(--sapphire-light-15);
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 600px) {
    .tactile-auth-card {
        padding: 40px;
    }
}

/* ===========================
   2. AUTH PAGE LAYOUT
   =========================== */

.tactile-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(
        160deg,
        #f8fafc 0%,
        #f1f5f9 40%,
        #eef2ff 100%
    );
}

.tactile-auth-content {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
}

/* ===========================
   3. AUTH HEADER (Logo + Title)
   =========================== */

.tactile-auth-header {
    text-align: center;
    margin-bottom: 24px;
}

.tactile-auth-logo {
    display: block;
    margin: -8px auto 28px;
    width: 140px;
    height: auto;
}

.tactile-auth-title {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.tactile-auth-subtitle {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #64748b;
    margin: 0;
}

/* ===========================
   4. SOCIAL LOGIN BUTTONS
   Claymorphic "Cloud Stone" style
   =========================== */

.tactile-social-btn {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    cursor: pointer;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    gap: 14px;

    /* Spring animation */
    transition:
        transform
            450ms
            linear(
                0, 0.2459, 0.6526, 0.9468, 1.0764, 1.0915,
                1.0585, 1.0219, 0.9993, 0.9914, 0.9921,
                0.9957, 0.9988, 1.0004, 1
            ),
        box-shadow
            450ms
            linear(
                0, 0.2459, 0.6526, 0.9468, 1.0764, 1.0915,
                1.0585, 1.0219, 0.9993, 0.9914, 0.9921,
                0.9957, 0.9988, 1.0004, 1
            ),
        background-color 200ms ease;
}

.tactile-social-btn--google {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #374151;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.tactile-social-btn--google:hover {
    transform: translateY(-2px) scale(1.01);
    background: #ffffff;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.05),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.tactile-social-btn--google:active {
    transform: scale(0.97);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tactile-social-btn--facebook {
    background: linear-gradient(180deg, #4093ef 0%, #1877F2 50%, #1565d8 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, 0.2),
        inset 0 -2px 1px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(24, 119, 242, 0.3),
        0 2px 4px rgba(24, 119, 242, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.tactile-social-btn--facebook:hover {
    transform: translateY(-2px) scale(1.01);
    filter: brightness(1.08);
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, 0.3),
        inset 0 -2px 1px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(24, 119, 242, 0.35),
        0 4px 8px rgba(24, 119, 242, 0.2);
}

.tactile-social-btn--facebook:active {
    transform: translateY(1px) scale(0.97);
    filter: brightness(0.95);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(24, 119, 242, 0.2);
}

/* Focus visible for both social buttons */
.tactile-social-btn:focus-visible {
    outline: 3px solid var(--sapphire-light-50, rgba(99, 102, 241, 0.5));
    outline-offset: 2px;
}

.tactile-social-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* ===========================
   5. DIVIDER ("OR" separator)
   =========================== */

.tactile-auth-divider {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 20px 0 16px;
    gap: 16px;
}

.tactile-auth-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 50%,
        transparent 100%
    );
}

.tactile-auth-divider-text {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===========================
   6. FORM SECTION TITLE
   =========================== */

.tactile-auth-form-title {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    text-align: center;
    margin-bottom: 16px;
}

/* ===========================
   7. AUTH FORM FIELDS
   Applies squishy-textfield styles to auth inputs
   =========================== */

.tactile-auth-form .MuiFormControl-root {
    margin-bottom: 8px;
}

/* ===========================
   8. FORGOT PASSWORD LINK
   =========================== */

.tactile-auth-forgot-link {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sapphire-main, #4338ca);
    text-decoration: none;
    transition: color 200ms ease, text-shadow 200ms ease;
}

.tactile-auth-forgot-link:hover {
    color: var(--sapphire-light, #6366f1);
    text-shadow: 0 0 8px var(--sapphire-light-25);
}

/* ===========================
   9. BOTTOM DIVIDER & FOOTER LINK
   =========================== */

.tactile-auth-bottom-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.06) 50%,
        transparent 100%
    );
    margin: 20px 0 16px;
}

.tactile-auth-footer-text {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    color: #64748b;
    text-align: center;
}

.tactile-auth-footer-link {
    color: var(--sapphire-main, #4338ca);
    font-weight: 700;
    text-decoration: none;
    transition: color 200ms ease, text-shadow 200ms ease;
}

.tactile-auth-footer-link:hover {
    color: var(--sapphire-light, #6366f1);
    text-shadow: 0 0 8px var(--sapphire-light-25);
}

/* ===========================
   10. LEGAL TEXT
   =========================== */

.tactile-auth-legal {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 12px;
    line-height: 1.5;
}

.tactile-auth-legal a {
    color: var(--sapphire-main, #4338ca);
    text-decoration: none;
    font-weight: 600;
}

.tactile-auth-legal a:hover {
    text-decoration: underline;
}

/* ===========================
   11. PASSWORD STRENGTH BAR
   =========================== */

.tactile-auth-strength-bar {
    height: 6px;
    border-radius: 6px;
    width: 85px;
    transition: background-color 300ms ease;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.08),
        0 1px 1px rgba(255, 255, 255, 0.6);
}

.tactile-auth-strength-label {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

/* ===========================
   12. PAGE FOOTER
   =========================== */

.tactile-auth-page-footer {
    padding: 16px;
    text-align: center;
    margin-top: auto;
}

/* ===========================
   13. REDUCED MOTION
   =========================== */

@media (prefers-reduced-motion: reduce) {
    .tactile-social-btn {
        transition: none;
    }
}