:root {
    --color-primary-0: #A6611A;   /* Amber / copper ale */
    --color-complement-1: #F2C14E; /* Golden beer foam */
    --success-colour: #4F8A10;
    --danger-colour: #B3251D;
}

body {
    margin-top: 50px;
    background: #FAF6EE;
    color: #2E2013;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}

/* Pulsating-circle loader, shown as an empty <div class="loading"></div>
   positioned inside a `position:relative` panel-body while data loads. */
.loading {
    border: 5px solid #333;
    border-radius: 30px;
    height: 30px;
    left: 50%;
    margin: -15px 0 0 -15px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 30px;
    animation: pulsate 2s ease-out;
    animation-iteration-count: infinite;
}
@keyframes pulsate {
    0% { transform: scale(.1); opacity: 0.0; }
    50% { opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* Tighter panel/row/column spacing, matching myathleticsstats' athletics_style.css
   (Bootstrap's own defaults - 15px panel padding, 15px column gutters - read as
   oversized once panels are stacked this densely). */
.row {
    padding: 0 5px;
}

.row:first-of-type {
    padding: 10px 5px 0 5px;
}

[class*="col-"] {
    padding: 0 5px;
}

.panel {
    border: 0;
    margin-bottom: 10px;
}

.panel-body,
.panel-heading {
    padding: 10px;
}

.panel-heading > h4 {
    margin-bottom: 0;
}

.navbar-inverse {
    background-color: var(--color-primary-0);
    border-color: var(--color-primary-0);
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
    color: #FFF3DD;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.15);
}

.panel-default > .panel-heading {
    background: white;
}

a {
    color: var(--color-primary-0);
}

a:hover,
a:focus {
    color: #7A4913;
}

.btn-primary {
    background-color: var(--color-primary-0);
    border-color: var(--color-primary-0);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #7A4913;
    border-color: #7A4913;
}

/* ===== Results table (recreates the spreadsheet grid) ===== */
.bracket-table {
    font-size: 12px;
    margin-bottom: 0;
}

.col-divider {
    border-left: 2px solid var(--color-primary-0) !important;
}

.col-divider-right {
    border-right: 2px solid var(--color-primary-0) !important;
}

.winner-cell-main {
    background-color: var(--success-colour) !important;
    color: #fff !important;
    font-weight: bold;
}

.winner-cell-plate {
    background-color: var(--danger-colour) !important;
    color: #fff !important;
    font-weight: bold;
}

.bracket-table th,
.bracket-table td {
    padding: 4px !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* Fixed column widths so switching years doesn't reflow the table width based
   on that year's particular beer/brewery name lengths - a year with a 3rd
   Round column is simply wider overall than one without, but within either,
   widths stay put. Text wraps within the fixed width rather than truncating. */
.bracket-fixed-cols {
    table-layout: fixed;
}

.bracket-fixed-cols th,
.bracket-fixed-cols td {
    width: 150px;
    white-space: normal !important;
    word-wrap: break-word;
}

/* Sticky two-row header on the stats table - JS sets each row's `top` offset
   (navbar height, then navbar height + row 1's rendered height). */
#tbl_stats thead th {
    position: sticky;
    z-index: 2;
    background-color: #fff;
}

.bracket-table caption {
    caption-side: top;
    font-weight: bold;
    color: var(--color-primary-0);
    padding: 2px 0;
}

.bracket-header-row th {
    background-color: var(--color-complement-1);
}

.bracket-divider td {
    background-color: var(--color-primary-0);
    color: #fff3dd;
    font-weight: bold;
    text-align: left;
    padding: 3px 6px;
}

.bracket-not-finished {
    font-style: italic;
    color: #888;
}

.bracket-qualifier-table {
    max-width: 500px;
    margin-bottom: 20px;
}

/* ===== Filterable brewery list ===== */
.brewery-list {
    margin: 10px 0 0 0;
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #eee;
}

.brewery-list li {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f2ede0;
}

.brewery-list li:hover {
    background-color: var(--color-complement-1);
}

/* ===== Sortable table ===== */
th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable::after {
    content: "\2195";
    margin-left: 4px;
    color: #ccc;
}

th.sortable.sort-asc::after {
    content: "\2191";
    color: var(--color-primary-0);
}

th.sortable.sort-desc::after {
    content: "\2193";
    color: var(--color-primary-0);
}