/* The team's admin page (web/admin.js), on the homepage's espresso shell
   like the rest of the signed-in app (styles/app-dark.css): ivory and sand
   type, hairline cards, glass buttons. */
.admin-page {
    min-width: 0;
    overflow-x: clip;
    background: #0c0d0c;
    color: #efe6d6;
}

.admin-workspace {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 64px;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 250, 240, 0.12);
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(199, 146, 79, 0.14), transparent 60%),
        #1b1815;
}

/* The homepage's eyebrow. */
.admin-eyebrow {
    margin: 0 0 6px;
    color: #dfc79f;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-header h1 {
    margin: 0;
    color: #fffaf0;
    font-size: 28px;
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.admin-header-actions { display: flex; align-items: center; gap: 12px; }
.admin-read-at { color: #b9aa92; font-size: 13px; }

.admin-button {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 250, 240, 0.16);
    border-radius: 999px;
    background: rgba(255, 250, 240, 0.06);
    color: #fffaf0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 100ms ease, background-color 180ms ease, border-color 180ms ease;
}

.admin-button:hover:not(:disabled) { border-color: rgba(255, 250, 240, 0.3); background: rgba(255, 250, 240, 0.1); }
.admin-button:disabled { opacity: .55; cursor: default; }
.admin-button:active:not(:disabled) { transform: scale(0.97); }
.admin-button:focus-visible { outline: 2px solid #dfc79f; outline-offset: 3px; }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
    margin-top: 18px;
}

.admin-card {
    min-width: 0;
    padding: 20px 22px 22px;
    border: 1px solid rgba(255, 250, 240, 0.12);
    border-radius: 18px;
    background: #1b1815;
}

.admin-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #fffaf0; font-size: 17px; font-weight: 800; }
.admin-card h2 i { color: #dfc79f; }

.admin-card h3 {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 8px;
    color: #dfc79f;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-card h3 span { color: #b9aa92; font-weight: 700; letter-spacing: 0; text-transform: none; }

.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-stats.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }

.admin-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 250, 240, 0.08);
    border-radius: 14px;
    background: rgba(255, 250, 240, 0.035);
}

.admin-stat-value { color: #fffaf0; font-size: 24px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.admin-stat-label { color: #efe6d6; font-size: 12px; font-weight: 700; line-height: 1.3; }
.admin-stat-note { color: #b9aa92; font-size: 12px; line-height: 1.35; }

.admin-chart { margin: 16px 0 0; }

.admin-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 72px;
    padding: 6px;
    border-radius: 12px;
    background: rgba(255, 250, 240, 0.035);
}

.admin-bar { flex: 1; min-height: 2px; height: var(--h); border-radius: 3px 3px 0 0; background: #dfc79f; opacity: .85; }
.admin-chart figcaption { margin-top: 6px; color: #b9aa92; font-size: 12px; }

.admin-checks,
.admin-fresh,
.admin-integrations,
.admin-builds,
.admin-bugs { margin: 0; padding: 0; list-style: none; }

.admin-checks li,
.admin-fresh li,
.admin-builds li,
.admin-integrations li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 250, 240, 0.08);
    color: #efe6d6;
    font-size: 14px;
}

.admin-checks li strong,
.admin-fresh li strong,
.admin-builds li strong { margin-left: auto; color: #fffaf0; text-align: right; }

.admin-fresh li.is-stale strong { color: #e5a65c; }
.admin-integration-name { flex: 1 1 42%; min-width: 0; color: #fffaf0; font-weight: 700; }

.admin-all-integrations { margin-top: 10px; }

.admin-all-integrations summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    color: #dfc79f;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.admin-all-integrations summary:focus-visible { outline: 2px solid #dfc79f; outline-offset: 2px; border-radius: 6px; }

.admin-integration-state {
    display: flex;
    flex: 1 1 58%;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    margin-left: auto;
    color: #efe6d6;
    text-align: right;
}

.admin-integration-state small { color: #b9aa92; font-size: 11px; overflow-wrap: anywhere; }

.admin-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #6b5f52; }
.admin-dot.is-good { background: #3e9e5f; }
.admin-dot.is-warn { background: #d9a03a; }
.admin-dot.is-bad { background: #e2534a; }
.admin-dot.is-neutral { background: #8a99a8; }

.admin-store { margin: 0; color: #efe6d6; font-size: 15px; line-height: 1.5; }
.admin-store a { color: #dfc79f; font-weight: 700; }
.admin-store a:hover { color: #fffaf0; }
.admin-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: #efe6d6; font-size: 13px; }
.admin-card > .admin-button { margin-top: 16px; }

.admin-bugs li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid rgba(255, 250, 240, 0.08); }
.admin-bugs li strong { color: #fffaf0; overflow-wrap: anywhere; }
.admin-bugs li span { color: #b9aa92; font-size: 12px; }
.admin-empty { color: #b9aa92; }

.admin-panel-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: #f07167; font-weight: 700; }
.admin-panel-error button { min-height: 44px; border: 0; background: none; color: #dfc79f; font-weight: 800; text-decoration: underline; cursor: pointer; }
.admin-loading { margin: 24px 4px; color: #b9aa92; }

.admin-locked {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 40px 20px;
    border: 1px solid rgba(255, 250, 240, 0.12);
    border-radius: 18px;
    background: #1b1815;
    color: #efe6d6;
    text-align: center;
}

.admin-locked h2 { margin: 0; color: #fffaf0; font-size: 22px; }

@media (max-width: 860px) {
    .admin-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
    .admin-workspace { padding-top: 16px; }
    .admin-header { flex-direction: column; align-items: flex-start; padding: 16px; }
    .admin-card { padding: 16px; }
    .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}