/*
 * f1db_main.css
 * vim: ts=2 ai
 * $Id: f1db_main.css,v 1.3 2025/06/17 23:26:50 rick Exp rick $
 */
html, body {
  background-color: #121212 !important;
  color: #f0f0f0;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  padding-top: 56px;
  padding-bottom: 80px;
}

body {
  transition: background-color 0.3s, color 0.3s;
}

td {
  transition: color 0.3s;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
	/* background-color: red !important; */
}

.content-area {
  flex: 1 0 auto;
}

footer.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #212529;
	/* background-color: red !important; */
  color: white;
  text-align: center;
  line-height: 60px;
  z-index: 1020;
}

/*
.flag-icon {
  height: 18px;
  object-fit: cover;
  margin-right: 0.5rem;
  cursor: pointer;
  border: 2px solid transparent;   /* Reserve space for border */
/*
  border-radius: 3px;              /* Optional: slight rounding */
/*
  box-sizing: border-box;          /* So border doesn't affect size */
/*
  transition: border-color 0.13s;
}

.flag-icon:hover,
.flag-icon:active,
.flag-icon:focus {
  border-color: #FF4529;           /* Red border on hover/focus */
/*
}

*/
.flag-icon {
  height: 18px;
  object-fit: cover;
  margin-right: 0.5rem;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 3px;
  box-sizing: border-box;
  transition: border-color 0.13s, background 0.13s;
}

.flag-icon:hover,
.flag-icon:focus,
.flag-icon.selected {
  border-color: #FF4529;
}

.flag-icon.selected {
  border: 2px solid #FF4529;
  background: rgba(255,69,41,0.08);
}

.border-light-muted {
  border: 1px solid rgba(0,0,0,.125) !important;
}

.theme-toggle {
  position: fixed;
  bottom: 70px;
  right: 15px;
  z-index: 1050;
}

.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

.dark-mode .card {
  background-color: #1e1e1e !Important;
  color: #e0e0e0;
}

.driver-card {
  background-color: #F0F0F1;
  color: #666;
}

.dark-mode .driver-card {
  background-color: #222 !Important;
  color: #ccc;
}

.dark-mode .btn-outline-primary {
  color: #90caf9;
  border-color: #90caf9;
}

.dark-mode .btn-outline-primary:hover {
  background-color: #90caf9;
  color: #000;
}

.dark-mode .footer {
  background-color: #000;
}
.btn-initial {
  /*
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  */
	font-size: .7em;
  border: 1px solid rgba(113, 116, 129, 0.2);
  background-color: rgba(113, 116, 129, 0.05);
  color: #666;
}

.dark-mode .btn-initial {
  background-color: #222;
  color: #999;
}

.btn-initial:hover {
  /*
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  */
  background-color: rgba(100, 97, 110, 0.5);
  color: #fff;
}

.btn-initial.active {
  background-color: #0d6efd;
  color: #fff;
}
.text-muted {
  color: #999 !important;
}
.nav-link.active {
  font-weight: bold;
  color: #ffc107 !important; /* amber/gold */
}
:root {
  --grid-line-color: #888;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grid-line-color: #666;
  }
}
.theme-section {
  background-color: var(--section-bg);
  color: var(--section-text);
  padding: 1rem;
  border-radius: 0.5rem;
}
.text-body {
  color: #212529 !important; /* Bootstrap default for light mode */
}

.dark-mode .text-body {
  color: #ccc !important; /* Softer light text for dark mode */
}

.text-muted {
  color: #6c757d !important; /* Bootstrap default */
}

.dark-mode .text-muted {
  color: #999 !important; /* Override for dark mode */
}

/*
 * Qualifying times
 */
.text-purple { color: purple !important; }
.text-yellow { color: goldenrod !important; }
.text-success { color: green !important; }

:root {
  --qual-purple: purple;
  --qual-green: green;
  --qual-yellow: goldenrod;
}

body.dark-mode {
  --qual-purple: #A000DB;   /* lighter purple for dark theme */
  --qual-yellow: #FECE2A;   /* softer yellow for dark theme */
  --qual-green: #009247;    /* brighter green if needed */
}

body:not(.dark-mode) {
  --qual-purple: #800080;   /* darker purple for light theme */
  --qual-yellow: #cc9900;   /* more visible yellow for light theme */
  --qual-green: #008000;    /* traditional dark green */
}

.tiny-text {
  font-size: 0.7rem;
}

.years-grid {
	/*
  font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  font-family: 'Courier New', Courier, monospace;
  font-variant-numeric: tabular-nums;
	font-size: 14px;
	*/
  font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
  font-variant-numeric: tabular-nums;
	font-size: 0.75rem;
  letter-spacing: 1px; /* Optional: space out numbers for clarity */
}

/* At the END of your f1db_main.css: */
body:not(.dark-mode), html:not(.dark-mode) {
  #background-color: #fafafa !important;  /* or #bfc2c9, #c9ccd3, etc */
  background-color: #f7f7f7 !important;  /* or #bfc2c9, #c9ccd3, etc */
  color: #212529 !important;
}

/* === F1DB THEME & BACKGROUND FIXES (DO NOT REMOVE) === */

/* Always fill viewport and apply background color for both themes */
html, body {
  min-height: 100vh !important;
  height: auto !important;
  background-color: #f7f7f7 !important; /* Light mode default */
  color: #212529 !important;
  transition: background-color 0.3s;
}

/* Dark mode override for body/html */
body.dark-mode, html.dark-mode {
  background-color: #181c20 !important;
  color: #e0e0e0 !important;
}

/* Ensure main container doesn't override background */
.container, .content-area, .years-grid, main.content-area {
  background: transparent !important;
}

/* Footer always matches theme, not fixed by default for mobile friendliness */
footer.footer {
  background-color: #212529 !important;
  color: white !important;
}
body.dark-mode footer.footer {
  background-color: #000 !important;
  color: #e0e0e0 !important;
}

/* Prevent Bootstrap .table, .table-striped, etc. from leaking white */
.table, .table-striped, .table-sm {
  background-color: transparent !important;
}

/* Optional: Remove margin bottom from body to avoid visual gap with fixed footer */
body {
  margin-bottom: 0 !important;
}

/* Optional: Make sure your navbar always fits the theme */
.navbar.bg-dark {
  background-color: #212529 !important;
}
body.dark-mode .navbar.bg-dark {
  background-color: #181c20 !important;
}

/* Optional: If you want to make the fixed footer always visible:
   (Uncomment if you want footer fixed. Otherwise, leave as is.)
footer.footer {
  position: fixed !important;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
}
*/

/* === END F1DB THEME & BACKGROUND FIXES === */

.stats-section {
  background: rgba(30,40,50,0.8);
  border-radius: 1.2rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #23272b;
}
body:not(.dark-mode) .stats-section {
  background: #fff;
  border: 1px solid #dee2e6;
}

.stats-section h6, .stats-section h5 {
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.stats-section table {
  margin-bottom: 0;
}
.stats-section thead th {
  background: rgba(44,62,80,0.3);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #444;
}
body:not(.dark-mode) .stats-section thead th {
  background: #f8f9fa;
  border-bottom: 2px solid #bbb;
}
.stats-section tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.04);
}
body:not(.dark-mode) .stats-section tbody tr:nth-child(even) {
  background: #f5f6fa;
}
.stats-section td, .stats-section th {
  vertical-align: middle;
  padding: 0.45rem 0.6rem;
}
.stats-section td:last-child, .stats-section th:last-child {
  text-align: right;
}
.stats-section .era-header {
  margin-top: 2.5rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--qual-yellow, #FFCA28);
}
.stats-section .text-muted {
  color: #adb5bd !important;
}

@media (max-width: 700px) {
  .stats-section {
    padding: 1rem 0.2rem;
    max-width: 98vw;
  }
  .stats-section table {
    font-size: 0.92em;
  }
}

/* Force dropdown to use the correct colors in dark mode */
body.dark-mode .dropdown-menu {
  background-color: #222 !important;
  color: #e0e0e0 !important;
  border-color: #333 !important;
}
body.dark-mode .dropdown-menu .dropdown-item {
  color: #e0e0e0 !important;
}
body.dark-mode .dropdown-menu .dropdown-item:hover,
body.dark-mode .dropdown-menu .dropdown-item:focus {
  background-color: #444 !important;
  color: #fff !important;
}

body:not(.dark-mode) .dropdown-menu {
  background-color: #fff !important;
  color: #222 !important;
}
body:not(.dark-mode) .dropdown-menu .dropdown-item:hover,
body:not(.dark-mode) .dropdown-menu .dropdown-item:focus {
  background-color: #f2f2f2 !important;
  color: #000 !important;
}

.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover.active {
	color: #cc9900 !Important;
	background-color: #373B3E !important;
  font-weight: bold !important;
}

.dropdown-menu .dropdown-item.active {
	color: #FFCA28 !Important;
	background-color: #373B3E !important;
  font-weight: bold !important;
}

.f1db-logo {
  font-size: 1.4em;
  font-weight: 1000;
  font-style: italic;
  letter-spacing: -2px;
  display: flex;
  align-items: flex-end;
  margin-left: 0.6em;
  align-items: flex-end;
  line-height: 1.4em;
}
.f1db-logo-db {
  font-size: 0.8em;
  font-weight: 300;
}
.f1db-logo-f1 { color: #FF4529; }
.f1db-logo-db { color: #fff;
  display: flex;
  margin-left: -6px;
  /* letter-spacing: -2px; */
  display: flex;
	/* color: #0E6EFC; */
	color: #FFC128;
  align-items: flex-end;
  font-style: normal;
  line-height: 1.55em;
}

.driver-link,
.constructor-link {
    color: inherit;              /* Use the normal text color */
    text-decoration: none;       /* Remove underline */
    font-weight: 500;
    transition: color 0.2s;
}

.driver-link:hover,
.constructor-link:hover {
    color: #FF4529;              /* Highlight on hover (your accent color) */
    text-decoration: underline;  /* Optionally, underline on hover */
}