/* The shared look of panels, help icons and switches (APP-542, the owner's request of 2026-10-27: the same three faults
   pointed out on about five tickets). Loaded by every portal master (Templates/app/App1, App2, App3) and every League
   master (Templates/league/League1 to League6, which my/Member.master sits in). Use these; do not write your own.

   References the owner accepted:
   1. Panel: the Leagues > Program division form (APP-471): the Bootstrap card, with its heading inside.
   2. Help icon: the Triage Center's Clocked In Now card (APP-469): the plain blue ri-question-line that opens a modal.
   3. Switch: the Show all projects switch on a company's Projects tab (APP-512), a form-switch with its label spaced from it.
   Colours come from Bootstrap and the theme's variables, so light and dark follow the theme. */

/* 1. A panel: a card that is a section of a tab or a page (class="card ui-panel"), with its own padding, so it needs no
   card-body; its heading is .ui-panel-title. Same background, border, radius and shadow as every card. */
.card.ui-panel {
    padding: var(--bs-card-spacer-x, 1.25rem);
    margin-bottom: 1rem;
}

.ui-panel-title {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
}

/* 2. The help icon (button.ui-help > i.ri-question-line), beside a heading: plain, in the theme's blue, with a light tint on
   hover and focus. The same rule as .uw-icon-btn on the Triage Center. */
.ui-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    border: 0;
    border-radius: .375rem;
    color: var(--bs-primary);
    background-color: transparent;
}

.ui-help:hover,
.ui-help:focus-visible {
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

/* 3. A switch's label always has room beside the slider, whether or not the page spaced it itself (Bootstrap's own 0.5rem) */
.form-switch .form-check-input + .form-check-label {
    margin-left: .5rem;
}

/* 4. A company's logo (class="company-logo", APP-545, the owner's decision of 2026-10-27): in dark mode a logo of dark artwork on a
   transparent background (Acuity, Bristol Myers Squibb) can't be read on the dark page, so every company logo gets a light backing with
   rounded corners and a little padding. Light mode is unchanged. Put the class on every image that shows a company's logo. */
[data-bs-theme="dark"] .company-logo {
    background-color: var(--bs-white, #fff);
    border-radius: .375rem;
    padding: .25rem;
}

/* 5. Dark mode leftovers (APP-603, the UI consistency audit of 2026-10-28): three hand-set light colours that no theme rule remaps,
   fixed once here for every page instead of on each of the files that write them.
   a. A code-built table's header row (CssClass "table-light"): a near-white bar with black text on the dark page. It takes the dark
      card's own shade and the body text colour.
   b. The light border (style="border: 1px solid #e4e5e7") written onto error boxes: it takes the alert's own border colour.
   c. A light badge (class "text-bg-light"; the theme remaps only ".badge.bg-light"): the same dark chip as .badge.bg-light. */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: rgba(255, 255, 255, .08);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: rgba(255, 255, 255, .08);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(255, 255, 255, .12);
    --bs-table-hover-color: var(--bs-body-color);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .alert-danger[style*="e4e5e7"] {
    border-color: var(--bs-alert-border-color) !important;
}

[data-bs-theme="dark"] .text-bg-light,
[data-bs-theme="dark"] .badge.bg-light.text-body {
    background-color: rgb(42, 53, 73) !important;
    color: #e9ecf2 !important;
}

/* 6. A CheckBoxList or RadioButtonList (class="ui-checklist", APP-604): ASP.NET writes each choice as a bare input and a bare label, so
   the box touches its label and the choices run together. This gives them the room a .form-check has. A single check box is not one of
   these: it is a plain <input type="checkbox" class="form-check-input" runat="server"> in a .form-check with its label (README, Check boxes). */
.ui-checklist input[type="checkbox"],
.ui-checklist input[type="radio"] {
    margin: 0 .4rem 0 0;
    vertical-align: middle;
}

.ui-checklist label {
    margin-right: 1rem;
    vertical-align: middle;
}
/* 7. A required field (APP-613, the owner's decision of 2026-10-28): the label of a field the user must fill in carries class="required",
   which adds the red asterisk. Replaces the inline lightcoral span and the text-danger marks. */
.required::after {
    content: " *";
    color: lightcoral;
}

/* 8. Signed in as someone (APP-732): the banner every signed-in master shows (Core_Admin.ImpersonationBannerHtml), pinned to the
   bottom of the window in the theme's warning colours, light and dark. A spacer before it leaves room under the page, so it covers
   nothing. The banner also carries these colours inline, for the public masters that don't load this file. */
.ui-impersonation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;   /* above the bell's pop-ups and an open window, so End is always in reach */
    padding: 0.5rem 1rem;
    background: var(--bs-warning-bg-subtle, #fff3cd);
    color: var(--bs-warning-text-emphasis, #664d03);
    border-top: 2px solid var(--bs-warning-border-subtle, #ffe69c);
    font-size: 0.9rem;
}