/* mg-finder.css — de gedeelde Outlook-achtige master-detail (FinderShell.razor).
   Host linkt: <link rel="stylesheet" href="_content/MeninGate.Web.UI/mg-finder.css" />

   BEWUST NIET SCOPED. De rail-regel en de fiche komen als RenderFragment uit de pagina; scoped CSS
   stempelt haar [b-…] alleen op markup van de component zelf, dus die inhoud zou buiten schot
   blijven — groene build, geen waarschuwing, regel matcht niet.

   Typografie volgt het platform: Segoe UI Light, geen bold als structuurmiddel (accenten mogen). */

.mg-finder {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid #dfe6e7;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    /* Vult de pagina zonder een harde cap: de fiche mag lang zijn en scrollt in haar eigen kolom. */
    min-height: calc(100vh - 15rem);
}

/* ---------- de rail ---------- */
.mg-finder-rail {
    flex: 0 0 22rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid #e6ecec;
    background: #fafcfc;
    transition: flex-basis .18s ease, opacity .18s ease;
}

.mg-finder--rail-in .mg-finder-rail {
    flex-basis: 0;
    opacity: 0;
    pointer-events: none;
    border-right: 0;
}

.mg-finder-railhead { padding: .6rem .65rem .4rem; border-bottom: 1px solid #eef2f2; }

.mg-finder-search { position: relative; display: flex; align-items: center; }

.mg-finder-input {
    width: 100%;
    padding: .38rem 1.6rem .38rem .55rem;
    border: 1px solid #cfdadc;
    border-radius: 5px;
    font: inherit;
    font-size: .88rem;
    background: #fff;
}

.mg-finder-input:focus { outline: 2px solid #9fc4cc; outline-offset: -1px; border-color: #9fc4cc; }

.mg-finder-clear {
    position: absolute; right: .3rem;
    background: none; border: none; cursor: pointer;
    color: #7a8c90; font-size: 1.05rem; line-height: 1; padding: 0 .2rem;
}

/* De hint onder het zoekveld: vertelt WELKE velden meedoen (pijler 2). */
.mg-finder-hint { margin: .3rem 0 0; font-size: .72rem; line-height: 1.3; color: #7a8c90; }
.mg-finder-hint b { font-weight: 600; color: #55666b; }

.mg-finder-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .45rem; }

.mg-finder-count {
    padding: .3rem .7rem;
    font-size: .76rem;
    color: #6b7c81;
    border-bottom: 1px solid #eef2f2;
    background: #f4f8f8;
    /* De teller links, uitvoeren rechts - op EEN regel, want ze horen bij elkaar: je voert uit wat de
       teller zegt. Blok 44. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.mg-finder-export { display: inline-flex; gap: .25rem; flex: 0 0 auto; }

.mg-finder-export-btn {
    /* Een icoon op de lijn, geen woord (pijler 9). Het bestandstype staat in de hovertekst EN in het
       aria-label, want vorm alleen draagt nooit de betekenis. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1px solid #cfdcdc;
    border-radius: 3px;
    background: #fff;
    color: #2f6b4f;
    cursor: pointer;
}

.mg-finder-export-btn:hover:not(:disabled) { background: #e8f1ec; border-color: #9dbdae; }
.mg-finder-export-btn:disabled { opacity: .5; cursor: default; }

.mg-finder-none { color: #8a5a2b; }

.mg-finder-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;   /* zonder dit groeit de lijst i.p.v. te scrollen */
}

.mg-finder-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid #eef2f2;
    border-left: 3px solid transparent;
    padding: .45rem .7rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.mg-finder-item:hover { background: #eff5f6; }

/* A dated item in the PAST: light grey, the colour of the past days on RM's board (platform rule, Stefaan
   2026-10-01). FinderShell sets it through its IsPast parameter; a page that renders its own rail sets the
   class itself. Declared before --on so the selected item still wins. */
.mg-finder-item--past { background: #eeeeee; }
.mg-finder-item--past:hover { background: #e6eaeb; }

.mg-finder-item--on {
    background: #e4eff1;
    border-left-color: #215868;
}

/* ---------- het strookje ---------- */
.mg-finder-handle {
    flex: 0 0 .85rem;
    border: 0;
    border-right: 1px solid #e6ecec;
    background: #f2f7f7;
    cursor: pointer;
    padding: 0;
    color: #7a8c90;
}

.mg-finder-handle:hover { background: #e4eff1; color: #215868; }
.mg-finder-handle-arrow { font-size: .8rem; line-height: 1; }

/* Dicht: breder, met een verticaal label — zo ben je nooit de weg kwijt. */
.mg-finder-handle--in { flex-basis: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding-top: .6rem; }
.mg-finder-vlabel {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .7rem; color: #7a8c90;
}

/* ---------- de fiche ---------- */
.mg-finder-detail {
    flex: 1 1 auto;
    min-width: 0;
    padding: .8rem 1rem;
    overflow-y: auto;
}

.mg-finder-empty { color: #7a8c90; font-size: .9rem; margin: 2rem 0; text-align: center; }

/* ---------- bouwstenen voor de rail-regel (de pagina's gebruiken deze) ---------- */
.mg-fi-top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.mg-fi-title { font-size: .92rem; color: #1f3d46; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-fi-sub { font-size: .76rem; color: #6b7c81; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-fi-tags { display: flex; flex-wrap: wrap; gap: .22rem; margin-top: .22rem; }
.mg-fi-dim { color: #93a4a8; }

/* ---------- de fiche-kop (naam + acties) ---------- */
.mg-fiche-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding-bottom: .55rem; margin-bottom: .75rem;
    border-bottom: 1px solid #e6ecec;
}

.mg-fiche-name { font-size: 1.15rem; color: #1f3d46; margin: 0; display: flex; align-items: center; gap: .4rem; }
/* The head on a fiche is a quiet marker, not an action: it never competes with the name it stands in front of. */
.mg-fiche-ico { color: #6f8a93; flex: none; }
.mg-fiche-sub { font-size: .82rem; color: #6b7c81; margin: .15rem 0 0; }
.mg-fiche-actions { display: flex; flex-wrap: wrap; gap: .3rem; }

.mg-fiche-section { margin-bottom: 1.1rem; }

/* Label/waarde in twee kolommen. Een kale <dl> zet de <dd> op een eigen, ingesprongen regel —
   dat is precies de verspilling die de finder moest oplossen. */
.mg-kv {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: .3rem .9rem;
    margin: 0;
    align-items: baseline;
}

.mg-kv > dt { color: #6b7c81; font-size: .84rem; }
.mg-kv > dd { margin: 0; color: #1f3d46; font-size: .9rem; }
.mg-kv > dd > .cfg-pill + .cfg-pill { margin-left: .25rem; }

/* Knoppen in een fiche krijgen hun natuurlijke breedte terug.
   🔴 width:auto is de eigenlijke fix. De oude tabelvorm gaf elke actieknop een VASTE breedte
   (.cfg-act-assign 6rem, .cfg-act-edit 3.6rem, …) zodat de actiekolom netjes uitlijnde. In een fiche
   knipt dat de tekst af: "Manage firma access & rights" kreeg 96px waar het er ~150 nodig heeft, en
   de rand liep dus maar om de helft van het opschrift. Gemeten in de DOM, niet geraden — op de
   screenshot leek het een wrap-probleem en dat was het niet. */
.mg-fiche-section .cfg-btn,
.mg-fiche-actions .cfg-btn { display: inline-block; white-space: nowrap; width: auto; }
.mg-fiche-section > h3 {
    font-size: .95rem; color: #26525e; margin: 0 0 .45rem;
    padding-bottom: .2rem; border-bottom: 1px solid #eef2f2;
}

/* ---------- smal scherm: de rail wordt een strook boven de fiche ---------- */
@media (max-width: 900px) {
    .mg-finder { flex-direction: column; min-height: 0; }
    .mg-finder-rail { flex-basis: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid #e6ecec; }
    .mg-finder--rail-in .mg-finder-rail { display: none; }
    .mg-finder-handle { flex-basis: .85rem; width: 100%; border-right: 0; border-bottom: 1px solid #e6ecec; }
}

/* DetailOnly: the fiche alone, full width, no page-filling min-height (it sits in an embedding panel). */
.mg-finder--detail-only { min-height: 0; border: 0; border-radius: 0; }