@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

.ui-refresh {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--fg-default);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Root default so .form-control (components.css) always has a real
       background instead of falling back to transparent when it isn't
       nested inside a container that flips this (.panel, .card,
       .ajax-drawer, ...). Those containers still override this locally. */
    --control-bg-color: var(--bg-surface);
}
/* Body and page surface share one paper bg — v4 forms sit directly on the
   page, no card/desk distinction. The earlier desk-paper gradient (body =
   --bg-muted, page = --bg-page) read as a visible darker rail around the
   form, which doesn't match v4 where the form blends into the body. Keep
   --bg-muted as a separate token for hover/nav-rail tints elsewhere.
   !important needed to beat legacy `body { background: #F5F5FA }` from
   backend.css/layout.css. */
body.ui-refresh {
    background-color: var(--bg-page) !important;
    color: var(--fg-default) !important;
}
body.ui-refresh .page-body {
    background-color: var(--bg-page) !important;
}

/* Midnight has one canonical canvas. This selector deliberately includes the
   full organizer page chain and has enough specificity to override legacy and
   dashboard page rules wherever they are loaded. It excludes cards, controls,
   and overlays, whose contrasting surfaces are intentional. */
body.ui-refresh[data-surface="dark"][data-tone="cool"] :is(.wrap, .page-body, #content-container, #main-container, #inner, #main-content) {
    background: var(--bg-page) !important;
}

.ui-refresh .nowrap {
    white-space: nowrap;
}

.ui-refresh .form-label,
.ui-refresh .form-group label,
.ui-refresh .control-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: normal;
    color: var(--fg-muted);
    width: fit-content;
    margin-bottom: var(--space-1);
}
/* Choice labels keep the typography above but not the block display: Bootstrap
   lays `.radio-inline`/`.checkbox-inline` out inline, so `display: block` puts
   every option of an inline radioList on its own line. Drawer and iframe forms
   already carry their own inline restores (components.css); this covers plain
   in-page forms, e.g. the Swoogo Admin registrant search filters. */
.ui-refresh .form-group label.radio-inline,
.ui-refresh .form-group label.checkbox-inline {
    display: inline-block;
}

.ui-refresh .toggle-label {
    color: var(--fg-muted) !important;
    font-size: var(--font-size-toggle) !important;
    font-weight: var(--font-weight-normal) !important;
    padding-left: 0;
}