/* ==========================================================================
   AkademIQ — page/module-specific layer (v0.17.0)
   Loaded after tokens.css / base.css / components.css (see Components/App.razor).
   Every selector below is a *legacy-compatible* class name already used by
   many sibling .razor pages (Blazor CSS isolation only scopes a rule to
   markup literally written in the .css file's own component - see the
   original per-block comments kept below - so these stay global on purpose).
   Values are now driven entirely by design tokens instead of hardcoded hex,
   so every page using these classes picks up the v0.17.0 visual system
   without needing its own markup rewritten. See docs/ui/design-system.md.
   ========================================================================== */

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

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================================
   Shared classes for the Researchers module (list/details/create/edit) -
   deliberately global (not component-scoped .razor.css) since they're reused
   by several sibling page components; Blazor CSS isolation would otherwise
   silently drop these rules for every component but the one that "owns" them.
   ========================================================================== */

.placeholder-panel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 42rem;
    margin-top: var(--space-md);
}

.placeholder-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
    font-size: 1.3rem;
    line-height: 1;
}

.placeholder-panel p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

/* Generic feedback banners - now thin aliases onto the shared .alert system
   (components.css) so every call site (dozens of pages) reads consistently
   without a markup sweep. */
.login-card__error,
.researcher-form__error-summary {
    margin-bottom: var(--space-md);
    padding: 0.7rem 0.9rem;
    background: var(--color-danger-bg);
    border: var(--border-width) solid var(--color-danger-border);
    border-radius: var(--radius-md);
    color: var(--color-danger-text);
    font-size: 0.9rem;
}

.researcher-form__error-summary ul {
    margin: var(--space-2xs) 0 0;
    padding-left: 1.2rem;
}

.app-success-banner {
    margin-bottom: var(--space-md);
    padding: 0.7rem 0.9rem;
    background: var(--color-success-bg);
    border: var(--border-width) solid var(--color-success-border);
    border-radius: var(--radius-md);
    color: var(--color-success-text);
    font-size: 0.9rem;
}

/* Primary/secondary button pair used across nearly every page in the app -
   redefined on the same tokens as the new .btn/.btn--secondary so both
   naming conventions render identically. New pages should prefer .btn;
   these stay for the ~60 pages not individually touched in this cycle. */
.researchers-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    height: var(--control-h-md);
    padding: 0 var(--space-md);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}

.researchers-button:hover {
    background: var(--color-primary-hover);
}

.researchers-button:active {
    transform: translateY(1px);
}

.researchers-button:disabled,
.researchers-button[aria-disabled="true"] {
    background: var(--color-border-strong);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

/* v0.33.0-rc3 (UI-FORM-DOUBLE-SUBMIT-001): a submit button while its save runs - aria-disabled (not disabled), so the keyboard focus stays on it. */
.researchers-button[aria-busy="true"],
.btn[aria-busy="true"] {
    cursor: progress;
}

/* Secondary action (e.g. "Anuluj", "Wróć") - same size/shape as the primary
   button so the two read as a deliberate pair, never a stray text link that
   could be mistaken for a dead end. */
.researchers-button--secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.researchers-button--secondary:hover {
    background: var(--color-surface-sunken);
}

/* Card section header: title + a single contextual action, e.g. "Dodaj
   identyfikator" - keeps the add-form toggle out of the middle of the table
   it belongs to (see Etap 4 UX cleanup for the rationale). */
.card-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: 0.9rem;
}

.card-section__header h3 {
    margin: 0;
}

.card-toggle-panel {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--color-border);
}

.card-toggle-panel h4 {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* v0.19.0-rc2 Część N: searchable venue picker results (PublicationDetails
   "Przypisz ręcznie") - replaces the old raw-GUID text input. */
.venue-search-results {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    max-height: 16rem;
    overflow-y: auto;
}

.venue-search-results__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: none;
    border: none;
    border-bottom: var(--border-width) solid var(--color-border);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.venue-search-results__item:last-child { border-bottom: none; }
.venue-search-results__item:hover { background: var(--color-surface-sunken); }

/* v0.19.0-rc4: keyboard-highlighted row (ArrowUp/ArrowDown) in the source
   autocomplete - same visual weight as :hover so mouse and keyboard users
   see an identical affordance. */
.venue-search-results__item--active,
.venue-search-results__item:focus-visible {
    background: var(--color-surface-sunken);
    outline: 2px solid var(--color-accent, currentColor);
    outline-offset: -2px;
}

.venue-search-results__name {
    font-weight: 600;
}

.venue-search-results__meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* v0.19.0-rc4: wraps a source-autocomplete text input + its results list so
   the dropdown lays out directly under the field without disturbing the
   surrounding form-grid's own layout. */
.source-autocomplete {
    position: relative;
}

/* Detail-page card sections (Dane podstawowe / Identyfikatory / Afiliacje /
   ...) and the destructive action button - used across every "{Naukowcy,
   Publikacje, Struktura, Użytkownicy}Details" page. Kept global rather than
   in one page's *.razor.css on purpose: Blazor CSS isolation only scopes a
   rule to the elements literally written in the .css file's own component,
   so a class defined in e.g. ResearcherDetails.razor.css silently does not
   style the same class name written in PublicationDetails.razor or
   StrukturaDetails.razor - moving these here once, for every page that
   shares the pattern, avoids that trap instead of re-discovering it per page. */
.researcher-detail__section {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-xs);
}

.researcher-detail__section h3 {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.researcher-detail__grid {
    display: grid;
    /* v0.33 Stage C (C1): the label column is capped (max-content alone let a long label or a long e-mail push the row past a phone screen). */
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: 0.6rem 1.75rem;
    margin: 0;
}

.researcher-detail__grid dt {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.researcher-detail__grid dd {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.researcher-detail__danger {
    padding: 0.55rem 0.9rem;
    border: var(--border-width) solid var(--color-danger-border);
    border-radius: var(--radius-md);
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.researcher-detail__danger:hover {
    background: #fbdcd8;
}

/* Table - alias of .data-table (components.css) for the ~15 pages still
   using the original class name. Unlike .data-table (wrapped in
   .data-table-wrap, which has unconditional overflow-x:auto), this table
   IS its own scroll container - display:block + overflow-x:auto here
   (not just in the <860px media query below) so an outlier-wide row
   scrolls inside the table on desktop too, instead of overflowing the
   page. */
.researchers-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
}

.researchers-table th,
.researchers-table td {
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: var(--border-width) solid var(--color-border);
    font-size: 0.88rem;
}

/* Same rationale as .data-table's first-child rule (components.css): keep
   the identity column (Email/Nazwa) from being squeezed to near-nothing
   by an outlier-long value while short badge/date columns keep their
   natural width. */
.researchers-table th:first-child,
.researchers-table td:first-child {
    min-width: 14rem;
    overflow-wrap: break-word;
}

.researchers-table th {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.researchers-table tbody tr {
    transition: background-color var(--motion-fast) var(--motion-ease);
}

.researchers-table tbody tr:hover {
    background: var(--color-surface-sunken);
}

.researchers-table tbody tr:last-child td {
    border-bottom: none;
}

.researchers-actions a {
    margin-right: var(--space-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary-text);
}

.researchers-actions a:hover {
    text-decoration: underline;
}

/* Status pill - alias of .status-badge, kept for the list pages using the
   original boolean active/inactive/pending vocabulary. */
.researchers-status {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
}

.researchers-status--active {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.researchers-status--inactive {
    background: var(--color-neutral-bg);
    color: var(--color-neutral-text);
}

.researchers-status--pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.researchers-muted {
    /* v0.33 Stage C (C3): helper text on dozens of pages - was the decorative "faint" token (2.2:1). */
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.org-tree-card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    box-shadow: var(--shadow-xs);
}

.org-tree,
.org-tree ul {
    list-style: none;
    margin: 0;
    padding-left: var(--space-lg);
}

.org-tree {
    padding-left: 0;
}

.org-tree ul {
    border-left: 1px dashed var(--color-border-strong);
    margin-left: 0.65rem;
}

.org-tree li {
    margin: 0.15rem 0;
}

.org-tree__node {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-xs);
    /* v0.33 Stage C (C1): a long unit name wraps inside the tree instead of leaving a 320 px screen. */
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-md);
    transition: background-color var(--motion-fast) var(--motion-ease);
}

.org-tree__node:hover {
    background: var(--color-surface-sunken);
}

/* align-items was "center" - fine when every flex item is one line, but
   a long unit name wraps to 2-3 lines on narrow widths while the icon
   stays one line, so "center" centered the icon against the whole
   wrapped block instead of its first line. flex-start (+ a small
   top-nudge below to match the text's cap-height) fixes that. Tried
   flex-wrap:wrap alongside this too, expecting it to let (type)/inactive
   drop to their own line - instead it made the browser wrap the <a> item
   itself onto its own flex line, separating it from the icon entirely
   (worse than the bug it was meant to fix), so it was reverted; nowrap
   keeps icon+link+type+status as one flex line and lets each item's own
   text wrap internally, which is what flex-start was written for. */
.org-tree__node-icon {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

.org-tree__node a {
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-primary);
}

.org-tree__node a:hover {
    text-decoration: underline;
    color: var(--color-primary-text);
}

.org-tree__node-type {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 400;
}

.org-tree__node--inactive a {
    color: var(--color-text-muted);
    font-weight: 400;
}

.researcher-form {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 48rem;
    box-shadow: var(--shadow-xs);
}

.researcher-form h3 {
    margin: var(--space-lg) 0 0.75rem;
    font-size: 0.95rem;
}

.researcher-form__grid {
    display: grid;
    /* v0.33 Stage C (C1, AUDIT-UX-002): minmax(0, 1fr), not 1fr (= minmax(auto, 1fr)) - with "auto" the column was at least as wide as the longest
       <select> option in it (1022 px on /struktura/nowa). Same fix as .form-grid and DATA-QUALITY-SCOPE-SELECT-OVERFLOW-001. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.researcher-form__grid label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    font-size: var(--text-label-size);
    font-weight: 600;
    color: var(--color-text-primary);
}

.researcher-form__grid input {
    padding: 0 0.7rem;
    height: var(--control-h-md);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 400;
}

.researcher-form__field-error {
    color: var(--color-danger-solid);
    font-size: 0.78rem;
    font-weight: 600;
}

/* v0.33 Stage C (C3, AUDIT-A11Y-002): an error is not shown by colour alone - the message starts with a warning sign (decorative for screen readers,
   which read aria-describedby) and the invalid field gets a thicker border. */
.researcher-form__field-error:not(:empty)::before {
    content: "\26A0\FE0E\00A0" / "";
}

[aria-invalid="true"] {
    border-color: var(--color-danger-solid) !important;
    border-width: 2px !important;
}

.researcher-form__password-row {
    display: flex;
    gap: var(--space-xs);
    align-items: stretch;
}

.researcher-form__password-row input {
    flex: 1;
}

.password-toggle-button {
    padding: 0 var(--space-sm);
    height: var(--control-h-md);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.password-toggle-button:hover {
    background: var(--color-surface-sunken);
}

.researcher-form__caps-lock-warning {
    color: var(--color-warning-text);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0.35rem 0 0;
}

/* MFA QR enrollment (SEC-AUTH-001-QR). Fixed white background regardless of
   page theme - a QR code needs strong light/dark module contrast to scan
   reliably, independent of whatever color scheme the surrounding page uses. */
.mfa-qr-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 220px;
    margin: var(--space-sm) 0;
    padding: 0.9rem;
    background: #ffffff;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-sizing: border-box;
}

.mfa-qr-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.researcher-detail__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.researcher-detail__add-identifier-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

.researcher-detail__add-identifier-row select,
.researcher-detail__add-identifier-row input[type="text"] {
    padding: 0 0.65rem;
    height: var(--control-h-md);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: 0.88rem;
}

.researcher-detail__add-identifier-row input[type="text"] {
    flex: 1;
    min-width: 14rem;
}

/* ==========================================================================
   Login card - shared by every page under LoginLayout (Login, ForgotPassword,
   ResetPassword, ForcedPasswordChange, MfaChallenge, ForcedMfaSetup). Kept
   global rather than in a single page's scoped .razor.css, since Blazor CSS
   isolation only applies a component's scoped styles to markup that
   component itself renders.
   ========================================================================== */

.login-card {
    width: 100%;
    max-width: 25rem;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 2.25rem;
    box-sizing: border-box;
    box-shadow: var(--shadow-hero);
}

.login-card__brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.login-card__mark {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.login-card__brand h1 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text-primary);
}

.login-card__brand p {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.login-card__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.login-card__form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    font-size: var(--text-label-size);
    font-weight: 600;
    color: var(--color-text-primary);
}

.login-card__form input {
    padding: 0 0.75rem;
    height: var(--control-h-lg);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 400;
}

.login-card__form button {
    margin-top: var(--space-2xs);
    height: var(--control-h-lg);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}

.login-card__form button:hover {
    background: var(--color-primary-hover);
}

.login-card__form button:active {
    transform: translateY(1px);
}

/* v0.30.0-rc1 (AUTH-ENTRA-SSO-001): the Microsoft sign-in button follows Microsoft's own light-theme button guidance (white, grey outline, dark-grey text, the four-square mark) and
   deliberately does NOT take the institution's brand colours: it must stay recognisably "Microsoft" and keep its contrast (#5e5e5e on white = 6.9:1) whatever the branding is. */
.login-card__separator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.login-card__separator::before,
.login-card__separator::after {
    content: "";
    flex: 1;
    border-top: var(--border-width) solid var(--color-border);
}

.login-card__microsoft {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: var(--space-md);
    min-height: 2.6rem;
    padding: 0 1rem;
    background: #ffffff;
    border: 1px solid #8c8c8c;
    border-radius: var(--radius-md);
    color: #5e5e5e;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.login-card__microsoft:hover {
    background: #f3f3f3;
}

.login-card__microsoft:focus-visible {
    outline: 3px solid var(--color-focus-ring, #1f4fd8);
    outline-offset: 2px;
}

.login-card__footer {
    margin-top: var(--space-md);
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Module landing pages (UX-INFORMATION-ARCHITECTURE-001): entry page for a
   business area (Dyscypliny, Miejsca publikacji) with local sub-navigation
   and short summary cards linking into each subsection. Global rather than
   scoped .razor.css because <ModuleLocalNav>/<SecondaryActionsMenu> render
   ChildContent authored in each caller page - Blazor CSS isolation only
   scopes rules to markup literally written in the owning component's own
   file, so a scoped rule here would silently never match that content.
   ========================================================================== */

.module-local-nav {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    margin-bottom: var(--space-lg);
    padding-bottom: 1px;
    border-bottom: var(--border-width) solid var(--color-border);
}

.module-local-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

.module-local-nav__link:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
}

.module-local-nav__link.active {
    color: var(--color-primary-text);
    border-bottom-color: var(--color-primary);
}

.module-landing__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.module-landing__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}

.module-landing__card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.module-landing__card h3 {
    margin: 0;
    font-size: 1rem;
}

.module-landing__card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.module-landing__secondary {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--color-border);
}

.module-landing__secondary a {
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: var(--space-md);
}

/* RC10 (UX-CLEANUP-0.15.0-RC10): "current classification" hero card on
   /dyscypliny - deliberately visually heavier than .module-landing__card
   (border + slight tint, not just a plain list item) so the active
   classification reads as the primary answer to "what applies right now",
   with the historical/secondary cards below it clearly demoted. */
.current-classification-card {
    background: var(--color-primary-subtle);
    border: var(--border-width) solid var(--color-primary-subtle-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-md);
}

.current-classification-card__eyebrow {
    margin: 0 0 0.25rem;
    font-size: var(--text-caption-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--text-caption-tracking);
    color: var(--color-primary-text);
}

.current-classification-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.current-classification-card__meta {
    margin: 0.5rem 0 1rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Status filter bar (UX-INFORMATION-ARCHITECTURE-POLISH-001): a second,
   visually distinct level below <ModuleLocalNav> on pages like
   /miejsca-publikacji/strony-internetowe. ModuleLocalNav changes the
   sub-module (a real navigation - different page, different URL); this
   filters records within the current page (same URL, same tabpanel set).
   Deliberately not styled like .module-local-nav (underlined tabs) or
   .researchers-button (solid primary action) so the two levels never read
   as "the same kind of control" - a compact segmented/pill group instead. */
.status-filter-section {
    margin: var(--space-xs) 0 var(--space-lg);
}

.status-filter-section__label {
    margin: 0 0 0.6rem;
    font-size: var(--text-caption-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--text-caption-tracking);
    color: var(--color-text-muted);
}

.status-filter-bar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.3rem;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-full);
}

.status-filter {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}

.status-filter:hover {
    background: rgba(59, 79, 214, 0.08);
}

.status-filter--active {
    background: var(--color-surface);
    color: var(--color-primary-text);
    box-shadow: var(--shadow-xs);
}

/* Native <details>/<summary> secondary-actions menu: keyboard toggling and
   focus handling come from the browser for free, so there is no custom JS
   and no risk of a focus trap (WCAG 2.1.2). Alias of .dropdown-menu. */
.secondary-actions-menu {
    position: relative;
    display: inline-block;
}

.secondary-actions-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0 var(--space-md);
    height: var(--control-h-md);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    list-style: none;
}

.secondary-actions-menu__toggle::-webkit-details-marker {
    display: none;
}

.secondary-actions-menu__toggle:hover {
    background: var(--color-surface-sunken);
}

.secondary-actions-menu[open] .secondary-actions-menu__toggle {
    background: var(--color-surface-sunken);
}

.secondary-actions-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-width: 14rem;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2xs);
    box-shadow: var(--shadow-md);
}

.secondary-actions-menu__panel a,
.secondary-actions-menu__panel button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-primary);
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.secondary-actions-menu__panel a:hover,
.secondary-actions-menu__panel button:hover {
    background: var(--color-surface-sunken);
}

/* ==========================================================================
   Mobile layout (UX-INFORMATION-ARCHITECTURE-001) - no horizontal page
   overflow, touch-sized primary actions, and tables that scroll inside their
   own row instead of forcing the whole page to scroll sideways.
   ========================================================================== */

@media (max-width: 860px) {
    .researchers-table,
    .data-table-wrap {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* .form-grid (components.css) already collapses to 1 column below
       860px - this legacy twin (12 pages: Researcher/Publication/User/
       Discipline/OrganizationalUnit create+edit, ...) was missing the
       same rule, causing the right-hand column of every 2-col form to be
       clipped off the right edge of the viewport on mobile. */
    .researcher-form__grid {
        grid-template-columns: 1fr;
    }

    .page-header__actions {
        width: 100%;
    }

    .page-header__actions .researchers-button,
    .page-header__actions .btn,
    .page-header__actions .secondary-actions-menu,
    .page-header__actions .dropdown-menu,
    .page-header__actions .secondary-actions-menu__toggle,
    .page-header__actions .dropdown-menu__toggle {
        width: 100%;
        justify-content: center;
    }

    .researchers-button,
    .researchers-button--secondary,
    .secondary-actions-menu__toggle {
        min-height: var(--control-touch-min);
    }

    /* UX-INFORMATION-ARCHITECTURE-POLISH-001: below 860px, .module-local-nav
       used overflow-x:auto + white-space:nowrap, which clipped the last tab
       (e.g. "Strony internetowe" read as "Strony intern...") instead of
       truncating it visibly with an ellipsis - the text just ran past the
       visible edge of the scrollable strip. Wrapping onto additional rows
       keeps every label fully readable without any horizontal scroll and
       without shrinking the font. */
    .module-local-nav {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .module-local-nav__link {
        white-space: normal;
        text-align: center;
    }

    .tabs__link {
        white-space: normal;
        text-align: center;
    }

    .status-filter {
        min-height: var(--control-touch-min);
    }

    /* .researcher-detail__grid's max-content/1fr two-column layout can push
       the value column past the viewport edge on narrow phones once the
       label column (max-content) claims enough width - found via real
       375px browser acceptance (PublicationDetails/ResearcherDetails).
       Stacked label-above-value avoids the horizontal overflow entirely. */
    .researcher-detail__grid {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }

    .researcher-detail__grid dt {
        margin-top: 0.5rem;
    }

    .researcher-detail__grid dt:first-child {
        margin-top: 0;
    }

    .entity-header-strip {
        gap: 0.4rem var(--space-sm);
    }
}