/* =====================================================================
   PractiseReady — Cockpit visual style
   Drop-in replacement for wwwroot/app.css
   Fonts (Public Sans + Source Serif 4) are wired via <link> in
   Components/App.razor — no @font-face / self-hosting needed for now.
   All colours below meet WCAG 2.2 AA contrast for their use.
   ===================================================================== */

.btn-primary {
    color: #fff;
    background-color: var(--pr-accent);
    border-color: var(--pr-accent-strong);
}
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--pr-accent-strong);
    border-color: var(--pr-accent-strong);
}

/* Subtle card elevation — white surfaces lift off the body */
.card {
    background-color: #FFFFFF;
    border-color: var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: 0 1px 2px rgba(15, 42, 43, 0.04);
}

/* Bootstrap's default outline-button text on white sits below WCAG AA (4.5:1) at
   normal weights — primary ~3:1, secondary ~4:1, danger ~3.9:1, warning worse. Restyle
   the text (and primary's brand-teal border/hover) so every outline button meets AA. */
.btn-outline-primary { color: var(--pr-accent-text); border-color: var(--pr-accent); }
.btn-outline-primary:hover, .btn-outline-primary:active {
    color: #fff; background-color: var(--pr-accent); border-color: var(--pr-accent-strong);
}
.btn-outline-secondary { color: #495057; }
.btn-outline-danger { color: var(--rag-red); }
.btn-outline-warning { color: #8a6d00; }

/* Bootstrap's .text-danger (#dc3545 ~3.9:1 on white) is below AA for body text;
   use the AA-safe brand red (~6.5:1) that the status badges already use. */
.text-danger { color: var(--rag-red) !important; }

/* Bootstrap's inline <code> pink (#d63384 ~4.0:1 on white) is below AA — darken it. */
code { color: #a3286a; }

/* PractiseReady SVG icon language. The icon name carries meaning; these classes
   keep sizing and alignment predictable across buttons, links, cards and headers. */
.pr-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    max-width: 100%;
    flex: 0 0 auto;
    vertical-align: middle;
    overflow: visible;
}

/* PrIcon emits trusted inline SVG markup from a render fragment. Render
   fragments do not receive Blazor's CSS-isolation scope attribute, so the
   navigation sizing must remain global rather than living only in NavMenu's
   isolated stylesheet. */
.nav-group-header > svg.pr-icon.nav-section-icon,
.nav-subgroup-header > svg.pr-icon.nav-section-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
}

.nav-item .nav-link-icon.pr-icon {
    width: 1.35rem;
    height: 1.35rem;
}

.pr-button-icon,
.pr-link-icon {
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.35rem;
}

.pr-link-icon {
    vertical-align: -0.25rem;
}

.pr-card-icon {
    width: 1.45rem;
    height: 1.45rem;
}

.pr-header-icon {
    width: 2.15rem;
    height: 2.15rem;
}

.dashboard-title__icon {
    width: 2.15rem;
    height: 2.15rem;
}

.dashboard-title--hero .dashboard-title__icon {
    width: 2.4rem;
    height: 2.4rem;
}

.pr-hero .dashboard-title__icon {
    --pr-icon-primary: var(--pr-banner-text, #fff);
    --pr-icon-secondary: var(--pr-banner-text, #fff);
    --pr-icon-muted: var(--pr-banner-text, #fff);
}

.dashboard-track-card__icon {
    width: 1.45rem;
    height: 1.45rem;
}

.timeline-cta__arrow .pr-icon {
    width: 1.35rem;
    height: 1.35rem;
    --pr-icon-primary: currentColor;
    --pr-icon-secondary: currentColor;
    --pr-icon-muted: currentColor;
}

.btn .pr-icon {
    vertical-align: -0.22rem;
}

.pr-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pr-page-header__eyebrow,
.pr-kicker {
    color: var(--pr-muted);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pr-page-header__title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    color: var(--pr-text);
    font-weight: 850;
    line-height: 1.08;
}

.pr-page-header__icon {
    width: 2.4rem;
    height: 2.4rem;
}

.pr-page-header__lede {
    max-width: 62rem;
    margin-top: 0.5rem;
    color: var(--pr-muted);
}

.pr-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Timeline keeps its status/card semantics locally, while its page identity
   and actionable links still follow the active organisation theme. */
.timeline-page .pr-page-header__title {
    color: var(--pr-accent-strong, var(--pr-text));
}

.timeline-page .pr-page-header__icon {
    --pr-icon-primary: var(--pr-accent);
    --pr-icon-secondary: var(--pr-accent);
    --pr-icon-muted: var(--pr-accent);
}

.timeline-page .timeline-card__action,
.timeline-page .pr-action-link {
    border-color: var(--pr-accent);
    color: var(--pr-accent-strong, var(--pr-accent));
}

.timeline-page a.timeline-card__title {
    color: var(--pr-accent-strong, var(--pr-text));
}

@media (max-width: 640.98px) {
    .pr-page-header,
    .pr-page-header__actions {
        display: grid;
        justify-content: stretch;
    }
}

/* Skip-to-content link (WCAG 2.4.1) */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background: var(--pr-accent);
    color: #fff;
    border-radius: 0 0 0.25rem 0;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

.content { padding-top: 1.1rem; }
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* ---------------------------------------------------------------------
   2. RAG status badges & summary tiles (existing classes, new tokens)
   --------------------------------------------------------------------- */
.summary-tiles { display: flex; gap: 1rem; }
.summary-tiles .tile {
    flex: 1;
    padding: 1rem;
    border-radius: 0.5rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
}
.tile-green { background-color: var(--rag-green); }
.tile-amber { background-color: var(--rag-amber); }
.tile-red   { background-color: var(--rag-red); }

.competency-col { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

/* ---- Record Assessment typeahead ---- */
.assessment-form { max-width: 720px; }
.typeahead-results {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.15);
}
.typeahead-results .list-group-item { cursor: pointer; }

.item-group-start > td { border-top: 2px solid #adb5bd; }

/* ---- Reflection composer ---- */
.reflection-composer {
    width: 100%;
    transition: max-width 160ms ease;
}
.reflection-composer:focus-within {
    max-width: 48rem !important;
}
.reflection-composer__input {
    min-height: 4rem;
    resize: vertical;
    transition: min-height 160ms ease;
}
.reflection-composer__input:focus {
    min-height: 8rem;
}

/* =====================================================================
   3. Cockpit primitives — reusable, flat CSS, no JS
   ===================================================================== */

/* ---- Hero banner: neutral graphite panel with a soft glow ---- */
.pr-hero {
    background: var(--pr-banner-bg, var(--pr-secondary, var(--pr-ink)));
    color: var(--pr-banner-text, var(--pr-secondary-text, #fff));
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    border: 1px solid color-mix(in srgb, var(--pr-banner-text, #fff) 14%, transparent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--pr-banner-bg, #263238) 22%, transparent);
}
.pr-hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pr-banner-muted, var(--pr-secondary-text, #98A4A8));
}
.pr-hero__title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: -0.01em;
    color: var(--pr-banner-text, var(--pr-secondary-text, #fff));
    margin: 0;
}
.pr-hero .pr-hero__title,
.pr-hero .pr-hero__title.dashboard-title {
    color: var(--pr-banner-text, #fff);
}
.pr-hero__sub { color: var(--pr-banner-muted, var(--pr-secondary-text, #C2CACE)); }
.pr-hero__sub strong { color: var(--pr-banner-text, var(--pr-secondary-text, #fff)); }

/* ---- Readiness ring (donut). Set the live value with style="--pct:87%" ---- */
.pr-ring {
    flex: none;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: conic-gradient(var(--pr-banner-accent, var(--pr-ring)) 0 var(--pct, 0%), color-mix(in srgb, var(--pr-banner-text, #fff) 16%, transparent) var(--pct, 0%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pr-ring__inner {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--pr-banner-bg, var(--pr-secondary, var(--pr-ink)));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pr-ring__pct { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--pr-banner-text, var(--pr-secondary-text, #fff)); }
.pr-ring__pct span { font-size: 1.05rem; color: var(--pr-banner-muted, var(--pr-secondary-text, #A6B3B0)); }
.pr-ring__cap {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pr-banner-muted, var(--pr-secondary-text, #98A4A8));
    margin-top: 3px;
}

/* ---- Status pills (sit on the dark hero) ---- */
.pr-pill { font-size: 0.78rem; font-weight: 600; border-radius: 99px; padding: 6px 13px; }
.pr-pill-neutral { background: color-mix(in srgb, var(--pr-banner-text, #fff) 14%, transparent); color: var(--pr-banner-text, #fff); }
.pr-pill-amber   { background: color-mix(in srgb, #F59E0B 24%, transparent); color: color-mix(in srgb, var(--pr-banner-text, #fff) 84%, #F59E0B); }
.pr-pill-red     { background: color-mix(in srgb, #F87171 24%, transparent); color: color-mix(in srgb, var(--pr-banner-text, #fff) 84%, #F87171); }
.pr-pill-grey    { background: color-mix(in srgb, var(--pr-banner-text, #fff) 10%, transparent); color: var(--pr-banner-muted, var(--pr-secondary-text, #C7D6D4)); }

/* ---- Segmented meter (replaces .progress / .progress-bar stacks) ---- */
.pr-meter {
    display: flex;
    height: 8px;
    border-radius: 99px;
    overflow: hidden;
    background: #EAEFF2;
}
.pr-meter > div { height: 100%; }
.seg-good { background: var(--rag-green); }
.seg-warn { background: var(--rag-amber); }
.seg-bad  { background: var(--rag-red); }
.seg-none { background: #64748B; color: #fff; }

/* Bootstrap progress-bar segments carry white text. Its default contextual fills
   (bg-warning #ffc107 ~1.6:1, bg-success/danger ~4:1) fail AA under white — repoint
   to the darker RAG tokens (>= 5:1 with white). Scoped to .progress-bar so the
   dark-text "bg-warning text-dark" badges elsewhere are untouched. */
.progress-bar.bg-success { background-color: var(--rag-green) !important; }
.progress-bar.bg-warning { background-color: var(--rag-amber) !important; color: #fff; }
.progress-bar.bg-danger  { background-color: var(--rag-red) !important; }

/* ---- Light status chips (on white cards) ---- */
.pr-chip { font-size: 0.7rem; font-weight: 700; border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
/* Text colours are darker than the --rag-* tokens: the RAG hues sit just under AA
   (4.5:1) on these light tints (green ~4.4:1, grey ~4.2:1), so they're darkened here. */
.pr-chip-green { color: #0B5A2B; background: #E7F3EC; }
.pr-chip-amber { color: #8A4B00; background: #FBF1E7; }
.pr-chip-red   { color: var(--rag-red);   background: #FBEAEA; }
.pr-chip-grey  { color: #4B5563;  background: #EEF2F4; }

/* ---- Person avatar (initials) ---- */
.pr-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    background: #EEF2F4;
    color: #3F5560;
}
.pr-avatar-good { background: #E7F3EC; color: #0B5A2B; }
.pr-avatar-bad  { background: #FBEAEA; color: var(--rag-red); }

/* ---- Matrix status cell (tick / count) ---- */
.pr-cell {
    display: inline-flex;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}
.pr-cell-good  { background: #E7F3EC; color: #0B5A2B; }
.pr-cell-amber { background: #FBF1E7; color: #8A4B00; }
.pr-cell-red   { background: #FBEAEA; color: var(--rag-red); }
.pr-cell-grey  { background: #EEF2F4; color: #4B5563; }

/* ---- Hover lift for clickable cards ---- */
.trackcard { transition: transform .14s ease, box-shadow .14s ease; }
.trackcard:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,42,43,.10); }

/* ---------------------------------------------------------------------
   4. Print (CQC inspector evidence pack — unchanged)
   --------------------------------------------------------------------- */
.cqc-pack-meta { border: 1px solid #dee2e6; border-radius: .375rem; padding: 1rem; }
.cqc-rag { display:inline-block; min-width: 4.5rem; text-align:center; }

@media print {
    .sidebar, .top-row, #blazor-error-ui, .no-print { display: none !important; }
    .page { display: block; }
    main, .content { margin: 0 !important; padding: 0 !important; }
    a { color: inherit; text-decoration: none; }
    .pr-hero { background: #fff !important; color: #000 !important; }
    .cqc-kq { break-inside: avoid; page-break-inside: avoid; }
    .cqc-kq + .cqc-kq { break-before: page; page-break-before: always; }
    .table { font-size: 11px; }
    @page { margin: 1.5cm; }
}

/* Brand wordmark shown above the heading on account pages (login, set password).
   Sized to 75% of the form column width (the inputs are full-width .form-control). */
.pr-auth-logo {
    display: block;
    width: 75%;
    height: auto;
}

/* ---- Reflective discussions ---- */
.competency-learning-discussion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .75rem;
    padding: .7rem .85rem;
    border: 1px solid #d9e1e8;
    border-left: 3px solid #6f7fc2;
    border-radius: .5rem;
    background: #f7f8fc;
}
.competency-learning-discussion-summary > div { display: grid; gap: .2rem; }
.competency-learning-action__timeline-item--discussion::before { background: #6f7fc2; }
.reflective-discussion-page { max-width: 72rem; }
.reflective-discussion-hero {
    padding: 1.35rem 1.5rem;
    border: 1px solid #dce5e8;
    border-radius: .8rem;
    background: linear-gradient(135deg, #f4f8f8, #f8f7fc);
}
.reflective-discussion-card {
    border: 1px solid #dce5e8;
    border-radius: .7rem;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 5px 18px rgba(15,42,43,.05);
}
.reflective-discussion-card + .reflective-discussion-card { margin-top: .85rem; }
.reflective-discussion-card__meta { color: #5d6c73; font-size: .88rem; }
.reflective-discussion-card__schedule {
    margin-top: .85rem;
    padding: .8rem;
    border-radius: .5rem;
    background: #f7fafb;
}
.reflective-discussion-form {
    display: grid;
    gap: 1rem;
}
.reflective-discussion-form__section {
    padding: 1rem;
    border: 1px solid #dce5e8;
    border-radius: .65rem;
    background: #fff;
}
.reflective-discussion-form__section h2 { font-size: 1.05rem; margin-bottom: .35rem; }
.reflective-discussion-form__prompt { color: #5d6c73; font-size: .9rem; margin-bottom: .7rem; }
.reflective-discussion-next-action {
    padding: .75rem;
    border: 1px solid #e0e7ea;
    border-radius: .5rem;
    background: #fbfcfc;
}
.reflective-discussion-next-action + .reflective-discussion-next-action { margin-top: .6rem; }
@media (max-width: 640px) {
    .competency-learning-discussion-summary { align-items: flex-start; flex-direction: column; }
}

/* ---- Team compliance drill-downs ---- */
.team-compliance-surface {
    overflow: hidden;
    border: 1px solid var(--pr-line);
    border-radius: .75rem;
    background: #fff;
    box-shadow: var(--pr-shadow);
}
.team-compliance-surface__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--pr-line);
}
.team-compliance-surface__header p {
    margin: 0 0 .2rem;
    color: var(--pr-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.team-compliance-surface__header h2 {
    margin: 0;
    color: var(--pr-text);
    font-size: 1.15rem;
    font-weight: 850;
}
.team-compliance-surface__header > span {
    flex: 0 0 auto;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rag-red) 10%, white);
    color: var(--rag-red);
    font-size: .8rem;
    font-weight: 850;
}
.team-compliance-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}
.team-compliance-table {
    min-width: 46rem;
}
.team-compliance-table__group th {
    padding: .7rem 1rem;
    border-bottom-color: var(--pr-line);
    background: var(--pr-surface-soft);
    color: var(--pr-text);
}
.team-compliance-table__group th span {
    font-size: .88rem;
    font-weight: 850;
}
.team-compliance-table__group th small {
    margin-left: .5rem;
    color: var(--pr-muted);
    font-weight: 700;
}
.team-compliance-table__exception > td:first-child {
    box-shadow: inset 3px 0 var(--rag-red);
}
.team-compliance-table .btn {
    min-height: 2.75rem;
}
.team-compliance-table .list-group-item {
    min-height: 2.75rem;
    gap: .75rem;
}
@media (max-width: 640px) {
    .team-compliance-surface {
        margin-right: -.25rem;
        margin-left: -.25rem;
        border-radius: .5rem;
    }
    .team-compliance-surface__header {
        align-items: flex-start;
        padding: .9rem;
    }
    .team-compliance-table-wrap {
        overflow: visible;
    }
    .team-compliance-table {
        display: block;
        min-width: 0;
    }
    .team-compliance-table thead {
        display: none;
    }
    .team-compliance-table tbody {
        display: block;
        padding: .75rem;
    }
    .team-compliance-table tr {
        display: grid;
        margin-bottom: .75rem;
        overflow: hidden;
        border: 1px solid var(--pr-line);
        border-radius: .5rem;
        background: #fff;
    }
    .team-compliance-table tr:last-child {
        margin-bottom: 0;
    }
    .team-compliance-table .team-compliance-table__group {
        margin: 1rem 0 .5rem;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .team-compliance-table .team-compliance-table__group:first-child {
        margin-top: 0;
    }
    .team-compliance-table__group th {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
        padding: .25rem 0;
        border: 0;
        background: transparent;
    }
    .team-compliance-table__group th small {
        margin-left: 0;
    }
    .team-compliance-table td {
        display: grid;
        grid-template-columns: minmax(6.75rem, .8fr) minmax(0, 1.2fr);
        align-items: start;
        gap: .5rem;
        padding: .7rem .8rem;
        border-color: var(--pr-line);
        text-align: left !important;
    }
    .team-compliance-table td::before {
        color: var(--pr-muted);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .03em;
        text-transform: uppercase;
        content: attr(data-label);
    }
    .team-compliance-table td > .progress,
    .team-compliance-table td > .btn,
    .team-compliance-table td > .list-group,
    .team-compliance-table td > .text-success,
    .team-compliance-table td > .text-success-emphasis,
    .team-compliance-table td > .team-compliance-table__primary {
        grid-column: 2;
    }
    .team-compliance-table td > .progress {
        width: 100%;
        margin-top: .15rem;
    }
    .team-compliance-table td > .btn {
        width: 100%;
    }
    .team-compliance-table .list-group-item {
        display: grid !important;
        justify-content: stretch !important;
        gap: .35rem;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .team-compliance-table__exception {
        border-left: 4px solid var(--rag-red) !important;
    }
    .team-compliance-table__exception > td:first-child {
        box-shadow: none;
    }
}