html,
body {
    min-height: 100%;
    padding: 0;
    margin: 0;
}

/* Ensure the HTML hidden attribute always overrides component display rules */
[hidden] {
    display: none !important;
}

/* ================================================================
   wa-page overrides
   ================================================================ */

wa-page::part(menu) {
    background-color: var(--wa-color-surface-lowered);
    border-inline-end: var(--wa-border-width-s) solid
        var(--wa-color-surface-border);
}

/* ================================================================
   App Header
   ================================================================ */

.app-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 var(--wa-space-l);
    gap: var(--wa-space-s);
    min-height: var(--wa-space-4xl);
    background-color: var(--wa-color-surface-raised);
    color: var(--wa-color-text-normal);
}

/* --- Brand / Logo --- */

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-s);
    text-decoration: none;
    color: inherit;
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-bold);
    margin-inline-end: var(--wa-space-xs);
    flex-shrink: 0;
    transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
}

.app-brand:hover {
    text-decoration: none;
    opacity: 0.75;
}

.app-brand-logo {
    display: flex;
    align-items: center;
    width: var(--wa-space-xl);
    height: var(--wa-space-xl);
    flex-shrink: 0;
}

.app-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Search trigger --- */

.cmd-trigger {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    flex: 1;
    max-width: 480px;
    height: calc(var(--wa-space-xl) + var(--wa-space-2xs));
    padding: 0 var(--wa-space-s);
    background: var(--wa-color-neutral-fill-quiet);
    border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-quiet);
    border-radius: var(--wa-border-radius-m);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    font-family: var(--wa-font-family-body);
    cursor: pointer;
    transition:
        background-color var(--wa-transition-normal) var(--wa-transition-easing),
        border-color var(--wa-transition-normal) var(--wa-transition-easing);
}

.cmd-trigger:hover {
    background: var(--wa-color-neutral-fill-normal);
    border-color: var(--wa-color-neutral-border-normal);
    color: var(--wa-color-text-normal);
}

.cmd-trigger-label {
    flex: 1;
    text-align: left;
}

.cmd-trigger-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--wa-space-2xs);
    height: var(--wa-space-l);
    background: var(--wa-color-neutral-fill-normal);
    border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-s);
    font-size: var(--wa-font-size-xs);
    font-family: var(--wa-font-family-body);
    line-height: 1;
    flex-shrink: 0;
}

/* --- User area --- */

.app-header-user {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    margin-inline-start: auto;
    flex-shrink: 0;
}

.app-user-name {
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    white-space: nowrap;
}

.app-header-user form {
    margin: 0;
    padding: 0;
}

.app-header-user wa-avatar {
    --size: var(--wa-space-xl);
    flex-shrink: 0;
}

/* ================================================================
   Sidebar navigation
   ================================================================ */

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: var(--wa-space-s);
    gap: var(--wa-space-3xs);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    transition: background-color var(--wa-transition-normal)
        var(--wa-transition-easing);
}

.sidebar-link:hover {
    background-color: var(--wa-color-neutral-fill-quiet);
    color: var(--wa-color-text-normal);
    text-decoration: none;
}

.sidebar-link--active {
    background-color: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}

.sidebar-link--active:hover {
    background-color: var(--wa-color-brand-fill-normal);
}

.sidebar-link wa-icon {
    flex-shrink: 0;
    font-size: var(--wa-font-size-m);
    color: var(--wa-color-text-quiet);
}

.sidebar-link--active wa-icon {
    color: var(--wa-color-brand-on-quiet);
}

/* ================================================================
   Footer
   ================================================================ */

.app-footer {
    width: 100%;
    padding: var(--wa-space-s) var(--wa-space-l);
    background-color: var(--wa-color-surface-raised);
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-s);
    border-block-start: var(--wa-border-width-s) solid
        var(--wa-color-surface-border);
}

/* ================================================================
   Command palette
   ================================================================ */

.cmd-palette {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
}

.cmd-palette[hidden] {
    display: none;
}

.cmd-backdrop {
    position: absolute;
    inset: 0;
    background: var(--wa-color-overlay-modal);
}

.cmd-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    background: var(--wa-color-surface-raised);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    box-shadow: var(--wa-shadow-l);
    overflow: hidden;
    color: var(--wa-color-text-normal);
}

/* Search row */

.cmd-search-row {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s) var(--wa-space-m);
    border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.cmd-search-icon {
    color: var(--wa-color-text-quiet);
    flex-shrink: 0;
    font-size: var(--wa-font-size-l);
}

.cmd-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--wa-font-size-m);
    color: var(--wa-color-text-normal);
    font-family: var(--wa-font-family-body);
}

.cmd-input::placeholder {
    color: var(--wa-color-text-quiet);
}

.cmd-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wa-space-l);
    height: var(--wa-space-l);
    padding: 0;
    border: none;
    border-radius: var(--wa-border-radius-circle);
    background: var(--wa-color-neutral-fill-normal);
    color: var(--wa-color-text-quiet);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--wa-transition-fast) var(--wa-transition-easing);
}

.cmd-clear:hover {
    background: var(--wa-color-neutral-fill-loud);
    color: var(--wa-color-neutral-on-loud);
}

.cmd-clear[hidden] {
    display: none;
}

/* Results */

.cmd-results {
    max-height: 380px;
    overflow-y: auto;
    padding: var(--wa-space-2xs) 0;
}

.cmd-results:empty::after {
    display: none;
}

.cmd-group-label {
    padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-2xs);
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-bold);
    color: var(--wa-color-text-quiet);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cmd-result {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-xs) var(--wa-space-m);
    cursor: pointer;
    transition: background var(--wa-transition-fast) var(--wa-transition-easing);
}

.cmd-result:hover,
.cmd-result.active {
    background: var(--wa-color-neutral-fill-quiet);
}

.cmd-result.active {
    background: var(--wa-color-brand-fill-quiet);
}

.cmd-result--soon {
    cursor: default;
    opacity: 0.6;
}

.cmd-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wa-space-xl);
    height: var(--wa-space-xl);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-neutral-fill-normal);
    color: var(--wa-color-text-quiet);
    flex-shrink: 0;
}

.cmd-result.active .cmd-result-icon {
    background: var(--wa-color-brand-fill-normal);
    color: var(--wa-color-brand-on-normal);
}

.cmd-result-body {
    flex: 1;
    min-width: 0;
}

.cmd-result-title {
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    color: var(--wa-color-text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-result-sub {
    font-size: var(--wa-font-size-xs);
    color: var(--wa-color-text-quiet);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-result-arrow {
    color: var(--wa-color-text-quiet);
    opacity: 0;
    transition: opacity var(--wa-transition-fast) var(--wa-transition-easing);
    flex-shrink: 0;
}

.cmd-result:not(.cmd-result--soon):hover .cmd-result-arrow,
.cmd-result.active .cmd-result-arrow {
    opacity: 1;
}

.cmd-highlight {
    background: transparent;
    color: var(--wa-color-brand-on-quiet);
    font-weight: var(--wa-font-weight-bold);
}

.cmd-coming-soon {
    display: inline-block;
    padding: 0 var(--wa-space-2xs);
    font-size: var(--wa-font-size-3xs);
    font-weight: var(--wa-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--wa-color-neutral-fill-normal);
    color: var(--wa-color-text-quiet);
    border-radius: var(--wa-border-radius-s);
    vertical-align: middle;
}

.cmd-no-results,
.cmd-searching {
    padding: var(--wa-space-xl) var(--wa-space-m);
    text-align: center;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

/* Hints bar */

.cmd-hints {
    display: flex;
    align-items: center;
    gap: var(--wa-space-m);
    padding: var(--wa-space-xs) var(--wa-space-m);
    border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    background: var(--wa-color-surface-lowered);
}

.cmd-hint {
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    font-size: var(--wa-font-size-xs);
    color: var(--wa-color-text-quiet);
}

.cmd-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--wa-space-l);
    height: var(--wa-space-l);
    padding: 0 var(--wa-space-2xs);
    background: var(--wa-color-neutral-fill-normal);
    border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-s);
    font-family: var(--wa-font-family-body);
    font-size: var(--wa-font-size-xs);
    line-height: 1;
}

/* ================================================================
   Components
   ================================================================ */

/* Grouped location picker — prevent the listbox overflowing the viewport */
warehouse-location-combobox wa-combobox::part(listbox) {
    max-height: min(20rem, 50vh);
    overflow-y: auto;
}

wa-card.stock-take-inprogress {
    background-color: var(--wa-color-warning-fill-normal);
    border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-warning-border-normal);
}