/* _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;
    /* Stefaan, 2026-10-07: "De company ddl moet breder. De volledige naam moet altijd zichtbaar zijn."
       The cause was NOT the max-width: all eight firma labels fit inside the old 18rem (the longest,
       "SYNTRA - TELENET II (betalend)", is 30 characters). It was flex PRESSURE - this control is a flex
       item in .mg-user-menu and so shrinks by default, and .mg-firma-name then ellipsises itself away even
       on a wide screen whenever the bar gets crowded. Refusing to shrink is the fix; widening was not. */
    flex: 0 0 auto;
}

.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] {
    /* FULL NAME, ALWAYS (Stefaan, 2026-10-07). No max-width and no ellipsis on a desktop bar: which company
       you are working in is the one thing that must never be half-read. "MENIN GATE BV" and "MENIN GATE
       FRANCE..." start with the same eleven characters, so a truncated label does not merely look unfinished
       - it is unreadable in the only way that matters. The phone rules below still clamp it; see there. */
    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. */
/* The clamp lives ONLY here now (2026-10-07). On a desktop bar the name is shown whole; a phone cannot
   hold thirty characters next to everything else, so there - and only there - it ellipsises. Both limits
   were raised (7rem -> 12rem, 4.5rem -> 8rem): the old ones cut "MENIN GATE BV" down to "MENIN G...",
   which names no company at all. The ellipsis properties travel WITH the clamp, because the base rule no
   longer carries them - a max-width without overflow:hidden does not truncate, it overflows. */
@media (max-width: 900px) {
    .mg-firma-name[b-tfw79cnvgy] {
        max-width: 12rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

@media (max-width: 480px) {
    .mg-firma-name[b-tfw79cnvgy] {
        max-width: 8rem;
    }
}
/* _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;
}

/* Blok 33 (Stefaan, 2026-10-07): "In de kopbalk mag je Frontdoor vervangen door het Home icoon."
   Square padding, because the .5rem left over from the word made a wide box around a small house. The
   tooltip and aria-label on the anchor carry the name now - see the component. */
.mg-frontdoor--icon[b-4k8ki3xudh] {
    justify-content: center;
    gap: 0;
    /* .15rem, not .25rem: at 24px the house plus the old padding made the whole bar taller than the
       identity cluster on the right, so the bar grew instead of the icon standing out. */
    padding: .15rem;
    line-height: 0;
}
/* _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; }

/* erp-platform Blok 30: waiting work on the tile of the app that holds it - the same number, amber or red, as the lamp
   beside Frontdoor. Pinned to the monogram's top-right corner (padding .75rem + monogram 2.5rem), so it never shifts
   the tile's text and reads as "this app has something for you" at a glance across the whole launcher. */
.mg-launcher-work[b-kjrym6r1pc] {
    position: absolute; top: .3rem; left: 2.7rem; z-index: 1; pointer-events: none;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; line-height: 1; font-variant-numeric: tabular-nums;
    color: #2b1d00; background: #f6c453; border: 2px solid #fff; border-radius: 999px;
    box-shadow: 0 0 .5rem rgba(246, 196, 83, .8);
}
.mg-launcher-work--late[b-kjrym6r1pc] { color: #fff; background: #b23b2e; box-shadow: 0 0 .5rem rgba(224, 104, 91, .8); }
/* _content/MeninGate.Identity.Web/Components/Login.razor.rz.scp.css */
/* The sign-in card.

   WHY THIS FILE DID NOT EXIST UNTIL 2026-10-01. Every other component here carries its own .razor.css
   (Launcher, FirmaSwitcher, UserMenu, ModuleGuard, FrontdoorLink) — Login.razor never did, so the page
   rendered with raw browser defaults: a serif <h1>, a 20-character input and a grey system button. On the
   koepel that passed unnoticed because its app.css at least sets the font; on customer.ezgroups.com, whose
   app.css is still the stock Blazor template, Stefaan saw it for what it always was (2026-10-01).

   It is styled HERE, in the shared component, and not in a host stylesheet: this is the one screen every
   app in the estate shows to a human before anything else, and it should not look different depending on
   which host happens to serve it. Every host already loads this RCL's bundle, so the file is the fix.

   Palette and shapes follow the siblings in this folder: text #1f2d32, accent #14607a, soft 1px borders,
   8-10px radii, .85-.9rem type. No bold anywhere (Stefaan, platform-wide) - weight 300/400 only.
   box-sizing is set on these elements rather than globally, because a host may have screens that were
   laid out against the browser default and this file must not move them. */

.mg-login[b-i5d77mfskt],
.mg-login *[b-i5d77mfskt] {
    box-sizing: border-box;
}

/* The card centres itself and stops growing. Below ~26rem it simply fills the width, so a phone gets the
   same screen with a 1rem gutter rather than a shrunken desktop one. */
.mg-login[b-i5d77mfskt] {
    max-width: 24rem;
    margin: 3rem auto;
    padding: 1.75rem 1.5rem;
    border: 1px solid #e3e8ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(31, 45, 50, .07);
    color: #1f2d32;
    font-size: .9rem;
    line-height: 1.5;
}

.mg-login h1[b-i5d77mfskt] {
    margin: 0 0 .35rem;
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: .01em;
}

.mg-login p[b-i5d77mfskt] {
    margin: 0 0 1rem;
    color: #5b6b71;
}

.mg-login form[b-i5d77mfskt] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.mg-login input[b-i5d77mfskt] {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid #cfd8db;
    border-radius: 8px;
    font: inherit;
    color: inherit;
    background: #fff;
}

.mg-login input:focus[b-i5d77mfskt] {
    outline: none;
    border-color: #14607a;
    box-shadow: 0 0 0 3px rgba(20, 96, 122, .15);
}

.mg-login input[b-i5d77mfskt]::placeholder {
    color: #9aa8ad;
}

/* The six-digit field reads as six digits: wide spacing, centred, tabular figures so the dashes in the
   placeholder line up with what gets typed over them. */
.mg-login input[name="code"][b-i5d77mfskt] {
    letter-spacing: .5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-right: .2rem;   /* letter-spacing adds a trailing gap; this keeps the text optically centred */
}

.mg-login button[type="submit"][b-i5d77mfskt],
.mg-login .mg-login-channel[b-i5d77mfskt] {
    padding: .55rem .9rem;
    border: 1px solid #14607a;
    border-radius: 8px;
    background: #14607a;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.mg-login button[type="submit"]:hover:not(:disabled)[b-i5d77mfskt],
.mg-login .mg-login-channel:hover:not(:disabled)[b-i5d77mfskt] {
    background: #115066;
}

.mg-login button:disabled[b-i5d77mfskt] {
    opacity: .55;
    cursor: default;
}

/* The channel buttons are a vertical list of equal choices, not a primary action. */
.mg-login .mg-login-channel[b-i5d77mfskt] {
    display: block;
    width: 100%;
    margin-bottom: .5rem;
    text-align: left;
    background: #fff;
    color: #14607a;
}

/* "Send me a code by e-mail instead" — a link, not a button, however it is marked up. */
.mg-login .btn-link[b-i5d77mfskt] {
    border: 0;
    background: none;
    padding: 0;
    color: #14607a;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.mg-login .mg-login-error[b-i5d77mfskt] {
    margin: 0 0 1rem;
    padding: .5rem .7rem;
    border: 1px solid #f0c7c9;
    border-radius: 8px;
    background: #fbeaea;
    color: #8f1c22;
}

@media (max-width: 26rem) {
    .mg-login[b-i5d77mfskt] {
        margin: 1.5rem 1rem;
        padding: 1.25rem 1.1rem;
    }
}
/* _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;
}

/* A screen notice, never paper: it landed on top of the printed week sheet of Staff Planning (Stefaan 2026-10-04,
   "ganse lijn eruit"). The access-denied notice stays - then there is nothing else to print. */
@media print {
    .mg-read-only[b-yhlttp4gj3] { display: none; }
}
/* _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 33 (Stefaan, 2026-10-07): "Signout moet een icoon worden." Square, so it reads as a button and not
   as a word that lost its letters - the text padding left over from "Sign out" made an oblong with a tiny
   glyph adrift in it. The label travels with the markup but is hidden HERE; in the narrow panel below it
   comes back, because a menu row needs a word. */
.mg-logout-btn--icon[b-ijjm13j9dr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    line-height: 0;
}

.mg-logout-btn--icon .mg-logout-label[b-ijjm13j9dr] {
    /* Hidden from sight, kept for the panel rule below. The accessible name does not depend on it:
       the button carries aria-label, so a screen reader is served either way. */
    display: none;
}

/* 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;
    }

    /* Blok 33: in the panel the sign-out is a menu ROW, not a bar icon, so the word comes back and the
       square icon padding is undone. justify-content is reset too - .mg-logout-btn--icon centres its
       content, which would park "Sign out" in the middle of a left-aligned list. */
    .mg-user-panel .mg-logout-btn--icon[b-ijjm13j9dr] {
        justify-content: flex-start;
        padding: .35rem .45rem;
        line-height: inherit;
    }

    .mg-user-panel .mg-logout-btn--icon .mg-logout-label[b-ijjm13j9dr] {
        display: inline;
    }

    .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;
    }
}
/* _content/MeninGate.Identity.Web/Components/WorkWaiting.razor.rz.scp.css */
/* The lamp beside Frontdoor (erp-platform Blok 30). The same amber language as RM 2.0's Intake & Update Queue lamp,
   so the office learns ONE signal: amber breathing = something waits; red = the oldest waited more than a working day.
   Compact on purpose: it sits in every app bar, beside the Frontdoor link, and must not push that bar around.
   Under prefers-reduced-motion it glows and does not move. */
.mg-ww[b-wiu3r98a82] { position: relative; display: inline-flex; align-items: center; margin-left: .35rem; }

.mg-ww-lamp[b-wiu3r98a82] {
    display: inline-flex; align-items: center; gap: .35rem;
    font: inherit; font-size: .8rem; line-height: 1.3; cursor: pointer;
    color: #2b1d00; background: #f6c453; border: 1px solid #ffd978; border-radius: 999px;
    padding: .1rem .5rem .1rem .4rem;
    animation: mg-ww-glow-b-wiu3r98a82 2.4s ease-in-out infinite;
}
.mg-ww-lamp:focus-visible[b-wiu3r98a82] { outline: 2px solid #fff; outline-offset: 1px; }
.mg-ww-dot[b-wiu3r98a82] { width: .5rem; height: .5rem; border-radius: 50%; background: #b23b2e; animation: mg-ww-blink-b-wiu3r98a82 2.4s ease-in-out infinite; }
.mg-ww-count[b-wiu3r98a82] { font-variant-numeric: tabular-nums; }

.mg-ww-lamp--late[b-wiu3r98a82] { color: #fff; background: #b23b2e; border-color: #e0685b; animation-name: mg-ww-glow-late-b-wiu3r98a82; }
.mg-ww-lamp--late .mg-ww-dot[b-wiu3r98a82] { background: #fff; }

@keyframes mg-ww-glow-b-wiu3r98a82 { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 196, 83, 0); } 50% { box-shadow: 0 0 .8rem .12rem rgba(246, 196, 83, .75); } }
@keyframes mg-ww-glow-late-b-wiu3r98a82 { 0%, 100% { box-shadow: 0 0 0 0 rgba(178, 59, 46, 0); } 50% { box-shadow: 0 0 .8rem .15rem rgba(224, 104, 91, .8); } }
@keyframes mg-ww-blink-b-wiu3r98a82 { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
    .mg-ww-lamp[b-wiu3r98a82], .mg-ww-dot[b-wiu3r98a82] { animation: none; }
    .mg-ww-lamp[b-wiu3r98a82] { box-shadow: 0 0 .5rem .1rem rgba(246, 196, 83, .6); }
    .mg-ww-lamp--late[b-wiu3r98a82] { box-shadow: 0 0 .5rem .1rem rgba(224, 104, 91, .7); }
}

/* The panel (Stefaan 2026-10-05: "mag groter en daar mag meer informatie in komen"). Fixed to the viewport, centred under
   the bar: it lives in the shell, never inside a transformed workbench, so fixed is safe. Wide enough for a row per item
   with its details on one glance; stacks on a phone. */
.mg-ww-backdrop[b-wiu3r98a82] { position: fixed; inset: 0; z-index: 950; background: rgba(20, 50, 59, .2); }
.mg-ww-panel[b-wiu3r98a82] {
    position: fixed; z-index: 951; top: 3.3rem; left: 50%; transform: translateX(-50%);
    width: min(64rem, calc(100vw - 1rem)); max-height: calc(100vh - 4.5rem); overflow: auto;
    display: flex; flex-direction: column; gap: .5rem; padding: .6rem .8rem .8rem;
    background: #fff; color: #1f2933; border-radius: 8px; border-top: 4px solid #f6c453;
    box-shadow: 0 12px 40px rgba(31, 41, 51, .35); font-size: .85rem; text-align: left;
}
.mg-ww-panel-head[b-wiu3r98a82] { display: flex; align-items: center; justify-content: space-between; }
.mg-ww-panel-title[b-wiu3r98a82] { font-size: 1.05rem; color: #14323b; display: inline-flex; align-items: center; gap: .5rem; }
.mg-ww-x[b-wiu3r98a82] { font: inherit; font-size: 1.4rem; line-height: 1; background: none; border: 0; cursor: pointer; color: #52606d; }

.mg-ww-n[b-wiu3r98a82] { font-variant-numeric: tabular-nums; background: #14323b; color: #f6c453; border-radius: 999px; padding: 0 .5em; font-size: .78rem; }
.mg-ww-group[b-wiu3r98a82] { display: flex; flex-direction: column; border: 1px solid #e4e7eb; border-left: 4px solid #f6c453; border-radius: 6px; overflow: hidden; }
.mg-ww-group--late[b-wiu3r98a82] { border-left-color: #b23b2e; }
.mg-ww-group-head[b-wiu3r98a82] {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .45rem .7rem;
    background: #f5f7f7; color: inherit; text-decoration: none;
}
.mg-ww-group-head:hover[b-wiu3r98a82] { background: #eef2f3; }
.mg-ww-title[b-wiu3r98a82] { color: #14323b; font-size: .95rem; }
.mg-ww-firma[b-wiu3r98a82] { color: #52606d; }
.mg-ww-age[b-wiu3r98a82] { color: #7b8794; font-size: .78rem; }
.mg-ww-group--late .mg-ww-age[b-wiu3r98a82] { color: #b23b2e; }
.mg-ww-go[b-wiu3r98a82] { margin-left: auto; color: #14323b; font-size: .8rem; }

/* One row per item: when · kind · booking · customer · group · where/when, and the detail line under it. */
.mg-ww-entry[b-wiu3r98a82] {
    display: grid; grid-template-columns: 4.2rem 7.5rem 5rem minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(9rem, 1fr);
    grid-template-areas: "when kind ref who what where" ". . . detail detail detail";
    gap: .1rem .6rem; padding: .4rem .7rem; color: inherit; text-decoration: none; border-top: 1px solid #eef0f2;
}
.mg-ww-entry:hover[b-wiu3r98a82] { background: #fbf6e6; }
.mg-ww-e-when[b-wiu3r98a82] { grid-area: when; color: #7b8794; font-variant-numeric: tabular-nums; }
.mg-ww-entry--late .mg-ww-e-when[b-wiu3r98a82] { color: #b23b2e; }
.mg-ww-e-kind[b-wiu3r98a82] { grid-area: kind; color: #14323b; }
.mg-ww-e-ref[b-wiu3r98a82] { grid-area: ref; font-family: Consolas, monospace; color: #14323b; }
.mg-ww-e-who[b-wiu3r98a82] { grid-area: who; }
.mg-ww-e-what[b-wiu3r98a82] { grid-area: what; color: #14323b; }
.mg-ww-e-where[b-wiu3r98a82] { grid-area: where; color: #52606d; }
.mg-ww-e-detail[b-wiu3r98a82] { grid-area: detail; color: #1f2933; background: #f8fafb; border-radius: 4px; padding: .15rem .4rem; }
.mg-ww-state[b-wiu3r98a82] { padding: .45rem .7rem; color: #7b8794; border-top: 1px solid #eef0f2; }
.mg-ww-state--done[b-wiu3r98a82] { border: 1px solid #c7ead8; border-radius: 6px; background: #e7f5ee; color: #1d6b45; }

/* The owner's decision page, inline. Tall enough to work a day's queue without leaving the panel; it scrolls itself. */
.mg-ww-frame[b-wiu3r98a82] { display: block; width: 100%; height: min(64vh, 46rem); border: 0; border-top: 1px solid #eef0f2; background: #fff; }

@media (max-width: 760px) {
    .mg-ww-panel[b-wiu3r98a82] { top: 2.9rem; }
    .mg-ww-go[b-wiu3r98a82] { margin-left: 0; }
    .mg-ww-entry[b-wiu3r98a82] {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "kind ref when" "who who who" "what what what" "where where where" "detail detail detail";
    }
    .mg-ww-e-when[b-wiu3r98a82] { justify-self: end; }
}