/* The look of harness/_uiux.md on top of MudBlazor. MudBlazor provides the
   component styles, the palette in Theming/AppTheme colours them; this file
   only adds what a palette cannot express - hairlines instead of shadows,
   the gold bar of the active entry, the focus ring, motion.

   No colour value appears here: every colour is a custom property, either
   --mud-palette-* (the palette) or --marek-* (Theming/AppTheme.CssVariables,
   rendered into the page head). No web fonts, no CDNs. */

html, body {
    font-family: var(--mud-typography-default-family);
    background-color: var(--marek-ground);
    color: var(--marek-gold-soft);
}

/* --- Surfaces: depth from brightness and a hairline, never a shadow ------- */

.mud-appbar {
    border-bottom: 1px solid var(--marek-line-strong);
}

.mud-drawer {
    border-inline-end: 1px solid var(--marek-line-strong);
}

.mud-paper-outlined {
    border-color: var(--marek-line-strong);
}

.mud-dialog {
    background-color: var(--marek-raised);
    border: 1px solid var(--marek-line-strong);
}

.mud-dialog .mud-dialog-title {
    color: var(--marek-gold);
}

.mud-popover.mud-popover-open {
    background-color: var(--marek-raised);
    border: 1px solid var(--marek-line-strong);
}

/* --- Header ---------------------------------------------------------------- */

.marek-mark {
    display: block;
    height: 32px;
    width: auto;
}

.marek-apptitle {
    color: var(--marek-gold);
}

/* --- Navigation: the active entry carries a gold bar at its edge ---------- */

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover {
    background-color: var(--marek-gold-active);
    box-shadow: inset 2px 0 0 var(--marek-gold);
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) {
    color: var(--marek-gold-bright);
}

/* --- Tables ---------------------------------------------------------------- */

.mud-table-root .mud-table-head .mud-table-cell {
    color: var(--marek-gold-muted);
    font-size: var(--mud-typography-body2-size);
    font-weight: var(--mud-typography-body2-weight);
}

/* Small icons, but a click target of at least 40 x 40 px. */
.mud-table .mud-icon-button {
    min-width: 40px;
    min-height: 40px;
}

/* Holds the place of an icon button a row does not offer, so that the
   buttons of all rows stay in one column. */
.marek-iconbutton-placeholder {
    display: inline-block;
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

/* --- Buttons: hover means brighter gold, never darker --------------------- */

.mud-button-text-primary:hover,
.mud-button-outlined-primary:hover,
.mud-button-text-inherit:hover,
.mud-icon-button:not(.mud-error-text):hover {
    color: var(--marek-gold-bright);
}

.mud-button-outlined-primary {
    border-color: var(--marek-gold);
}

.mud-button-root:disabled,
.mud-button-root.mud-disabled {
    cursor: default;
}

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

/* The outlined field shows its focus on its own border, 2 px in bright gold -
   the ring below would sit inside that border and is replaced by it. */
.mud-input.mud-input-outlined:focus-within:not(.mud-input-error) .mud-input-outlined-border {
    border-color: var(--marek-gold-bright);
    border-width: 2px;
}

.mud-input-slot:focus,
.mud-input-slot:focus-visible {
    outline: none;
}

/* --- Focus: 2 px solid bright gold, 2 px away - never removed ------------- */

/* MudBlazor switches the outline off for buttons and links; this puts it back
   for every operable element, for keyboard and pointer alike. */
a:focus,
a:focus-visible,
button:focus,
[role="button"]:focus,
[role="menuitem"]:focus,
summary:focus,
[tabindex]:not([tabindex="-1"]):focus,
.mud-nav-link:focus,
.mud-button-root:focus {
    outline: 2px solid var(--marek-gold-bright);
    outline-offset: 2px;
}

/* The page heading is not operable. Blazor focuses it after navigation for
   screen readers; a keyboard user still sees the ring (:focus-visible). */
h1:focus:not(:focus-visible) {
    outline: none;
}

/* --- Motion: 150 ms ease-out, and none at all when asked for ------------- */

.mud-button-root,
.mud-nav-link,
.mud-table-row,
.mud-input-outlined-border {
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Sign in page ---------------------------------------------------------- */

.marek-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.marek-login-mark {
    display: block;
    width: 160px;
    height: auto;
    margin: 0 auto;
}

/* The language selector of the sign in page (Components/Account/LanguageMenu):
   a <details> element, since that page has no circuit to open a MudMenu.
   Looks and behaves like the selector in the app bar. */

.marek-login-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.marek-langmenu {
    position: relative;
}

.marek-langmenu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 8px 6px 12px;
    border-radius: 4px;
    color: var(--marek-gold);
    cursor: pointer;
    font-size: var(--mud-typography-button-size);
    font-weight: var(--mud-typography-button-weight);
    letter-spacing: var(--mud-typography-button-letterspacing);
    text-transform: uppercase;
    transition: color 150ms ease-out, background-color 150ms ease-out;
}

.marek-langmenu > summary::-webkit-details-marker {
    display: none;
}

.marek-langmenu > summary:hover {
    color: var(--marek-gold-bright);
    background-color: var(--marek-gold-hover);
}

.marek-langmenu[open] .marek-langmenu-arrow {
    transform: rotate(180deg);
}

.marek-langmenu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 180px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background-color: var(--marek-raised);
    border: 1px solid var(--marek-line-strong);
    border-radius: 4px;
}

.marek-langmenu-list a,
.marek-langmenu-list [aria-current] {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 16px;
    color: var(--marek-gold-soft);
    text-decoration: none;
}

.marek-langmenu-list a:hover {
    color: var(--marek-gold-bright);
    background-color: var(--marek-gold-hover);
}

/* The current language, like the disabled entry of the app bar menu. */
.marek-langmenu-list [aria-current] {
    color: var(--marek-gold-dim);
    cursor: default;
}

.marek-langmenu-list a:focus {
    outline-offset: -2px;
}

/* --- Text ------------------------------------------------------------------ */

.marek-prose {
    max-width: 80ch;
}

.blazor-error-boundary {
    background: var(--marek-raised);
    border: 1px solid var(--marek-error);
    color: var(--marek-error);
    padding: 1rem;
}