/* ==========================================================================
   GENERIC GT2 BASE STYLES (De echte Garage-kleuren)
   ========================================================================== */
body {
    background-color: #000000; /* Volledig zwart zoals het scherm */
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 20px;
}

/* ==========================================================================
   INDEX / GARAGE PAGE SPECIFIC
   ========================================================================== */
.gt2-wrapper {
    max-width: 950px;
    margin: 40px auto;
    padding: 0 20px;
}

/* De 'HOME / GARAGE' topbalk look */
header {
    background: #000000;
    border-bottom: 4px solid #ff6d00; /* De felle oranje lijn */
    padding: 15px 0;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 2px;
    color: #ffffff;
}

.subtitle {
    background-color: #ff5500; /* Het iconische 'GARAGE' label */
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 20px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.garage-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* De selectiebalken */
.garage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0a0a0a;
    border: 2px solid #222222;
    border-radius: 6px;
    padding: 18px 25px;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.1s ease-in-out;
}

/* Hover effect: alsof je de knop selecteert met de gele cursor */
.garage-item:hover {
    background-color: #111111;
    border-color: #ffaa00; /* GT2 Geel/Oranje border */
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.4);
    transform: scale(1.005);
}

.car-name {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
}

.garage-item:hover .car-name {
    color: #ffaa00; /* Tekst licht geel op bij selectie */
}

.setup-tag {
    font-size: 13px;
    color: #888888;
    margin-top: 5px;
}

.car-specs {
    text-align: right;
    font-size: 18px;
    color: #ffffff;
}

/* Het bekende oranje specificatie-bolletje uit je screenshot */
.spec-badge {
    background-color: #ff6d00;
    color: #000000;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 14px;
    margin-left: 15px;
    display: inline-block;
}

/* ==========================================================================
   SETUP / DETAIL PAGE SPECIFIC
   ========================================================================== */
.back-link {
    display: inline-block;
    color: #ffaa00;
    text-decoration: none;
    margin-bottom: 25px;
    font-size: 14px;
    text-transform: uppercase;
    border: 2px solid #ffaa00;
    padding: 6px 16px;
    background: #000000;
    border-radius: 20px; /* Ronde knopstijl zoals de menu-opties */
    font-weight: bold;
}

.back-link:hover {
    color: #000000;
    background: #ffaa00;
}

.gt2-container {
    display: flex;
    gap: 30px;
    max-width: 1250px;
    margin: 0 auto;
}

/* Linker paneel (Auto info) */
.left-panel {
    flex: 1;
    background: #000000;
    border: 3px solid #222222;
    border-radius: 8px;
    padding: 25px;
}

.car-title {
    font-size: 32px;
    font-weight: normal;
    border-bottom: 3px solid #ff6d00; /* Oranje accentlijn */
    padding-bottom: 12px;
    margin-top: 0;
    color: #ffffff;
}

.left-panel p {
    font-size: 16px;
    margin: 15px 0;
    color: #bbbbbb;
}

.left-panel strong {
    color: #ffaa00; /* Labels zoals 'Vermogen:' worden geel/oranje */
}

/* Rechter paneel (De Tuning Blokken) */
.right-panel {
    flex: 1.6;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.setup-block {
    background: #050505;
    border: 2px solid #222222;
    border-radius: 6px;
    padding: 15px;
}

/* De subtiele donkere titels met felle letters */
.block-title {
    background: #111111;
    color: #ffaa00;
    padding: 8px 15px;
    margin: -15px -15px 15px -15px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 2px solid #ff6d00;
}

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

th, td {
    text-align: left;
    padding: 10px 12px;
    font-size: 15px;
}

th {
    color: #666666;
    text-transform: uppercase;
    font-size: 13px;
    border-bottom: 1px solid #222222;
}

tr:nth-child(even) {
    background-color: #0c0c0c;
}

/* De notities onderaan */
.notes-box {
    margin-top: 30px;
    background: #0a0500;
    border: 2px dashed #ff6d00;
    border-radius: 6px;
    padding: 15px;
    color: #ffe0cc;
    line-height: 1.6;
}

.setup-selector {
	background: #111;
	color: #ff5500;
	border: 2px solid #ff5500;
	padding: 8px;
	font-family: monospace;
	font-size: 14px;
	width: 100%;
	margin-top: 10px;
	cursor: pointer;
}
.setup-selector option {
	background: #000;
	color: #fff;
}