/* Matrix Vision brand tokens — translated from design/Styles/MatrixTheme.axaml (docs/VISION-DESIGN.md §6). */
:root {
    --brand-pink: #FA5CDC;
    --brand-purple: #9342DC;
    --brand-indigo: #4A20CA;
    --brand-ink: #1E1A34;
    --brand-primary: #7A2FD8;
    --brand-primary-hover: #6A28C6;
    --brand-primary-active: #591FB0;

    --surface-page: #F7F6FB;
    --surface-card: #FFFFFF;
    --surface-sunken: #EFEDF5;
    --violet-50: #F5F0FE;
    --violet-200: #D9C6F6;

    --text-strong: #1E1A34;
    --text-body: #3B3452;
    --text-muted: #7C7691;
    --text-faint: #A9A2BE;

    --border-subtle: #E2DEEC;
    --border-default: #CEC9DD;
    --border-strong: #A9A2BE;

    /* Semantic backgrounds — authoritative values from MatrixTheme.axaml (DangerBg / SuccessBg). */
    --danger: #E23B5D;
    --danger-bg: #FBE4E9;
    --success: #1F9D6B;
    --success-bg: #E4F5EE;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --brand-gradient: linear-gradient(45deg, var(--brand-pink) 0%, var(--brand-purple) 48%, var(--brand-indigo) 100%);
    /* Ink gradient for dark surfaces (sidebar) — from MatrixTheme.axaml BrandGradientInk, diagonal top-left→bottom-right. */
    --brand-gradient-ink: linear-gradient(135deg, #2A2350 0%, var(--brand-ink) 60%, #17122B 100%);

    /* Brand font (design §6, OQ#7). Manrope — a geometric humanist sans (SIL Open Font Licence, self-hosted
       below) chosen as a Gilroy-alike while Gilroy's licence is unconfirmed. Gilroy is kept at the head of
       the stack so that dropping licensed Gilroy woff2 into /fonts/ + adding its @font-face picks it up with
       no other change. Keep in sync with the literal stack in site.css (loaded standalone on the Error page). */
    --font-brand: 'Gilroy', 'Manrope', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    /* Type scale (1.20 minor-third-ish, tuned for a data UI). Headings use the tighter tracking a
       geometric sans wants; body stays comfortable for long answers. */
    --fs-display: 1.75rem;   /* page hero (login/getting-started) */
    --fs-h1: 1.4rem;         /* page titles (.vz-h2 / <h1>) */
    --fs-h2: 1.1rem;         /* section titles */
    --fs-body: .95rem;
    --fs-small: .82rem;
    --lh-tight: 1.2;
    --lh-body: 1.55;
}

/* Manrope — SIL Open Font Licence 1.1. Files: wwwroot/fonts/manrope/ (latin subset, see OFL.txt). */
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/manrope-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/manrope-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/manrope-600.woff2') format('woff2'); font-weight: 600; font-display: swap; font-style: normal; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/manrope-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/manrope-800.woff2') format('woff2'); font-weight: 800; font-display: swap; font-style: normal; }

body {
    background: var(--surface-page);
    color: var(--text-body);
    font-family: var(--font-brand);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Heading hierarchy — geometric sans reads best slightly heavier and tighter than browser defaults. */
h1, h2, h3, h4, .vz-h2 { font-family: var(--font-brand); color: var(--text-strong); line-height: var(--lh-tight); }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.01em; }

/* App shell */
.vz-shell { display: flex; min-height: 100vh; }
.vz-main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vz-main { flex: 1; background: var(--surface-page); min-width: 0; display: flex; flex-direction: column; }
.vz-topbar { display: none; }                 /* desktop: no top bar */
.vz-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }   /* hidden checkbox (CSS drawer) */
.vz-nav-scrim { display: none; }
.vision-sidebar {
    background: var(--brand-gradient-ink);
    color: #EDE9F7;
    min-height: 100vh;
    width: 240px;
    flex: none;
}

/* Narrow screens: sidebar becomes an off-canvas drawer behind a top-bar hamburger. */
@media (max-width: 900px) {
    .vz-topbar { display: flex; align-items: center; gap: .75rem; background: var(--brand-ink); color: #fff;
        padding: .55rem 1rem; position: sticky; top: 0; z-index: 40; }
    .vz-hamburger { font-size: 1.35rem; line-height: 1; cursor: pointer; padding: .1rem .3rem; }
    .vz-topbar-brand { font-weight: 800; letter-spacing: -.01em; }
    .vision-sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 60;
        transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .vz-nav-toggle:checked ~ .vz-shell .vision-sidebar { transform: translateX(0); }
    .vz-nav-toggle:checked ~ .vz-shell .vz-nav-scrim { display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.45); z-index: 50; }
}
.vision-brand {
    font-weight: 700;
    font-size: 1.25rem;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vision-nav a {
    display: block;
    padding: .5rem .9rem;
    border-radius: var(--radius-sm);
    color: #C9C2E0;
    text-decoration: none;
}
.vision-nav a.active, .vision-nav a:hover {
    background: rgba(122, 47, 216, .35);
    color: #fff;
}

/* Chat answer blocks — differentiated by type, not one uniform white card (design review). */
.tj-answer { max-width: 820px; }
.tj-answer > * { margin-bottom: 1rem; }
.tj-answer > *:last-child { margin-bottom: 0; }

/* Narrative flows as prose — no card. */
.tj-prose { color: var(--text-body); line-height: var(--lh-body); }
.tj-prose > :first-child { margin-top: 0; }
.tj-prose > :last-child { margin-bottom: 0; }
.tj-prose p { margin: 0 0 .6rem; }
.tj-prose ul, .tj-prose ol { margin: .3rem 0 .6rem; padding-left: 1.3rem; }
.tj-prose li { margin: .15rem 0; }
.tj-prose strong { color: var(--text-strong); font-weight: 700; }
.tj-prose h1, .tj-prose h2, .tj-prose h3 { margin: .6rem 0 .35rem; }
.tj-prose code { background: var(--surface-sunken); padding: .05rem .3rem; border-radius: var(--radius-sm); font-size: .85em; }

/* Data objects — tables, charts, diagrams — get the framed card. */
.tj-object { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
.tj-object > h4 { color: var(--text-strong); margin: 0 0 .75rem; font-size: .95rem; font-weight: 700; }
.tj-object-scroll { overflow-x: auto; }
.tj-empty { color: var(--text-muted); font-size: .85rem; padding: .6rem 0; }
.tj-dl { background: none; border: none; color: var(--brand-primary); cursor: pointer; font-size: .75rem; padding: .35rem 0 0; }

/* General-purpose card + text used across admin screens (Dashboard, Usage, Review, Chats, Getting Started). */
.tj-block { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.tj-block h4 { color: var(--text-strong); margin: 0 0 .75rem; font-size: 1rem; }
.tj-md { color: var(--text-body); line-height: var(--lh-body); }

/* KPI text styles — shared by chat tiles and the Usage/Dashboard cards. */
.tj-kpi .label { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.tj-kpi .value { color: var(--text-strong); font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; }
.tj-kpi .delta { color: var(--success); font-weight: 600; margin-left: .5rem; font-size: .9rem; }
/* Chat KPI tile box — flows compactly in a row (Usage supplies its own .tj-block box). */
.tj-tile { display: inline-block; vertical-align: top; min-width: 148px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: .7rem 1rem; margin-right: .6rem; }

.tj-table { width: 100%; border-collapse: collapse; }
.tj-table th, .tj-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border-subtle); }
.tj-table th { color: var(--text-muted); font-weight: 600; font-size: .85rem; }
.tj-table tbody tr:hover, .tj-table tbody tr:hover { background: var(--surface-page); }
.tj-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tj-audit { color: var(--text-muted); font-size: .85rem; }
.tj-audit summary { cursor: pointer; }
.tj-audit pre { background: var(--surface-sunken); padding: .6rem .8rem; border-radius: var(--radius-sm); overflow-x: auto; }
.tj-exploratory { display: inline-block; background: var(--violet-50); color: var(--brand-primary); border: 1px solid var(--border-default); border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; font-weight: 600; }

/* Conversation layout — user turns right (tinted bubble), Tjoppie left with a small mark. */
.tj-turn-user { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.tj-turn-user .bubble { background: var(--violet-50); border: 1px solid var(--border-subtle); color: var(--text-strong);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); padding: .55rem .95rem; max-width: 75%; }
.tj-turn-agent { margin-bottom: 1.25rem; }
.tj-agent-label { display: flex; align-items: center; gap: .45rem; color: var(--text-muted); font-size: .75rem; font-weight: 600; margin-bottom: .45rem; }
.tj-agent-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-gradient); flex: none; }

/* Empty state — a real invitation to act, not a stranded "Try:" line. */
.tj-empty-state { max-width: 620px; }
.tj-empty-state .greet { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.tj-empty-state .greet .tj-agent-dot { width: 28px; height: 28px; }
.tj-empty-state h3 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.tj-empty-state p { color: var(--text-muted); margin: 0 0 1rem; }
.tj-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tj-chip { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 999px; padding: .45rem .9rem;
    font-size: .85rem; color: var(--text-body); cursor: pointer; text-align: left; }
.tj-chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--violet-50); }

/* Chat is full-height inside the shell's flex main. On phones the conversation-list column is hidden
   (past chats stay reachable via History in the nav drawer) so the answer area gets full width. */
@media (max-width: 900px) {
    /* !important beats the element's inline display:flex — external rules otherwise lose to inline styles. */
    .chat-convo-list { display: none !important; }
    .tj-turn-user .bubble { max-width: 88%; }
    .vz-page { padding: 1.25rem 1rem; }
}

/* Getting Started — responsive card grid; parallel actions (no misleading 1/2/3 sequence). */
.gs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.gs-card { display: flex; flex-direction: column; }
.gs-card .cap { display: flex; align-items: center; gap: .5rem; color: var(--text-strong); font-weight: 700; margin-bottom: .4rem; }
.gs-card .cap .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-gradient); flex: none; }
.gs-card p { color: var(--text-muted); font-size: .85rem; margin: 0 0 .9rem; flex: 1; }

/* --- Admin screens (Users, Roles & permissions) --- */
.vz-page { padding: 1.5rem 2rem; max-width: 1040px; }
.vz-h2 { color: var(--text-strong); margin: 0 0 .25rem; font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.02em; }
.vz-sub { color: var(--text-muted); margin: 0 0 1.25rem; }
.vz-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.vz-card-title { color: var(--text-strong); font-weight: 700; font-size: 1rem; margin: 0 0 .1rem; }
.vz-card-hint { color: var(--text-muted); font-size: .82rem; margin: 0 0 .9rem; }

/* Buttons */
.vz-btn { border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); border-radius: var(--radius-md); padding: .4rem 1rem; font-size: .85rem; cursor: pointer; }
.vz-btn:hover { background: var(--surface-sunken); }
.vz-btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.vz-btn-primary:hover { background: var(--brand-primary-hover); }
.vz-btn-danger { border-color: var(--danger); color: var(--danger); }
.vz-btn-danger:hover { background: var(--danger-bg); }

/* Status / effect badges */
.vz-badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.vz-badge.allow { background: var(--success-bg); color: var(--success); }
.vz-badge.block { background: var(--danger-bg); color: var(--danger); }
.vz-badge.neutral { background: var(--surface-sunken); color: var(--text-muted); }

/* Tri-state segmented control (Inherit / Grant / Deny) */
.vz-seg { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.vz-seg button { border: none; background: var(--surface-card); color: var(--text-body); padding: .3rem .7rem; font-size: .78rem; cursor: pointer; line-height: 1.2; }
.vz-seg button + button { border-left: 1px solid var(--border-subtle); }
.vz-seg button.active { background: var(--brand-primary); color: #fff; font-weight: 600; }
.vz-seg button.active.grant { background: var(--success); }
.vz-seg button.active.deny { background: var(--danger); }
.vz-seg button:disabled { opacity: .5; cursor: not-allowed; }

/* Permission list rows */
.vz-group-title { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin: 1.1rem 0 .35rem; }
.vz-perm-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--border-subtle); }
.vz-perm-row:last-child { border-bottom: none; }
.vz-perm-meta { flex: 1; min-width: 0; }
.vz-perm-name { color: var(--text-strong); font-weight: 600; font-size: .9rem; }
.vz-perm-name .kind { color: var(--text-muted); font-weight: 500; font-size: .72rem; margin-left: .4rem; }
.vz-perm-desc { color: var(--text-muted); font-size: .78rem; }
.vz-perm-controls { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.vz-source { color: var(--text-muted); font-size: .72rem; min-width: 82px; text-align: right; }
.vz-notice { background: var(--violet-50); border: 1px solid var(--border-default); color: var(--brand-primary); border-radius: var(--radius-md); padding: .6rem .85rem; font-size: .82rem; margin-bottom: .9rem; }
.vz-toast { border-radius: var(--radius-md); padding: .5rem .85rem; font-size: .85rem; margin-bottom: .75rem; }
.vz-toast.ok { background: var(--success-bg); color: var(--success); }
.vz-toast.err { background: var(--danger-bg); color: var(--danger); }

/* --- Auth split-screen (login / reset) — brand panel beside the form (design review #6). --- */
.auth-split { display: flex; min-height: 100vh; }
.auth-brand { flex: 1 1 45%; background: var(--brand-gradient); color: #fff; padding: 3rem 3.25rem;
    display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand .glyph { position: absolute; right: -70px; bottom: -90px; width: 420px; height: 420px;
    background: url('../images/matrix-logomark.png') no-repeat center / contain;
    opacity: .12; z-index: 0; pointer-events: none; user-select: none; }
.auth-brand .auth-mark { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; }
.auth-brand .auth-logo { height: 30px; width: auto; display: block; }
.auth-brand .pitch { max-width: 430px; }
.auth-brand .pitch h1 { color: #fff; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .8rem; }
.auth-brand .pitch p { color: rgba(255, 255, 255, .88); font-size: 1.02rem; line-height: 1.5; margin: 0; }
.auth-brand .foot { color: rgba(255, 255, 255, .72); font-size: .8rem; letter-spacing: .01em; }

.auth-form-wrap { flex: 1 1 55%; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--surface-page); }
.auth-form { width: 100%; max-width: 360px; }
.auth-form h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .25rem; }
.auth-form .sub { color: var(--text-muted); margin: 0 0 1.5rem; }
.auth-label { display: block; color: var(--text-body); font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.auth-form .form-control { margin-bottom: 1rem; }
.auth-submit { width: 100%; background: var(--brand-gradient); color: #fff; border: none; padding: .65rem; border-radius: var(--radius-md); font-weight: 700; cursor: pointer; }
.auth-submit:hover { filter: brightness(1.05); }

@media (max-width: 820px) {
    .auth-split { flex-direction: column; }
    .auth-brand { flex: none; padding: 1.75rem 1.5rem; }
    .auth-brand .pitch, .auth-brand .foot { display: none; }   /* compact brand bar on phones */
    .auth-brand .glyph { font-size: 180px; right: -40px; bottom: -60px; }
    .auth-form-wrap { flex: 1; padding: 2rem 1.5rem; }
}