/* Shared UI components */
.ui-title-pill{position:fixed;top:15px;left:50%;transform:translateX(-50%);z-index:9999;background:rgba(255,255,255,.9);padding:8px 26px;border-radius:999px;box-shadow:0 2px 12px rgba(0,0,0,.15);font-family:Arial,sans-serif;font-size:16px;font-weight:600;color:#2c3e50}
.ui-legend{position:fixed;bottom:20px;right:20px;z-index:9999;background:rgba(255,255,255,.95);padding:10px 14px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.15);font-family:Arial,sans-serif;font-size:12px}
.ui-legend-title{font-weight:600;margin-bottom:4px;border-bottom:1px solid #ddd;padding-bottom:3px}
.ui-legend-item{display:flex;align-items:center;margin-bottom:4px}
.ui-legend-item:last-child{margin-bottom:0}
.ui-legend-icon{margin-right:6px}
.ui-legend-icon-sigma{background:#3498db;width:20px;height:20px;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;font-size:12px;box-shadow:0 0 5px rgba(0,0,0,.2);margin-right:8px}
.ui-legend-label{font-family:Arial,sans-serif;font-size:13px}
.ui-control-stack{position:fixed;top:15px;left:20px;z-index:9999;font-family:Arial,sans-serif;font-size:12px}
.ui-pill-button{border:none;border-radius:20px;padding:6px 10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.ui-icon-dark{color:#2c3e50}
.ui-panel{margin-top:4px;background:rgba(255,255,255,.98);padding:8px 10px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.15);width:230px;display:none}
.ui-label{display:block;margin-bottom:4px;font-weight:600}
.ui-input{width:100%;box-sizing:border-box;padding:4px 6px;font-size:12px;margin-bottom:6px}
.ui-actions-row{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}
.ui-btn-xs{border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px}
.ui-btn-primary{background:#3498db;color:#fff}
.ui-btn-secondary{background:#e0e0e0;color:#222}
.ui-btn-success{background:#27ae60;color:#fff}
.ui-btn-danger{background:#e74c3c;color:#fff}
.ui-help-text{margin:6px 0 0 0;font-size:10px;color:#7f8c8d}
.ui-section-title{font-weight:700;color:#2c3e50;margin-bottom:6px}
.ui-hidden{display:none}
.ui-modal{background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:12px;font-family:Arial,sans-serif}
.ui-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ui-modal-title{font-weight:700;font-size:13px}
.ui-modal-subtitle{font-size:11px;color:#555;margin-bottom:6px}
.ui-modal-content{overflow:auto}
.ui-table{width:100%;border-collapse:collapse}
.ui-table-sm{font-size:11px}
.ui-table th,.ui-table td{padding:4px 6px;border:1px solid #bdc3c7}
.ui-table thead tr{background:#ecf0f1}
.ui-table th{text-align:left}
.ui-table-center th,.ui-table-center td{text-align:center}
.ui-kpi-muted{font-size:11px;color:#7f8c8d}
.ui-trip-actions{margin-top:10px;border-top:1px solid #ecf0f1;padding-top:8px}
.ui-stop-popup{min-width:250px;font-family:Arial,sans-serif}
.ui-stop-popup h3{margin:0 0 5px 0;font-size:16px;border-bottom:2px solid #3498db;padding-bottom:5px}
.ui-stop-network{margin:0 0 10px 0;font-size:11px;color:#7f8c8d}
.ui-small-title{margin:0 0 5px 0;font-size:12px;font-weight:700}
.ui-empty-note{font-size:11px;color:#95a5a6;font-style:italic}
.ui-row-hover:hover{background:#f5f5f5}
.ui-trip-hidden{display:none}
.popup-card{font-family:Arial,sans-serif}
.popup-card-compact{max-width:300px}
.popup-card-wide{width:360px}
.popup-header{margin-top:0;margin-bottom:5px;padding-bottom:5px;border-bottom:2px solid currentColor}
.popup-title-sm{color:#333;margin-bottom:10px}
.popup-info{margin-top:8px;font-weight:700}
.popup-meta{margin-top:5px}
.popup-updated{margin-top:10px;font-size:12px;color:#7f8c8d;text-align:right}
.popup-scroll{max-height:300px;overflow-y:auto}
.popup-scroll-sm{max-height:165px;overflow-y:auto;margin-top:4px;border:1px solid #ddd;border-radius:4px}
.schedule-table{width:100%;border-collapse:collapse;font-size:12px}
.schedule-table thead tr{background:#f2f2f2}
.schedule-table th{padding:8px;text-align:left;border-bottom:1px solid #ddd}
.schedule-table td{padding:8px}
.schedule-table .row-border{border-bottom:1px solid #ddd}
.schedule-table .cell-border{border-bottom:1px solid #ddd}
.schedule-table .cell-center{text-align:center}
.schedule-table .cell-nowrap{white-space:nowrap}
.schedule-table-compact th,.schedule-table-compact td{padding:4px 6px}
.schedule-table-compact thead tr{background:#f0f0f0}
.trip-row-clickable{cursor:pointer;border-bottom:1px solid #ddd}
.popup-close-row{text-align:right;margin-bottom:8px}
.popup-close-btn{background:#c00;color:#fff;border:none;padding:2px 7px;border-radius:5px;cursor:pointer;font-weight:700}
.popup-chip-danger{background:#dc3545;color:#fff;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:16px;font-weight:700;margin-left:10px}
.popup-flex-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.popup-subtle{margin-bottom:6px;font-size:12px;color:#666}
.popup-section{margin-top:8px}
.popup-section-title{margin:0 0 4px 0;color:#333;border-bottom:1px solid #ccc;padding-bottom:2px}
.popup-section-note{font-size:10px;font-weight:400;color:#666}
.popup-box{max-height:300px;overflow-y:auto;margin-top:4px;border:1px solid #ddd;border-radius:4px}
.popup-empty{padding:8px;text-align:center;color:#777}
.popup-empty i{margin-right:4px}
.popup-marker-a,.popup-marker-b{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border:2px solid #fff;box-shadow:0 0 6px rgba(0,0,0,.4)}
.popup-marker-a{background:#27ae60}.popup-marker-b{background:#c0392b}
.leaflet-control-container .leaflet-top.leaflet-left{top:auto;bottom:80px}
.leaflet-container *:focus,button:focus,input:focus,a:focus{outline:none!important;box-shadow:none!important}


@media (min-width: 1200px) {
  #calendar-control {
    transform: scale(0.9);
    transform-origin: top left;
  }

  .ui-title-pill {
    top: 14px;
    padding: 7px 22px;
    font-size: 14px;
  }

  .ui-legend {
    bottom: 18px;
    right: 18px;
    padding: 9px 12px;
    font-size: 11px;
  }

  .ui-legend-label {
    font-size: 12px;
  }

  .ui-legend-icon-sigma {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
}