/* Portal users (Pages/CompanyUsers.razor): company admins invite and manage their company's portal users. */
.cu-screen {
    --cu-ink: #0f172a;
    --cu-text: #1e293b;
    --cu-muted: #64748b;
    --cu-line: #e2e8f0;
    --cu-card: #ffffff;
    --cu-blue: #2563eb;
    --cu-blue-deep: #1d4ed8;
    --cu-blue-soft: #eff6ff;
    --cu-green: #15803d;
    --cu-green-soft: #f0fdf4;
    --cu-amber: #b45309;
    --cu-amber-soft: #fffbeb;
    --cu-red: #b91c1c;
    --cu-red-soft: #fef2f2;
    --cu-radius: 1rem;
    --cu-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .04);
    display: grid;
    gap: 1.1rem;
    max-width: 72rem;
    color: var(--cu-text);
}
.cu-kicker { display: block; margin: 0; color: var(--cu-blue-deep); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cu-intro, .cu-card, .cu-usage, .cu-state { border: 1px solid var(--cu-line); border-radius: var(--cu-radius); background: var(--cu-card); box-shadow: var(--cu-shadow); }
.cu-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem; }
.cu-intro h1 { margin: .35rem 0 .4rem; color: var(--cu-ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.cu-intro p { max-width: 44rem; margin: 0; color: #475569; font-size: .92rem; line-height: 1.6; }
.cu-company { display: grid; gap: .3rem; min-width: min(100%, 16rem); }
.cu-company span { color: var(--cu-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cu-state { display: grid; gap: .35rem; padding: 1.4rem 1.5rem; color: #475569; }
.cu-state strong { color: var(--cu-ink); }

.cu-usage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding: 1rem 1.5rem; }
.cu-usage strong { display: block; margin: .2rem 0 .1rem; color: var(--cu-ink); font-size: 1.45rem; font-weight: 800; }
.cu-usage strong span { color: var(--cu-muted); font-size: 1rem; font-weight: 600; }
.cu-usage-note { color: var(--cu-muted); font-size: .82rem; }
.cu-bar { flex: 1 1 14rem; max-width: 26rem; height: .55rem; overflow: hidden; border-radius: 999px; background: #e9edf3; }
.cu-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cu-blue), #38bdf8); transition: width .3s ease; }
.cu-bar.is-full > span { background: var(--cu-amber); }

.cu-alert { display: grid; gap: .2rem; padding: .75rem 1rem; border: 1px solid; border-radius: .75rem; font-size: .9rem; }
.cu-alert.is-ok { border-color: #bbf7d0; background: var(--cu-green-soft); color: #14532d; }
.cu-alert.is-error { border-color: #fecaca; background: var(--cu-red-soft); color: #7f1d1d; }
.cu-alert-warning { color: #78350f; }

.cu-card { padding: 1.25rem 1.5rem; }
.cu-card h2 { margin: 0 0 .25rem; color: var(--cu-ink); font-size: 1.05rem; font-weight: 800; }
.cu-card h2 span { color: var(--cu-muted); font-weight: 600; }
.cu-card > p { margin: 0 0 .9rem; color: var(--cu-muted); font-size: .86rem; }
.cu-invite-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .8rem; }
.cu-invite-fields label { display: grid; gap: .3rem; }
.cu-invite-fields label > span { color: #334155; font-size: .82rem; font-weight: 700; }
.cu-invite-fields em { color: var(--cu-muted); font-style: normal; font-weight: 500; }
.cu-check { display: flex; align-items: flex-start; gap: .55rem; margin: .9rem 0 0; color: #334155; font-size: .88rem; cursor: pointer; }
.cu-check input { width: 1.05rem; height: 1.05rem; margin-top: .15rem; flex: none; accent-color: var(--cu-blue); }
.cu-invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.cu-limit-note { color: var(--cu-amber); font-size: .84rem; }

.cu-empty { margin: .5rem 0 0; color: var(--cu-muted); }
.cu-people { display: grid; margin: .75rem 0 0; padding: 0; list-style: none; }
.cu-person { display: grid; grid-template-columns: minmax(14rem, 1.6fr) minmax(9rem, .9fr) minmax(10rem, 1fr) auto; align-items: center; gap: .6rem 1rem; padding: .8rem 0; border-top: 1px solid var(--cu-line); }
.cu-person:first-child { border-top: 0; }
.cu-person.is-disabled .cu-who { opacity: .6; }
.cu-who { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cu-who > div { display: grid; min-width: 0; }
.cu-who strong { display: flex; align-items: center; gap: .4rem; color: var(--cu-ink); font-size: .93rem; }
.cu-who > div > span { overflow: hidden; color: var(--cu-muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.cu-avatar { display: grid; flex: none; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: 50%; background: var(--cu-blue-soft); color: var(--cu-blue-deep); font-size: .8rem; font-weight: 800; }
.cu-you { padding: .05rem .4rem; border-radius: 999px; background: #f1f5f9; color: var(--cu-muted); font-size: .7rem; font-weight: 700; }
.cu-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.cu-pill { padding: .15rem .55rem; border: 1px solid var(--cu-line); border-radius: 999px; background: #f8fafc; color: #334155; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.cu-pill.is-admin { border-color: #bfdbfe; background: var(--cu-blue-soft); color: var(--cu-blue-deep); }
.cu-pill.is-hrforit { border-color: #c7d2fe; background: #eef2ff; color: #3730a3; }
.cu-pill.is-invited { border-color: #fde68a; background: var(--cu-amber-soft); color: var(--cu-amber); }
.cu-pill.is-off { border-color: #fecaca; background: var(--cu-red-soft); color: var(--cu-red); }
.cu-seen { color: var(--cu-muted); font-size: .8rem; }
.cu-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.cu-actions .btn { white-space: nowrap; }
.cu-danger-outline { border: 1px solid #fecaca; background: #fff; color: var(--cu-red); }
.cu-danger-outline:hover:not(:disabled) { background: var(--cu-red-soft); }
.cu-danger { border: 1px solid var(--cu-red); background: var(--cu-red); color: #fff; }
.cu-danger:hover:not(:disabled) { background: #991b1b; }
.cu-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; color: var(--cu-red); font-size: .84rem; font-weight: 600; }

/* Tabs */
.cu-tabs { display: flex; gap: .35rem; border-bottom: 1px solid var(--cu-line); }
.cu-tabs button { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: -1px; padding: .6rem .95rem; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: .6rem .6rem 0 0; background: none; color: var(--cu-muted); font-weight: 700; cursor: pointer; }
.cu-tabs button span { padding: 0 .45rem; border-radius: 999px; background: #f1f5f9; font-size: .75rem; }
.cu-tabs button:hover { color: var(--cu-ink); }
.cu-tabs button.is-active { border-bottom-color: var(--cu-blue); color: var(--cu-blue-deep); }
.cu-tabs button:focus-visible { outline: 2px solid var(--cu-blue); outline-offset: 2px; }
.cu-panel { display: grid; gap: 1.1rem; }

/* What each person can open */
.cu-access { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; grid-column: 1 / -1; padding: .55rem .75rem; border-radius: .6rem; background: #f8fafc; }
.cu-access-item { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-width: 0; }
.cu-access-label { color: var(--cu-muted); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cu-access-value { color: var(--cu-text); font-size: .86rem; font-weight: 600; }
.cu-access-note { color: var(--cu-muted); font-size: .78rem; }
.cu-role-select { width: auto; min-width: 12rem; padding-top: .3rem; padding-bottom: .3rem; font-size: .86rem; }
.cu-link { padding: 0; border: 0; background: none; color: var(--cu-blue-deep); font-size: .84rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cu-link:disabled { color: var(--cu-muted); cursor: default; }
.cu-departments { grid-column: 1 / -1; margin: 0; padding: .9rem 1rem; border: 1px solid #bfdbfe; border-radius: .75rem; background: var(--cu-blue-soft); }
.cu-departments legend { float: left; width: 100%; margin-bottom: .35rem; color: var(--cu-ink); font-size: .9rem; font-weight: 800; }
.cu-departments .cu-check { margin-top: .45rem; }
.cu-departments legend + .cu-check { clear: both; }
.cu-department-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0 1rem; margin: .35rem 0 0 1.6rem; }
.cu-editor-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

/* Roles */
.cu-roles-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.cu-roles-intro p { max-width: 46rem; margin: 0; color: var(--cu-muted); font-size: .86rem; }
.cu-role-editor { border-color: #bfdbfe; }
.cu-editor-hint { margin: 1rem 0 .4rem !important; color: #334155 !important; font-weight: 700; }
.cu-page-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .75rem; }
.cu-page-groups fieldset { margin: 0; padding: .6rem .8rem .7rem; border: 1px solid var(--cu-line); border-radius: .75rem; }
.cu-page-groups legend { padding: 0 .3rem; color: var(--cu-muted); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cu-page-groups .cu-check { margin-top: .4rem; }
.cu-check.is-unavailable { color: #94a3b8; cursor: not-allowed; }
.cu-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .9rem; }
.cu-role { display: flex; flex-direction: column; gap: .6rem; padding: 1.05rem 1.15rem; }
.cu-role header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cu-role h3 { margin: 0; color: var(--cu-ink); font-size: .98rem; font-weight: 800; }
.cu-role > p { margin: 0; color: var(--cu-muted); font-size: .84rem; line-height: 1.45; }
.cu-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cu-chip { padding: .12rem .5rem; border-radius: .4rem; background: #f1f5f9; color: #334155; font-size: .76rem; font-weight: 600; }
.cu-chip.is-all { background: var(--cu-green-soft); color: var(--cu-green); }
.cu-chip.is-unavailable { background: none; color: #94a3b8; text-decoration: line-through; }
.cu-role footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--cu-line); }
.cu-role-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }

@media (max-width: 900px) {
    .cu-person { grid-template-columns: minmax(0, 1fr) auto; }
    .cu-seen { grid-column: 1; }
    .cu-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
    .cu-intro, .cu-card, .cu-usage { padding: 1rem; }
    .cu-intro h1 { font-size: 1.35rem; }
    .cu-invite-fields { grid-template-columns: 1fr; }
    .cu-role-select { width: 100%; }
    .cu-department-grid { margin-left: 0; }
    .cu-person { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .cu-bar > span { transition: none; }
}