/* ===== Themes. The staff theme is the default token values (tokens.css) plus the light touch below; the FireCAD theme is token
   values on a .fc scope, the customer pages' skin (built by the customer portal tasks, defined here so the tokens live in one place). ===== */
.fc {
    --color-primary: var(--fc-orange);
    --color-primary-hover: var(--fc-orange-dark);
    --color-primary-subtle: #fff3ee;
    --color-text: var(--fc-text);
    --color-text-muted: #616161;
    --color-border: var(--fc-line);
    --color-border-strong: #bdbdbd;
    --color-bg: var(--fc-bg);
    --color-surface-sunken: var(--fc-bg);
    --color-link: var(--fc-orange-text);
    --font-body: var(--fc-font-body);
    --font-heading: var(--fc-font-heading);
    --button-font: var(--fc-font-button);
    --button-weight: 400;
    --button-transform: uppercase;
    --button-tracking: 0.02em;
    --button-height: 2.5rem;
    --button-padding-x: 1.4rem;
    --radius-button: var(--fc-radius-button);
    --radius-field: var(--fc-radius-field);
    --radius-card: var(--fc-radius-card);
    --radius-dialog: var(--fc-radius-card);
    --field-height: 2.5rem;
    font-size: 1.0625rem;
}
.fc h1, .fc h2, .fc h3 { font-family: var(--font-heading); font-weight: 700; color: var(--fc-ink); }
.fc h1 { font-size: 1.9rem; }
.fc main > h1::after, .fc .ui-page-header h1::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: 0.6rem; background: var(--color-primary); }
.fc .ui-button--danger { background: var(--fc-black); }
.fc .ui-button--secondary { box-shadow: inset 0 0 0 2px var(--color-primary); }
.fc .ui-card { border-top: 3px solid var(--color-primary); }
.fc .ui-card__value { font-family: var(--font-heading); }
.fc .ui-table th { font-family: var(--font-heading); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fc-muted); }
.fc .ui-meter > span { background: var(--fc-orange-light); }
.fc .ui-meter--high > span { background: var(--fc-orange); }
.fc .ui-meter--pool > span { background: #6b6b6b; }
.fc .ui-toggle input:checked + span { background: var(--color-primary); }
.fc .ui-alert--info { border-color: #f6c9b8; border-left-color: var(--color-primary); background: var(--color-primary-subtle); }


/* Staff, Support and Finance: lighter touch, logo mark and accent in the header only */
.staff-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fc-ink) !important; }
.staff-brand img { width: 26px; height: 26px; }
.staff-header { border-top: 3px solid var(--fc-orange); }