/* =====================================================================
   Rally Design System — Input Field & Login Layout
   Reference: Rally Figma node 3418:697 (Input field) / 3414:417 (spec page)
   Docs: https://rally-web-storybook.staging.ezprk.dev/?path=/docs/rally-web-input--docs
   ===================================================================== */

:root {
    /* Color tokens */
    --rally-focused-state: #2F2BDC;
    --rally-focused-state-12: rgba(47, 43, 220, 0.12);
    --rally-on-surface: #151515;
    --rally-on-surface-variant: #555555;
    --rally-border-color: #555555;
    --rally-border-color-hover: #424242;
    --rally-error: #be110a;
    --rally-error-bg: rgba(190, 17, 10, 0.06);
    --rally-disabled-bg: #F3F3F3;
    --rally-disabled-text: #B0B0B0;
    --rally-surface: #fefefe;
    --rally-divider: #DFDFDF;

    /* Spacing tokens */
    --rally-spacing-xs: 4px;
    --rally-spacing-s: 8px;
    --rally-spacing-m: 16px;
    --rally-spacing-l: 24px;
    --rally-spacing-xl: 32px;

    /* Border / radius */
    --rally-border-m: 1px;
    --rally-radius-m: 8px;
    --rally-radius-focus-ring: 10px;

    /* Typography */
    --rally-font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rally-font-feature-settings: 'ss01' 1, 'ss02' 1, 'ss03' 1, 'ss05' 1;
}

/* ---------------------------------------------------------------------
   InputField component
   --------------------------------------------------------------------- */
.rally-input-field {
    display: flex;
    flex-direction: column;
    gap: var(--rally-spacing-xs);
    width: 100%;
    font-family: var(--rally-font-family);
    color: var(--rally-on-surface);
    box-sizing: border-box;
}

.rally-input-field *,
.rally-input-field *::before,
.rally-input-field *::after {
    box-sizing: border-box;
}

.rally-input-field__label {
    font-family: var(--rally-font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--rally-on-surface);
    font-feature-settings: var(--rally-font-feature-settings);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--rally-spacing-xs);
}

.rally-input-field__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--rally-spacing-s);
    background-color: var(--rally-surface);
    border: var(--rally-border-m) solid var(--rally-border-color);
    border-radius: var(--rally-radius-m);
    padding: 0 var(--rally-spacing-m);
    min-height: 48px;
    transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

.rally-input-field__wrapper:hover {
    border-color: var(--rally-border-color-hover);
}

.rally-input-field__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--rally-on-surface);
    font-family: var(--rally-font-family);
    font-size: 16px;
    line-height: 20px;
    font-feature-settings: var(--rally-font-feature-settings);
    padding: 0;
    margin: 0;
    height: 100%;
}

.rally-input-field__input::placeholder {
    color: var(--rally-on-surface-variant);
    opacity: 1;
}

.rally-input-field__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--rally-surface) inset;
    -webkit-text-fill-color: var(--rally-on-surface);
}

.rally-input-field__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 18px;
    color: var(--rally-on-surface-variant);
    flex-shrink: 0;
}

.rally-input-field__icon--clickable {
    cursor: pointer;
}

.rally-input-field__icon-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    padding: 0;
    margin: 0;
    border-radius: var(--rally-radius-s, 4px);
    color: var(--rally-on-surface-variant);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    flex-shrink: 0;
}

.rally-input-field__icon-btn:hover {
    color: var(--rally-on-surface);
}

.rally-input-field__icon-btn:focus-visible {
    outline: 2px solid var(--rally-focused-state);
    outline-offset: 2px;
}

.rally-input-field__icon-btn > .rally-input-field__icon {
    pointer-events: none;
}

.rally-input-field__icon--error {
    color: var(--rally-error);
}

.rally-input-field__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--rally-spacing-m);
    min-height: 20px;
}

.rally-input-field__supporting-text,
.rally-input-field__character-count,
.rally-input-field__error {
    font-family: var(--rally-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--rally-on-surface-variant);
    margin: 0;
}

.rally-input-field__character-count {
    margin-left: auto;
    white-space: nowrap;
}

.rally-input-field__error {
    color: var(--rally-error);
}

/* --- Sizes --- */
.rally-input-field--small .rally-input-field__wrapper { min-height: 40px; padding: 0 12px; }
.rally-input-field--small .rally-input-field__input  { font-size: 14px; line-height: 20px; }

.rally-input-field--medium .rally-input-field__wrapper { min-height: 48px; padding: 0 var(--rally-spacing-m); }
.rally-input-field--medium .rally-input-field__input  { font-size: 16px; line-height: 20px; }

.rally-input-field--large .rally-input-field__wrapper  { min-height: 56px; padding: 0 var(--rally-spacing-m); }
.rally-input-field--large .rally-input-field__input   { font-size: 16px; line-height: 24px; }

/* --- States --- */
.rally-input-field--focused .rally-input-field__wrapper,
.rally-input-field__wrapper:focus-within {
    border-color: var(--rally-focused-state);
    box-shadow: 0 0 0 2px var(--rally-focused-state-12);
    border-radius: var(--rally-radius-m);
}

.rally-input-field--error .rally-input-field__wrapper {
    border-color: var(--rally-error);
}

.rally-input-field--error.rally-input-field--focused .rally-input-field__wrapper,
.rally-input-field--error .rally-input-field__wrapper:focus-within {
    border-color: var(--rally-error);
    box-shadow: 0 0 0 2px rgba(190, 17, 10, 0.12);
}

.rally-input-field--disabled .rally-input-field__wrapper {
    background-color: var(--rally-disabled-bg);
    border-color: var(--rally-border-color);
    cursor: not-allowed;
}

.rally-input-field--disabled .rally-input-field__input,
.rally-input-field--disabled .rally-input-field__label {
    color: var(--rally-disabled-text);
    cursor: not-allowed;
}

.rally-input-field--readonly .rally-input-field__wrapper {
    background-color: var(--rally-disabled-bg);
    border-color: var(--rally-border-color);
}

/* ---------------------------------------------------------------------
   Rally login page layout
   - Centered card, col-4 on md+, full-width with edge padding on xs/sm
   --------------------------------------------------------------------- */
.rally-login-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--rally-spacing-l) 0;
    font-family: var(--rally-font-family);
}

.rally-login-card {
    width: 100%;
    background: var(--rally-surface);
    padding: var(--rally-spacing-l) 40px;
    border-radius: var(--rally-radius-m);
}

.rally-login-card h1,
.rally-login-card h2 {
    font-family: var(--rally-font-family);
    font-weight: 500;
    color: var(--rally-on-surface);
    margin-bottom: var(--rally-spacing-m);
}

.rally-login-title {
    font-family: var(--rally-font-family);
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.5px;
    color: var(--rally-on-surface);
    margin: 0 0 var(--rally-spacing-s);
}

.rally-login-subtitle {
    font-family: var(--rally-font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--rally-on-surface-variant);
    margin: 0 0 var(--rally-spacing-l);
}

.rally-login-forgot-password {
    margin: var(--rally-spacing-s) 0 var(--rally-spacing-m);
}

.rally-login-forgot-password a {
    font-family: var(--rally-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--rally-on-surface);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rally-login-forgot-password a:hover,
.rally-login-forgot-password a:focus {
    color: var(--rally-focused-state);
}

.rally-login-form-group {
    margin-bottom: var(--rally-spacing-m);
}

.rally-login-stay-logged-in {
    display: flex;
    align-items: center;
    gap: var(--rally-spacing-s);
    margin: var(--rally-spacing-s) 0 var(--rally-spacing-m);
}

.rally-login-stay-logged-in label {
    margin: 0;
    font-family: var(--rally-font-family);
    font-size: 14px;
    line-height: 20px;
    color: var(--rally-on-surface-variant);
}

.rally-login-actions {
    display: flex;
    flex-direction: column;
    gap: var(--rally-spacing-s);
    margin-top: var(--rally-spacing-m);
}

.rally-login-actions .btn {
    font-family: var(--rally-font-family);
    border-radius: var(--rally-radius-m);
    padding: 12px var(--rally-spacing-m);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    border: var(--rally-border-m) solid transparent;
    cursor: pointer;
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out, color 120ms ease-in-out;
    color: var(--rally-on-surface);
}

.rally-login-actions .rally-btn-secondary-outline {
    background-color: transparent;
    border-color: var(--rally-on-surface);
    color: var(--rally-on-surface-variant);
}

.rally-login-actions .rally-btn-secondary-outline:hover,
.rally-login-actions .rally-btn-secondary-outline:focus {
    background-color: #ECECEC;
    border-color: var(--rally-on-surface);
    color: var(--rally-on-surface-variant);
    text-decoration: none;
}

.rally-login-actions .btn:focus-visible {
    outline: 2px solid var(--rally-focused-state);
    outline-offset: 2px;
}

.rally-btn-primary {
    background-color: #0B6FA0;
    color: #FFFFFF;
    border-color: #0B6FA0;
}

.rally-btn-primary:hover,
.rally-btn-primary:focus {
    background-color: #005C8A;
    border-color: #005C8A;
    color: #FFFFFF;
    text-decoration: none;
}

.rally-btn-secondary-outline,
a.rally-btn-secondary-outline,
button.rally-btn-secondary-outline {
    background-color: transparent;
    color: var(--rally-on-surface);
    border-color: var(--rally-on-surface);
    font-weight: 500;
}

.rally-btn-secondary-outline:hover,
.rally-btn-secondary-outline:focus,
a.rally-btn-secondary-outline:hover,
a.rally-btn-secondary-outline:focus,
button.rally-btn-secondary-outline:hover,
button.rally-btn-secondary-outline:focus {
    background-color: #ECECEC;
    border-color: var(--rally-on-surface);
    color: var(--rally-on-surface);
    text-decoration: none;
}

.rally-login-links {
    margin-top: var(--rally-spacing-l);
    display: flex;
    flex-direction: column;
    gap: var(--rally-spacing-s);
    font-family: var(--rally-font-family);
    font-size: 14px;
    line-height: 20px;
}

.rally-login-links a {
    color: #151515;
    font-weight: 500;
    text-decoration: none;
}

.rally-login-links a:hover,
.rally-login-links a:focus {
    text-decoration: underline;
}

/* Responsive spacing: tighter vertical padding on xs, keep horizontal at 40px */
@media (max-width: 575.98px) {
    .rally-login-wrapper {
        padding: var(--rally-spacing-m) 0;
    }
    .rally-login-card {
        padding: var(--rally-spacing-m) 40px;
    }
}