/* Admin portal styles.
   --------------------------------------------------------------------------------------------
   This file is linked from App.razor, which is the single host page for ALL THREE portals, so
   every rule here MUST be scoped under .admin-portal — the class AdminLayout puts on its root and
   nothing in the donor or org portals renders. A bare selector here would reach them too, and the
   donor phone shell already owns generic names like .app-shell (app.css, "@media (max-width: 834px)").

   Nothing outside the phone media query, either: at 835px and up the admin portal is the desktop
   layout it has always been, untouched. The one exception is the Feature Requests section at the
   end: those pages were built responsive from the start, and their fr-* classes are rendered by
   nothing else, so styling them at every width changes no existing page. */

@media (max-width: 834px) {

    /* ---- shell ------------------------------------------------------------------------------
       One column: FluentHeader, then the page, which is the only thing that scrolls.

       NOT "html { overflow: hidden }" — pinning the root that way is what made iOS WebKit stop
       treating the page as scrollable and lift the donor app's fixed bottom bar off the bottom
       (see the note at app.css "@media (max-width: 834px)"). Bounding the shell to the viewport
       and letting an inner element scroll is the shape that behaves.

       No "overflow: hidden" here either. The height alone is what lets .admin-shell__body below be
       a bounded scroller, and clipping at this level would also clip the pages that render OUTSIDE
       the shell — AuthorizeView's NotAuthorized branch, i.e. the login page, whose 200px-wide box
       holds a ~300px Turnstile widget. Anything that does overflow spills and scrolls the document,
       which is the normal, safe behaviour. */
    .admin-portal--phone {
        display: flex;
        flex-direction: column;
        height: 100dvh;
    }

    .admin-portal--phone > fluent-header {
        flex: 0 0 auto;
    }

    .admin-portal--phone .admin-shell {
        flex: 1 1 auto;
        min-height: 0; /* load-bearing: without it a flex item refuses to shrink below its content */
        display: flex;
        flex-direction: column;
    }

    .admin-portal--phone .admin-shell__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px;
        /* A fixed inset rather than env(safe-area-inset-bottom), which resolves to 0 here: the
           viewport meta deliberately has no viewport-fit=cover (see App.razor). Matches the 28px
           the donor portal uses. */
        padding-bottom: 28px;
    }

    /* Fluent renders the header's content in a flex row; the hamburger is the first item. */
    .admin-portal__hamburger {
        width: 44px;
        height: 44px;
        margin-left: -10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: inherit;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* ---- drawer -----------------------------------------------------------------------------
       z-index sits above Fluent's dialog backdrop layer so the menu is reachable with a page-level
       overlay showing. */
    .admin-drawer {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
    }

    .admin-drawer__scrim {
        position: absolute;
        inset: 0;
        border: 0;
        padding: 0;
        background: rgba(25, 28, 24, 0.45);
        cursor: pointer;
    }

    .admin-drawer__panel {
        position: relative;
        width: min(320px, 86vw);
        height: 100%;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        box-shadow: 4px 0 20px rgba(25, 28, 24, 0.18);
    }

    .admin-drawer__head {
        flex: 0 0 auto;
        background: #024923;
        color: #ffffff;
        padding: 12px 6px 12px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .admin-drawer__brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .admin-drawer__brand-name {
        display: block;
        font-size: 16px;
        font-weight: 600;
    }

    .admin-drawer__brand-sub {
        font-size: 13px;
        font-weight: 400;
        color: #b9d6c3;
    }

    .admin-drawer__admin {
        display: block;
        font-size: 11.5px;
        color: #b9d6c3;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-drawer__close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        color: #ffffff;
        cursor: pointer;
        flex-shrink: 0;
    }

    .admin-drawer__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 6px 0;
    }

    .admin-drawer__group {
        margin: 10px 16px 2px 16px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #8a8577;
    }

    .admin-drawer__link {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        padding: 0 16px;
        color: #191c18;
        text-decoration: none;
        border-left: 4px solid transparent;
    }

    .admin-drawer__link--child {
        min-height: 42px;
        padding-left: 30px;
    }

    .admin-drawer__link--active {
        background: #eaf2ec;
        border-left-color: #024923;
        color: #024923;
    }

    .admin-drawer__link--active .admin-drawer__label {
        font-weight: 700;
    }

    .admin-drawer__label {
        flex: 1 1 auto;
        font-size: 14.5px;
    }

    .admin-drawer__badge {
        min-width: 22px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        flex-shrink: 0;
    }

    .admin-drawer__badge--critical {
        background: #b3261e;
    }

    .admin-drawer__badge--warn {
        background: #b25000;
    }

    .admin-drawer__badge--ok {
        background: #024923;
    }

    .admin-drawer__foot {
        flex: 0 0 auto;
        border-top: 1px solid #e2ddcd;
        padding: 8px 12px 28px 12px;
    }

    .admin-drawer__signout {
        width: 100%;
        height: 44px;
        border-radius: 10px;
        border: 1px solid #dcd6c6;
        background: #ffffff;
        font-size: 13.5px;
        font-weight: 600;
        color: #191c18;
        cursor: pointer;
    }

    /* ---- View-as (admin impersonation) ------------------------------------------------------
       The donor and org portals are already responsive, so the iframe just needs the whole screen
       instead of the hardcoded 1320/1420px desktop dialog. */
    .admin-portal--phone .admin-viewas::part(control) {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        padding: 0;
    }

    .admin-viewas__frame {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        border: 0;
    }

    /* ---- Transactions: the phone card feed ---------------------------------------------------
       Replaces the 10-column FluentDataGrid below 834px. Desktop keeps the grid; the page chooses
       between them in C#, because a grid that wide cannot become cards with media queries alone. */

    /* Cancels .admin-shell__body's padding so the sticky bars reach the edges and stick at top: 0
       with nothing showing through above them. */
    .admin-tx {
        margin: -12px -12px -28px -12px;
        display: flex;
        flex-direction: column;
    }

    .admin-tx__bar {
        position: sticky;
        top: 0;
        z-index: 6;
        background: #ffffff;
        border-bottom: 1px solid #E2DDCD;
        padding: 10px 12px;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .admin-tx__search {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 42px;
        padding: 0 12px;
        background: #F5F3EC;
        border: 1px solid #E2DDCD;
        border-radius: 10px;
        color: #5A6158;
    }

        .admin-tx__search input {
            flex: 1 1 auto;
            min-width: 0;
            border: 0;
            background: transparent;
            font-size: 14px;
            color: #191C18;
            outline: none;
        }

    .admin-tx__iconbtn {
        position: relative;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #DCD6C6;
        border-radius: 10px;
        background: #ffffff;
        color: #191C18;
        cursor: pointer;
        flex-shrink: 0;
    }

    .admin-tx__iconbtn--on {
        background: #024923;
        border-color: #024923;
        color: #ffffff;
    }

    .admin-tx__count {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        border-radius: 10px;
        background: #A3231B;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        line-height: 19px;
        text-align: center;
        border: 2px solid #ffffff;
    }

    .admin-tx__chips {
        background: #ffffff;
        border-bottom: 1px solid #E2DDCD;
        padding: 0 12px 10px 12px;
        display: flex;
        gap: 6px;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-tx__chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 30px;
        padding: 0 8px 0 11px;
        border-radius: 15px;
        background: #E9F4EC;
        border: 1px solid #C2DFCB;
        font-size: 12.5px;
        font-weight: 600;
        color: #1A4A2B;
        white-space: nowrap;
        cursor: pointer;
        flex-shrink: 0;
    }

    .admin-tx__chip-clear {
        height: 30px;
        padding: 0 10px;
        border: 0;
        background: transparent;
        font-size: 12.5px;
        font-weight: 600;
        color: #8A5A00;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .admin-tx__daybar {
        position: sticky;
        top: 62px;
        z-index: 5;
        background: #FBFAF6;
        border-bottom: 1px solid #E2DDCD;
        padding: 6px 4px;
        display: flex;
        align-items: center;
    }

    .admin-tx__daynav {
        width: 44px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        color: #3D443B;
        cursor: pointer;
    }

        .admin-tx__daynav:disabled {
            color: #C4BDA9;
            cursor: not-allowed;
        }

    .admin-tx__daylabel {
        flex: 1 1 auto;
        text-align: center;
        min-width: 0;
    }

    .admin-tx__dayname {
        font-size: 14.5px;
        font-weight: 600;
        color: #191C18;
    }

    .admin-tx__daysum {
        font-size: 11.5px;
        color: #5A6158;
        margin-top: 1px;
    }

    .admin-tx__mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-weight: 500;
    }

    .admin-tx__list {
        padding: 10px 12px 28px 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .admin-tx__empty {
        padding: 40px 24px;
        text-align: center;
        color: #5A6158;
        font-size: 14px;
    }

    /* ---- one card ---------------------------------------------------------------------------- */
    .admin-txc {
        display: flex;
        width: 100%;
        background: #ffffff;
        border: 1px solid #E2DDCD;
        border-radius: 12px;
        overflow: hidden;
        padding: 0;
        text-align: left;
        cursor: pointer;
        font: inherit;
        color: inherit;
    }

    .admin-txc__stripe {
        width: 4px;
        flex-shrink: 0;
    }

    .admin-txc__main {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .admin-txc__row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .admin-txc__amount {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 18px;
        font-weight: 600;
        color: #191C18;
    }

    .admin-txc__type {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .admin-txc__status {
        height: 21px;
        padding: 0 8px;
        border-radius: 11px;
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        line-height: 21px;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: auto;
    }

    .admin-txc__party {
        font-size: 13.5px;
        color: #191C18;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-txc__party--strong {
        font-weight: 600;
    }

    .admin-txc__flag {
        font-size: 11px;
        font-weight: 600;
        border-radius: 4px;
        padding: 1px 5px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .admin-txc__flag--manual {
        color: #6E4C05;
        background: #FAF0DA;
    }

    .admin-txc__flag--noacct {
        color: #8A3B00;
        background: #FBE9DC;
    }

    .admin-txc__flag--hold {
        color: #ffffff;
        background: #3D443B;
    }

    .admin-txc__flag--campaign {
        color: #024923;
        background: #EAF2EC;
    }

    .admin-txc__meta {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        color: #5A6158;
        min-width: 0;
    }

    .admin-txc__meta-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---- sheets (filters, row actions) -------------------------------------------------------- */
    .admin-sheet {
        position: fixed;
        inset: 0;
        z-index: 1100;
        display: flex;
        flex-direction: column;
    }

    .admin-sheet__scrim {
        position: absolute;
        inset: 0;
        border: 0;
        padding: 0;
        background: rgba(25, 28, 24, 0.5);
        cursor: pointer;
    }

    .admin-sheet__panel {
        position: relative;
        margin-top: auto;
        background: #FBFAF6;
        border-radius: 18px 18px 0 0;
        max-height: 92dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .admin-sheet__panel--full {
        margin-top: 0;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
        background: #ffffff;
    }

    .admin-sheet__head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 8px 12px 16px;
        border-bottom: 1px solid #E2DDCD;
        background: #ffffff;
    }

    .admin-sheet__title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 16px;
        font-weight: 600;
        color: #191C18;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-sheet__x {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 20px;
        background: #EDE9DC;
        color: #3D443B;
        cursor: pointer;
        flex-shrink: 0;
    }

    .admin-sheet__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 16px;
    }

    .admin-sheet__foot {
        flex: 0 0 auto;
        border-top: 1px solid #E2DDCD;
        background: #ffffff;
        padding: 10px 14px 28px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .admin-sheet__section {
        padding: 12px 0;
        border-top: 1px solid #EDE9DC;
    }

        .admin-sheet__section:first-child {
            border-top: 0;
        }

    .admin-sheet__legend {
        margin: 0 0 9px 0;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #5A6158;
    }

    .admin-sheet__pills {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .admin-sheet__pair {
        display: flex;
        gap: 8px;
    }

    .admin-pill {
        height: 36px;
        padding: 0 14px;
        border-radius: 18px;
        border: 1px solid #DCD6C6;
        background: #ffffff;
        font-size: 13.5px;
        font-weight: 500;
        color: #3D443B;
        cursor: pointer;
    }

    .admin-pill--on {
        border-color: #024923;
        background: #024923;
        color: #ffffff;
        font-weight: 600;
    }

    .admin-field {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

    .admin-field__label {
        display: block;
        font-size: 11px;
        color: #5A6158;
        margin-bottom: 3px;
    }

    .admin-field input {
        width: 100%;
        height: 44px;
        padding: 0 11px;
        border: 1px solid #DCD6C6;
        border-radius: 9px;
        font-size: 14px;
        color: #191C18;
        background: #ffffff;
    }

    .admin-check {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        cursor: pointer;
        font-size: 14px;
        color: #191C18;
    }

        .admin-check input {
            width: 19px;
            height: 19px;
            accent-color: #024923;
        }

    .admin-btn {
        height: 48px;
        border-radius: 11px;
        border: 1px solid #DCD6C6;
        background: #ffffff;
        font-size: 14px;
        font-weight: 600;
        color: #191C18;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .admin-btn--accent {
        border-color: #024923;
        background: #024923;
        color: #ffffff;
    }

    .admin-btn--danger {
        border-color: #E3B3AF;
        background: #FDF0EF;
        color: #8C1D16;
    }

    .admin-btn--row {
        width: auto;
        flex: 1 1 0;
        height: 46px;
        font-size: 13.5px;
    }

    .admin-sheet__actions {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }

    .admin-kv {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid #F1EDE1;
        font-size: 13px;
    }

        .admin-kv:last-child {
            border-bottom: 0;
        }

    .admin-kv__k {
        color: #5A6158;
    }

    .admin-kv__v {
        color: #191C18;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .admin-sheet__card {
        background: #ffffff;
        border: 1px solid #E2DDCD;
        border-radius: 12px;
        padding: 2px 12px;
        margin-bottom: 8px;
    }

    .admin-sheet__party {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        background: #ffffff;
        border: 1px solid #E2DDCD;
        border-radius: 12px;
        padding: 11px 12px;
        margin-bottom: 8px;
        cursor: pointer;
        text-align: left;
        font: inherit;
    }

    .admin-sheet__viewas {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 32px;
        padding: 0 11px;
        border-radius: 8px;
        background: #024923;
        color: #ffffff;
        font-size: 12.5px;
        font-weight: 600;
        flex-shrink: 0;
    }

    .admin-sheet__note {
        background: #FDF8EA;
        border: 1px solid #E6D2A3;
        border-radius: 12px;
        padding: 10px 12px;
        margin-bottom: 8px;
    }

    .admin-sheet__note-label {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #6E4C05;
        margin-bottom: 3px;
    }

    .admin-sheet__hero {
        padding: 12px 16px;
        border-bottom: 1px solid #E2DDCD;
        background: #ffffff;
    }

    .admin-sheet__hero-amount {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 28px;
        font-weight: 600;
        color: #191C18;
        letter-spacing: -0.01em;
    }

    .admin-sheet__hero-sub {
        font-size: 12.5px;
        color: #5A6158;
        margin-top: 2px;
    }

}

/* The View-as banner is the same on every width: it is how you know the session is borrowed, and
   it owns the only way back to the admin session. */
.admin-viewas__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.admin-viewas__bar {
    flex: 0 0 auto;
    background: #4b3a8f;
    color: #ffffff;
    padding: 8px 8px 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-viewas__who {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-viewas__name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-viewas__sub {
    display: block;
    font-size: 11px;
    color: #d6cdf2;
}

.admin-viewas__exit {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    color: #4b3a8f;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- Feature Requests (/admin/featureRequests) ------------------------------------------------
   Every width, not just phones - see the note at the top. One column that reads the same on a
   phone and a desktop; the only phone-specific rules are in the media query at the end. Touch
   targets are 44px+, because one of the admins using this is not technical and mostly on a phone. */
.admin-portal .fr-page {
    max-width: 860px;
}

.admin-portal .fr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.admin-portal .fr-subtitle,
.admin-portal .fr-field__hint,
.admin-portal .fr-hint {
    color: var(--neutral-foreground-hint, #616161);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 2px;
}

.admin-portal .fr-empty {
    text-align: center;
    padding: 40px 12px;
    color: var(--neutral-foreground-hint, #616161);
}

.admin-portal .fr-group {
    margin-top: 16px;
}

.admin-portal .fr-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
}

.admin-portal .fr-group__count {
    font-weight: 400;
    color: var(--neutral-foreground-hint, #616161);
}

.admin-portal .fr-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}

.admin-portal .fr-dot--urgent { background: #d13438; }
.admin-portal .fr-dot--important { background: #ca5010; }
.admin-portal .fr-dot--nicetohave { background: #8a8886; }

.admin-portal .fr-card {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 8px;
    background: var(--neutral-layer-1, #fff);
    cursor: pointer;
}

.admin-portal .fr-card:hover {
    border-color: var(--accent-fill-rest, #0f6cbd);
}

.admin-portal .fr-card__main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-portal .fr-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-portal .fr-card__number {
    color: var(--neutral-foreground-hint, #616161);
    font-size: 12px;
}

.admin-portal .fr-card__title {
    font-weight: 600;
    font-size: 15px;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.admin-portal .fr-card__desc {
    margin-top: 2px;
    color: var(--neutral-foreground-hint, #616161);
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.admin-portal .fr-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--neutral-foreground-hint, #616161);
}

.admin-portal .fr-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.admin-portal .fr-card__move {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

.admin-portal .fr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-portal .fr-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--neutral-layer-3, #f0f0f0);
    color: var(--neutral-foreground-rest, #242424);
}

.admin-portal .fr-chip--bug { background: #fde7e9; color: #a4262c; }
.admin-portal .fr-chip--idea { background: #e8f1fb; color: #0f548c; }
.admin-portal .fr-chip--status-done { background: #dff6dd; color: #0e700e; }
.admin-portal .fr-chip--status-cancelled { background: #f0f0f0; color: #616161; }

.admin-portal .fr-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    text-decoration: none;
    color: var(--accent-foreground-rest, #0f6cbd);
}

/* ---- form ---- */
.admin-portal .fr-form {
    margin-top: 8px;
}

.admin-portal .fr-field {
    margin-top: 20px;
}

.admin-portal .fr-field__label {
    font-weight: 600;
    font-size: 15px;
}

.admin-portal .fr-field > fluent-text-area,
.admin-portal .fr-field > fluent-text-field,
.admin-portal .fr-field > .fr-choices {
    margin-top: 8px;
}

.admin-portal .fr-optional {
    font-weight: 400;
    color: var(--neutral-foreground-hint, #616161);
}

.admin-portal .fr-choices {
    display: grid;
    gap: 8px;
}

.admin-portal .fr-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-portal .fr-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.admin-portal .fr-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 64px;
    padding: 12px 14px;
    text-align: left;
    font: inherit;
    color: inherit;
    border: 2px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 8px;
    background: var(--neutral-layer-1, #fff);
    cursor: pointer;
}

.admin-portal .fr-choice--selected {
    border-color: var(--accent-fill-rest, #0f6cbd);
    background: var(--neutral-layer-2, #f5f9fd);
}

.admin-portal .fr-choice__icon {
    font-size: 22px;
    line-height: 1;
}

.admin-portal .fr-choice__title {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.admin-portal .fr-choice__hint {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #616161);
}

.admin-portal .fr-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.admin-portal .fr-actions--start {
    justify-content: flex-start;
}

/* ---- pictures ---- */
.admin-portal .fr-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.admin-portal .fr-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    background: var(--neutral-layer-2, #f5f5f5);
}

.admin-portal .fr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-portal .fr-thumb__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.admin-portal .fr-add-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 88px;
    height: 88px;
    border: 2px dashed var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 8px;
    font-size: 12px;
    color: var(--neutral-foreground-hint, #616161);
    cursor: pointer;
}

/* ---- detail + conversation ---- */
.admin-portal .fr-detail__title {
    font-size: 20px;
    margin: 10px 0 2px;
    overflow-wrap: anywhere;
}

.admin-portal .fr-detail__meta {
    font-size: 13px;
    color: var(--neutral-foreground-hint, #616161);
}

.admin-portal .fr-detail__desc,
.admin-portal .fr-message__body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.admin-portal .fr-detail__desc {
    margin-top: 14px;
    font-size: 15px;
}

.admin-portal .fr-thread {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-rest, #d1d1d1);
}

.admin-portal .fr-thread__title {
    font-weight: 600;
    font-size: 16px;
}

.admin-portal .fr-message {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--neutral-layer-2, #f5f5f5);
}

.admin-portal .fr-message--agent {
    background: #f3f0fb;
}

.admin-portal .fr-message--system {
    padding: 0;
    background: none;
    text-align: center;
    font-size: 12px;
    color: var(--neutral-foreground-hint, #616161);
}

.admin-portal .fr-message__head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    font-size: 13px;
    margin-bottom: 4px;
}

.admin-portal .fr-message__head span {
    color: var(--neutral-foreground-hint, #616161);
    font-size: 12px;
}

.admin-portal .fr-composer {
    margin-top: 16px;
}

@media (max-width: 834px) {
    .admin-portal .fr-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-portal .fr-choices--2,
    .admin-portal .fr-choices--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    /* the paste tip is for a keyboard; a phone gets the camera through "Add picture" */
    .admin-portal .fr-hint--desktop {
        display: none;
    }

    .admin-portal .fr-actions fluent-button {
        flex: 1 1 auto;
    }
}