/* =========================================================
   ORALSCAN AI V2 — REGISTER APP RESPONSIVE
   MATCHED TO CANCER APP
   ========================================================= */


/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 992px) {

    .app-content {
        width: min(
            calc(100% - 36px),
            var(--container-width)
        );
    }

    .app-header-inner {
        width: min(
            calc(100% - 36px),
            var(--container-width)
        );
    }

    .app-footer-inner {
        width: min(
            calc(100% - 36px),
            var(--container-width)
        );
    }

    .home-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .app-content {
        width: min(
            calc(100% - 28px),
            var(--container-width)
        );

        padding:
            26px
            0
            40px;
    }


    /* HEADER */

    .app-header-inner {
        width: min(
            calc(100% - 28px),
            var(--container-width)
        );

        min-height: 68px;

        gap: 18px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;

        border-radius: 12px;
    }

    .brand-name {
        font-size: 1.02rem;
    }

    .brand-version {
        font-size: 0.72rem;
    }

    .auth-header-copy {
        gap: 8px;
    }

    .auth-header-label {
        display: none;
    }


    /* AUTH */

    .auth-container {
        min-height: auto;

        padding:
            20px
            0;
    }

    .auth-card {
        width: 100%;
        max-width: 520px;

        margin: 0 auto;
    }


    /* HOME */

    .home-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /* FORM */

    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
    }


    /* BUTTON */

    .btn {
        min-height: 46px;
    }


    /* FOOTER */

    .app-footer-inner {
        width: min(
            calc(100% - 28px),
            var(--container-width)
        );

        flex-direction: column;
        align-items: flex-start;

        gap: 12px;

        padding:
            20px
            0;
    }

    .footer-meta {
        flex-wrap: wrap;
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .app-content {
        width: calc(100% - 20px);

        padding:
            18px
            0
            28px;
    }


    /* HEADER */

    .app-header-inner {
        width: calc(100% - 20px);

        min-height: 64px;

        gap: 12px;
    }

    .app-brand {
        gap: 9px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;

        border-radius: 11px;

        font-size: 0.78rem;
    }

    .brand-name {
        font-size: 0.96rem;
    }

    .brand-version {
        font-size: 0.68rem;
    }

    .auth-header-status {
        min-height: 30px;

        padding:
            0
            9px;

        font-size: 0.69rem;
    }


    /* AUTH */

    .auth-container {
        padding:
            8px
            0;
    }

    .auth-card {
        padding:
            22px
            18px;

        border-radius:
            var(--radius-lg);
    }

    .auth-title {
        font-size: 1.65rem;
    }

    .auth-subtitle {
        margin-bottom: 24px;

        font-size: 0.9rem;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        font-size: 0.86rem;
    }


    /* BUTTON */

    .button-wrapper {
        margin-top: 22px;
    }

    .button-wrapper .btn {
        width: 100%;
    }


    /* HOME */

    .home-card {
        padding:
            22px
            18px;
    }


    /* FOOTER */

    .app-footer-inner {
        width: calc(100% - 20px);

        padding:
            18px
            0;
    }

    .footer-logo {
        font-size: 0.86rem;
    }

    .footer-description {
        font-size: 0.72rem;
    }

    .footer-meta {
        gap: 6px;

        font-size: 0.7rem;
        line-height: 1.5;
    }

}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .app-content {
        width: calc(100% - 16px);
    }

    .app-header-inner {
        width: calc(100% - 16px);
    }

    .app-footer-inner {
        width: calc(100% - 16px);
    }

    .brand-mark {
        width: 36px;
        height: 36px;

        font-size: 0.74rem;
    }

    .brand-name {
        font-size: 0.9rem;
    }

    .brand-version {
        font-size: 0.64rem;
    }

    .auth-header-status {
        font-size: 0.65rem;
    }

    .auth-card {
        padding:
            20px
            15px;
    }

    .auth-title {
        font-size: 1.5rem;
    }

    .auth-subtitle {
        font-size: 0.84rem;
    }

}