/*
Project Prometheus INC02.03.02
Branding safety correction.

Principle:
- Product-owner surfaces keep the Crucible/The Solver Group UI variables from prometheus.css.
- Database branding writes only --brand-* tokens, not core app variables such as --text or --graphite.
- Company-specific colours are applied only to customer/company portal surfaces.
*/
.portal-brand-surface {
    color: inherit;
}

.portal-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.portal-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.portal-brand-logo-img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.portal-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.05;
}

.portal-brand-name {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    color: inherit;
    white-space: nowrap;
}

.portal-brand-tagline {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    margin-top: 4px;
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand-accent-soft, var(--text-ondark-dim));
    white-space: nowrap;
}

.nav .brand .portal-brand-lockup,
.nav .brand .portal-brand-name {
    color: #fff;
}

.nav .brand .portal-brand-mark svg,
.side .brand .portal-brand-mark svg {
    width: 42px;
    height: 42px;
}

.nav .brand .portal-brand-name {
    font-size: 1rem;
}

.side .brand .portal-brand-lockup {
    color: var(--bone);
}

.side .brand .portal-brand-name {
    font-size: .96rem;
}

.side .brand .portal-brand-tagline {
    color: var(--gold-soft);
    font-size: .56rem;
}

.staff-login-brand-surface .lock-emblem .portal-brand-lockup {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.staff-login-brand-surface .lock-emblem .portal-brand-mark svg,
.staff-login-brand-surface .lock-emblem .portal-brand-logo-img {
    width: 42px;
    height: 42px;
}

.staff-login-brand-surface .topbar a.status {
    pointer-events: none;
}

/*
Product-owner surfaces: lock contrast back to the base Crucible palette.
The DB profile may change logo/name/tagline/accent tokens, but must not turn the
staff admin text dark on a dark shell.
*/
.public-brand-surface,
.staff-login-brand-surface,
.staff-admin-brand-surface {
    color: inherit;
}

.admin-console-shell.staff-admin-brand-surface {
    background: var(--obsidian);
    color: var(--text-ondark);
}

.admin-console-shell.staff-admin-brand-surface .side {
    background: #0f0d09;
    color: var(--text-ondark);
}

.admin-console-shell.staff-admin-brand-surface .main,
.admin-console-shell.staff-admin-brand-surface .top,
.admin-console-shell.staff-admin-brand-surface .content,
.admin-console-shell.staff-admin-brand-surface .panel,
.admin-console-shell.staff-admin-brand-surface .kpi {
    color: var(--text-ondark);
}

.admin-console-shell.staff-admin-brand-surface .ph h1,
.admin-console-shell.staff-admin-brand-surface .ph2 .t,
.admin-console-shell.staff-admin-brand-surface .top h2,
.admin-console-shell.staff-admin-brand-surface .cust .cn,
.admin-console-shell.staff-admin-brand-surface .fr .fn,
.admin-console-shell.staff-admin-brand-surface .summary-line,
.admin-console-shell.staff-admin-brand-surface th,
.admin-console-shell.staff-admin-brand-surface td {
    color: var(--bone);
}

.admin-console-shell.staff-admin-brand-surface .ph p,
.admin-console-shell.staff-admin-brand-surface .kpi .l,
.admin-console-shell.staff-admin-brand-surface .cust .ci,
.admin-console-shell.staff-admin-brand-surface .fr .fd,
.admin-console-shell.staff-admin-brand-surface .rowact,
.admin-console-shell.staff-admin-brand-surface .panel .ph2 .mono {
    color: var(--text-ondark-dim);
}

/*
Customer/company portal surfaces: these are the only surfaces where company
corporate colours should influence the UI background and card palette.
*/
.customer-brand-surface {
    --customer-bg: var(--brand-background, var(--sand));
    --customer-surface: var(--brand-surface, var(--bone));
    --customer-panel: var(--brand-panel, #fff);
    --customer-text: var(--brand-text, var(--ink));
    --customer-muted: var(--brand-muted, var(--text-soft));
    --customer-line: var(--brand-line, var(--line));
    --customer-accent: var(--brand-accent, var(--gold));
    --customer-accent-soft: var(--brand-accent-soft, var(--gold-soft));
    --customer-primary: var(--brand-primary, var(--obsidian));
    --customer-on-dark: var(--brand-on-dark, var(--bone));
}

.customer-dashboard-shell.customer-brand-surface {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--customer-bg) 92%, transparent), color-mix(in srgb, var(--customer-surface) 88%, transparent)),
        var(--brand-background-image, none),
        var(--customer-bg);
    background-size: cover;
    background-position: center;
    color: var(--customer-text);
}

.customer-brand-surface.customer-side,
.customer-side.customer-brand-surface {
    background: var(--customer-primary);
    color: var(--customer-on-dark);
}

.customer-side.customer-brand-surface .brand .portal-brand-lockup,
.customer-side.customer-brand-surface .brand .portal-brand-name {
    color: var(--customer-on-dark);
}

.customer-side.customer-brand-surface .brand .portal-brand-tagline,
.customer-side.customer-brand-surface .navg,
.customer-side.customer-brand-surface .foot {
    color: color-mix(in srgb, var(--customer-on-dark) 68%, transparent);
}

.customer-side.customer-brand-surface .nl {
    color: color-mix(in srgb, var(--customer-on-dark) 70%, transparent);
}

.customer-side.customer-brand-surface .nl:hover,
.customer-side.customer-brand-surface .nl.active {
    color: var(--customer-on-dark);
}

.customer-side.customer-brand-surface .nl.active {
    background: color-mix(in srgb, var(--customer-accent) 22%, transparent);
}

.customer-side.customer-brand-surface .nl.active svg {
    stroke: var(--customer-accent);
}

.customer-brand-surface .customer-main {
    background: var(--customer-bg);
    color: var(--customer-text);
}

.customer-brand-surface .customer-top {
    background: var(--customer-surface);
    border-bottom-color: var(--customer-line);
}

.customer-brand-surface .customer-top .org .n,
.customer-brand-surface .customer-top .user,
.customer-brand-surface .pagehead h1,
.customer-brand-surface .pcard h3,
.customer-brand-surface .panel,
.customer-brand-surface .stat .n,
.customer-brand-surface .readiness-line span:last-child {
    color: var(--customer-text);
}

.customer-brand-surface .customer-top .org .r,
.customer-brand-surface .pagehead p,
.customer-brand-surface .sec-t,
.customer-brand-surface .pcard .ta,
.customer-brand-surface .act .am,
.customer-brand-surface .readiness-line,
.customer-brand-surface .sync-note {
    color: var(--customer-muted);
}

.customer-brand-surface .panel,
.customer-brand-surface .pcard {
    background: var(--customer-panel);
    border-color: var(--customer-line);
}

.customer-brand-surface .stat,
.customer-brand-surface .bar,
.customer-brand-surface .muted-badge {
    background: color-mix(in srgb, var(--customer-surface) 78%, #fff);
}

.customer-brand-surface .active-badge,
.customer-brand-surface .open,
.customer-brand-surface .bar > div,
.customer-brand-surface .act .ad {
    background-color: var(--customer-accent);
    color: var(--brand-button-text, var(--obsidian));
}

.customer-brand-surface .pcard .open {
    background: transparent;
    color: var(--customer-primary);
}

.customer-brand-surface .customer-top .org .av,
.customer-brand-surface .customer-top .user .uav {
    background: var(--customer-primary);
    color: var(--customer-accent);
}

.customer-theme-northstar .active-badge,
.customer-theme-northstar .open,
.customer-theme-northstar .bar > div {
    background-color: var(--customer-accent);
}

@media (max-width: 760px) {
    .nav .brand .portal-brand-tagline {
        display: none;
    }

    .portal-brand-name {
        white-space: normal;
    }
}