/*
 * ============================================================================
 *  STracker — Red / Black theme
 *  ---------------------------------------------------------------------------
 *  This file is loaded as the LAST stylesheet in <head> on every page
 *  (see http_templates/tmpl_base.py). It therefore overrides Bootstrap 3,
 *  bootstrap-theme, bootstrap-multiselect, bootstrap-datepicker, fileinput,
 *  sticky-footer.css and the small inline <style> block in the base template.
 *
 *  No template or Python logic is changed: only presentation lives here.
 *  Design tokens are kept in :root so the palette can be tuned in one place.
 * ============================================================================
 */

:root {
    /* core palette */
    --bg:              #0a0a0a;
    --bg-soft:         #0f0f0f;
    --surface:         #121212;
    --surface-2:       #171717;
    --surface-3:       #1c1c1c;
    --border:          #242424;
    --border-strong:   #333333;

    --red:             #cc0000;
    --red-bright:      #ff3b3b;
    --red-soft:        #ff6b6b;
    --red-deep:        #7a0000;
    --red-wash:        rgba(204, 0, 0, 0.12);
    --red-wash-strong: rgba(204, 0, 0, 0.22);

    --text:            #e6e6e6;
    --text-2:          #b3b3b3;
    --muted:           #8a8a8a;
    --muted-2:         #666666;

    --radius:          10px;
    --radius-sm:       7px;
    --shadow:          0 14px 40px rgba(0, 0, 0, 0.55);
    --font:            "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei",
                       system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono:       Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html {
    background: #0a0a0a;
}

@media (max-width: 767px) {

  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* 隐藏固定底部栏（版权 + 分页 + 版本号） */
  .navbar.navbar-fixed-bottom,
  .footer.navbar-fixed-bottom {
    display: none !important;
  }

  /* 清掉为底部栏预留的空白 */
  html body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body {
    padding-bottom: 0 !important;
  }
}

/* "html body" intentionally matches the specificity of the optional pts
   inline rule in tmpl_base.py, so this later stylesheet always wins. */
html body {
    background-color: var(--bg);
    background-image:
        radial-gradient(1100px 520px at 12% -8%, rgba(204, 0, 0, 0.17), transparent 62%),
        radial-gradient(900px 480px at 100% 0%, rgba(122, 0, 0, 0.12), transparent 55%),
        linear-gradient(180deg, #0b0b0b 0%, #090909 55%, #0a0a0a 100%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* thin racing stripe across the very top of the viewport */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #5c0000 0%,
        #a80000 28%,
        #ff2b2b 50%,
        #a80000 72%,
        #5c0000 100%);
    z-index: 2100;
    pointer-events: none;
}

::selection {
    background: rgba(204, 0, 0, 0.55);
    color: #ffffff;
}
::-moz-selection {
    background: rgba(204, 0, 0, 0.55);
    color: #ffffff;
}

* {
    scrollbar-color: #3a3a3a #0d0d0d;
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #0d0d0d;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border: 2px solid #0d0d0d;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--red);
}

a {
    color: var(--red-bright);
    text-decoration: none;
    transition: color 0.18s ease;
}
a:hover,
a:focus {
    color: #ffffff;
    text-decoration: none;
}
a:focus {
    outline: 2px solid rgba(255, 59, 59, 0.45);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #f5f5f5;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p,
ul,
ol {
    color: var(--text-2);
    line-height: 1.75;
}

p {
    margin: 0 0 12px;
}

small,
.small {
    color: var(--muted);
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 22px 0;
}

code,
kbd,
pre,
samp {
    font-family: var(--font-mono);
    color: #ffb3b3;
    background-color: #151515;
    border: 1px solid #262626;
    border-radius: 5px;
}
code { padding: 2px 6px; }
pre { padding: 12px 14px; color: #d8d8d8; }

blockquote {
    border-left: 3px solid var(--red);
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.02);
}

mark,
.mark {
    background: rgba(204, 0, 0, 0.35);
    color: #fff;
    padding: 1px 4px;
    border-radius: 3px;
}

.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--red-bright) !important; }
.text-success { color: #8fe0a5 !important; }
.text-warning { color: #ffcf70 !important; }
.text-danger { color: #ff8080 !important; }
.text-info { color: #b9d6ea !important; }

.bg-primary { background-color: var(--red) !important; }
.bg-danger { background-color: var(--red-deep) !important; }

/* ==========================================================================
   2. Navbar (works with both navbar-default and navbar-inverse)
   ========================================================================== */

.navbar.navbar-default,
.navbar.navbar-inverse {
    background-color: rgba(10, 10, 10, 0.94);
    background-image: none;
    border: 0;
    border-bottom: 1px solid #2a0d0d;
    border-radius: 0;
    min-height: 56px;
    margin-bottom: 0;
    box-shadow:
        0 1px 0 rgba(204, 0, 0, 0.22),
        0 14px 35px rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.navbar.navbar-fixed-bottom {
    border-bottom: 0;
    border-top: 1px solid #2a0d0d;
    box-shadow:
        0 -1px 0 rgba(204, 0, 0, 0.22),
        0 -14px 35px rgba(0, 0, 0, 0.45);
}

/* the bottom bar is now a real <footer>; sticky-footer.css would position
   .footer absolutely, so keep it fixed and let its height follow content */
.footer.navbar-fixed-bottom {
    position: fixed;
    height: auto;
    min-height: 60px;
}

/* keep the top navigation visible while scrolling long statistics tables */
.navbar.navbar-default:not(.navbar-fixed-bottom),
.navbar.navbar-inverse:not(.navbar-fixed-bottom) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar .container-fluid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* brand */
.navbar .navbar-brand {
    height: auto;
    padding: 11px 18px 11px 0;
    line-height: 34px;
    color: #f5f5f5;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    color: #ffffff;
    background: transparent;
}
.navbar .navbar-brand img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: 34px;
    filter: drop-shadow(0 0 10px rgba(255, 40, 40, 0.22));
}
.navbar .navbar-brand img.img-responsive {
    width: auto;
}

/* top navigation links */
.navbar .navbar-nav > li > a {
    color: #9a9a9a;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 10px 14px;
    margin: 12px 5px;
    border-radius: 12px;
    text-shadow: none;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #1b1b1b;
}
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-image: var(--red);
    background-color: var(--red);
    box-shadow:
        inset 0 0 0 1px rgba(255, 100, 100, 0.45),
        0 8px 18px rgba(204, 0, 0, 0.30);
}
.navbar .navbar-nav > .open > a,
.navbar .navbar-nav > .open > a:hover,
.navbar .navbar-nav > .open > a:focus {
    color: #ffffff;
    background-color: #1b1b1b;
    box-shadow: inset 0 0 0 1px #2e2e2e;
}
.navbar .navbar-nav > li > a .caret {
    border-top-color: currentColor;
}

.navbar .navbar-toggle {
    border: 0px solid #2e2e2e;
    border-radius: 7px;
    margin-top: 11px;
    margin-bottom: 11px;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
    background: #1d0c0c;
    border-color: #7a0000;
}
.navbar .navbar-toggle .icon-bar {
    background-color: #e0e0e0;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
    border-color: var(--border);
}

/* dropdown menus inside the navbar */
.navbar .navbar-nav > li > .dropdown-menu {
    background: #101010;
    border: 1px solid #2a2a2a;
    margin-top: 4px;
}

/* bottom bar */
.navbar.navbar-fixed-bottom {
    min-height: 60px;
}
.footer-brand {
    margin: 0;
    padding: 19px 0;
    overflow: hidden;
    color: #777777;
    font-size: 10px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.footer-brand-cn {
    color: #c9c9c9;
    letter-spacing: 0.08em;
}
.footer-brand-sep {
    margin: 0 8px;
    color: var(--red);
}
.footer-brand-en {
    color: #777777;
}
.navbar-fixed-bottom .navbar-text {
    margin: 0;
    padding: 19px 0;
    color: #6f6f6f;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.navbar-fixed-bottom .navbar-text b {
    color: var(--red-soft);
}
.navbar-fixed-bottom .pagination {
    margin: 14px 0;
}

@media (max-width: 767px) {
    .navbar .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    .navbar .navbar-brand {
        padding: 9px 12px 9px 0;
        line-height: 28px;
    }
    .navbar .navbar-brand img {
        height: 28px;
    }
    .navbar .navbar-nav {
        margin: 0;
    }
    .navbar .navbar-nav > li > a {
        margin: 2px 0;
        padding: 11px 14px;
        border-radius: 6px;
    }
    .navbar .navbar-nav .open .dropdown-menu {
        background: #0e0e0e;
        border: 1px solid #262626;
    }
    .navbar .navbar-nav .open .dropdown-menu > li > a {
        color: #c9c9c9;
        padding: 9px 18px;
    }
    .navbar .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar .navbar-nav .open .dropdown-menu > li > a:focus {
        background: #1b0b0b;
        color: #ffffff;
    }
    html body {
        margin-bottom: 76px;
    }
    .footer.navbar-fixed-bottom {
        min-height: 76px;
    }
    .footer .container-fluid {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .footer-brand {
        padding: 4px 0 2px;
        text-align: center;
        font-size: 9px;
        letter-spacing: 0.06em;
    }
    .footer-brand-sep {
        margin: 0 6px;
    }
    .footer .col-sm-3:last-child {
        display: none;
    }
    .footer .pagination {
        margin: 2px 0 6px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .footer-brand-en,
    .footer-brand-sep {
        display: none;
    }
}

/* ==========================================================================
   3. Page header, banner and headings
   ========================================================================== */

.page-header {
    position: relative;
    margin: 26px 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.page-header .ACimg {
    max-width: 100%;
    max-height: 62px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(204, 0, 0, 0.18));
}

.container > .row > .col-md-12 > h1 {
    margin-top: 14px;
    margin-bottom: 12px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.container > .row > .col-md-12 > h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 14px;
    background: linear-gradient(90deg, var(--red), rgba(204, 0, 0, 0));
}

.container > .row > .col-md-12 > h2 {
    margin-top: 30px;
    margin-bottom: 10px;
    padding-left: 14px;
    border-left: 3px solid var(--red);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .page-header {
        margin: 16px 0 14px;
    }
    .page-header .ACimg {
        max-height: 46px;
    }
    .container > .row > .col-md-12 > h1 {
        font-size: 21px;
    }
}

/* ==========================================================================
   4. Tables
   前台每个表格即一张“卡片”：无彩度背景 + 紫色最快圈。
   紫色只用于“最快”标记，其余全部是灰阶。
   ========================================================================== */

/* ---- 卡片外壳 ---- */
html body .row > [class*="col-"] > .table {
    margin: 0 0 26px;
    color: #f0f0f0;
    background-color: #0e0e0e;
    border: 2px solid #666;
    border-radius: 18px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---- 表头：白字、无彩度底、细灰线 ---- */
html body .row > [class*="col-"] > .table > thead > tr > th,
html body .row > [class*="col-"] > .table > thead > tr > td {
    padding: 14px 12px 10px;
    color: #ffffff;
    background-color: #161616;
    border: 0;
    border-bottom: 1px solid #2c2c2c;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---- 数据行 ---- */
html body .row > [class*="col-"] > .table > tbody > tr > td,
html body .row > [class*="col-"] > .table > tbody > tr > th,
html body .row > [class*="col-"] > .table > tfoot > tr > td {
    padding: 12px;
    color: #f0f0f0;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #212121;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
}
html body .row > [class*="col-"] > .table > tbody > tr:last-child > td,
html body .row > [class*="col-"] > .table > tbody > tr:last-child > th {
    border-bottom: 0;
}

/* ---- 斑马纹：同色系深灰，仅差一档明度 ---- */
html body .row > [class*="col-"] > .table-striped > tbody > tr:nth-child(odd) > td,
html body .row > [class*="col-"] > .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #101010;
}
html body .row > [class*="col-"] > .table-striped > tbody > tr:nth-child(even) > td,
html body .row > [class*="col-"] > .table-striped > tbody > tr:nth-child(even) > th {
    background-color: #0b0b0b;
}

/* ---- 悬停：中性提亮，不带任何色相 ---- */
html body .row > [class*="col-"] > .table-hover > tbody > tr:hover > td,
html body .row > [class*="col-"] > .table-hover > tbody > tr:hover > th {
    background-color: #202020;
    color: #ffffff;
}

/* ---- 表格标题 ---- */
html body .row > [class*="col-"] > .table > caption {
    padding: 14px 18px 12px;
    color: #9a9a9a;
    background-color: #161616;
    border-bottom: 1px solid #101010;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
    text-shadow: none;
}

/* ---- 排名列：灰阶 ---- */
html body .row > [class*="col-"] > .table > tbody > tr > td:first-child {
    color: #aaaaaa;
    font-weight: 700;
}

/* ---- 第 4 列起（圈速/差距/日期/圈数等）：等宽加粗 ---- */
html body .row > [class*="col-"] > .table > tbody > tr > td:nth-child(n+4) {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---- 第一名圈速：紫色 ---- */
html body .row > [class*="col-"] > .table > tbody > tr > td.bestLap:nth-child(n+4) {
    color: #c084fc;
}

/* ---- 状态格：灰阶胶囊 ---- */
html body .row > [class*="col-"] > .table > tbody > tr > td.success,
html body .row > [class*="col-"] > .table > tbody > tr > td.warning,
html body .row > [class*="col-"] > .table > tbody > tr > td.danger {
    background-color: transparent !important;
    color: #d0d0d0;
}
html body .row > [class*="col-"] > .table > tbody > tr > td.success > span,
html body .row > [class*="col-"] > .table > tbody > tr > td.danger > span {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
html body .row > [class*="col-"] > .table > tbody > tr > td.success > span {
    color: #e8e8e8;
    background-color: #333333;
}
html body .row > [class*="col-"] > .table > tbody > tr > td.danger > span {
    color: #ffffff;
    background-color: #555555;
}

/* ---- 嵌套表格 ---- */
html body .row > [class*="col-"] > .table > tbody > tr > td .table {
    margin: 6px 0;
    border-radius: 10px;
}

.table-striped > tbody > tr > td {
    background-color: transparent !important;
}

/* ---- 窄屏 ---- */
@media (max-width: 767px) {
    html body .row > [class*="col-"] > .table > caption {
        padding: 12px 14px 10px;
        font-size: 11px;
    }
    html body .row > [class*="col-"] > .table > thead > tr > th {
        padding: 10px 8px 8px;
        font-size: 10px;
    }
    html body .row > [class*="col-"] > .table > tbody > tr > td,
    html body .row > [class*="col-"] > .table > tbody > tr > th {
        padding: 8px;
        font-size: 11.5px;
    }
    html body .row > [class*="col-"] > .table > tbody > tr > td:nth-child(n+4) {
        font-size: 11.5px;
    }
}

/* ==========================================================================
   5. Panels
   ========================================================================== */

.panel {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.panel-heading {
    padding: 12px 16px;
    background-color: var(--surface-2);
    background-image: none;
    border-color: var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    color: #ededed;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* bootstrap-theme paints pale gradients on every panel heading; remove them */
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
    background-image: none;
}

.panel-body {
    padding: 14px 16px;
    color: var(--text-2);
    line-height: 1.7;
}

.panel-footer {
    background-color: var(--surface-2);
    border-top: 1px solid var(--border);
    color: var(--muted);
}

.panel-default {
    border-color: var(--border);
}
.panel-default > .panel-heading {
    color: #ededed;
    background-color: var(--surface-2);
    border-color: var(--border);
}

.panel-info {
    border-color: var(--border);
    border-left: 3px solid var(--red);
}
.panel-info > .panel-heading {
    color: var(--red-soft);
    background-color: #170d0d;
    border-color: #2a1414;
}

.panel-warning {
    border-color: var(--border);
    border-left: 3px solid #d98a00;
}
.panel-warning > .panel-heading {
    color: #ffcf70;
    background-color: #1d170a;
    border-color: #33270e;
}

.panel-success {
    border-color: var(--border);
    border-left: 3px solid #2e7d46;
}
.panel-success > .panel-heading {
    color: #8fe3a6;
    background-color: #112016;
    border-color: #1f4029;
}

.panel-danger {
    border-color: var(--border);
    border-left: 3px solid var(--red);
}
.panel-danger > .panel-heading {
    color: var(--red-soft);
    background-color: #1d0c0c;
    border-color: #381414;
}

.panel-title {
    color: inherit;
    font-weight: 700;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
    padding: 5px 8px;
    border-width: 2px;
    border-color: #ccc;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.015em;
    text-shadow: none;
    box-shadow: none;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.28);
}
.btn:active,
.btn.active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* primary — racing red */
.btn-primary {
    color: #ffffff;
    background-color: var(--red);
    background-image: var(--red);
    border-color: #ccc;
    border-width: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 4px 14px rgba(204, 0, 0, 0.22);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    margin: 5px;
    color: #ffffff;
    background-color: var(--red);
    background-image: var(--red);
    border-color: #ff3b3b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 6px 20px rgba(204, 0, 0, 0.38);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #ffffff;
    background-color: #8f0000;
    background-image: none;
    border-color: #a30000;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover {
    color: #b08a8a;
    background-color: #351010;
    background-image: none;
    border-color: #4a1a1a;
    box-shadow: none;
    opacity: 0.7;
}

/* default — gunmetal */
.btn-default {
    color: #d6d6d6;
    background-color: #161616;
    background-image: none;
    border-color: #333333;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus {
    color: #ffffff;
    background-color: #202020;
    border-color: var(--red);
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: #ffffff;
    background-color: #262626;
    border-color: #8a0000;
    background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default {
    color: #5f5f5f;
    background-color: #111111;
    border-color: #242424;
    opacity: 0.7;
}

/* info — neutral control (used for the +/- filter toggles) */
.btn-info {
    color: #d9d9d9;
    background-color: #181818;
    background-image: none;
    border-color: #363636;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus {
    color: #ffffff;
    background-color: #222222;
    border-color: var(--red);
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    color: #ffffff;
    background-color: #2a1010;
    border-color: #8a0000;
    background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info {
    color: #5f5f5f;
    background-color: #111111;
    border-color: #242424;
    opacity: 0.7;
}

/* success — muted pit-lane green */
.btn-success {
    color: #b7f0c6;
    background-color: #12351f;
    background-image: linear-gradient(180deg, #17452a 0%, #0f2c1a 100%);
    border-color: #2a6b40;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
    color: #ffffff;
    background-color: #1d5632;
    background-image: none;
    border-color: #3d9460;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    color: #ffffff;
    background-color: #0d2818;
    border-color: #2a6b40;
    background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success {
    color: #6f8a77;
    background-color: #102018;
    border-color: #1f3a29;
    opacity: 0.7;
}

/* warning — amber */
.btn-warning {
    color: #ffd98a;
    background-color: #34260c;
    background-image: linear-gradient(180deg, #443311 0%, #2c200a 100%);
    border-color: #7a5a1e;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
    color: #1b1408;
    background-color: #f0b64a;
    background-image: none;
    border-color: #ffcf70;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
    color: #1b1408;
    background-color: #d99a28;
    border-color: #b37a14;
    background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning {
    color: #8a7550;
    background-color: #201a0e;
    border-color: #3a2e14;
    opacity: 0.7;
}

/* danger — deep red */
.btn-danger {
    color: #ffffff;
    background-color: #8e0b0b;
    background-image: linear-gradient(180deg, #a80d0d 0%, #740000 100%);
    border-color: #b31717;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus {
    color: #ffffff;
    background-color: #c00d0d;
    background-image: linear-gradient(180deg, #d81414 0%, #930000 100%);
    border-color: #ff4d4d;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    color: #ffffff;
    background-color: #5e0000;
    border-color: #7a0000;
    background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger {
    color: #9a6a6a;
    background-color: #2a0c0c;
    border-color: #401414;
    background-image: none;
    opacity: 0.7;
}

.btn-link {
    color: var(--red-soft);
    font-weight: 600;
}
.btn-link:hover,
.btn-link:focus {
    color: #ffffff;
    text-decoration: underline;
}

.btn-xs {
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

label,
.control-label {
    color: #9c9c9c;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.form-control {
    height: 34px;
    padding: 6px 11px;
    color: var(--text);
    background-color: #0d0d0d;
    border: 2px solid #d6d6d6;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.form-control:hover {
    border-color: #3a3a3a;
}

.form-control:focus {
    color: #ffffff;
    background-color: #111111;
    border-color: var(--red);
    box-shadow:
        0 0 0 3px rgba(204, 0, 0, 0.18),
        inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    color: #6a6a6a;
    background-color: #101010;
    border-color: #242424;
    box-shadow: none;
}

.form-control::-webkit-input-placeholder { color: #5f5f5f; }
.form-control::-moz-placeholder { color: #5f5f5f; opacity: 1; }
.form-control:-ms-input-placeholder { color: #5f5f5f; }
.form-control::placeholder { color: #5f5f5f; }

/* native select: dark surface + red caret */
select.form-control {
    color: var(--text);
    background-color: #0d0d0d;
}
select.form-control:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23ff3b3b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 10px 6px;
}
select.form-control[multiple] {
    padding: 6px;
    background-image: none;
}
select.form-control option,
select.form-control optgroup {
    color: var(--text);
    background-color: #111111;
}
select.form-control option:checked,
select.form-control option:hover {
    color: #ffffff;
    background-color: #7a0000;
}

textarea.form-control {
    height: auto;
    min-height: 90px;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--red);
}

.checkbox label,
.radio label,
.checkbox-inline,
.radio-inline {
    color: #c9c9c9;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.form-control-static {
    color: var(--text);
}

.help-block {
    color: var(--muted);
    font-size: 12px;
}

.input-group-addon {
    color: #a0a0a0;
    background-color: #161616;
    border: 2px solid #ccc;
    border-radius: var(--radius-sm);
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* validation states */
.has-success .form-control {
    border-color: #2e7d46;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.has-success .form-control:focus {
    border-color: #3d9460;
    box-shadow: 0 0 0 3px rgba(46, 125, 70, 0.22);
}
.has-success .control-label,
.has-success .help-block {
    color: #8fe3a6;
}
.has-warning .form-control {
    border-color: #7a5a1e;
}
.has-warning .form-control:focus {
    border-color: #d99a28;
    box-shadow: 0 0 0 3px rgba(217, 154, 40, 0.22);
}
.has-warning .control-label,
.has-warning .help-block {
    color: #ffcf70;
}
.has-error .form-control {
    border-color: #8a0000;
}
.has-error .form-control:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.24);
}
.has-error .control-label,
.has-error .help-block {
    color: #ff9a9a;
}

/* ==========================================================================
   8. Dropdown menus
   ========================================================================== */

.dropdown-menu {
    min-width: 180px;
    padding: 6px 0;
    color: var(--text-2);
    background-color: #121212;
    border: 1px solid #2a2a2a;
    border-radius: 9px;
    box-shadow: var(--shadow);
}

.dropdown-menu > li > a {
    padding: 8px 16px;
    color: #c9c9c9;
    font-size: 13px;
    line-height: 1.5;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: #1f0b0b;
    background-image: none;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: var(--red);
    background-image: none;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    color: #5a5a5a;
    background-color: transparent;
}
.dropdown-menu .divider {
    height: 1px;
    margin: 6px 0;
    overflow: hidden;
    background-color: #262626;
}
.dropdown-header {
    padding: 6px 16px;
    color: #777777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* dropdowns containing admin forms (championship/session/live map) */
.dropdown-menu .form-horizontal {
    padding: 4px 10px;
}
.dropdown-menu .form-group {
    margin-bottom: 8px;
}
.dropdown-menu .form-group:last-child {
    margin-bottom: 2px;
}

/* ==========================================================================
   9. bootstrap-multiselect
   ========================================================================== */

.multiselect-container {
    padding: 4px 0;
    background-color: #121212;
    border: 1px solid #2a2a2a;
    border-radius: 9px;
    box-shadow: var(--shadow);
}

.multiselect-container > li > a {
    padding: 0;
    color: #c9c9c9;
}

.multiselect-container > li > a > label {
    padding: 7px 16px 7px 38px;
    color: #c9c9c9;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.multiselect-container > li > a:hover,
.multiselect-container > li > a:focus,
.multiselect-container > li.active > a {
    background-color: #1f0b0b;
    color: #ffffff;
}
.multiselect-container > li > a:hover > label,
.multiselect-container > li.active > a > label {
    color: #ffffff;
}
.multiselect-container > li > a > label > input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--red);
}
.multiselect-container > li.multiselect-all > a > label {
    color: #ededed;
    font-weight: 700;
}
.multiselect-container .multiselect-filter > input {
    color: var(--text);
    background-color: #0d0d0d;
    border-color: #2b2b2b;
}
.multiselect-container .filter .btn {
    color: #bdbdbd;
    background-color: #161616;
    border-color: #333333;
}
.multiselect-container .filter .btn:hover {
    color: #ffffff;
    background-color: #222222;
}

.btn-group > .multiselect.btn,
button.multiselect {
    color: #d6d6d6;
    background-color: #161616;
    border-color: #ccc;
    border-width: 2px;
    text-align: left;
    margin: 5px;
}
.btn-group > .multiselect.btn:hover,
button.multiselect:hover,
button.multiselect:focus {
    color: #ffffff;
    background-color: #202020;
    border-color: var(--red);
}
.multiselect-selected-text {
    color: inherit;
}

/* ==========================================================================
   10. bootstrap-datepicker
   ========================================================================== */

.datepicker.dropdown-menu,
.datepicker.datepicker-inline {
    padding: 8px;
    color: var(--text-2);
    background-color: #121212;
    border: 1px solid #2a2a2a !important;
    border-radius: 9px;
    box-shadow: var(--shadow);
}

.datepicker table {
    margin: 0;
}

.datepicker table tr td,
.datepicker table tr th {
    color: #c9c9c9;
    border: 0;
    border-radius: 6px;
    text-shadow: none;
}

.datepicker table tr th {
    color: #9c9c9c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.datepicker table tr th.datepicker-switch {
    color: #ededed;
    font-size: 12px;
}
.datepicker table tr th.dow {
    color: var(--red-soft);
    font-size: 9.5px;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.datepicker table tr td span:hover {
    color: #ffffff;
    background: #2a1010;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #565656;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: #464646;
    background: transparent;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    color: #ffcf70;
    background-color: #34260c;
    border-color: #7a5a1e;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover {
    color: #f0c4c4;
    background-color: #2a0d0d;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:focus,
.open .dropdown-toggle.datepicker table tr td.active {
    color: #ffffff !important;
    background-color: var(--red) !important;
    background-image: none !important;
    border-color: #ff4d4d !important;
    box-shadow: 0 4px 14px rgba(204, 0, 0, 0.35);
    text-shadow: none !important;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.active {
    color: #ffffff !important;
    background-color: var(--red) !important;
    background-image: none !important;
    border-color: #ff4d4d !important;
}

.datepicker-dropdown:before {
    border-bottom-color: #2a2a2a;
}
.datepicker-dropdown:after {
    border-bottom-color: #121212;
}
.datepicker-dropdown.datepicker-orient-top:before {
    border-top-color: #2a2a2a;
}
.datepicker-dropdown.datepicker-orient-top:after {
    border-top-color: #121212;
}

/* ==========================================================================
   11. bootstrap-fileinput (general admin upload)
   ========================================================================== */

.file-input {
    color: var(--text-2);
}
.file-caption {
    color: var(--text);
    background-color: #0d0d0d;
    border-color: #2b2b2b;
}
.file-caption-disabled {
    color: #666;
    background-color: #101010;
    border-color: #242424;
}
.file-preview {
    background-color: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 9px;
}
.file-preview-frame {
    background-color: #111111;
    border: 1px solid #2a2a2a;
    box-shadow: none;
}
.file-preview-frame:hover {
    border-color: var(--red);
    box-shadow: 0 0 0 1px rgba(204, 0, 0, 0.35);
}
.file-drop-zone {
    background-color: #0d0d0d;
    border: 1px dashed #3a3a3a;
    border-radius: 9px;
}
.file-drop-zone-title {
    color: #666;
}
.file-drop-zone .file-preview-text,
.file-preview-text {
    color: #a9a9a9;
}
.highlighted {
    background-color: #1a0b0b !important;
    border: 2px dashed var(--red) !important;
}
.file-error-message {
    color: #ff9a9a;
    background-color: #2a0d0d;
    border: 1px solid #5a1a1a;
}
.file-footer-caption,
.file-thumbnail-footer .file-caption-name {
    color: var(--muted);
}
.file-upload-indicator {
    color: #999;
}
.btn-file {
    color: #e6e6e6;
    background-color: #1a1a1a;
    border-color: #3a3a3a;
}

/* fallback for the native file input before bootstrap-fileinput initializes */
input[type="file"] {
    max-width: 100%;
    padding: 6px;
    color: var(--text-2);
    background-color: #0d0d0d;
    border: 1px solid #2b2b2b;
    border-radius: var(--radius-sm);
}
input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    color: #e6e6e6;
    background-color: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
    color: #ffffff;
    background-color: #242424;
    border-color: var(--red);
}
input[type="file"]::-webkit-file-upload-button {
    margin-right: 10px;
    padding: 6px 12px;
    color: #e6e6e6;
    background-color: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    cursor: pointer;
}

/* ==========================================================================
   12. Pagination
   ========================================================================== */

.pagination > li > a,
.pagination > li > span {
    margin: 0 2px;
    color: #bdbdbd;
    background-color: #121212;
    border: 1px solid #2a2a2a;
    border-radius: 6px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: #ffffff;
    background-color: #1f0b0b;
    border-color: #7a0000;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    color: #ffffff;
    background-color: var(--red);
    border-color: #ff4d4d;
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
    cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > a,
.pagination > .disabled > a:hover {
    color: #4f4f4f;
    background-color: #0e0e0e;
    border-color: #222222;
}

/* ==========================================================================
   13. Tooltips, popovers, modals, alerts, labels
   ========================================================================== */

.tooltip.in {
    opacity: 0.98;
}
.tooltip-inner {
    max-width: 320px;
    padding: 8px 12px;
    color: #ededed;
    background-color: #141414;
    border: 1px solid #7a0000;
    border-radius: 7px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    font-size: 12px;
    line-height: 1.5;
}
.tooltip.top .tooltip-arrow { border-top-color: #7a0000; }
.tooltip.top-left .tooltip-arrow { border-top-color: #7a0000; }
.tooltip.top-right .tooltip-arrow { border-top-color: #7a0000; }
.tooltip.right .tooltip-arrow { border-right-color: #7a0000; }
.tooltip.left .tooltip-arrow { border-left-color: #7a0000; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #7a0000; }
.tooltip.bottom-left .tooltip-arrow { border-bottom-color: #7a0000; }
.tooltip.bottom-right .tooltip-arrow { border-bottom-color: #7a0000; }

.popover {
    color: var(--text-2);
    background-color: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 9px;
    box-shadow: var(--shadow);
}
.popover-title {
    color: #ededed;
    background-color: #191919;
    border-bottom: 1px solid #2a2a2a;
}
.popover.top > .arrow { border-top-color: #2a2a2a; }
.popover.top > .arrow:after { border-top-color: #141414; }
.popover.right > .arrow { border-right-color: #2a2a2a; }
.popover.right > .arrow:after { border-right-color: #141414; }
.popover.bottom > .arrow { border-bottom-color: #2a2a2a; }
.popover.bottom > .arrow:after { border-bottom-color: #141414; }
.popover.left > .arrow { border-left-color: #2a2a2a; }
.popover.left > .arrow:after { border-left-color: #141414; }

.modal-content {
    background-color: #121212;
    border: 1px solid #2a2a2a;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.modal-header,
.modal-footer {
    border-color: var(--border);
}
.modal-header .close {
    color: #ffffff;
    opacity: 0.65;
    text-shadow: none;
}
.modal-header .close:hover {
    opacity: 1;
}
.modal-backdrop.in {
    opacity: 0.72;
}

.alert {
    border-width: 1px;
    border-radius: 9px;
    background-image: none;
}
.alert-info {
    color: #c4d8e6;
    background-color: #101820;
    border-color: #223444;
}
.alert-success {
    color: #a8e6ba;
    background-color: #102018;
    border-color: #1f4029;
}
.alert-warning {
    color: #ffd98a;
    background-color: #241b0b;
    border-color: #4a3814;
}
.alert-danger {
    color: #ff9a9a;
    background-color: #240c0c;
    border-color: #4a1616;
}

.label {
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.label-default {
    color: #cfcfcf;
    background-color: #2a2a2a;
}
.label-primary {
    color: #ffffff;
    background-color: var(--red);
}
.label-success {
    color: #d7f7df;
    background-color: #1f6b3e;
}
.label-info {
    color: #d6e8f5;
    background-color: #2b4356;
}
.label-warning {
    color: #241a08;
    background-color: #e0a83a;
}
.label-danger {
    color: #ffffff;
    background-color: #b30000;
}

.badge {
    color: #ffffff;
    background-color: var(--red);
    font-weight: 700;
}

.close {
    color: #ffffff;
    text-shadow: none;
    opacity: 0.6;
}
.close:hover,
.close:focus {
    color: #ffffff;
    opacity: 1;
}

/* ==========================================================================
   14. Pygal SVG charts
   The charts ship their own <style> block with ID selectors and a light
   plot background. !important is required to lift them onto the dark theme.
   ========================================================================== */

svg[id^="chart-"] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 18px;
    overflow: visible;
    background: transparent !important;
}

/* plot area & frame */
svg[id^="chart-"] .plot > .background {
    fill: rgba(255, 255, 255, 0.025) !important;
}
svg[id^="chart-"] .graph > .background {
    fill: transparent !important;
}
svg[id^="chart-"] .graph {
    fill: #cfcfcf !important;
}

/* all chart text */
svg[id^="chart-"] text,
svg[id^="chart-"] tspan {
    fill: #cfcfcf !important;
}
svg[id^="chart-"] .title {
    fill: #f0f0f0 !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
svg[id^="chart-"] .legends .legend text {
    fill: #b8b8b8 !important;
}
svg[id^="chart-"] .axis text,
svg[id^="chart-"] .axis text.major {
    fill: #9a9a9a !important;
}
svg[id^="chart-"] .no_data {
    fill: #6f6f6f !important;
}

/* grid / axes */
svg[id^="chart-"] .axis .line {
    stroke: #4a4a4a !important;
}
svg[id^="chart-"] .axis .major.line {
    stroke: #555555 !important;
}
svg[id^="chart-"] .axis .guide.line {
    stroke: #262626 !important;
}
svg[id^="chart-"] .axis .major.guide.line {
    stroke: #3a3a3a !important;
}
svg[id^="chart-"] .axis .guides:hover .guide.line {
    stroke: #8a0000 !important;
}
svg[id^="chart-"] .axis .guides:hover text {
    fill: #ffffff !important;
}

/* warm red / amber / silver series palette instead of pygal's defaults */
svg[id^="chart-"] .color-0,
svg[id^="chart-"] .color-0 a:visited {
    stroke: #ff3b3b !important;
    fill: #ff3b3b !important;
}
svg[id^="chart-"] .color-1,
svg[id^="chart-"] .color-1 a:visited {
    stroke: #ff8a4c !important;
    fill: #ff8a4c !important;
}
svg[id^="chart-"] .color-2,
svg[id^="chart-"] .color-2 a:visited {
    stroke: #ffc857 !important;
    fill: #ffc857 !important;
}
svg[id^="chart-"] .color-3,
svg[id^="chart-"] .color-3 a:visited {
    stroke: #d6d6d6 !important;
    fill: #d6d6d6 !important;
}
svg[id^="chart-"] .color-4,
svg[id^="chart-"] .color-4 a:visited {
    stroke: #ff6b9d !important;
    fill: #ff6b9d !important;
}
svg[id^="chart-"] .color-5,
svg[id^="chart-"] .color-5 a:visited {
    stroke: #bdbdbd !important;
    fill: #bdbdbd !important;
}

/* chart tooltips (inner <g class="tooltip">, not Bootstrap tooltips) */
svg[id^="chart-"] .tooltip rect {
    fill: #141414 !important;
    stroke: #8a0000 !important;
    fill-opacity: 0.98 !important;
}
svg[id^="chart-"] .tooltip text,
svg[id^="chart-"] .tooltip .label,
svg[id^="chart-"] .tooltip .x_label,
svg[id^="chart-"] .tooltip .legend {
    fill: #ededed !important;
}
svg[id^="chart-"] .tooltip .legend {
    fill: #a8a8a8 !important;
}

/* map charts keep a dark land shape with a red outline where possible */
svg[id^="chart-"] .map-element {
    fill: #1d1d1d !important;
}

/* ==========================================================================
   15. Live map
   ========================================================================== */

#stracker_liveview {
    display: block;
    width: 100%;
    height: auto;
    background-color: #0d0d0d;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   16. Misc Bootstrap pieces
   ========================================================================== */

.well {
    background-color: var(--surface);
    background-image: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}

.list-group-item {
    color: var(--text-2);
    background-color: var(--surface);
    border-color: var(--border);
}

.progress {
    height: 14px;
    background-color: #151515;
    background-image: none;
    border-radius: 8px;
    box-shadow: none;
}
.progress-bar {
    background-color: var(--red);
    background-image: none;
    box-shadow: none;
}

.img-thumbnail {
    background-color: var(--surface);
    border: 1px solid var(--border);
}

.jumbotron {
    color: var(--text);
    background-color: var(--surface);
}

.nav-tabs {
    border-bottom-color: var(--border);
}
.nav-tabs > li > a {
    color: var(--muted);
    border-color: transparent;
}
.nav-tabs > li > a:hover {
    color: #ffffff;
    background-color: #161616;
    border-color: #262626 #262626 transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #ffffff;
    background-color: var(--surface);
    border-color: #2a2a2a #2a2a2a transparent;
}

/* bottom navbar pagination sits on the same glassy black surface */
.navbar-fixed-bottom .pagination > li > a,
.navbar-fixed-bottom .pagination > li > span {
    background-color: #131313;
}

/* ==========================================================================
   17. Responsive tuning
   ========================================================================== */

@media (max-width: 991px) {
    .page-header {
        margin-top: 20px;
    }
}

/* compact the horizontal nav on tablets before Bootstrap collapses it */
@media (min-width: 768px) and (max-width: 1100px) {
    .navbar .navbar-nav > li > a {
        font-size: 10px;
        letter-spacing: 0.04em;
        padding: 10px 8px;
        margin: 8px 1px;
    }
    .navbar .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 767px) {
    html body {
        background-attachment: scroll;
    }
    .panel {
        margin-bottom: 16px;
    }
    /* wide statistics tables should scroll inside their card instead of
       pushing the whole page sideways */
    .container > .row > .col-md-12 > .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .container > .row > .col-md-6 > .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .navbar .navbar-nav > li > a {
        font-size: 10.5px;
        letter-spacing: 0.05em;
    }
    .table > thead > tr > th {
        letter-spacing: 0.03em;
    }
    .page-header .ACimg {
        max-height: 38px;
    }
}