/* CloudWork.Portal — app-specific pieces built on the real CloudServus brand kit
   (cloudservus-tokens.css + cloudservus-components.css, loaded before this file).
   Nothing in here hard-codes a hex value — everything points at the kit's tokens,
   so a brand refresh only ever touches the two kit files. This file only adds
   what the kit doesn't already have a component for: the app shell wiring, the
   request list/detail views, and the reply/timeline.

   SPECIFICITY NOTE: the kit's own base stylesheet styles every <a> as a classic
   underlined link via ".cs-app a" (a class + a type selector, specificity 0-1-1).
   A plain single-class selector like ".portal-req-card" (0-1-0) can never beat
   that, no matter what order the stylesheets load in — CSS specificity, not
   source order, decides when both rules set the same property on the same
   element. The kit sidesteps this for its own nav links by writing
   ".cs-app .cs-sidebar a" (0-2-1); every anchor-based rule below follows that
   same ".cs-app <selector>" pattern so it reliably wins. */

/* Lives in the topbar (light surface), not the sidebar — text colors are the
   light-surface tokens, not the dark ones. */
.portal-user-chip { display: flex; align-items: center; gap: 10px; }
.portal-user-text { line-height: 1.2; text-align: right; }
.portal-user-name { display: block; font-size: 13px; font-weight: var(--cs-weight-bold); color: var(--cs-text); }
.portal-user-company { color: var(--cs-text-muted); font-size: 11px; }

.portal-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-4); flex-wrap: wrap; margin-bottom: var(--cs-space-6); }
.portal-page-subtitle { font-size: var(--cs-text-sm); color: var(--cs-text-muted); margin: 4px 0 0; }

/* ── Request list ──────────────────────────────────────────────────────── */
.portal-req-list { display: flex; flex-direction: column; gap: var(--cs-space-3); }
.portal-req-card {
    display: block; background: var(--cs-surface); border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg); padding: var(--cs-space-5) var(--cs-space-6);
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition), transform var(--cs-transition);
}
/* Card is a link, not text — override the kit's default <a> styling at matching
   specificity (see the SPECIFICITY NOTE above). */
.cs-app .portal-req-card,
.cs-app .portal-req-card:hover { text-decoration: none; color: inherit; }
.portal-req-card:hover { border-color: var(--cs-orange); box-shadow: var(--cs-shadow); transform: translateY(-1px); }
.portal-req-top { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-3); }
.portal-req-title { font-size: var(--cs-text-md); font-weight: var(--cs-weight-bold); margin: 0; }
.portal-req-meta { font-size: var(--cs-text-sm); color: var(--cs-text-muted); margin-top: 6px; }

/* ── Request detail ────────────────────────────────────────────────────── */
.portal-back {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--cs-weight-bold);
    margin-bottom: var(--cs-space-4);
}
.cs-app .portal-back { color: var(--cs-link); text-decoration: none; }
.cs-app .portal-back:hover { text-decoration: underline; }

.portal-facts { display: flex; gap: var(--cs-space-6); margin-top: var(--cs-space-4); flex-wrap: wrap; }
.portal-fact-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--cs-text-muted); margin-bottom: 2px; }
.portal-fact-value { font-size: var(--cs-text-sm); font-weight: var(--cs-weight-bold); color: var(--cs-text); }

.portal-timeline { display: flex; flex-direction: column; gap: var(--cs-space-4); margin: var(--cs-space-6) 0; }
.portal-note {
    max-width: 74%; padding: var(--cs-space-4); border-radius: var(--cs-radius-lg);
    border: 1px solid var(--cs-border); background: var(--cs-surface); box-shadow: var(--cs-shadow-sm);
}
.portal-note--client { align-self: flex-end; background: var(--cs-orange-tint); border-color: rgba(249,128,35,.3); }
.portal-note-head { display: flex; justify-content: space-between; gap: var(--cs-space-3); font-size: 12px; margin-bottom: 6px; }
.portal-note-author { font-weight: var(--cs-weight-bold); color: var(--cs-text); }
.portal-note-time { color: var(--cs-text-muted); }
.portal-note-body { font-size: 14px; line-height: var(--cs-leading-body); white-space: pre-wrap; }

.portal-reply-actions { display: flex; justify-content: flex-end; margin-top: var(--cs-space-3); }

/* ── New request form ──────────────────────────────────────────────────── */
.portal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-space-4); }
@media (max-width: 520px) {
    .portal-form-row { grid-template-columns: 1fr; }
}

/* ── cs-btn rendered as an <a> (New Request, Cancel) ─────────────────────
   Same specificity issue as the request card — the kit's own .cs-btn rules
   are plain single-class selectors, so they lose to ".cs-app a" too. */
.cs-app a.cs-btn { text-decoration: none; }
.cs-app a.cs-btn--primary   { color: var(--cs-orange-on-fill); }
.cs-app a.cs-btn--secondary { color: var(--cs-text); }
.cs-app a.cs-btn--subtle    { color: var(--cs-link); }

/* ── Suppress the focus ring Blazor's <FocusOnNavigate Selector="h1"> triggers
   on every page load ─────────────────────────────────────────────────────
   FocusOnNavigate programmatically focuses the page's <h1> after each
   navigation so screen readers announce it — a real accessibility feature,
   worth keeping. But because the focus is script-driven rather than a real
   keystroke, browsers still count it as :focus-visible, so the kit's focus
   ring (meant for keyboard users tabbing through buttons/links/inputs) flashes
   on every click-driven navigation too, which reads as a rendering bug rather
   than an a11y cue. Scoped to h1 only — every genuinely interactive element
   keeps its focus ring. */
.cs-app h1:focus-visible { outline: none; }

/* ── Blazor's built-in circuit-error banner ───────────────────────────────
   Standard Blazor template rule — hidden until Program.cs/JS actually shows
   it on a real circuit error. Never had this rule in this project at all
   (not even in the old placeholder theme), so the banner has been visible by
   default since the portal was first scaffolded. */
#blazor-error-ui {
    display: none;
    position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1000;
    background: var(--cs-canvas); border-top: 1px solid var(--cs-border);
    padding: var(--cs-space-3) var(--cs-space-6);
    font-size: var(--cs-text-sm); color: var(--cs-text);
    box-shadow: 0 -1px 4px rgba(0,33,60,.12);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--cs-space-4); top: var(--cs-space-3); color: var(--cs-text-muted); }