/* ============================================================================
   Hub — application shell
   ----------------------------------------------------------------------------
   digitalBricks.css carries the brand: colours, typography, buttons, and the
   whole `.dbks-login__*` block. It has no navigation bar, no page frame and no
   footer, because the gestionnaire gets those from Bootstrap and Hub does not
   use Bootstrap. Only that gap is filled here, and only with the design tokens.
   ========================================================================== */

/* The browser's default body margin, which the gestionnaire never sees because Bootstrap's
   reboot clears it. Without this the dark bar floats inside a white frame. */
body {
    margin: 0;
}

/* digitalBricks.css gives .dbks-btn its brand — colour, radius, weight — but no box: in the
   gestionnaire the padding and the link reset come from Bootstrap. Hub ships no framework,
   so the box is defined here rather than by inventing a second button. */
.dbks-brand .dbks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.dbks-brand .dbks-btn:hover,
.dbks-brand .dbks-btn:focus {
    text-decoration: none;
}

.dbks-brand .dbks-btn--dark:hover,
.dbks-brand .dbks-btn--dark:focus {
    background: var(--dbks-qn-3);
    color: #fff;
}

.hub-nav {
    background: var(--dbks-qn);
    color: var(--dbks-on-dark);
    border-bottom: 1px solid var(--dbks-on-dark-border);
}

.hub-nav__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* The Digital Bricks mark, drawn as on the sign-in panel: the bar is dark too, so the light
   bricks and the signal one carry over without a second palette. */
.hub-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hub-nav__brand svg {
    display: block;
}

.hub-nav__brand span {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
}

.hub-nav__brand em {
    color: var(--dbks-signal-med);
    font-style: normal;
}

.hub-nav__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hub-nav__client {
    font-size: 13px;
    color: var(--dbks-on-dark-2);
}

.hub-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 32px 80px;
}

.hub-page h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    font-size: clamp(28px, 3vw, 38px);
    margin: 10px 0 12px;
}

.hub-page p {
    color: var(--dbks-text-2);
}

.hub-entities {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.hub-entities li {
    background: #fff;
    border: 1px solid var(--dbks-border);
    border-radius: var(--dbks-radius);
    padding: 18px 20px;
}

.hub-foot {
    border-top: 1px solid var(--dbks-border);
    background: #fff;
}

.hub-foot__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 32px;
    font-size: 12.5px;
    color: var(--dbks-text-2);
}

/* The demonstration block sits under the sign-in form, in the same visual family. */
.hub-demo {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--dbks-divider);
}

.hub-demo__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dbks-text-2);
    margin-bottom: 10px;
}

.hub-demo button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid var(--dbks-border);
    border-radius: var(--dbks-radius-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--dbks-text);
    cursor: pointer;
}

.hub-demo button:hover {
    border-color: var(--dbks-signal);
    color: var(--dbks-signal-dark);
}

/* Four columns, in the order of the reference mockup: identity, score, evolution, action.
   A flex row wrapped as soon as a city name grew, and dropped the button onto its own line. */
.hub-entities__row {
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) 150px minmax(180px, 1fr) auto;
    align-items: center;
    gap: 20px;
}

.hub-entities__identity strong {
    display: block;
}

.hub-entities__identity span {
    color: var(--dbks-text-2);
    font-size: 14px;
}

.hub-entities__meta {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--dbks-text-2);
}

@media (max-width: 860px) {
    .hub-entities__row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.hub-page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.hub-page__client {
    color: var(--dbks-text-2);
    font-size: 14px;
}

.hub-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hub-pick label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dbks-text-2);
}

.hub-pick select {
    padding: 10px 12px;
    border: 1.5px solid var(--dbks-border);
    border-radius: var(--dbks-radius-sm);
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--dbks-text);
}

.hub-entities__score {
    min-width: 150px;
}

.hub-score {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hub-score small {
    font-size: 13px;
    font-weight: 600;
    color: var(--dbks-text-2);
}

.hub-score--pending {
    font-size: 14px;
    font-weight: 600;
    color: var(--dbks-text-2);
}

.hub-score__bar {
    margin-top: 6px;
    height: 4px;
    border-radius: 2px;
    background: var(--dbks-divider);
    overflow: hidden;
}

.hub-score__bar i {
    display: block;
    height: 100%;
    background: var(--dbks-signal);
}

.hub-entities__evolution {
    min-width: 210px;
}

.hub-delta {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.hub-delta--base {
    background: var(--dbks-divider);
    color: var(--dbks-text-2);
}

.hub-delta--pos {
    background: var(--dbks-positive-pale);
    color: var(--dbks-positive);
}

.hub-delta--neg {
    background: var(--dbks-signal-pale);
    color: var(--dbks-signal-dark);
}

.hub-entities__note {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.55;
}

.hub-page__score {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.hub-page__actions {
    margin-top: 22px;
}

.hub-section {
    margin: 34px 0 4px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hub-section__lede {
    margin-bottom: 14px;
}

.hub-audits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.hub-audits__row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 110px auto;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--dbks-border);
    border-radius: var(--dbks-radius);
    padding: 14px 18px;
}

.hub-audits__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--dbks-signal-pale);
    color: var(--dbks-signal-dark);
    font-size: 11.5px;
    font-weight: 700;
}

.hub-audits__score {
    font-size: 18px;
    font-weight: 800;
}

.hub-audits__score small {
    font-size: 12px;
    font-weight: 600;
    color: var(--dbks-text-2);
}

@media (max-width: 860px) {
    .hub-audits__row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* The sentence that explains a session sent back to the sign-in screen: informative, not a
   failure, so it wears the amber of the design system rather than the signal colour. */
.hub-notice {
    margin: 0 0 18px;
    padding: 10px 12px;
    background: var(--dbks-amber-pale);
    border-left: 3px solid var(--dbks-amber);
    border-radius: var(--dbks-radius-sm);
    font-size: 13px;
    color: var(--dbks-amber-dark);
}

/* Error pages: the same page frame as the rest of Hub, so a client who lands on one is still
   in the client area, with the navigation bar and a way out, rather than on a bare page. */
.hub-error {
    max-width: 640px;
}

.hub-error__message {
    font-size: 15px;
    line-height: 1.6;
}

.hub-error__actions {
    margin-top: 26px;
}

/* An impersonated session, said loudly: the point is that nobody mistakes it for a client
   signing in, so it takes the full width above the page rather than a word in the bar. */
.hub-impersonation {
    margin: 0;
    padding: 12px 32px;
    background: var(--dbks-signal);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

.hub-impersonation a {
    color: #fff;
    margin-left: 10px;
    text-decoration: underline;
}