/* Design NAV menu, info window and laptime heads (Andres, mockup 06.11.2026, ticket 2a9f4913).
   Loaded after style.css / menu-bar.css / profile.css; only presentation, no logic. */

/* 1. symbols on TIME TABLE and ANALYSE */
.navbar-header .functions .ra-nav-icon { margin-right: 8px; font-size: 1.15em; }

/* 2. arrow to the track list (shown by main.js only when more than one track is active that day) */
#search-address .box-table-top > div:first-child { position: relative; }
.ra-track-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #404040;
    font-size: 16px; cursor: pointer; z-index: 5; }

/* 3. open arrow on the driver tile */
.ra-open-arrow.btn-arrow-white { background: none !important; display: inline-block; width: auto; height: auto;
    font-style: normal; vertical-align: middle; }
.ra-open-arrow.btn-arrow-white:before { content: "\f105"; font-family: FontAwesome; font-size: 22px; color: #fff; }

/* 4. info window: symbols and text dark grey */
.box-table-top, .box-table-top > div { background: #efefef; }
.box-table-top .col-lg-8 div { color: #404040; }
#view-mode-big .col-xs-3 > span:first-child { filter: grayscale(1) brightness(0.35); }

/* 5. "?" and settings tiles the same size */
#navbar li.config > a, #navbar li#help-li > a { width: 80px !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important; text-align: center; }

/* 6. date field 20 % shorter */
#view-mode #history-date { width: 80%; margin-left: auto; }

/* 7. "LIVE SESSION RANKING": green only with data of today (main.js sets .is-live), else light grey */
.ra-panel-head { display: flex; align-items: center; gap: 10px; background: #fff; padding: 6px 10px;
    font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; color: #262626;
    border-bottom: 1px solid #d9d9d9; }
.ra-live-dot { width: 12px; height: 12px; border-radius: 50%; background: #c8c8c8; flex: none; }
.ra-live-badge { margin-left: auto; background: #c8c8c8; color: #fff; border-radius: 10px; padding: 0 10px;
    font-size: 12px; line-height: 20px; }
.ra-panel-head.is-live .ra-live-dot, .ra-panel-head.is-live .ra-live-badge { background: #2ea44f; }

/* 8. "REFERENCE LAPS": icon, subtitle, number of laps, arrow; closed by default */
.ra-ref-head { display: flex !important; align-items: center; gap: 12px; background: #f2f2f2 !important;
    color: #262626 !important; padding: 6px 10px !important; border-left: 4px solid #e46c0a; cursor: pointer; }
.ra-ref-icon { order: 1; color: #e46c0a; font-size: 22px; }
.ra-ref-title { order: 2; flex: 1; display: flex; flex-direction: column; font-family: Rajdhani, sans-serif; font-weight: 700;
    font-size: 16px; text-transform: uppercase; line-height: 1.1; }
.ra-ref-title small { font-weight: 500; font-size: 12px; text-transform: none; color: #595959; }
.ra-ref-count { order: 3; background: #c0272d; color: #fff; border-radius: 4px; padding: 0 8px;
    font-size: 12px; line-height: 22px; }
.ra-ref-remove { order: 4; width: 16px; opacity: 0.6; }
.ra-ref-chevron { order: 5; color: #404040; transition: transform 0.2s; }
.ra-ref-head:not(.collapsed) .ra-ref-chevron { transform: rotate(180deg); }

/* 9. distance scale on the map, bottom left */
.ra-scale { margin: 0 0 18px 10px; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 2px 6px;
    font: 12px Rajdhani, sans-serif; display: flex; flex-direction: column; }
.ra-scale-bar { height: 5px; border: 2px solid #fff; border-top: none; margin-top: 2px; }

/* .div-title sets the text font on all children; the icons need FontAwesome */
.ra-ref-head .fa, .ra-panel-head .fa { font-family: FontAwesome !important; }
/* style.css sets the old glyphicon triangle for every <i> of the closed head */
#collapse-reference.ra-ref-head .ra-ref-icon::before { content: "\f0ec"; }
#collapse-reference.ra-ref-head .ra-ref-chevron::before { content: "\f078"; }
#collapse-reference.ra-ref-head i { color: inherit; }
#collapse-reference.ra-ref-head .ra-ref-icon { color: #e46c0a; }
/* room for the track arrow at the end of the track name */
#search-address #name { padding-right: 34px; text-overflow: ellipsis; }