/* Portal-specific extensions to the original styles.css. */
:root {
    --aubergine:#24192d;
    --dark:#18121f;
    --ink:#211d26;
    --bg:#f5f3f7;
    --bg-soft:#faf9fc;
    --line:#e1dce7;
    --accent:#66518a;
    --accent-deep:#4c376e;
    --muted:#706979;
    --max-width:1180px;
}

body {
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

a {
    text-underline-offset:4px;
}

button,input,select {
    font:inherit;
}

button {
    cursor:pointer;
}

button:disabled {
    cursor:not-allowed;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
    outline:3px solid #ad85df;
    outline-offset:4px;
}

.portal-header {
    background:var(--aubergine);
    color:#fff;
}

.header-inner {
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.portal-brand {
    display:flex;
    align-items:center;
    gap:16px;
    color:#fff;
    text-decoration:none;
    font-size:1.25rem;
    letter-spacing:-.04em;
}

.portal-brand img {
    width:46px;
    height:54px;
    object-fit:contain;
}

.portal-brand small {
    display:block;
    font-size:.59rem;
    letter-spacing:.28em;
    color:#d4c7df;
    margin-top:2px;
}

.header-note {
    color:#d4c7df;
    font-size:.78rem;
}

.header-inner nav {
    display:flex;
    align-items:center;
    gap:28px;
}

.header-inner nav a {
    color:#ddd1e7;
    text-decoration:none;
    font-size:.85rem;
}

.header-inner nav a[aria-current] {
    color:#fff;
    text-decoration:underline;
    text-underline-offset:8px;
}

.header-inner form {
    margin:0;
}

.logout {
    border:1px solid #66566f;
    background:transparent;
    border-radius:6px;
    padding:9px 15px;
    color:#fff;
    font-size:.83rem;
}

.logout span {
    margin-left:15px;
}

.portal-main {
    flex:1;
    padding-top:48px;
    padding-bottom:64px;
}

.auth-grid {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:100px;
    align-items:center;
    min-height:650px;
    padding:24px 0 44px;
}

.auth-intro h1 {
    font-size:clamp(2.8rem,5.5vw,4.7rem);
    font-weight:400;
    line-height:1.13;
    letter-spacing:-.055em;
}

.auth-intro h1 span {
    color:var(--accent);
}

.auth-intro .intro {
    font-size:1.12rem;
    line-height:1.8;
    max-width:33ch;
    margin-top:26px;
}

.eyebrow {
    font-size:.67rem;
    letter-spacing:.18em;
    margin-bottom:22px;
}

.intro-divider {
    height:1px;
    background:var(--line);
    width:68px;
    margin:32px 0;
}

.intro-index {
    display:block;
    font-size:.63rem;
    letter-spacing:.15em;
    color:var(--muted);
    margin-top:52px;
}

.muted {
    color:var(--muted);
    font-size:.92rem;
    line-height:1.8;
}

.panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:36px;
}

.auth-panel {
    box-shadow:0 16px 55px #24192d08;
    padding:42px;
}

.panel h2 {
    font-size:1.65rem;
    letter-spacing:-.04em;
    font-weight:400;
    margin:0 0 12px;
}

.panel>.muted {
    margin:0 0 25px;
}

.form-stack {
    display:grid;
    gap:19px;
    margin-top:26px;
}

.form-stack label {
    display:grid;
    gap:8px;
    font-size:.82rem;
    font-weight:700;
}

input,select {
    border:1px solid #cfc7d7;
    border-radius:6px;
    padding:12px 13px;
    background:#fff;
    color:var(--ink);
    min-width:0;
    width:100%;
}

input::placeholder {
    color:#a49cae;
}

input:focus {
    border-color:var(--accent);
}

.button {
    border:1px solid transparent;
    background:var(--aubergine);
    font-size:.85rem;
    font-weight:400;
    border-radius:6px;
    padding:13px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.button:hover {
    background:#483355;
}

.auth-panel .button {
    margin-top:5px;
}

.auth-links {
    display:grid;
    gap:10px;
    margin-top:22px;
    font-size:.77rem;
    color:var(--accent-deep);
}

.panel-bottom {
    border-top:1px solid var(--line);
    margin-top:28px;
    padding-top:22px;
    font-size:.77rem;
    color:var(--muted);
}

.panel-bottom a {
    display:inline-block;
    color:var(--accent-deep);
    margin-left:4px;
}

.field-help {
    font-size:.73rem;
    color:var(--muted);
    margin:-8px 0 0;
}

.portal-footer {
    background:transparent;
    border-top:1px solid var(--line);
    color:var(--muted);
    padding:23px 0;
    font-size:.7rem;
}

.portal-footer>.container {
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin:15px 0 32px;
}

.page-heading h1,.standalone h1 {
    font-size:clamp(2rem,4vw,3rem);
    font-weight:400;
    line-height:1.2;
}

.page-heading .eyebrow {
    margin-bottom:15px;
}

.account-email {
    overflow-wrap:anywhere;
}

.badge {
    display:inline-block;
    border-radius:5px;
    background:#ece6f2;
    color:#645073;
    padding:5px 10px;
    font-size:.72rem;
    white-space:nowrap;
}

.badge-success {
    color:#31654e;
    background:#e8f3ec;
}

.badge-error {
    color:#944745;
    background:#faeaea;
}

.summary-grid {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    background:#ede8f1;
    border:1px solid #ded6e6;
    border-radius:10px;
    padding:28px 32px;
    gap:24px;
}

.summary-grid>div {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.summary-grid>div+div {
    border-left:1px solid #d8cfdf;
    padding-left:30px;
}

.summary-label {
    font-size:.61rem;
    letter-spacing:.13em;
    color:var(--muted);
}

.summary-grid strong {
    font-size:.88rem;
    font-weight:400;
}

.summary-grid a {
    font-size:.73rem;
    color:var(--accent-deep);
}

.section-label {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:44px 0 18px;
    gap:16px;
}

.section-label h2 {
    font-size:1.25rem;
    font-weight:400;
    margin:0;
}

.section-label>span {
    font-size:.75rem;
    color:var(--muted);
}

.app-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}

.app-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:20px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    text-decoration:none;
    transition:border-color .15s,transform .15s;
}

.app-card:hover {
    border-color:var(--accent);
    transform:translateY(-3px);
}

.app-card--disabled,
.app-card--disabled:hover {
    background:var(--surface, #f3f1f5);
    border-color:var(--line);
    transform:none;
    cursor:default;
}

.app-card .card-number {
    font-size:.62rem;
    letter-spacing:.11em;
    color:var(--muted);
}

.app-card h3 {
    font-size:1rem;
    font-weight:400;
    margin:18px 0 10px;
    display:flex;
    justify-content:space-between;
    gap:12px;
}

.app-card h3 span {
    color:var(--accent);
}

.app-card p {
    font-size:.83rem;
    line-height:1.8;
    color:var(--muted);
    margin:0;
    min-height:0;
    flex:1;
}

.card-link {
    display:block;
    margin-top:18px;
    font-size:.75rem;
    color:var(--accent-deep);
}

.subtle-note {
    font-size:.73rem;
    color:var(--muted);
    margin-top:24px;
}

.back-link {
    font-size:.78rem;
    color:var(--accent-deep);
    display:inline-block;
    margin-bottom:20px;
}

.two-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:start;
}

.notice {
    padding:14px 18px;
    background:#eaf3ed;
    border:1px solid #c7ddce;
    border-radius:6px;
    font-size:.84rem;
    margin:20px 0;
}

.notice-error {
    background:#fbeeee;
    border-color:#e9c8c8;
    color:#833a3a;
}

.standalone {
    max-width:530px;
    margin:45px auto;
}

.standalone h1 {
    font-size:2rem;
}

.recovery {
    margin-bottom:26px;
    border-color:#a594b6;
}

.recovery p {
    font-size:.87rem;
}

.recovery-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.recovery-grid code,.secret-key {
    padding:12px;
    background:#f3eff7;
    border-radius:6px;
}

.secret-key {
    display:block;
    overflow-wrap:anywhere;
    font-size:1rem;
    letter-spacing:.08em;
}

.secondary {
    background:#eee8f3;
    color:var(--ink);
}

.secondary:hover {
    background:#ded3e9;
}

details {
    margin-top:25px;
    font-size:.84rem;
}

summary {
    cursor:pointer;
}

.table-panel {
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
}

table {
    width:100%;
    border-collapse:collapse;
    font-size:.78rem;
    text-align:left;
}

th {
    font-weight:400;
    font-size:.7rem;
    background:#eee9f2;
    color:#675c71;
    white-space:nowrap;
}

th,td {
    padding:18px;
    border-bottom:1px solid var(--line);
}

/* Align text baselines, including padded role badges and form controls. */
.users-table th,
.users-table td {
    white-space:nowrap;
    vertical-align:baseline;
}

.users-table .role-form {
    flex-wrap:nowrap;
    align-items:baseline;
}

td small {
    display:block;
    margin-top:5px;
    color:var(--muted);
}

td strong {
    font-weight:400;
}

tbody tr:last-child td {
    border-bottom:0;
}

.role-form {
    display:flex;
    gap:8px;
    align-items:center;
}

.role-form select {
    padding:8px;
    min-width:120px;
    font-size:.75rem;
}

.small {
    padding:8px 12px;
    font-size:.75rem;
}

.pagination {
    display:flex;
    gap:20px;
    font-size:.8rem;
    margin-top:20px;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.skip-link {
    position:absolute;
    top:-100px;
    left:20px;
    background:white;
    padding:12px;
    z-index:5;
}

.skip-link:focus {
    top:12px;
}

@media(max-width:850px) {
    .auth-grid {
        gap:40px;
        grid-template-columns:1fr 1fr;
        min-height:570px;
    }
    .auth-panel {
        padding:28px;
    }
    .header-note {
        display:none;
    }
    .summary-grid {
        padding:22px;
        gap:16px;
    }
    .summary-grid>div+div {
        padding-left:16px;
    }
    .two-columns {
        gap:18px;
    }
    .panel {
        padding:25px;
    }
}

@media(max-width:620px) {
    .header-inner {
        min-height:84px;
        gap:15px;
    }
    .portal-brand {
        font-size:.95rem;
        gap:10px;
    }
    .portal-brand img {
        width:31px;
        height:40px;
    }
    .header-inner nav {
        gap:12px;
    }
    .header-inner nav>a {
        display:none;
    }
    .portal-main {
        padding-top:28px;
        padding-bottom:36px;
    }
    .auth-grid {
        grid-template-columns:1fr;
        gap:28px;
        min-height:0;
        padding:0;
    }
    .auth-intro h1 {
        font-size:2.9rem;
    }
    .auth-intro .intro {
        margin:16px 0 0;
        font-size:.95rem;
        max-width:none;
    }
    .auth-intro .intro-divider,.auth-intro>.muted,.intro-index {
        display:none;
    }
    .auth-intro .eyebrow {
        margin-bottom:14px;
    }
    .auth-panel {
        padding:28px 23px;
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column;
        margin-top:0;
    }
    .page-heading h1 {
        font-size:2rem;
    }
    .summary-grid,.two-columns {
        grid-template-columns:1fr;
    }
    .summary-grid>div+div {
        padding-left:0;
        padding-top:16px;
        border-left:0;
        border-top:1px solid #d8cfdf;
    }
    .section-label {
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
        margin-top:30px;
    }
    .app-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .app-card p {
        min-height:0;
    }
    .portal-footer>.container {
        flex-direction:column;
        gap:4px;
    }
    .recovery-grid {
        grid-template-columns:1fr;
    }
    .standalone {
        margin:10px 0;
    }
    .table-panel {
        max-width:100%;
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        transition:none!important;
    }
}


/* Compact authentication view; the brand header is the only surrounding content. */
.portal-main--login {
    display:grid;
    place-items:center;
    padding-block:40px;
}
.portal-main--login .auth-panel {
    width:100%;
    max-width:400px;
    padding:32px;
}
.auth-panel h1 {
    font-size:1.65rem;
    font-weight:400;
    line-height:1.2;
    letter-spacing:-.04em;
    margin:0;
}
.portal-main--wide {
    width:min(calc(100% - 48px),1600px);
}
.mfa-qr {
    width:260px;
    max-width:100%;
    margin:20px auto;
    background:#fff;
}
.mfa-qr img {
    width:100%;
    height:auto;
    image-rendering:pixelated;
}
.mfa-manual { margin-block:20px; }
@media (min-width:851px) and (max-width:1150px) {
    .app-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:621px) and (max-width:850px) {
    .app-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:620px) {
    .portal-main--wide { width:calc(100% - 32px); }
    .portal-main--login .auth-panel { padding:26px; }
}
@media (max-width:420px) {
    .app-grid { grid-template-columns:1fr; }
}

/* A generic rejected-login signal; no account state is exposed. */
@media (prefers-reduced-motion: no-preference) {
    .auth-panel--rejected {
        animation:login-shake 360ms ease-in-out;
    }
}
@keyframes login-shake {
    0%, 100% { transform:translateX(0); }
    20%, 60% { transform:translateX(-7px); }
    40%, 80% { transform:translateX(7px); }
}