/* App Store (Pages/AppStore.razor, Pages/Admin.AppStore.razor): office apps for the Widget and who gets them. */
.as-screen {
    --as-ink: #0f172a;
    --as-text: #1e293b;
    --as-muted: #64748b;
    --as-line: #e2e8f0;
    --as-card: #ffffff;
    --as-blue: #2563eb;
    --as-blue-deep: #1d4ed8;
    --as-blue-soft: #eff6ff;
    --as-green: #047857;
    --as-green-soft: #ecfdf5;
    --as-red: #b91c1c;
    --as-radius: 1rem;
    --as-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .04);
    display: grid;
    gap: 1.1rem;
    max-width: 80rem;
    color: var(--as-text);
}
.as-kicker { display: block; margin: 0; color: var(--as-blue-deep); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.as-intro, .as-state, .as-card, .as-panel { border: 1px solid var(--as-line); border-radius: var(--as-radius); background: var(--as-card); box-shadow: var(--as-shadow); }
.as-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem; }
.as-intro h1 { margin: .35rem 0 .4rem; color: var(--as-ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.as-intro p { max-width: 50rem; margin: 0; color: #475569; font-size: .92rem; line-height: 1.6; }
.as-company { display: grid; gap: .3rem; min-width: min(100%, 16rem); }
.as-company span { color: var(--as-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.as-state { display: grid; gap: .35rem; padding: 1.4rem 1.5rem; color: #475569; }
.as-state strong { color: var(--as-ink); }

.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.as-card { display: grid; align-content: start; gap: .9rem; padding: 1.2rem 1.25rem; min-width: 0; }
.as-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; }
.as-icon { width: 3.5rem; height: 3.5rem; border-radius: .85rem; object-fit: contain; background: #f8fafc; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); }
.as-card-title { min-width: 0; }
.as-card-title h2 { margin: 0; color: var(--as-ink); font-size: 1.05rem; font-weight: 800; }
.as-version { margin: .1rem 0 0; color: var(--as-muted); font-size: .8rem; }
.as-badge { align-self: start; padding: .25rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.as-badge.is-on { background: var(--as-green-soft); color: var(--as-green); }
.as-badge.is-off { background: #f1f5f9; color: var(--as-muted); }
.as-description { margin: 0; color: #475569; font-size: .88rem; line-height: 1.55; }

.as-audience { display: grid; gap: .55rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.as-audience legend { margin-bottom: .45rem; padding: 0; color: var(--as-muted); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.as-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border-radius: .75rem; background: #f1f5f9; }
.as-segment { position: relative; display: flex; justify-content: center; margin: 0; padding: .5rem .4rem; border-radius: .55rem; color: #334155; font-size: .85rem; font-weight: 600; cursor: pointer; text-align: center; }
.as-segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.as-segment input:disabled { cursor: not-allowed; }
.as-segment:has(input:disabled) { color: #94a3b8; }
.as-segment.is-selected { background: var(--as-card); color: var(--as-blue-deep); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.as-segment:has(input:focus-visible) { outline: 2px solid var(--as-blue); outline-offset: 1px; }
.as-hint { margin: 0; color: var(--as-muted); font-size: .8rem; }
.as-departments { display: grid; gap: .15rem; max-height: 14rem; overflow-y: auto; padding: .35rem; border: 1px solid var(--as-line); border-radius: .75rem; }
.as-department { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin: 0; padding: .45rem .55rem; border-radius: .5rem; font-size: .86rem; cursor: pointer; }
.as-department:hover { background: #f8fafc; }
.as-department input { width: 1rem; height: 1rem; accent-color: var(--as-blue); }
.as-department-name { overflow: hidden; color: var(--as-ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.as-department-count { color: var(--as-muted); font-size: .78rem; }

.as-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem 1rem; }
.as-message { flex: 1 1 14rem; margin: 0; font-size: .82rem; line-height: 1.45; }
.as-message.is-ok { color: var(--as-green); }
.as-message.is-error { color: var(--as-red); }
.as-save { min-width: 6.5rem; }

/* Admin: the catalogue and each app's builds. */
.as-admin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 1.1rem; align-items: start; }
.as-stack { display: grid; gap: 1.1rem; min-width: 0; }
.as-upload { display: grid; gap: .75rem; padding: 1rem; border: 1px dashed #cbd5e1; border-radius: .85rem; background: #f8fafc; }
.as-panel { display: grid; gap: .9rem; padding: 1.2rem 1.25rem; min-width: 0; }
.as-panel h2 { margin: 0; color: var(--as-ink); font-size: 1.05rem; font-weight: 800; }
.as-panel p { margin: 0; color: #475569; font-size: .86rem; line-height: 1.55; }
.as-field { display: grid; gap: .3rem; margin: 0; }
.as-field > span { color: #334155; font-size: .8rem; font-weight: 700; }
.as-field small { color: var(--as-muted); font-size: .76rem; }
.as-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.as-check { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .86rem; font-weight: 600; }
.as-check input { width: 1rem; height: 1rem; accent-color: var(--as-blue); }
.as-banner { margin: 0; padding: .75rem 1rem; border: 1px solid; border-radius: .75rem; font-size: .88rem; font-weight: 600; }
.as-banner.is-ok { border-color: #a7f3d0; background: var(--as-green-soft); color: var(--as-green); }
.as-banner.is-error { border-color: #fecaca; background: #fef2f2; color: var(--as-red); }
.as-releases { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.as-release { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem 1rem; padding: .6rem .2rem; border-top: 1px solid var(--as-line); font-size: .84rem; }
.as-release:first-child { border-top: 0; }
.as-release strong { color: var(--as-ink); }
.as-release-meta { grid-column: 1 / -1; color: var(--as-muted); font-size: .76rem; overflow-wrap: anywhere; }
.as-release-notes { grid-column: 1 / -1; color: #475569; font-size: .8rem; white-space: pre-wrap; }
.as-link-button { padding: 0; border: 0; background: none; color: var(--as-blue-deep); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.as-link-button:disabled { color: var(--as-muted); cursor: default; text-decoration: none; }
.as-unlisted { opacity: .7; }

@media (max-width: 960px) {
    .as-admin { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .as-intro, .as-card, .as-panel { padding: 1rem; }
    .as-upload { padding: .8rem; }
    .as-row { grid-template-columns: 1fr; }
    .as-card-head { grid-template-columns: auto minmax(0, 1fr); }
    .as-badge { grid-column: 1 / -1; justify-self: start; }
}