/*
    The shared Identity pages' presentation.

    Why this file exists: the pages in this library are served by BOTH portals, so they cannot
    use either portal's class names. ResetPassword once did - it was written in the practice
    portal's cdp- vocabulary - and in the super admin portal not one of its classes matched a
    rule, so it rendered as bare HTML. The rest of the pages were the scaffold's raw <h1> and
    <hr>, which had the same result for a different reason.

    So the pages speak a third vocabulary, cds-, that belongs to neither portal, and this file
    is the only thing that styles it. It is shipped as a static web asset, which each host
    links from App.razor as _content/ClinicDiary.Security/css/security.css.

    Every value is a --cds- custom property. A host aliases those to its own tokens in one
    small block (see base/_security.scss in either portal), and the shared pages then come out
    in that portal's palette, type and radii without this file knowing either portal exists.
    The fallbacks below are the practice portal's values, so a host that aliases nothing still
    gets a coherent page rather than an unstyled one.
*/

.cds-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--cds-font-ui, system-ui, -apple-system, "Segoe UI", sans-serif);
    color: var(--cds-text, #201f1e);
}

.cds-title {
    margin: 0;
    font-family: var(--cds-font-brand, var(--cds-font-ui, system-ui));
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--cds-text, #201f1e);
}

/* The sentence under the title that says what this page wants from the reader. */
.cds-lede {
    margin: -8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cds-text-secondary, #605e5c);
}

.cds-prose {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cds-text, #201f1e);
}

.cds-footnote {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cds-text-muted, #797775);
}

/* Running text only. Applied to every descendant it also caught the account nav, which
   turned a column of nav entries into a column of green links. */
.cds-prose a,
.cds-lede a,
.cds-footnote a,
.cds-message a,
.cds-definition a {
    color: var(--cds-green, #3d8560);
    font-weight: 600;
    text-underline-offset: 2px;
}

/* ---- Forms ------------------------------------------------------------- */

.cds-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.cds-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cds-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cds-text-secondary, #605e5c);
}

.cds-hint {
    font-size: 12px;
    color: var(--cds-text-muted, #797775);
}

.cds-input {
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--cds-text, #201f1e);
    background: var(--cds-surface, #ffffff);
    border: 1px solid var(--cds-control-stroke, #8a8886);
    border-bottom-color: var(--cds-control-stroke-accent, #605e5c);
    border-radius: var(--cds-radius-control, 4px);
}

.cds-input:focus {
    outline: none;
    border-color: var(--cds-green, #3d8560);
    box-shadow: 0 0 0 1px var(--cds-green, #3d8560);
}

.cds-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cds-text, #201f1e);
}

.cds-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cds-green, #3d8560);
}

/* Blazor's own class, emitted by <ValidationMessage>. Named here because the pages do not
   get to choose it. */
.cds-page .validation-message {
    font-size: 12px;
    color: var(--cds-danger, #a4262c);
}

.cds-input.invalid {
    border-color: var(--cds-danger, #a4262c);
}

/* ---- Buttons ----------------------------------------------------------- */

.cds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--cds-text, #201f1e);
    background: var(--cds-surface, #ffffff);
    border: 1px solid var(--cds-control-stroke, #8a8886);
    border-radius: var(--cds-radius-control, 4px);
    cursor: pointer;
}

.cds-btn--primary {
    color: #ffffff;
    background: var(--cds-green, #3d8560);
    border-color: var(--cds-green, #3d8560);
}

.cds-btn--primary:hover {
    background: var(--cds-green-hover, #336f50);
    border-color: var(--cds-green-hover, #336f50);
}

.cds-btn--block {
    width: 100%;
}

.cds-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---- Messages ---------------------------------------------------------- */

/*
    StatusMessage used to emit Bootstrap's "alert alert-danger". Neither portal ships
    Bootstrap, so the text rendered as an unstyled paragraph in both - the same class of bug
    as the pages themselves had.
*/
.cds-message {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid transparent;
    border-radius: var(--cds-radius-control, 4px);
}

.cds-message--success {
    color: var(--cds-text, #201f1e);
    background: #f2f9f5;
    border-color: #cfe6da;
}

.cds-message--danger {
    color: var(--cds-danger, #a4262c);
    background: #fdf3f4;
    border-color: #f3d6d8;
}

/* ---- Password reveal --------------------------------------------------- */

.cds-reveal {
    position: relative;
    display: block;
}

.cds-reveal__toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 2px 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--cds-green, #3d8560);
    background: none;
    border: 0;
    cursor: pointer;
}

.cds-reveal .cds-input {
    padding-right: 56px;
}

/* ---- Account management ------------------------------------------------ */

/*
    The signed-in pages under /Account/Manage.

    These render inside each portal's SHELL rather than its sign-in card
    (SecurityUiOptions.ManageLayout), so they are a PAGE, not a card's contents: they carry the
    host's own content inset and put their content on a card, the same shape every other page
    in either portal has. Rendered without that, the account pages sat flush against the rail
    with their content loose on the canvas, which is what gave them away as not belonging.
*/
.cds-manage {
    padding: var(--cds-page-pad-y, 24px) var(--cds-page-pad-x, 32px) 56px;
    max-width: var(--cds-content-max, 1180px);
    font-family: var(--cds-font-ui, system-ui, -apple-system, "Segoe UI", sans-serif);
    color: var(--cds-text, #201f1e);
}

/* Both portals drop the content inset once the rail collapses to a drawer, at 900px. A
   literal here because a custom property cannot be read inside a media query — the two are
   kept in step by this comment and by the shells declaring the same breakpoint. */
@media (max-width: 900px) {
    .cds-manage {
        padding: 20px 16px 40px;
    }
}

.cds-manage__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

/* The lede pulls itself up under a card title; in a page header the gap above is already
   right. */
.cds-manage__header .cds-lede {
    margin: 0;
}

.cds-manage__card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    background: var(--cds-surface, #ffffff);
    border: 1px solid var(--cds-stroke, #e0e0e0);
    border-radius: var(--cds-radius-card, 6px);
    box-shadow: var(--cds-shadow-card, 0 1px 2px rgba(0, 0, 0, 0.06));
    overflow: hidden;
}

@media (max-width: 720px) {
    .cds-manage__card {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cds-manage__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-right: 1px solid var(--cds-stroke-soft, #ededed);
}

@media (max-width: 720px) {
    .cds-manage__nav {
        border-right: 0;
        border-bottom: 1px solid var(--cds-stroke-soft, #ededed);
    }
}

/*
    Deliberately NOT a link treatment. Both portals style a selected nav entry the same way —
    a neutral grey fill with the green spent on a bar down the left edge — and say so as a
    design rule. The first version of this filled the selected entry with the logo mint, which
    read as a button and broke that rule on the one surface meant to feel native in both.
*/
.cds-manage__link {
    position: relative;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cds-text-secondary, #605e5c);
    text-decoration: none;
    border-radius: var(--cds-radius-control, 4px);
}

.cds-manage__link:hover {
    color: var(--cds-text, #201f1e);
    background: var(--cds-selection, #f0f0f0);
    text-decoration: none;
}

/* NavLink's own class. Named here because the component chooses it, not the page. */
.cds-manage__link.active {
    color: var(--cds-text, #201f1e);
    background: var(--cds-selection, #f0f0f0);
    font-weight: 600;
}

/* The green selection bar. The weight change carries the state too, for anyone who cannot
   distinguish the fill. */
.cds-manage__link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--cds-green, #3d8560);
}

.cds-manage__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 24px;
    max-width: 520px;
}

/* A heading inside the managed area. The page title is the h1 in the layout, so these are h2. */
.cds-section__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--cds-text, #201f1e);
}

/* A second section on the same page needs air above it, but the first must not be pushed off
   the top of the card. */
.cds-section__title:not(:first-child) {
    margin-top: 8px;
}

.cds-message--warning {
    color: var(--cds-text, #201f1e);
    background: #fdf8ec;
    border-color: #f0e0bb;
}

/* Recovery codes: shown once, meant to be copied down. */
.cds-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 12px;
    background: var(--cds-surface-alt, #fafafa);
    border: 1px solid var(--cds-stroke, #e0e0e0);
    border-radius: var(--cds-radius-control, 4px);
}

.cds-codes code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--cds-text, #201f1e);
}

/* A fact about the account that is read, not edited — the username, the current address. */
.cds-definition {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cds-definition__term {
    font-size: 12px;
    font-weight: 600;
    color: var(--cds-text-secondary, #605e5c);
}

.cds-definition__value {
    font-size: 14px;
    color: var(--cds-text, #201f1e);
}

/* A row of them — a linked login, a registered passkey — reads as a list, so it needs the
   separation a list has. */
.cds-definition + .cds-definition {
    padding-top: 12px;
    border-top: 1px solid var(--cds-stroke-soft, #ededed);
}