/* CSS Document */

/* ==========================================
   ICONBAR
========================================== */

.tm-icons{

    grid-area:icons;

    width:64px;

    background:#ffffff;

    border-right:1px solid var(--border);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    padding-top:18px;

    z-index:999;

    box-shadow:3px 0 12px rgba(0,0,0,.06);

}

.tm-icon{

    width:46px;

    height:46px;

    border:none;

    border-radius:12px;

    background:#f5f6f8;

    cursor:pointer;

    font-size:20px;

    transition:all .2s ease;

}

.tm-icon:hover{

    transform:scale(1.08);

    background:#1976d2;

    color:white;

}

.tm-icon.active{

    background:#1976d2;

    color:white;

    box-shadow:0 3px 10px rgba(25,118,210,.35);

}

/* ==========================================================
   LINKES PANEL
   ========================================================== */

.tm-left {

    position: fixed;

    /*top: var(--header-height);
	
	top: calc(var(--header-height) + 10px);
	*/
	top: 10%;

    left: var(--iconbar-width);

    bottom: var(--status-height);

	width:30vw;
/* wie weit geht die sidebar raus */
    min-width:380px;

    max-width:500px;

    background: white;

    box-shadow: 5px 0 20px rgba(0,0,0,.15);

    transition: transform .25s ease;

    z-index: 900;

    overflow-y: auto;

}

.tm-left.collapsed {

    transform: translateX(-110%);

}


/* ==========================================================
   RECHTES PANEL
   ========================================================== */

.tm-right {

    position: fixed;

    top: var(--header-height);

    right: 0;

    bottom: var(--status-height);

    width: 380px;

    background: white;

    box-shadow: -5px 0 20px rgba(0,0,0,.15);

    transition: transform .25s ease;

    z-index: 900;

    overflow-y: auto;

}

.tm-right.collapsed {

    transform: translateX(100%);

}


/* ==========================================================
   PANEL TITEL
   ========================================================== */

.tm-panel-title {

    padding: 18px;

    font-size: 20px;

    font-weight: bold;

    border-bottom: 1px solid #ddd;

}

/* ============================================
   PANEL HEADER
============================================ */

.tm-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 20px;

    border-bottom:1px solid var(--border);

    font-size:20px;

    font-weight:bold;

}

.tm-close-btn{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:transparent;

    cursor:pointer;

    font-size:22px;

    transition:.2s;

}

.tm-close-btn:hover{

    background:#ececec;

}

.material-symbols-outlined{

    font-size:24px;

    line-height:1;

    user-select:none;

}
.tm-primary{

    width:100%;

    padding:10px;

    border:none;

    border-radius:8px;

    background:#1976d2;

    color:white;

    cursor:pointer;

}

.tm-secondary{

    width:auto;

    padding:10px;

    border:none;

    border-radius:8px;

    background:#1976d2;

    color:white;

    cursor:pointer;

}


.tm-space{

    height:15px;

}

.journey-card{

    padding:14px;

    margin-bottom:10px;

    border-radius:10px;

    background:white;

    border:1px solid #ddd;

    cursor:pointer;

    transition:.2s;

}

.journey-card:hover{

    border-color:#1976d2;

    transform:translateY(-2px);

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.journey-title{

    font-weight:bold;

    margin-bottom:5px;

}

.journey-date{

    font-size:13px;

    color:#777;

}

/* ==========================================
   TABS
========================================== */

.tm-tabs{

    display:flex;

    border-bottom:1px solid var(--border);

    background:#fafafa;

}

.tm-tab{

    flex:1;

    padding:10px;

    text-align:center;

    cursor:pointer;

    font-size:14px;

    transition:.2s;

}

.tm-tab:hover{

    background:#eeeeee;

}

.tm-tab.active{

    background:white;

    border-bottom:3px solid var(--blue);

    font-weight:bold;

}

/* ==========================================
   LISTEN
========================================== */

.tm-search {

    margin-bottom: 15px;

}

.tm-search input {

    width: 100%;

    padding: 10px 12px;

    border: 1px solid var(--border);

    border-radius: 8px;

    font-size: 14px;

}

.tm-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.tm-card {

    background: white;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 12px;

    cursor: pointer;

    transition: .2s;

}

.tm-card:hover {

    border-color: var(--blue);

    transform: translateY(-2px);

    box-shadow: 0 4px 10px rgba(0,0,0,.08);

}

.tm-card-title {

    font-weight: bold;

    margin-bottom: 5px;

}

.tm-card-subtitle {

    color: #777;

    font-size: 13px;

}

.journeyCard.selected{

    border:2px solid var(--blue);

    background:#eef6ff;

}

/* ==========================================
   PANELE
========================================== */

.leftPanelContent{

    overflow-y:auto;

    height:calc(100% - 60px);

}

.leftPanel{

	height:100%;
	
	overflow:hidden;
}

#panelBody{

    height:100%;

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

.tm-panel{

    display:none;

    height:100%;

    overflow-y:auto;

}

#navigation-panel{

    display:block;

    overflow-y:auto;

    height:100%;

}

#navigation-panel .leaflet-routing-alt{

    max-height:none !important;

}