/* ======================================================================
   rcards.css — Country → Venue accordions (STRICTLY SCOPED)
   Scope: wrap your page section with <div class="rcards"> … </div>
   Nothing outside .rcards is affected.
   ====================================================================== */

.rcards {
    /* Optional local fallbacks if your CSS vars aren’t present */
    --rc-navy-light: var(--navy-light, #1A2C38);
    --rc-navy-border: var(--navy-border, #2f4553);
    --rc-navy-hover: var(--navy-hover, #2f4553);
    --rc-navy-bg: var(--navy-bg, #0F2130);

    --rc-blue: var(--accent-blue, #1475E1);
    --rc-blue-hover: var(--accent-blue-hover, #2685FF);
    --rc-green: var(--accent-green, #0C8A1C);

    --rc-text: var(--text-main, #b1bad3);
    --rc-text-light: var(--text-light, #fff);

    --rc-r: var(--radius, 6px);
    --rc-r-lg: var(--radius-lg, 10px);
}

/* Outer card only within this scope */
.rcards .outer-card,
.rcards .card {
    background-color: var(--rc-navy-light);
    border: 1px solid var(--rc-navy-border);
    color: var(--rc-text);
    border-radius: var(--rc-r-lg);
}

.rcards .outer-card > .card-header,
.rcards .card > .card-header {
    background: linear-gradient(180deg, var(--rc-navy-bg), #142a3a);
    color: var(--rc-text-light);
    border-bottom: 1px solid var(--rc-navy-border);
}

/* ---- Form controls (date picker) only here ---- */
.rcards .form-control {
    background-color: var(--rc-navy-bg);
    color: var(--rc-text-light);
    border: 1px solid var(--rc-blue);
    border-radius: var(--rc-r);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.2s ease-in-out;
}

.rcards .form-control:focus {
    outline: none;
    border-color: var(--rc-blue);
    box-shadow: 0 0 0 0.15rem rgba(20, 117, 225, .45);
}

.rcards .form-control:hover {
    border-color: var(--rc-blue-hover);
    box-shadow: 0 0 5px rgba(38, 133, 255, .4);
}

/* Local button style – avoids touching global .btn-dark */
.rcards .btn-go.btn {
    background: var(--rc-green);
    border: 1px solid var(--rc-green);
    color: var(--rc-text-light);
}

.rcards .btn-go.btn:hover {
    background: #0a7317;
    border-color: #0a7317;
}

/* ---- Accordion (strictly inside .rcards) ---- */
.rcards .accordion {
    --bs-accordion-bg: var(--rc-navy-light);
    --bs-accordion-border-color: var(--rc-navy-border);
    --bs-accordion-border-radius: var(--rc-r);
    --bs-accordion-body-padding-y: 0.75rem;
    --bs-accordion-body-padding-x: 0.75rem;
    --bs-accordion-btn-padding-y: .65rem;
    --bs-accordion-btn-padding-x: .9rem;
    --bs-accordion-btn-color: var(--rc-text-light);
    --bs-accordion-btn-focus-border-color: var(--rc-blue);
    --bs-accordion-active-color: var(--rc-text-light);
    --bs-accordion-active-bg: #152838;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
}

.rcards .accordion-item {
    background-color: var(--rc-navy-light);
    border: 1px solid var(--rc-navy-border);
    border-radius: var(--rc-r);
    overflow: hidden;
}

.rcards .accordion-button {
    background: var(--rc-navy-light);
    color: var(--rc-text-light);
    border: 0;
    box-shadow: none;
    font-weight: 600;
    gap: .5rem;
}

.rcards .accordion-button:hover {
    background: var(--rc-navy-hover);
}

.rcards .accordion-button.collapsed {
    background: var(--rc-navy-light);
    color: var(--rc-text-light);
    box-shadow: none;
}

.rcards .accordion-button:focus {
    border-color: var(--rc-blue);
    box-shadow: 0 0 0 0.15rem rgba(20, 117, 225, .4);
}

/* Chevron */
.rcards .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(150%);
    opacity: .85;
}

.rcards .accordion-collapse {
    background: var(--rc-navy-light);
    border-top: 1px solid var(--rc-navy-border);
}

/* Country total badge */
.rcards .badge {
    background-color: var(--rc-blue);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
}

/* ---- Table inside accordion ---- */
.rcards .table {
    margin: 0;
    background-color: var(--rc-navy-light);
    color: var(--rc-text);
}

.rcards .table thead th {
    background: var(--rc-navy-bg);
    color: var(--rc-text-light);
    border-bottom: 1px solid var(--rc-navy-border) !important;
    font-weight: 700;
    letter-spacing: .3px;
    vertical-align: middle;
}

.rcards .table tbody tr {
    background-color: var(--rc-navy-light);
}

.rcards .table tbody tr:hover > * {
    background-color: #1c3344 !important;
}

.rcards .table > :not(caption) > * > * {
    border-bottom: 1px solid var(--rc-navy-border);
    padding-top: .55rem;
    padding-bottom: .55rem;
    vertical-align: middle;
}

.rcards .table td,
.rcards .table th {
    color: var(--rc-text) !important;
}

/* Optional link style if you add venue links later */
.rcards a.venue-link {
    color: var(--rc-blue);
    font-weight: 600;
    text-decoration: none;
}

.rcards a.venue-link:hover {
    color: var(--rc-blue-hover);
    text-decoration: underline;
}

/* Spacing */
.rcards .accordion-item + .accordion-item {
    margin-top: .5rem;
}

.rcards .accordion-body {
    padding: .75rem;
}

/* Mobile tweaks */
@media (max-width: 576px) {
    .rcards .accordion-button {
        padding: .6rem .75rem;
    }

    .rcards .table thead th {
        font-size: 13px;
    }

    .rcards .table td {
        font-size: 13px;
    }
}

.accordion-body a {
    text-decoration: none !important;
}

/* Jockey directory & detail tweaks (scoped) */
.rcards .pagination.rc-pagination .page-link {
    background-color: var(--rc-navy-bg);
    color: var(--rc-text-light);
    border: 1px solid var(--rc-navy-border);
}

.rcards .pagination.rc-pagination .page-link:hover {
    background-color: var(--rc-navy-hover);
    color: var(--rc-text-light);
    border-color: var(--rc-blue-hover);
}

.rcards .pagination.rc-pagination .page-item.disabled .page-link {
    background-color: #122433;
    color: #7f90a6;
    border-color: var(--rc-navy-border);
}

.rcards .table a,
.rcards .card-body a {
    color: var(--rc-blue);
    text-decoration: none;
    font-weight: 600;
}

.rcards .table a:hover,
.rcards .card-body a:hover {
    color: var(--rc-blue-hover);
    text-decoration: underline;
}

/* KPI cards on detail page */
.rcards .card .card-body .small {
    color: #93a4b8 !important;
}

/* Keep chevron hard-right; play nice with ms-auto on the badge */
.rcards .accordion-button {
    position: relative;
    padding-right: 2.25rem; /* room for chevron */
}

.rcards .accordion-button::after {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%) var(--bs-accordion-btn-active-icon-transform);
    margin-left: 0; /* override Bootstrap's auto spacing */
}

.rcards .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) var(--bs-accordion-btn-icon-transform);
}

/* Keep chevron perfectly vertical-center and right aligned */
.rcards .accordion-button {
    position: relative;
    padding-right: 2.25rem; /* room for chevron */
}

.rcards .accordion-button::after {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    margin-left: 0;
    transition: transform 0.2s ease;
}

.rcards .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
}


.rcards .accordion-button {
    gap: .5rem;
}

.rcards .badge {
    font-weight: 600;
}

.rcards .silk {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #eee;
    border-radius: .25rem;
}

.rcards .runner-head {
    font-size: .9rem;
    gap: .5rem;
}

.rcards .runner-name {
    max-width: 55vw;
}

.rcards .subline {
    opacity: .9;
}

@media (max-width: 575.98px) {
    .rcards .accordion-button {
        padding: .5rem .75rem;
    }

    .rcards .silk {
        width: 28px;
        height: 28px;
    }

    .rcards .runner-head {
        font-size: .875rem;
    }

    .rcards .text-truncate {
        max-width: 100%;
    }
}

/* keep existing look, chevron for REAL accordions */
.rcards .accordion-button {
    position: relative;
    padding-right: 2.25rem;
}

.rcards .accordion-button::after {
    position: absolute;
    right: .75rem;
    top: 50%;
    margin-left: 0;
    transform: translateY(-50%) var(--bs-accordion-btn-active-icon-transform);
}

.rcards .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) var(--bs-accordion-btn-icon-transform);
}

/* Compact Add-to-Chaser button */
.add-to-chaser.btn {
    padding: 0.15rem 0.35rem !important;
    font-size: 0.75rem !important;
    line-height: 1.1 !important;
    border-radius: 0.25rem !important;
    white-space: nowrap;
}

.accordion-header .add-to-chaser {
    margin-left: 0.5rem !important;
}

@media (max-width: 576px) {
    .add-to-chaser.btn {
        padding: 0.1rem 0.3rem !important;
        font-size: 0.7rem !important;
    }
}

.rcards .dropdown .btn {
    padding: 0.15rem 0.35rem !important;
    font-size: .75rem !important;
}

.rcards .dropdown-menu {
    min-width: 10rem;
}

/* Fix dropdown clipping inside accordion headers */
.rcards .accordion,
.rcards .accordion-item,
.rcards .accordion-header {
    overflow: visible;
}

.rcards .dropdown-menu {
    z-index: 2000;
    position: absolute;
}

/* Fake header */
.rcards .fake-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .75rem;
    background: var(--bs-accordion-btn-bg);
    color: var(--bs-accordion-btn-color);
    border: 0;
    border-radius: var(--bs-accordion-border-radius);
    cursor: default;
}

.rcards .fake-button:hover {
    background: var(--bs-accordion-btn-hover-bg);
}

.rcards .accordion-button.fake-button::after {
    content: none !important;
    display: none !important;
}

/* Runner toggle (Open/Close) */
.rcards .runner-toggle {
    border: none;
    padding: .25rem .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* centers text */
    text-align: center;
}

/* mimic active style when open */
.rcards .accordion-header.is-open .fake-button {
    background-color: var(--bs-accordion-active-bg, rgba(255, 255, 255, .08));
    color: var(--bs-accordion-active-color, inherit);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
}

/* Runner action area: right on desktop, stacked on mobile */
.rcards .accordion-header {
    align-items: flex-start;
}

.rcards .runner-actions {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin-left: auto;
}

/* --- MOBILE --- */
@media (max-width: 575.98px) {
    .rcards .accordion-header {
        flex-wrap: wrap;
    }

    .rcards .fake-button {
        order: 1;
        width: 100%;
    }

    .rcards .runner-actions {
        order: 2;
        width: 100%;
        margin-left: 0;
        margin-top: .75rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* aligns neatly on left */
        gap: .4rem;
    }

    .rcards .runner-actions .btn {
        width: auto; /* not full width */
        align-self: center; /* center horizontally */
        text-align: center;
    }

    .rcards .runner-actions .dropdown {
        align-self: center;
    }

    .rcards .runner-actions .dropdown-menu {
        position: static;
    }
}


/* --- Compact Font Awesome Black Book star toggle --- */
.rcards .bb-star {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0 .25rem;
  cursor: pointer;
  color: #f5c542; /* gold tone */
  font-size: 0.85rem;
  line-height: 1;
  transition: transform .15s ease, color .15s ease;
}

.rcards .bb-star:hover {
  transform: scale(1.2);
  color: #ffd966;
}

.rcards .bb-star i {
  pointer-events: none; /* prevents click issues on <i> */
}

.rcards .bb-star:not(.is-on) i::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400; /* regular (outlined) */
  content: "\f005"; /* fa-star */
}

.rcards .bb-star.is-on i::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* solid (filled) */
  content: "\f005"; /* fa-star */
}

.rcards .bb-star i {
  font-style: normal !important;
  font-family: "Font Awesome 5 Free" !important; /* ensures correct FA5 family */
  font-weight: inherit; /* will be set by .far/.fas */
}

/* Stack Open above Add-to-Chaser and make both the same width */
.rcards .runner-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* let children fill width */
  gap: .4rem;
  margin-left: auto;      /* keep the block at the right on desktop */
  width: 180px;           /* unified width on desktop (adjust if you prefer) */
}

.rcards .runner-toggle {
  width: 100%;            /* full width Open/Close */
  justify-content: center;
}

.rcards .runner-actions .btn,
.rcards .runner-actions .dropdown > .btn {
  width: 100%;            /* Add-to-Chaser same width as Open */
}

/* Make the dropdown match the button width */
.rcards .runner-actions .dropdown-menu {
  width: 100%;
  min-width: 0;
}

/* On mobile, let it span the container */
@media (max-width: 575.98px) {
  .rcards .runner-actions {
    width: 100%;
    align-items: stretch;
  }
}

/* Compact height for both buttons (all screens) */
.rcards .runner-toggle,
.rcards .runner-actions .dropdown > .btn {
  padding: .25rem .6rem;   /* shorter height */
  line-height: 1.1;
}

/* MOBILE: not full width + same size */
@media (max-width: 575.98px) {
  /* keep the vertical stack but don't stretch full width */
  .rcards .runner-actions {
    width: 100%;
    align-items: flex-start;
  }

  /* set a shared fixed width so both buttons match */
  .rcards .runner-toggle,
  .rcards .runner-actions .dropdown > .btn {
    width: var(--ra-btn-w, 160px) !important;  /* tweak 140–180px if you prefer */
    padding: .22rem .55rem;                    /* slightly shorter on mobile */
  }
}

/* FIX: Vertically center chevron in country accordion */
.rcards .accordion-button::after {
    position: absolute !important;
    right: .75rem !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    margin-left: 0 !important;
    filter: invert(1) grayscale(100%) brightness(150%);
}

/* rotates when opened */
.rcards .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg) !important;
}