/* ---- Sign-in section theme (scoped) ---- */
#sign-in {
    --lt-blue: #eaf4ff;
    --lt-gray: #f7f7f8;
    --black: #121212;
    --red: #c0392b;
    /* spacing scale */
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
}

#sign-in {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--lt-blue);
    padding: var(--s-8) var(--s-6);
}

    #sign-in .container {
        display: block;
    }

    /* Cards */
    #sign-in .card {
        padding: var(--s-5);
        background: var(--lt-gray);
        width: 100%;
        max-width: 400px;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
        margin: 0 auto;
    }

    /* Field + labels + inputs */
    #sign-in .field {
        display: block;
    }

    #sign-in .label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 6px 0;
        color: var(--black);
    }

    /* Make icons sit inside the inputs (left-justified) */
    #sign-in .input-group {
        position: relative;
    }

        #sign-in .input-group .input-group-text {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            border: none;
            background: transparent;
            color: #666;
            z-index: 2;
            pointer-events: none;
            padding: 0;
            line-height: 1;
        }

            #sign-in .input-group .input-group-text i {
                font-size: 15px;
            }

    /* Style both .input and .form-control so your existing classes work */
    #sign-in .input,
    #sign-in .form-control {
        width: 100%;
        height: 44px;
        border-radius: 8px;
        border: 1px solid #d6d6dc;
        background: #fff;
        padding: 10px 12px 10px 36px; /* left pad for icon */
        outline: none;
    }

        #sign-in .input:focus,
        #sign-in .form-control:focus {
            border-color: #6aa6ff;
            box-shadow: 0 0 0 3px rgba(106,166,255,.25);
        }
    /* Optional: change icon color on focus using :focus-within */
    #sign-in .input-group:focus-within .input-group-text {
        color: #2a6ad6;
    }

    /* Buttons – map to your existing Bootstrap classes */
    #sign-in .btn.btn-primary,
    #sign-in .btn.primary {
        width: 100%;
        height: 44px;
        border-radius: 8px;
        border: 0;
        font-weight: 600;
    }

    #sign-in .btn.btn-warning,
    #sign-in .btn.secondary {
        width: 100%;
        height: 44px;
        border-radius: 8px;
        border: 0;
        font-weight: 600;
    }

    /* Typography */
    #sign-in h2 {
        margin: 0 0 12px 0;
        font-size: 22px;
    }

    #sign-in h3 {
        margin: 0 0 16px 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--black);
        text-align: center;
    }

    /* Stack the two cards with spacing */
    #sign-in .stack {
        display: flex;
        flex-direction: column;
        gap: var(--s-4);
        align-items: center;
    }

    #sign-in .card-inner {
        padding: var(--s-4);
    }

    #sign-in .actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
    }

    #sign-in .forgot {
        font-size: 13px;
        color: var(--red);
        font-weight: 600;
        text-decoration: none;
    }