/* ==========================================================================
   KBIF portal theme (phase 2). Layered on Bootstrap; pure presentation - no
   markup logic. Palette keyed to the KHRG brand (2025 graphic standards):
   Brand Gold #D29C2A (PMS 1245C), Brand Gray #2A312D (PMS 447C).
   ========================================================================== */
:root {
    --kbif-green:      #2A312D;  /* KHRG Brand Gray - header band */
    --kbif-green-dk:   #D29C2A;  /* KHRG Brand Gold - primary buttons, accents */
    --kbif-green-dkr:  #B8871F;  /* gold hover */
    --kbif-ink:        #F4E5CC;  /* cream text on the gray band */
    --kbif-page:       #F2EFE7;  /* page background */
    --kbif-card:       #ffffff;
    --kbif-text:       #333333;
    --kbif-muted:      #6b7280;
    --kbif-border:     #E4E0D4;
    --kbif-alt:        #FAF3E3;  /* alternating row */
    --kbif-label:      #8A6512;  /* mobile card labels (dark gold, AA on white) */
}

body {
    background: var(--kbif-page);
    color: var(--kbif-text);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

/* -------- Header band -------------------------------------------------- */
.kbif-header {
    background: var(--kbif-green);
    text-align: center;
    padding: 14px 12px 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.kbif-logo {
    display: block;
    margin: 0 auto;
    height: auto;
    max-height: 56px;
    max-width: 100%;
}
.kbif-contact {
    margin-top: 8px;
    color: var(--kbif-ink);
    font-size: 12.5px;
}
.kbif-contact a { color: var(--kbif-ink); text-decoration: underline; }

/* -------- Content card ------------------------------------------------- */
.container {
    background: var(--kbif-card);
    max-width: 980px;
    margin: 20px auto 32px;
    padding: 24px 28px;
    border-radius: 12px;
    box-shadow: 0 3px 18px rgba(42,49,45,.10);
}

h3, h4 { color: #2A312D; font-weight: 600; }
h3 { font-size: 1.5rem; margin: .3em 0 .5em; }
h4 { font-size: 1.15rem; }

.container a { color: #8A6512; }

/* Info / notice text (e.g. "You have N registrations awaiting payment"). */
/* display:block because these frequently sit on an asp:Label (renders as <span>); an inline
   box tears apart when the text wraps across lines. */
.kbif-notice, .container > .row .alert {
    display: block;
    background: #FBF4E4; border: 1px solid #E8D5A2; border-left: 4px solid var(--kbif-green-dk);
    border-radius: 8px; padding: 12px 16px;
    margin: 8px 0;
}

/* -------- Tables (desktop) -------------------------------------------- */
/* -------- Tables become cards at EVERY width (no tabular grids) ------- */
.container table { display: block; width: 100%; margin: 8px 0; }
.container table caption { display: none; }
.container table thead { display: none; }
.container table tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.container table .kbif-headrow { display: none; }         /* column header row (stamped by kbif-ui.js) */
.container table tr:has(> th) { display: none; }          /* fallback if the script hasn't run */
.container table tr {
    display: block;
    background: #fff !important;
    border: 1px solid var(--kbif-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(42,49,45,.08);
}
.container table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 10px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #EDE9DE !important;
    background: #fff !important;
    text-align: right;
}
.container table td:last-child { border-bottom: 0 !important; }
.container table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--kbif-label);
    text-align: left;
    flex: 0 0 42%;
    white-space: normal;
}
.container table td:not([data-label])::before { content: ""; flex: 0 0 0; }
.container table td:not([data-label]) { justify-content: flex-end; }
.table-scroll { width: 100%; }

/* Grid action links (Select / Edit / Delete / Remove / View Detail) read as
   real buttons - repeated support calls came from users not spotting them. */
.container table a {
    display: inline-block;
    background: var(--kbif-green-dk);
    color: #1E2320 !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    padding: 8px 16px;
    min-width: 72px;
    text-align: center;
}
.container table a:hover { background: var(--kbif-green-dkr); }

/* Select All / Deselect All toggles on the payment summary. */
#kbifSelectAll, #kbifDeselectAll {
    display: inline-block;
    font-weight: 700;
    color: #8A6512;
    border: 1px solid #D9C08A;
    border-radius: 6px;
    padding: 6px 14px;
    text-decoration: none;
}
#kbifSelectAll:hover, #kbifDeselectAll:hover { background: #F7F1E2; }

/* Friendly empty state for a grid with no rows (injected by kbif-ui.js). */
.kbif-empty {
    text-align: center;
    color: var(--kbif-muted);
    background: #fff;
    border: 1px solid var(--kbif-border);
    border-radius: 10px;
    padding: 26px 16px;
    margin: 8px 0;
    font-size: 14px;
}

/* Desktop: flow the cards into a responsive grid instead of one tall column. */
@media (min-width: 768px) {
    .container table tbody { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* -------- Action button toolbar (even, wrapping, no jumble) ----------- */
.kbif-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    margin: 14px 0 4px;
}
.kbif-actions input[type="submit"],
.kbif-actions input[type="button"],
.kbif-actions .btn { margin: 0; }
.kbif-actions .kbif-spacer { flex: 1 1 auto; }            /* pushes trailing buttons to the right */

/* -------- Buttons ----------------------------------------------------- */
input[type="submit"],
input[type="button"],
.btn {
    background: var(--kbif-green-dk);
    color: #1E2320;
    border: 1px solid var(--kbif-green-dk);
    border-radius: 6px;
    min-height: 44px;
    padding: 9px 20px;
    margin: 4px 6px 4px 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover { background: var(--kbif-green-dkr); border-color: var(--kbif-green-dkr); }

/* Secondary (neutral) actions by their label. */
input[value="Back"],
input[value="Cancel"],
input[value="Show All"] {
    background: #fff;
    color: #8A6512;
    border: 1px solid #D9C08A;
}
input[value="Back"]:hover,
input[value="Cancel"]:hover,
input[value="Show All"]:hover { background: #F7F1E2; }

.btn-success { background: var(--kbif-green-dk); border-color: var(--kbif-green-dk); }
.btn-wide { min-width: 240px; }

/* View-switch tabs (Related Horses / Total Awards): the active one reads as pressed. */
.kbif-tab.active {
    background: #2A312D;
    border-color: #2A312D;
    color: #fff;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}
.kbif-tab.active:hover { background: #2A312D; }

/* -------- Inputs ------------------------------------------------------ */
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    font-size: 16px;              /* >=16px stops iOS auto-zoom */
    min-height: 40px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid #D6D0C0;
    border-radius: 6px;
    box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--kbif-green-dk);
    box-shadow: 0 0 0 3px rgba(210,156,42,.28);
}
label { font-weight: 600; color: #4A463C; }

/* Radios / checkboxes: larger, gold, aligned with their label. */
input[type="radio"],
input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--kbif-green-dk);
    cursor: pointer;
    vertical-align: middle;
    flex: 0 0 auto;
}
/* One choice per row: the control sits beside its (possibly wrapping) label. */
.kbif-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 12px 6px;
    border-bottom: 1px solid #EDE9DE;
}
.kbif-radio:last-child { border-bottom: 0; }
.kbif-radio input[type="radio"],
.kbif-radio input[type="checkbox"] { margin-top: 3px; }
.kbif-radio label, .kbif-radio span { font-weight: 600; color: #2A312D; line-height: 1.4; }

/* action-toolbar variants */
.kbif-actions-center { justify-content: center; }
.kbif-actions-center .kbif-spacer { display: none; }
.kbif-actions-search input[type="text"] { flex: 1 1 160px; }

/* helper text under an input */
.kbif-hint { color: var(--kbif-muted); font-size: 13px; }

/* -------- Tom Select (searchable dropdowns), keyed to the theme ------- */
.ts-wrapper { min-width: 0; }
.ts-control {
    border: 1px solid #D6D0C0;
    border-radius: 6px;
    min-height: 40px;
    font-size: 16px;              /* >=16px stops iOS auto-zoom */
    padding: 6px 10px;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--kbif-green-dk);
    box-shadow: 0 0 0 3px rgba(210,156,42,.28);
}
.ts-dropdown {
    border: 1px solid #D6D0C0;
    border-radius: 6px;
    font-size: 15px;
}
.ts-dropdown .option { padding: 9px 12px; }
.ts-dropdown .active { background: var(--kbif-alt); color: #2A312D; }

/* ==========================================================================
   Phone layout (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
    .container {
        margin: 0; border-radius: 0; padding: 16px 14px; box-shadow: none;
    }
    .kbif-logo { max-height: 46px; }

    /* full-width stacked action buttons; keep inline links inline */
    input[type="submit"], input[type="button"], .btn {
        display: block; width: 100%; margin: 8px 0;
    }
    .kbif-actions { flex-direction: column; }
    .kbif-actions .kbif-spacer { display: none; }
    /* in a vertical toolbar the search box must keep its natural (single-line)
       height, not inherit the 160px flex-basis meant for a horizontal row */
    .kbif-actions-search input[type="text"] { flex: 0 0 auto; }
    a.btn-link, .kbif-contact a { display: inline; width: auto; }

    /* Form fields: label sits left, directly above a full-width input. */
    .container label { display: block; text-align: left; margin-bottom: 5px; }
    .kbif-radio label, .kbif-radio span, fieldset label { display: inline; margin-bottom: 0; }
    .container input[type="text"],
    .container input[type="password"],
    .container input[type="email"],
    .container select { width: 100% !important; }

    h3 { font-size: 1.3rem; }
    /* (table cards + labels are defined globally above and already apply here) */
}