/* =============================================================================
   legacy-components.css — legacy button class names, restyled with Bootstrap 5

   WHY THIS FILE EXISTS
   The project's customised Bootstrap 3 build aliased six project selectors directly
   into Bootstrap's own .btn rule lists, e.g.

       .btn, .inpageadmin a, div.admin a, .fb_login,
       .facebookPanel .fb_link, .linkbutton > span, .calltoaction > a { ... }

   Deleting the embedded Bootstrap 3 therefore removed their styling. Only one of the
   six is still used in Blazor markup (div.admin a, in Pages/Admin/Users.razor and
   Pages/CMS/CmsPage.razor) — but CMS page content is author-written HTML held in the
   database, so .calltoaction and .linkbutton in particular may well appear in published
   pages we cannot enumerate. The class names are a contract with that content.

   DECISION (2026-07-30): go all-in on Bootstrap 5. The class names are kept, but they
   now inherit Bootstrap 5 appearance rather than a frozen copy of Bootstrap 3, so
   legacy content follows the redesign instead of drifting away from it.

   HOW IT WORKS
   Bootstrap 5.3's .btn is entirely driven by --bs-btn-* custom properties. The base
   block below is a copy of .btn's own declarations, and each component then sets only
   the custom properties that differ — exactly how .btn-primary et al. are built. That
   means sizing, focus rings, disabled handling and colour modes all come from
   Bootstrap and stay consistent with real .btn elements.

   If Bootstrap is upgraded, re-check the base block against .btn in the new dist.
   ============================================================================= */

/* -- grid gutters for columns with no .row parent -------------------------------
   Bootstrap 3 padded columns absolutely:      .col-md-4 { padding: 0 15px }
   Bootstrap 5 pads only direct row children:  .row > * { padding: 0 calc(--bs-gutter-x * .5) }

   CMS page templates place columns straight into a plain <div>, with no .row wrapper:

       <section class="flex no-mobile">
         <div>
           <div class="col-md-4 bigphoto">…</div>
           <div class="col-md-8">…</div>
         </div>
       </section>

   Under BS3 those had gutters; under BS5 they have none, so the blocks butt together.
   The templates are CMS content and cannot be rewritten, so the gutters are restored
   here. Markup that does use a proper .row is untouched — Bootstrap already handles it.
   ------------------------------------------------------------------------------- */
/* -- .divFancyMessage hosted inside Bootstrap 5 .modal-dialog -------------------
   Bootstrap 5 sets pointer-events: none on .modal-dialog and restores pointer-events: auto
   on .modal-content. Dialogs ported from legacy's fancyAlert render .divFancyMessage
   directly inside .modal-dialog without a .modal-content wrapper, so they need
   pointer-events: auto, position: relative (for .fancybox-close), and FancyBox's skin
   drop-shadow, plus Bootstrap 3's .form-group spacing and bold labels.
   ------------------------------------------------------------------------------- */
.modal-dialog > .divFancyMessage {
    position: relative;
    pointer-events: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.divFancyMessage .form-group {
    margin-bottom: 15px;
}

.divFancyMessage label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

div:not(.row) > [class*="col-"] {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* -- shared base: a copy of Bootstrap 5.3.7's .btn ------------------------------ */
.calltoaction > a,
.linkbutton > span,
.fb_login,
.facebookPanel .fb_link,
.inpageadmin a,
div.admin a {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out,
                border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* -- shared states -------------------------------------------------------------- */
.calltoaction > a:hover,
.linkbutton > span:hover,
.fb_login:hover,
.facebookPanel .fb_link:hover,
.inpageadmin a:hover,
div.admin a:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.calltoaction > a:focus-visible,
.linkbutton > span:focus-visible,
.fb_login:focus-visible,
.facebookPanel .fb_link:focus-visible,
.inpageadmin a:focus-visible,
div.admin a:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

.calltoaction > a.active, .calltoaction > a:active,
.linkbutton > span.active, .linkbutton > span:active,
.fb_login.active, .fb_login:active,
.facebookPanel .fb_link.active, .facebookPanel .fb_link:active,
.inpageadmin a.active, .inpageadmin a:active,
div.admin a.active, div.admin a:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

.calltoaction > a.disabled, .calltoaction > a[disabled],
.linkbutton > span.disabled, .linkbutton > span[disabled],
.fb_login.disabled, .fb_login[disabled],
.facebookPanel .fb_link.disabled, .facebookPanel .fb_link[disabled],
.inpageadmin a.disabled, .inpageadmin a[disabled],
div.admin a.disabled, div.admin a[disabled] {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
    pointer-events: none;
}

/* -- per-component colours ------------------------------------------------------ */

/* .calltoaction — black, uppercase, full width. The most content-facing of the six;
   kept black so existing published CMS pages do not visibly change. */
.calltoaction > a {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #262626;
    --bs-btn-hover-border-color: #262626;
    --bs-btn-focus-shadow-rgb: 64, 64, 64;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #333;
    --bs-btn-active-border-color: #333;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
    display: block;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 600;
}

/* .linkbutton — Bootstrap 5 .btn-info at .btn-lg size, full width. */
.linkbutton > span {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
    --bs-btn-color: #000;
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #31d2f2;
    --bs-btn-hover-border-color: #25cff2;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #3dd5f3;
    --bs-btn-active-border-color: #25cff2;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0dcaf0;
    --bs-btn-disabled-border-color: #0dcaf0;
    display: block;
    width: 100%;
}

/* .fb_login — Facebook brand blue; Bootstrap ships no brand variants. */
.fb_login {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3b5998;
    --bs-btn-border-color: #3b5998;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2d4373;
    --bs-btn-hover-border-color: #2d4373;
    --bs-btn-focus-shadow-rgb: 88, 113, 164;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2d4373;
    --bs-btn-active-border-color: #2d4373;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #8b9dc3;
    --bs-btn-disabled-border-color: #8b9dc3;
}

/* .facebookPanel .fb_link — Bootstrap 5 .btn-primary. */
.facebookPanel .fb_link {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

/* .fb_link colour variants, carried over from site.css. */
.facebookPanel .fb_link.btn-black {
    --bs-btn-color: #fff;
    --bs-btn-bg: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #424649;
    --bs-btn-hover-border-color: #373b3e;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d5154;
    --bs-btn-active-border-color: #373b3e;
}

.facebookPanel .fb_link.btn-showmore,
.facebookPanel .fb_link.btn-showhistory {
    --bs-btn-color: #fff;
    --bs-btn-bg: #9aa5bd;
    --bs-btn-border-color: #9aa5bd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #838fa9;
    --bs-btn-hover-border-color: #838fa9;
    --bs-btn-focus-shadow-rgb: 138, 148, 172;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #838fa9;
    --bs-btn-active-border-color: #838fa9;
    text-transform: uppercase;
    font-weight: 600;
}

/* .inpageadmin and div.admin — Bootstrap 5 .btn-warning.
   NOTE: the wrappers also carried a red "ADMIN" header bar and pink border in the old
   build. That panel styling is NOT reproduced here — see docs/BootstrapMigration.md,
   where the agreed replacement is a Bootstrap 5 .card with a bg-danger header, applied
   in the two .razor files that still use div.admin. */
.inpageadmin a,
div.admin a {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

/* FocusOnNavigate (Routes.razor) moves focus to the first <h1> after every navigation so that
   screen readers announce the new page. That target is not interactive (tabindex="-1"), so it
   must not draw a focus ring. Legacy WebForms had no such focus move. */
h1[tabindex="-1"]:focus {
    outline: 0;
}

/* -- .form-horizontal: Bootstrap 3's horizontal form layout -----------------------
   Legacy markup the CMS meta box injects (Scripts/Admin/Content.js, #metaForm) and several
   admin forms use. */
.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-bottom: 15px;
    margin-left: -15px;
}

.form-horizontal .control-label {
    margin-bottom: 0;
    padding-top: 7px;
    font-weight: 700;
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        text-align: right;
    }
}

@media (max-width: 767.98px) {
    .form-horizontal .form-group > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* BS3 .input-group-addon (the checkbox in front of the alias URL) = BS5 .input-group-text */
.input-group-addon {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.input-group > .input-group-addon:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}