/* Dashboard Auth - Uses FM Design System tokens from variables.css */
/* Uses same variables as fm-popup.css for consistency */

.fm-dashboard-auth,
.fm-dashboard-auth * {
    box-sizing: border-box;
}

/*
 * Astra wraps page content in `.ast-container` with 20px side padding.
 * Use a padding-cancel technique (not 100vw) to avoid horizontal scroll and
 * "weird" alignment differences between mobile/desktop.
 */
.ast-container .fm-dashboard-auth {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
}

.fm-dashboard-auth button,
.fm-dashboard-auth input,
.fm-dashboard-auth select,
.fm-dashboard-auth textarea {
    font-family: var(--fm-font, inherit);
}

.fm-dashboard-auth {
    width: 100%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 5vw, 48px) var(--fm-space-2, 16px);
    background: var(--fm-gray-50);
    font-family: var(--fm-font);
}

.fm-dashboard-card {
    width: min(460px, 100%);
    background: var(--fm-white);
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-lg);
    padding: clamp(28px, 4vw, 38px) clamp(20px, 3vw, 30px);
    box-shadow: var(--fm-shadow-xl);
}

.fm-dashboard-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--fm-gray-100);
    border-radius: var(--fm-radius-pill);
    padding: 4px;
    width: fit-content;
    margin: 0 auto clamp(20px, 3vw, 28px);
}

.fm-dashboard-tab {
    border: none;
    background: transparent;
    color: var(--fm-primary);
    padding: 10px clamp(18px, 3vw, 28px);
    border-radius: var(--fm-radius-pill);
    font-family: var(--fm-font, inherit);
    font-size: var(--fm-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--fm-duration) var(--fm-ease);
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
}

.fm-dashboard-tab:hover:not(.is-active) {
    background: rgba(17, 27, 134, 0.06);
}

.fm-dashboard-tab.is-active {
    background: var(--fm-primary);
    color: var(--fm-white);
    box-shadow: 0 6px 18px rgba(17, 27, 134, 0.3);
}

.fm-dashboard-message {
    margin-bottom: var(--fm-space-2);
    padding: 12px 14px;
    border-radius: var(--fm-radius-sm);
    font-family: var(--fm-font, inherit);
    font-size: var(--fm-text-sm);
    line-height: 1.5;
}

.fm-dashboard-message--error {
    background: var(--fm-red-bg);
    color: var(--fm-red-text);
    border-left: 4px solid var(--fm-red);
}

.fm-dashboard-message--success {
    background: #ecfdf3;
    color: var(--fm-green);
    border-left: 4px solid var(--fm-green);
}

.fm-dashboard-field {
    margin-bottom: var(--fm-space-2);
}

.fm-dashboard-field label {
    display: block;
    font-family: var(--fm-font, inherit);
    font-weight: 600;
    font-size: var(--fm-text-sm);
    color: var(--fm-text-heading);
    margin-bottom: var(--fm-space-1);
}

.fm-dashboard-field input[type="text"],
.fm-dashboard-field input[type="tel"],
.fm-dashboard-field input[type="password"] {
    width: 100%;
    padding: 14px var(--fm-space-2);
    border: 2px solid var(--fm-border);
    border-radius: var(--fm-radius-md);
    font-family: var(--fm-font, inherit);
    font-size: var(--fm-text-md);
    color: var(--fm-text-heading);
    transition: all var(--fm-duration) var(--fm-ease);
    background: var(--fm-white);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.fm-dashboard-field input::placeholder {
    color: var(--fm-gray-400);
}

.fm-dashboard-field input:focus {
    border-color: var(--fm-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(17, 27, 134, 0.12);
}

.fm-dashboard-checkbox {
    display: flex;
    align-items: center;
    gap: var(--fm-space-1);
    font-family: var(--fm-font, inherit);
    font-size: var(--fm-text-sm);
    color: var(--fm-text-body);
    cursor: pointer;
}

.fm-dashboard-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--fm-primary);
}

.fm-dashboard-submit {
    width: 100%;
    margin-top: var(--fm-space-1);
    padding: var(--fm-space-2);
    border: none;
    border-radius: var(--fm-radius-pill);
    font-family: var(--fm-font, inherit);
    font-size: var(--fm-text-base);
    font-weight: 700;
    background: var(--fm-primary);
    color: var(--fm-white);
    cursor: pointer;
    transition: all var(--fm-duration) var(--fm-ease);
    box-shadow: 0 10px 25px rgba(17, 27, 134, 0.25);
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
}

.fm-dashboard-submit:hover:not(:disabled) {
    background: var(--fm-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(17, 27, 134, 0.35);
}

.fm-dashboard-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.fm-dashboard-field--name {
    display: none;
}

/* Visibility toggles based on mode */
[data-mode="register"] .fm-dashboard-field--name {
    display: block;
}

[data-mode="register"] .fm-dashboard-field--remember {
    display: none;
}

.fm-dashboard-recovery {
    text-align: center;
    margin-top: var(--fm-space-2);
}

.fm-dashboard-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--fm-primary);
    font-family: var(--fm-font, inherit);
    font-size: var(--fm-text-sm);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--fm-duration) var(--fm-ease);
}

.fm-dashboard-link:hover {
    color: var(--fm-primary-dark);
}

/* intl-tel-input overrides are shared in fm-popup.css or variables logic where possible, 
   but specific block overrides often stay in respective files if structure differs slightly.
   However, we moved shared logic to fm-popup.css's shared section or rely on similar classes. 
   See fm-popup.css for shared .iti styling which targets both .fm-popup-field--phone and .fm-dashboard-field--phone */

@media (max-width: 520px) {
    .fm-dashboard-card {
        padding: var(--fm-space-3) var(--fm-space-2);
    }

    .fm-dashboard-tabs {
        width: 100%;
        justify-content: stretch;
    }

    .fm-dashboard-tab {
        flex: 1;
        text-align: center;
        padding: 10px 12px;
    }
}