/* ──────────────────────────────
   My_BWE_Base.css
   - Mobile responsive
   - Flex-based layout
   - Cleaned: merged duplicate media queries, fixed selector mismatches
──────────────────────────────── */

/* ─── CSS Variables ─────────────────────── */
:root {
    --sidebar-width: 180px;
    --header-height: 80px;
    --menu-height: 30px;
    --mgmt-height: 90px;
    --top-total: calc(var(--header-height) + var(--menu-height) + var(--mgmt-height));
    --bottom-gap: 60px;   /* blank space left below the table box, above page bottom */
}

/* ─── Resets & Base ─────────────────────── */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    background: #666;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.hidden { display: none; }

#cover {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #dad6d6;
    z-index: 9999;
}

/* ─── Sidebar ─────────────────────── */
.left_sidebar {
    width: 180px;
    background: #666;
    padding-right: 0;
    margin: 0;
    color: #999;
    padding-top: 30px;
}

.left_sidebar ul {
    list-style: none;
    padding: 0 0 0 4px;
    margin: 0;
    font-size: 12px;
    text-align: right;
}

.left_sidebar li,
.left_sidebar a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 12px;
    margin: 0 !important;
    padding: 2px 4px !important;
    line-height: 1.1 !important;
}

.left_sidebar img:not(.sl_logo) {
    height: 20px;
    width: 20px;
    object-fit: contain;
}

.left_sidebar .text {
    flex-grow: 1;
    word-break: break-word;
}

.sl_logo {
    max-width: 100px;
    margin: 10px 0;
    height: auto;
    display: block;
}

.sl_logo_graphics {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}

li.welcome-text {
    text-decoration: none;
    font-style: italic;
    color: #6b0910;
    font-size: 12px;
    padding-top: 0;
    margin-left: 0;
    width: auto;
    white-space: nowrap;
    text-align: left;
    display: block;
    text-transform: capitalize;
}

/* ─── Header & Nav ─────────────────────── */
.header {
    z-index: 97;
    height: 80px;
    display: flex;
    background: #2b2b2b;
}

.graphics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 80px;
}

.graphics li { display: flex; align-items: center; }
.graphics li:first-child { margin-left: 0; padding-left: 0; }
.graphics li:first-child img { display: block; margin-left: 0; }

.navigation {
    list-style: none;
    margin: 0 0 0 20px;
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    display: flex;
    font-size: 10px;
    background-image: url('../images/background_test1a.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    height: 80px;
}

.navigation li:first-child { margin-right: auto; }
.navigation li:nth-child(6) { margin-right: 70px; }
.navigation a {
    text-decoration: none;
    display: block;
    padding: 0.5em;
    color: white;
}

.list-item:hover {
    cursor: pointer;
    background: #222 !important;
}

/* ─── Content Management ─────────────────────── */
.content_mgmt {
    position: fixed;
    top: var(--header-height);
    left: 0;
    height: var(--menu-height);
    width: 100%;
    background: #9D162E;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    z-index: 96;
}

.content_mgmt ul {
    list-style: none;
    margin: 0 auto;        /* center the menu group */
    padding: 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Center the menu group across the bar (was offset right by the sidebar
   width on data pages, which looked off-center). */
.content_mgmt ul li:first-child {
    margin-left: 0;
}

.content_mgmt li,
li.dropdown {
    display: inline-block;
    cursor: pointer;
}

li .dropbtn,
li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 0 12px;
    line-height: var(--menu-height);
    text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn { background-color: #6b0910; }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    border: 1px solid #f0f0f0;
    padding: 6px 12px;
    display: block;
    text-align: left;
    text-decoration: none;
}

.dropdown-content a:hover { background-color: #ddd; }
.dropdown:hover .dropdown-content { display: block; }

/* ─── Content Area ─────────────────────── */
.content {
    position: absolute;
    top: 202px;
    bottom: var(--bottom-gap);   /* end the box this far above the viewport bottom */
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    transition: left 0.3s ease, width 0.3s ease;
    display: flex;
    flex-direction: column;
    background: #505050;
    overflow: hidden;
    margin-left: 0;
    border-bottom: 2px solid darkred;        /* clear edge of the table box */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* subtle shadow into the gap below */
}

.box {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

.scrollbox {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.tablesorter-stickyHeader {
    background: #9D162E;
    color: white;
    z-index: 100;
}

.left-sidebar-wrapper {
    position: fixed;
    top: 112px;
    left: 0;
    width: 180px;
    transition: transform 0.3s ease-in-out;
    z-index: 98;
}

.left-sidebar-wrapper.slide-closed {
    transform: translateX(-180px);
}

.left-sidebar-wrapper.slide-open {
    transform: translateX(0);
}

/* ─── Header Management Section ─────────────────────── */
.header_mgmt {
    position: fixed;
    top: 112px;
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    transition: left 0.3s ease, width 0.3s ease;
    z-index: 95;
    background: #505050;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: var(--mgmt-height);
    box-sizing: border-box;
}

.header_text h1,
.header_text h3,
.header_mgmt h1,
.header_mgmt h3 {
    margin: 0;
    text-align: center;
    line-height: 1.1;
    font-size: 13px;
}

.pager {
    margin-top: 4px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.left_sidebar li.leftpanelbuttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 6px 5px;
    font-size: 12px;
    color: #fff;
    background-color: transparent;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.left_sidebar li.leftpanelbuttons:hover {
    background-color: #555;
    cursor: pointer;
}

.leftpanel-content {
    display: flex;
    align-items: center;
    column-gap: 3px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.leftpanel-content .tag {
    font-style: italic;
    color: #ccc;
    text-align: left;
    flex: 0 0 30px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.status-icon,
.right-icon {
    vertical-align: middle;
    margin-left: 6px;
    max-height: 20px;
    object-fit: contain;
}

.status-icon {
    height: 10px;
    width: 10px;
}

.left_sidebar img.right-icon,
.leftpanel-content + img.right-icon,
.leftpanelbuttons img.right-icon {
    height: 20px;
    width: 22px;
    flex: 0 0 22px;
    object-fit: contain;
}

.leftpanel-content .label {
    font-weight: bold;
    text-align: left;
    color: #fff;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leftpanel-content .count {
    flex: 0 0 20px;
    text-align: right;
    font-family: monospace;
    font-weight: bold;
    color: #fff;
}

.leftpanel-content span,
.leftpanel-content img {
    margin: 0;
    padding: 0;
}

.sidebar-spacer {
    height: 12px;
    display: block;
}

.left_sidebar img.status-icon,
.left_sidebar img.spacer,
.leftpanel-content img.status-icon,
.leftpanel-content img.spacer {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    margin: 0;
    object-fit: contain;
    vertical-align: middle;
}

.left_sidebar img.spacer,
.leftpanel-content img.spacer {
    visibility: hidden;
}

.dropdown {
    margin-left: 0;
}

body.sidebar-collapsed .left-sidebar-wrapper {
    transform: translateX(-180px);
}

body.sidebar-collapsed .content {
    left: 0;
    width: 100%;
}

body.sidebar-collapsed .header_mgmt {
    left: 0;
    width: 100%;
}

.small-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Consumables button is an <input type="image"> without .small-icon;
   size it to match the other row icons so the C column stays narrow. */
.toggleConsumables {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ─── Legacy / scoped table styles ─────────────────────── */
.legacy-table {
    font-family: Helvetica, Arial, sans-serif;
    width: 640px;
    table-layout: fixed;
    overflow: hidden;
    border-collapse: collapse;
    margin: 20px;
    float: left;
}

.legacy-table caption {
    background: #dbb768;
    font-weight: bold;
    font-size: 1.4em;
    padding: 0.2em 0.8em;
    border: 1px solid #000;
}

.legacy-table caption,
.legacy-table th,
.legacy-table td {
    padding: 0.2em 0.8em;
    border: 1px solid #000;
}

.legacy-table td,
.legacy-table th {
    position: relative;
    font-size: 12px;
    height: 22px;
    text-align: center;
    transition: all 0.3s;
}

.legacy-table tr:nth-child(even),
.legacy-table tr:nth-child(even) td {
    background-color: #dad6d6;
}

.legacy-table tr:nth-child(odd),
.legacy-table tr:nth-child(odd) td {
    background-color: #f7f2f2;
}

.legacy-table tr:hover,
.legacy-table tr:hover td {
    background-color: #969696;
    color: #fff;
}

.legacy-table td:hover::after,
.legacy-table th:hover::after {
    content: "";
    position: absolute;
    background-color: #969696;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}

.legacy-table tbody {
    width: 800px;
    overflow: auto;
}

.legacy-table tbody.scrollContent td,
.legacy-table tbody.scrollContent tr.scrollContent td {
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #b5b3b3;
    border-top: 1px solid #b5b3b3;
    padding: 2px 2px 2px 4px;
}

.legacy-table thead.fixedHeader th {
    background: #b5b3b3;
    border-left: 1px solid #b5b3b3;
    border-right: 1px solid #b5b3b3;
    border-top: 1px solid #b5b3b3;
    font-weight: normal;
    padding: 3px 0px;
    text-align: center;
}

.legacy-table thead.fixedHeader a,
.legacy-table thead.fixedHeader a:link,
.legacy-table thead.fixedHeader a:visited {
    color: #FFF;
    display: block;
    text-decoration: none;
    width: 100%;
}

.legacy-table thead.fixedHeader a:hover {
    text-decoration: underline;
}

/* ─── Caption color variants ─────────────────────── */
.caption_red,
.caption_yellow,
.caption_green {
    font-weight: bold;
    font-size: 1.4em;
    padding: 0.2em 0.8em;
    border: 1px solid #000;
}

table caption.caption_red {
    background: #b22222 !important;
    color: white !important;
}

table caption.caption_yellow {
    background: #e8ca00 !important;
    color: black !important;
}

table caption.caption_green {
    background: #228B22 !important;
    color: white !important;
}

body.horse-status .content {
    top: 112px !important;
    max-width: 740px !important;
    width: 100%;
    margin: 0 auto;
}

.horse-status-container {
    padding: 10px;
    background-color: #f1f1f1;
    margin: 20px;
    border-radius: 6px;
}

.status-explanation p {
    margin: 4px 0;
    font-size: 12px;
}

.skills_settings {
    position: fixed;
    z-index: 98;
    width: 100%;
    display: flex;
    padding-left: 178px;
}

/* Breeding panel wrapper (Pasture 3 etc.). The child panels (#breed_male /
   #breed_female) position THEMSELVES with position:fixed, so this wrapper does
   not need to position anything. Using display:contents makes the wrapper
   itself render no box at all — it can never appear as a stray bar under the
   menu, and the fixed-positioned panels still float correctly when toggled.
   (Renamed from the misleading shared .skills_settings, which is unrelated to
   breeding.) */
.Panel_wrapper_breeding_settings {
    display: contents;
}

.Scores {
    border-collapse: collapse;
}

.Scores tr,
.Scores td,
.Scores th {
    line-height: 14px;
    text-align: center;
    border: 1px solid #141414;
}

.Scores th {
    background-color: #6b0910;
    color: white;
}

.styled-select select {
    background: transparent;
    border: none;
    font-size: 12px;
    height: 29px;
    color: white;
    padding: 5px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Move To dropdown: fill its own cell, never wider (prevents spilling
   under the next column). The column width below gives it room. */
.col-move select,
td.col-move select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.semi-square {
    border-radius: 5px;
}

.blue  { background-color: #245e83; color: #fff; }
.black { background-color: #000; }

.blue select, .black select {
    color: #fff;
}

#male_select {
    width: 50px;
}
#female_select {
    width: 150px;
}

/* ─── Main Content Panel (desktop) ─────────────────────── */
/* Mirror the proven .content positioning used by data pages: an absolutely
   positioned panel filling everything to the right of the sidebar, below the
   fixed header + menu chrome. Mobile overrides this below. */
.main {
    position: absolute;
    top: 112px;
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    height: calc(100vh - 112px);
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    z-index: 1;
    transition: left 0.3s ease, width 0.3s ease;
}

/* Neutral wrapper for older-template pages (e.g. Pasture 6) that wrap their
   header_mgmt + content in a single #m1 div. It must NOT add positioning —
   the inner .content already offsets itself past the sidebar. Keeping it
   unpositioned avoids stacking the offset (which shoved the table down/right).
   The id="m1" is retained in markup so the existing show/hide JS still works. */
.main-panel {
    display: block;
}

/* ─── Responsive Layout (merged single block) ─────────────────────── */
@media (max-width: 768px) {
    /* Stack the nav and dropdown menus vertically.
       Includes both .navigation (slide layout) and .dropdown-menu (legacy layout). */
    .navigation,
    .dropdown-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .dropdown-content {
        position: relative;
        display: none;
        flex-direction: column;
        background-color: #f9f9f9;
        box-shadow: none;
        padding: 10px;
    }

    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {
        display: flex;
    }

    .dropbtn {
        padding: 10px;
        font-size: 15px;
        background: #eee;
        border: 1px solid #ccc;
    }

    .left_sidebar {
        position: fixed;
        top: 112px;
        left: 0;
        width: var(--sidebar-width);
        transform: translateX(calc(-1 * var(--sidebar-width)));
        transition: transform 0.3s ease-in-out;
        z-index: 98;
        margin: 0 !important;
    }

    .left_sidebar.slide-open {
        transform: translateX(0);
    }

    .main {
        position: relative;
        margin-left: 0;
        margin-top: 112px;
        padding: 10px 20px;
        box-sizing: border-box;
        overflow: auto;
        z-index: 1;
        min-height: calc(100vh - 112px);
    }

    .graphics img {
        max-width: 80px;
    }
}

/* ══════════════════════════════════════════════════════════
   TABLESORTER THEME  (renamed from tablesorter-abc → tablesorter-bwe)
   Used by data-table pages: badges, quests, pastures, grids.
   Tag tables with class="tablesorter-bwe".
   ══════════════════════════════════════════════════════════ */
.tablesorter-bwe {
    font-size: 13px;
    width: 100%;
    table-layout: fixed;
    background-color: #fff;
    white-space: nowrap;
    margin: 0;
    text-align: left;
    border-spacing: 0;
    border: #cdcdcd 1px solid;
    border-width: 1px 0 0 1px;
}
.tablesorter-bwe th,
.tablesorter-bwe td {
    font-size: 11px;
    padding: 2px 4px;
    border: #cdcdcd 1px solid;
    border-width: 0 1px 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tablesorter-bwe th,
.tablesorter-bwe thead td {
    font: 14px/14px calibri, calibri;
    font-weight: normal;
    color: #fff;
    text-align: center;
    background-color: #9d162e;
    border-collapse: collapse;
}
.tablesorter-bwe tbody td,
.tablesorter-bwe tfoot th,
.tablesorter-bwe tfoot td {
    padding: 4px 4px 0 4px;
    vertical-align: middle;
}
.tablesorter-bwe .header,
.tablesorter-bwe .tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    background-repeat: no-repeat;
    background-position: center right;
    padding: 4px;
    white-space: normal;
    cursor: pointer;
}
.tablesorter-bwe .headerSortUp,
.tablesorter-bwe .tablesorter-headerSortUp,
.tablesorter-bwe .tablesorter-headerAsc {
    background-color: #9d162e;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
.tablesorter-bwe .headerSortDown,
.tablesorter-bwe .tablesorter-headerSortDown,
.tablesorter-bwe .tablesorter-headerDesc {
    background-color: #9d162e;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
.tablesorter-bwe thead .sorter-false {
    background-image: none;
    cursor: default;
    padding: 4px;
}
.tablesorter-bwe tfoot .tablesorter-headerSortUp,
.tablesorter-bwe tfoot .tablesorter-headerSortDown,
.tablesorter-bwe tfoot .tablesorter-headerAsc,
.tablesorter-bwe tfoot .tablesorter-headerDesc {
    background-image: none;
}
.tablesorter-bwe td {
    color: #000;
    background-color: #fff;
    padding: 4px;
    vertical-align: middle;
}
/* hovered row colors */
.tablesorter-bwe tbody > tr.hover > td,
.tablesorter-bwe tbody > tr:hover > td,
.tablesorter-bwe tbody > tr:hover + tr.tablesorter-childRow > td,
.tablesorter-bwe tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
.tablesorter-bwe tbody > tr.even.hover > td,
.tablesorter-bwe tbody > tr.even:hover > td,
.tablesorter-bwe tbody > tr.even:hover + tr.tablesorter-childRow > td,
.tablesorter-bwe tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
    background-color: #d9d9d9;
}
.tablesorter-bwe tbody > tr.odd.hover > td,
.tablesorter-bwe tbody > tr.odd:hover > td,
.tablesorter-bwe tbody > tr.odd:hover + tr.tablesorter-childRow > td,
.tablesorter-bwe tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
    background-color: #bfbfbf;
}
.tablesorter-bwe .tablesorter-processing {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
}
/* zebra striping */
.tablesorter-bwe tbody tr.odd > td { background-color: #ebebeb; }
.tablesorter-bwe tbody tr.even > td { background-color: #f6f6f6; }
/* column sort colors */
.tablesorter-bwe td.primary,
.tablesorter-bwe tr.odd td.primary { background-color: #99b3e6; }
.tablesorter-bwe tr.even td.primary { background-color: #c2d1f0; }
.tablesorter-bwe td.secondary,
.tablesorter-bwe tr.odd td.secondary { background-color: #c2d1f0; }
.tablesorter-bwe tr.even td.secondary { background-color: #d6e0f5; }
.tablesorter-bwe td.tertiary,
.tablesorter-bwe tr.odd td.tertiary { background-color: #d6e0f5; }
.tablesorter-bwe tr.even td.tertiary { background-color: #ebf0fa; }
/* filter widget */
.tablesorter-bwe .tablesorter-filter-row { background-color: #eee; }
.tablesorter-bwe .tablesorter-filter-row td {
    background-color: #eee;
    line-height: normal;
    text-align: center;
    transition: line-height 0.1s ease;
}
.tablesorter-bwe .tablesorter-filter-row .disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.tablesorter-bwe .tablesorter-filter-row.hideme td {
    padding: 2px;
    margin: 0;
    line-height: 0;
    cursor: pointer;
}
.tablesorter-bwe .tablesorter-filter-row.hideme * {
    height: 1px;
    min-height: 0;
    border: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
}
.tablesorter-bwe input.tablesorter-filter,
.tablesorter-bwe select.tablesorter-filter {
    width: 98%;
    height: auto;
    margin: 0;
    padding: 4px;
    background-color: #fefefe;
    border: 1px solid #999;
    color: #333;
    box-sizing: border-box;
    transition: height 0.1s ease;
}
.tablesorter-bwe .filtered { display: none; }
.tablesorter-bwe .tablesorter-errorRow td {
    text-align: center;
    cursor: pointer;
    background-color: #e6bf99;
}
/* pager */
.tablesorter-pager { padding: 5px; }
td.tablesorter-pager { background-color: #e6eeee; margin: 0; }
.tablesorter-pager img { vertical-align: middle; margin-right: 2px; cursor: pointer; }
.tablesorter-pager .pagedisplay {
    padding: 0 5px;
    min-width: 80px;
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

/* First line: "1 to 30" stays together; second line: total, centered below. */
.pager-range,
.pager-total {
    display: block;
    text-align: center;
    white-space: nowrap;
}
.tablesorter-pager select { margin: 0; padding: 0; }
.tablesorter-pager.disabled { display: none; }
.tablesorter-pager .disabled { opacity: 0.5; cursor: default; }

/* column widths for horse/pony data tables */
.col-hft      { width: 2.0%; }   /* merged History + Family Tree (same size as C) */
.col-3d       { width: 2.0%; }
.col-ft       { width: 2.0%; }
.col-status   { width: 2.0%; }
.col-cons     { width: 2.0%; }
.col-move     { width: 3.0%; }
.col-training { width: 8.0%; }
.col-id       { width: 90px; }   /* px, not %: table-layout:fixed ignores min-width, so a % column collapses and ellipsizes the ID on narrow/square screens. A fixed px width keeps the full ID (8 digits + status heart) visible at any width. */
.col-gender   { width: 3.0%; }
.col-age      { width: 3.0%; }
.col-group    { width: 4.0%; }
.col-name     { width: auto; }   /* slack absorber: under table-layout:fixed, leftover width flows to the one auto column instead of bloating the fixed-px col-id. Pages with fewer columns (e.g. basic Pasture 1, no Breeding col) have more slack — routing it to NAME keeps col-id at exactly 90px everywhere. */
.col-breed    { width: 7.0%; }
.col-coat     { width: 8.0%; }
.col-eye      { width: 7.0%; }
.col-mane     { width: 6.0%; }
.col-tail     { width: 6.0%; }
.col-face     { width: 6.0%; }
.col-legs     { width: 6.0%; }
.col-breeding { width: 11.0%; }

/* Pasture 6 (Advanced Racing/Training) has fewer columns than the breeding
   pastures (no coat/eye/face/legs) plus a TRAINING column. Its widths must
   sum to ~100% on their own, or table-layout:fixed redistributes the slack
   and balloons the TRAINING button cell. Scoped so other pages are unaffected. */
/* Force fixed layout explicitly here in case my_table/tablesorter overrides it,
   so these percentages actually govern and the table stops stretching one column. */
.p6-table {
    table-layout: fixed;
    width: 100%;
}
.p6-table .col-hft      { width: 2.5%; }
.p6-table .col-3d       { width: 2%; }
.p6-table .col-cons     { width: 2%; }
.p6-table .col-ft       { width: 2%; }
.p6-table .col-id       { width: 7%; }
.p6-table .col-gender   { width: 7%; }
.p6-table .col-name     { width: 13%; }
.p6-table .col-group    { width: 9%; }
.p6-table .col-age      { width: 5%; }
.p6-table .col-breed    { width: 12%; }
.p6-table .col-mane     { width: 11%; }
.p6-table .col-tail     { width: 11%; }
.p6-table .col-training { width: 7%; }
.p6-table .col-move     { width: 12%; }

/* The TRAINING cell holds a <button> whose intrinsic width can override the
   fixed-layout column and balloon it. Force the button to fit its cell. */
.p6-table .toggleTraining,
.tablesorter-bwe td .toggleTraining {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: 2px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* column selector popup */
.columnSelectorWrapper {
    position: relative;
    margin: 10px 0;
    display: inline-block;
}
.columnSelector, .hidden { display: none; }
.columnSelectorButton {
    background: #99bfe6;
    border: #888 1px solid;
    color: #111;
    border-radius: 5px;
    padding: 5px;
}
#colSelect1:checked + label {
    background: #5797d7;
    border-color: #555;
}
#colSelect1:checked ~ #columnSelector { display: block; }
.columnSelector {
    width: 120px;
    position: absolute;
    top: 30px;
    padding: 10px;
    background: #fff;
    z-index: 99;
    border: #99bfe6 1px solid;
    border-radius: 5px;
}
.columnSelector label { display: block; }
.columnSelector label:nth-child(1) {
    border-bottom: #99bfe6 solid 1px;
    margin-bottom: 5px;
}
.columnSelector input { margin-right: 5px; }
.columnSelector .disabled { color: #ddd; }

/* side panel (renamed from #abc2 → #bwe-panel) */
#bwe-panel {
    position: fixed;
    top: 112px;
    left: 180px;
    width: 300px;
    background-color: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    border-left: 1px solid #ccc;
    z-index: 999;
    display: none; /* toggled by JS */
    padding: 10px;
}

/* Training panel (P6) — same placement/treatment as #bwe-panel so it sits in
   the content area below the header chrome and beside the sidebar, with an
   opaque background. Without this it rendered transparent and top-left. */
#bwe-training-panel,
#abc,
#abc4,
#breed_male,
#breed_female {
    position: fixed;
    top: 112px;
    left: 180px;
    width: 360px;
    max-height: calc(100vh - 122px);
    overflow-y: auto;
    background-color: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    border-left: 1px solid #ccc;
    z-index: 999;
    display: none; /* toggled by JS */
    padding: 10px;
    box-sizing: border-box;
}

/* The Mate panels have 3 columns (clicked horse + two breed-partner select
   lists), so give them more room than the single-column training panels. */
#breed_male,
#breed_female {
    width: 560px;
}

/* Match the training panel's .Scores table look for the breeding selects so
   the Mate popup reads as the same component. */
.Breeding_Select {
    border-collapse: collapse;
    width: 100%;
}
.Breeding_Select th {
    background-color: #6b0910;
    color: #fff;
    padding: 4px 6px;
    text-align: center;
    border: 1px solid #141414;
    font-size: 12px;
}
.Breeding_Select td {
    padding: 6px;
    text-align: center;
    border: 1px solid #141414;
    vertical-align: middle;
}
.Breeding_Select select,
.Breeding_Select input[type="text"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   MODAL / CONFIRM DIALOG  (from msc-style.css, self-contained)
   ══════════════════════════════════════════════════════════ */
@keyframes scale-fade {
    0%   { opacity: 0; transform: scale(.8) rotateX(-40deg); }
    50%  { opacity: 1; }
    70%  { transform: scale(1.05) rotateX(0); }
    100% { transform: scale(1) rotateX(0); }
}
.msc-confirm--animate {
    transform-origin: bottom center;
    animation: scale-fade 300ms forwards cubic-bezier(.8, .02, .45, .91);
}
.msc-confirm {
    color: #252525;
    -webkit-font-smoothing: antialiased;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;   /* whole confirm dialog sits above the 999 panels */
    /* The library reveals the dialog by setting inline display:block, which
       would beat a normal stylesheet rule. !important lets our flex-centering
       win over that inline style. The wrapper only exists in the DOM while
       shown (created on open, removed on close), so always-flex is safe. */
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.msc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.6;
    background-color: #999;
    z-index: 100000;   /* backdrop: above page chrome, below the content box */
}
.msc-confirm button {
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in;
}
.msc-confirm button:focus { outline: none; }
.msc-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 1.2em;
    text-align: center;
    vertical-align: middle;
    z-index: 100002;
    background: rgba(255,255,255,0.85);
}
.msc-close:hover { background: #eee; }
.msc-content {
    /* Centered by the flex wrapper (.msc-confirm), so this box needs no
       positioning of its own — leaving transform free for the scale-fade
       open animation. Sizes to content, wraps long names, never clipped. */
    position: relative;
    z-index: 100001;
    width: auto;
    min-width: 320px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    opacity: 1.0;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    padding: 40px;
    text-align: center;
    overflow-wrap: break-word;   /* long horse names wrap instead of overflowing */
}
@media (max-width: 600px) {
    .msc-content { padding: 20px; max-width: 94vw; }
}
.msc-title { font-size: 2em; margin: 0 0 0.1em 0; }
.msc-body { font-size: 1.2em; margin-bottom: 1em; color: #666; }
.msc-body p { margin: 0 0 10px 0; }
.msc-input {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.02em;
    font-weight: 400;
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    padding: 0 15px;
}
.msc-input:focus { outline: none; border-color: #0F985A; }
.msc-action button {
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 25px;
    min-width: 80px;
    background: #fff;
}
.msc-action button:focus { outline: none; }
.msc-ok { margin-right: 10px; }
button.msc-ok:hover, button.msc-ok:focus { border: 1px solid #0F985A; color: #0F985A; }
button.msc-cancel:hover, button.msc-cancel:focus { border: 1px solid #111; color: #111; }
.msc-sub { white-space: pre-line; }


/* ══════════════════════════════════════════════════════════
   LOGIN PAGE  (merged from the old login.css, redesigned)
   Scoped to body.login-page so the app-wide body rule above
   (overflow:hidden, #666 bg, bold 12px) does not bleed in,
   and these login styles do not affect the data pages.
   Background is a CSS gradient (replaces login_background_1px.png,
   which was a 1px strip being stretched by background-size:cover
   into a flat black field).
   ══════════════════════════════════════════════════════════ */
body.login-page {
    overflow: auto;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    margin: 0;
    padding: 0;
    background: radial-gradient(1200px 600px at 50% -10%,
                #4a4a4a 0%, #2b2b2b 38%, #1a1416 70%, #120c0e 100%);
    background-attachment: fixed;
    /* center the login card in the viewport */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Translucent card so the form reads as a deliberate panel,
   not floating in a void. Thin brand-red edge + soft shadow. */
.login {
    position: relative;
    width: 100%;
    max-width: 340px;
    padding: 34px 30px 30px;
    box-sizing: border-box;
    background: rgba(43, 43, 43, 0.55);
    border: 1px solid rgba(157, 22, 46, 0.35);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Title block above the form */
.login-title {
    text-align: center;
    margin-bottom: 18px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.login-title small {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: #c9a7ad;
    margin-top: 4px;
    letter-spacing: 2px;
}

/* Logo image, if present, centered above the title */
.login img {
    display: block;
    margin: 0 auto 10px;
    max-width: 100%;
    max-height: 70px;
    height: auto;
}

.login-help {
    margin: 20px 0;
    font-size: 12px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px rgba(0,0,0,0.2);
}
.login-help a { color: #cce7fa; text-decoration: none; }
.login-help a:hover { text-decoration: underline; }

.login p { margin: 14px 0 0; }
.login p:first-child { margin-top: 0; }

/* Form Inputs */
.login input[type="text"],
.login input[type="password"] {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    color: #404040;
    background-color: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 6px;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

/* Stronger red glow on focus/hover (only state that changes). */
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="text"]:hover,
.login input[type="password"]:hover {
    border-color: #9D162E;
    box-shadow: 0 0 10px 2px rgba(157,22,46,0.85);
}

/* Remember Me */
.login .remember_me {
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
    color: #eee;
}
.login .remember_me input { margin-right: 5px; }

/* Submit Button */
.login #button2 {
    background-color: #9D162E;
    border: none;
    color: #fff;
    width: 100%;
    height: 40px;
    margin-top: 22px;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    box-shadow: 0px 3px 4px rgba(0,0,0,0.25);
    transition: background-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.login #button2:hover {
    background-color: #6b0910;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.4);
}

/* The login error message sits inside the card; lighten it for the dark bg. */
.login .login-error {
    font-size: 11px;
    color: #ff8a8a;
    margin-top: 10px;
    text-align: center;
}