/*
 * fleet-id — components that are genuinely this app's own: the fleet health
 * dashboard, per-app health cards, and the Jahresrückblick widget. Everything
 * general lives in shared/ui and theme.css. Reference tokens, never raw values.
 */

/* ── Small shared bits ─────────────────────────────────────────────────── */

.sub { color: var(--muted); font-size: 0.85rem; }
.muted { color: var(--muted); }

.section { margin-top: 1.75rem; }
.section:first-of-type { margin-top: 0; }
.section-title {
    margin: 0 0 0.9rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* Maps semantic meaning onto shared/ui's `.badge` --badge-accent hook. */
.badge-success { --badge-accent: var(--pos); }
.badge-danger { --badge-accent: var(--neg); }
.badge-warning { --badge-accent: var(--warn); }
.badge-muted { --badge-accent: var(--muted); }
.badge-sm { padding: 0.05rem 0.3rem; font-size: 0.7rem; min-width: 0; white-space: nowrap; }
.badge .ui-icon { font-size: 0.85em; margin-right: 0.15em; }

/* ── fleet dashboard: section head and roll-up tally ───────────────────── */

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.fleet-tally {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin: 0;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.tally { color: var(--muted); }
.tally-up { color: var(--pos); font-weight: 600; }
.tally-down { color: var(--neg); font-weight: 600; }

/* ── fleet dashboard: needs-attention strip ────────────────────────────── */

/* Absent when the fleet is clean — an empty warning box reads as a problem of its own. */
.attention {
    margin-bottom: var(--gap-grid);
    padding: 0.9rem 1rem 1rem;
    background: var(--card);
    border: 1px solid var(--neg);
    border-left-width: 3px;
    border-radius: var(--r-m);
    box-shadow: var(--shadow-1);
}
.attention-title {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neg);
}
.attention-list { margin: 0; padding: 0; list-style: none; }

.attention-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
}
.attention-row:first-child { border-top: 0; }
.attention-row .app-icon { margin-bottom: 0; }
.attention-name { font-weight: 600; min-width: 9rem; }
.attention-reason { color: var(--text-2); font-size: 0.85rem; }
.attention-facts { color: var(--muted); font-size: 0.78rem; }
.attention-link { margin-left: auto; font-size: 0.82rem; white-space: nowrap; }
.attention-link .ui-icon { margin-left: 0.3em; font-size: 0.85em; }

/* ── fleet dashboard: healthy app tiles ────────────────────────────────── */

.healthy-title {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.healthy-title .sub { font-weight: 400; letter-spacing: 0; }

/* A tile shows its checks as chips; the detail behind a failing one lives on the attention rows. */
.app-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--gap-tight);
}
.app-tile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    color: inherit;
    text-decoration: none;
}
.app-tile:hover { border-color: var(--primary); }
.app-tile-facts {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.app-tile .app-icon,
.app-tile .badge { margin-bottom: 0; flex: none; }
.app-tile-name {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── fleet dashboard: fleet-id's own status, one line ──────────────────── */

/* Deliberately not a tile grid — fleet-id is one app among eight. */
.self-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.7rem 0.9rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    font-size: 0.85rem;
}
.self-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.self-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* An app with no base URL configured — present in the fleet but not on SSO. */
.card-muted { opacity: 0.62; }

/* ── Landing page: launcher ────────────────────────────────────────────── */

/* Each tile sets only --app-hue; its colours derive from the root tokens at
   that hue, as shared/ui's .palette-app does. Overriding --hue here would do
   nothing, because the tokens are computed at :root. */
.launcher {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
    gap: var(--gap-tight);
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}
.launcher > li { display: flex; min-width: 0; }

.launcher-tile {
    --app-hue: var(--hue);
    --tile-accent: oklch(from var(--primary) l c var(--app-hue));
    container-type: inline-size;
    flex: 1 1 auto;
    min-width: 0;
    background:
        linear-gradient(160deg, oklch(from var(--primary-soft) l c var(--app-hue)), transparent 70%),
        var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-1);
    color: var(--text);
    text-decoration: none;
}
.launcher-tile:hover { border-color: var(--tile-accent); }
.launcher-tile:focus-visible { outline-color: var(--tile-accent); }

.launcher-tile-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "mark here" "name name" "desc desc";
    align-items: start;
    align-content: start;
    gap: 0.35rem 0.75rem;
    height: 100%;
    padding: 1rem 1.1rem 1.1rem;
}

.launcher-mark {
    grid-area: mark;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.55rem;
    border-radius: var(--r-m);
    background: var(--tile-accent);
    color: var(--on-primary);
    font-size: 1.3rem;
}

.launcher-name {
    grid-area: name;
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
}
.launcher-desc {
    grid-area: desc;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.4;
}
.launcher-here {
    grid-area: here;
    justify-self: end;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: oklch(from var(--primary-soft) l c var(--app-hue));
    color: oklch(from var(--primary-ink) l c var(--app-hue));
    font-size: 0.72rem;
    font-weight: 600;
}

/* An app the user holds no grant for: shown, but greyed out and not a link. */
.launcher-tile-locked {
    --tile-accent: var(--muted);
    background: var(--card);
    box-shadow: none;
    color: var(--muted);
}
.launcher-tile-locked:hover { border-color: var(--border); }
.launcher-tile-locked .launcher-mark {
    background: var(--card-2);
    color: var(--muted);
}
.launcher-no-access {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--card-2);
    color: var(--muted);
}

/* A full-width tile (one column) turns into a row: mark beside the name. */
@container (width >= 22rem) {
    .launcher-tile-body {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "mark name here" "mark desc desc";
        align-items: center;
        gap: 0.1rem 0.9rem;
        padding: 0.85rem 1rem;
    }
    .launcher-mark { margin-bottom: 0; }
    .launcher-name { font-size: var(--step-1); }
}

/* Open attention items, counted on the tile and listed in the strip above the launcher. */
.launcher-count {
    grid-area: here;
    justify-self: end;
    min-width: 1.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--warn) 22%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.launcher-attention { margin-top: 1.25rem; }
.launcher-attention .attention-chip { --app-hue: var(--hue); }
.attention-app {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: oklch(from var(--primary-ink) l c var(--app-hue));
    font-weight: 600;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Each app's name in its own headline face; the font files load on this page only. */
.launcher-tile[data-face="archivo"] .launcher-name { font-family: "Archivo", var(--font-body); }
.launcher-tile[data-face="bricolage-grotesque"] .launcher-name { font-family: "Bricolage Grotesque", var(--font-body); }
.launcher-tile[data-face="geist"] .launcher-name { font-family: "Geist", var(--font-body); }
.launcher-tile[data-face="ibm-plex-sans"] .launcher-name { font-family: "IBM Plex Sans", var(--font-body); }
.launcher-tile[data-face="outfit"] .launcher-name { font-family: "Outfit", var(--font-body); }
.launcher-tile[data-face="sora"] .launcher-name { font-family: "Sora", var(--font-body); }
.launcher-tile[data-face="space-grotesk"] .launcher-name { font-family: "Space Grotesk", var(--font-body); }
.launcher-tile[data-face="zen-kaku-gothic-new"] .launcher-name { font-family: "Zen Kaku Gothic New", var(--font-body); }

.signed-in-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    background: var(--card-2);
    color: var(--muted);
    font-size: 0.85rem;
}

/* ── Landing page: Jahresrückblick (year in review) ────────────────────── */

.card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.card-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--r-s);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: 1.05rem;
}

.jahresrueckblick {
    margin-top: 2rem;
    padding: var(--card-pad-y) var(--card-pad-x);
    border-top: 3px solid var(--primary);
}

.jrb-title { flex: 1; min-width: 0; }
.jrb-years { display: flex; gap: 0.3rem; }
.jrb-years a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-s);
    color: var(--text-2);
    font-size: 0.95rem;
}
.jrb-years a:hover { border-color: var(--primary); color: var(--primary-ink); }

.jahresrueckblick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--gap-tight);
}

.jrb-item {
    --app-hue: var(--hue);
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    color: inherit;
    text-decoration: none;
}
.jrb-item:hover { border-color: oklch(from var(--primary) l c var(--app-hue)); }
.jrb-item:focus-visible { outline-color: oklch(from var(--primary) l c var(--app-hue)); }

.jrb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-m);
    background: oklch(from var(--primary) l c var(--app-hue));
    color: var(--on-primary);
    font-size: 1.2rem;
}

.jrb-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.jrb-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.jrb-value {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    overflow-wrap: break-word;
}
.jrb-meta { font-size: 0.82rem; color: var(--text-2); }

/* Each tile is a frame holding one tile or none. Once loaded it leaves the grid's
   layout to its tile, so an app with nothing that year leaves no gap. */
.jahresrueckblick-grid > .lazy-frame[complete] { display: contents; }
.jrb-loading { flex-direction: column; align-items: stretch; gap: 0; min-height: 4.6rem; }
.jrb-loading:hover, .jrb-no-answer:hover { border-color: var(--border); }
.jrb-no-answer .jrb-icon { background: var(--border-strong); color: var(--muted); }
.jrb-no-answer .jrb-meta { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); }
.jrb-empty { display: none; }
.jahresrueckblick-grid:not(:has(.jrb-item, .lazy-frame-failed)) { display: none; }
.jahresrueckblick-grid:not(:has(.jrb-item, .lazy-frame-failed)) + .jrb-empty { display: block; }

/* ── Calendar portal ────────────────────────────────────────────────────── */

/* Same feed-URL treatment as arbeitszeit's profile page: full-width,
   monospace, read-only. */
.ics-url-row { margin-bottom: 0.75rem; }
.ics-url-input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-s);
    font: 0.83rem/1.4 monospace;
    background: var(--card-2);
    color: var(--text);
    cursor: text;
}

.card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.card-actions + .card-actions { margin-top: 0.75rem; }

.source-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.source-row { display: flex; align-items: center; gap: 0.5rem; }
.source-row input[type="checkbox"] { width: auto; accent-color: var(--primary); }
.source-label { display: inline-flex; align-items: center; gap: 0.4rem; }

/* The individual-feeds list has no checkbox: the label grows and the
   manage-link sits flush right instead. */
li.source-row .source-label { flex: 1 1 auto; }

/* ── Two-factor ─────────────────────────────────────────────────────────── */

/* Stays black on white in the dark theme too: scanners need the contrast. */
.totp-qr svg { display: block; background: #fff; border-radius: var(--r-s); }
/* One unbreakable base32 string, wider than a phone. */
.totp-secret { overflow-wrap: anywhere; }
.recovery-codes { columns: 2; list-style: none; margin: 0 0 1rem; padding: 0; line-height: 1.9; }

/* ── fleet dashboard: /health checks as chips ─────────────────────────── */

.checks { display: inline-flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; }
.check {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
}
.check::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--pos);
}
.check-warn { color: var(--text-2); }
.check-warn::before { background: var(--warn); }
.check-fail { color: var(--neg); }
.check-fail::before { background: var(--neg); }

/* ── Notifications ──────────────────────────────────────────────────────── */

/* A kind sits under its app's switch. */
.source-row-nested { padding-left: 1.6rem; }