/*
 * Component CSS for Home, Suite Administration and Suite Access.
 *
 * Written 2026-09-04 after discovering these three pages' markup references ~40 classes
 * (.metric-icon, .console-layout, .operation-list, .service-status, .attention-summary,
 * .admin-shell, .admin-product-card, .state-pill, .access-shell, .assignment-panel, and others)
 * that did not exist in ANY loaded stylesheet — not "styled with the wrong palette", genuinely
 * absent, rendering on browser defaults. This file is that missing layer, written directly against
 * the token system (dense direction, Inter/Space Grotesk) rather than the raw hex the surrounding
 * files still carry — CP-30 will bring those files up to the same standard; this file starts there.
 */

/* ------------------------------------------------------------------------------- shells & heroes */

/* .admin-shell / .access-shell carry no rule of their own now — the vertical rhythm they gave is
   handled once, universally, by .suite-shell (site.css), which every page's <main> already carries
   alongside these page-specific modifiers. Two definitions of the same gap is exactly the kind of
   duplication CP-39/CP-42 kept finding; this one is caught before it ships rather than after. */

.compact-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cp-space-4);
}

.compact-hero h1 {
    margin: 4px 0 6px;
    font: 700 1.6rem var(--cp-font-display);
    letter-spacing: -0.02em;
    color: var(--cp-text-primary);
}

.compact-hero p {
    margin: 0;
    max-width: 56ch;
    color: var(--cp-text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.quiet-link {
    flex: 0 0 auto;
    color: var(--cp-text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.quiet-link:hover {
    color: var(--cp-text-primary);
}

.suite-alert {
    margin: 0;
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-radius-sm);
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

.suite-alert.success {
    border-color: var(--cp-success-border);
    background: var(--cp-success-soft);
    color: var(--cp-success);
}

.suite-alert.error {
    border-color: var(--cp-danger-border);
    background: var(--cp-danger-soft);
    color: var(--cp-danger);
}

.empty-products {
    display: grid;
    gap: 4px;
    justify-items: start;
    border: 1px dashed var(--cp-border-strong);
    border-radius: var(--cp-radius-md);
    padding: var(--cp-space-5);
    background: var(--cp-surface-page);
    color: var(--cp-text-secondary);
    font-size: 0.8rem;
}

.empty-products strong {
    color: var(--cp-text-primary);
    font-size: 0.86rem;
}

/* -------------------------------------------------------------------------------------- Home page */

.console-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cp-space-4);
    flex-wrap: wrap;
}

.console-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--cp-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.console-breadcrumb i {
    font-size: 0.6rem;
}

.console-header h1 {
    margin: 0 0 4px;
    font: 700 1.6rem var(--cp-font-display);
    letter-spacing: -0.02em;
    color: var(--cp-text-primary);
}

.console-header > div > p {
    margin: 0;
    max-width: 56ch;
    color: var(--cp-text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.console-header-actions {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    flex-wrap: wrap;
}

/* Soft-fill status chip — the same "translucent tint" treatment reviewed from the design
   reference (2026-09-04): a semantic-coloured background at low opacity with full-strength text,
   rather than a solid fill. Genuinely richer than a flat pill without abandoning the dense sizing. */
.authority-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--cp-radius-pill);
    padding: 6px 12px;
    background: var(--cp-success-soft);
    color: var(--cp-success);
    font-size: 0.72rem;
    font-weight: 700;
}

.authority-chip span:first-child {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.context-badge,
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--cp-radius-pill);
    padding: 5px 10px;
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.live-badge {
    background: var(--cp-success-soft);
    color: var(--cp-success);
}

.live-badge span:first-child {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.header-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--cp-space-4);
}

.metric-grid > article {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-radius-md);
    padding: var(--cp-space-4);
    background: var(--cp-surface-raised);
    box-shadow: var(--cp-shadow-sm);
}

.metric-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--cp-radius-sm);
    font-size: 1rem;
}

/* Four fixed roles, not four arbitrary colours: blue = identity, mint = product/commercial,
   amber = attention/awaiting, violet = access/permissions. Consistent with the semantic intent
   tokens elsewhere — accent/success/warning share their colour, .violet is the one deliberate
   addition (see --suite-violet in site.css) because access has no existing semantic token. */
.metric-icon.blue {
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
}

.metric-icon.mint {
    background: var(--cp-success-soft);
    color: var(--cp-success);
}

.metric-icon.amber {
    background: var(--cp-warning-soft);
    color: var(--cp-warning);
}

.metric-icon.violet {
    background: rgba(111, 82, 199, 0.12);
    color: var(--suite-violet);
}

.metric-grid > article > div {
    display: grid;
    line-height: 1.3;
}

.metric-grid span {
    color: var(--cp-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.metric-grid strong {
    font: 700 1.35rem var(--cp-font-display);
    color: var(--cp-text-primary);
}

.metric-grid small {
    color: var(--cp-text-muted);
    font-size: 0.68rem;
}

.console-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--cp-space-4);
    align-items: start;
}

@media (max-width: 880px) {
    .console-layout {
        grid-template-columns: 1fr;
    }
}

.console-panel {
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-radius-md);
    padding: var(--cp-space-4);
    background: var(--cp-surface-raised);
    box-shadow: var(--cp-shadow-sm);
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cp-space-3);
    margin-bottom: var(--cp-space-4);
}

.panel-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--cp-text-muted);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.panel-heading h2 {
    margin: 0;
    font: 700 1.05rem var(--cp-font-display);
    color: var(--cp-text-primary);
}

.operation-list {
    display: grid;
    gap: 2px;
}

.operation-list a {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    border-radius: var(--cp-radius-sm);
    padding: 10px 8px;
    color: inherit;
    text-decoration: none;
    transition: background var(--cp-transition-fast);
}

.operation-list a:hover {
    background: var(--cp-surface-hover);
}

.operation-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface-page);
    color: var(--cp-text-secondary);
}

.operation-list a > span:nth-child(2) {
    display: grid;
    flex: 1 1 auto;
    line-height: 1.3;
}

.operation-list b {
    color: var(--cp-text-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.operation-list small {
    color: var(--cp-text-muted);
    font-size: 0.7rem;
}

.row-count {
    flex: 0 0 auto;
    border-radius: var(--cp-radius-pill);
    padding: 3px 9px;
    background: var(--cp-warning-soft);
    color: var(--cp-warning);
    font-size: 0.66rem;
    font-weight: 700;
}

.operation-list a > i:last-child {
    flex: 0 0 auto;
    color: var(--cp-text-muted);
    font-size: 0.7rem;
}

.status-panel {
    display: grid;
    gap: var(--cp-space-2);
}

.service-status {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    padding: 8px 4px;
}

.service-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface-page);
    color: var(--cp-text-secondary);
    font-size: 0.78rem;
}

.service-status > span {
    display: grid;
    flex: 1 1 auto;
    line-height: 1.3;
}

.service-status b {
    color: var(--cp-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.service-status small {
    color: var(--cp-text-muted);
    font-size: 0.68rem;
}

.service-status em {
    flex: 0 0 auto;
    color: var(--cp-success);
    font-size: 0.68rem;
    font-weight: 700;
    font-style: normal;
}

.attention-summary {
    display: flex;
    align-items: flex-start;
    gap: var(--cp-space-3);
    margin-top: var(--cp-space-3);
    border-top: 1px solid var(--cp-border-subtle);
    padding-top: var(--cp-space-3);
    color: var(--cp-warning);
}

.attention-summary.clear {
    color: var(--cp-success);
}

.attention-summary i {
    margin-top: 2px;
    font-size: 0.9rem;
}

.attention-summary b {
    display: block;
    color: var(--cp-text-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.attention-summary span {
    color: var(--cp-text-muted);
    font-size: 0.72rem;
}

/* ---------------------------------------------------------------------------- state pill (shared) */

/* Used by Suite Administration (product/link state) and Suite Access (role-review product tag). */
.state-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--cp-radius-pill);
    padding: 3px 10px;
    background: var(--cp-surface-page);
    color: var(--cp-text-secondary);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.state-pill.state-enabled {
    background: var(--cp-success-soft);
    color: var(--cp-success);
}

.state-pill.state-suspended {
    background: var(--cp-warning-soft);
    color: var(--cp-warning);
}

.state-pill.state-cancelled {
    background: var(--cp-danger-soft);
    color: var(--cp-danger);
}

.state-pill.state-reactivationpending {
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
}

.state-pill.state-off {
    background: var(--cp-surface-page);
    color: var(--cp-text-muted);
}

/* ------------------------------------------------------------------------------ Suite Administration */

.review-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cp-space-3);
    margin-bottom: var(--cp-space-4);
}

.review-heading h2 {
    margin: 0;
    font: 700 1.05rem var(--cp-font-display);
    color: var(--cp-text-primary);
}

.review-heading > span {
    flex: 0 0 auto;
    color: var(--cp-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--cp-space-3);
    align-items: center;
    margin-bottom: var(--cp-space-3);
}

.comparison-grid > article {
    display: grid;
    gap: 3px;
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-radius-sm);
    padding: var(--cp-space-3);
    background: var(--cp-surface-page);
}

.comparison-grid small {
    color: var(--cp-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-grid strong {
    font-size: 0.9rem;
    color: var(--cp-text-primary);
}

.comparison-grid article > span {
    color: var(--cp-text-muted);
    font-size: 0.68rem;
}

.link-symbol {
    display: grid;
    place-items: center;
    color: var(--cp-text-muted);
    font-size: 1.1rem;
}

.fact-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-space-4);
    margin: 0 0 var(--cp-space-4);
    color: var(--cp-text-muted);
    font-size: 0.72rem;
}

.fact-row b {
    color: var(--cp-text-primary);
}

.review-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cp-space-3);
}

.review-actions > a {
    color: var(--cp-text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
}

.review-actions > a:hover {
    color: var(--cp-text-primary);
}

.admin-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--cp-space-4);
}

.admin-product-card {
    display: grid;
    gap: var(--cp-space-4);
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-radius-md);
    padding: var(--cp-space-4);
    background: var(--cp-surface-raised);
    box-shadow: var(--cp-shadow-sm);
}

.admin-product-head {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
}

.product-mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
    font: 700 0.95rem var(--cp-font-display);
}

/* CMS is warm/mint (charging = energy), RMS is cool/blue (monitoring = signal) — the same two
   product identities already used on the login page's icon mark and submit button. */
.admin-product-card.rms .product-mark {
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
}

.admin-product-card.cms .product-mark {
    background: var(--cp-success-soft);
    color: var(--cp-success);
}

.admin-product-head > div {
    display: grid;
    flex: 1 1 auto;
    line-height: 1.3;
}

.admin-product-head small {
    color: var(--cp-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.admin-product-head h3 {
    margin: 2px 0 0;
    font: 700 0.95rem var(--cp-font-display);
    color: var(--cp-text-primary);
}

.admin-subsection {
    display: grid;
    gap: var(--cp-space-2);
    border-top: 1px solid var(--cp-border-subtle);
    padding-top: var(--cp-space-3);
}

.subsection-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cp-space-3);
}

.subsection-title b {
    color: var(--cp-text-primary);
    font-size: 0.78rem;
}

.subsection-title span {
    color: var(--cp-text-muted);
    font-size: 0.7rem;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-space-2);
}

.inline-note {
    margin: 0;
    color: var(--cp-text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.link-form {
    display: grid;
    gap: var(--cp-space-2);
}

.link-form label {
    display: grid;
    gap: 4px;
    color: var(--cp-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

.link-summary {
    display: grid;
    gap: 2px;
}

.link-summary strong {
    color: var(--cp-success);
    font-size: 0.8rem;
}

.link-summary small {
    color: var(--cp-text-muted);
    font-size: 0.68rem;
}

.admin-product-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-3);
    border-top: 1px solid var(--cp-border-subtle);
    padding-top: var(--cp-space-3);
    color: var(--cp-text-muted);
    font-size: 0.7rem;
}

.admin-product-card footer a {
    color: var(--cp-accent);
    font-weight: 600;
    text-decoration: none;
}

.admin-product-card footer a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------------------------ Suite Access */

.assignment-panel .assignment-form {
    display: grid;
    gap: var(--cp-space-3);
}

.assignment-panel .assignment-form label {
    display: grid;
    gap: 4px;
    color: var(--cp-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

.access-empty {
    display: grid;
    justify-items: start;
    gap: 6px;
    border: 1px dashed var(--cp-border-strong);
    border-radius: var(--cp-radius-md);
    padding: var(--cp-space-5);
    color: var(--cp-text-secondary);
}

.access-empty i {
    color: var(--cp-text-muted);
    font-size: 1.1rem;
}

.access-empty b {
    color: var(--cp-text-primary);
    font-size: 0.84rem;
}

.access-empty span {
    color: var(--cp-text-muted);
    font-size: 0.76rem;
}