/* =============================================================================
   okrg.css — OsKart Racing Group
   Rewritten from LESS compiler output.
   Sections:
     1.  CSS Custom Properties (variables)
     2.  Base / Reset
     3.  Typography
     4.  Links
     5.  Tables
     6.  Forms & Fieldsets
     7.  Lists
     8.  Bootstrap Overrides
     9.  Buttons
     10. Navbar
     11. Carousel
     12. Panels & Accordions
     13. Layout — Header
     14. Layout — Menu
     15. Layout — Footer
     16. Layout — Content
     17. Image Containers & Overlays
     18. Kart Animation
     19. Stats Chart
     20. Kart Results Tables (AJAX)
     21. Admin Area
     22. Utility Classes
     23. Driver Kart Heatmap
     24. Driver Navigation Pills
     25. Karts & Driver Secondary Tab Buttons
     26. Karts Event Filter Dropdown
   ============================================================================= */


/* =============================================================================
   1. CSS Custom Properties
   ============================================================================= */

:root {
    /* Colours */
    --color-red:          #ff0202;
    --color-dark:         #080808;
    --color-dark-mid:     #202020;
    --color-mid:          #555555;
    --color-border:       #d2c8be;
    --color-beige-light:  #f1eeeb;
    --color-beige-mid:    #bdafa0;
    --color-beige-dark:   #b3a291;
    --color-text:         #101010;
    --color-text-light:   #f0f0f0;
    --color-white:        #ffffff;
    --color-link-hover:   #222222;
    --color-stripe:       #fcfbfa;

    /* Gradients — reused across header, footer, navbar, buttons */
    --gradient-light: linear-gradient(to bottom, var(--color-beige-light), var(--color-beige-mid));
    --gradient-dark:  linear-gradient(to bottom, var(--color-mid),         var(--color-dark));

    /* Borders */
    --border-radius-sm:   7.5px;
    --border-radius-md:   15px;
    --border-radius-lg:   15px;
    --box-shadow:         3px 3px 3px rgba(43, 43, 43, 0.7);

    /* Typography */
    --font-base:   Arial, Helvetica, sans-serif;
    --font-size:   16px;
}


/* =============================================================================
   2. Base / Reset
   ============================================================================= */

body {
    color:       var(--color-text);
    font-family: var(--font-base);
    font-size:   var(--font-size);
}

img {
    max-width: 100%;
}

hr {
    margin:  1.5rem 0;
    color:   var(--color-red);
    height:  2px;
    border:  2px dashed var(--color-red);
}


/* =============================================================================
   3. Typography
   ============================================================================= */

p {
    color:  var(--color-text);
    margin: 10px 0 5px 0;
}

em {
    font-weight: bold;
}

h1 {
    font-size:     25px;
    border-bottom: 1px solid var(--color-border);
    padding:       2px 0;
    margin-top:    10px;
    color:         var(--color-red);
}

h2 {
    font-size:   40px;
    line-height: 32px;
    color:       var(--color-dark-mid);
    margin-top:  10px;
}

h3 {
    font-size:   18px;
    line-height: 16px;
    font-style:  italic;
    margin:      10px 0 1px 0;
}

h4 {
    font-size:   16px;
    line-height: 24px;
    color:       var(--color-red);
}

h5 {
    font-size:     16px;
    color:         var(--color-red);
    margin-bottom: 0.1rem;
    border-bottom: 1px solid var(--color-red);
}


/* =============================================================================
   4. Links
   ============================================================================= */

a {
    color: var(--color-red);
}

a:hover {
    color: var(--color-link-hover);
}


/* =============================================================================
   5. Tables
   ============================================================================= */

td,
th {
    font-size:      0.7rem;
    line-height:    0.7rem;
    padding:        2px 3px;
    vertical-align: top;
    color:          var(--color-dark-mid);
}

th {
    background-color: var(--color-beige-light);
    text-align:       left;
    padding:          2px;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--color-beige-light);
    color:            var(--color-dark-mid);
}

.tableLine1  { background-color: var(--color-beige-light); }
.tableLine-1 { background-color: var(--color-stripe); }
.tableBorder { border: 1px solid var(--color-border); }


/* =============================================================================
   6. Forms & Fieldsets
   ============================================================================= */

fieldset {
    margin:        10px;
    padding:       10px;
    z-index:       1000;
    color:         var(--color-text);
    background:    var(--gradient-light);
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}

legend {
    min-width:        100px;
    max-width:        50%;
    padding:          4px 6px;
    font-size:        18px;
    line-height:      24px;
    background:       var(--gradient-light);
    border-radius:    var(--border-radius-sm);
}

ol {
    margin-bottom: 8px;
}


/* =============================================================================
   7. Lists
   ============================================================================= */

ul {
    list-style-type: none;
    padding:         0;
}

.horizontal-flex-list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-wrap:  wrap;
}

.horizontal-flex-list li {
    margin:  0 5px;
    padding: 2px;
}


/* =============================================================================
   8. Bootstrap Overrides
   ============================================================================= */

.row {
    margin: 0;
}

[class*="col-md"] {
    padding: 1px;
}

.container {
    margin:  0 auto;
    padding: 0 0 2px 0;
}

.alert-info {
    background-color: transparent;
}

.nav-link {
    color: var(--color-dark-mid);
}


/* =============================================================================
   9. Buttons
   ============================================================================= */

.btn {
    min-width:     85px;
    color:         var(--color-dark-mid);
    background:    var(--gradient-light);
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow:    var(--box-shadow);
    margin:        0 3px;
}

.btn-primary:hover,
.btn:hover {
    color:         var(--color-text);
    background:    var(--color-link-hover);
    border:        1px solid var(--color-mid);
    border-radius: var(--border-radius-md);
    box-shadow:    var(--box-shadow);
}

.btn-group {
    white-space: normal;
}


/* =============================================================================
   10. Navbar
   ============================================================================= */

.navbar {
    font-size:     110%;
    padding:       2px;
    border-width:  0;
    background:    var(--gradient-dark);
    border-radius: var(--border-radius-sm);
    box-shadow:    var(--box-shadow);
}

.navbar .nav-link,
.navbar .nav-item {
    color:         var(--color-text-light);
    cursor:        default;
    text-align:    center;
    background:    var(--gradient-dark);
    border-radius: var(--border-radius-sm);
    padding:       1px;
    display:       inline;
}

.navbar .nav-link.active,
.navbar .nav-item .nav-link.active {
    color: var(--color-red);
}

.navbar li {
    padding:      0;
    border-width: 0;
    margin:       0 5px;
    width:        20%;
}

.navbar-nav {
    border-width: 0;
    padding:      1px;
}

.navbar-nav .btn {
    cursor: default;
    color:  var(--color-text-light);
    margin: 0 3px;
}

.navbar-nav .btn .nav-link {
    text-align: center;
    padding:    0.5rem 1rem;
    border:     none;
    width:      100%;
}

.navbar-nav .btn .nav-link:hover {
    color:            rgba(255, 255, 255, 0.75);
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-nav .btn .nav-link.active {
    color: var(--color-red);
}


/* =============================================================================
   11. Carousel
   ============================================================================= */

.carousel {
    max-width:     256px;
    margin-bottom: 0;
}

.carousel img {
    border-radius: var(--border-radius-md);
    height:        110px;
}

.carousel .carousel-inner > .item > img,
.carousel .carousel-inner > .item > a > img {
    width:  100%;
    height: 110px;
}

.carousel-control {
    font-size:     60px;
    border:        2px solid var(--color-border);
    color:         var(--color-border);
    border-radius: var(--border-radius-md);
    top:           40px;
    bottom:        35px;
    line-height:   25px;
    margin:        4px;
    width:         12%;
}

.carousel-caption {
    padding:          2px;
    margin-bottom:    55px;
    background-color: var(--color-dark-mid);
    opacity:          0.7;
    border-radius:    8px;
    border:           1px solid var(--color-beige-dark);
    left:             8%;
    right:            8%;
    color:            var(--color-beige-mid);
}

.carousel-indicators {
    margin-right: 10px;
}

.carousel-indicators li {
    border:  1px solid var(--color-dark-mid);
    width:   19px;
    margin:  0 2px;
}

.carousel-indicators .active {
    background-color: var(--color-border);
    border:           1px solid var(--color-dark-mid);
    width:            19px;
    height:           11px;
    margin:           0 2px;
}

#myCarousel {
    bottom: -5px;
}

#myCarousel .carousel-indicators {
    bottom: -22px;
}

.photoCarousel {
    min-height: 400px;
}

.photoCarousel img {
    height: 400px;
    width:  708px;
}

.photoCarousel .carousel-control {
    top:         100px;
    bottom:      100px;
    line-height: 300%;
    width:       7%;
    opacity:     0.9;
}

.photoCarousel .carousel-indicators {
    bottom: -20px;
}

.photoCarousel .carousel-caption {
    bottom:    40px;
    font-size: 110%;
}

.photoCarousel .carousel-inner > .item > img,
.photoCarousel .carousel-inner > .item > a > img {
    height: 400px;
}


/* =============================================================================
   12. Panels & Accordions
   ============================================================================= */

.panel {
    border: 1px solid var(--color-beige-light);
}

.panel-heading {
    padding:       0;
    background:    var(--gradient-light);
    border-radius: var(--border-radius-md);
}

.panel-title {
    padding:   10px;
    font-size: 120%;
}

.panel-body {
    padding:          4px;
    background-color: var(--color-white);
}

.panel-body .row {
    margin: 0;
}

.panel-group .panel-heading + .panel-collapse .panel-body {
    border: 1px solid var(--color-border);
}

.accordion .accordion-item {
    border: none;
}

.accordion .accordion-button {
    padding:          5px 10px;
    background-color: var(--color-beige-light);
    border-radius:    var(--border-radius-md);
    color:            var(--color-dark-mid);
}

.accordion .accordion-body {
    padding: 0.1rem;
}

.accordion button {
    line-height: 1.1rem;
}


/* =============================================================================
   13. Layout — Header
   ============================================================================= */

#header {
    background:    var(--gradient-light);
    margin-top:    6px;
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow:    var(--box-shadow);
}

#header .list-group-item {
    background-color: transparent;
    border:           none;
}

#header .header-content-area {
    min-height:      100px;
    display:         grid;
    text-align:      center;
    align-items:     center;
    justify-content: center;
    margin-bottom:   5px;
    padding:         0;
}


/* =============================================================================
   14. Layout — Menu
   ============================================================================= */

.menu {
    background:    var(--color-dark);
    margin:        0 auto 1px auto;
    padding:       2px 0 0 0;
    position:      relative;
    top:           -20px;
    border-width:  0;
    border-radius: var(--border-radius-md);
    box-shadow:    var(--box-shadow);
}


/* =============================================================================
   15. Layout — Footer
   ============================================================================= */

#footer {
    background:    var(--gradient-dark);
    padding:       8px 30px 5px 30px;
    margin:        0 0 0 0;
    text-align:    center;
    min-height:    50px;
    color:         var(--color-text-light);
    border-radius: var(--border-radius-md);
    box-shadow:    var(--box-shadow);
}


/* =============================================================================
   16. Layout — Content
   ============================================================================= */

.contentArea {
    border:           1px solid var(--color-dark-mid);
    background-color: var(--color-white);
    border-radius:    var(--border-radius-md);
}

#contentBody {
    margin-bottom: 10px;
}

#contactArea {
    padding: 0 0 12px 0;
}

#splash {
    margin-right: 1px;
    width:        49.5%;
}

#privacyModal {
    display: none;
}

#privacyModal .modal-content {
    background-color: var(--color-white);
}

.spacer {
    background:    var(--gradient-light);
    margin-bottom: 10px;
}

.scrollArea {
    overflow-x: auto;
    white-space: nowrap;
    border:      1px solid var(--color-beige-light);
    padding:     5px;
}

.scrollArea table {
    width:           100%;
    border-collapse: collapse;
}


/* =============================================================================
   17. Image Containers & Overlays
   ============================================================================= */

.imageContainer {
    position:   relative;
    display:    inline-block;
    width:      100%;
    max-width:  130px;
    overflow:   hidden;
}

.imageContainer img {
    display: block;
    width:   100%;
    height:  auto;
    padding: 0 2px;
}

/* Shared overlay text base */
.avatar,
.bannerImageOverlayText,
.rosetteImageOverlayText {
    position:    absolute;
    top:         36%;
    left:        50%;
    transform:   translate(-50%, -50%);
    color:       var(--color-white);
    text-align:  center;
    padding:     1px;
    width:       80%;
    box-sizing:  border-box;
    font-family: Arial, sans-serif;
    font-size:   4em;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.8);
    z-index:     2;
}

.avatar {
    width:     100%;
    font-size: 2.2em;
    top:       73%;
}

.bannerImageOverlayText {
    width:       70%;
    box-sizing:  border-box;
    font-size:   0.75em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

.imageContainer::before {
    z-index: 1;
}

.imageOverlayText {
    z-index: 2;
}

/* Floating table containers (used for multiple sessions per event) */
.container-wrapper {
    overflow: hidden;
}

.table-container {
    float:            left;
    margin-right:     2%;
    padding:          7px 3px;
    box-sizing:       border-box;
    background-color: var(--color-beige-light);
    border:           1px solid var(--color-border);
    border-radius:    var(--border-radius-md);
}

.table-container:last-child {
    margin-right: 0;
}

.table-container ul {
    list-style: none;
    padding:    0;
    margin:     1px;
}

.table-container li {
    padding: 1px 3px;
    display: inline-block;
}


/* =============================================================================
   18. Kart Animation
   ============================================================================= */

@keyframes driveAcross {
    0%   { left: 100%; }
    100% { left: -60px; }
}


/* =============================================================================
   19. Stats Chart (Driver Performance Delta)
   ============================================================================= */

/* Chart container must be relative for absolute children */
.stats-chart-container {
    position:    relative;
    padding-top: 30px;
}

/* Vertical zero baseline */
.stats-zero-baseline {
    position:         absolute;
    top:              30px;
    bottom:           0;
    width:            1px;
    background-color: #6c757d;
    z-index:          50;
}

/* Axis labels */
.stats-axis-labels {
    top: -10px;
}

/* Bar label alignment */
.stats-bar-label-left {
    text-align:   right;
    padding-right: 5px;
}

.stats-bar-label-right {
    text-align:  left;
    padding-left: 5px;
}


/* =============================================================================
   20. Kart Results Tables (AJAX)
   ============================================================================= */

#kartsAndAverageTableContainer,
#kartsAndFastestTimesTableContainer {
    width:      100%;
    margin:     5px 0;
    overflow-x: auto;
}

#kartsAndAverageTableContainer table,
#kartsAndFastestTimesTableContainer table {
    width:           100% !important;
    table-layout:    fixed !important;
    border-collapse: collapse;
    background-color: var(--color-white);
    border:          1px solid var(--color-border);
}

#kartsAndAverageTableContainer table th,
#kartsAndFastestTimesTableContainer table th {
    background-color: var(--color-beige-light) !important;
    color:            var(--color-dark-mid) !important;
    padding:          4px 1px !important;
    text-align:       left;
    font-weight:      bold;
    border-bottom:    2px solid var(--color-border);
    font-size:        0.75em;
}

#kartsAndAverageTableContainer table td,
#kartsAndFastestTimesTableContainer table td {
    background-color: transparent !important;
    padding:          3px 0 !important;
    border-bottom:    1px solid var(--color-beige-light);
    color:            #333;
    font-size:        0.75em;
    overflow:         hidden;
    white-space:      nowrap;
    text-overflow:    ellipsis;
}

#kartsAndAverageTableContainer table tr:nth-child(even) td,
#kartsAndFastestTimesTableContainer table tr:nth-child(even) td {
    background-color: var(--color-stripe) !important;
}

#kartsAndAverageTableContainer table tr:hover td,
#kartsAndFastestTimesTableContainer table tr:hover td {
    background-color: #f8f6f4 !important;
}


/* =============================================================================
   21. Admin Area
   ============================================================================= */

#admin {
    padding: 10px;
}

#adminHeader {
    background:    var(--gradient-light);
    margin:        0;
    min-height:    50px;
    border-bottom: 1px solid var(--color-dark-mid);
}

#adminCtrls {
    position: absolute;
    right:    10px;
}

.adminMenu {
    margin-bottom: 10px;
}

.adminMenu button {
    margin-right: 0;
}


/* =============================================================================
   22. Utility Classes
   ============================================================================= */

.center {
    text-align: center;
}

.price {
    padding-right: 25px;
}


/* =============================================================================
   23. Driver / Kart Affinity Heatmap
   ============================================================================= */

.heatmap-table {
    border-collapse: collapse;
    font-size:       0.75rem;
    min-width:       600px;
    width:           100%;
}

.heatmap-corner,
.heatmap-kart-header {
    background-color: var(--color-beige-light);
    border:           1px solid var(--color-border);
    padding:          4px 6px;
    text-align:       center;
    font-weight:      bold;
    white-space:      nowrap;
    position:         sticky;
    top:              0;
    z-index:          10;
}

.heatmap-corner {
    left:    0;
    z-index: 20;
}

.heatmap-driver-label {
    background-color: var(--color-beige-light);
    border:           1px solid var(--color-border);
    padding:          4px 8px;
    font-weight:      bold;
    white-space:      nowrap;
    position:         sticky;
    left:             0;
    z-index:          5;
}

.heatmap-cell {
    border:     1px solid var(--color-border);
    padding:    4px 6px;
    text-align: center;
    white-space: nowrap;
    font-size:  0.7rem;
    min-width:  60px;
}

.heatmap-empty {
    background-color: #e9e9e9;
    color:            #999;
    text-align:       center;
}

.heatmap-uses {
    display:    block;
    font-size:  0.6rem;
    color:      rgba(0, 0, 0, 0.5);
    margin-top: 1px;
}

/* =============================================================================
   24. Driver Navigation Pills
   ============================================================================= */

#v-pills-tab .nav-link {
    display:          block;
    width:            100%;
    padding:          3px 6px;
    margin-bottom:    2px;
    font-size:        0.7rem;
    font-weight:      bold;
    text-align:       center;
    background:       var(--gradient-light);
    border:           1px solid var(--color-border);
    border-radius:    4px;
    color:            var(--color-dark-mid);
    cursor:           pointer;
    transition:       background 0.2s, color 0.2s;
    min-width:        40px;
}

#v-pills-tab .nav-link:hover {
    background:   var(--gradient-dark);
    border-color: var(--color-dark);
    color:        var(--color-text-light);
}

#v-pills-tab .nav-link.active {
    background:   var(--gradient-dark);
    color:        var(--color-red);
    border-color: var(--color-dark);
    font-weight:  bold;
}


/* =============================================================================
   25. Karts & Driver Secondary Tab Buttons
   ============================================================================= */

#averageTab .nav-link,
#fastestTab .nav-link,
#driverSecondaryTabs .nav-link {
    color:            var(--color-dark-mid);
    background:       var(--gradient-light);
    border:           1px solid var(--color-border);
    border-radius:    4px 4px 0 0;
    margin-right:     2px;
    font-size:        0.85rem;
    padding:          4px 12px;
}

#averageTab .nav-link.active,
#fastestTab .nav-link.active,
#driverSecondaryTabs .nav-link.active {
    color:            var(--color-red);
    background:       var(--color-white);
    border-bottom:    1px solid var(--color-white);
    font-weight:      bold;
}

#averageTab .nav-link:hover,
#fastestTab .nav-link:hover,
#driverSecondaryTabs .nav-link:hover {
    background:   var(--gradient-dark);
    color:        var(--color-text-light);
    border-color: var(--color-dark);
}

/* =============================================================================
   26. Karts Event Filter Dropdown
   ============================================================================= */

#kartsEventTrigger {
    display:          block;
    width:            100%;
    padding:          4px 6px;
    margin-top:       4px;
    font-size:        0.8rem;
    color:            var(--color-dark-mid);
    background:       var(--gradient-light);
    border:           1px solid var(--color-border);
    border-radius:    4px;
    cursor:           pointer;
}

#kartsEventTrigger:hover,
#kartsEventTrigger:focus {
    background:   var(--gradient-dark);
    color:        var(--color-text-light);
    border-color: var(--color-dark);
    outline:      none;
}

#kartsEventTrigger option {
    background-color: var(--color-white);
    color:            var(--color-dark-mid);
}