/*!
 * bs3-bs5-color-shim.css
 * ----------------------------------------------------------------------------
 * Re-skins Bootstrap 3.x contextual COLOR utilities (text-* and btn-*) to use
 * the Bootstrap 5.3 color palette. Drop this file into /Content and reference
 * it AFTER bootstrap.css so these rules win the cascade.
 *
 * Scope (intentionally narrow for v1): only the text-* and btn-* color
 * utilities. Layout, spacing, typography, components, etc. are left untouched
 * so existing BS3 markup keeps working.
 *
 * Portable: no BS3-specific selectors beyond the utility class names, so the
 * same file works in any BS3.x project.
 *
 * NOTE ON ACCESSIBILITY / CONTRAST:
 *   The btn-* mappings are safe: BS5.3 brand colors are designed to sit behind
 *   white (or black, for warning/info/light) button text and meet contrast.
 *   The text-* mappings use the raw BS5.3 *brand* colors. On a white page,
 *   .text-warning (#ffc107) and .text-info (#0dcaf0) are effectively
 *   unreadable -- this matches "the same colors as BS5.3" literally, but BS5.3
 *   itself does NOT recommend those for body text. BS5.3 ships separate
 *   higher-contrast "emphasis" text colors for that purpose. If your real goal
 *   is readable text, switch the TEXT UTILITIES block to the EMPHASIS values
 *   provided (commented out) just below it.
 * ----------------------------------------------------------------------------
 */

:root {
    /* Bootstrap 5.3 brand colors */
    --bs5-primary:   #0d6efd;
    --bs5-secondary: #6c757d;
    --bs5-success:   #198754;
    --bs5-info:      #0dcaf0;
    --bs5-warning:   #ffc107;
    --bs5-danger:    #dc3545;
    --bs5-light:     #f8f9fa;
    --bs5-dark:      #212529;

    /* Bootstrap 5.3 "text-emphasis" colors (readable on a light background).
       Used by the optional emphasis text block below. */
    --bs5-primary-emphasis:   #052c65;
    --bs5-secondary-emphasis: #2b2f32;
    --bs5-success-emphasis:   #0a3622;
    --bs5-info-emphasis:      #055160;
    --bs5-warning-emphasis:   #664d03;
    --bs5-danger-emphasis:    #58151c;

    /* Bootstrap 5.3 shade-scale colors (as used by the bootstrap-colors lib).
       Add more shades here as we duplicate additional utilities below. */
    --bs5-yellow-600: #cc9a06;
    --bs5-yellow-700: #997404;
    --bs5-orange-600: #ca6510;
    --bs5-orange-700: #984c0c;
}

/* ===========================================================================
   TEXT UTILITIES  (BS5.3 brand colors -- literal match)
   BS3 ships: text-primary, text-success, text-info, text-warning,
              text-danger, text-muted
   =========================================================================== */
.text-primary { color: var(--bs5-primary)   !important; }
.text-success { color: var(--bs5-success)   !important; }
.text-info    { color: var(--bs5-info)      !important; }
.text-warning { color: var(--bs5-warning)   !important; }
.text-danger  { color: var(--bs5-danger)    !important; }
.text-muted   { color: var(--bs5-secondary) !important; }

/* BS3 darkens text-* on hover for linked text; keep a subtle hover shift. */
a.text-primary:hover, a.text-primary:focus { color: #0a58ca !important; }
a.text-success:hover, a.text-success:focus { color: #146c43 !important; }
a.text-info:hover,    a.text-info:focus    { color: #3dd5f3 !important; }
a.text-warning:hover, a.text-warning:focus { color: #ffcd39 !important; }
a.text-danger:hover,  a.text-danger:focus  { color: #b02a37 !important; }

/* ---------------------------------------------------------------------------
   OPTIONAL: higher-contrast text (BS5.3 "emphasis" values).
   To prefer readability over the literal brand colors, comment out the TEXT
   UTILITIES block above and uncomment this one.
   ---------------------------------------------------------------------------
.text-primary { color: var(--bs5-primary-emphasis)   !important; }
.text-success { color: var(--bs5-success-emphasis)   !important; }
.text-info    { color: var(--bs5-info-emphasis)      !important; }
.text-warning { color: var(--bs5-warning-emphasis)   !important; }
.text-danger  { color: var(--bs5-danger-emphasis)    !important; }
.text-muted   { color: var(--bs5-secondary-emphasis) !important; }
   --------------------------------------------------------------------------- */

/* ===========================================================================
   BUTTON UTILITIES  (BS5.3 colors + BS5.3 hover/active/focus shades)
   BS3 ships: btn-default, btn-primary, btn-success, btn-info,
              btn-warning, btn-danger  (btn-link left as-is)
   =========================================================================== */

/* --- btn-default  ->  mapped to BS5.3 btn-light (light gray, dark text) --- */
.btn-default {
    color: #000;
    background-color: var(--bs5-light);
    border-color: var(--bs5-light);
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus {
    color: #000;
    background-color: #d3d4d5;
    border-color: #c6c7c8;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: #000;
    background-color: #c6c7c8;
    border-color: #babbbc;
}
.btn-default.focus,
.btn-default:focus {
    box-shadow: 0 0 0 .25rem rgba(211, 212, 213, .5);
}

/* --- btn-primary --- */
.btn-primary {
    color: #fff;
    background-color: var(--bs5-primary);
    border-color: var(--bs5-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #0a58ca;
    border-color: #0a53be;
}
.btn-primary.focus,
.btn-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(49, 132, 253, .5);
}

/* --- btn-success --- */
.btn-success {
    color: #fff;
    background-color: var(--bs5-success);
    border-color: var(--bs5-success);
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: #146c43;
    border-color: #13653f;
}
.btn-success.focus,
.btn-success:focus {
    box-shadow: 0 0 0 .25rem rgba(60, 153, 110, .5);
}

/* --- btn-info  (BS5.3 uses DARK text on info) --- */
.btn-info {
    color: #000;
    background-color: var(--bs5-info);
    border-color: var(--bs5-info);
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus {
    color: #000;
    background-color: #31d2f2;
    border-color: #25cff2;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    color: #000;
    background-color: #3dd5f3;
    border-color: #25cff2;
}
.btn-info.focus,
.btn-info:focus {
    box-shadow: 0 0 0 .25rem rgba(11, 172, 204, .5);
}

/* --- btn-warning  (BS5.3 uses DARK text on warning) --- */
.btn-warning {
    color: #000;
    background-color: var(--bs5-warning);
    border-color: var(--bs5-warning);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
    color: #000;
    background-color: #ffca2c;
    border-color: #ffc720;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
    color: #000;
    background-color: #ffcd39;
    border-color: #ffc720;
}
.btn-warning.focus,
.btn-warning:focus {
    box-shadow: 0 0 0 .25rem rgba(217, 164, 6, .5);
}

/* --- btn-danger --- */
.btn-danger {
    color: #fff;
    background-color: var(--bs5-danger);
    border-color: var(--bs5-danger);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #b02a37;
    border-color: #a52834;
}
.btn-danger.focus,
.btn-danger:focus {
    box-shadow: 0 0 0 .25rem rgba(225, 83, 97, .5);
}

/* --- Disabled buttons: match BS5.3 (faded, no hover shift) --- */
.btn-default.disabled, .btn-default[disabled],
.btn-primary.disabled, .btn-primary[disabled],
.btn-success.disabled, .btn-success[disabled],
.btn-info.disabled,    .btn-info[disabled],
.btn-warning.disabled, .btn-warning[disabled],
.btn-danger.disabled,  .btn-danger[disabled] {
    opacity: .65;
}

/* ===========================================================================
   LABEL UTILITIES  (BS3 .label-*  ==  BS5.3 .badge / text-bg-* colors)
   BS3 ships: label-default, label-primary, label-success, label-info,
              label-warning, label-danger
   BS5.3 badges keep the brand background colors, with DARK text on the
   light-ish variants (info, warning) to stay readable -- mirrored here.
   =========================================================================== */
.label-default {
    color: #fff;
    background-color: var(--bs5-secondary);
}
.label-primary {
    color: #fff;
    background-color: var(--bs5-primary);
}
.label-success {
    color: #fff;
    background-color: var(--bs5-success);
}
.label-info {
    color: #000;
    background-color: var(--bs5-info);
}
.label-warning {
    color: #000;
    background-color: var(--bs5-warning);
}
.label-danger {
    color: #fff;
    background-color: var(--bs5-danger);
}

/* Linked labels: BS3 darkens the background on hover/focus -- keep that feel. */
a.label-default:hover, a.label-default:focus { color: #fff; background-color: #565e64; }
a.label-primary:hover, a.label-primary:focus { color: #fff; background-color: #0a58ca; }
a.label-success:hover, a.label-success:focus { color: #fff; background-color: #146c43; }
a.label-info:hover,    a.label-info:focus    { color: #000; background-color: #3dd5f3; }
a.label-warning:hover, a.label-warning:focus { color: #000; background-color: #ffcd39; }
a.label-danger:hover,  a.label-danger:focus  { color: #fff; background-color: #b02a37; }

/* ===========================================================================
   BOOTSTRAP-COLORS DUPLICATES  (shade-scale utilities, BS5.3 palette)
   Selectively re-created from the bootstrap-colors library so we can use a few
   of its shade-numbered classes without pulling in the whole library (and its
   bundled BS5 CSS). Class names use shade numbers, so they do NOT collide with
   any Bootstrap 3 class. Add new shades to the :root vars above as we grow this.
   =========================================================================== */
.text-yellow-600 { color: var(--bs5-yellow-600) !important; }
.text-yellow-700 { color: var(--bs5-yellow-700) !important; }
.text-orange-600 { color: var(--bs5-orange-600) !important; }
.text-orange-700 { color: var(--bs5-orange-700) !important; }