/*
 * Mina dokument (Pages/Index.razor, Shared/RecipeGridView.razor): search, the document list, the empty and error
 * states (#76). Owner: package B3. Registered after identity.css.
 * The grid itself keeps the theme: no frame around it (red thread 1), only our own classes and public tokens.
 */

/* ------------------------------------------------------------------ */
/* Text for screen readers only: the hit count, "Hämtar …", "Ladda ner" before the file name (MDN: clip-path). */
/* ------------------------------------------------------------------ */
.eng-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Sizes of this area only (tokens.css is the shared file). */
.eng-documents-search,
.eng-document-link {
    --eng-documents-search-width: 32rem;   /* room for "Artikelnummer eller filnamn" and a long file name */
    --eng-documents-touch-target: 2.75rem; /* 44 px */
}

/* ------------------------------------------------------------------ */
/* Search first, with a visible label (decision 38, red thread 6) */
/* ------------------------------------------------------------------ */
.eng-documents-search {
    display: grid;
    gap: var(--dxds-spacing-40);
    max-width: var(--eng-documents-search-width);
    margin-bottom: var(--dxds-spacing-160);
}

.eng-documents-search-label {
    font-weight: var(--dxds-font-weight-700);
}

.eng-documents-search-box {
    width: 100%;
}

/* Fluent marks a focused text editor only with its underline. The search is the first stop on the page, so it gets
   the same 2 px ring as our own elements (decision 3), around the editor: our class, no DevExpress internals. */
.eng-documents-search-box:focus-within {
    outline: var(--eng-focus-ring-width) solid var(--eng-focus-ring-color);
    outline-offset: var(--eng-focus-ring-offset);
}

/* Grid highlights and our own highlights in the phone cell look the same (Fluent's highlight tokens). */
.eng-search-hit {
    padding: 0;
    color: var(--dxds-color-content-highlight-rest);
    background-color: var(--dxds-color-surface-highlight-rest);
}

/* ------------------------------------------------------------------ */
/* The list: group rows in plain words, the file name is the download */
/* ------------------------------------------------------------------ */
.eng-documents-group {
    font-weight: var(--dxds-font-weight-700);
}

.eng-document-link {
    justify-content: flex-start;
    height: auto;
    padding-inline: 0;
    text-align: start;
    white-space: normal;
}

.eng-document-link-icon {
    flex: none;
    margin-inline-end: var(--dxds-spacing-80);
}

.eng-document-link-text {
    overflow-wrap: anywhere;
}

/* Two-line cell on a phone (decision 39): file name, then "Artikelnr 100001". */
.eng-document-cell {
    display: grid;
}

.eng-document-article {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-base-sm);
    line-height: var(--dxds-line-height-base-sm);
}

/* No hits: the search text, Rensa sökningen and Berätta för oss. */
.eng-documents-no-hits {
    display: grid;
    justify-items: center;
    gap: var(--dxds-spacing-160);
    padding: var(--dxds-spacing-240) var(--dxds-spacing-160);
    text-align: center;
}

.eng-documents-no-hits-text {
    max-width: var(--eng-measure);
    margin: 0;
    overflow-wrap: anywhere;
}

.eng-documents-no-hits-actions,
.eng-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--dxds-spacing-120);
}

.eng-empty-state-actions {
    justify-content: flex-start;
}

/* Touch targets of at least 44 px on a phone (red thread 10, WCAG 2.5.8). Same width as DxLayoutBreakpoint XSmall (0–575 px). */
@media (max-width: 575.98px) {
    .eng-documents-search {
        max-width: none;
    }

    .eng-document-link {
        min-height: var(--eng-documents-touch-target);
    }
}

/* ------------------------------------------------------------------ */
/* Empty and error states: icon tile (app.css), H2, one sentence, one button. No time promise (decision 19). */
/* ------------------------------------------------------------------ */
.eng-empty-state {
    display: grid;
    justify-items: start;
    gap: var(--dxds-spacing-160);
    max-width: var(--eng-card-max-width);
    padding: var(--dxds-spacing-320);
    background: var(--eng-color-surface);
    border: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--eng-radius-card);
}

.eng-empty-state h2 {
    margin: 0;
    font-size: var(--dxds-font-size-title-lg);
    line-height: var(--dxds-line-height-title-lg);
}

.eng-empty-state p {
    max-width: var(--eng-measure);
    margin: 0;
}

@media (max-width: 575.98px) {
    .eng-empty-state {
        padding: var(--dxds-spacing-240) var(--dxds-spacing-160);
    }
}

/* ------------------------------------------------------------------ */
/* "Visa" next to the file name, and the recipe view (#108, Pages/RecipeView.razor) */
/* ------------------------------------------------------------------ */
.eng-document-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dxds-spacing-40) var(--dxds-spacing-160);
}

/* "Visa" and "Tillbaka till Mina dokument" are plain links (the theme styles a, ApplyToPageElements): icon and text
   on one line, the focus ring of our own elements (decision 3). */
.eng-document-view,
.eng-recipe-back {
    --eng-documents-touch-target: 2.75rem; /* 44 px */
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--dxds-spacing-40);
}

.eng-document-view:focus-visible,
.eng-recipe-back:focus-visible {
    outline: var(--eng-focus-ring-width) solid var(--eng-focus-ring-color);
    outline-offset: var(--eng-focus-ring-offset);
}

.eng-recipe-view {
    display: grid;
    gap: var(--dxds-spacing-160);
    min-width: 0;
}

.eng-recipe-back {
    justify-self: start;
}

.eng-recipe-title {
    overflow-wrap: anywhere;
}

.eng-recipe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dxds-spacing-120);
}

.eng-recipe-download {
    gap: var(--dxds-spacing-80);
}

.eng-recipe-note {
    display: flex;
    gap: var(--dxds-spacing-80);
    max-width: var(--eng-measure);
    margin: 0;
}

/* The frame keeps the recipe's own size and is scaled to the width of the page by recipe-view.js, which sets the
   three custom properties from the stored layout. The box takes the scaled size, so the page scrolls, not the frame.
   Before the script has run the recipe is shown at its own size, cut at the width of the box (overflow: hidden is
   needed: a transform does not change the frame's layout size). */
.eng-recipe-frame-box {
    /* Defaults until recipe-view.js sets the document's own size and the scale on the element. */
    --eng-recipe-width: 900;
    --eng-recipe-height: 1200;
    --eng-recipe-scale: 1;
    width: min(100%, calc(var(--eng-recipe-width) * 1px));
    aspect-ratio: var(--eng-recipe-width) / var(--eng-recipe-height);
    overflow: hidden;
    justify-self: center;
}

/* The frame is a Tab stop (and its links are): the ring goes on the box, which is not clipped by its own overflow.
   Chrome does not match :focus-within while the frame's document has the focus; recipe-view.js sets the class then. */
.eng-recipe-frame-box:focus-within,
.eng-recipe-frame-box.eng-recipe-frame-box-focus {
    outline: var(--eng-focus-ring-width) solid var(--eng-focus-ring-color);
    outline-offset: var(--eng-focus-ring-offset);
}

.eng-recipe-frame {
    display: block;
    width: calc(var(--eng-recipe-width) * 1px);
    height: calc(var(--eng-recipe-height) * 1px);
    border: 0;
    transform: scale(var(--eng-recipe-scale));
    transform-origin: 0 0;
}

@media (max-width: 575.98px) {
    .eng-document-view,
    .eng-recipe-back {
        min-height: var(--eng-documents-touch-target);
    }
}