/* Ensure all dropdowns and search inputs in the filter pane use the same border color as RÜHM */
#filterPanel select,
#filterPanel input[type="search"] {
  border-color: tt-magenta !important;
}
/* Legend color box styles */
.legend-color-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 24px;
    border-radius: 4px;
    margin-right: 8px;
    border-left: 1px solid #e4067e;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    vertical-align: middle;
    background: #fff;
    box-shadow: 0 1px 3px #eee;
    font-size: 0.98em;
    color: #222;
    padding-left: 10px;
    font-weight: 500;
}
.border-tt-magenta { border-color: #e4067e !important; }
.border-tt-light-blue { border-left-color: #4dbed2 !important; }
.border-tt-grey-1 { border-left-color: #bdbdbd !important; }
/* main.css - extracted styles from index.html */

html { scroll-behavior: smooth; }
body { font-family: 'Proxima Nova', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.4; }
.proxima-nova-bold { font-weight: 700; }
.tt-dark-blue { color: #342b60; }
.bg-tt-dark-blue { background-color: #342b60; }
.hover\:bg-tt-dark-blue-hover:hover { background-color: #2a224d; }
.tt-light-blue { color: #4dbed2; }
.bg-tt-light-blue { background-color: #4dbed2; }
.tt-grey-1 { color: #9396b0; }
.border-tt-grey-1 { border-color: #9396b0; }
.border-tt-magenta { border-color: #e4067e; }
.border-tt-light-blue { border-color: #4dbed2; }
.tt-magenta { color: #e4067e; }
.bg-tt-magenta { background-color: #e4067e; }
.text-tt-magenta { color: #e4067e; }
.accent-tt-magenta { accent-color: #e4067e; }
.bg-tt-grey-2 { background-color: #f8f9fa; }
.headline { font-family: 'Proxima Nova', sans-serif; font-weight: 700; text-transform: uppercase; }
.body-text { font-family: 'Proxima Nova', sans-serif; font-weight: 400; text-transform: none; }
.session-card-online { border-left-color: #e4067e !important; }
.session-card-hybrid { border-left-color: #4dbed2 !important; }
.session-card-offline { border-left-color: #9396b0 !important; }

/*.session-card-online { border-color: #e4067e !important; }
.session-card-hybrid { border-color: #4dbed2 !important; }
.session-card-offline { border-color: #9396b0 !important; }
*/

#filterPanel { 
    transition: transform 0.3s ease-in-out; 
    background-color: rgba(249, 250, 251, 0.9);
    backdrop-filter: blur(6px);
}
.filter-drawer-open { transform: translateX(0) !important; }
.filter-pill { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; margin-right: 0.5rem; margin-bottom: 0.5rem; background-color: #e9ecef; color: #495057; border-radius: 9999px; font-size: 0.875rem; border: 1px solid #ced4da; }
.filter-pill-remove { margin-left: 0.5rem; background: none; border: none; color: #6c757d; cursor: pointer; padding: 0; line-height: 1; }
.calendar-grid-wrapper { /*overflow-x: auto;*/ overflow-y: hidden; border: 1px solid #dee2e6; border-radius: 0.25rem; background-color: #fff; }
.calendar-grid { display: grid; grid-template-columns: 60px repeat(7, minmax(140px, 1fr)); }
.grid-header-cell, .time-ruler-header { padding: 0.3rem 0.3rem; text-align:remem 0.5rem; text-align: center; font-weight: 600; color: white; background-color: #342b60; border-right: 1px solid #4a3f7a; border-bottom: 1px solid #4a3f7a; font-size: 0.875rem; line-height: 1.25; }
.time-ruler-header { border-right: 1px solid #4a3f7a; }
.grid-body-cell, .time-ruler-body { position: relative; border-right: 1px solid #e9ecef; margin-top: 16px; background-image: linear-gradient(to bottom, #f1f3f5 1px, transparent 1px); background-size: 100% 60px; }
 .time-ruler-body { background-color: #f8f9fa; margin-top: 16px; }
.time-grid-ruler-hour { position: absolute; right: 0.5rem; transform: translateY(-50%); font-size: 0.75rem; color: #6c757d; }
.session-card { position: absolute; border-left: 4px solid #e4067e; transition: all 0.2s ease-in-out; z-index: 10; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-radius: 0 2px 2px 0; padding: 0.25rem 0.5rem; overflow: hidden; display: flex; flex-direction: column; cursor: default; }
.session-card:hover { z-index: 11; transform: scale(1.02); box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.session-card-content { font-size: 0.75rem; line-height: 1.3; }
.session-card .course-name { font-weight: 600; color: #342b60; }
.session-card .session-details { color: #495057; }
#customTooltip { position: fixed; display: none; padding: 0.75rem; background-color: rgba(0, 0, 0, 0.8); color: white; border-radius: 0.375rem; font-size: 0.875rem; line-height: 1.5; z-index: 100; pointer-events: none; max-width: 300px; white-space: pre-wrap; }

.tooltip-title { font-weight: bold; margin-bottom: 0.25rem; }
.tooltip-section-title { font-weight: bold; margin-top: 0.5rem; font-size: 0.8rem; text-transform: uppercase; color: #ccc;}
.course-description { -ms-overflow-style: none; scrollbar-width: none; }
.course-description::-webkit-scrollbar { display: none; }
.searchable-dropdown { position: relative; }
.searchable-dropdown-list { position: absolute; left: 0; right: 0; background: white; border: 1px solid #d1d5db; z-index: 50; max-height: 200px; overflow-y: auto; border-radius: 0 0 0.375rem 0.375rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.searchable-dropdown-list-item { padding: 0.5rem; cursor: pointer; }
.searchable-dropdown-list-item:hover { background-color: #f3f4f6; }
#scrollTopBtn { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; background-color: #342b60; color: white; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; opacity: 0.8; transition: opacity 0.3s; z-index: 50; }
#scrollTopBtn:hover { opacity: 1; }
#courseCardLegend { display: block !important; margin-bottom: 1rem; }
.legend-box {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    height: 2rem;
    font-size: 1rem;
}