/* ==========================================================================
   Modern Visual Design System
   Applied after site.css, custom.css, and whitelabel.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
    /* Neutral gray scale */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    /* Semantic text colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-700);
    --color-text-body: var(--color-gray-700);
    --color-text-muted: var(--color-gray-500);
    --color-text-placeholder: var(--color-gray-400);

    /* Surface / background tokens */
    --color-surface-page: var(--color-gray-50);
    --color-surface-card: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-inset: var(--color-gray-100);

    /* Border tokens */
    --color-border-default: var(--color-gray-200);
    --color-border-muted: var(--color-gray-100);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Typography */
    --font-family-base: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.5rem;
    --line-height-base: 1.5;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;

    /* Transition */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
}

/* --------------------------------------------------------------------------
   2. Base Typography & Page Background
   -------------------------------------------------------------------------- */
html {
    font-family: var(--font-family-base) !important;
}

body {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base) !important;
    color: var(--color-text-body) !important;
    background-color: var(--color-surface-page) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.page-title {
    color: var(--color-text-primary) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   3. Card & Panel Modernization
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--color-surface-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.card-header {
    background-color: var(--color-surface-card);
    border-bottom: 1px solid var(--color-border-default);
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
}

/* --------------------------------------------------------------------------
   3b. Collapsible Panel Consistency
   Ensures toggle header + collapse body form a cohesive rounded unit
   -------------------------------------------------------------------------- */

/* ManageNumbers Tag Visibility pattern: .card > a.btn-light + sibling .collapse */
.card:has(+ .collapse),
.card:has(> [data-bs-toggle="collapse"]) {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    margin-bottom: 0;
}

.card + .collapse > .card-body,
.card + .collapse > .card-body.tags {
    border: 1px solid var(--color-border-default);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background-color: var(--color-surface-card);
}

.card + .collapse.show > .card-body,
.card + .collapse.show > .card-body.tags {
    border-top: none;
}

/* CallView Column Visibility pattern: .panel-group > a > .panel-heading + .collapse */
.panel-group {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-default);
}

.panel-group .panel-heading {
    border-radius: 0;
    margin: 0;
}

.panel-group .collapse > .card-body {
    border: none;
    border-top: 1px solid var(--color-border-default);
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   4. Table Modernization
   -------------------------------------------------------------------------- */
.table {
    color: var(--color-text-body) !important;
    /*border: none !important;*/
    border: 1px solid lightgray!important;
    /*border-collapse: separate;*/
    border-spacing: 0;
}

.table > thead > tr > th {
    background-color: var(--color-gray-100) !important;
    color: var(--color-text-secondary) !important;
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--color-gray-300) !important;
    border-top: 1px solid var(--color-gray-200) !important;
    border-right: none !important;
    padding: 0.75rem 1rem !important;
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-bottom: 1px solid var(--color-border-muted);
    border-right: none !important;
    padding: 0.625rem 1rem !important;
    vertical-align: middle;
}

.table > tbody > tr > td {
    border-collapse: collapse!important;
    border: 1px solid lightgray!important;
}

.table > tbody > tr:last-child > td {
    border-bottom: none;
}

.table > tbody > tr {
    transition: background-color var(--transition-fast);
}

.table > tbody > tr:hover {
    background-color: var(--color-gray-50) !important;
}

/* Fix striped table color override */
.table-striped > tbody > tr:nth-of-type(odd) {
    color: var(--color-text-body) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--color-text-body) !important;
}

/* Remove the old top border on tbody */
.table > :not(:first-child) {
    border-top: none !important;
}

/* Keep condensed table variants functional but modernize them */
.table.table-condensed > tbody > tr > td {
    padding: 0.375rem 0.75rem !important;
}

.table-condensed-b td {
    padding: 0.25rem 0.5rem !important;
}

/* Override old colored table headers to use brand accent */
.table-kall8, .table-kall8 > td, .table-kall8 > th {
    background-color: var(--color-surface-inset) !important;
    border-bottom: 1px solid var(--color-border-default) !important;
}

.table-purple > tbody > tr > th,
.table-purple > thead {
    background-color: var(--color-surface-inset) !important;
    border-left: 3px solid var(--brand-primary) !important;
}

.table-callview > tbody > tr > th,
.table-callview > thead {
    background-color: var(--color-surface-inset) !important;
    border-left: 3px solid var(--brand-primary) !important;
}

.tbl-wrapper table thead,
.floatThead-wrapper table thead {
    background-color: var(--color-surface-inset) !important;
}

.table.table-colored {
    border-bottom-color: var(--brand-primary) !important;
}

.table-colored > thead > tr > th {
    background-color: var(--color-surface-inset) !important;
    color: var(--color-text-muted) !important;
    border-bottom: 2px solid var(--brand-primary) !important;
    border-color: var(--color-border-default) !important;
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   5. Dashboard Tiles & KPI Modernization
   -------------------------------------------------------------------------- */
.huge {
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    color: inherit;
}

.card-subtext {
    font-size: 1.1em !important;
    color: inherit;
    font-weight: 500;
    opacity: 0.85;
}

/* Ensure panels inside dashboard cards fill the card completely */
.grid-wrapper .card .panel,
.grid-wrapper .ecard .panel {
    border-radius: 0 !important;
    overflow: hidden;
    /*-- commented out to make dashboard panels not fill whitespace --*/
    /*flex: 1;*/
}

.grid-wrapper .card,
.grid-wrapper .ecard {
    display: flex;
    flex-direction: column;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

/* Ensure text inside full-color dashboard panels is readable (white) */
.grid-wrapper .card .panel[class*="bg-"] .huge,
.grid-wrapper .card .panel[class*="bg-"] .card-subtext,
.grid-wrapper .card .panel[class*="bg-"] .panel-heading,
.grid-wrapper .card .panel[class*="bg-"] a {
    color: #fff !important;
}

/* Force white text for ALL full-color bg- dashboard tile classes */
.bg-red, .bg-pink, .bg-purple, .bg-deep-purple,
.bg-indigo, .bg-blue, .bg-light-blue, .bg-cyan,
.bg-teal, .bg-green, .bg-light-green, .bg-orange,
.bg-deep-orange, .bg-brown, .bg-grey, .bg-blue-grey,
.bg-black, .bg-accuroute, .bg-roundtrip {
    color: #fff !important;
}

.bg-red .huge, .bg-pink .huge, .bg-purple .huge, .bg-deep-purple .huge,
.bg-indigo .huge, .bg-blue .huge, .bg-light-blue .huge, .bg-cyan .huge,
.bg-teal .huge, .bg-green .huge, .bg-light-green .huge, .bg-orange .huge,
.bg-deep-orange .huge, .bg-brown .huge, .bg-grey .huge, .bg-blue-grey .huge,
.bg-black .huge, .bg-accuroute .huge, .bg-roundtrip .huge,
.bg-danger-dark .huge, .bg-success-dark .huge {
    color: #fff !important;
}

.bg-red .card-subtext, .bg-pink .card-subtext, .bg-purple .card-subtext,
.bg-deep-purple .card-subtext, .bg-indigo .card-subtext, .bg-blue .card-subtext,
.bg-light-blue .card-subtext, .bg-cyan .card-subtext, .bg-teal .card-subtext,
.bg-green .card-subtext, .bg-light-green .card-subtext, .bg-orange .card-subtext,
.bg-deep-orange .card-subtext, .bg-brown .card-subtext, .bg-grey .card-subtext,
.bg-blue-grey .card-subtext, .bg-black .card-subtext, .bg-accuroute .card-subtext,
.bg-roundtrip .card-subtext, .bg-danger-dark .card-subtext, .bg-success-dark .card-subtext {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Replace full-color dashboard tile backgrounds with white card + accent border */
.bg-primary-muted {
    background-color: var(--color-surface-card) !important;
    color: var(--color-text-primary) !important;
    border-left: 4px solid #20a8d8 !important;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
}

/*.bg-primary-muted .huge,
.bg-primary-muted .card-subtext {
    color: var(--color-text-primary) !important;
    opacity: 1;
}
*/
.bg-info-muted {
    background-color: var(--color-surface-card) !important;
    color: var(--color-text-primary) !important;
    border-left: 4px solid #63c2de !important;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
}

/*.bg-info-muted .huge,
.bg-info-muted .card-subtext {
    color: var(--color-text-primary) !important;
    opacity: 1;
}
*/
.bg-warning-muted {
    background-color: var(--color-surface-card) !important;
    color: var(--color-text-primary) !important;
    border-left: 4px solid #ffc107 !important;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
}

/*.bg-warning-muted .huge,
.bg-warning-muted .card-subtext {
    color: var(--color-text-primary) !important;
    opacity: 1;
}
*/
.bg-danger-muted {
    background-color: var(--color-surface-card) !important;
    color: var(--color-text-primary) !important;
    border-left: 4px solid #f86c6b !important;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
}

/*.bg-danger-muted .huge,
.bg-danger-muted .card-subtext {
    color: var(--color-text-primary) !important;
    opacity: 1;
}
*/
.bg-success-muted {
    background-color: var(--color-surface-card) !important;
    color: var(--color-text-primary) !important;
    border-left: 4px solid #4dbd74 !important;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
}

/*.bg-success-muted .huge,
.bg-success-muted .card-subtext {
    color: var(--color-text-primary) !important;
    opacity: 1;
}
*/
.bg-secondary-muted {
    background-color: var(--color-surface-card) !important;
    color: var(--color-text-primary) !important;
    border-left: 4px solid #6c757d !important;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    opacity: 1 !important;
}

/*.bg-secondary-muted .huge,
.bg-secondary-muted .card-subtext {
    color: var(--color-text-primary) !important;
    opacity: 1;
}
*/
/*-- original muted colors from V2 --*/
/* add some muted colors for dashboard */
.bg-primary-muted {
    background-color: #20a8d8 !important;
    color: white !important;
}

.bg-info-muted {
    background-color: #63c2de !important;
    color: white !important;
}

.bg-warning-muted {
    background-color: #ffc107 !important;
    color: white !important;
}

.bg-danger-muted {
    background-color: #f86c6b !important;
    color: white !important;
}

.bg-success-muted {
    background-color: #4dbd74 !important;
    color: white !important;
}

.bg-secondary-muted {
    background-color: #6c757d !important;
    opacity: .8;
    color: white !important;
}


/* --------------------------------------------------------------------------
   6. Button Modernization
   -------------------------------------------------------------------------- */

/* Shared modern button base */
.btn {
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-base) !important;
    letter-spacing: 0.01em;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0);
}

/* Prevent input-group items from wrapping when select2 is inside */
.input-group:has(.select2) {
    flex-wrap: nowrap;
}

.input-group .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}

/* Modernize product-specific button hover: use color-shift instead of opacity */
.btn-purple:hover,
.btn-accuroute:hover {
    opacity: 1 !important;
    background-color: #774e8f !important;
    border-color: #6a4580 !important;
}

.btn-callview:hover,
.btn-darkgreen:hover {
    opacity: 1 !important;
    background-color: #3c8c3c !important;
    border-color: #357835 !important;
}

/* Remove opacity-based hover from product buttons */
.btn-purple,
.btn-accuroute,
.btn-callview {
    opacity: 1 !important;
}

/* Grey button modernization */
.btn-grey {
    border-radius: var(--radius-md) !important;
}

/* Default / outline button modernization */
.btn-default {
    border-color: var(--color-border-default);
    border-radius: var(--radius-md) !important;
}

.btn-default:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

/* --------------------------------------------------------------------------
   7. Separator Modernization
   -------------------------------------------------------------------------- */
.separator,
.separator-1,
.separator-2,
.separator-3,
.separator-2rr {
    height: 1px !important;
    background: none !important;
}

.separator:after,
.separator-1:after,
.separator-2:after,
.separator-3:after,
.separator-2rr:after {
    background: var(--color-border-default) !important;
    height: 1px;
}

/* --------------------------------------------------------------------------
   8. Dropdown / Nav Modernization
   -------------------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-gray-100);
}

.dropdown-header {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 0.5rem 0.75rem 0.25rem;
}

/* --------------------------------------------------------------------------
   9. Modal Modernization
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--color-border-default);
    padding: 1rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--color-border-default);
    padding: 1rem 1.5rem;
}

/* --------------------------------------------------------------------------
   10. Form Control Modernization
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--radius-md);
    border-color: var(--color-border-default);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(46, 113, 166, 0.15) !important;
}

/* --------------------------------------------------------------------------
   11. Footer Modernization
   -------------------------------------------------------------------------- */
.footer {
    background-color: var(--color-surface-card) !important;
    border-top: 1px solid var(--color-border-default) !important;
}

/* --------------------------------------------------------------------------
   12. Body Content Wrapper
   -------------------------------------------------------------------------- */
.body-content {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* --------------------------------------------------------------------------
   13. Nav Pills / Tabs
   -------------------------------------------------------------------------- */
.nav-pills .nav-link {
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.nav-tabs .nav-link {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* --------------------------------------------------------------------------
   14. Alert Modernization
   -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--radius-lg);
}

.alert-brand {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   15. Badge Modernization
   -------------------------------------------------------------------------- */
.badge {
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   16. Pagination
   -------------------------------------------------------------------------- */
.page-link {
    border-color: var(--color-border-default);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.page-link:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-border-default);
}

.page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* --------------------------------------------------------------------------
   17. Well / Inset Panels
   -------------------------------------------------------------------------- */
.well {
    background-color: var(--color-surface-inset);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   17b. Tag Display Consistency (CallView Calls grid)
   Tag title (.label-brand-light) and tag value (.well) should match radius
   -------------------------------------------------------------------------- */
a.bootstrap-tagsinput {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    margin-bottom: 0.25rem;
}

a.bootstrap-tagsinput .tag.label {
    display: block;
    border-radius: 0;
    padding: 0.2rem 0.5rem;
    margin: 0;
}

a.bootstrap-tagsinput .well {
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--color-border-default);
    margin-bottom: 0;
    padding: 0.2rem 0.5rem;
    min-height: auto;
}

a.bootstrap-tagsinput .well.well-sm {
    padding: 0.2rem 0.5rem;
}

/* --------------------------------------------------------------------------
   18. Scrollbar Modernization (Webkit)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   19. Brand Heritage Accent (Subtle Warm Touches)
   Classic Dial800 orange, softened to a warm copper, used sparingly
   to hint at the existing brand without clashing with the blue-slate scheme.
   -------------------------------------------------------------------------- */
:root {
    --color-accent-warm: #D4774B;
    --color-accent-warm-hover: #BF6A42;
    --color-accent-warm-subtle: rgba(212, 119, 75, 0.08);
    --color-accent-warm-border: rgba(212, 119, 75, 0.25);
}

/* Warm accent on info/tip alert panels (e.g. ManageNumbers info box) */
.alert-adjust {
    border-left: 3px solid var(--color-accent-warm) !important;
}

/* Warm accent icon class — for fa icons inside alert/info panels.
   Links with .text-brand-light keep the slate-blue brand-secondary via whitelabel. */
i.text-brand-light,
.alert .text-brand-light,
.alert-adjust .text-brand-light {
    color: var(--color-accent-warm) !important;
}

/* Active nav pill gets a subtle warm bottom accent */
.nav-pills .nav-link.active {
    position: relative;
}
.nav-pills .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: var(--color-accent-warm);
    border-radius: 1px;
    opacity: 0.6;
}

/* Thin warm accent rule under the top dark header bar */
.navbar-top {
    border-bottom: 2px solid var(--color-accent-warm) !important;
}

/* Utility classes for developer use */
.text-accent-warm { color: var(--color-accent-warm) !important; }
.text-accent-warm:hover { color: var(--color-accent-warm-hover) !important; }
.text-brand-light:hover, a.text-brand-light:hover { color: var(--color-accent-warm-hover) !important; }
.border-accent-warm { border-color: var(--color-accent-warm) !important; }
.bg-accent-warm-subtle { background-color: var(--color-accent-warm-subtle) !important; }

/* --------------------------------------------------------------------------
   20. Button Function Consistency
   Ensures buttons are colored by purpose across all grids/pages:
     • Properties / Edit  → btn-brand        (steel blue)
     • Tags / Secondary   → btn-brand-light   (slate blue)
      • Delete / Remove    → btn-danger         (outline in grids, filled in modals)
      • Design / Creative  → btn-brand-light    (slate blue, same as Designer)
      • Save / Confirm     → btn-success        (cooler teal-green)
     • Neutral / Export   → btn-secondary      (gray)
   -------------------------------------------------------------------------- */

/* --- Soften danger/delete buttons in grid rows (btn-xs context) ---
   Outline style reduces visual noise in dense grid rows while keeping
   the red color clearly signaling a destructive action. On hover the
   button fills to confirm intent. */
.btn-xs.btn-danger,
.btn-xs.btn-danger:not(:hover) {
    background-color: transparent;
    color: #b83b3b;
    border: 1px solid #cd5c5c;
}

.btn-xs.btn-danger:hover,
.btn-xs.btn-danger:focus {
    background-color: #b83b3b;
    color: #fff;
    border-color: #b83b3b;
    box-shadow: var(--shadow-sm);
}

.btn-xs.btn-danger:active {
    background-color: #a33535;
    border-color: #a33535;
}

/* --- Redefine btn-success to fit the blue-slate palette ---
   A cooler teal-green that bridges "positive/success" semantics with
   the steel-blue + slate design language. Used for Save, OK, Resume. */
.btn-success {
    background-color: #2d9b7a;
    border-color: #2d9b7a;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #26856a;
    border-color: #26856a;
    color: #fff;
}

.btn-success:active {
    background-color: #21755e;
    border-color: #21755e;
}

/* The nolink variant (sentiment badges) keeps a similar mapping */
.btn-success.btn-nolink {
    background-color: #2d9b7a;
    border-color: #2d9b7a;
}

/* --------------------------------------------------------------------------
   21. Colored Background Content Legibility
   Headings inside .bg-brand (e.g. RapidRecall number tiles, modal headers)
   inherit dark color from the §2 heading rule. Override to white so text
   remains readable on the brand-primary background.
   -------------------------------------------------------------------------- */

/* White text for headings and bold text inside bg-brand containers */
.bg-brand h1, .bg-brand h2, .bg-brand h3,
.bg-brand h4, .bg-brand h5, .bg-brand h6 {
    color: #fff !important;
}

/* Override .text-muted inside colored backgrounds to a soft white */
.bg-brand .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* RapidRecall number tile header layout fix —
   card-header padding used to shrink the inner card-title, making the Get
   button appear to clip.  Fix: strip card-header padding so card-title
   fills it entirely, then give card-title the padding instead.  Both share
   bg-brand so visually they are one continuous blue panel. */
.card-header.bg-brand {
    padding: 0 !important;
}

.card-header.bg-brand .card-title {
    margin-bottom: 0 !important;
    padding: 0.5rem 0.75rem !important;
}

.card-header.bg-brand h6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    gap: 0.5rem;
    line-height: 1;
}

/* Let the number text fill available space; prevent button from shrinking */
.card-header.bg-brand h6 > span {
    flex: 1 1 auto;
}

.card-header.bg-brand h6 > button {
    flex: 0 0 auto;
    float: none !important;
}

/* Ghost button for btn-light on colored tile headers (RapidRecall Get buttons).
   Sized compactly so it sits well inside the header with visible margin. */
.bg-brand .btn.btn-light {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    font-size: 0.7rem !important;
    padding: 0.2rem 0.6rem !important;
    line-height: 1.2 !important;
    transition: all var(--transition-fast);
}

.bg-brand .btn.btn-light:hover,
.bg-brand .btn.btn-light:focus {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Bob's overrides for link colors */
/* marketplace adjustments */
/*.marketplaceBtnsCol-widthAdjustSellers {
    width: 26rem;
    min-width: 11rem;
}

.marketplaceBtnsCol-widthAdjustBuyers {
    width: 36rem;
    min-width: 20rem;
}

.nav-link:focus, .nav-link:hover {
    color: var(--color-accent-warm) !important;
}
a {
    color: var(--color-accent-warm) !important;
}
    a:hover {
       color: var(--color-accent-warm-hover) !important;
    }
*/