/* The Alpha Labs shell. Colours come from the MudBlazor theme, which is built from the host's palette,
   so nothing here names one. */

.app-shell .mud-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* What the application is called, between the menu button and the breadcrumb. It is the one fixed thing
   in the bar, so it carries the divider that separates it from the page the breadcrumb names. */
.app-brand {
    flex: none;
    padding-inline-end: 0.75rem;
    margin-inline-start: 0.25rem;
    margin-inline-end: 0.75rem;
    border-inline-end: 1px solid var(--mud-palette-divider);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* The breadcrumb doubles as the page title: the last step is the heading, the steps before it are the
   path that led here. */
.app-breadcrumb {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    margin-inline-start: 0.25rem;
}

.app-breadcrumb-page {
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-breadcrumb-step {
    font-size: 0.9rem;
    color: inherit;
    opacity: 0.75;
    text-decoration: none;
    white-space: nowrap;
}

.app-breadcrumb-step:hover {
    opacity: 1;
    text-decoration: underline;
}

.app-breadcrumb-divider {
    font-size: 0.9rem;
    opacity: 0.5;
}

/* A collapsed rail shows only icons, so the path is hidden rather than wrapped. */
@media (max-width: 640px) {
    .app-breadcrumb-step,
    .app-breadcrumb-divider {
        display: none;
    }
}

.app-user-avatar {
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin-block: 0.6rem;
    margin-inline-start: 0.25rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 18%);
    color: inherit;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1;
    overflow: hidden;
    justify-content: center;
}

.app-user-avatar .mud-button-label,
.app-user-avatar .mud-button-root {
    width: 100%;
    justify-content: center;
    overflow: hidden;
}

.app-user-avatar:hover {
    background: rgb(255 255 255 / 28%);
}

.app-user-menu-head {
    padding: 0.5rem 1rem 0.35rem;
    min-width: 200px;
}

/* Configuration sits at the foot of the drawer, away from the day's work. */
.app-nav {
    box-shadow: 2px 0 6px rgb(0 0 0 / 8%);
}

.app-nav-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app-nav-foot {
    margin-top: auto;
    padding-bottom: 0.5rem;
}

.app-page {
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
}

/* Sign-in and the pages a visitor sees before it. These render without a circuit, so they take their
   colours from custom properties the layout sets rather than from the theme provider. */

.app-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--app-surface);
    color: var(--app-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.app-gate-card {
    width: 100%;
    max-width: 24rem;
    padding: 2rem;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

/* The application's name above the heading, so a visitor knows what they are signing in to. */
.app-gate-brand {
    margin: 0 0 1.25rem;
    color: var(--app-primary);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.app-gate-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.app-gate-sub {
    margin: 0.35rem 0 1.5rem;
    color: var(--app-text-muted);
    font-size: 0.9rem;
}

.app-gate-problem {
    margin: 0 0 1.25rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--app-error);
    border-radius: 6px;
    color: var(--app-error);
    font-size: 0.9rem;
}

.app-field {
    display: block;
    margin-bottom: 1.1rem;
}

.app-field > span {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.app-field input {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    color: inherit;
    background: var(--app-card);
}

.app-field input:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 1px;
}

.app-field .validation-message {
    display: block;
    margin-top: 0.3rem;
    color: var(--app-error);
    font-size: 0.8rem;
}

.app-field-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.app-gate-button {
    width: 100%;
    padding: 0.7rem;
    border: 0;
    border-radius: 6px;
    background: var(--app-primary);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.app-gate-button:hover {
    background: var(--app-primary-dark);
}

/* A menu entry that posts a form, styled to sit among the menu's own items. */
.app-menu-submit-form {
    display: contents;
}

.app-menu-submit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 1rem 0.4rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;
}

.app-menu-submit:hover {
    background: var(--mud-palette-action-default-hover);
}

/* A list's toolbar: search at the start, the list's own actions at the end. */
.app-list-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.app-list-search {
    max-width: 22rem;
}

.app-list-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

@media (max-width: 600px) {
    .app-list-toolbar {
        flex-wrap: wrap;
    }

    .app-list-search {
        max-width: none;
        flex: 1 1 100%;
    }
}

/* The account and recovery pages, which share the gate's card. */
.app-gate-foot {
    margin: 1.1rem 0 0;
    font-size: 0.85rem;
    text-align: center;
    color: var(--app-text-muted);
}

.app-gate-foot a {
    color: var(--app-primary);
}

.app-gate-link-button {
    display: block;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.6rem;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: none;
    color: var(--app-text-muted);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.app-gate-link-button:hover {
    border-color: var(--app-error);
    color: var(--app-error);
}

.app-detail {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.app-detail dt {
    margin-top: 0.85rem;
    font-weight: 600;
}

.app-detail dd {
    margin: 0.15rem 0 0;
    color: var(--app-text-muted);
}

.app-qr {
    display: flex;
    justify-content: center;
    margin: 0 0 1.25rem;
}

.app-qr svg {
    width: 11rem;
    height: 11rem;
}

.app-key {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.25rem 0.45rem;
    border-radius: 4px;
    background: var(--app-surface);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.app-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem 1rem;
    margin: 0 0 1.5rem;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    list-style: none;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9rem;
}

/* A record page: what it is, what can be done to it, then the record itself. */
.app-record-head {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.app-record-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.app-record-sub {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.3rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

.app-record-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .app-record-head {
        flex-wrap: wrap;
    }

    .app-record-actions {
        margin-inline-start: 0;
        width: 100%;
    }
}

.app-list-edit {
    width: 3rem;
    text-align: end;
}

/* The edit pane. Depth 1 carries the overlay; a child pane leaves its parent visible and nudges it left
   so the stack is readable. */
.app-blade-root {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1400;
}

.app-blade-overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 32%);
    pointer-events: auto;
}

.app-blade {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: 100%;
    background: var(--mud-palette-surface);
    border-inline-start: 1px solid var(--mud-palette-divider);
    box-shadow: -2px 0 12px rgb(0 0 0 / 12%);
    transform: translateX(100%);
    transition: transform 180ms ease;
    pointer-events: auto;
}

.app-blade-open .app-blade {
    transform: translateX(0);
}

.app-blade-open .app-blade.app-blade-peeking {
    transform: translateX(-52px);
}

.app-blade-depth-1 { z-index: 1400; }
.app-blade-depth-2 { z-index: 1410; }
.app-blade-depth-3 { z-index: 1420; }

.app-blade-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.app-blade-titles {
    min-width: 0;
}

.app-blade-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.app-blade-subtitle {
    margin: 0.15rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

.app-blade-head .mud-icon-button {
    margin-inline-start: auto;
}

.app-blade-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.app-blade-foot {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--mud-palette-divider);
}

.app-blade-foot > * {
    flex: 1;
}


/* A record's read-only fields, in two columns where there is room. */
.app-record-fields {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.6rem 1.5rem;
    margin: 0;
    font-size: 0.92rem;
}

.app-record-fields dt {
    font-weight: 600;
}

.app-record-fields dd {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .app-record-fields {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .app-record-fields dt {
        margin-top: 0.7rem;
    }
}

/* The arrow half of a split button is a menu rather than a button, so it is stretched to the group's
   own height instead of sitting on its own baseline. */
.app-split {
    display: inline-flex;
    align-items: stretch;
    line-height: 0;
}

.app-split > .mud-button-root {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.app-split > .mud-menu {
    display: flex;
}

.app-split > .mud-menu > .mud-button-root {
    min-width: 2.25rem;
    padding-inline: 0.35rem;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start: 1px solid rgb(255 255 255 / 25%);
}

/* The client's mark sits above the links, sized to the drawer rather than to itself. */
.app-nav-brand {
    display: block;
    padding: 1rem 1rem 0.75rem;
}

.app-nav-brand img {
    display: block;
    width: 8rem;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}