/* _content/MeninGate.Identity.Web/Components/FirmaSwitcher.razor.rz.scp.css */
/* The firma-switcher sits in the app-bar next to the user, so it inherits the bar's colours
   (currentColor) instead of hardcoding a palette — it drops into any app's shell unchanged. */

.mg-firma-switch[b-tfw79cnvgy] {
    position: relative;
    display: inline-flex;
}

.mg-firma-btn[b-tfw79cnvgy] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 4px;
    padding: .2rem .5rem;
    font: inherit;
    font-size: .85rem;
    line-height: 1.4;
    opacity: .9;
}

.mg-firma-btn:hover[b-tfw79cnvgy] {
    background: rgba(0, 0, 0, .08);
    opacity: 1;
}

.mg-firma-name[b-tfw79cnvgy] {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mg-firma-caret[b-tfw79cnvgy] {
    font-size: .7rem;
    opacity: .7;
}

.mg-firma-switch.open .mg-firma-caret[b-tfw79cnvgy] {
    transform: rotate(180deg);
}

/* The dropdown is a light surface on a dark bar, so it sets its own colours explicitly. */
.mg-firma-list[b-tfw79cnvgy] {
    position: absolute;
    top: calc(100% + .3rem);
    right: 0;
    z-index: 40;
    margin: 0;
    padding: .25rem;
    list-style: none;
    min-width: 13rem;
    background: #fff;
    color: #22333a;
    border: 1px solid #dfe6e7;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(20, 59, 69, .18);
}

.mg-firma-item[b-tfw79cnvgy] {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    border-radius: 4px;
    padding: .3rem .45rem;
    font: inherit;
    font-size: .85rem;
    white-space: nowrap;
}

.mg-firma-item:hover:not(:disabled)[b-tfw79cnvgy] {
    background: #eef4f5;
}

.mg-firma-item.active[b-tfw79cnvgy] {
    font-weight: 600;
    cursor: default;
}

/* A disabled non-active item means a switch is in flight — dim it; the active one is not "disabled-looking". */
.mg-firma-item:disabled:not(.active)[b-tfw79cnvgy] {
    opacity: .5;
    cursor: progress;
}

/* "All firmas" is not one of the firma's, and a rule underneath says so without needing a word of
   explanation. Super-admin only, so most users never see this row at all. */
.mg-firma-all[b-tfw79cnvgy] {
    border-bottom: 1px solid #eef2f3;
    border-radius: 4px 4px 0 0;
    margin-bottom: .15rem;
    padding-bottom: .35rem;
}

.mg-firma-check[b-tfw79cnvgy] {
    width: .8rem;
    color: #1d6a3a;
}

/* Single-firma user: no dropdown, just the context. */
.mg-firma-single[b-tfw79cnvgy] {
    font-size: .85rem;
    opacity: .7;
}

/* ── NARROW (2026-09-06) ─────────────────────────────────────────────────────────────────────────────
   The firma stays visible at EVERY width, deliberately: "which company am I working in" is operational
   context, and hiding it behind a menu is how someone edits the wrong company's data without noticing.
   What gives way is its width — the label ellipsises harder instead of the control disappearing.

   🔴 This rule has to live in THIS file. Scoped CSS carries the owning component's attribute, so a rule
   for .mg-firma-name written in UserMenu.razor.css would never match, silently and without a build
   warning — even though <FirmaSwitcher /> sits inside that component's markup. */
@media (max-width: 900px) {
    .mg-firma-name[b-tfw79cnvgy] {
        max-width: 7rem;
    }

    .mg-firma-btn[b-tfw79cnvgy] {
        padding: .2rem .35rem;
    }
}

@media (max-width: 480px) {
    .mg-firma-name[b-tfw79cnvgy] {
        max-width: 4.5rem;
    }
}
/* _content/MeninGate.Identity.Web/Components/FrontdoorLink.razor.rz.scp.css */
/* The shared "back to the Frontdoor" link — lives on the LEFT of a sub-app's bar (moved out of UserMenu,
   2026-07-16). Inherits the bar's light text on the dark chrome. */
.mg-frontdoor[b-4k8ki3xudh] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: .2rem .5rem;
    font-size: .85rem;
    line-height: 1.4;
    opacity: .9;
}

.mg-frontdoor:hover[b-4k8ki3xudh] {
    background: rgba(0, 0, 0, .08);
    border-color: currentColor;
    opacity: 1;
}

.mg-frontdoor svg[b-4k8ki3xudh] {
    flex: 0 0 auto;
}
/* _content/MeninGate.Identity.Web/Components/Launcher.razor.rz.scp.css */
/* The koepel app-launcher. Plain CSS on top of Bootstrap, scoped to this component.
   Platform UI rules applied here: maximum data / minimum wasted space (tight gutters, one tile size), and
   no bold in the body of a list — weight is reserved for accents. */

.mg-launcher[b-kjrym6r1pc] {
    max-width: 64rem;
    padding: .25rem .5rem 1.5rem;
}

.mg-launcher-muted[b-kjrym6r1pc] { color: #55666b; font-size: .95rem; }

.mg-launcher-alert[b-kjrym6r1pc] {
    border: 1px solid #f0c7c9;
    border-left: 4px solid #c0392b;
    background: #fbeaea;
    color: #8f1c22;
    border-radius: 8px;
    padding: .7rem 1rem;
    font-size: .92rem;
}

.mg-launcher-empty[b-kjrym6r1pc] {
    border: 1px solid #dfe6e7;
    border-left: 4px solid #143b45;
    background: #f6f9f9;
    border-radius: 8px;
    padding: .9rem 1.1rem;
    max-width: 40rem;
}

.mg-launcher-empty-title[b-kjrym6r1pc] { margin: 0 0 .3rem; color: #143b45; }
.mg-launcher-empty-sub[b-kjrym6r1pc] { margin: 0; font-size: .9rem; color: #55666b; line-height: 1.5; }

/* ---- sections ------------------------------------------------------------------------------------- */

.mg-launcher-section + .mg-launcher-section[b-kjrym6r1pc] { margin-top: 1.1rem; }

.mg-launcher-head[b-kjrym6r1pc] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #55666b;
    margin: 0 0 .45rem;
    font-weight: 600;
}

.mg-launcher-star[b-kjrym6r1pc] { color: #c48a30; }

/* auto-fill keeps the grid dense on a wide screen and collapses cleanly on a tablet. One tile size
   everywhere: a favourite is EARLIER, never bigger (DESIGN-launcher decision 8). */
.mg-launcher-grid[b-kjrym6r1pc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .6rem;
}

.mg-launcher-grid-inner[b-kjrym6r1pc] { margin-top: .5rem; }

/* ---- tiles ---------------------------------------------------------------------------------------- */

.mg-launcher-tile[b-kjrym6r1pc] {
    position: relative;
    display: flex;
    align-items: stretch;
    /* A tile is a handle, not prose: selecting its label mid-gesture starts a text drag and the pointer
       sequence the drag layer needs is gone. Same reason -webkit-user-drag is off - Safari drags links and
       images natively even when `draggable="false"` is honoured elsewhere. */
    user-select: none;
    -webkit-user-drag: none;
    /* Scrolling with a finger stays the browser's; the pick-up is a long press, and the drag layer takes
       the finger only once that has fired (non-passive touchmove). `manipulation` also drops the 300 ms
       double-tap-zoom wait, so opening an app by tapping feels immediate. */
    touch-action: manipulation;
    border: 1px solid #dfe6e7;
    border-radius: 9px;
    background: #fff;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.mg-launcher-tile:hover[b-kjrym6r1pc] {
    border-color: var(--mg-tile, #143b45);
    box-shadow: 0 2px 8px rgba(20, 59, 69, .12);
    transform: translateY(-1px);
}

/* A tile whose menu is open must paint ABOVE the row underneath it.
   Why this is not just the dropdown's z-index: `:hover` sets a `transform`, and a transform creates a
   STACKING CONTEXT. While the pointer is on the tile - which it always is when the menu is open - the
   dropdown's z-index:30 is trapped inside that context, and the tiles of the next row (later in the DOM)
   paint over it. So the tile itself is raised, and the hover lift is dropped while the menu is open. */
.mg-launcher-tile.menu-open[b-kjrym6r1pc] { z-index: 60; }
.mg-launcher-tile.menu-open:hover[b-kjrym6r1pc] { transform: none; }

.mg-launcher-tile.soon[b-kjrym6r1pc] { opacity: .78; }
.mg-launcher-tile.soon:hover[b-kjrym6r1pc] { transform: none; box-shadow: none; }
.mg-launcher-tile.soon .mg-launcher-mono[b-kjrym6r1pc] { filter: grayscale(.35); }

/* The whole face is one hit target — link on a tile, button on a folder. */
.mg-launcher-open[b-kjrym6r1pc] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .75rem;
    text-decoration: none;
    color: inherit;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.mg-launcher-tile.soon .mg-launcher-open[b-kjrym6r1pc] { cursor: default; }

.mg-launcher-mono[b-kjrym6r1pc] {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mg-tile, #143b45);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.5px;
}

.mg-launcher-body[b-kjrym6r1pc] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.mg-launcher-name[b-kjrym6r1pc] { color: #143b45; line-height: 1.25; }

.mg-launcher-desc[b-kjrym6r1pc] {
    font-size: .82rem;
    color: #55666b;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mg-launcher-chips[b-kjrym6r1pc] { display: flex; gap: .35rem; margin-top: .15rem; flex-wrap: wrap; }

.mg-launcher-chip[b-kjrym6r1pc] {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: .05rem .35rem;
    border-radius: 3px;
    font-weight: 600;
}

.mg-launcher-chip.ro[b-kjrym6r1pc]   { color: #6b5a1e; background: #f6ead9; }
.mg-launcher-chip.soon[b-kjrym6r1pc] { color: #55666b; background: #eef2f2; }
.mg-launcher-chip.new[b-kjrym6r1pc]  { color: #1f5d3a; background: #e2f2e8; }

/* ---- the always-visible tile menu ------------------------------------------------------------------ */
/* Never hover-only: a tablet has no hover, and this handle is also the keyboard path to every action
   dragging offers (DESIGN-launcher decision 9). */

.mg-launcher-menu[b-kjrym6r1pc] {
    flex: 0 0 auto;
    width: 1.6rem;
    border: 0;
    border-left: 1px solid #eef2f2;
    background: none;
    color: #8ea1a6;
    font-size: .8rem;
    line-height: 1;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
}

.mg-launcher-menu:hover:not(:disabled)[b-kjrym6r1pc] { background: #f4f8f8; color: #143b45; }
.mg-launcher-menu:disabled[b-kjrym6r1pc] { cursor: default; opacity: .45; }

/* ---- folders --------------------------------------------------------------------------------------- */

/* The 2x2 pip grid stands in for the monogram: a folder shows the colours of what is inside it. */
.mg-launcher-stack[b-kjrym6r1pc] {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: #eef2f2;
    padding: .28rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: .16rem;
}

.mg-launcher-pip[b-kjrym6r1pc] { border-radius: 2px; display: block; }

.mg-launcher-folder.open[b-kjrym6r1pc] { border-color: var(--mg-tile, #143b45); }

/* Blok 23: a department folder is coloured like its apps (its monogram square carries --mg-tile, exactly as
   a tile's does), and an EMPTY department stays on the board dimmed - the org chart is complete even where
   no app lives yet (D4). Dimmed, not hidden: a click that does nothing must look like it does nothing. */
.mg-launcher-folder.empty[b-kjrym6r1pc] { opacity: .55; }
.mg-launcher-folder.empty:hover[b-kjrym6r1pc] { transform: none; box-shadow: none; border-color: #dfe6e7; }
.mg-launcher-folder.empty .mg-launcher-open[b-kjrym6r1pc] { cursor: default; }

/* The open panel is a grid child spanning every column, so it lands on its own line directly under the
   folder: the folder opens WHERE IT IS and pushes the grid down, instead of covering the page. */
.mg-launcher-panel[b-kjrym6r1pc] {
    grid-column: 1 / -1;
    border: 1px solid #dfe6e7;
    border-top: 3px solid var(--mg-tile, #143b45);   /* the department's colour runs into its open panel */
    border-radius: 0 0 9px 9px;
    background: #f9fbfb;
    padding: .6rem .7rem .7rem;
    margin-top: -.35rem;
}

.mg-launcher-self[b-kjrym6r1pc] {
    display: inline-block;
    font-size: .82rem;
    color: #14607a;
    text-decoration: none;
}

.mg-launcher-self:hover[b-kjrym6r1pc] { text-decoration: underline; }

/* ---- status line: save marker, undo, restore defaults ---------------------------------------------- */
/* Quiet until something happens. Without an edit mode, the undo here is the only safety net against a
   mis-tap, so it lives where the eye already is rather than in a corner. */

.mg-launcher-status[b-kjrym6r1pc] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 1.35rem;
    margin: 0 0 .4rem;
    font-size: .72rem;
    color: #55666b;
}

.mg-launcher-save[b-kjrym6r1pc] { display: inline-flex; align-items: center; gap: .4rem; }
.mg-launcher-save.error[b-kjrym6r1pc] { color: #8f1c22; }

.mg-launcher-undo[b-kjrym6r1pc],
.mg-launcher-reset[b-kjrym6r1pc] {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: #14607a;
    cursor: pointer;
    text-decoration: underline;
}

.mg-launcher-undo:hover[b-kjrym6r1pc],
.mg-launcher-reset:hover[b-kjrym6r1pc] { color: #143b45; }

.mg-launcher-reset[b-kjrym6r1pc] { margin-left: auto; }

/* ---- the tile menu ---------------------------------------------------------------------------------- */

.mg-launcher-dropdown[b-kjrym6r1pc] {
    position: absolute;
    top: calc(100% - 2px);
    right: 0;
    z-index: 30;
    min-width: 13rem;
    margin: 0;
    padding: .25rem;
    list-style: none;
    background: #fff;
    border: 1px solid #dfe6e7;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(20, 59, 69, .16);
}

.mg-launcher-dropdown li[b-kjrym6r1pc] { margin: 0; }
.mg-launcher-dropdown li.sep[b-kjrym6r1pc] { border-top: 1px solid #eef2f2; margin-top: .2rem; padding-top: .2rem; }

.mg-launcher-dropdown button[b-kjrym6r1pc] {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: .3rem .45rem;
    border-radius: 5px;
    font-size: .8rem;
    color: #143b45;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-launcher-dropdown button:hover[b-kjrym6r1pc] { background: #f0f6f6; }

/* "Meer…" is deliberately quiet: it is the way in for a keyboard, not an invitation to a mouse. */
.mg-launcher-more[b-kjrym6r1pc] { color: #8ea1a6; font-size: .74rem; }

/* ---- inline folder rename --------------------------------------------------------------------------- */

.mg-launcher-rename[b-kjrym6r1pc] {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #b9cfd3;
    border-radius: 5px;
    padding: .2rem .35rem;
    font: inherit;
    font-size: .9rem;
    color: #143b45;
}

.mg-launcher-rename:focus[b-kjrym6r1pc] { outline: 2px solid #14607a; outline-offset: 1px; }

.mg-launcher-ok[b-kjrym6r1pc] {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: #2f855a;
    font-size: .95rem;
    cursor: pointer;
    padding: 0 .2rem;
}

/* ---- drag & drop ------------------------------------------------------------------------------------ */
/* The drag layer (launcherDnd.js) owns these classes; nothing here is toggled from C#. That is deliberate:
   re-rendering while a pointer is holding something moves the DOM under the drag, which is how these
   implementations get flaky. The two landing zones therefore always exist and are merely revealed. */

.mg-launcher-tail[b-kjrym6r1pc],
.mg-launcher-favdrop[b-kjrym6r1pc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border: 1px dashed #9dbcc2;
    border-radius: 9px;
    color: #55666b;
    font-size: .75rem;
    background: #f4f8f8;
}

/* 🔴 REVEALING A ZONE MAY NOT MOVE THE GRID. The first version toggled `display`, and that reflows: picking
   a tile up made the empty favourites strip appear, everything below it dropped by its height, and the tile
   you were aiming at slid out from under the pointer mid-gesture. Measured 2026-08-21 with the drag harness
   - a drop meant for the centre of a tile was reported as landing on the favourites strip. So hiding must
   cost no layout: the tail keeps its grid cell and merely turns invisible, and the favourites zone leaves
   the flow altogether and floats as a dock while a drag is running. */

.mg-launcher-tail[b-kjrym6r1pc] {
    min-height: 3.7rem;
    visibility: hidden;
}

.mg-launcher-favdrop[b-kjrym6r1pc] {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 80;
    display: none;
    min-height: 2.6rem;
    padding: 0 1.4rem;
    box-shadow: 0 6px 20px rgba(20, 59, 69, .22);
}

/* The tile you picked up leaves the grid entirely: its lifted copy is under the pointer, and the HOLE is
   the only marker - it travels with you as the others move aside. A dashed stand-in at the origin would
   compete with that hole and say the opposite of what is about to happen.
   `opacity`, not `display` or `visibility`: the slot must keep its size, or the row would close up and the
   whole measurement this gesture rests on would be worthless. */
.mg-launcher-tile.mg-drag-source[b-kjrym6r1pc] {
    opacity: 0;
    box-shadow: none;
    pointer-events: none;
}

.mg-launcher-tile.mg-drag-source:hover[b-kjrym6r1pc] { transform: none; box-shadow: none; }

/* Revealed by the drag layer for the duration of the drag - each in the way that costs no layout. */
.mg-launcher-tail.mg-drop-ok[b-kjrym6r1pc] { visibility: visible; }
.mg-launcher-favdrop.mg-drop-ok[b-kjrym6r1pc] { display: flex; }

/* A legal landing place, at rest. */
.mg-launcher-tile.mg-drop-ok[b-kjrym6r1pc] { border-color: #9dbcc2; }

/* The insertion point: a bar on the side the item would land. */
.mg-launcher-tile.mg-drop-before[b-kjrym6r1pc] { box-shadow: inset 3px 0 0 0 #14607a; }
.mg-launcher-tile.mg-drop-after[b-kjrym6r1pc]  { box-shadow: inset -3px 0 0 0 #14607a; }

.mg-launcher-tail.mg-drop-hover[b-kjrym6r1pc],
.mg-launcher-favdrop.mg-drop-hover[b-kjrym6r1pc] {
    border-style: solid;
    border-color: #14607a;
    background: #e8f2f3;
    color: #143b45;
}

/* Dropping ONTO a tile: this makes a folder of the two, or drops into an existing one - a different verb
   from inserting, so a different picture. It OPENS UP to take the other one in: it grows and its ring
   widens. The first version shrank it (`scale(.97)`), which reads as recoiling - the opposite promise. */
.mg-launcher-tile.mg-drop-combine[b-kjrym6r1pc] {
    border-color: #14607a;
    background: #f2f8f9;
    box-shadow: 0 0 0 4px rgba(20, 96, 122, .20);
    transform: scale(1.05);
    z-index: 2;
}

/* While dragging, the pointer must not turn into a text cursor over labels. */
.mg-launcher-tile.mg-drop-ok[b-kjrym6r1pc],
.mg-launcher-tile.mg-drop-ok *[b-kjrym6r1pc] { user-select: none; }
/* _content/MeninGate.Identity.Web/Components/ModuleGuard.razor.rz.scp.css */
.mg-access-denied[b-yhlttp4gj3] {
    padding: .6rem .9rem;
    border: 1px solid #f0c7c9;
    background: #fbeaea;
    color: #8f1c22;
    border-radius: 8px;
    font-size: .9rem;
}

/* Blok 23.5 - the read-only notice. Quiet amber, the same family as the launcher's "read-only" chip. */
.mg-read-only[b-yhlttp4gj3] {
    padding: .5rem .9rem;
    margin-bottom: .75rem;
    border: 1px solid #ead9b6;
    background: #f6ead9;
    color: #6b5a1e;
    border-radius: 8px;
    font-size: .9rem;
}
/* _content/MeninGate.Identity.Web/Components/UserMenu.razor.rz.scp.css */
/* The identity cluster inherits the app bar's colours (currentColor) instead of hardcoding a palette, so it
   drops into any app's shell unchanged — same reasoning as FirmaSwitcher.razor.css beside it. */

.mg-user-menu[b-ijjm13j9dr] {
    position: relative;      /* anchor for the narrow-screen panel */
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;       /* push to the right edge of a flex header */
}

.mg-access-badge[b-ijjm13j9dr] {
    display: inline-flex;
    align-items: center;
    color: #9fb4b8; /* staff = neutral; the icon SHAPE is the primary signal (person vs shield) */
}

/* Colour only REINFORCES the icon (WCAG: never colour alone). */
[data-access="superadmin"] .mg-access-badge[b-ijjm13j9dr] {
    color: #f0c674; /* super-admin accent (amber) */
}

.mg-user-name[b-ijjm13j9dr] {
    font-size: .9rem;
    opacity: .85;
}

.mg-logout-form[b-ijjm13j9dr] {
    margin: 0;
}

.mg-logout-btn[b-ijjm13j9dr] {
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 4px;
    padding: .2rem .6rem;
    font: inherit;
    font-size: .85rem;
    line-height: 1.4;
}

.mg-logout-btn:hover[b-ijjm13j9dr] {
    background: rgba(0, 0, 0, .08);
}

/* Blok 16.5 - the way in to the authenticator. Deliberately QUIETER than the sign-out button: for most
   people enrolling a phone is a one-off errand, so it has to be findable without competing every day
   with the control they actually use. Same scoped stylesheet as the rest of the cluster, so it inherits
   the app bar's colour instead of picking its own. */
.mg-account-link[b-ijjm13j9dr] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .4rem;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    font-size: .85rem;
    line-height: 1.4;
    opacity: .85;
}

.mg-account-link:hover[b-ijjm13j9dr],
.mg-account-link:focus-visible[b-ijjm13j9dr] {
    opacity: 1;
    text-decoration: none;
    background: rgba(0, 0, 0, .08);
}

/* ── WIDE (default) ──────────────────────────────────────────────────────────────────────────────────
   Nothing here may change how the bar looks today. `display: contents` makes the panel's children lay
   out as direct flex items of .mg-user-menu, so the row is byte-for-byte the arrangement that shipped
   before the narrow-screen work: badge · name · Authenticator · Sign out. */
.mg-user-toggle[b-ijjm13j9dr],
.mg-user-panel-head[b-ijjm13j9dr] {
    display: none;
}

.mg-user-panel[b-ijjm13j9dr] {
    display: contents;
}

/* ── NARROW ──────────────────────────────────────────────────────────────────────────────────────────
   Measured 2026-09-06 on Stefaan's iPhone: brand + firma + name + two labelled controls need roughly
   770px and the viewport offers 393, so the cluster overflowed off-screen with the Authenticator link
   clipped away. Below 900px (a phone in landscape is ~850px, so the margin is deliberate) everything
   after the firma folds behind one button.

   The panel is a light surface on a dark bar and therefore sets its own colours explicitly — the same
   values as .mg-firma-list, because this is the SAME disclosure idiom and not a second one. */
@media (max-width: 900px) {
    .mg-wide-only[b-ijjm13j9dr] {
        display: none;
    }

    .mg-user-toggle[b-ijjm13j9dr] {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
        cursor: pointer;
        border: 1px solid currentColor;
        background: transparent;
        color: inherit;
        border-radius: 4px;
        padding: .2rem .4rem;
        font: inherit;
        line-height: 1;
        opacity: .9;
    }

    .mg-user-toggle:hover[b-ijjm13j9dr] {
        background: rgba(0, 0, 0, .08);
        opacity: 1;
    }

    .mg-user-caret[b-ijjm13j9dr] {
        font-size: .7rem;
        opacity: .7;
    }

    .mg-user-menu.open .mg-user-caret[b-ijjm13j9dr] {
        transform: rotate(180deg);
    }

    .mg-user-panel[b-ijjm13j9dr] {
        display: none;
        position: absolute;
        top: calc(100% + .3rem);
        right: 0;
        z-index: 40;
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        padding: .25rem;
        min-width: 12rem;
        background: #fff;
        color: #22333a;
        border: 1px solid #dfe6e7;
        border-radius: 6px;
        box-shadow: 0 4px 14px rgba(20, 59, 69, .18);
    }

    .mg-user-menu.open .mg-user-panel[b-ijjm13j9dr] {
        display: flex;
    }

    /* Who you are, once, at the top of the panel — the bar itself no longer has room to say it. */
    .mg-user-panel-head[b-ijjm13j9dr] {
        display: block;
        padding: .3rem .45rem .35rem;
        margin-bottom: .15rem;
        border-bottom: 1px solid #eef2f3;
        font-size: .8rem;
        opacity: .7;
        white-space: nowrap;
    }

    /* Inside the panel both controls become full-width rows, styled like .mg-firma-item so the two
       dropdowns in this bar read as one component and not as two. */
    .mg-user-panel .mg-account-link[b-ijjm13j9dr],
    .mg-user-panel .mg-logout-btn[b-ijjm13j9dr] {
        display: flex;
        align-items: center;
        gap: .4rem;
        width: 100%;
        border: 0;
        border-radius: 4px;
        padding: .35rem .45rem;
        background: transparent;
        color: inherit;
        text-align: left;
        font-size: .85rem;
        opacity: 1;
    }

    .mg-user-panel .mg-account-link:hover[b-ijjm13j9dr],
    .mg-user-panel .mg-account-link:focus-visible[b-ijjm13j9dr],
    .mg-user-panel .mg-logout-btn:hover[b-ijjm13j9dr] {
        background: #eef4f5;
    }
}