/* ============================================================
   PerfXAI brand overrides on top of Soft UI Dashboard.
   Brand palette + Metropolis typography. Soft UI provides the
   base components; this file makes them match the PerfXAI system.
   ============================================================ */

/* Metropolis font (free, via cdnfonts) with safe fallback chain */
@import url('https://fonts.cdnfonts.com/css/metropolis-2');

/* ───── Design tokens ───── */
:root {
    --white-color:                  #ffffff;
    --primary-color:                #2a709c;
    --secondary-color:              #5a6f80;
    --section-bg-color:             #f0f8ff;
    --site-footer-bg-color:         #44525d;
    --custom-btn-bg-color:          #597081;
    --custom-btn-bg-hover-color:    #5bc1ac;
    --dark-color:                   #000000;
    --p-color:                      #717275;
    --border-color:                 #e9eaeb;

    --body-font-family:             'Metropolis', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --h1-font-size:                 52px;
    --h2-font-size:                 46px;
    --h3-font-size:                 32px;
    --h4-font-size:                 28px;
    --h5-font-size:                 24px;
    --h6-font-size:                 22px;
    --p-font-size:                  16px;
    --btn-font-size:                18px;
    --copyright-font-size:          14px;

    --border-radius-large:          100px;
    --border-radius-medium:         20px;
    --border-radius-small:          10px;

    --font-weight-light:            300;
    --font-weight-normal:           400;
    --font-weight-semibold:         600;
    --font-weight-bold:             700;

    /* Aliases for Bootstrap vars so anything that reads them also gets the brand color */
    --bs-primary:                   var(--primary-color);
    --bs-primary-rgb:               42, 112, 156;
    --bs-link-color:                var(--primary-color);
    --bs-body-color:                var(--dark-color);
    --bs-secondary-color:           var(--p-color);
}

/* ───── Base / typography ───── */
html, body {
    font-family: var(--body-font-family);
    color: var(--dark-color);
    font-size: var(--p-font-size);
    font-weight: var(--font-weight-normal);
    background: var(--section-bg-color);
}
body { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    letter-spacing: -.01em;
}
h1, .h1 { font-size: var(--h1-font-size); }
h2, .h2 { font-size: var(--h2-font-size); }
h3, .h3 { font-size: var(--h3-font-size); }
h4, .h4 { font-size: var(--h4-font-size); }
h5, .h5 { font-size: var(--h5-font-size); }
h6, .h6 { font-size: var(--h6-font-size); }
p { color: var(--p-color); font-size: var(--p-font-size); font-weight: var(--font-weight-normal); }
small, .small, .text-sm { color: var(--p-color); }
a { color: var(--primary-color); }
a:hover { color: var(--custom-btn-bg-hover-color); }

/* ───── Brand color utilities ───── */
/* Solid primary — the main brand colour. Use this on page titles, action
   buttons and prominent UI marks. */
.text-brand   { color: var(--primary-color) !important; }
.bg-brand     { background-color: var(--primary-color) !important; color: #fff !important; }

/* Brand gradient — kept available for hero / large CTA accents */
.bg-gradient-brand {
    background-image: linear-gradient(310deg, var(--primary-color) 0%, var(--custom-btn-bg-hover-color) 100%) !important;
}
.text-gradient-brand {
    background-image: linear-gradient(310deg, var(--primary-color) 0%, var(--custom-btn-bg-hover-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Override Soft UI's default primary gradient to use brand colors */
.bg-gradient-primary {
    background-image: linear-gradient(310deg, var(--primary-color) 0%, var(--custom-btn-bg-hover-color) 100%) !important;
}
.bg-gradient-info {
    background-image: linear-gradient(310deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
}
.bg-gradient-success {
    background-image: linear-gradient(310deg, #2a9c75 0%, var(--custom-btn-bg-hover-color) 100%) !important;
}
.bg-gradient-danger {
    background-image: linear-gradient(310deg, #b3273f 0%, #d63939 100%) !important;
}
.bg-gradient-secondary {
    background-image: linear-gradient(310deg, var(--site-footer-bg-color) 0%, var(--secondary-color) 100%) !important;
}

/* Override Soft UI primary text */
.text-primary { color: var(--primary-color) !important; }

/* ───── Avatars / brand mark ───── */
.avatar-brand {
    background-image: linear-gradient(310deg, var(--primary-color) 0%, var(--custom-btn-bg-hover-color) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
}

/* ───── Buttons ───── */
.btn {
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-small);
    letter-spacing: .01em;
    display: inline-block !important;
    text-align: center;
    vertical-align: middle;
    /* Width hugs content by default, but DO let utilities like w-100 / flex-fill
       expand the button when explicitly requested. */
    width: auto;
    max-width: 100%;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 1.15rem !important;
    line-height: 40px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    /* Transition only colour-y things — never size, padding, or transform */
    transition:
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        border-color .15s ease !important;
}
/* Bootstrap utilities that explicitly request full-width must win */
.btn.w-100 { width: 100% !important; max-width: 100% !important; }
.btn.flex-fill { flex: 1 1 auto !important; width: auto !important; }
.btn-sm { height: 32px !important; min-height: 32px !important; max-height: 32px !important; line-height: 32px !important; padding: 0 .85rem !important; font-size: .8rem !important; }
.btn-lg { height: 48px !important; min-height: 48px !important; max-height: 48px !important; line-height: 48px !important; padding: 0 1.5rem !important; font-size: 1rem !important; }

/* Icons inside buttons — inline-block so they sit cleanly next to the label */
.btn > .fa, .btn > .fas, .btn > .fa-solid,
.btn > .fab, .btn > .far, .btn > .fa-regular {
    display: inline-block;
    vertical-align: -.08em;
    margin-right: .5rem;
    line-height: 1;
    font-size: 1.05rem !important;
}
/* Icon-only buttons (no text sibling) shouldn't carry a right margin */
.btn > .fa:only-child, .btn > .fas:only-child, .btn > .fa-solid:only-child,
.btn > .fab:only-child, .btn > .far:only-child {
    margin-right: 0;
}
/* If the icon already carries a Bootstrap utility margin (me-1/me-2), keep
   that margin — the utility rules below set the exact gap between icon and label. */
.btn > .fa.me-1, .btn > .fa.me-2,
.btn > .fas.me-1, .btn > .fas.me-2,
.btn > .fab.me-1, .btn > .fab.me-2 { margin-right: .35rem !important; }
.btn > .fa.me-2, .btn > .fas.me-2, .btn > .fab.me-2 { margin-right: .5rem !important; }

/* Strip any pseudo-element effects Soft UI might layer on buttons */
.btn::before, .btn::after { content: none !important; display: none !important; }

/* Lock states — only kill transitions/transforms, never override dimensions.
   Per-size rules at the bottom of this file handle .btn / .btn-sm / .btn-lg
   dimensions consistently across rest and hover. */
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn.active {
    transform: none !important;
    animation: none !important;
    white-space: nowrap !important;
    letter-spacing: .01em !important;
    outline: 0 !important;
}
.btn.w-100:hover, .btn.w-100:focus, .btn.w-100:active { width: 100% !important; max-width: 100% !important; }
.btn.flex-fill:hover, .btn.flex-fill:focus, .btn.flex-fill:active { flex: 1 1 auto !important; }

/* Make :active and :focus indistinguishable from the default state, per variant.
   This means clicking the button does not change its colour or shadow. */

/* Brand-primary buttons */
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary.active,
.btn.bg-brand:active,
.btn.bg-brand:focus,
.bg-gradient-primary:active,
.bg-gradient-primary:focus {
    background-color: var(--primary-color) !important;
    background-image: none !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(42, 112, 156, .25) !important;
}

/* Outline secondary */
.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
    background: transparent !important;
    color: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

/* Outline primary */
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    background: transparent !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: none !important;
}

/* Outline danger — completely static (no hover fill, no icon color change) */
.btn-outline-danger,
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:focus-visible,
.btn-outline-danger:active,
.btn-outline-danger.active {
    background-color: transparent !important;
    background-image: none !important;
    color: #f5365c !important;
    border-color: #f5365c !important;
    box-shadow: none !important;
}
.btn-outline-danger i,
.btn-outline-danger:hover i,
.btn-outline-danger:focus i { color: #f5365c !important; }

/* Success / Danger solid — all states identical, no hover change */
.btn-success,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.bg-gradient-success,
.bg-gradient-success:hover, .bg-gradient-success:active {
    background-image: linear-gradient(310deg, #2a9c75 0%, var(--custom-btn-bg-hover-color) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(45, 206, 137, .22) !important;
}
.btn-danger,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.bg-gradient-danger,
.bg-gradient-danger:hover, .bg-gradient-danger:active {
    background-image: linear-gradient(310deg, #b3273f 0%, #d63939 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(245, 54, 92, .22) !important;
}
/* Make sure Bootstrap me-1 / me-2 utility margins on icons inside buttons
   actually apply (the inline-block button needs that margin for spacing
   between icon and label). */
.btn > .me-1 { margin-right: .25rem !important; }
.btn > .me-2 { margin-right: .5rem !important; }
.btn > .ms-1 { margin-left: .25rem !important; }
.btn > .ms-2 { margin-left: .5rem !important; }
.btn-lg, .btn.btn-signin { font-size: var(--btn-font-size); }
/* .btn hover lift removed — was conflicting with Soft UI scale and causing jump */

/* Make Font Awesome icons inside buttons clearly visible — Soft UI / Bootstrap
   shrink them with the text, which leaves the edit/delete pen + trash glyphs
   barely readable. */
.btn .fa,
.btn .fas,
.btn .fa-solid,
.btn .fab,
.btn .far,
.btn .fa-regular {
    font-size: 1.05rem !important;
    line-height: 1;
    vertical-align: -.08em;
}
.btn-sm .fa,
.btn-sm .fas,
.btn-sm .fa-solid,
.btn-sm .fab,
.btn-sm .far,
.btn-sm .fa-regular {
    font-size: 1.05rem !important;
}
/* Icon-only btn-sm handling REMOVED — :only-child matches even when there's
   a sibling text node, so it was wrongly forcing 42px width on buttons like
   <button><i></i>Start</button>, clipping the label. The unified .btn-sm rule
   at the bottom of this file handles all btn-sm sizing correctly. */

/* Lock icon font-size on EVERY button state — Font Awesome / Soft UI can
   sometimes re-scale icons on :hover; this keeps them perfectly static. */
.btn .fa, .btn .fas, .btn .fa-solid, .btn .fab, .btn .far, .btn .fa-regular,
.btn:hover .fa, .btn:hover .fas, .btn:hover .fa-solid, .btn:hover .fab, .btn:hover .far, .btn:hover .fa-regular,
.btn:focus .fa, .btn:focus .fas, .btn:focus .fa-solid, .btn:focus .fab, .btn:focus .far, .btn:focus .fa-regular,
.btn:active .fa, .btn:active .fas, .btn:active .fa-solid, .btn:active .fab, .btn:active .far, .btn:active .fa-regular {
    font-size: 1.05rem !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Solid primary (PerfXAI primary blue) — used on the main action buttons.
   Hover/active/focus look identical to the rest state — no effect on mouse-over. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.bg-gradient-primary,
.bg-gradient-primary:hover,
.bg-gradient-primary:active,
.btn.bg-brand,
.btn.bg-brand:hover,
.btn.bg-brand:active {
    background-color: var(--primary-color) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(42, 112, 156, .25);
}

/* Custom btn pattern from the design system (slate → mint on hover) */
.btn-custom,
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
    background-color: var(--custom-btn-bg-color) !important;
    color: #fff !important;
    border-radius: var(--border-radius-large);
    padding: .75rem 1.75rem;
}

/* Pill-shaped primary CTA used in hero buttons */
.btn-pill { border-radius: var(--border-radius-large); padding: .75rem 1.75rem; }

/* Outline variants — completely static (no hover fill, no icon color change) */
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
.btn-outline-primary i,
.btn-outline-primary:hover i,
.btn-outline-primary:focus i { color: var(--primary-color) !important; }

.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
.btn-outline-secondary i,
.btn-outline-secondary:hover i,
.btn-outline-secondary:focus i { color: var(--secondary-color) !important; }

/* ───── Cards ───── */
.card { border-radius: var(--border-radius-medium); border: 1px solid var(--border-color); }
.card-soft { box-shadow: 0 .25rem 1rem rgba(20, 23, 39, .06) !important; }

/* ───── Sidenav ───── */
.sidenav { border-radius: var(--border-radius-medium) !important; }
.sidenav .navbar-nav .nav-link {
    color: var(--dark-color);
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-semibold);
}
.sidenav .navbar-nav .nav-link.active {
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(20,23,39,.07), 0 2px 4px -1px rgba(20,23,39,.04);
    color: var(--primary-color);
}
.sidenav .navbar-nav .nav-link.active .icon-shape {
    background-color: var(--primary-color) !important;
    background-image: none !important;
}
.sidenav .navbar-nav .nav-link.active .icon-shape i {
    color: #fff !important;
    opacity: 1 !important;
}
/* Non-active icons also get the brand color (Soft UI starts them grey) */
.sidenav .navbar-nav .nav-link .icon-shape i {
    color: var(--primary-color) !important;
    opacity: 1 !important;
}
.sidenav h6.text-uppercase { color: var(--secondary-color) !important; }

/* ───── Forms ───── */
.form-label {
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-semibold);
    color: var(--dark-color);
    font-size: .85rem;
}
.form-control, .form-select {
    border-color: var(--border-color);
    border-radius: var(--border-radius-small);
    font-family: var(--body-font-family);
    color: var(--dark-color);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem rgba(42, 112, 156, .15);
}

/* ───── Badges / pills ───── */
.badge { font-family: var(--body-font-family); font-weight: var(--font-weight-semibold); }
.status-pill {
    font-size: .8rem; font-weight: var(--font-weight-semibold);
    padding: .4rem 1rem; border-radius: var(--border-radius-large);
    display: inline-flex; align-items: center; gap: .35rem;
}

/* ───── Tables ───── */
.table thead th {
    font-size: .65rem;
    font-weight: var(--font-weight-bold);
    color: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
}
.table tbody tr { border-color: var(--border-color); }

/* ───── HR meeting room stage stays dark ───── */
.meet-stage { background: #0f1722; border-radius: var(--border-radius-medium); padding: 1rem; }

/* ───── Empty state ───── */
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--p-color); }
.empty-state .empty-icon {
    width: 80px; height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background-image: linear-gradient(310deg, var(--primary-color) 0%, var(--custom-btn-bg-hover-color) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 8px 24px rgba(42, 112, 156, .25);
}

/* ───── Page titles (lighter weight on dashboard pages — large hero sizes only for marketing) ───── */
.page-pretitle, .text-pretitle {
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: var(--font-weight-bold);
    color: var(--secondary-color);
    letter-spacing: .08em;
}

/* Constrain very large h-sizes inside dashboard pages so tables/cards stay readable */
.main-content h3 { font-size: 1.65rem; }
.main-content h4 { font-size: 1.35rem; }
.main-content h5 { font-size: 1.1rem; }
.main-content h6 { font-size: .95rem; }

/* ───── Cap logo image ───── */
.navbar-brand-img { width: 36px; height: 36px; object-fit: contain; }

/* ───── Top navbar tweaks ───── */
/* Remove the empty space above the navbar — Soft UI's .main-content and
   .top-2 class together leave a gap above the page header. */
.main-content { padding-top: 0 !important; }
.navbar-main {
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(20, 23, 39, .04), 0 0 0 1px var(--border-color) !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding: .5rem 1rem !important;
    min-height: 56px;
    top: 0 !important;
}
/* Make sure no element in the navbar overflows into the next card */
.navbar-main .nav-item.dropdown { position: relative; }
/* Push the page body content down a touch more so it never tucks under the
   sticky navbar */
.main-content > .container-fluid { padding-top: 1.25rem !important; }

/* ───── User dropdown menu ───── */
.dropdown-menu {
    padding: .4rem !important;
    border-radius: var(--border-radius-small) !important;
    box-shadow: 0 12px 30px rgba(20, 23, 39, .12), 0 0 0 1px var(--border-color);
    border: 0 !important;
    min-width: 200px;
}
.dropdown-item {
    padding: .55rem .75rem !important;
    border-radius: var(--border-radius-small) !important;
    background: transparent !important;
    color: var(--dark-color);
    font-size: .9rem;
    font-weight: var(--font-weight-semibold);
    transition: background .12s ease, color .12s ease;
    display: flex !important;
    align-items: center;
    gap: .5rem;
}
.dropdown-item i { width: 18px; text-align: center; font-size: 1rem; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active {
    background: var(--section-bg-color) !important;
    color: var(--primary-color) !important;
}
.dropdown-item.text-danger,
.dropdown-item.text-danger:visited { color: #f5365c !important; }
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background: rgba(245, 54, 92, .08) !important;
    color: #f5365c !important;
}
.dropdown-item .me-2 { margin-right: 0 !important; }
.dropdown-divider {
    border-color: var(--border-color) !important;
    margin: .3rem .2rem !important;
}

/* ───── Sticky footer ───── */
/* Make the main content area fill the viewport height so the footer is pinned
   to the bottom even when the page content is short. Without this, Soft UI's
   max-height: 100vh + the short candidate table leaves a big blank gap below. */
.main-content {
    min-height: 100vh !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
}
.main-content > .container-fluid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.main-content > .container-fluid > .footer {
    margin-top: auto;
}
.footer .copyright { color: var(--p-color); font-size: var(--copyright-font-size); }
.footer { padding-top: 1.5rem !important; }

/* ============================================================
   UNIVERSAL HOVER KILL-SWITCH
   Strip every visual change that any button — solid, outline,
   gradient, icon-only — applies on :hover / :focus / :active.
   The button must look pixel-identical to its rest state.
   ============================================================ */

/* Global: no transform, no transition, no animation, no filter, no opacity shift */
.btn,
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn.active,
.btn:not(:disabled):not(.disabled):hover,
.btn:not(:disabled):not(.disabled):focus,
.btn:not(:disabled):not(.disabled):active {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* Icons inside buttons — no scaling, no color shift, no transform on any state */
.btn .fa, .btn .fas, .btn .fa-solid, .btn .fab, .btn .far, .btn .fa-regular,
.btn:hover .fa, .btn:hover .fas, .btn:hover .fa-solid, .btn:hover .fab, .btn:hover .far,
.btn:focus .fa, .btn:focus .fas, .btn:focus .fa-solid, .btn:focus .fab, .btn:focus .far,
.btn:active .fa, .btn:active .fas, .btn:active .fa-solid, .btn:active .fab, .btn:active .far {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
}

/* Variants not previously locked — background / color / border identical on every state */

/* Warning (used by Transcribe action button) */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:focus-visible, .btn-warning:active, .btn-warning.active,
.bg-gradient-warning, .bg-gradient-warning:hover, .bg-gradient-warning:focus, .bg-gradient-warning:active {
    background-color: #fbcf33 !important;
    background-image: linear-gradient(310deg, #f5a623 0%, #fbcf33 100%) !important;
    color: #1a1f2c !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(251, 207, 51, .25) !important;
}

/* Info (used by Analyze action button) */
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:focus-visible, .btn-info:active, .btn-info.active {
    background-image: linear-gradient(310deg, var(--secondary-color) 0%, var(--primary-color) 100%) !important;
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(42, 112, 156, .22) !important;
}

/* Secondary solid */
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:focus-visible, .btn-secondary:active, .btn-secondary.active {
    background-color: var(--secondary-color) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--secondary-color) !important;
    box-shadow: none !important;
}

/* Light / Dark */
.btn-light, .btn-light:hover, .btn-light:focus, .btn-light:focus-visible, .btn-light:active {
    background-color: #f8f9fa !important;
    background-image: none !important;
    color: var(--dark-color) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}
.btn-dark, .btn-dark:hover, .btn-dark:focus, .btn-dark:focus-visible, .btn-dark:active {
    background-color: var(--dark-color) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--dark-color) !important;
    box-shadow: none !important;
}

/* Outline variants reinforcement — no background flash on hover */
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active,
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active,
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active,
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active,
.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active,
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Strip Soft UI's pseudo-element shimmer overlays on hover */
.btn:hover::before, .btn:hover::after,
.btn:focus::before, .btn:focus::after,
.btn:active::before, .btn:active::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}

/* Buttons that change cursor are fine; everything else must be static */
.btn:not(:disabled):not(.disabled) { cursor: pointer; }

/* ============================================================
   ICON-ONLY BUTTON LOCKDOWN — pen edit, trash delete, etc.
   These are the small square buttons in tables. They must be
   100 % static on hover/focus/active — no shadow, no border
   shift, no background flash, no icon color change.
   ============================================================ */

/* Modern browsers (:has support) */
.btn-sm:has(> i:only-child),
.btn-sm:has(> i:only-child):hover,
.btn-sm:has(> i:only-child):focus,
.btn-sm:has(> i:only-child):focus-visible,
.btn-sm:has(> i:only-child):active,
.btn-sm:has(> i:only-child).active {
    box-shadow: none !important;
    outline: 0 !important;
    border-width: 1px !important;
    border-style: solid !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Fallback: explicitly target the action-button classes used in the lists
   (works even if a browser ignores :has). */
.btn-sm.btn-outline-secondary,
.btn-sm.btn-outline-secondary:hover,
.btn-sm.btn-outline-secondary:focus,
.btn-sm.btn-outline-secondary:focus-visible,
.btn-sm.btn-outline-secondary:active,
.btn-sm.btn-outline-secondary.active {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
}
.btn-sm.btn-outline-secondary i,
.btn-sm.btn-outline-secondary:hover i,
.btn-sm.btn-outline-secondary:focus i,
.btn-sm.btn-outline-secondary:active i {
    color: var(--secondary-color) !important;
    transform: none !important;
    transition: none !important;
}

.btn-sm.btn-outline-danger,
.btn-sm.btn-outline-danger:hover,
.btn-sm.btn-outline-danger:focus,
.btn-sm.btn-outline-danger:focus-visible,
.btn-sm.btn-outline-danger:active,
.btn-sm.btn-outline-danger.active {
    background-color: transparent !important;
    background-image: none !important;
    color: #f5365c !important;
    border-color: #f5365c !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
}
.btn-sm.btn-outline-danger i,
.btn-sm.btn-outline-danger:hover i,
.btn-sm.btn-outline-danger:focus i,
.btn-sm.btn-outline-danger:active i {
    color: #f5365c !important;
    transform: none !important;
    transition: none !important;
}

.btn-sm.btn-outline-primary,
.btn-sm.btn-outline-primary:hover,
.btn-sm.btn-outline-primary:focus,
.btn-sm.btn-outline-primary:focus-visible,
.btn-sm.btn-outline-primary:active,
.btn-sm.btn-outline-primary.active {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
}
.btn-sm.btn-outline-primary i,
.btn-sm.btn-outline-primary:hover i,
.btn-sm.btn-outline-primary:focus i,
.btn-sm.btn-outline-primary:active i {
    color: var(--primary-color) !important;
    transform: none !important;
    transition: none !important;
}

/* Solid btn-sm icon buttons (eg. bg-gradient-success "Start") — kill hover lift */
.btn-sm.bg-gradient-success,
.btn-sm.bg-gradient-success:hover,
.btn-sm.bg-gradient-success:focus,
.btn-sm.bg-gradient-success:active,
.btn-sm.btn-success,
.btn-sm.btn-success:hover,
.btn-sm.btn-success:focus,
.btn-sm.btn-success:active {
    background-image: linear-gradient(310deg, #2a9c75 0%, var(--custom-btn-bg-hover-color) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(45, 206, 137, .22) !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
}

/* Final blanket — strip ANY box-shadow / border change between rest and hover.
   Each variant has already pinned its own shadow above; this just kills any
   leftover Soft UI rule that adds an extra shadow on hover. */
.btn:hover, .btn:focus, .btn:focus-visible, .btn:active {
    border-width: 1px !important;
    border-style: solid !important;
}

/* ============================================================
   BOOTSTRAP 5 CSS-VAR LOCKDOWN (the real fix)
   Soft UI's buttons use Bootstrap 5's --bs-btn-hover-* /
   --bs-btn-active-* variables. Bootstrap's .btn:hover rule
   reads these vars, so even though our colors are !important
   at the literal property, the variable values still flicker
   focus rings and shadows. Redefine every hover/active var to
   equal its rest counterpart — that short-circuits all hover
   behavior at the source.
   ============================================================ */

/* btn-outline-secondary (Edit pen) */
.btn-outline-secondary {
    --bs-btn-color: var(--secondary-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--secondary-color) !important;
    --bs-btn-hover-bg: transparent !important;
    --bs-btn-hover-border-color: var(--border-color) !important;
    --bs-btn-active-color: var(--secondary-color) !important;
    --bs-btn-active-bg: transparent !important;
    --bs-btn-active-border-color: var(--border-color) !important;
    --bs-btn-active-shadow: none !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
    --bs-btn-disabled-color: var(--secondary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--border-color);
}

/* btn-outline-danger (Delete trash) */
.btn-outline-danger {
    --bs-btn-color: #f5365c;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #f5365c;
    --bs-btn-hover-color: #f5365c !important;
    --bs-btn-hover-bg: transparent !important;
    --bs-btn-hover-border-color: #f5365c !important;
    --bs-btn-active-color: #f5365c !important;
    --bs-btn-active-bg: transparent !important;
    --bs-btn-active-border-color: #f5365c !important;
    --bs-btn-active-shadow: none !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}

/* btn-outline-primary */
.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: var(--primary-color) !important;
    --bs-btn-hover-bg: transparent !important;
    --bs-btn-hover-border-color: var(--primary-color) !important;
    --bs-btn-active-color: var(--primary-color) !important;
    --bs-btn-active-bg: transparent !important;
    --bs-btn-active-border-color: var(--primary-color) !important;
    --bs-btn-active-shadow: none !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}

/* btn-primary (solid brand) */
.btn-primary,
.btn.bg-brand,
.bg-gradient-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--primary-color) !important;
    --bs-btn-hover-border-color: var(--primary-color) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--primary-color) !important;
    --bs-btn-active-border-color: var(--primary-color) !important;
    --bs-btn-active-shadow: none !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}

/* btn-success / bg-gradient-success (Start interview) */
.btn-success,
.bg-gradient-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2a9c75;
    --bs-btn-border-color: #2a9c75;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #2a9c75 !important;
    --bs-btn-hover-border-color: #2a9c75 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #2a9c75 !important;
    --bs-btn-active-border-color: #2a9c75 !important;
    --bs-btn-active-shadow: none !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}

/* btn-danger / bg-gradient-danger */
.btn-danger,
.bg-gradient-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #f5365c;
    --bs-btn-border-color: #f5365c;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #f5365c !important;
    --bs-btn-hover-border-color: #f5365c !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #f5365c !important;
    --bs-btn-active-border-color: #f5365c !important;
    --bs-btn-active-shadow: none !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}

/* btn-warning (Transcribe) */
.btn-warning,
.bg-gradient-warning {
    --bs-btn-color: #1a1f2c;
    --bs-btn-bg: #fbcf33;
    --bs-btn-border-color: #fbcf33;
    --bs-btn-hover-color: #1a1f2c !important;
    --bs-btn-hover-bg: #fbcf33 !important;
    --bs-btn-hover-border-color: #fbcf33 !important;
    --bs-btn-active-color: #1a1f2c !important;
    --bs-btn-active-bg: #fbcf33 !important;
    --bs-btn-active-border-color: #fbcf33 !important;
    --bs-btn-active-shadow: none !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}

/* btn-info (Analyze) */
.btn-info,
.bg-gradient-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--primary-color) !important;
    --bs-btn-hover-border-color: var(--primary-color) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--primary-color) !important;
    --bs-btn-active-border-color: var(--primary-color) !important;
    --bs-btn-active-shadow: none !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}

/* btn-secondary */
.btn-secondary,
.bg-gradient-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--secondary-color);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--secondary-color) !important;
    --bs-btn-hover-border-color: var(--secondary-color) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--secondary-color) !important;
    --bs-btn-active-border-color: var(--secondary-color) !important;
    --bs-btn-active-shadow: none !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}

/* btn-light / btn-dark */
.btn-light {
    --bs-btn-hover-color: var(--dark-color) !important;
    --bs-btn-hover-bg: #f8f9fa !important;
    --bs-btn-hover-border-color: var(--border-color) !important;
    --bs-btn-active-color: var(--dark-color) !important;
    --bs-btn-active-bg: #f8f9fa !important;
    --bs-btn-active-border-color: var(--border-color) !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}
.btn-dark {
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--dark-color) !important;
    --bs-btn-hover-border-color: var(--dark-color) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--dark-color) !important;
    --bs-btn-active-border-color: var(--dark-color) !important;
    --bs-btn-focus-shadow-rgb: 0, 0, 0 !important;
}

/* Universal — strip the focus ring that --bs-btn-focus-shadow-rgb would draw */
.btn:focus,
.btn:focus-visible,
.btn.focus {
    box-shadow: none !important;
    outline: 0 !important;
}

/* Bootstrap display utilities must win over our .btn { display: inline-block !important } lock.
   Without this, applying .d-none to a button does nothing because both rules
   are !important and the .btn rule loads later. */
.btn.d-none,
.btn.d-none:hover,
.btn.d-none:focus,
.btn.d-none:active,
a.btn.d-none,
button.btn.d-none { display: none !important; }
.btn.d-block { display: block !important; }
.btn.d-flex  { display: inline-flex !important; }
.btn.d-inline-flex { display: inline-flex !important; }
.btn.invisible { visibility: hidden !important; }

/* ============================================================
   SOFT UI HOVER-LIFT KILL — Soft UI's CSS has rules that add a
   drop shadow on hover (which makes buttons LOOK bigger) and dim
   opacity on click. Both have higher specificity than per-variant
   rules. Strip them universally, then restore each variant's
   rest-state shadow on hover so solid buttons keep their glow.
   ============================================================ */

/* 1. Strip Soft UI's hover drop shadow + active opacity */
.btn:hover,
.btn:hover:not(.btn-icon-only),
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn:active:focus,
.btn:active:hover,
.btn.active,
.btn-check + .btn:hover,
.btn-check:checked + .btn:hover {
    box-shadow: none !important;
    opacity: 1 !important;
}

/* 2. Re-apply rest-state shadow on every state for solid variants */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:focus-visible, .btn-primary:active, .btn-primary.active,
.bg-gradient-primary, .bg-gradient-primary:hover, .bg-gradient-primary:focus, .bg-gradient-primary:active,
.btn.bg-brand, .btn.bg-brand:hover, .btn.bg-brand:focus, .btn.bg-brand:active {
    box-shadow: 0 4px 14px rgba(42, 112, 156, .22) !important;
}
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:focus-visible, .btn-success:active, .btn-success.active,
.bg-gradient-success, .bg-gradient-success:hover, .bg-gradient-success:focus, .bg-gradient-success:active {
    box-shadow: 0 4px 14px rgba(45, 206, 137, .22) !important;
}
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:focus-visible, .btn-danger:active, .btn-danger.active,
.bg-gradient-danger, .bg-gradient-danger:hover, .bg-gradient-danger:focus, .bg-gradient-danger:active {
    box-shadow: 0 4px 14px rgba(245, 54, 92, .22) !important;
}
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:focus-visible, .btn-warning:active, .btn-warning.active {
    box-shadow: 0 4px 14px rgba(251, 207, 51, .25) !important;
}
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:focus-visible, .btn-info:active, .btn-info.active,
.bg-gradient-info, .bg-gradient-info:hover, .bg-gradient-info:focus, .bg-gradient-info:active {
    box-shadow: 0 4px 14px rgba(42, 112, 156, .22) !important;
}

/* Outline variants — always flat, no shadow on any state */
.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-outline-danger, .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active,
.btn-outline-success, .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active,
.btn-outline-warning, .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active,
.btn-outline-info, .btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active,
.btn-outline-light, .btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active,
.btn-outline-dark, .btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active {
    box-shadow: none !important;
}

/* ============================================================
   FINAL NUCLEAR LOCKDOWN — html body prefix bumps specificity
   above anything Soft UI can throw. Every button dimension,
   spacing, transform, and decoration is locked across every
   interactive state. If hover STILL changes anything visually
   after this, it's a browser default we can't reach via CSS.
   ============================================================ */
html body .btn,
html body .btn:hover,
html body .btn:focus,
html body .btn:focus-visible,
html body .btn:active,
html body .btn.active,
html body .btn:not(:disabled):not(.disabled):hover,
html body .btn:not(:disabled):not(.disabled):focus,
html body .btn:not(:disabled):not(.disabled):active,
html body a.btn:hover,
html body button.btn:hover,
html body label.btn:hover {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    letter-spacing: .01em !important;
    word-spacing: normal !important;
    text-shadow: none !important;
    text-decoration: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    outline: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ALL btn-sm — unified 36px tall, regardless of icon-only vs icon+text.
   Uses inline-flex with gap for clean icon-to-text spacing. */
html body .btn-sm,
html body .btn-sm:hover,
html body .btn-sm:focus,
html body .btn-sm:focus-visible,
html body .btn-sm:active,
html body .btn-sm.active,
html body a.btn-sm, html body button.btn-sm {
    /* Lock Bootstrap's CSS variables — these drive .btn's padding/font on every state */
    --bs-btn-padding-y: 0 !important;
    --bs-btn-padding-x: .85rem !important;
    --bs-btn-font-size: .8rem !important;
    --bs-btn-line-height: 1 !important;
    --bs-btn-border-radius: .5rem !important;
    --bs-btn-focus-box-shadow: 0 0 0 0 transparent !important;
    --bs-btn-active-shadow: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 1 !important;
    padding: 0 .85rem !important;
    font-size: .8rem !important;
    min-width: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;  /* contains Soft UI's click ripple inside button bounds */
    text-overflow: clip !important;
    flex-shrink: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    border-width: 1px !important;
    border-style: solid !important;
    position: relative !important;  /* anchor any absolute child (ripple) to button */
    isolation: isolate !important;  /* new stacking context — ripple can't escape */
}
/* Hide any DOM elements the ripple effect might inject */
html body .btn-sm > .ripple,
html body .btn-sm > .waves-ripple,
html body .btn-sm > [class*="ripple"] { display: none !important; }
/* Respect Bootstrap width utilities — only set width:auto when no width util present */
html body .btn-sm:not(.w-100):not(.w-75):not(.w-50):not(.w-25):not(.flex-fill) { width: auto !important; }
html body .btn-sm.w-100 { width: 100% !important; max-width: 100% !important; }
html body .btn-sm.flex-fill { flex: 1 1 auto !important; width: auto !important; }
html body .btn-sm > .fa,
html body .btn-sm > .fas,
html body .btn-sm > .fab,
html body .btn-sm > .far {
    font-size: .95rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}
/* Stop the me-1/me-2 utility margins from doubling up with our flex gap */
html body .btn-sm > .me-1, html body .btn-sm > .me-2,
html body .btn-sm > .fa.me-1, html body .btn-sm > .fas.me-1, html body .btn-sm > .fab.me-1,
html body .btn-sm > .fa.me-2, html body .btn-sm > .fas.me-2, html body .btn-sm > .fab.me-2 {
    margin-right: 0 !important;
}

/* Default .btn (not sm, not lg) — exactly 40px tall on every state */
html body .btn:not(.btn-sm):not(.btn-lg),
html body .btn:not(.btn-sm):not(.btn-lg):hover,
html body .btn:not(.btn-sm):not(.btn-lg):focus,
html body .btn:not(.btn-sm):not(.btn-lg):active {
    --bs-btn-padding-y: 0 !important;
    --bs-btn-padding-x: 1.15rem !important;
    --bs-btn-font-size: .875rem !important;
    --bs-btn-focus-box-shadow: 0 0 0 0 transparent !important;
    --bs-btn-active-shadow: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    padding: 0 1.15rem !important;
    font-size: .875rem !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
    white-space: nowrap !important;
}
/* Hide ripple injected children for all .btn sizes */
html body .btn > .ripple,
html body .btn > .waves-ripple,
html body .btn > [class*="ripple"] { display: none !important; }

/* ============================================================
   ZERO-TRANSITION LOCKDOWN — kill every transition / animation
   on buttons AND their children. If a property still changes on
   hover, the change is instant (no visible animation between
   states). Combined with the per-variant color/shadow locks
   above, this guarantees no visual hover effect at all.
   ============================================================ */
html body .btn,
html body .btn *,
html body .btn::before,
html body .btn::after,
html body .btn:hover,
html body .btn:hover *,
html body .btn:focus,
html body .btn:focus *,
html body .btn:focus-visible,
html body .btn:focus-visible *,
html body .btn:active,
html body .btn:active * {
    transition: 0s linear !important;
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    -webkit-transition: 0s linear !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    will-change: auto !important;
}

/* NO SHADOWS ON ANY BUTTON IN ANY STATE.
   Shadows extend outside the button's bounding box and visually create
   the illusion of "growing" on hover. Flat design = zero size shift. */
html body .btn,
html body .btn:hover,
html body .btn:focus,
html body .btn:focus-visible,
html body .btn:active,
html body .btn.active,
html body .btn-primary, html body .btn-primary:hover, html body .btn-primary:focus, html body .btn-primary:active,
html body .btn-secondary, html body .btn-secondary:hover, html body .btn-secondary:focus, html body .btn-secondary:active,
html body .btn-success, html body .btn-success:hover, html body .btn-success:focus, html body .btn-success:active,
html body .btn-danger, html body .btn-danger:hover, html body .btn-danger:focus, html body .btn-danger:active,
html body .btn-warning, html body .btn-warning:hover, html body .btn-warning:focus, html body .btn-warning:active,
html body .btn-info, html body .btn-info:hover, html body .btn-info:focus, html body .btn-info:active,
html body .btn-light, html body .btn-light:hover, html body .btn-light:focus, html body .btn-light:active,
html body .btn-dark, html body .btn-dark:hover, html body .btn-dark:focus, html body .btn-dark:active,
html body .btn-outline-primary, html body .btn-outline-primary:hover, html body .btn-outline-primary:focus, html body .btn-outline-primary:active,
html body .btn-outline-secondary, html body .btn-outline-secondary:hover, html body .btn-outline-secondary:focus, html body .btn-outline-secondary:active,
html body .btn-outline-danger, html body .btn-outline-danger:hover, html body .btn-outline-danger:focus, html body .btn-outline-danger:active,
html body .btn-outline-success, html body .btn-outline-success:hover, html body .btn-outline-success:focus, html body .btn-outline-success:active,
html body .btn-outline-warning, html body .btn-outline-warning:hover, html body .btn-outline-warning:focus, html body .btn-outline-warning:active,
html body .btn-outline-info, html body .btn-outline-info:hover, html body .btn-outline-info:focus, html body .btn-outline-info:active,
html body .bg-gradient-primary, html body .bg-gradient-primary:hover, html body .bg-gradient-primary:focus, html body .bg-gradient-primary:active,
html body .bg-gradient-success, html body .bg-gradient-success:hover, html body .bg-gradient-success:focus, html body .bg-gradient-success:active,
html body .bg-gradient-danger, html body .bg-gradient-danger:hover, html body .bg-gradient-danger:focus, html body .bg-gradient-danger:active,
html body .bg-gradient-info, html body .bg-gradient-info:hover, html body .bg-gradient-info:focus, html body .bg-gradient-info:active,
html body .bg-gradient-secondary, html body .bg-gradient-secondary:hover, html body .bg-gradient-secondary:focus, html body .bg-gradient-secondary:active,
html body .btn.bg-brand, html body .btn.bg-brand:hover, html body .btn.bg-brand:focus, html body .btn.bg-brand:active {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}