/* apotools-header.css — shared header chrome for every ApoTools
   frontend (ALT, accounts, uniformitytool, …), used together with the
   `apotools-ui::AppHeader`/`UserMenu` Leptos components. Copied as a
   static asset into each app's own `public/` (same pattern as the
   shared favicon) since this workspace has no build-time asset-sync
   step. Self-contained custom properties under `.au-header` so this
   file never depends on — or collides with — a host app's own `:root`
   palette. Values ported from ALT's original Tailwind header classes
   (`bg-alt-dark`, `shadow-card`, `h-14`, …). */

.au-header {
    --au-primary-dark: #0D47A1;
    --au-primary: #1565C0;
    --au-border: #BBDEFB;
    --au-text: #1A2B3E;
    --au-bg-pale: #EEF4FD;
    --au-shadow: 0 2px 10px rgba(21, 101, 192, .12);

    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--au-primary-dark);
    color: #fff;
    box-shadow: var(--au-shadow);
}

.au-header-inner {
    position: relative;
    height: 56px;
    padding: 0 .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
@media (min-width: 768px) {
    .au-header-inner { padding: 0 .75rem; gap: .75rem; }
}

.au-header-left {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 1;
    min-width: 0;
}

.au-brand {
    display: none;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .025em;
    margin-right: .5rem;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (min-width: 640px) {
    .au-brand { display: block; }
}
@media (min-width: 768px) {
    .au-brand { font-size: 1.125rem; }
}

/* Absolutely centred on the header, only shown once there's room on
   either side for the left/right groups to not collide with it. */
.au-title {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .025em;
    white-space: nowrap;
    pointer-events: none;
}
@media (min-width: 900px) {
    .au-title { display: block; }
}

.au-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}

/* ─── User menu ─────────────────────────────────────────────────── */

.au-user-wrap {
    position: relative;
    margin-left: .25rem;
    padding-left: .5rem;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

.au-backdrop {
    position: fixed;
    inset: 0;
}

.au-user-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .5rem;
    border-radius: .375rem;
    border: none;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease;
}
.au-user-btn:hover,
.au-user-btn-open {
    background: rgba(255, 255, 255, .20);
}

.au-username {
    display: none;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .au-username { display: inline; }
}

.au-admin-pill {
    display: inline-block;
    padding: .0625rem .375rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .6875rem;
    font-weight: 600;
}

.au-icon { opacity: .9; flex-shrink: 0; }

.au-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 6px;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--au-border);
    border-radius: .5rem;
    box-shadow: var(--au-shadow);
    overflow: hidden;
    z-index: 20;
}

.au-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--au-text);
    background: none;
    border: none;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}
.au-menu-item:hover {
    background: var(--au-bg-pale);
}

.au-icon-primary { color: var(--au-primary); }