/*
 * The supplier pages (create and edit) as the owner's design draws them,
 * 8 Nov 2026: a plane tile beside the heading, cards with a tinted header,
 * small icons before each label, the credential icons in a gutter, a note
 * box at the top of each credential card and the save buttons at the right.
 * Scoped to .sup-page (WearsSupplierPageLook). Layout rules apply in both
 * themes; colours only in light, as the rest of the console.
 */

/* ---------------------------------------------------------------- header */

.sup-page .fi-header > div:first-child {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
}
.sup-page .fi-header > div:first-child > * { grid-column: 2; }
.sup-page .fi-header > div:first-child > .fi-breadcrumbs { grid-column: 1 / -1; margin-bottom: .85rem; }
.sup-page .fi-header > div:first-child::before {
    content: "";
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 3rem;
    height: 3rem;
    border-radius: .8rem;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath transform='rotate(45 12 12)' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center / 1.45rem no-repeat,
        linear-gradient(135deg, #7c6cf6, #5b45e6);
    box-shadow: 0 8px 18px -8px rgb(79 70 229 / .7);
}
.sup-page .fi-header > div:first-child > .fi-header-subheading { margin-top: .2rem; }
.sup-page .sup-home { width: 1rem; height: 1rem; }
.sup-page .fi-breadcrumbs-item-label:has(.sup-home) { display: inline-flex; }

html:not(.dark) .sup-page .fi-header-heading { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; color: var(--tc-ink); line-height: 1.2; }
html:not(.dark) .sup-page .fi-header-subheading { color: var(--tc-body); font-size: .875rem; }
html:not(.dark) .sup-page .fi-breadcrumbs-item-label { color: var(--tc-muted); font-size: .8rem; }

/* Delete: white, a red edge, a bin. */
html:not(.dark) .sup-page .fi-header .fi-btn.fi-outlined.fi-color-danger {
    background: #fff;
    border-radius: .6rem;
    padding: .55rem 1.1rem;
    font-weight: 700;
    color: #e11d48;
    box-shadow: inset 0 0 0 1.5px #f43f5e;
}
html:not(.dark) .sup-page .fi-header .fi-btn.fi-outlined.fi-color-danger:hover { background: #fff1f2; }

/* ---------------------------------------------------------------- cards */

.sup-page .sup-cols .fi-section { border-radius: .9rem; overflow: hidden; }
.sup-page .fi-section-header { gap: .9rem; padding: 1rem 1.4rem; align-items: center; }
.sup-page .fi-section-header > .fi-icon { width: 1.6rem; height: 1.6rem; }
.sup-page .fi-section-content { padding: 1.25rem 1.4rem 1.4rem; }

html:not(.dark) .sup-page .sup-cols .fi-section {
    background: #fff;
    box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 0 0 1px var(--tc-line);
}
html:not(.dark) .sup-page .fi-section-header { background: linear-gradient(180deg, #fcfcfe, #f8f9fc); }
html:not(.dark) .sup-page .fi-section-content-ctn { border-top-color: var(--tc-line); }
html:not(.dark) .sup-page .fi-section-header-heading { font-size: 1rem; font-weight: 700; color: var(--tc-ink); }
html:not(.dark) .sup-page .fi-section-header-description { font-size: .8rem; color: var(--tc-muted); margin-top: .1rem; }

/* ---------------------------------------------------------------- fields */

.sup-page .sup-label { display: inline-flex; align-items: center; gap: .45rem; }
.sup-page .sup-ico { display: inline-flex; flex: none; }
.sup-page .sup-ico svg { width: 1rem; height: 1rem; }
html:not(.dark) .sup-page .sup-ico { color: #6b7280; }
html:not(.dark) .sup-page .fi-fo-field-label-content { font-weight: 600; color: var(--tc-ink); font-size: .85rem; }
html:not(.dark) .sup-page .fi-sc-text,
html:not(.dark) .sup-page .fi-fo-field-wrp-helper-text { color: var(--tc-muted); font-size: .78rem; line-height: 1.45; }

html:not(.dark) .sup-page .fi-input-wrp { border-radius: .6rem; }
.sup-page .fi-input-wrp-prefix .sup-ico svg { width: 1.05rem; height: 1.05rem; }

/* Numbers keep their stepper in view, as drawn. */
.sup-page input[type="number"]::-webkit-inner-spin-button { opacity: 1; height: 1.6rem; }

/* The % after the uplift sits in a small grey box. */
html:not(.dark) .sup-page .fi-input-wrp-suffix.fi-inline .fi-input-wrp-label {
    background: #f1f2f6;
    border-radius: .35rem;
    padding: .1rem .45rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--tc-body);
}

/* A credential: its icon in a gutter left of the label and the input. */
.sup-page .sup-cred { position: relative; padding-inline-start: 1.85rem; }
.sup-page .sup-cred .sup-label { display: inline; }
.sup-page .sup-cred .sup-ico { position: absolute; inset-inline-start: 0; top: .1rem; }
.sup-page .sup-cred .sup-ico svg { width: 1.1rem; height: 1.1rem; }

/* Journeys and new agencies start below a hairline. */
.sup-page .sup-rule { border-top: 1px solid var(--tc-line, #eceef3); padding-top: 1.1rem; }
html:not(.dark) .sup-page .sup-rule .fi-fo-checkbox-list { padding-inline-start: 1.5rem; }
html:not(.dark) .sup-page .fi-fo-checkbox-list-option-label { font-weight: 700; color: var(--tc-ink); font-size: .82rem; }
html:not(.dark) .sup-page .fi-fo-checkbox-list-option-description { color: var(--tc-muted); font-size: .78rem; }

/* New agencies: the switch with its note beside it. */
.sup-page .sup-toggle-beside .fi-fo-field-content-col { display: flex; flex-direction: row; align-items: center; gap: 1.1rem; }
.sup-page .sup-toggle-beside .fi-fo-field-content-col > .fi-sc { flex: 1 1 auto; max-width: 34rem; }

/* The note at the top of a credential card. */
html:not(.dark) .sup-page .sup-callout {
    background: var(--tc-brand-tint);
    border: 0;
    box-shadow: none;
    border-radius: .75rem;
    padding: .7rem 1rem;
    gap: .75rem;
    align-items: flex-start;
}
html:not(.dark) .sup-page .sup-callout .fi-callout-icon { color: var(--tc-brand); }
html:not(.dark) .sup-page .sup-callout .fi-callout-description { color: #312e81; font-size: .8rem; line-height: 1.5; }

/* ---------------------------------------------------------------- footer */

.sup-page #content\.form-actions,
.sup-page [id$="form-actions"] { border-top: 1px solid var(--tc-line, #eceef3); padding-top: 1rem; }
html:not(.dark) .sup-page [id$="form-actions"] .fi-btn { border-radius: .6rem; padding: .6rem 1.4rem; font-weight: 700; }
html:not(.dark) .sup-page [id$="form-actions"] .fi-btn.fi-color-gray { min-width: 6.5rem; }
html:not(.dark) .sup-page [id$="form-actions"] .fi-btn.fi-color-primary { min-width: 10rem; box-shadow: 0 8px 18px -10px rgb(79 70 229 / .8); }