/* =========================================================
   DM Studio AI
   PWA, Language Selector, Logout, Connection Status
   and Offline Submission UI
   ========================================================= */


/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */

.language-switcher {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: .65rem;
    padding: .25rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}

.language-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.25rem;
    min-height: 2rem;

    padding: .25rem .55rem;

    border-radius: 999px;

    font-size: .78rem;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    color: inherit;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.language-switcher a:hover,
.language-switcher a:focus-visible {
    background: rgba(255, 255, 255, .12);
}

.language-switcher a.active {
    background: rgba(255, 255, 255, .18);
}


/* =========================================================
   SECURE LOGOUT FORM
   ========================================================= */

.nav-menu .nav-logout-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-menu .nav-logout-form .nav-logout {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    outline: 0;

    background: transparent;

    color: #ff6b6b !important;

    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;

    padding: 8px 14px;

    border-radius: 8px;

    cursor: pointer;
    white-space: nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.nav-menu .nav-logout-form .nav-logout:hover,
.nav-menu .nav-logout-form .nav-logout:focus-visible {
    background: rgba(255, 107, 107, .14);

    color: #ff8a8a !important;
}

.nav-menu .nav-logout-form .nav-logout:active {
    transform: translateY(1px);
}


/* =========================================================
   CONNECTION / SESSION STATUS BANNERS
   ========================================================= */

.dm-connection-banner,
.dm-session-banner {
    position: fixed;

    left: 50%;
    transform: translateX(-50%);

    z-index: 9999;

    width: min(92vw, 760px);

    padding: .8rem 1rem;

    border-radius: 0 0 14px 14px;

    box-shadow: 0 8px 28px rgba(0, 0, 0, .2);

    text-align: center;
    font-weight: 700;
    line-height: 1.4;
}


/* Offline */

.dm-connection-banner {
    top: 0;

    background: #fff3cd;
    color: #513d00;
}


/* Back online */

.dm-connection-banner.is-online {
    background: #d1f7df;
    color: #154f2d;
}


/* Session warning */

.dm-session-banner {
    bottom: 1rem;

    border-radius: 14px;

    background: #fff3cd;
    color: #513d00;
}


/* =========================================================
   OFFLINE VISIBILITY
   ========================================================= */

.dm-offline-only {
    display: none;
}

body.dm-is-offline .dm-offline-only {
    display: block;
}


/* =========================================================
   OFFLINE STUDENT SUBMISSION INFORMATION
   ========================================================= */

.dm-offline-file-note,
.dm-sync-privacy-note {
    margin: .45rem 0 .9rem;

    font-size: .9rem;
    line-height: 1.45;

    opacity: .82;
}


/* =========================================================
   OFFLINE SYNC PANEL
   ========================================================= */

.dm-sync-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 1.25rem;

    padding: 1rem;

    border: 1px solid rgba(16, 24, 39, .14);

    border-radius: 14px;

    background: rgba(255, 255, 255, .7);
}

.dm-sync-panel h3 {
    margin: 0 0 .3rem;
}

.dm-sync-panel p {
    margin-top: .25rem;
}


/* =========================================================
   SYNC NOW BUTTON
   ========================================================= */

.dm-sync-now {
    flex: 0 0 auto;

    min-width: 7.25rem;

    cursor: pointer;
}

.dm-sync-now:disabled {
    cursor: not-allowed;

    opacity: .5;
}


/* =========================================================
   SYNC STATUS TOAST
   ========================================================= */

.dm-sync-toast {
    position: fixed;

    right: 1rem;
    bottom: 1rem;

    z-index: 10000;

    width: min(92vw, 430px);

    padding: .9rem 1rem;

    border-radius: 14px;

    box-shadow: 0 10px 34px rgba(0, 0, 0, .22);

    font-weight: 700;
    line-height: 1.4;

    background: #e7f1ff;
    color: #163d67;
}


/* Successful sync */

.dm-sync-toast.is-success {
    background: #d1f7df;
    color: #154f2d;
}


/* Offline / waiting / warning */

.dm-sync-toast.is-warning {
    background: #fff3cd;
    color: #513d00;
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 900px) {

    .language-switcher {
        order: 3;

        margin-left: auto;
    }

    .nav-menu .nav-logout-form {
        flex-shrink: 0;
    }
}


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

@media (max-width: 640px) {

    .language-switcher {
        gap: .15rem;

        margin-left: .25rem;

        padding: .2rem;
    }

    .language-switcher a {
        min-width: 2rem;
        min-height: 1.9rem;

        padding: .2rem .4rem;

        font-size: .72rem;
    }


    /* Logout */

    .nav-menu .nav-logout-form .nav-logout {
        padding: 7px 9px;

        font-size: .82rem;
    }


    /* Connection messages */

    .dm-connection-banner,
    .dm-session-banner {
        width: 90vw;

        padding: .7rem .8rem;

        font-size: .9rem;
    }


    /* Offline sync section */

    .dm-sync-panel {
        align-items: stretch;

        flex-direction: column;

        gap: .75rem;

        padding: .9rem;
    }

    .dm-sync-now {
        width: 100%;
    }


    /* Status message */

    .dm-sync-toast {
        right: 4vw;
        bottom: .75rem;

        width: 92vw;

        padding: .8rem .9rem;

        font-size: .92rem;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .language-switcher {
        margin-left: .15rem;
    }

    .language-switcher a {
        min-width: 1.85rem;

        padding-left: .3rem;
        padding-right: .3rem;

        font-size: .68rem;
    }

    .nav-menu .nav-logout-form .nav-logout {
        padding: 6px 7px;

        font-size: .78rem;
    }

    .dm-sync-panel {
        border-radius: 12px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.nav-menu .nav-logout-form .nav-logout:focus-visible,
.language-switcher a:focus-visible,
.dm-sync-now:focus-visible {
    outline: 3px solid rgba(79, 124, 255, .55);
    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dm-connection-banner,
    .dm-session-banner,
    .dm-sync-toast,
    .language-switcher a,
    .nav-menu .nav-logout-form .nav-logout {
        transition: none !important;
    }
}



/* =========================================================
   DM STUDIO AI - FINAL HEADER RESPONSIVE OVERRIDE
   Keep this at the VERY END of pwa.css
   ========================================================= */


/* -----------------------------
   DESKTOP
   ----------------------------- */

.language-switcher-mobile {
    display: none !important;
}

.language-switcher-desktop {
    display: flex !important;
}


/* Logo */
.dm-header .logo {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;

    flex: 0 0 auto !important;

    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;

    text-decoration: none !important;
}


/* =========================================================
   TABLET + PHONE
   ========================================================= */

@media (max-width: 900px) {

    /*
     * IMPORTANT:
     * desktop language selector must completely disappear
     */
    .dm-header .language-switcher-desktop {
        display: none !important;
    }

    /*
     * Mobile selector exists ONLY inside hamburger menu
     */
    .dm-header .nav-menu .language-switcher-mobile {
        display: flex !important;
    }


    /*
     * Hide desktop dashboard
     */
    .dm-header .nav-dashboard-desktop {
        display: none !important;
    }


    /*
     * Header becomes only:
     *
     * DM Studio AI              ☰
     */
    .dm-header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 72px;

        padding: 0 18px !important;
        gap: 12px !important;
    }


    /*
     * FULL LOGO - never truncate
     */
    .dm-header .logo {
        display: inline-flex !important;
        align-items: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        flex: 1 1 auto !important;

        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;

        font-size: 1.35rem !important;
        line-height: 1 !important;

        text-decoration: none !important;
    }


    /*
     * Hamburger stays at far right
     */
    .dm-header .hamburger {
        display: flex !important;

        flex: 0 0 auto !important;

        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;

        margin: 0 !important;
        padding: 8px !important;

        z-index: 1002;
    }


    /*
     * Menu language selector
     */
    .nav-menu .language-switcher-mobile {
        width: 100% !important;

        margin: 18px 0 0 !important;
        padding: 7px !important;

        justify-content: center !important;
        gap: 6px !important;

        border-radius: 14px;
    }


    .nav-menu .language-switcher-mobile a {
        flex: 1 1 0 !important;

        min-width: 0 !important;
        min-height: 42px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 7px 5px !important;
    }
}


/* =========================================================
   PHONE - 600px and below
   ========================================================= */

@media (max-width: 600px) {

    .dm-header-inner {
        min-height: 68px !important;

        padding-left: 14px !important;
        padding-right: 12px !important;

        gap: 8px !important;
    }


    .dm-header .logo {
        font-size: 1.25rem !important;

        letter-spacing: -0.02em !important;

        /* absolutely prevent the ellipsis */
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: nowrap !important;
    }


    .dm-header .hamburger {
        width: 42px !important;
        height: 42px !important;

        padding: 7px !important;

        justify-content: center !important;
        align-items: center !important;
    }
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 380px) {

    .dm-header-inner {
        padding-left: 10px !important;
        padding-right: 9px !important;
    }


    .dm-header .logo {
        font-size: 1.16rem !important;
    }


    .dm-header .hamburger {
        width: 38px !important;
        height: 38px !important;
    }
}