/* DOK-708 — the external dossier area (/share).

   GLOBAL, not a .razor.css, and that is not laziness. Scoped stylesheets attach an attribute selector to
   the elements a component itself renders and never reach inside a MudBlazor component's root, so a rule
   written in ExternalShareLayout.razor.css would apply to the plain divs and silently miss every Mud
   control among them. Every other cross-cutting sheet in this app is here for the same reason
   (dok-shell.css, dok-listing.css, dok-cadastro.css); the file header of dok-document-process.css tells
   the same story.

   Everything below uses --dok-* tokens declared in BuildingBlocks/Blazor.UI/wwwroot/css/dok-theme.css, or
   --mud-palette-* with an explicit fallback. It declares no token of its own. An undefined custom property
   makes CSS discard the entire declaration rather than fall back to anything, which is how a whole screen
   loses its borders and backgrounds without a single error anywhere — DesignTokenTests exists because that
   shipped once already.

   The external area renders light in every case: App.razor only writes data-dok-theme="dark" for an
   authenticated visitor, and an external one never is. Nothing here needs a dark variant, and inventing
   one would be untestable dead CSS. */

.dok-share {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--dok-font-sans);
    color: var(--dok-text-primary);
    background: var(--mud-palette-background-gray, #f8fafc);
}

/* ===== Bar ===== */

.dok-share__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dok-space-md);
    padding: var(--dok-space-md) var(--dok-space-lg);
    background: var(--dok-card-bg);
    border-bottom: 1px solid var(--dok-border-subtle);
}

.dok-share__brand {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
}

.dok-share__brand-mark {
    display: block;
    width: 28px;
    height: 28px;
}

.dok-share__brand-name {
    font-size: var(--dok-font-size-lg);
    font-weight: var(--dok-font-weight-semibold);
    letter-spacing: -0.01em;
}

/* ----- DOK-714 — the sharing tenant's mark -----

   The tenant's logo is an arbitrary image uploaded by an administrator: any aspect ratio, any size, and
   nothing in the theme editor constrains it. Bounded by HEIGHT with an auto width, so a wide lockup keeps
   its proportions instead of being squeezed into the square the product mark occupies, and max-width stops
   a very wide one pushing the language selector off a phone. object-fit: contain is belt and braces for a
   browser that resolves the auto width differently.

   The bar's height is therefore set by the logo, which is deliberate: the tenant identifies the page, and a
   28px cap would make most real logos illegible. It does not redefine the layout — no colour, no font and
   no spacing here comes from the tenant. */
.dok-share__brand-mark--tenant {
    width: auto;
    height: 32px;
    max-width: 12rem;
    object-fit: contain;
}

/* The designed fallback: the tenant's name typeset, never a broken image and never an empty box. Slightly
   larger and tighter than the product wordmark beside it, because it is standing in for a logo rather than
   sitting next to one. A long tenant name wraps rather than pushing the selector off the bar. */
.dok-share__brand-name--tenant {
    max-width: 18rem;
    font-size: var(--dok-font-size-xl);
    letter-spacing: -0.02em;
    line-height: var(--dok-line-height-tight);
    overflow-wrap: anywhere;
}

.dok-share__lang {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
}

.dok-share__lang-option {
    padding: var(--dok-space-2xs) var(--dok-space-xs);
    border-radius: var(--dok-radius-sm);
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
    text-decoration: none;
    transition: background var(--dok-transition), color var(--dok-transition);
}

.dok-share__lang-option:hover,
.dok-share__lang-option:focus-visible {
    background: var(--dok-overlay-subtle);
    color: var(--dok-text-primary);
}

/* DOK-715 — a visible focus ring on the one control an external visitor is most likely to reach by
   keyboard. The browser's default outline is suppressed by nothing here, but stating it explicitly means
   the ring survives a future reset, and offset keeps it clear of the hover background. */
.dok-share__lang-option:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #14304f);
    outline-offset: 2px;
}

/* The language in force. Marked by weight and colour as well as by aria-current, because a difference only
   a screen reader can hear is a difference a sighted visitor who landed in the wrong language cannot use. */
.dok-share__lang-option--current {
    color: var(--dok-text-primary);
    font-weight: var(--dok-font-weight-semibold);
    background: var(--dok-overlay-subtle);
}

/* ===== Body ===== */

.dok-share__main {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding: var(--dok-space-xl) var(--dok-space-md);
}

.dok-share__panel {
    width: 100%;
    max-width: 44rem;
    padding: var(--dok-space-xl);
    background: var(--dok-card-bg);
    border: 1px solid var(--dok-card-border);
    border-radius: var(--dok-radius-lg);
    box-shadow: var(--dok-card-shadow);
}

.dok-share__panel--waiting,
.dok-share__panel--refusal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dok-space-sm);
    text-align: center;
    max-width: 32rem;
}

.dok-share__refusal-icon {
    color: var(--dok-text-secondary);
}

.dok-share__title {
    margin: 0 0 var(--dok-space-xs);
    font-size: var(--dok-font-size-xl);
    font-weight: var(--dok-font-weight-semibold);
    line-height: var(--dok-line-height-tight);
}

.dok-share__lead {
    margin: 0;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-base);
    line-height: var(--dok-line-height-normal);
}

/* ===== Session facts ===== */

.dok-share__facts {
    display: grid;
    gap: var(--dok-space-xs);
    margin: var(--dok-space-lg) 0 0;
    padding: var(--dok-space-md);
    list-style: none;
    background: var(--dok-overlay-subtle);
    border-radius: var(--dok-radius);
}

.dok-share__fact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dok-space-xs);
    font-size: var(--dok-font-size-sm);
}

.dok-share__fact-label {
    color: var(--dok-text-secondary);
}

.dok-share__fact-value {
    font-weight: var(--dok-font-weight-medium);
}

/* The slot DOK-710 (view) and DOK-711 (fill) render into. */
.dok-share__content {
    margin-top: var(--dok-space-lg);
    padding-top: var(--dok-space-lg);
    border-top: 1px solid var(--dok-border-subtle);
}

.dok-share__pending {
    margin: 0;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
}

/* ===== Fill (DOK-711) =====

   The one panel gets wider here: the read screens are a paragraph and a button, and this one is a checklist
   of documents each with its own form. Every value below is an existing --dok-* token or a --mud-palette-*
   with an explicit fallback; nothing declares a token of its own, because an undefined custom property makes
   CSS discard the whole declaration and take the border, the background or the colour with it. */

.dok-share__fill {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-lg);
}

.dok-share__fill-heading {
    margin: 0 0 var(--dok-space-2xs);
    font-size: var(--dok-font-size-lg);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-share__fill-subheading {
    margin: 0 0 var(--dok-space-xs);
    font-size: var(--dok-font-size-base);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-share__fill-progress {
    padding: var(--dok-space-md);
    background: var(--dok-overlay-subtle);
    border-radius: var(--dok-radius);
}

.dok-share__fill-count {
    margin: var(--dok-space-xs) 0 var(--dok-space-2xs);
    font-size: var(--dok-font-size-base);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-share__fill-section,
.dok-share__fill-doc {
    padding: var(--dok-space-md);
    background: var(--dok-card-bg);
    border: 1px solid var(--dok-card-border);
    border-radius: var(--dok-radius);
}

.dok-share__fill-doc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dok-space-xs);
    margin-bottom: var(--dok-space-2xs);
}

.dok-share__fill-doc-name {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--dok-font-size-base);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-share__fill-required {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* The status badge carries the meaning in its text as well as its colour: a colour-only distinction is
   unreadable to anyone who cannot tell these four apart, and this page has no legend to fall back on. */
.dok-share__fill-badge {
    padding: var(--dok-space-2xs) var(--dok-space-xs);
    border-radius: var(--dok-radius-sm);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    white-space: nowrap;
}

.dok-share__fill-badge--missing {
    color: var(--dok-text-secondary);
    background: var(--dok-overlay-subtle);
}

.dok-share__fill-badge--partial {
    color: var(--mud-palette-warning-darken, #8a5a00);
    background: var(--mud-palette-warning-hover, rgba(255, 152, 0, .12));
}

.dok-share__fill-badge--provided {
    color: var(--mud-palette-success-darken, #1b5e20);
    background: var(--mud-palette-success-hover, rgba(76, 175, 80, .12));
}

.dok-share__fill-badge--attention {
    color: var(--mud-palette-error-darken, #8c1d18);
    background: var(--mud-palette-error-hover, rgba(179, 38, 30, .12));
}

.dok-share__fill-files {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-2xs);
    margin: var(--dok-space-xs) 0;
    padding: 0;
    list-style: none;
}

.dok-share__fill-file {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dok-space-xs);
    padding: var(--dok-space-2xs) var(--dok-space-xs);
    background: var(--dok-overlay-subtle);
    border-radius: var(--dok-radius-sm);
    font-size: var(--dok-font-size-sm);
}

.dok-share__fill-file-name {
    overflow-wrap: anywhere;
}

.dok-share__fill-file-size {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    white-space: nowrap;
}

.dok-share__fill-upload,
.dok-share__fill-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dok-space-xs);
    margin-top: var(--dok-space-sm);
}

.dok-share__file {
    max-width: 100%;
    font-family: var(--dok-font-sans);
    font-size: var(--dok-font-size-sm);
    color: var(--dok-text-primary);
}

.dok-share__fill-messages {
    margin: var(--dok-space-xs) 0 0;
    padding-left: var(--dok-space-md);
}

/* The dynamic form is a MudGrid of MudItems, so it needs to own the form's full width rather than be laid
   out as one flex item beside the button. */
.dok-share__fill-form > .mud-grid {
    width: 100%;
    margin: 0;
}

/* ===== Submission (DOK-712) ===== */

/* Separated from the documents above by a rule rather than by spacing alone: it is the one control on this
   page that ends the visitor's involvement, and it must not read as the last document's own button. */
.dok-share__fill-submit {
    margin-top: var(--dok-space-lg);
    padding-top: var(--dok-space-md);
    border-top: 1px solid var(--dok-border-subtle);
}

.dok-share__fill-outstanding {
    margin: var(--dok-space-xs) 0 0;
    padding-left: var(--dok-space-md);
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
    line-height: var(--dok-line-height-normal);
}

/* ===== The receipt (DOK-712) ===== */

.dok-share__delivered {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-2xs);
    margin: var(--dok-space-xs) 0 var(--dok-space-md);
    padding: 0;
    list-style: none;
}

.dok-share__delivered-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dok-space-xs);
    padding: var(--dok-space-2xs) 0;
    border-bottom: 1px solid var(--dok-border-subtle);
    font-size: var(--dok-font-size-sm);
}

.dok-share__delivered-name {
    overflow-wrap: anywhere;
}

.dok-share__delivered-count {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    white-space: nowrap;
}

/* ===== Code entry ===== */

.dok-share__form {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-xs);
    margin-top: var(--dok-space-lg);
}

.dok-share__label {
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
}

.dok-share__input {
    width: 100%;
    max-width: 12rem;
    padding: var(--dok-space-sm);
    font-family: var(--dok-font-sans);
    font-size: var(--dok-font-size-xl);
    letter-spacing: 0.35em;
    text-align: center;
    color: var(--dok-text-primary);
    background: var(--dok-card-bg);
    border: 1px solid var(--dok-card-border);
    border-radius: var(--dok-radius-sm);
}

.dok-share__input:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #14304f);
    outline-offset: 2px;
}

.dok-share__help,
.dok-share__privacy {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    line-height: var(--dok-line-height-normal);
}

.dok-share__privacy {
    display: block;
    margin: var(--dok-space-lg) 0 0;
}

.dok-share__note {
    margin: var(--dok-space-sm) 0 0;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
}

.dok-share__error {
    margin: var(--dok-space-sm) 0 0;
    color: var(--mud-palette-error, #b3261e);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
}

/* ===== Actions ===== */

.dok-share__actions {
    margin-top: var(--dok-space-md);
}

.dok-share__button {
    padding: var(--dok-space-sm) var(--dok-space-lg);
    font-family: var(--dok-font-sans);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
    color: var(--mud-palette-primary-text, #ffffff);
    background: var(--mud-palette-primary, #14304f);
    border: 1px solid transparent;
    border-radius: var(--dok-radius-sm);
    cursor: pointer;
    transition: opacity var(--dok-transition);
}

.dok-share__button:hover,
.dok-share__button:focus-visible {
    opacity: 0.9;
}

.dok-share__button--quiet {
    color: var(--dok-text-secondary);
    background: transparent;
    border-color: var(--dok-card-border);
}

/* ===== Foot ===== */

.dok-share__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dok-space-xs);
    padding: var(--dok-space-md) var(--dok-space-lg);
    border-top: 1px solid var(--dok-border-subtle);
}

.dok-share__foot-note {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
}

/* DOK-714 — "Powered by DOK Genius". Discreet by instruction: secondary colour, the smallest size in the
   scale, underlined only on hover. It is an acknowledgement on somebody else's branded page, not a call to
   action, and a page that advertises louder than it identifies its sender would defeat the branding above. */
.dok-share__foot-attribution {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    text-decoration: none;
    transition: color var(--dok-transition);
}

.dok-share__foot-attribution:hover,
.dok-share__foot-attribution:focus-visible {
    color: var(--dok-text-primary);
    text-decoration: underline;
}

.dok-share__foot-attribution:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #14304f);
    outline-offset: 2px;
}

/* ===== DOK-710 — the read-only dossier =====

   Global, like everything else in this file and for the same reason: a .razor.css never reaches inside a
   MudBlazor component root, and this section renders MudIcon among its own elements.

   No token is declared here. Everything is a --dok-* from BuildingBlocks/Blazor.UI/wwwroot/css/dok-theme.css
   or a --mud-palette-* with an explicit fallback — an undeclared custom property makes CSS discard the whole
   declaration, which is how a screen loses its borders without a single error (DesignTokenTests).

   The status pill reaches for --mud-palette-* semantic colours because dok-theme.css declares no success,
   warning or error token of its own, and each one carries a literal fallback so the pill keeps its meaning
   before the theme has painted. Colour is never the only signal: the pill always carries its own word. */

.dok-share-view__heading {
    margin: 0 0 var(--dok-space-2xs);
    font-size: var(--dok-font-size-lg);
    font-weight: var(--dok-font-weight-semibold);
    line-height: var(--dok-line-height-tight);
}

.dok-share-view__sharer {
    margin: 0;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
}

.dok-share-view__notice,
.dok-share-view__progress,
.dok-share-view__empty,
.dok-share-view__message {
    margin: var(--dok-space-xs) 0 0;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
    line-height: var(--dok-line-height-normal);
}

.dok-share-view__block {
    margin-top: var(--dok-space-lg);
}

.dok-share-view__block-title {
    margin: 0;
    font-size: var(--dok-font-size-base);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-share-view__documents,
.dok-share-doc__files {
    margin: var(--dok-space-sm) 0 0;
    padding: 0;
    list-style: none;
}

.dok-share-view__documents {
    display: grid;
    gap: var(--dok-space-sm);
}

/* ----- One expected document ----- */

.dok-share-doc {
    padding: var(--dok-space-md);
    background: var(--dok-card-bg);
    border: 1px solid var(--dok-card-border);
    border-radius: var(--dok-radius);
}

.dok-share-doc__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dok-space-xs);
}

.dok-share-doc__name {
    font-weight: var(--dok-font-weight-semibold);
}

.dok-share-doc__status {
    padding: var(--dok-space-2xs) var(--dok-space-xs);
    border-radius: var(--dok-radius-full);
    color: var(--dok-text-primary);
    background: var(--dok-overlay-subtle);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-medium);
}

.dok-share-doc__status--validated {
    color: var(--mud-palette-success, #2e7d32);
    background: rgba(46, 125, 50, 0.12);
}

.dok-share-doc__status--uploaded {
    color: var(--mud-palette-info, #0288d1);
    background: rgba(2, 136, 209, 0.12);
}

.dok-share-doc__status--partial,
.dok-share-doc__status--expired {
    color: var(--mud-palette-warning, #b26a00);
    background: rgba(178, 106, 0, 0.12);
}

.dok-share-doc__status--correction,
.dok-share-doc__status--missing {
    color: var(--mud-palette-error, #b3261e);
    background: rgba(179, 38, 30, 0.12);
}

.dok-share-doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dok-space-xs);
    margin: var(--dok-space-2xs) 0 0;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
}

.dok-share-doc__description,
.dok-share-doc__empty {
    margin: var(--dok-space-xs) 0 0;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
    line-height: var(--dok-line-height-normal);
}

/* ----- One file ----- */

.dok-share-doc__files {
    display: grid;
    gap: var(--dok-space-xs);
    margin-top: var(--dok-space-sm);
}

.dok-share-file {
    display: grid;
    gap: var(--dok-space-xs);
    padding: var(--dok-space-sm);
    background: var(--dok-overlay-subtle);
    border-radius: var(--dok-radius-sm);
}

.dok-share-file__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dok-space-xs);
    min-width: 0;
}

.dok-share-file__name {
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-medium);
    /* A long file name wraps rather than pushing the actions off a phone screen. */
    overflow-wrap: anywhere;
}

.dok-share-file__meta {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
}

.dok-share-file__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dok-space-xs);
}

.dok-share-file__no-preview {
    margin: 0;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    line-height: var(--dok-line-height-normal);
}

/* ----- Fields, read as a record and never as a form ----- */

.dok-share-fields {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: var(--dok-space-2xs) var(--dok-space-md);
    margin: var(--dok-space-sm) 0 0;
}

.dok-share-fields__label {
    margin: 0;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
}

.dok-share-fields__value {
    margin: 0;
    font-size: var(--dok-font-size-sm);
    overflow-wrap: anywhere;
}

.dok-share-fields__value--absent {
    color: var(--dok-text-secondary);
    font-style: italic;
}

@media (max-width: 600px) {
    .dok-share__panel {
        padding: var(--dok-space-lg);
    }

    .dok-share__main {
        padding: var(--dok-space-md) var(--dok-space-xs);
    }

    /* A two-column definition list on a 360px screen leaves four characters for the value. */
    .dok-share-fields {
        grid-template-columns: 1fr;
    }

    .dok-share-fields__value {
        margin-bottom: var(--dok-space-xs);
    }
}