/* =========================================================
   WETVA ROUTE BROWSER
   /wetva/css/tr_routes.css
   ========================================================= */


/* =========================================================
   LAYOUT
   ========================================================= */

.routes-browser{
margin:0 auto;
padding:20px;
}

.routes-layout{
display:grid;
grid-template-columns:1fr 320px;
gap:20px;

}

.routes-list{
min-width:0;
}


/* =========================================================
   ROUTE BOX
   ========================================================= */

.flights-box{
display:flex;
flex-direction:column;
border:2px solid var(--accent);
border-radius: 10px;
box-shadow:0 0 400px rgba(255,155,0,0.3);
background:var(--bg-dark);
}

.flights-header{
background:var(--accent);
color:#000;
padding:8px 12px;
font-size:14px;
border-bottom:2px solid var(--accent);
}

.flights-content{
padding:10px;
overflow:hidden;
}


/* =========================================================
   SCROLL AREA
   ========================================================= */

.routes-scroll{
height:950px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:12px;

}

.routes-scroll::-webkit-scrollbar{
width:10px;
}

.routes-scroll::-webkit-scrollbar-track{
background:var(--bg-dark);
border-radius:8px;
}

.routes-scroll::-webkit-scrollbar-thumb{
background:var(--accent);
border-radius:8px;
border:2px solid var(--bg-dark);
}


/* =========================================================
   ROUTE CARD
   ========================================================= */

.trips-box,
[class^="trips-box_"]{
display:flex;
flex-direction:column;
border-radius:8px;
box-shadow:0 0 8px rgba(0,0,0,0.5);
border:1px solid rgba(255,184,69,0.35);
}


.trips-header,
[class^="trips-header_"]{
padding:6px 10px;
display:grid;
grid-template-columns:1.3fr 0.7fr 0.5fr 0.3fr;
background:rgba(255,184,69,0.9);
color:#000;
font-size:0.9rem;
}


.trips-content,
[class^="trips-content_"]{
padding:8px 10px;
background:rgba(0,0,0,0.55);
color:#ddd;
font-size:0.85rem;
display:flex;
align-items:center;
}


/* =========================================================
   ROUTE TEXT
   ========================================================= */

.plane{
flex:1;
color:#ddd;
}

.plane2{
font-size:40px;
color:rgba(255,135,0,1);
margin:0 8px;
}


/* =========================================================
   SELECT BUTTON
   ========================================================= */

.select-btn{
background:#129a23;
color:#fff;
border:0;
border-radius:8px;
padding:4px 10px;
font-weight:700;
font-size:0.8rem;
cursor:pointer;
justify-self:flex-end;
}

.select-btn.selected{
background:#d61c1c;
}


/* =========================================================
   FILTER SIDEBAR
   ========================================================= */

.routes-filter{
background:#9f6614;
padding:15px;
border-radius:6px;
box-shadow:0 0 8px rgba(0,0,0,0.2);

position:sticky;
top:20px;
}

.filter-box{
display:flex;
flex-direction:column;
gap:12px;
}

.filter-box h3{
margin:0 0 10px 0;
font-size:16px;
color:#333;
}

.filter-box label{
display:flex;
flex-direction:column;
gap:4px;
font-size:13px;
}

.filter-box select{
padding:4px 6px;
border-radius:4px;
border:1px solid #ccc;
}


/* =========================================================
   LOADING INDICATOR
   ========================================================= */

#routes-loading{
padding:10px;
text-align:center;
color:#aaa;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:900px){

.routes-layout{
grid-template-columns:1fr;
}

.routes-filter{
position:relative;
top:auto;
}

.routes-scroll{
height:auto;
max-height:600px;
}

}

.airport-name{
    font-size:12px;
    opacity:.65;
}

.routes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.routes-table thead {
    background: #2b2f36;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 5;
}

.routes-table th {
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #444;
}

.routes-table td {
    padding: 10px;
    border-bottom: 1px solid #2e2e2e;
	vertical-align:middle;
}

.routes-table tbody tr {
    background: #1e1e1e;
    transition: background 0.2s ease;
}

.routes-table tbody tr:nth-child(even) {
    background: #242424;
}

.routes-table tbody tr:hover {
    background: #303030;
}

.routes-table .select-btn {
    padding: 4px 10px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 12px;
}

.routes-table .select-btn.selected {
    background: #c0392b;
    color: white;
}

.routes-table .select-btn:not(.selected) {
    background: #1fa739;
    color: white;
}

.reset-btn {
    width: 100%;
    margin-top: 15px;
    padding: 10px;
    background-color: rgba(255,184,69,0.9);
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.reset-btn:hover {
    background-color: #f44336; /* Rot für Reset */
}