#schoolList{}
#schoolList span{margin:0 0.2em;}
#schoolList li{display:flex;align-items:center;line-height:1.1;}
#schoolList .en{font-size:0.9em!important;}

.dropdown{position:relative;display:inline-block;margin:0.2em;width:260px;text-align:left;line-height:1.4;}
.dropdown-button,.dropdown-input{width:100%;padding:0.8em;border:2px solid #000; background-color:var(--theme-ui-colors-white, #fff);border-radius:6px;color:#333;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.dropdown-input{cursor:text;display:flex;align-items:center;}
.dropdown-input::placeholder{font-size:1em;color:#6b7280;line-height:1.6;}
.dropdown-input:focus{outline:none;border:2px solid #000;}
.dropdown-button{cursor:pointer;text-align:left;}
#schoolDropdown::after{width:8px;height:8px;right:16px;top:18px;content:'';position:absolute;transform:translateY(-50%) rotate(45deg);border-right:1px solid #6b7280; border-bottom:1px solid #6b7280;pointer-events:none; }
.dropdown ul{position:absolute;list-style:none;margin:0;padding:0;border:1px solid #ccc;background:var(--theme-ui-colors-white, #fff);display:none;max-height:250px;overflow-y:auto;z-index:1000;width:100%; box-shadow:0 4px 6px rgba(0,0,0,0.1);border-radius:4px;top:calc(100% + 4px);}
.dropdown ul li{cursor:pointer;padding:8px 12px;}
.dropdown ul li:hover{background-color:#f0f0f0;}
.dropdown.open ul{display:block;}
.clear-btn{font-size:20px;right:12px;top:10px;position:absolute;margin:auto;background:none;border:none;color:#000;cursor:pointer;padding:0;line-height:1;z-index:5;}
.clear-btn:hover{color:#333;}
.dropdown.hide-arrow::after{display:none!important;}

#chart-tooltip{padding:0.5rem 0.75rem;font-size:0.8em;min-width:140px;text-align:left;position:absolute!important;display:none;pointer-events:none;background:#2b303b;border:1px solid #4f5b66;border-radius:0.5rem;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);color:#ffffff;z-index:99999!important;}

.axis-label{font-size:1.5em;font-weight:700;color:#4b5563;}
.axis-label.font-medium{font-size:1em;}
.legend-text{font-size:0.9em;fill:#374151;}
#no-vacancy-msg{padding:0;text-align:center;font-size:1.2em;font-weight:500;}

#chart-container{width:70%;margin:auto;background:#fff;border-radius:0.6em;}
#chart{margin:1em auto;}
.year{display:block;font-size:1.4em;border-bottom:1px solid #f9f9f8;padding-bottom:0.2em;margin-bottom:0;}

.schedule{padding:0.6em;margin-bottom:4em;display:flex;gap:2em;align-items:center;border-radius:0.5em;backdrop-filter:blur(0.3em);border:3px solid rgba(194,200,240,0.5);background:rgba(0,0,0,0.2);}
.schedule li{margin-bottom:0.4em;}
.schedule .phase-group{opacity:1!important;}
.phase-details{font-size:0.9em;width:100%;display:block;text-align:center;}
.phase-head,.phase-group{display:flex;flex-grow:1;align-items:center;}
.phase-group{border-bottom:1px solid rgba(194,200,240,0.3);}
.phase-group.active{opacity:1!important;color:#ffe400;font-weight:700;}
.phase-head{font-weight:700;border-bottom:2px solid rgba(194,200,240,0.6);}
.phase-item{flex-basis:100%;padding:0.6em;line-height:1.2;}
.phase-item:first-child{font-weight:500;}

.text-center { text-align:center; }
.text-gray-500 { color:#6b7280; }

.nav {display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none;}
.nav-tabs .nav-item {margin-bottom:-1px;}
.nav-tabs .nav-item a{border:none;border:none;display:block;padding:0.5rem 1rem;text-decoration:none;color:#495057;cursor:pointer;}
.nav-tabs .nav-item a:hover{border-color:#e9ecef #e9ecef #dee2e6;}
.nav-tabs .nav-item a.active{color:#495057;background-color:#fff;}

.tab-content > .tab-pane {display:none;}
.tab-content > .tab-pane.active {display:block;}
.fade {opacity:0;transition:opacity 0.15s linear;}
.fade.show, .fade.in {opacity:1;}

@media (min-width:1024px) and (max-width:1279px){
#chart-container{width:80%;}
}

@media (min-width:200px) and (max-width:768px){
#chart-container{width:100%;}
.phase-details{font-size:0.8em;}
#schoolList li{display:block;}
.dropdown span,.dropdown span span{font-size:1em!important;}
.axis-label{font-size:1.4em;}
.schedule{display:block;}
.schedule ul{font-size:0.9em;}
}