/*
 * portal.css — ActivityLog portal stylesheet
 *
 * Design tokens from Brand.md palette. CSS is intentionally self-contained so
 * portal pages can be served without any marketing-site dependencies.
 *
 * Adjustment from Momentus-CMS: Momentus embeds ~600 lines of CSS inline in
 * _PortalLayout.cshtml. ActivityLog moves it to this separate file so the
 * browser can cache it independently of the layout HTML and reviews are easier.
 */

/* ---- Design tokens ---------------------------------------------------- */
:root {
    --ink:          #181B22;   /* near-black text — Brand.md */
    --ivory:        #F6F4EE;   /* off-white background — Brand.md */
    --teal:         #0E7C7B;   /* primary — Brand.md */
    --teal-bright:  #15a09f;   /* hover state */
    --accent-amber: #F4A261;   /* accent — Brand.md */
    --caution:      #C73E1D;   /* error/danger — Brand.md */
    --deep:         #0d1017;   /* near-black for gradient bases */
    --muted:        #6B7388;   /* secondary text */
    --paper:        #fbfaf5;   /* card background */
    --paper-edge:   #ece8da;   /* card border */
}

/* Focus indicators — WCAG 2.2 SC 2.4.11 + Windows High Contrast Mode compliant */
:root {
    --pk-focus-color:  var(--pk-color-primary, #0E7C7B);
    --pk-focus-width:  2px;
    --pk-focus-offset: 2px;
}

:focus-visible {
    outline: var(--pk-focus-width) solid var(--pk-focus-color);
    outline-offset: var(--pk-focus-offset);
}

/* Text inputs — focus ring shows on mouse click too (helps mark active field) */
input:focus, textarea:focus, select:focus {
    outline: var(--pk-focus-width) solid var(--pk-focus-color);
    outline-offset: 0;
}

/* ---- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Inter", sans-serif;
    line-height: 1.55;
    color: var(--ink);
    background: var(--ivory);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
.container-header { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }

/* ---- Site header ------------------------------------------------------ */
header.site {
    background: var(--ink);
    color: var(--ivory);
    padding: 1.1rem 0;
}
header.site .bar {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
header.site .brand {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--ivory);
    display: inline-flex;
    align-items: baseline;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.2rem 0;
    text-decoration: none;
}
header.site .brand em { font-style: normal; color: var(--teal); }
header.site nav { flex: 1 1 auto; min-width: 0; }
header.site nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: nowrap;
}
header.site nav a {
    color: var(--ivory);
    opacity: 0.85;
    font-size: 0.94rem;
    white-space: nowrap;
    padding: 0.35rem 0;
}
header.site nav a:hover { opacity: 1; text-decoration: none; border-bottom: 2px solid var(--teal); }
header.site .signin-link {
    flex: 0 0 auto;
    color: var(--ivory);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(246, 244, 238, 0.35);
    border-radius: 6px;
    transition: border-color 0.12s ease, color 0.12s ease;
}
header.site .signin-link:hover {
    border-color: var(--teal);
    color: var(--teal);
    text-decoration: none;
    border-bottom: 1px solid var(--teal);
}

/* ---- User avatar + sign-out dropdown (header upper-right) ------------- */
header.site .user-menu { position: relative; padding: 0; list-style: none; }
header.site .user-menu-details { position: relative; }
header.site .user-menu-details > summary { list-style: none; cursor: pointer; }
header.site .user-menu-details > summary::-webkit-details-marker { display: none; }
header.site .user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--teal);
    color: var(--ink, #0e1a26);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    border: 1px solid rgba(246, 244, 238, 0.35);
    transition: border-color 0.12s ease, transform 0.12s ease;
    user-select: none;
}
header.site .user-avatar:hover, header.site details[open] .user-avatar {
    border-color: var(--ivory);
    transform: translateY(-1px);
}
header.site .user-avatar__initials { line-height: 1; }
header.site .user-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: var(--ivory, #f6f4ee);
    color: var(--ink, #0e1a26);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.5rem 0;
    z-index: 1000;
    font-size: 0.92rem;
}
header.site .user-menu-email {
    padding: 0.4rem 0.9rem 0.6rem;
    font-size: 0.78rem;
    color: rgba(14, 26, 38, 0.65);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    word-break: break-all;
}
header.site .user-menu-dropdown a {
    display: block;
    padding: 0.5rem 0.9rem;
    color: var(--ink, #0e1a26);
    opacity: 1;
    text-decoration: none;
    white-space: nowrap;
}
header.site .user-menu-dropdown a:hover {
    background: rgba(0, 0, 0, 0.05);
    border-bottom: 0;
    text-decoration: none;
}
header.site .user-menu-signout {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin-top: 0.25rem;
    color: #a23131 !important;
}

/* ---- Login button submit feedback ------------------------------------- */
.auth-card form button[type="submit"][data-submitting="true"] {
    opacity: 0.7;
    cursor: progress;
    pointer-events: none;
}

/* ---- TOTP setup (lives inside .auth-card) ----------------------------- */
.auth-card .totp-qr {
    display: flex;
    justify-content: center;
    margin: 0.4rem 0 0.8rem;
}
.auth-card .totp-qr al-qr-code,
.auth-card .totp-qr img,
.auth-card .totp-qr canvas,
.auth-card .totp-qr svg {
    width: 200px;
    height: 200px;
    max-width: 100%;
    display: block;
    background: #fff;
    padding: 0.5rem;
    border: 1px solid #e6e2d4;
    border-radius: 8px;
}
.auth-card .totp-manual {
    margin: 0.25rem 0 1rem;
    font-size: 0.85rem;
}
.auth-card .totp-manual > summary {
    cursor: pointer;
    color: var(--teal);
    font-weight: 600;
    list-style: none;
    padding: 0.35rem 0;
}
.auth-card .totp-manual > summary::-webkit-details-marker { display: none; }
.auth-card .totp-manual > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.12s ease;
}
.auth-card .totp-manual[open] > summary::before { content: "▾ "; }
.auth-card .totp-manual__rows {
    margin-top: 0.5rem;
    padding: 0.7rem 0.85rem;
    background: #fbfaf3;
    border: 1px solid #ece8d8;
    border-radius: 6px;
    display: grid;
    gap: 0.45rem;
}
.auth-card .totp-manual__rows > div {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    word-break: break-all;
}
.auth-card .totp-manual__label {
    flex: 0 0 4.5rem;
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-card .totp-manual__rows code {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.85rem;
}
.auth-card input[name="code"] {
    text-align: center;
    letter-spacing: 0.4em;
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 1.15rem;
}

/* ---- Portal hero (dashboard + admin styles) --------------------------- */
.portal-hero {
    background:
        radial-gradient(ellipse 90% 60% at 20% 0%, rgba(14, 124, 123, 0.2), transparent 65%),
        linear-gradient(180deg, var(--deep), var(--ink));
    color: var(--ivory);
    border-bottom: 4px solid var(--teal);
    padding: 2rem 0 2.2rem;
}
.portal-hero .inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
}
.portal-hero .text { flex: 1 1 auto; min-width: 0; }
.portal-hero .eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--teal);
    margin: 0 0 0.25rem;
}
.portal-hero h1 {
    margin: 0 0 0.3rem;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
}
.portal-hero .meta {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.82;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}
.portal-hero .meta .pill {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    background: rgba(246, 244, 238, 0.08);
    border: 1px solid rgba(246, 244, 238, 0.18);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

/* ---- Main area -------------------------------------------------------- */
main.portal-main { flex: 1 1 auto; display: flex; flex-direction: column; }

/* Auth style: dark ink-gradient hero backdrop; card centred over it. */
main.portal-main.style-auth {
    background:
        radial-gradient(ellipse 120% 70% at 50% 0%, rgba(14, 124, 123, 0.16), transparent 65%),
        linear-gradient(180deg, var(--deep) 0%, var(--ink) 100%);
    color: var(--ivory);
    padding: 3rem 1rem 4rem;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid var(--teal);
}
main.portal-main.style-auth::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(420px 240px at 18% 14%, rgba(14, 124, 123, 0.2), transparent 70%),
        radial-gradient(500px 300px at 88% 92%, rgba(244, 162, 97, 0.09), transparent 70%);
}

/* Dashboard + admin: ivory background, two-column shell. */
main.portal-main.style-dashboard,
main.portal-main.style-admin {
    background: var(--ivory);
    padding: 0;
    display: block;
}

/* ---- Two-column shell (dashboard + admin) ----------------------------- */
.portal-shell-2col {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.portal-sidebar {
    flex: 0 0 220px;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}
/* .portal-sidebar-toggle, .portal-sidebar-tile* — deleted 3c; now inside pk-sidebar[data-surface] */

/* ---- Sidebar active-link contrast override ---------------------------- */
/* PortalKit's portal-theme.css ships:
 *   pk-sidebar section nav a.active {
 *       background: rgba(33, 181, 179, 0.16);
 *       color: var(--pk-color-primary-hi, #2DD6D2);
 *   }
 * On the navy sidebar tile the composite resolves to teal-on-teal at
 * WCAG contrast 2.76 (AA needs 4.5). Override with ivory text + a
 * stronger teal-tint background — gives ~6.5:1 against the same navy
 * substrate without touching PortalKit. Higher specificity wins over
 * the kit's rule by being defined later in cascade order.
 */
pk-sidebar section nav a.active {
    background: rgba(33, 181, 179, 0.30);
    color: var(--pk-color-text, rgba(246, 244, 238, 0.95));
}

/* ---- Sidebar sections: no internal scroll/clip --------------------------- */
/* The kit gives each <section> tile overflow:hidden (for the rounded corner).
 * Inside the flex-column nav that turns each tile's flex min-height into 0, so
 * on a short/mobile viewport a tall tile (Reports has 6 links) gets shrunk and
 * clips its own list — SIEM/Knowledge Base fall off the bottom. Pinning
 * flex-shrink:0 keeps every tile at its natural height so the whole sidebar
 * scrolls as one unit instead of any single section scrolling internally. */
pk-sidebar section {
    flex-shrink: 0;
}

/* ---- Portal breadcrumb (inside the hero) ------------------------------ */
.portal-breadcrumb {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    opacity: 0.85;
}
.portal-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.portal-breadcrumb li {
    display: inline-flex;
    align-items: center;
}
.portal-breadcrumb li + li::before {
    content: "›";
    margin: 0 0.5rem 0 0;
    opacity: 0.5;
}
.portal-breadcrumb a {
    color: inherit;
    opacity: 0.85;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.portal-breadcrumb a:hover {
    opacity: 1;
    border-bottom-color: currentColor;
}
.portal-breadcrumb [aria-current="page"] {
    font-weight: 600;
    opacity: 1;
}
.portal-content { flex: 1 1 auto; min-width: 0; }

/* ---- Auth card -------------------------------------------------------- */
/* Sits on top of the ink hero in style-auth layouts. */
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    background: #fff;
    border: 1px solid var(--paper-edge);
    border-top: 4px solid var(--teal);
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(24, 27, 34, 0.25);
    overflow: hidden;
    color: var(--ink);
}
.auth-card.wide { max-width: 760px; }

.auth-card .eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--teal);
    margin: 0 0 0.6rem;
}
.auth-card h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    letter-spacing: -0.02em;
    font-weight: 800;
    line-height: 1.15;
}
.auth-card p.lede {
    margin: 0 0 1.2rem;
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.55;
}
.auth-card .body { padding: 2rem 2rem 1.75rem; }
.auth-card .body > :first-child { margin-top: 0; }

.auth-card label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 1rem 0 0.3rem;
    color: #3a4156;
    letter-spacing: 0.02em;
}
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=text] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid #d6d2c4;
    border-radius: 6px;
    font-size: 0.95rem;
    background: #fdfcf7;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.auth-card input:focus {
    border-color: var(--teal);
    background: #fff;
}
.auth-card input[readonly] { background: #f6f5ef; color: var(--muted); }

.auth-card button[type=submit],
.auth-card .btn-primary-action {
    margin-top: 1.4rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--teal);
    color: var(--ivory);
    border: 0;
    border-radius: 6px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.08s ease;
    letter-spacing: -0.005em;
}
.auth-card button[type=submit]:hover,
.auth-card .btn-primary-action:hover { background: var(--teal-bright); }
.auth-card button[type=submit]:active,
.auth-card .btn-primary-action:active { transform: translateY(1px); }

/* Callout blocks */
.auth-card .err {
    background: #fdecec;
    color: #8b1a1a;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    border-left: 3px solid var(--caution);
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.auth-card .ok {
    background: #eaf7f6;
    color: #0c5c58;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    border-left: 3px solid var(--teal);
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.auth-card .warn {
    background: #fff8ec;
    color: #7a4a0d;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    border-left: 3px solid var(--accent-amber);
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.auth-card .banner {
    background: linear-gradient(90deg, rgba(14, 124, 123, 0.08), rgba(14, 124, 123, 0.02));
    color: #0c5c58;
    padding: 0.85rem 1rem;
    border-radius: 6px;
    border-left: 3px solid var(--teal);
    margin: 0 0 1.2rem;
    font-size: 0.88rem;
    line-height: 1.5;
}
.auth-card .note { font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; }
.auth-card .foot {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--paper-edge);
    font-size: 0.88rem;
    color: var(--muted);
    text-align: center;
}
.auth-card .foot a { color: var(--teal); font-weight: 600; }
.auth-card .foot.split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 1rem;
    flex-wrap: wrap;
}
.auth-card .terms {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 1.1rem;
    font-size: 0.87rem;
    color: #3a4156;
    line-height: 1.5;
}
.auth-card .terms input[type=checkbox] {
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--teal);
}
.auth-card .terms label { margin: 0; font-weight: 400; font-size: 0.87rem; color: #3a4156; }

/* Mascot peeking over the teal top-border of the auth card. */
.auth-card .mascot {
    position: absolute;
    top: -24px;
    right: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ivory);
    border: 2px solid var(--teal);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 2;
}
.auth-card .mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Footer ----------------------------------------------------------- */
footer.site {
    background: var(--ink);
    color: var(--ivory);
    padding: 1.5rem 0;
    border-top: 4px solid var(--teal);
    flex: 0 0 auto;
    font-size: 0.88rem;
}
footer.site .footer-bottom {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    opacity: 0.78;
}
footer.site a { color: var(--ivory); text-decoration: none; }
footer.site a:hover { opacity: 1; text-decoration: underline; }

/* Portal-layout default: collapse footer until scrolled into view. */
footer.site.portal-collapsed { padding: 1.2rem 0; border-top-width: 2px; }

/* ---- Token reveal (OnboardDone) --------------------------------------- */
.token-reveal-block {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 1rem 0 0.25rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
}
.token-box {
    flex: 1 1 auto;
    min-width: 0;
    background: #0d1017;
    color: #7dfac6;
    font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
    font-size: 0.82rem;
    padding: 0.85rem 1rem;
    word-break: break-all;
    line-height: 1.55;
    border: 0;
    user-select: all;
}
.copy-button {
    flex: 0 0 auto;
    background: #1a2236;
    color: var(--teal);
    border: 0;
    border-left: 1px solid #333;
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}
.copy-button:hover { background: #0e1927; color: #7dfac6; }

/* ---- appsettings snippet ---------------------------------------------- */
.appsettings-snippet {
    background: #0d1017;
    border: 1px solid #2a3140;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    overflow-x: auto;
}
.appsettings-snippet pre {
    margin: 0;
    font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
    font-size: 0.8rem;
    color: #c5d4e8;
    line-height: 1.65;
    white-space: pre;
}
.appsettings-snippet code { font-family: inherit; }

/* ---- Profile card ----------------------------------------------------- */
.profile-card {
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: 10px;
    padding: 1.8rem;
    max-width: 680px;
}
.profile-card h2 {
    margin: 0 0 1.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}
.profile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.profile-table th {
    text-align: left;
    width: 140px;
    padding: 0.5rem 0.75rem 0.5rem 0;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    vertical-align: top;
}
.profile-table td {
    padding: 0.5rem 0.75rem 0.5rem 0;
    color: var(--ink);
    vertical-align: top;
    word-break: break-all;
}
.profile-table tr + tr th,
.profile-table tr + tr td {
    border-top: 1px solid var(--paper-edge);
}
.btn-danger {
    display: inline-block;
    padding: 0.55rem 1.2rem;
    background: transparent;
    color: var(--caution);
    border: 1px solid var(--caution);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.btn-danger:hover { background: var(--caution); color: #fff; text-decoration: none; }

/* ---- Slice 3: Dashboard grid ------------------------------------------ */
.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dashboard-period-row {
    margin-bottom: 0.25rem;
}
.dashboard-chart-panel {
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: 10px;
    padding: 1.25rem 1.25rem 0.75rem;
}
.panel-head-sm {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.panel-h2 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}
.panel-lede {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
}

/* ---- Histogram strip -------------------------------------------------- */
.histogram-strip {
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    min-height: 64px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.al-hist-loading, .al-hist-empty {
    font-size: 0.8rem;
    color: var(--muted);
    align-self: center;
}
.al-hist-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    height: 48px;
}
.al-hist-bar-wrap {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.al-hist-bar {
    width: 100%;
    background: var(--teal);
    opacity: 0.65;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    /* The bar is the flex item that absorbs overflow: on the tallest day
       (height:100%) bar+label exceeds the 48px track, so something must
       shrink. Letting the BAR shrink (and freezing the label below) keeps
       every bar's bottom edge on the same baseline. If the label shrinks
       instead, the busiest day's bar bottom drops a few px out of line. */
    flex: 0 1 auto;
    transition: opacity 0.12s ease;
}
.al-hist-bar-wrap:hover .al-hist-bar { opacity: 0.9; }
.al-hist-label {
    font-size: 0.6rem;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex: 0 0 auto;
}

/* ---- Summary tiles row ------------------------------------------------ */
.dashboard-summary-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}
.al-tile {
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-left: 3px solid var(--teal);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.al-tile-k {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.al-tile-v {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-top: 0.2rem;
    line-height: 1.15;
}
.al-tile-sub {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

/* ---- Period control --------------------------------------------------- */
.al-period-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}
.al-period-range {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0 0.4rem;
}
.al-period-sep {
    flex: 1 1 auto;
}
.al-period-btn {
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
    border: 1px solid var(--paper-edge);
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    transition: background 0.1s ease, border-color 0.1s ease;
    white-space: nowrap;
}
.al-period-btn:hover { background: #f4efe0; border-color: var(--teal); }
.al-period-btn:disabled { opacity: 0.4; cursor: default; }
.al-period-btn.active { background: var(--teal); color: var(--ivory); border-color: var(--teal); }
.al-period-nav { font-size: 0.75rem; padding: 0.3rem 0.5rem; }
.al-period-custom-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 0.35rem;
    border-top: 1px solid var(--paper-edge);
    margin-top: 0.15rem;
}
.al-period-custom-label {
    font-size: 0.8rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.al-period-custom-input {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--paper-edge);
    border-radius: 5px;
    font-size: 0.8rem;
    background: #fdfcf7;
    color: var(--ink);
}
.al-period-custom-input:focus {
    border-color: var(--teal);
}

/* ---- al-table --------------------------------------------------------- */
.al-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.al-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 480px;
}
.al-table th {
    text-align: left;
    padding: 0.55rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    background: #faf8f0;
    border-bottom: 2px solid var(--paper-edge);
    white-space: nowrap;
}
.al-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #f0ede4;
    color: var(--ink);
    vertical-align: middle;
    word-break: break-word;
}
.al-table-row { cursor: pointer; transition: background 0.1s ease; }
.al-table-row:hover td { background: #f8f5ec; }
.al-table-row:focus td { background: #f0f0ea; outline: 2px solid var(--pk-focus-color); }

.al-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem 0.25rem;
    font-size: 0.8rem;
    color: var(--muted);
    gap: 1rem;
}
.al-table-load-more {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--paper-edge);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    transition: background 0.1s ease, border-color 0.1s ease;
}
.al-table-load-more:hover { background: #f4efe0; border-color: var(--teal); }

/* ---- adm-table (admin-portal plain tables: invites, tenant-detail subtables) ----
   Inherits the al-table look so the admin portal stays visually consistent.
   Used where the page renders its own <table> with vanilla JS (no <al-table>). */
.adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 480px;
}
.adm-table th {
    text-align: left;
    padding: 0.55rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    background: #faf8f0;
    border-bottom: 2px solid var(--paper-edge);
    white-space: nowrap;
}
.adm-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #f0ede4;
    color: var(--ink);
    vertical-align: middle;
    word-break: break-word;
}
.adm-table tbody tr:hover td { background: #f8f5ec; }


.al-table-loading, .al-table-empty, .al-table-error {
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--muted);
    background: var(--paper);
    border: 1px dashed var(--paper-edge);
    border-radius: 8px;
}
.al-table-error { color: var(--caution); border-color: var(--caution); }

/* Chip badges in al-table cells */
.al-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ---- Filter chips (above al-table) ------------------------------------ */
.filter-chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
.filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.filter-chips-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    white-space: nowrap;
}
.filter-chip {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--paper-edge);
    background: #fff;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
    white-space: nowrap;
}
.filter-chip:hover { background: #f4efe0; border-color: var(--teal); }
.filter-chip.active { background: var(--teal); color: var(--ivory); border-color: var(--teal); }

.filter-chips-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 200px;
    min-width: 160px;
}
.al-search-input {
    flex: 1 1 auto;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--paper-edge);
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fdfcf7;
    color: var(--ink);
    min-width: 0;
}
.al-search-input:focus {
    border-color: var(--teal);
}
.al-search-btn {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--paper-edge);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.al-search-btn:hover { background: #f4efe0; border-color: var(--teal); }

/* ---- Systems view ----------------------------------------------------- */
.systems-section { display: flex; flex-direction: column; gap: 1rem; }
.systems-head {
    align-items: center;
}
.btn-mint-toggle {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: var(--teal);
    color: var(--ivory);
    border: 0;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease;
    white-space: nowrap;
}
.btn-mint-toggle:hover { background: var(--teal-bright); }

/* Mint form */
.mint-form {
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-top: 3px solid var(--teal);
    border-radius: 8px;
    padding: 1.25rem;
    max-width: 520px;
}
.mint-form.hidden { display: none; }
.mint-form-title {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}
.mint-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}
.mint-form-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #3a4156;
    letter-spacing: 0.02em;
}
.mint-form-input {
    padding: 0.6rem 0.8rem;
    border: 1px solid #d6d2c4;
    border-radius: 6px;
    font-size: 0.9rem;
    background: #fdfcf7;
    color: var(--ink);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.mint-form-input:focus {
    border-color: var(--teal);
}
.mint-form-hint { font-size: 0.75rem; color: var(--muted); }
.mint-form-actions { display: flex; gap: 0.75rem; align-items: center; }
.btn-mint-submit {
    padding: 0.6rem 1.1rem;
    background: var(--teal);
    color: var(--ivory);
    border: 0;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease;
}
.btn-mint-submit:hover { background: var(--teal-bright); }
.btn-mint-cancel {
    padding: 0.6rem 1.1rem;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--paper-edge);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.btn-mint-cancel:hover { background: var(--paper); color: var(--ink); }

/* Mint result banner */
.mint-result-banner {
    background: #eaf7f6;
    border: 1px solid rgba(14, 124, 123, 0.3);
    border-left: 3px solid var(--teal);
    border-radius: 8px;
    padding: 1rem;
    max-width: 680px;
}
.mint-result-label {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0c5c58;
}
.mint-result-note {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    color: #0c5c58;
}
.mint-error {
    background: #fdecec;
    color: #8b1a1a;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    border-left: 3px solid var(--caution);
    font-size: 0.88rem;
}
.systems-list { }

/* Messages section */
.messages-section { display: flex; flex-direction: column; gap: 0.75rem; }

/* ---- Slice 4: Admin portal styles ------------------------------------- */

/*
 * Admin layout accent — amber from Brand.md palette distinguishes operator
 * sessions from customer sessions at a glance.
 */
.portal-style-admin .portal-hero {
    border-bottom-color: var(--accent-amber);
}
.portal-style-admin .portal-hero .eyebrow {
    color: var(--accent-amber);
}
/* Admin tile variant — amber left-border instead of teal */
.al-tile.al-tile-admin {
    border-left-color: var(--accent-amber);
}

/* ---- Admin kv-grid ---------------------------------------------------- */
/*
 * Two-column definition list for admin detail views.
 * 160px fixed key column; values are monospace for IDs / SHAs.
 */
.adm-kv-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0;
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.9rem;
    margin: 1rem 0;
}
.adm-kv-grid dt {
    padding: 0.6rem 0.85rem;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    background: #faf8f0;
    border-bottom: 1px solid var(--paper-edge);
    display: flex;
    align-items: center;
}
.adm-kv-grid dd {
    margin: 0;
    padding: 0.6rem 0.85rem;
    color: var(--ink);
    border-bottom: 1px solid var(--paper-edge);
    font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
    font-size: 0.85rem;
    word-break: break-all;
    display: flex;
    align-items: center;
}
.adm-kv-grid dt:last-of-type,
.adm-kv-grid dd:last-of-type {
    border-bottom: 0;
}

/* ---- Admin actions bar ------------------------------------------------ */
/*
 * Flex row with an optional label on the left and a button group on the right.
 */
.adm-actions-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}
.adm-action-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.adm-action-link {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--paper-edge);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.1s ease, border-color 0.1s ease;
    white-space: nowrap;
}
.adm-action-link:hover {
    background: #f4efe0;
    border-color: var(--accent-amber);
    text-decoration: none;
}
.adm-signed-in {
    font-size: 0.82rem;
    color: var(--muted);
}
.adm-back-link {
    font-size: 0.85rem;
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
}
.adm-back-link:hover { text-decoration: underline; }

/* ---- Admin section layout --------------------------------------------- */
.adm-section { display: flex; flex-direction: column; gap: 0.75rem; }
.adm-section-h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}
.adm-subsection-h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.adm-detail-panel { display: flex; flex-direction: column; }
.adm-detail-id {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0 0 0.75rem;
}
.adm-detail-id code {
    font-family: var(--font-mono, 'Consolas', monospace);
    font-size: 0.85rem;
    color: var(--ink);
}

/* ---- Admin dashboard grid --------------------------------------------- */
.adm-dashboard-grid { display: flex; flex-direction: column; gap: 1rem; }

/* ---- Empty state (phase 1 stubs) -------------------------------------- */
.empty-state {
    background: var(--paper);
    border: 1px dashed var(--paper-edge);
    border-radius: 8px;
    padding: 1.8rem 1.25rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.6;
}
.empty-state p { margin: 0 0 0.5rem; }
.empty-state p:last-child { margin-bottom: 0; }
.empty-state code {
    font-family: ui-monospace, monospace;
    font-size: 0.82em;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}
.adm-phase1-notice { border-style: dashed; border-color: rgba(244, 162, 97, 0.4); }

/* Value placeholder in stub kv-grids */
.adm-stub { opacity: 0.4; }
.adm-stub-grid dd { color: var(--muted); }

/* ---- Responsive (admin) ----------------------------------------------- */
@media (max-width: 720px) {
    .adm-kv-grid { grid-template-columns: 110px 1fr; }
    .adm-actions-bar { flex-direction: column; align-items: flex-start; }
    .adm-action-group { margin-left: 0; }
}

/* ---- Hamburger toggle (3e) -------------------------------------------- */
.portal-sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--pk-color-border, #ECE8DA);
    border-radius: var(--pk-radius-sm, 6px);
    width: 2.5rem; height: 2.5rem;
    align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--pk-color-text, #181B22);
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 720px) {
    header.site .bar { flex-wrap: wrap; gap: 0.5rem; }
    main.portal-main.style-auth { padding: 2rem 0.75rem 2.5rem; }
    .auth-card { border-radius: 10px; }
    .auth-card .body { padding: 1.5rem 1.25rem 1.3rem; }
    .auth-card .mascot { width: 44px; height: 44px; top: -18px; right: 14px; }
    .portal-hero { padding: 1.4rem 0 1.5rem; }
    .portal-hero .inner { padding: 0 1rem; }

    .portal-shell-2col { flex-direction: column; padding: 1rem; gap: 0.75rem; }
    .portal-sidebar { flex: 0 0 auto; width: 100%; position: static; }

    /* New hamburger toggle (3e) — see .portal-sidebar-toggle rule block below */
    .portal-sidebar-toggle { display: inline-flex; }
}