/* Verwaltung: Schlüssel, Bewohner:innen, Einstellungen (review fixes round 2).
   Loaded after pages.css. Board references: 1f (Schlüssel, Bewohner:innen), 1h (Einstellungen). */

/* ── Schlüssel list (1f): grouped by type, title = where now, sub = what's next ── */
.key-group { display: flex; flex-direction: column; gap: 6px; }
.key-group__title { font: 600 15px/1.3 var(--font-sans); color: var(--text-2); padding: 0 4px; }
.key-item {
    display: flex; align-items: center; gap: 14px;
    min-height: 64px;
    padding: 12px 12px 12px 16px;
    color: var(--text-1); text-decoration: none;
}
.key-item:hover { background: var(--surface-hover); color: var(--text-1); }
.key-item__tile {
    min-width: 40px; height: 40px; padding: 0 6px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--olk-ink); color: var(--olk-white);
    font: 600 15px/1 var(--font-mono);
}
.key-item__tile--guest { background: var(--olk-red); }
.key-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.key-item__where { font: 600 16px/1.3 var(--font-sans); overflow-wrap: anywhere; }
.key-item__next { font: 400 14px/1.3 var(--font-sans); color: var(--text-2); }
.key-item__chev { color: var(--text-3); }

/* Schlüssel detail: the same where / next texts in the stacked units */
.key-state .unit__value { font: 600 18px/1.3 var(--font-sans); white-space: normal; overflow-wrap: anywhere; }
.key-state .unit__sub { font: 400 14px/1.35 var(--font-sans); color: var(--text-2); }

/* ── Bewohner:innen (1f) ───────────────────────────────────────────────────
   Phone: avatar | name + sub | pencil, with badge + action (44px) on a second line.
   Desktop: everything on one line, the action as a dense sm button. */
.ur {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas: "av main edit" ". trail trail";
    column-gap: 14px;
    align-items: center;
    padding: 12px 12px 12px 16px;
}
.ur__avatar {
    grid-area: av;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken); color: var(--text-1);
    font: 600 14px/1 var(--font-mono);
}
.ur__main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ur__name { font: 600 16px/1.3 var(--font-sans); overflow-wrap: anywhere; }
.ur__sub { font: 400 14px/1.3 var(--font-sans); color: var(--text-2); }
.ur__trail { grid-area: trail; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ur__form { margin: 0; display: flex; }
/* Ghost button's label lines up with the text above when it starts the line */
.ur__trail > .ur__form:first-child .ur__act { margin-left: -14px; }
.ur__edit { grid-area: edit; }
.ur.is-inactive .ur__avatar,
.ur.is-inactive .ur__main { opacity: .6; }

@media (min-width: 720px) {
    .ur {
        grid-template-columns: 36px minmax(0, 1fr) auto auto;
        grid-template-areas: "av main trail edit";
    }
    .ur__trail { margin-top: 0; flex-wrap: nowrap; justify-content: flex-end; }
    .ur__trail > .ur__form:first-child .ur__act { margin-left: 0; }
    .ur__act { height: var(--control-sm); padding: 0 10px; font-size: 15px; gap: 6px; }
}

/* ── Einstellungen: sticky save bar (1h) ──────────────────────────────────
   Phone: above the bottom tab bar, count on top and the two buttons below (no room for one line).
   ≥ 480px: one line. Desktop: at the bottom of the viewport. */
.set-savebar {
    position: fixed; left: 0; right: 0; z-index: 39;
    bottom: calc(64px + env(safe-area-inset-bottom));
    background: var(--bg-shell);
    color: var(--text-on-dark-2);
}
.set-savebar__inner {
    max-width: 600px; margin: 0 auto;
    padding: 12px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.set-savebar__count { font: 400 15px/1.3 var(--font-sans); }
.set-savebar__actions { display: flex; gap: 8px; }
.set-savebar__actions .olk-btn { flex: 1 1 0; }
.set-savebar .olk-btn--ghost { color: var(--text-on-dark); }
.set-savebar .olk-btn--ghost:hover:not(:disabled) { background: var(--surface-hover-dark); }
.set-savebar .olk-btn:focus-visible { outline-color: var(--olk-paper); }

/* Keep the page's last field and the toasts clear of the bar */
body.has-savebar { --savebar-h: 96px; }
body.has-savebar .shell-main { padding-bottom: calc(64px + var(--savebar-h) + env(safe-area-inset-bottom) + 24px); }
body.has-savebar .toast-region { bottom: calc(64px + var(--savebar-h) + env(safe-area-inset-bottom) + 12px); }

@media (min-width: 480px) {
    body.has-savebar { --savebar-h: 68px; }
    .set-savebar__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
    .set-savebar__actions .olk-btn { flex: none; }
}
@media (min-width: 720px) {
    .set-savebar { bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
    /* Same width as the pg--narrow cards above it */
    .set-savebar__inner { max-width: calc(600px + 2 * var(--page-margin)); padding: 12px var(--page-margin); }
    body.has-savebar .shell-main { padding-bottom: calc(48px + var(--savebar-h) + env(safe-area-inset-bottom)); }
    body.has-savebar .toast-region { bottom: calc(var(--savebar-h) + env(safe-area-inset-bottom) + 24px); }
}