.container{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;color:white;margin-bottom:30px}.header h1{font-size:2.5em;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,0.3)}.header p{font-size:1.1em;opacity:0.9}.stats-toggle{margin-bottom:1rem;text-align:center}.stats-toggle #stats-toggle-btn{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white;border:none;padding:0.75rem 1.5rem;border-radius:25px;font-size:0.9rem;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(102,126,234,0.3)}.stats-toggle #stats-toggle-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,0.4)}.stats-toggle #stats-toggle-btn.active{background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);box-shadow:0 4px 15px rgba(245,87,108,0.3)}.stats-toggle #stats-toggle-btn i{margin-right:0.5rem}.stats-container{display:none;grid-template-columns:repeat(3, 1fr);gap:15px;margin-bottom:30px}.stat-card{background:white;padding:20px;border-radius:15px;box-shadow:0 8px 25px rgba(0,0,0,0.1);text-align:center;transition:transform 0.3s ease}.stat-card:hover{transform:translateY(-5px)}.stat-card i{font-size:2.5em;margin-bottom:10px}.stat-card .number{font-size:2em;font-weight:bold;margin-bottom:5px}.stat-card .label{color:#666;font-size:0.9em}.stat-card.routes{color:#dc2626}.stat-card.stops{color:#2563eb}.stat-card.active{color:#16a34a}.stat-card.updates{color:#ca8a04}.main-content{background:white;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,0.1);overflow:hidden}.tab-container{display:flex;background:#f8f9fa;border-bottom:1px solid #e9ecef}.tab{flex:1;padding:20px;text-align:center;cursor:pointer;transition:all 0.3s ease;border-bottom:3px solid transparent;font-weight:500}.tab:hover{background:#e9ecef}.tab.active{background:white;border-bottom-color:#dc2626;color:#dc2626}.tab-content{display:none;padding:30px}.tab-content.active{display:block}.search-container{margin-bottom:30px}.search-box{position:relative;max-width:500px;margin:0 auto}.search-box input{width:100%;padding:15px 50px 15px 20px;border:2px solid #e9ecef;border-radius:25px;font-size:16px;transition:border-color 0.3s ease}.search-box input:focus{outline:none;border-color:#dc2626}.search-box i{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#666}.route-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:20px;margin-bottom:30px}.route-grid:has(.loading:only-child){display:flex;justify-content:center;align-items:center}.route-grid .loading:only-child{grid-column:1 / -1;text-align:center}.route-card{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:20px;cursor:pointer;transition:all 0.3s ease}.route-card:hover{border-color:#dc2626;transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,0.1)}.route-card.selected{border-color:#dc2626;background:#fef2f2}.route-number{font-size:1.5em;font-weight:bold;color:#dc2626;margin-bottom:10px}.route-info{color:#666;font-size:0.9em}.route-path{margin-top:10px;font-weight:500}.route-details{margin-top:30px;padding:20px;background:#f8f9fa;border-radius:12px;display:none}.route-details.show{display:block}.direction-selector{margin-bottom:20px}.direction-btn{padding:10px 20px;border:2px solid #dc2626;background:white;color:#dc2626;border-radius:25px;cursor:pointer;margin-right:10px;transition:all 0.3s ease}.direction-btn.active{background:#dc2626;color:white}.stops-list{max-height:400px;overflow-y:auto}.stop-item{justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid #e9ecef;transition:background 0.3s ease}.stop-item:hover{background:#f8f9fa}.stop-info{flex:1}.stop-name{font-weight:500;margin-bottom:5px}.stop-id{color:#666;font-size:0.85em}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.stats-toggle-container{text-align:center;margin-bottom:20px}.stats-toggle-btn{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white;border:none;padding:12px 24px;border-radius:25px;font-size:1em;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(102,126,234,0.3)}.stats-toggle-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,0.4)}.stats-toggle-btn.active{background:linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)}.error-message{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:15px;border-radius:8px;margin:20px 0;text-align:center}.pagination-container{display:flex;justify-content:center;align-items:center;gap:2rem;margin-top:1.5rem;padding:1rem;background:white;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.pagination-container .pagination-btn{background:#dc2626;color:white;border:none;padding:0.75rem 1.5rem;border-radius:25px;cursor:pointer;transition:all 0.3s ease;font-weight:500;box-shadow:0 2px 8px rgba(220,38,38,0.3)}.pagination-container .pagination-btn:hover:not(:disabled){background:#b91c1c;transform:translateY(-2px);box-shadow:0 4px 12px rgba(220,38,38,0.4)}.pagination-container .pagination-btn:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.pagination-container .pagination-info{display:none}.loading{text-align:center;padding:40px;color:#dc2626}.loading i{font-size:2em;animation:spin 1s linear infinite;margin-bottom:10px}.loading::after{content:'';display:inline-block;width:20px;height:20px;margin-left:10px;border:2px solid #f3f3f3;border-top:2px solid #007bff;border-radius:50%;animation:spin 1s linear infinite}.error,.no-data{text-align:center;padding:2rem;color:#666;font-style:italic}.error{color:#e74c3c;background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:0.375rem;margin:1rem 0}.no-data{background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:0.375rem;margin:1rem 0}.eta-info{text-align:right;min-width:120px}.eta-time{font-weight:bold;color:#16a34a;font-size:1.1em}.eta-time.soon{color:#dc2626;animation:pulse 2s infinite}.eta-status{font-size:0.8em;color:#666;margin-top:2px}.no-data{background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:0.375rem;margin:1rem 0}.stop-card{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:15px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:15px;margin-bottom:10px}.stop-card:hover{border-color:#dc2626;transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,0.1)}.stop-card.selected{border-color:#dc2626;background:#fef2f2;box-shadow:0 4px 12px rgba(220,38,38,0.3)}.stop-card .stop-icon{font-size:2em;flex-shrink:0;opacity:0.8}.stop-card .stop-content{flex:1;min-width:0}.stop-card .stop-name{font-weight:600;color:#333;margin-bottom:5px;font-size:1.1em}.stop-card .stop-info{color:#666;font-size:0.9em;line-height:1.4}.stop-card .stop-actions{flex-shrink:0;margin-left:10px}.stop-card .eta-btn{background:linear-gradient(135deg, #10b981 0%, #059669 100%);color:white;border:none;border-radius:8px;padding:8px 12px;font-size:0.85em;font-weight:500;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:5px;box-shadow:0 2px 4px rgba(16,185,129,0.2)}.stop-card .eta-btn:hover{background:linear-gradient(135deg, #059669 0%, #047857 100%);transform:translateY(-1px);box-shadow:0 4px 8px rgba(16,185,129,0.3)}.stop-card .eta-btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(16,185,129,0.2)}.stop-card .eta-btn i{font-style:normal;font-size:1em}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(5px)}.modal-container{background:white;border-radius:15px;width:90%;max-width:800px;max-height:90vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:modalSlideIn 0.3s ease-out}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-50px) scale(0.9)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{background:linear-gradient(135deg, #4f7cff 0%, #4338ca 100%);color:white;padding:20px;display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:1.2rem;font-weight:600}.modal-header .modal-close-btn{background:none;border:none;color:white;font-size:24px;cursor:pointer;padding:5px 10px;border-radius:50%;transition:background 0.3s ease}.modal-header .modal-close-btn:hover{background:rgba(255,255,255,0.2)}.modal-content{padding:0;max-height:calc(90vh - 80px);overflow-y:auto}.route-info-section{background:#f8f9fa;padding:20px;border-bottom:1px solid #e9ecef}.route-info-section .route-details-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.route-info-section .route-details-header h4{margin:0;color:#333;font-size:1.1rem}.route-info-section .route-details-header .service-buttons{display:flex;gap:10px}.route-info-section .route-details-header .service-buttons .service-btn{padding:8px 16px;border:none;border-radius:20px;font-size:0.9rem;cursor:pointer;transition:all 0.3s ease}.route-info-section .route-details-header .service-buttons .service-btn.regular-service{background:#28a745;color:white}.route-info-section .route-details-header .service-buttons .service-btn.regular-service.active{background:#1e7e34}.route-info-section .route-details-header .service-buttons .service-btn.direction-toggle{background:#007bff;color:white}.route-info-section .route-details-header .service-buttons .service-btn.direction-toggle:hover{background:#0056b3}.route-info-section .route-endpoints{display:grid;grid-template-columns:1fr 1fr;gap:20px}.route-info-section .route-endpoints .endpoint .label{display:block;font-size:0.9rem;color:#666;margin-bottom:5px}.route-info-section .route-endpoints .endpoint .name{font-weight:600;color:#333}.last-update{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:white;border-bottom:1px solid #e9ecef;font-size:0.9rem;color:#666}.last-update .refresh-btn{background:#28a745;color:white;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;font-size:0.9rem;transition:background 0.3s ease}.last-update .refresh-btn:hover{background:#1e7e34}.stops-list-container{padding:20px;background:white}.stops-list-container #modal-stops-list .stop-item{padding:15px;border-bottom:1px solid #f0f0f0;transition:background 0.3s ease}.stops-list-container #modal-stops-list .stop-item:hover{background:#f8f9fa}.stops-list-container #modal-stops-list .stop-item:last-child{border-bottom:none}.stops-list-container #modal-stops-list .stop-item .stop-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.stops-list-container #modal-stops-list .stop-item .stop-header .stop-names{flex:1}.stops-list-container #modal-stops-list .stop-item .stop-header .stop-name{font-weight:600;color:#333;margin-bottom:3px;font-size:1rem}.stops-list-container #modal-stops-list .stop-item .stop-header .stop-name-en{font-size:0.85rem;color:#666;font-style:italic}.stops-list-container #modal-stops-list .stop-item .stop-header .stop-sequence{font-size:0.8rem;color:white;background:#f39c12;padding:4px 10px;border-radius:12px;white-space:nowrap;margin-left:10px}.stops-list-container #modal-stops-list .stop-item .eta-info{display:flex;justify-content:space-between;align-items:center;background:#dde9f4;padding:8px 12px;border-radius:8px}.stops-list-container #modal-stops-list .stop-item .eta-info .eta-time{font-weight:600;color:#dc2626;font-size:1rem}.stops-list-container #modal-stops-list .stop-item .eta-info .eta-time.soon{color:#16a34a;animation:pulse 1s infinite}.stops-list-container #modal-stops-list .stop-item .eta-info .eta-status{font-size:0.8rem;color:white;background:#007bff;padding:3px 8px;border-radius:10px}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.stop-eta-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.stop-eta-modal-overlay.show{opacity:1;visibility:visible}.stop-eta-modal-container{background:white;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.3);max-width:600px;width:90%;max-height:80vh;overflow:hidden;transform:scale(0.9);transition:transform 0.3s ease}.stop-eta-modal-overlay.show .stop-eta-modal-container{transform:scale(1)}.stop-eta-modal-header{background:linear-gradient(135deg, #4a90e2, #357abd);color:white;padding:20px;text-align:center;position:relative;justify-content:space-around;display:flex}.stop-eta-modal-close-btn{background:none;border:none;color:white;font-size:24px;cursor:pointer;padding:5px 10px;border-radius:50%;transition:background 0.3s ease}.stop-eta-modal-close-btn:hover{background:rgba(255,255,255,0.2)}.stop-eta-modal-header h3{margin:0;font-size:1.4rem;font-weight:600}.stop-eta-modal-close{position:absolute;top:15px;right:20px;background:none;border:none;color:white;font-size:1.5rem;cursor:pointer;padding:5px;border-radius:50%;transition:background-color 0.2s ease}.stop-eta-modal-close:hover{background-color:rgba(255,255,255,0.2)}.stop-eta-modal-content{padding:20px;max-height:calc(80vh - 120px);overflow-y:auto}.stop-eta-info{background:#f8f9fa;border-radius:8px;padding:15px;margin-bottom:20px;border-left:4px solid #4a90e2}.stop-eta-info h4{margin:0 0 8px 0;color:#2c3e50;font-size:1.2rem}.stop-eta-info .stop-id{color:#7f8c8d;font-size:0.9rem;margin-bottom:10px}.stop-eta-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding:10px;background:#e8f4fd;border-radius:6px}.stop-eta-last-updated{color:#666;font-size:0.85rem}.stop-eta-refresh-btn{background:#4a90e2;color:white;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:0.85rem;transition:background-color 0.2s ease}.stop-eta-refresh-btn:hover{background:#357abd}.stop-eta-refresh-btn:disabled{background:#bdc3c7;cursor:not-allowed}.stop-eta-list{display:flex;flex-direction:column;gap:12px}.stop-eta-route{background:white;border:1px solid #e1e8ed;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.stop-eta-route-header{background:linear-gradient(135deg, #f39c12, #e67e22);color:white;padding:12px 15px;font-weight:600;font-size:1rem}.stop-eta-times{padding:15px}.stop-eta-time-item{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid #f1f3f4}.stop-eta-time-item:last-child{border-bottom:none}.stop-eta-number{background:#4a90e2;color:white;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;margin-right:12px;flex-shrink:0}.stop-eta-time{font-weight:600;font-size:1.1rem;color:#e74c3c;margin-right:10px;min-width:60px}.stop-eta-details{color:#7f8c8d;font-size:0.9rem;line-height:1.3}.stop-eta-no-eta{text-align:center;padding:30px;color:#7f8c8d;font-style:italic}.stop-eta-loading{text-align:center;padding:30px;color:#4a90e2}.stop-eta-loading .spinner{display:inline-block;width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #4a90e2;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width: 768px){.stop-eta-modal-container{width:95%;max-height:85vh}.stop-eta-modal-header{padding:15px}.stop-eta-modal-header h3{font-size:1.2rem}.stop-eta-modal-content{padding:15px}.stop-eta-info{padding:12px}.stop-eta-meta{flex-direction:column;align-items:flex-start;gap:8px}.stop-eta-route-header{padding:10px 12px;font-size:0.9rem}.stop-eta-times{padding:12px}.stop-eta-time-item{padding:6px 0}}@media (max-width: 768px){.container{padding:10px}.header h1{font-size:2em}.stats-container{grid-template-columns:repeat(2, 1fr);gap:15px}.route-grid{grid-template-columns:1fr;gap:15px}.tab{padding:15px 10px;font-size:0.9em}.tab-content{padding:20px 15px}.pagination-container{flex-direction:column;gap:0.5rem}#stats-toggle-btn{padding:0.6rem 1.2rem;font-size:0.8rem}.modal-container{width:95%;max-height:95vh}.modal-header h3{font-size:1rem}.route-endpoints{grid-template-columns:1fr;gap:15px}.service-buttons{flex-direction:column;gap:5px}.stop-eta-modal-container{width:95%;max-height:95vh}.stop-eta-modal-header h3{font-size:1rem}.stop-eta-info-section{padding:15px}.stop-eta-info-section .stop-eta-info{gap:10px}.stop-eta-info-section .stop-eta-info .stop-eta-icon{font-size:2em}.stop-eta-info-section .stop-eta-info .stop-eta-details .stop-eta-name{font-size:1.1em}.stop-eta-info-section .stop-eta-info .stop-eta-details .stop-eta-name-en{font-size:0.9em}.stop-eta-info-section .stop-eta-meta{flex-direction:column;gap:10px;align-items:flex-start}.stop-eta-info-section .stop-eta-meta .stop-eta-refresh-btn{align-self:flex-end}.stop-eta-route .stop-eta-route-header{padding:12px 15px;flex-direction:column;gap:8px;align-items:flex-start}.stop-eta-route .stop-eta-route-header .stop-eta-route-info .stop-eta-route-dest{font-size:0.9em}.stop-eta-route .stop-eta-times{padding:12px 15px}.stop-eta-route .stop-eta-times .stop-eta-time-item .stop-eta-time-info .stop-eta-time{font-size:1em}}

/*# sourceMappingURL=appCtbRealtimeEta.css.map */