/*
 * Mobile-only layer (member portal + public pages + shell).
 *
 * Every rule lives inside a max-width media query, so viewports of 960px and up
 * (desktop / laptop browsers) never see any of this. Breakpoints match MudBlazor:
 *   xs  < 600px   (phones)
 *   sm  600-959px (large phones / small tablets; the nav drawer is an overlay here)
 *   md  >= 960px  (desktop, untouched)
 *
 * Scope classes are set on the root wrapper in MainLayout.razor:
 *   .app-member-portal  signed-in member, or any /member/* path
 *   .app-public-portal  not signed in (login, register, public anketa, potvrdi-email)
 * Employee / admin pages are intentionally not restyled here.
 */

/* ------------------------------------------------------------------ */
/* Shell: tablets and phones (nav drawer is an overlay below 960px)    */
/* ------------------------------------------------------------------ */
@media (max-width: 959.98px) {
    /* Pin / auto-hide toggle only makes sense for the docked desktop drawer. */
    .app-shell .drawer-header-left .mud-icon-button {
        display: none;
    }

    .app-shell .mud-drawer {
        max-width: 85vw;
    }
}

/* ------------------------------------------------------------------ */
/* Shell: phones                                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 599.98px) {
    /* A saved UI scale (CSS zoom) would inflate everything on a small screen. */
    :root {
        zoom: 1 !important;
    }

    /* App bar: logo fits the 56px bar, LMS + user menu collapse to icons. */
    .app-shell .app-appbar .app-brand-logo-shell {
        height: 44px;
        margin: 2px 4px;
    }

    .app-shell .app-appbar .app-brand-logo {
        max-width: min(40vw, 150px);
    }

    .app-shell .app-appbar .app-lms-link {
        min-width: 40px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .app-shell .app-appbar .app-lms-link .mud-button-label {
        font-size: 0;
    }

    .app-shell .app-appbar .app-lms-link .mud-button-icon-start {
        margin: 0;
    }

    .app-shell .app-appbar .app-user-menu {
        margin-inline-end: 0 !important;
    }

    /* "Prijavljeni kao Ime Prezime" is too long for a phone: show an account icon instead of the text. */
    .app-shell .app-appbar .app-user-menu .mud-button-label {
        font-size: 0;
    }

    .app-shell .app-appbar .app-user-menu .mud-button-label::before {
        content: "";
        display: inline-block;
        width: 28px;
        height: 28px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/></svg>") center / contain no-repeat;
    }
}

/* ------------------------------------------------------------------ */
/* Member portal + public pages: tablets and phones                    */
/* ------------------------------------------------------------------ */
@media (max-width: 959.98px) {
    /* Section headings and long free text must never push the page wider than the screen. */
    :is(.app-member-portal, .app-public-portal) .mud-typography,
    :is(.app-member-portal, .app-public-portal) .mud-alert-message {
        overflow-wrap: anywhere;
    }
}

/* ------------------------------------------------------------------ */
/* Member portal + public pages: phones                                */
/* ------------------------------------------------------------------ */
@media (max-width: 599.98px) {
    /* ---- page chrome ------------------------------------------------ */
    :is(.app-member-portal, .app-public-portal) .app-main-content > .mud-container {
        padding: 12px !important;
    }

    /* Login / register / anketa wrap their own MudContainer inside the layout container. */
    :is(.app-member-portal, .app-public-portal) .app-main-content .mud-container .mud-container {
        padding-left: 0;
        padding-right: 0;
    }

    :is(.app-member-portal, .app-public-portal) .mud-container.mt-8 {
        margin-top: 12px !important;
    }

    :is(.app-member-portal, .app-public-portal) .mud-paper.pa-4,
    :is(.app-member-portal, .app-public-portal) .mud-paper.pa-6 {
        padding: 12px !important;
    }

    :is(.app-member-portal, .app-public-portal) .mud-typography-h4 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    :is(.app-member-portal, .app-public-portal) .mud-typography-h5 {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    :is(.app-member-portal, .app-public-portal) .mud-typography-h6 {
        font-size: 1.1rem;
        line-height: 1.35;
    }

    /* ---- inputs and touch targets ----------------------------------- */
    /* 16px stops iOS Safari from zooming the page when a field is focused. */
    :is(.app-member-portal, .app-public-portal) .mud-input,
    :is(.app-member-portal, .app-public-portal) .mud-input-root,
    :is(.app-member-portal, .app-public-portal) .mud-select-input,
    :is(.app-member-portal, .app-public-portal) .mud-input-slot {
        font-size: 16px;
    }

    :is(.app-member-portal, .app-public-portal) .mud-button-root:not(.mud-icon-button) {
        min-height: 44px;
    }

    :is(.app-member-portal, .app-public-portal) .mud-icon-button:not(.mud-button-size-small) {
        min-width: 44px;
        min-height: 44px;
    }

    :is(.app-member-portal, .app-public-portal) .mud-input-adornment .mud-icon-button {
        min-width: 0;
        min-height: 0;
    }

    :is(.app-member-portal, .app-public-portal) .mud-radio,
    :is(.app-member-portal, .app-public-portal) .mud-checkbox {
        min-height: 44px;
    }

    /*
     * Floating labels: MudBlazor only shrinks the label when the server knows the value (.mud-shrink),
     * on :focus-within, or for Chrome autofill. Phones often fill a field without the server being told
     * (password manager / keyboard suggestion / slow circuit), so the typed text sat under the label.
     * A required field that is no longer empty (:valid) now shrinks its label too (same rules as Mud).
     */
    :is(.app-member-portal, .app-public-portal) .mud-input:has(input:required:valid) ~ label.mud-input-label.mud-input-label-inputcontrol {
        color: var(--mud-palette-text-primary);
    }

    :is(.app-member-portal, .app-public-portal) .mud-input:has(input:required:valid) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
        transform: translate(14px, -6px) scale(0.75);
        max-width: calc((100% - 14px) / 0.75);
    }

    :is(.app-member-portal, .app-public-portal) .mud-input.mud-input-outlined:has(input:required:valid) > .mud-input-outlined-border legend {
        width: auto;
        padding: 0 5px;
    }

    /* Fixed inline widths (Style="max-width: 220px", "min-width: 140px") from the request forms. */
    :is(.app-member-portal, .app-public-portal) .mud-input-control[style*="max-width"],
    :is(.app-member-portal, .app-public-portal) .mud-input-control[style*="min-width"] {
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ---- rows of buttons -------------------------------------------- */
    /* Opt-in: rows of actions become one full-width button per line. */
    :is(.app-member-portal, .app-public-portal) .member-mobile-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    :is(.app-member-portal, .app-public-portal) .member-mobile-actions > .mud-button-root,
    :is(.app-member-portal, .app-public-portal) .member-mobile-actions > .mud-tooltip-root,
    :is(.app-member-portal, .app-public-portal) .member-mobile-actions > .mud-tooltip-root > .mud-button-root {
        width: 100%;
    }

    /* Category buttons on the Zahtjevi hub. */
    :is(.app-member-portal, .app-public-portal) .member-hub-btn {
        width: 100%;
        min-height: 48px;
        white-space: normal;
        line-height: 1.25;
    }

    /* Financijska kartica: Učitaj takes the free width, print icon sits beside it. */
    :is(.app-member-portal, .app-public-portal) .member-card-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    :is(.app-member-portal, .app-public-portal) .member-card-actions > .mud-button-root:first-child {
        flex: 1 1 auto;
    }

    :is(.app-member-portal, .app-public-portal) .member-card-actions > .mud-icon-button {
        flex: 0 0 auto;
        margin-left: 0 !important;
    }

    /* Rows like "file name .... [Ukloni]" and "title .... [chip]": text shrinks, the control keeps its size. */
    :is(.app-member-portal, .app-public-portal) .mud-stack-row > .mud-typography {
        min-width: 0;
    }

    :is(.app-member-portal, .app-public-portal) .mud-stack-row > .mud-chip,
    :is(.app-member-portal, .app-public-portal) .mud-stack-row > .mud-button-root {
        flex-shrink: 0;
    }

    /* ---- tabs -------------------------------------------------------- */
    :is(.app-member-portal, .app-public-portal) .mud-tab {
        min-width: 0 !important;
        padding: 6px 12px;
    }

    /* ---- dialogs and snackbars -------------------------------------- */
    :is(.app-member-portal, .app-public-portal) .mud-dialog {
        margin: 8px;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px);
    }

    :is(.app-member-portal, .app-public-portal) .mud-dialog .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    :is(.app-member-portal, .app-public-portal) .mud-snackbar {
        min-width: 0 !important;
        max-width: calc(100vw - 16px);
    }

    /* ---- member request forms (pozajmica KUP etc.) ------------------- */
    :is(.app-member-portal, .app-public-portal) .member-zahtjev-section-heading {
        font-size: 1rem;
        padding: 0.5rem 0.65rem;
    }

    :is(.app-member-portal, .app-public-portal) .pkup-section-3-subitems {
        padding-left: 0.5rem;
    }

    :is(.app-member-portal, .app-public-portal) .pkup-sub-label {
        padding-left: 1rem;
        text-indent: -1rem;
    }

    :is(.app-member-portal, .app-public-portal) .pkup-sub-fields {
        padding-left: 0;
        max-width: 100%;
    }

    /* Euroherc offer tables (raw <table>): long description left, amount right. */
    :is(.app-member-portal, .app-public-portal) table[style*="border-collapse"] td {
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    :is(.app-member-portal, .app-public-portal) table[style*="border-collapse"] td:last-child {
        white-space: nowrap;
        padding-left: 0.5rem;
    }
}

/* ------------------------------------------------------------------ */
/* Desktop / mobile variants of the same control (Moji upiti, Objave)  */
/* Both are rendered; CSS shows exactly one, so desktop markup output   */
/* and layout stay as they were.                                        */
/* ------------------------------------------------------------------ */
@media (min-width: 960px) {
    .member-only-mobile {
        display: none !important;
    }
}

@media (max-width: 959.98px) {
    .member-only-desktop {
        display: none !important;
    }

    /* Thread cards (list of upiti / objave) */
    :is(.app-member-portal, .app-public-portal) .member-thread-card {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 64px;
        margin-top: 8px;
        padding: 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 12px;
        background: var(--mud-palette-surface);
        color: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card:hover,
    :is(.app-member-portal, .app-public-portal) .member-thread-card:active {
        background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card--active {
        border-color: var(--mud-palette-primary);
        border-width: 2px;
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--mud-palette-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card-icon--post {
        color: var(--mud-palette-secondary);
        background: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent);
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card-main {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card-title {
        font-weight: 600;
        overflow: hidden;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        font-size: 0.75rem;
        color: var(--mud-palette-text-secondary);
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card-meta-item .mud-icon-root {
        font-size: 1rem;
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-card-chevron {
        flex: 0 0 auto;
        color: var(--mud-palette-text-secondary);
    }

    /* Empty list */
    :is(.app-member-portal, .app-public-portal) .member-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 24px 8px;
        text-align: center;
        color: var(--mud-palette-text-secondary);
    }

    :is(.app-member-portal, .app-public-portal) .member-empty-state .mud-icon-root {
        font-size: 3rem;
        opacity: 0.6;
    }

    /* List toolbar: title + icon refresh, then search */
    :is(.app-member-portal, .app-public-portal) .member-list-toolbar {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    :is(.app-member-portal, .app-public-portal) .member-list-toolbar-title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    :is(.app-member-portal, .app-public-portal) .member-list-toolbar-title .mud-icon-root {
        color: var(--mud-palette-primary);
    }

    /* Collapsible "Novi upit / objava" panel */
    :is(.app-member-portal, .app-public-portal) .member-new-panel-header {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        padding: 4px 0;
        border: 0;
        background: none;
        color: var(--mud-palette-primary);
        font: inherit;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

    :is(.app-member-portal, .app-public-portal) .member-new-panel-header > span {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    :is(.app-member-portal, .app-public-portal) .member-new-panel:not(.member-new-panel--open) .member-new-panel-body {
        display: none;
    }

    /* Thread header: back arrow + title + meta */
    :is(.app-member-portal, .app-public-portal) .member-thread-header {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    :is(.app-member-portal, .app-public-portal) .member-thread-header-main {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    :is(.app-member-portal, .app-public-portal) .member-send-btn {
        border-radius: 24px;
    }
}