.modalContent { padding: 2rem; max-width: 600px; width: 90vw; } .title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1.5rem; } .warning { background: #fef3c7; border: 1px solid #fde047; color: #92400e; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; font-size: 0.9375rem; } .searchContainer { position: relative; margin-bottom: 1.5rem; } .searchInput { width: 100%; padding: 0.875rem 1rem; font-size: 1rem; border: 2px solid var(--border-medium); border-radius: var(--radius-md); transition: all var(--transition); } .searchInput:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .searchSpinner { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; border: 2px solid rgba(59, 130, 246, 0.3); border-radius: 50%; border-top-color: var(--primary); animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } .results { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; } .resultItem { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-md); transition: all var(--transition); } .resultItem:hover { background: white; box-shadow: var(--shadow-sm); } .schoolInfo { flex: 1; min-width: 0; } .schoolName { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .schoolMeta { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--text-secondary); } .schoolMeta span { display: flex; align-items: center; gap: 0.25rem; } .addButton { padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); white-space: nowrap; background: var(--primary); color: white; } .addButton:hover:not(:disabled) { background: var(--primary-dark); } .addButton:disabled { background: var(--secondary); cursor: not-allowed; opacity: 0.6; } .noResults { text-align: center; padding: 2rem; color: var(--text-secondary); font-size: 0.9375rem; } .hint { text-align: center; padding: 2rem; color: var(--text-tertiary); font-size: 0.9375rem; } /* Responsive */ @media (max-width: 768px) { .modalContent { padding: 1.5rem; width: 95vw; } .title { font-size: 1.25rem; } .resultItem { flex-direction: column; align-items: stretch; } .addButton { width: 100%; } .schoolMeta { flex-direction: column; gap: 0.25rem; } }