/* wca-app.css — shared component styles for the new WCA dynamic pages.
   Palette: navy #1e0138/#45017c, green #45017c/#45017c, on white. Open Sans + Bootstrap 3.
   Reference implementation of the approved new-system theme. */

.brom-wrap { max-width: 1140px; margin: 0 auto; padding: 24px 15px 48px; }
.brom-crumbs { font-size: 13px; margin-bottom: 14px; }
.brom-crumbs a { color: #45017c; }
.brom-crumbs span { color: #8c8c8c; }

/* ---- Hero / summary card ---- */
.brom-hero {
    background: linear-gradient(135deg, #1e0138 0%, #45017c 100%);
    color: #fff; border-radius: 6px; padding: 26px 30px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.brom-hero .eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: #cbb0e6; margin: 0 0 6px; }
.brom-hero h1 { font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 27px; margin: 0; line-height: 1.2; }
.brom-hero .akc { display: inline-block; margin-top: 8px; font-size: 13px; color: #d9c8ec; }
.brom-stats { display: flex; gap: 12px; }
.brom-stats .stat { background: rgba(255,255,255,.10); border-radius: 6px; padding: 12px 18px; text-align: center; min-width: 92px; }
.brom-stats .stat .num { display: block; font-size: 26px; font-weight: 700; line-height: 1; }
.brom-stats .stat .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #d9c8ec; margin-top: 6px; }
.brom-stats .stat.brom { background: #c9a24b; }
.brom-stats .stat.brom .lbl { color: #d9c8ec; }

/* ---- Search form (in the hero) ---- */
.brom-search { width: 100%; }
.brom-search .searchrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.brom-search input[type=text] {
    flex: 1 1 320px; min-width: 220px; font-size: 16px; padding: 10px 14px;
    border: none; border-radius: 4px; color: #222;
}
.brom-search .btn-wca {
    font-size: 14px; font-weight: 600; padding: 10px 18px; border: none; border-radius: 4px;
    cursor: pointer; background: #45017c; color: #fff; transition: background .2s;
}
.brom-search .btn-wca:hover { background: #5e1a8f; }
.brom-search .btn-wca.alt { background: rgba(255,255,255,.15); }
.brom-search .btn-wca.alt:hover { background: rgba(255,255,255,.28); }
.brom-search .help { margin: 12px 0 0; font-size: 12px; color: #d9c8ec; }

/* ---- Messages ---- */
.brom-msg { background: #fff; border: 1px solid #e3e3e3; border-left: 4px solid #45017c;
    border-radius: 4px; padding: 14px 18px; margin-top: 18px; color: #444; }
.brom-empty { background:#fff; border:1px solid #e3e3e3; border-radius:6px; padding: 40px; text-align:center; color:#666; margin-top: 22px; }

/* ---- Data table ---- */
.brom-tablecard { background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; margin-top: 22px; overflow: hidden; }
.brom-count { padding: 12px 16px; font-size: 13px; color: #555; border-bottom: 1px solid #eee; background: #fafafa; }
.brom-table { width: 100%; margin: 0; font-size: 13px; }
.brom-table th { background: #1e0138; color: #fff; font-weight: 600; padding: 10px 12px; white-space: nowrap; }
.brom-table td { padding: 8px 12px; vertical-align: top; border-top: 1px solid #eee; }
.brom-table .num { text-align: right; white-space: nowrap; }
.brom-table tr.newoff td { border-top: 2px solid #d7d7d7; }
.brom-table tbody tr:hover td { background: #f7faf7; }
.brom-table .dogname { font-weight: 600; color: #1e0138; }
.brom-table a.dogname:hover { color: #5e1a8f; text-decoration: underline; }
.brom-table .akc { color: #8c8c8c; font-size: 12px; }
.brom-table .yn-yes { color: #45017c; font-weight: 600; }
.brom-table .yn-no  { color: #b0b0b0; }
.brom-table .viewbtn { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 12px;
    background: #45017c; color: #fff; border-radius: 4px; white-space: nowrap; }
.brom-table .viewbtn:hover { background: #1e0138; text-decoration: none; color: #fff; }
.brom-table tr.subtotal td { background: #f2f5f2; border-top: 1px solid #e3e9e3; }
.brom-table tr.subtotal .lbl { text-align: right; font-style: italic; color: #555; }
.brom-table tr.grandtotal td { background: #45017c; color: #fff; font-weight: 700; font-size: 15px; padding: 12px; }

.brom-note { margin-top: 16px; font-size: 12px; color: #8c8c8c; }

/* ---- Auth forms (login, reset) ---- */
.auth-wrap { max-width: 460px; margin: 40px auto; padding: 0 15px; }
.auth-card { background:#fff; border:1px solid #e3e3e3; border-radius:6px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.auth-head { background:linear-gradient(135deg,#1e0138 0%,#45017c 100%); color:#fff; padding:22px 26px; }
.auth-head h1 { margin:0; font-size:22px; font-weight:700; }
.auth-head p { margin:6px 0 0; font-size:13px; color:#d9c8ec; }
.auth-body { padding:22px 26px 26px; }
.auth-body label { display:block; font-size:13px; font-weight:600; color:#333; margin:14px 0 5px; }
.auth-body input[type=email],.auth-body input[type=password],.auth-body input[type=text],.auth-body input[type=date],.auth-body select {
    width:100%; font-size:15px; padding:10px 12px; border:1px solid #ccc; border-radius:4px; background:#fff; }
.btn-primary-wca { width:100%; margin-top:20px; background:#45017c; color:#fff; border:none; border-radius:4px; padding:12px; font-size:15px; font-weight:600; cursor:pointer; }
.btn-primary-wca:hover { background:#1e0138; }
.auth-err { background:#fdecea; border:1px solid #f5c6cb; color:#a12622; border-radius:4px; padding:10px 14px; font-size:13px; margin-bottom:4px; }
.auth-ok  { background:#eaf5ea; border:1px solid #bfe0bf; color:#1c5321; border-radius:4px; padding:10px 14px; font-size:13px; margin-bottom:4px; }
.auth-links { text-align:center; margin-top:16px; font-size:13px; }
.auth-links a { color:#45017c; }

/* ---- Admin ---- */
.admin-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.admin-bar h1 { font-size:24px; color:#1e0138; margin:0; font-weight:700; }
.pill { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:10px; text-transform:uppercase; letter-spacing:.4px; }
.pill.active { background:#eaf5ea; color:#1c5321; } .pill.expired,.pill.disabled { background:#fdecea; color:#a12622; }
.pill.pending { background:#fff5e6; color:#8a5a00; }
.pill.role-admin { background:#e8eaff; color:#26308a; } .pill.role-editor { background:#e8f0ff; color:#134a86; } .pill.role-member { background:#eee; color:#555; }
.tbl-actions a { color:#45017c; margin-right:10px; font-size:12px; }

@media (max-width: 640px) { .brom-hero { flex-direction: column; align-items: flex-start; } }

.brom-stats .stat.brom .num,.brom-stats .stat.brom .lbl{color:#3a1200;}


/* Sortable column headings. Added 13 August 2026 - the lists came back ordered by the soundex
   code, which is invisible on the page, so they read as unsorted. Name is now the default and
   the point columns can be sorted on, because "who has the most points" is the real question. */
.brom-table th a.sortlink { color: #fff; text-decoration: none; display: inline-block; }
.brom-table th a.sortlink:hover { color: #fff; text-decoration: underline; }
.brom-table th .sortdir { font-size: 11px; opacity: .95; margin-left: 2px; }

/* The Offspring History report ran off the side of the screen for well-titled dogs. A dog with
   a long list of titles made the Title column as wide as the list, which pushed the Points
   column - the reason anyone opens the report - off the right edge and forced the whole page to
   be scrolled to read it. Titles and activities now wrap inside their own column instead, and
   Points is pinned to a width so it can never be the thing that gets pushed out of sight.
   Scoped to .brom-history on purpose: the lookup tables share .brom-table but have a different
   set of columns, and a positional rule written for one would silently mangle the other. */
   The width comes from the two dog-name columns, which carry the dog's earned titles as a comma
   list - "CH Ventures Siren I Danced In Laughter BN,RN,JH,SWA,SHDNE,SCE,SHDE,CGC,TKN". Those
   wrap after a comma and never inside a title: word-break would split SHDNE across two lines,
   which reads as a different title. The break points are <wbr> marks placed after each comma by
   the page, so this rule only has to allow wrapping and cap the width. */
.brom-history .namecell { white-space: normal; max-width: 22em; }
.brom-history .wrapcell { white-space: normal; max-width: 16em; }
.brom-history .num { width: 1%; white-space: nowrap; }
@media (max-width: 900px) {
    .brom-history .namecell { max-width: 14em; }
    .brom-history .wrapcell { max-width: 10em; }
}

/* The count line explains the order as well as the number. Members read a list of 134 dogs and
   reasonably ask what sequence it is in, and the honest answer - the database sorts as though
   spaces and apostrophes were not there - is not guessable from looking at it. */
.brom-count .sortnote { display: block; margin-top: 4px; font-size: 12px; color: #777; }