/* Pagina Partners (/partners) en de bijbehorende dialogen. Ontwerp: curr/mockups/partner-toegang.html.
   Kleuren volgen het donkere thema: wit met doorzichtigheid en het accent uit --mud-palette-primary.
   De kaarten zijn de gedeelde CurrentlyCard uit cards.css; hier staat alleen wat eigen is aan deze pagina.
   De kaart Plekken en de lijst Je partners volgen curr/mockups/partner-plekken-en-lijst.html. */




/* ── Opbouw: toegangskaart, dan links Plekken en rechts de lijst, dan de activiteitswidget ── */
.pt-stack { display: flex; flex-direction: column; gap: 18px; }
/* stretch en niet start: de kaart Plekken hoort door te lopen tot onderaan de lijst ernaast, anders
   valt er een gat van een paar honderd pixels in de linkerkolom. */
.pt-grid2 { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: stretch; }
/* De dashboardkaart begrenst zichzelf op 460px voor het tegelraster; hier groeit elke kaart mee met de inhoud. */
.pt-grid2 .dw-card { max-height: none; }
.pt-side { display: flex; flex-direction: column; gap: 14px; }
/* In de smalle zijkolom mag een lange badge over twee regels; anders loopt 'ie onder de tijd door. */
.pt-side .pa-badge { white-space: normal; line-height: 1.3; }
.pt-side .pa-card { align-items: flex-start; }
@media (max-width: 1100px) { .pt-grid2 { grid-template-columns: 1fr; } }

.pt-hint { font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); margin-top: 8px; line-height: 1.5; }
.pt-hint a { color: var(--mud-palette-primary); text-decoration: none; font-weight: 600; }
.pt-hint a:hover { text-decoration: underline; }

/* ── De kaart Plekken ──
   De kaart rekt mee met de lijst ernaast, dus de inhoud moet die hoogte verdelen: de kaart wordt een
   kolom, het lichaam neemt wat overblijft en de slotregel zakt naar de onderkant. */
.pt-places { display: flex; flex-direction: column; }
.pt-places-body { display: flex; flex-direction: column; gap: 18px; flex: 1; }

.pt-count { display: flex; align-items: baseline; gap: 8px; }
.pt-count b { font-size: 2.1rem; font-weight: 800; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.03em; line-height: 1; }
.pt-count span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); }

/* Een vakje per plek: vol is bezet, gestippeld is vrij, oranje is een partner boven het abonnement.
   Plekken zijn te tellen, dus telbaar tekenen leest sneller dan een percentage. Vanaf een stuk of
   twaalf plekken wordt elk vakje te smal om te tellen; dan tekent de kaart een doorlopende balk. */
.pt-meter { display: flex; gap: 5px; margin-top: 12px; }
.pt-meter i { flex: 1; height: 8px; border-radius: 4px; background: var(--mud-palette-primary); box-sizing: border-box; }
.pt-meter i.free { background: none; border: 1px dashed rgba(255, 255, 255, 0.22); }
.pt-meter i.over { background: #F97316; }
.pt-meter.solid { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.pt-meter.solid i { display: block; height: 100%; border-radius: 4px; }

/* Label links gedimd, waarde rechts vet, dunne lijn ertussen: dezelfde regels als de
   nacalculatiekaart in de zijkolom van de uitvoeringspagina (ProjectCostingCard). */
.pt-stats { display: flex; flex-direction: column; font-size: 0.82rem; }
.pt-stats > div { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.pt-stats > div:last-child { border-bottom: none; }
.pt-stats .k { color: rgba(255, 255, 255, 0.55); }
.pt-stats .v { font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.9); }
.pt-stats .v.free { color: #34D399; }
.pt-stats .v.zero { color: rgba(255, 255, 255, 0.45); }
.pt-stats .v.over { color: #F97316; }

.pt-lbl { font-size: 0.68rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 9px; }
.pt-faces { display: flex; gap: 6px; flex-wrap: wrap; }

.pt-places-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); line-height: 1.5; }
/* De stand krijgt de nadruk, de uitleg eronder blijft gedimd; oranje is alleen voor de stand, want
   anders schreeuwt ook de zin die zegt wat je eraan kunt doen. */
.pt-places-foot .t { font-weight: 600; color: rgba(255, 255, 255, 0.7); margin-bottom: 4px; }
.pt-places-foot.warn .t { color: #F97316; }

/* Avatar: in de lijst groot, bij de ring klein */
.pt-av { position: relative; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.86rem; font-weight: 800; color: #1A1A1A; background: linear-gradient(135deg, var(--mud-palette-primary), #fb923c); flex-shrink: 0; }
.pt-av.off { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.7); }
.pt-av.over { background: transparent; border: 1px solid #F97316; color: #F97316; }
.pt-av.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 0.62rem; }
.pt-av.free { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.35); }
.pt-av.plus { background: rgba(var(--mud-palette-primary-rgb), 0.14); color: var(--mud-palette-primary); }
.pt-av .dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #1A1A1A; background: #9CA3AF; }
.pt-av .dot.on { background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25); }
.pt-av .dot.lock { background: #F87171; }

/* ── De lijst ── */
.pt-tog { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.45); font-weight: 600; }
.pt-tog .mud-switch { margin: 0; }
.pt-row .rm { align-self: center; }
.pt-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.pt-rows { display: flex; flex-direction: column; gap: 8px; }
.pt-nomatch { font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); padding: 14px; text-align: center; }
/* Een rij is twee lagen: boven wie het is en wanneer 'ie er was, onder wat 'ie ziet en hoeveel
   projecten. Op een regel stonden die drie dingen naast elkaar en liepen ze in elkaar over. */
.pt-row { position: relative; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; background: rgba(255, 255, 255, 0.02); transition: border-color 0.2s ease, background 0.2s ease; }
.pt-row:hover { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.035); }
.pt-row.off { opacity: 0.72; }
.pt-rowtop { display: grid; grid-template-columns: 44px 1fr auto auto 32px; gap: 14px; align-items: center; }
/* De onderlaag begint onder de naam en niet onder de avatar: 44 pixels avatar plus de tussenruimte. */
.pt-rowfoot { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding-top: 10px; padding-left: 58px; border-top: 1px solid rgba(255, 255, 255, 0.055); }
.pt-sees { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pt-sees .lbl { font-size: 0.68rem; color: rgba(255, 255, 255, 0.35); margin-right: 2px; }
.pt-projects { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.pt-projects .mud-icon-root { font-size: 14px; color: rgba(255, 255, 255, 0.35); }
.pt-projects.none { color: rgba(255, 255, 255, 0.35); font-weight: 400; }
.pt-who { min-width: 0; }
.pt-who .n { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); }
.pt-who .n b { font-weight: 700; }
.pt-note { font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.pt-chip { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.03); }
.pt-chip.on { color: var(--mud-palette-primary); border-color: rgba(var(--mud-palette-primary-rgb), 0.35); background: rgba(var(--mud-palette-primary-rgb), 0.08); }
.pt-badge { font-size: 0.64rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.pt-badge.off { color: #F97316; background: rgba(249, 115, 22, 0.14); }
.pt-badge.over { color: #F97316; background: rgba(249, 115, 22, 0.14); }
.pt-badge.lock { color: #F87171; background: rgba(248, 113, 113, 0.14); }
.pt-meta { text-align: right; font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); min-width: 150px; max-width: 200px; line-height: 1.4; }
.pt-meta b { color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.pt-meta .on { color: #34D399; font-weight: 600; }
.pt-meta .lock { color: #F87171; font-weight: 600; }
.pt-meta .cap { color: #F97316; font-weight: 600; }
@media (max-width: 900px) { .pt-rowtop { grid-template-columns: 44px 1fr auto 32px; } .pt-meta { display: none; } .pt-rowfoot { padding-left: 0; } }

/* Uitnodigen-rij onder de lijst */
.pt-inviterow { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px dashed rgba(var(--mud-palette-primary-rgb), 0.45); border-radius: 12px; }
.pt-inviterow .t { font-size: 0.9rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.pt-inviterow .h { font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); margin-top: 2px; }
.pt-inviterow > .pt-inviterow-text { flex: 1; min-width: 0; }
.pt-inviterow.full { border-color: rgba(255, 255, 255, 0.08); }
.pt-inviterow.full .pt-av.plus { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.45); }


/* ── Nog geen partners: de drie stappen onder de lege staat van de schil ── */
.pt-steps { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 18px auto 0; text-align: left; }
.pt-step { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.pt-step .no { width: 30px; height: 30px; border-radius: 9px; background: rgba(var(--mud-palette-primary-rgb), 0.14); color: var(--mud-palette-primary); font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
.pt-step .t { font-size: 0.86rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.pt-step .h { font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); margin-top: 2px; line-height: 1.4; }

/* ── Dialogen: onderdelen en projecten ── */
.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-editor { display: flex; flex-direction: column; gap: 14px; }
.pt-scopes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-sc { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; background: none; cursor: pointer; text-align: left; font-family: inherit; color: inherit; }
.pt-sc.on { border-color: rgba(var(--mud-palette-primary-rgb), 0.45); background: rgba(var(--mud-palette-primary-rgb), 0.06); }
.pt-sc .box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.08); margin-top: 2px; flex-shrink: 0; }
.pt-sc.on .box { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.pt-sc b { display: block; color: rgba(255, 255, 255, 0.9); font-size: 0.82rem; }
.pt-sc span span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); line-height: 1.45; }
.pt-row-item .grow, .pt-result .grow { flex: 1; min-width: 0; }

/* ── Dialoog "De uitnodiging staat klaar": sleutel, link en gebruikersnaam met kopieerknop ── */
.pt-coderow { display: flex; align-items: center; gap: 8px; }
.pt-key { flex: 1; min-width: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.05rem; letter-spacing: 0.08em; font-weight: 700; color: rgba(255, 255, 255, 0.92); background: rgba(0, 0, 0, 0.3); border: 1px dashed rgba(var(--mud-palette-primary-rgb), 0.5); border-radius: 9px; padding: 11px 14px; }
.pt-code { flex: 1; min-width: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 9px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-iconbtn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.55); cursor: pointer; transition: background 0.15s, color 0.15s; }
.pt-iconbtn:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.9); }
.pt-iconbtn.ok { color: #34D399; }
.pt-sent { padding: 8px 0 4px; text-align: center; }
.pt-sent-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(52, 211, 153, 0.14); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.pt-sent-title { font-size: 1.05rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); margin-bottom: 8px; }
.pt-sent-body { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); line-height: 1.5; }

/* ── Projectenboom in "Wat mag deze partner zien" ── */
.pt-treeinfo { margin-top: 8px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); padding: 10px 12px; line-height: 1.45; }
.pt-treeinfo.dashed { border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 10px; }
.pt-treeinfo.child { margin: 0 0 0 calc(34px + 12px); padding: 6px 12px; }
.pt-tree { margin-top: 8px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; overflow: hidden; max-height: 300px; overflow-y: auto; }
.pt-tnode + .pt-tnode { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pt-trow { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px calc(6px + var(--depth) * 26px); }
.pt-trow.on { background: rgba(var(--mud-palette-primary-rgb), 0.06); }
.pt-trow.implied { opacity: 0.75; }
.pt-tchev { width: 28px; height: 28px; border-radius: 7px; border: none; background: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-tchev:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.9); }
.pt-tchev.spacer { cursor: default; }
.pt-tcheck { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 2px; }
.pt-tcheck input { width: 16px; height: 16px; accent-color: var(--mud-palette-primary); flex-shrink: 0; margin: 0; cursor: pointer; }
.pt-tcheck input:disabled { cursor: default; }
.pt-tcheck .kind { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; flex-shrink: 0; }
.pt-tcheck .kind.d { background: rgba(167, 139, 250, 0.16); color: #A78BFA; }
.pt-tcheck .kind.p { background: rgba(96, 165, 250, 0.16); color: #60A5FA; }
.pt-tcheck .grow { flex: 1; min-width: 0; }
.pt-tcheck .grow b { display: block; color: rgba(255, 255, 255, 0.9); font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tcheck .grow span { font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); }
.pt-timplied { font-size: 0.68rem; color: rgba(255, 255, 255, 0.45); white-space: nowrap; flex-shrink: 0; }

/* ── Subscopes in de toegangsdialoog: per onderdeel welke soorten daarbinnen open staan ──
   Dezelfde keuzelijst als het rijmenu achter de drie puntjes (qm-panel + qm-row), met een
   kleurbolletje en een vinkje per regel. Het paneel klapt in de stroom open en zweeft niet: het
   lichaam van een dialog heeft een eigen schuifbalk en zou een zwevend paneel afknippen. */
.pt-picker { margin-top: 12px; }

.pt-picker-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px;
    background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.85);
    font-family: inherit; font-size: 0.82rem; font-weight: 600; text-align: left; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pt-picker-btn:hover { border-color: rgba(255, 255, 255, 0.24); }
.pt-picker-btn.on { border-color: rgba(var(--mud-palette-primary-rgb), 0.45); background: rgba(var(--mud-palette-primary-rgb), 0.06); }
.pt-picker-btn .lbl { flex: 1; min-width: 0; }
/* De stand staat op de knop, ook dicht: juist wanneer er iets is aangevinkt valt de rest weg. */
.pt-picker-btn .state { font-size: 0.74rem; font-weight: 400; color: rgba(255, 255, 255, 0.4); white-space: nowrap; }
.pt-picker-btn .state.limited { color: var(--mud-palette-primary); font-weight: 600; }

.pt-picker-panel { margin-top: 6px; max-height: 320px; overflow-y: auto; }
.pt-picker-panel .qm-row { gap: 10px; }
.pt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pt-check { margin-left: auto; }
.pt-check.on { color: var(--mud-palette-primary); }