/*
    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: #000000;
    height: 65px;
    width: 100%;
    flex-shrink: 0;
    position: relative;
}

/* Fixed 30px from the left edge and vertically centered in the bar */
.logoImage {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 109px;
    height: 40px;
}

/*
    Main content splits into two columns on desktop using CSS grid: a left
    column for the welcome text and feature list, and a right column for the
    sign in card. Grid (rather than flexbox) lets the feature list sit in the
    left column below the welcome text while still being a separate sibling
    element, which we need so mobile can re-order it independently.

    "signIn" spans both rows ("welcome signIn" / "features signIn") so its
    total height can be compared against welcome + features stacked. Row 1's
    height is driven by whichever is taller: the welcome text, or however
    much of signIn's height belongs in row 1 once row 2 has taken enough to
    fit the feature list. In practice the welcome text is short and the
    feature list is tall, so nearly all of signIn's extra height (beyond
    welcome + features combined) lands in row 1 — which pushes row 2, and
    therefore the feature list pinned to its top, down the page instead of
    sitting flush under the welcome text. gridTemplateRows below fixes this
    by sizing row 1 from the welcome text alone (min-content) and letting
    row 2 take all remaining space, so extra height from a taller sign in
    card shows up as gap below the feature list instead of above it.
*/
.mainContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "welcome signIn"
        "features signIn";
    grid-template-rows: min-content 1fr;
    align-items: start;
    justify-content: center;
    gap: 0 60px;
    padding: 64px 40px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    /* Grows 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 */
    flex: 1;
}

/* Left welcome panel */
.welcomePanel {
    grid-area: welcome;
    max-width: 460px;
    padding-top: 24px;
}

.welcomeHeading {
    font-size: 32px;
    font-weight: 700;
    color: #1A1A1A;
}

.welcomeHeadingAccent {
    color: #5AA31E;
}

.welcomeText {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: #5B6068;
    max-width: 360px;
}

.featureList {
    grid-area: features;
    list-style: none;
    max-width: 460px;
    margin-top: 48px;
}

.featureItem {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
}

.featureIcon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #EAF6DE;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featureIcon svg {
    width: 22px;
    height: 22px;
}

.featureTitle {
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 4px;
}

.featureDescription {
    font-size: 14px;
    line-height: 1.4;
    color: #5B6068;
}

/* Right hand sign in card */
.signInPanel {
    grid-area: signIn;
    max-width: 380px;
    display: flex;
    justify-content: center;
    border-left: 1px solid #E5E7EB;
    padding-left: 60px;
}

.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: #3F8C1D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

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

.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 with support and trust messaging, laid out in a row of four on desktop */
.pageFooter {
    display: flex;
    justify-content: center;
    gap: 48px;
    background-color: #F7F8FA;
    border-top: 1px solid #E5E7EB;
    padding: 32px 40px;
    flex-wrap: wrap;
    /* Fallback for when mainContent doesn't need to grow (e.g. it's already
       taller than the viewport) — keeps the footer pinned below it rather
       than being dragged up */
    margin-top: auto;
}

.footerItem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 220px;
}

.footerIcon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.footerIcon svg {
    width: 20px;
    height: 20px;
}

.footerTitle {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 2px;
}

.footerDescription {
    font-size: 13px;
    line-height: 1.4;
    color: #5B6068;
}

.footerLink {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5AA31E;
    text-decoration: none;
}

/*
    Mobile breakpoint, sized for an iPhone 16 (390px CSS width) and similar
    phones. Below 700px we drop to a single stacked column, mirroring the
    mobile mockup: header with icons, welcome text, sign in card, then the
    feature list underneath.
*/
@media (max-width: 700px) {
    .topHeader {
        height: 60px;
    }

    .logoImage {
        width: 80px;
        height: 30px;
    }

    /*
        Stack everything into a single centered column: welcome text first,
        then the sign in card, then the one feature highlight underneath.
        Redefining grid-template-areas/columns as a single column lets us
        reorder the three sections without needing to fight flexbox order
        across nested elements.
    */
    .mainContent {
        grid-template-columns: 1fr;
        grid-template-areas:
            "welcome"
            "signIn"
            "features";
        /* align-items controls the vertical position of each section
           within its own grid row. It was previously "center", which
           vertically centered the feature list within its row instead of
           keeping it pinned to the top under the sign in card — switched
           to "start" so each section sits at the top of its own space.
           justify-items stays "center" since that's the horizontal axis,
           which is what actually centers each section side to side. */
        align-items: start;
        justify-items: center;
        padding: 32px 20px;
        gap: 32px;
        text-align: center;
    }

    .welcomePanel {
        max-width: 100%;
        padding-top: 0;
        width: 100%;
    }

    .welcomeHeading {
        font-size: 26px;
    }

    .welcomeText {
        max-width: 100%;
    }

    /*
        Only show the first feature on mobile, positioned below the sign in
        card. .mainContent's "gap" already adds 32px above this (the same
        gap used between every stacked section), so we only need to add the
        extra 33px on top of that to match the ~65px gap below the feature
        list before the footer (.pageFooter's own 32px top padding plus its
        1px top border). Matching this makes the spacing above and below
        the feature list feel even, rather than the sign in card feeling
        cramped against it.
    */
    .featureList {
        margin-top: 33px;
        width: 100%;
        max-width: 100%;
    }

    .featureItem {
        text-align: left;
    }

    .signInPanel {
        max-width: 100%;
        border-left: none;
        padding-left: 0;
        width: 100%;
    }

    .signInCard {
        max-width: 100%;
    }

    /*
        The card as a whole stays centered (inherited from .mainContent's
        text-align: center), but the username/password labels and inputs
        need to line up with each other on their left edge rather than
        each centering independently.
    */
    .fieldLabel {
        text-align: left;
    }

    /* Footer stacks into a single centered column on mobile */
    .pageFooter {
        flex-direction: column;
        align-items: center;
        text-align: left;
        padding: 24px 20px;
        gap: 24px;
    }
}