/* ----------------------------------------------------------------------------
   Design tokens now live in wwwroot/css/tokens.css — the single source of
   truth for colour, type, spacing, radius and elevation. Do not reintroduce a
   :root block here.

   The Google Fonts @import that used to sit at the top of this file is gone:
   the type system is now a system sans stack for UI plus a mono face for
   numerals, keys and labels (--g-font-ui / --g-font-data). That removes a
   render-blocking third-party request on every page load.
   ---------------------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--g-font-ui);
    color: var(--g-text);
    background: var(--g-bg);
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: var(--g-font-ui);
    letter-spacing: -0.02em;
}

/* Digits line up wherever they stack: tables, KPI values, quantities. */
table,
.mono,
[class*="-value"],
[class*="-count"] {
    font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

a {
    color: inherit;
}

.g-shell .g-btn,
.g-shell .dashboard-refresh,
.g-shell .dashboard-retry,
.g-shell .activity-error button,
.g-shell .g-collapse,
.g-shell .g-topbar-toggle,
.g-shell .g-topbar-bell {
    cursor: pointer;
}


.est-detail-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: var(--g-surface);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-1);
    margin-bottom: 24px;
}

.est-detail-hero h1 {
    margin: 0 0 8px;
}

.est-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: var(--g-text-muted);
    font-size: 0.95rem;
}

.meta-pill {
    background: var(--g-surface-2);
    border-radius: 999px;
    padding: 4px 12px;
    border: 1px solid var(--g-border);
    color: var(--g-text);
    font-size: 0.85rem;
}

.meta-muted {
    color: var(--g-text-muted);
}

.est-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.est-detail-actions button,
.est-detail-actions a,
.row-actions button {
    border: 1px solid var(--g-border);
    background: var(--g-surface-2);
    padding: 10px 14px;
    border-radius: var(--g-radius-sm);
    font-weight: 600;
    color: var(--g-text);
    text-decoration: none;
}

.est-detail-actions a.primary {
    background: var(--g-accent);
    color: #fff;
    border-color: transparent;
}

.est-detail-actions .ghost,
.row-actions .ghost {
    background: transparent;
}

.est-detail-loading,
.est-detail-error {
    padding: 24px;
    background: var(--g-surface);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-1);
}

.tab-panel {
    background: var(--g-surface);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-1);
    padding: 18px;
}

.tab-panel-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--g-border);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.tab-panel-button {
    border: 1px solid var(--g-border);
    background: var(--g-surface-2);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    color: var(--g-text-muted);
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.tab-panel-button.is-active {
    color: var(--g-text);
    background: #fff;
    border-color: var(--g-accent);
    box-shadow: 0 6px 12px rgba(10, 127, 232, 0.18);
}

.tab-panel-badge {
    background: var(--g-accent-soft);
    color: #11213d;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
}

.tab-panel-body {
    display: block;
}

/* The .status-badge rules that lived here are gone: StatusBadge now renders
   the .g-chip primitive. Its Tone API (success/info/warning/danger/neutral) is
   unchanged, so no call site moved. */

.est-detail-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.overview-card {
    background: var(--g-surface-2);
    border-radius: var(--g-radius-md);
    padding: 18px;
    border: 1px solid var(--g-border);
}

.overview-card h2 {
    margin-top: 0;
}

.overview-grid {
    display: grid;
    gap: 12px;
    font-size: 0.95rem;
}

.overview-label {
    display: block;
    color: var(--g-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.overview-logo {
    margin-top: 16px;
    padding: 12px;
    border-radius: var(--g-radius-sm);
    background: #fff;
    border: 1px solid var(--g-border);
    display: inline-flex;
}

.overview-logo img {
    max-width: 120px;
    max-height: 120px;
}

.stats-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.stat-tile {
    background: #fff;
    border-radius: var(--g-radius-sm);
    padding: 12px;
    border: 1px dashed var(--g-border);
}

.stat-label {
    display: block;
    color: var(--g-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
}

.tab-section {
    display: grid;
    gap: 16px;
}

.tab-error {
    background: rgba(185, 28, 28, 0.08);
    border: 1px solid rgba(185, 28, 28, 0.2);
    padding: 12px;
    border-radius: var(--g-radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-timeline {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    gap: 12px;
}

.activity-timeline li {
    padding: 12px;
    border-radius: var(--g-radius-sm);
    background: var(--g-surface-2);
    border: 1px solid var(--g-border);
    display: grid;
    grid-template-columns: 140px 1fr 1fr;
    gap: 12px;
    align-items: center;
}

.timeline-date {
    font-size: 0.85rem;
    color: var(--g-text-muted);
}

.timeline-action {
    font-weight: 600;
}

.timeline-entity {
    color: var(--g-text-muted);
}

.mono {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}

.download-hero {
    align-items: center;
}

.release-meta {
    margin-top: 16px;
    display: flex;
    gap: 16px;
    font-weight: 600;
    color: var(--g-text-muted);
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.download-card {
    background: var(--g-surface);
    border-radius: var(--g-radius-md);
    padding: 18px;
    border: 1px solid var(--g-border);
    box-shadow: var(--g-shadow-1);
    color: var(--g-text);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-card h3 {
    margin: 0;
    color: var(--g-text);
}

.download-card p {
    margin: 0;
    color: var(--g-text-muted);
}

.download-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.download-card.is-recommended {
    border-color: var(--g-accent);
    box-shadow: 0 16px 30px rgba(10, 127, 232, 0.2);
}

.download-pill {
    background: var(--g-accent);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.download-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.download-muted {
    color: var(--g-text-muted);
    font-size: 0.9rem;
}

.download-error,
.download-empty {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--g-radius-sm);
    background: var(--g-surface);
    border: 1px dashed var(--g-border);
    color: var(--g-text);
}

.download-notes {
    background: var(--g-surface);
    border-radius: var(--g-radius-md);
    padding: 18px;
    border: 1px solid var(--g-border);
    box-shadow: var(--g-shadow-1);
    color: var(--g-text);
}

.download-notes p,
.download-notes li {
    color: var(--g-text-muted);
}

.download-notes ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.releases-hero,
.release-upload-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--g-surface);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-1);
    margin-bottom: 24px;
}

.releases-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.releases-actions .primary,
.release-actions .primary {
    background: var(--g-accent);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: var(--g-radius-sm);
    font-weight: 600;
}

.releases-actions .ghost,
.release-actions .ghost,
.releases-hero .ghost,
.release-upload-hero .ghost {
    background: var(--g-surface-2);
    border: 1px solid var(--g-border);
    padding: 10px 16px;
    border-radius: var(--g-radius-sm);
    font-weight: 600;
}

.releases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.release-card {
    background: var(--g-surface);
    border-radius: var(--g-radius-lg);
    padding: 18px;
    border: 1px solid var(--g-border);
    box-shadow: var(--g-shadow-1);
    display: grid;
    gap: 14px;
}

.release-card header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.release-meta {
    color: var(--g-text-muted);
    font-size: 0.9rem;
}

.release-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.release-pill {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.release-pill-latest {
    background: var(--g-accent);
    color: #fff;
}

.release-pill-required {
    background: var(--g-accent-soft);
    color: #11213d;
}

.release-notes {
    color: var(--g-text-muted);
    margin: 0;
}

.release-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.release-stats .stat-label {
    display: block;
    color: var(--g-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.release-stats .stat-value {
    font-size: 1.2rem;
    font-weight: 700;
}

.release-assets {
    display: grid;
    gap: 8px;
}

.release-asset {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--g-surface-2);
    padding: 10px 12px;
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border);
}

.release-asset span {
    margin-left: 8px;
    color: var(--g-text-muted);
}

.release-asset-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.release-asset-actions .ghost {
    padding: 6px 10px;
    font-size: 0.85rem;
    border: 1px solid var(--g-border);
    background: #fff;
    border-radius: var(--g-radius-sm);
    text-decoration: none;
}

.download-count {
    background: #fff;
    border: 1px solid var(--g-border);
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.release-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.releases-error,
.release-success {
    padding: 12px 16px;
    border-radius: var(--g-radius-sm);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.releases-error {
    background: rgba(185, 28, 28, 0.08);
    border: 1px solid rgba(185, 28, 28, 0.2);
}

.release-success {
    background: rgba(10, 127, 232, 0.1);
    border: 1px solid rgba(10, 127, 232, 0.2);
}

.releases-empty {
    padding: 20px;
    background: var(--g-surface);
    border-radius: var(--g-radius-md);
    border: 1px dashed var(--g-border);
}

.release-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.release-upload-card {
    background: var(--g-surface);
    border-radius: var(--g-radius-md);
    padding: 18px;
    border: 1px solid var(--g-border);
    box-shadow: var(--g-shadow-1);
    display: grid;
    gap: 12px;
}

.release-upload-card .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.release-upload-card .control-group.full {
    grid-column: 1 / -1;
}

.release-upload-card input,
.release-upload-card select,
.release-upload-card textarea {
    width: 100%;
    padding: 10px;
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border);
    background: #fff;
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.file-summary {
    display: flex;
    justify-content: space-between;
    background: var(--g-surface-2);
    padding: 10px 12px;
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border);
}

@media (max-width: 900px) {
    .est-detail-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .activity-timeline li {
        grid-template-columns: 1fr;
    }

    .releases-hero,
    .release-upload-hero {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Moved from theme-compat.css when that bridge was retired in Phase 05. */
code,
pre {
    background: var(--g-surface-2);
    color: var(--g-text);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-data);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--g-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--g-border);
    border-radius: var(--g-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--g-border-strong);
}

/* Dark mode dims imagery slightly; not expressible as a token swap. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img,
    :root:not([data-theme="light"]) video {
        opacity: 0.92;
    }
}

:root[data-theme="dark"] img,
:root[data-theme="dark"] video {
    opacity: 0.92;
}