/* ============================================================================
   Document extension badge — "PDF", "DOCX", "XLSX".

   Shared by the documents grid and the activity feed so a file looks the same
   everywhere. The accent (--doc-badge-color) comes from DocumentType and is
   administrator-editable, so background, text and border are all *derived* from
   it rather than stored separately: whatever hue is chosen, the badge stays
   legible and no second colour can be set to something unreadable.
   ========================================================================== */

.doc-badge {
    --doc-badge-color: #5b6472;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    /* Fixed box so a column of badges aligns regardless of extension length. */
    min-width: 38px;
    height: 20px;
    padding: 0 5px;
    border-radius: 3px;

    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    white-space: nowrap;

    background: color-mix(in srgb, var(--doc-badge-color) 13%, #fff);
    color: color-mix(in srgb, var(--doc-badge-color) 82%, #000);
    border: 1px solid color-mix(in srgb, var(--doc-badge-color) 26%, #fff);
}

/* Feed chips sit on a denser line than grid rows. */
.doc-badge--sm {
    min-width: 32px;
    height: 18px;
    font-size: 9px;
    padding: 0 4px;
}

/* Browsers without color-mix fall back to the accent as a solid chip, which is
   still readable because the text is forced to white. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .doc-badge {
        background: var(--doc-badge-color);
        color: #fff;
        border-color: var(--doc-badge-color);
    }
}

/* Header variant — the mark beside a popup's caption, where it stands in for the view icon.
   Scaled to the icon slot it replaces; every colour rule above still applies, so a file reads the
   same in a header as it does in a grid row. */
.doc-badge--header {
    min-width: 46px;
    height: 30px;
    border-radius: 5px;
    font-size: 12px;
    letter-spacing: .4px;
}