/*
    Styles for the Sigma Facilities Coop sign in landing page.
    Two layouts are supported: desktop (two column) and mobile (stacked),
    matching the iPhone 16 sized breakpoint. Nothing more responsive than
    that is needed because FileMaker WebDirect is only used on those two
    device types for this project.
*/

/* Reset default browser spacing so our layout measurements are predictable */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
    Body is a full height flex column so the footer can be pushed to the
    bottom of the screen on short pages, rather than sitting directly under
    the sign in card with a gap underneath it.
*/
html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: #FFFFFF;
    color: #1A1A1A;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
    Top black header bar containing just the logo, per the updated design.
    Fixed height (rather than letting padding size it) so it stays exactly
    65px on desktop and 60px on mobile no matter what's inside it.
    Positioned relative so the logo inside can be pinned an exact distance
    from the left edge regardless of the bar's own padding.
*/
.topHeader {
    background-color: #0055b8;
    height: 65px;
    width: 100%;
    flex-shrink: 0;
    position: relative;
}

/*
    Shared logo sizing for both the header and footer logo images. Width is
    left unset (defaults to "auto") so the browser scales it in proportion
    to the fixed height instead of stretching/squishing it to a fixed width
    that might not match each logo's actual aspect ratio.
*/
.logoImage {
    height: 40px;
}

/*
    Positions the header logo a fixed 30px from the left edge and
    vertically centered in the bar. Kept separate from .logoImage (which
    only handles sizing) since the footer logo needs different positioning
    to sit on the right instead.
*/
.topHeader .logoImage {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/*
    Main content is now just the centered sign in card (the welcome panel
    and feature list from the original two-column design were removed), so
    a simple flex container that centers its one child both ways is enough.
    "flex: 1" makes this area grow to fill any leftover vertical space so
    the footer below it always sits at the bottom of the screen instead of
    floating up under short pages.
*/
.mainContent {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 40px;
    flex: 1;
}

.signInCard {
    width: 100%;
    max-width: 340px;
}

.signInHeading {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
}

.signInForm {
    display: flex;
    flex-direction: column;
}

.fieldLabel {
    font-size: 13px;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 6px;
}

.textInput {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #D8DBE0;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 8px;
    background-color: #FFFFFF;
}

.textInput:focus {
    outline: none;
    border-color: #5AA31E;
}

.textInput::placeholder {
    color: #A6ABB3;
}

/* Wrapper needed so the show/hide password icon can sit inside the input */
.passwordWrapper {
    position: relative;
}

.passwordWrapper .textInput {
    padding-right: 42px;
}

.togglePasswordButton {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.togglePasswordButton svg {
    width: 18px;
    height: 18px;
}

/*
    Login error message (e.g. wrong username/password), shown under the
    password field when FileMaker redirects back here with a login error
    code in the URL. Hidden by default via the "hidden" attribute in
    index.html and only shown by app.js when an error is actually present.
*/
.signInErrorMessage {
    font-size: 13px;
    font-weight: 600;
    color: #D63C3C;
    margin-bottom: 14px;
}

/*
    Positioned as a normal block below the password field rather than pulled
    up with a negative margin, since the negative margin previously made it
    overlap the password input above it — the input sat on top and
    intercepted clicks meant for the link.
*/
.forgotPasswordLink {
    align-self: flex-end;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #5AA31E;
    text-decoration: none;
    padding: 6px 0;
    margin-bottom: 14px;
}

.signInButton {
    background-color: #0055B8;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.signInButton:hover {
    background-color: #D3D3D3;
}

.dividerRow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
}

.dividerLine {
    flex: 1;
    height: 1px;
    background-color: #E5E7EB;
}

.dividerText {
    font-size: 13px;
    color: #8A8F98;
    white-space: nowrap;
}

.microsoftButton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #FFFFFF;
    border: 1px solid #D8DBE0;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    cursor: pointer;
}

.microsoftButton:hover {
    background-color: #F7F8FA;
}

.microsoftButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.createAccountRow {
    text-align: center;
    font-size: 13px;
    color: #5B6068;
    margin-top: 24px;
}

.createAccountLink {
    color: #5AA31E;
    font-weight: 600;
    text-decoration: none;
}

/*
    Bottom footer strip. The logo sits on the right hand edge of the bar,
    matching the same 30px distance from the edge that the header logo uses
    on its side (see .topHeader .logoImage's "left: 30px"), so the two
    logos line up visually as a matching pair on opposite corners of the page.
*/
.pageFooter {
    background-color: #F7F8FA;
    border-top: 1px solid #E5E7EB;
    padding: 22px 20px;
    display: flex;
    justify-content: flex-end;
}

.footerItem {
    display: flex;
    align-items: flex-end;
}

/*
    Mobile breakpoint, sized for an iPhone 16 (390px CSS width) and similar
    phones. Below 700px the header shrinks and the sign in card takes up
    the full available width, but the footer logo keeps the same right
    aligned position as desktop.
*/
@media (max-width: 700px) {
    .topHeader {
        height: 60px;
    }

    .logoImage {
        height: 30px;
    }

    .mainContent {
        padding: 32px 20px;
    }

    .signInCard {
        max-width: 100%;
    }

    .pageFooter {
        padding: 14px 10px;
    }
}