/*
 * fleet-id — components that are genuinely this app's own.
 *
 * Everything general lives in shared/ui (tokens.css + system.css) and the token
 * overrides in theme.css; everything here is a shape the design system does not
 * have — the fleet health dashboard, the per-app health cards, and the
 * Jahresrückblick widget on the landing page. The one hard rule carries over:
 * reference tokens, never raw values.
 *
 * fleet-id started life with token overrides only ("owns the credential and
 * nothing else"), but it has since grown a fleet dashboard, a user roster, a
 * docs portal and a year-in-review — the point theme.css flagged as the signal
 * to add an app.css. This is that file, and it matches how every sibling app
 * keeps its component layer.
 */

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

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

/* A labelled band of the page (e.g. "fleet-id Self", "Fleet Apps"). The title
   reads as a quiet section marker rather than competing with the page <h1>. */
.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);
}

/* Action cluster in a `.page-head` (mirrors shared/ui's `.actions`). */
.page-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Status badges. shared/ui's `.badge` takes its colour from `--badge-accent`
   and defaults to muted; these map the semantic meanings onto the semantic
   tokens, the same mechanism concerts uses for its concert/festival badges. */
.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; }
.badge .bi { font-size: 0.85em; vertical-align: -0.05em; margin-right: 0.15em; }

/* ── fleet dashboard: self-health stat tiles ───────────────────────────── */

/* A dense row of single figures — status of the app's own moving parts. Denser
   than shared/ui's `.cards`; every tile is one label over one value or badge. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--gap-tight);
}
.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 0.95rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-1);
}
.stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
/* A tile whose figure is a badge or a scrap of mono text still wants the badge
   to sit at the tile's natural line height rather than stretching. */
.stat-tile .badge { align-self: flex-start; }

/* ── fleet dashboard: per-app health cards ─────────────────────────────── */

/* Top row of a per-app card: the app's accent icon on the left, its up/down
   badge on the right. */
.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.card .app-icon { margin-bottom: 0; }

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

/* The little key/value ledger under a card's title. Overrides shared/ui's
   default two-column `dl` grid: here each row is its own flex line. */
.health-details {
    display: block;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
}
.health-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
}
.health-row dt {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.health-row dd { margin: 0; text-align: right; color: var(--text-2); }

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

/* Card header shared by the widget: an accent-tinted icon chip beside a
   display-face title, ruled off from the body below. */
.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 .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--r-s);
    background: var(--accent-soft);
    color: var(--accent-on-soft);
    font-size: 1.05rem;
}

/* A little more breathing room than a plain `.card` — this is a showpiece, not
   a form well — plus a hairline accent at the top edge to set it apart from the
   app cards above without shouting. */
.jahresrueckblick {
    margin-top: 2rem;
    padding: var(--card-pad-y) var(--card-pad-x);
    border-top: 3px solid var(--accent);
}

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

.jrb-item {
    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);
}

.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: var(--accent-soft);
    color: var(--accent-on-soft);
    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); }